Ionic入門[ファイル構造解説, ページ追加~画面遷移まで]
この記事は前回Ionic2入門[導入~ブラウザでアプリ起動まで]の続きです。
目次
フォルダ構成
src/pages/
ここに各ページを構成するフォルダが入ります。現在はhomeというフォルダが入っているのがわかります。 その中に入っているファイルを見てみます。
$ ls src/pages/home/ home.html home.scss home.ts
基本的に一つのページは、要素を記述する.htmlスタイルを記述する .scss命令を記述する .tsファイルで構成されます。
src/assets/
ここにアプリ内で使用する画像などを置きます。src/theme/variables.scss
アプリ全体に適用されるフォント、カラーなどを設定しています。最初のうちはあまりいじることはないでしょう。src/app/
app.component.ts アプリを起動したら最初に呼び出されるコンポーネントです。このコンポーネントの下に各ページのコンポーネントがぶら下がっているイメージでいます。app.html
app.component.tsで読み込んでいます。htmlのエントリポイントという認識でいいと思います。(本当はindex.htmlだが)app.module.ts
アプリ内で、どのファイルをコンポーネント(ページ)として読み込むのかを宣言するファイルです。 ページだけではなく全てのモジュールをここに記述します。 デフォルトでは、MyAppというコンポーネントがroot指定されているのがわかります。main.ts
いじらないので割愛app.scss
Ionicのコンポーネントのスタイルを変えたい場合など、ここにスタイルを記述します。アプリ全体に適用されます。www/
ionic serveなどで、各ファイルをコンパイルしてまとめられた結果がこのファイル以下に入っています。 ブラウザはこのフォルダ以下のファイルを読み込んで実行しています。config.xml
アプリの情報、設定を記述するファイルpackage.json
nodeモジュールの依存関係を記述するファイル
他にもファイルはありますがとりあえずここらへんがわかれば開発できるでしょう！
新しいページを作ってボタンタップで移動しよう
まずは、新しいページ(ここではSubPage)を作成します。
$ ionic generate page SubPage
そうすると、page以下にsub-pageフォルダが作成されているのがわかります。
$ ls src/pages/sub-page/ sub-page.html sub-page.scss sub-page.ts sub-page.module.ts
ここでsub-page.module.tsが生成されましたが、今回は必要ないので削除します。
$ rm src/pages/sub-page/sub-page.module.ts
モジュールの宣言の仕方は、app.module.tsで一括管理する方法と、各ファイルでエクスポートする方法の二つがあるのですが、 今回はapp.module.tsで一括管理する方法で実装します。なので先ほどのファイルは削除しました。
そして、app.module.ts内でSubPageを宣言します
app.module.ts
import { SubPage } from '../pages/sub-page/sub-page';
そしてdeclarationsとentryComponentsプロパティの要素にSubPageを追加します。
これでapp.module.tsでの宣言は終わりです。
次に、HomePageにクリックするとSubPageに遷移するボタンをつけます。
generateコマンドを使って作成したtsファイルにはデフォルトでNavControllerという画面遷移をコントロールするモジュールがインポートされ、コンストラクタでインスタンスが作られています。
それを利用して次の関数を宣言します。
home.ts
goSubPage() { this.navCtrl.setRoot(SubPage); }
SubPageのインポートを忘れないように
import { SubPage } from '../sub-page/sub-page';
この関数がボタンをクリックした時に呼ばれるようにすればいいですね。
home.html内の、</ion-content>の上に一行追加します。
home.html
<button ion-button (click)="goSubPage()">次ページへ</button>
これで変更は完了しました！
ブラウザで確認すると
と、ボタンが追加されています。これをクリックすると
遷移できました！今回はこれで完了です！
次回はionicで開発するために押さえておきたい最低限のAngular2の記法をまとめます
Ionic2入門[導入~ブラウザでアプリ起動まで]
目次
ionicとは
ionic(ここではionic2を扱います)はTypeScriptで書くUIフレームワークです。
TypeScriptはJavaScriptに静的型付けを可能にし、大規模アプリケーションの開発をサポートします。
似たようなものとして、React Nativeが挙げられますが、Ionicはデザインが出来なくてもハイクオリティーなアプリがスピーディーに作れるという所で優れていると思います。
Linuxコマンドを使えるようにする
シェル(Linuxコマンドが使えるプログラム)を起動するコマンドラインインターフェースです。
Macでは標準でインストールされているターミナル、WindowsだとBash on Ubuntu on Windowsというものでbashが使えそうですね。
筆者はMacのターミナルを使います。
Nodeの環境を用意する
nvm + Node.js + npmのインストール - Qiita
この記事などを参考にしながら、nodeとnpmが使えるようにします。
nvmとnpmとnodeの関係が少しややこしいと思ったのでざっくりまとめると
nvm
npm,nodeのバージョンを管理するモジュール
npm
nodeのパッケージを管理するモジュール
図を作ってみたかったので作りました。(ちょっと違う気がするけどスルーしてください、、作ってみたかっただけ！)
$ node -v v6.10.3 $ npm -v 3.10.10
上記のようにバージョンが出たらOK
ionicとcordovaをインストールする
$ npm install -g ionic cordova
アプリの雛形を作成する
$ ionic start myApp blank --v2
ここではblankというプレーンなテンプレートを使います。他には左にサイドメニューが付いているsidemenuと、画面下にナビゲーションバーが付いているtabsがあります。 --v2は、バージョン2を指していて、typescriptで書かれたアプリが生成されます。
$ cd myApp $ ionic serve
を実行すると、ブラウザが自動起動し
のように表示されたら今回は完了です！
次回はまず生成されたファイルの構造を簡単に解説し、ページにInputコンポーネントとButtonコンポーネントを配置して、ボタンを押したら次のページに遷移するコードを書きます。
