env_2.md

開発環境を構築しよう。

PC,OSの推奨環境は以下になります。

1. Windows 10
2. Mac OS sierra かそれ以上 (Mac OS 10.12以上）

ブラウザの推奨環境は以下になります。

1. firefox または、Chrome

今回は　firefoxを利用してハンズオンします。

（ サポートデスクを希望する方も最低限以下のものをダウンロードしておいてください。　）

Mac OS　の方向け　環境構築の前に必要なもの （Windowsの方はこの工程はスキップしてください）

1. Homebrewをダウンロードしてください。 「Launchpad」（ロケットのアイコン）　から　「その他」　を開くと、　「ターミナル」というアプリケーションがあります。 ターミナル　のアプリケーションを起動して、黒い画面のカーソルが点滅している箇所に、下記のコマンドをコピーしてペーストしてください。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

色々な文字が表示され続けますが、終了するまで待ちます。 仮に、途中で何かメッセージが出て、　Y/n を選ぶ箇所がありましたら、　y　と入力して　Enterで進めてください。

ダウンロードしておくもの

1. VSCODE　（普段使っているプログラミング用のテキストエディタでも可）

2. PostgreSQL macの人は、PostgreSQL APPが便利
   Windowsの人は、PostgreSQLのバージョン10.6をインストールしてください。Windowsの場合、64bit版と32bit版の2つあります。お使いの環境に合わせて選んでください。
   

   もし、どちらを選ぶかわからないようでしたら、両方ダウンロードだけしておいて、サポートデスクに申し込みしてください。

インストール

1. VSCODE　
2. PostgreSQL
3. VSCODEへのElixir,Vueのモジュール
4. Elixir
5. node.js 上記を全て行ってから以下をインストールする。
6. Phoenixframework

インストールするもののシンプルな説明

今回は地図にオープンデータを利用してポイントを追加するWebアプリケーションを作成します。

Webアプリケーションとは、

Webアプリケーションの簡単な説明としては、以下のようなやり取りをして動くしくみです。

クライアントマシン　←→　サーバーマシンを繋いでデータのやり取りをする仕組み、
大雑把に言うと、自分のPCとWebで繋がってるどっかに置いてあるPC間でやり取りする仕組みです。

通常は、ブラウザと呼ばれるソフトウェアを介して利用します。

ブラウザ側ではユーザーが操作したデータをサーバー側に「リクエスト」します。
サーバー側はリクエストを受けたデータを利用して、計算したり、データベース（DB）に登録したり
して、ブラウザ側に結果をレスポンスします。

普段、ブラウザで見ている情報は、ブラウザ側にデータを保存するか、サーバー側にデータを保存するか、データベース
に保存する等しています。
そして、このデータをブラウザ側とサーバー側のやり取りをする際に　APIと呼ばれるブラウザとサーバーを繋ぐ技術を
使います。

開発概要

今回は、簡単にブラウザを利用して使えるものを構築します。
構成は
ブラウザ側（JavaScript,HTML,CSS)で作成　サーバー側(Elixir)で作成します。

サーバー側で動くものを作る助けをしてくれる技術として、(Phoenixfreamwork)というフレームワークを利用します。

サーバー側では、DBに登録なども扱うため、データベースとして、PostgreSQLというソフトをインストールします。
また、Node.jsを利用しますので、インストールします。
サーバー側の技術として、Erlangという言語で作られたバーチャルマシン（VM)も使いますが、Elixirをインストール
すると、一緒にインストールされます。
そして、最後にElixirで動く、WebServerを構築する際に助けてくれるフレームワークPhoexniをインストールします。

これで、今回の開発の準備が整いました。

他に利用する技術

今回開発で使う技術として、他にも
leaflet.js　地図を簡単に作る為のJavaScriptのライブラリ
Turf.js　地図に簡単にポイント追加や、２点間距離などの計算をしてくれるJavaScriptのライブラリ

補足

開発には、VSCODEというテキストエディタを利用して開発していきますが、ターミナルも利用しますので、
ターミナルの簡単な使い方は把握しておくと便利です。

MacやLinux系をお使いの方はリナックスコマンド　を覚えておくと便利です。　http://www.redout.net/data/command.html
Windowsをお使いの方は、コマンドプロンプトを使う際に、dosコマンドを覚えておくと便利です。　https://www.pg-fl.jp/program/dos/doscmd/

利用するコマンド（抜粋）

今回、よく使うコマンドは、

・　現在のフォルダ内を表示するコマンド
macの場合には　ls
winの場合には dir

・　フォルダを移動するコマンド(mac,win共通）
cd フォルダ名
フォルダ名のフォルダの中に移動します。

cd ../
フォルダの中からその上位の階層に移動します。

.フォルダを作成するコマンド(mac, win共通）
mkdir 作りたいフォルダ名