ionicでアプリ開発入門 プロジェクトファイルの作り方

ionicでアプリ開発入門  プロジェクトファイルの作り方

前回まででionicを使う準備は完了しています。
ここからはアプリをつく方法をひたすら積み上げていくだけですね。

ionicは基本的にCLIで操作していきます
一応GUIでもあるみたいですが、私は使ったことが無いのでurlだけ
creator.ionic

CLIとはなんぞや

CLIとはCommand Line Interface(コマンド・ライン・インターフェース)の略です。
まんま、コマンドラインで操作するもの、でしょうかね。
ぶっちゃけCUI、CLI同じです。>< 違ったらごめんね。
基本的にはターミナルで操作しているのであなたはもうCLIマスターです。
マウス操作を使わずにコマンドだけで操作して色々するツールです。
実際にはコードをコピペしたり、カーソルを合わせたりちょいちょいマウス使ったりもしてますが、基本的にはキーボードでコマンド入力して操作するでしょう?

ここで少し脱線して便利なコマンドを教えましょう。
今の状態のまま、ターミナルで

xdg-open .

と打ってみてください。
中々便利そうにつかえるとおもいませぬか。

では最後の準備作業としてプロジェクトを置く場所を決めましょう。
今後はここでアプリ制作を行っていきます。

作業場所を決めよう

ターミナルを開いて、
アカウントのhomeディレクトリへ行き
ionicの作業場を作っておきましょう

cd
mkdir ion

homeに新しくフォルダが作られます。
ディレクトリの作成
面倒であればGUIからフォルダ作成からでも大丈夫ですよ。

では続き、ターミナルから先程作ったionディレクトリへ移動

cd ion

ionicプロジェクトファイルの作成

ではionicのプロジェクトファイルを作りましょう。

ionic start

ionicプロジェクトを作成する時まずはじめにやることですね。
スタートさせなさい。そのままです。
ionicアプリを作る時、何見なくても良いように暗記すると良いでしょう。
ionic start

ionicの設定は選択形式で選んでいきます

ionicプロジェクトを作成する時に色々入力する必要は有りません。
対話形式でプロジェクトの設定を決めていきます。
対話形式の内容をリスト化しておきますね。

  • プロジェクト名の入力
  • テンプレートの選択
  • cordovaやandroidを使用するか
  • Ionic Pro SDKを使用するか

必要な4項目を決めていくだけで作成が完了します。

プロジェクトファイル名を入力

Please enter the full name of your app. You can change this at any time. To
bypass this prompt next time, supply name, the first argument to ionic start.

? Project name:

翻訳:
あなたのアプリのフルネームを入力してください。これはいつでも変更できます。に
次回このプロンプトをバイパスして、イオン開始の最初の引数nameを指定します。

プロジェクト名を決めてくださいってことですね。

? Project name: testProject

まず1回目なのでtestProjectと命名しました。
次、エンター!

テンプレートの選択

Let's pick the perfect starter template!
Starter templates are ready-to-go Ionic apps that come packed with everything
you need to build your app. To bypass this prompt next time, supply template,
the second argument to ionic start.

翻訳:
完璧なスターターテンプレートを選んでみましょう!
スターターテンプレートは、すぐに使える即効性のあるイオニアアプリです。
次回このプロンプトを無視するには、テンプレートを指定し、
イオン開始の第二引数。

ionicはhtmlタグとかあまり知らなくても最初から綺麗な見た目を実装してくれるすぐれものです。
逆に、思い通りの見た目にしようとするとちょっと手間がかかります。
テンプレートはいくつか公開されており、自分で作らずともionic storeで販売、ダウンロードすることもできます。
ionic storeはこちら

今回は、初回なのでtutorialを選択しましょう。
キーボードの十字で選択してください。
-> tutorial
Enter

プロジェクト名を決定

それぞれのテンプレート機能と説明

ここでそれぞれのテンプレートの簡単な解説をしておきましょう。

tabs
タブがついたテンプレート
blank
blank、まっさらなページのテンプレート。タブとか余計なものをつけず1から作りこむときに使ったりします。なれるとこちらの方が便利かも
sidemenu
文字通りサイドメニュー、ハンバーガーがついてるテンプレート
super
webサイト作る時に便利かも。ログインがめんとかいろんな機能がモリモリ入っているテンプレート、モデル?
tutorial
チュートリアルに使われるテンプレート。あれってどうやって実装するんだっけ?と言う時に個別にインストールしてソース見たりできます
aws
amazonのAWS用に特化したテンプレート。連携しやすいのかな

アプリ連携の有無

would you. like to integrate your new app with Cordova to target native iOS and Android?
(y/N)

ここは1回だけNを入力してenterしておきます。
cordovaを入れるかどうか、それが問題だ

cordovaやandroidを使用する場合

次回からですが、アプリ作成をするときにはyを選択してきます。
Nにしておくとcordovaがインストールされないまま環境を構築します。
今回だけは不要

ionic Pro SDKのインストール

? Install the free Ionic Pro SDK and connect your app? (Y/n)
n

ionic Pro SDKのインストール選択
ionicはSDKを提供しております。
私は使ったことがありませんが
ビルドやデプロイをしやすくしてくれるSDKらしいですね。
いつか使ってみよう。。たぶん
https://ionicframework.com/docs/pro/

プロジェクト作成完了

以上でプロジェクトの作成は終了となります。

ここからは動作のテストを行いましょう

動作テスト

現在ターミナルは
/home/ion/
にいると思います。

プロジェクトができているか見てみましょう

ls
testProject

testProjectが作成されていればOKです。
では、testProjectに移動て、lsで中を見てみます。

cd testProject/
/ion/testProject$
ls
ionic.config.json node_modules package-lock.json package.json src tsconfig.json tslint.json

プロジェクトファイルの中

ionic startした時にデフォルトで作成されるファイル群です。

  • ionic.config.json
  • node_modulesディレクトリ
  • package-lock.json
  • package.json
  • srcディレクトリ
  • tsconfig.json
  • tslint.json

色々できてますね。
それぞれの説明は作りながら順次説明してきます。
基本的に操作する箇所はsrcフォルダだけですかね。
moduleを追加する場合はjsonファイルを書いたりせずコマンドで追加していきます。

infoで確認

ではionicのバージョンなど色々見てみます。

ionic info

ionic info

人から受け継いだプロジェクトファイルを見るときにionic infoしておくとnodeやnpmのバージョンを確認できます。
その他ionicのバージョンも確認できますね。

ブラウザで画面を確認しよう

ではブラウザでどういう表示になるのか確認してみましょう。

ionic serve

ionic serveコマンドをたたくとサーバー内でwebサイトが構築されます。
といっても簡易的なものですのでサーバーの設定などはしなくて良いです。
nodeが勝手にやってくれます。

ionic serve

コマンドが流れて~

ブラウザが勝手に立ち上がります。
私は前にChromeをインストールしたのでクロームが自動起動します。
chromeのインストールはこちら

ブラウザで確認
どうでしょう、インストールした段階でテンプレートがここまで作成されます。
ハンバーガーメニューをクリックするとメニューが横から出てきます。
ちょっといじってみて、ある程度わかったら
ターミナルでCtrl + Cを押してプロセスを終了させましょう。

どうでしょう、ここまでで
プロジェクトの作成、ブラウザでionicの起動まで行いました。
次回はtutorial画面を少しいじって見た目やらなにやらを変えていきたいと思います。

2019.09.12.動画にしてみたよ