Webデザイナー(但しプログラミングスキルwが必須)でもスマホアプリが作れるらしいフレームワーク、Ionicの開発環境を整えるまでのメモ。Ionicのとかハイブリッドアプリ系の話が出ると、よくWebデザイナーでもOK・・・って言うけど、フロントエンジニア寄りのデザイナーっていうか、意識高い系というか、明らかにお高くとまっているタイプ限定の話だから。
だって、大手ホワイト優良企業のWebデザイナーはテンプレのバナー製作と、ルーチンのテンプレHTML更新くらいしかしないもんね!! それで年収1千万貰えるし（嘘)
現場的なことを言うと、ガチ年収1千万のプログラマーが別に在籍してるから、素人のWebデザイナーがプログラミングなんてする機会ないんだもん、と正論で開き直っても仕方ないので、渋々メモしていくぞ。
IonicはAndroid Studioみたいに入れればポーンっと自動設定されたりしないので、手順通り作業する。メモしてあれだが、将来、バージョン変わったりするとこの通りいかなくなるだろう。
参考書籍
Node.jsをインストール
ターミナル(Winはコマンドプロンプト)で下記コマンドを入力。
node-v
バージョンなどが表示されるとすでにインストール済みだが、プログラミングしないWebデザイナーは公式サイトから別途インストールしないとならない。
解説するとNode.jsはJavascript開発のなんか。
Macではターミナル、Windowsではコマンドプロンプトという黒い画面のアレを使った作業。というか、宗教上の理由でハイブリッドアプリと言えど、MacじゃないとiOSアプリは作れないので注意が必要。勉強だけだったらWindowsでもいいし、世界のスマホの85%のAndroidだけ開発できれば十分、という人もWindowsでもいい。
日本のカ自分ら高みにいますよ、みたいなiOSユーザーにもアプリを提供したい場合は遅かれ早かれ、Macを買うしか道がない。
Ionic CLIをインストール
Ionicのコマンドを動かすことができるようなやつ。
Maaの場合
sudo npm install ionic -g
Windowsの場合
npm install ionic -g
インストール完了したら
ionic -v
と入力してバージョンが表示されたら成功。
Gitをインストール
これもプログラミングをしない芸術家寄りのWebデザイナーには使うことがないが、IonicではGitを使ってバージョン管理したりするのでインストールする。
MacでXcodeをインストール済みの場合はすでに入っているはず。
git –version
で調べられる。
入っていない場合、これも時代によってやり方が変わるが、公式サイトなど調べてインストールしよう。
その他、必要なツール
Macの場合
・Xcode
Windows、Mac共通で
・Android Studio
・Visualstudio code
拡張機能でAngular Langage serviceを入れる
ここまででツール類は準備完了。
開発を始めるためのセットアップ
デスクトップなりに開発用のフォルダを作る。仮にionicという名前にする。
ターミナルでもコマンドプロンプトでも
cd
というコマンドを入れるとカレントディレクトリに移動するが、
cd と入れたら先ほどのionicフォルダをターミナルにドラッグすると、そこのフォルダに操作対象が移動される。
次に下記コマンドを入れる。
ionic start –type=angular
設定がうまくできていてインストール手順などが変わっていなければ、チュートリアル用のファイル類がフォルダに作られるはず。とりあえず準備完了。
