アプリ開発

アプリ開発

Ionic 開発環境の準備手順メモ

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

設定がうまくできていてインストール手順などが変わっていなければ、チュートリアル用のファイル類がフォルダに作られるはず。とりあえず準備完了。