ionic2でハイブリッドなアプリ開発:チュートリアルをチュートリアル:チュートリアル用テンプレートで入門

Posted on Posted in 趣味的なIT・ネットの話題

ionic2でハイブリッドなアプリ開発:チュートリアルをチュートリアル:サンプルプロジェクトを導入して実機で実行するまで

この記事の通りですが、とりあえずionic2のサンプルをそのままならば実行できる状態になりました。が、もちろんそれでは何も面白くありませんので、チュートリアルの本編を敷衍して、アプリ開発の流れを俯瞰します。

なお可能であれば以下のionicチームによるAngular2の解説を読んでおくと、よりスムーズに理解できると思います。が、たぶん読まなくても何とかなります。

Learn Angular 2 · Learn Angular 2

プロジェクトフォルダの作成

まずプロジェクトのフォルダを作成します。前回、紛らわしいのは避けるようにと書いたくせに、project2と付けてしまいました。tutorialとなっている引数は、プロジェクトのテンプレートを指定する部分です。tutorialは公式が提供しているionic2のチュートリアルのためのテンプレートです。何も指定しない場合には、tabs starterテンプレートが使用されます。

このとき–tsオプションを付けるとTypeScript用の構成となります。typingsフォルダがあったり、tsconfig.jsonの中身が違ったりと、若干構成が変わるようです。

スクリーンショット 2016-02-20 20.16.53

プロジェクトフォルダに移動してionic serveするとブラウザでテンプレートの動作を確認できます。

ちなみにですが、ionicには公式IDEは無いようですが、オススメ環境はあるようです。

Ionic 2 Resources | Editors and IDEs – Ionic 2 Developer Preview – Ionic Framework

私はもともとatomを使っていたのですが、さらにオススメとあれば使わない手はありません。atomで環境を構築する事にします。

スクリーンショット 2016-02-19 18.47.37

コードハイライタや補完機能はもともと備わっているので、とりあえずbrowser-plusを入れて、全画面表示でコードとブラウザの両方を同時に見られるようにしてみました。Terminal-Plusも入れているので、ターミナルも同一画面内で操作できます。これでmonacaのcloudIDEっぽくなりました。

フォルダ・ファイル構成

ionic startを実行してできあがるフォルダツリーはCordovaの標準的な構成らしいです。そのためCordvaプラグインをインストールすることができますし、プラットフォーム特有のファイルを置くこともできます。

www/index.htmlがアプリの一応のエントリポイントです。

アプリに必要となるスクリプトをこのHTMLから読み込みます。ですが、このファイルはcssを読み込んだり、bootstrapを読み込んだりするためだけのものに過ぎません。ionicの開発でこのファイルをいじることは少ないようで、実際にはapp/app.jsをエントリポイントとして扱います。ionic開発ではこのappフォルダにコンパイル前のコードが収蔵されていて、作業の中心的な場所になります。このフォルダ内のコードはionic serveの実行時にトランスパイルされるので、appフォルダではES6やTypescriptが使用できます。

app.jsのMyAppクラスには以下のデコレーターが付いています。すべてのionicアプリケーションはルートになるコンポーネントを持ちますが、Appデコレーターを付けるとルートと扱われます。

指定されているtemplateUrlがbuildフォルダになっていますが、このファイルはapp/app.htmlがビルド時にコンパイルされたものなので、編集する際にはapp/app.htmlを編集します。

app.htmlテンプレートの構成

このファイルには、ion-menuタグとion-navがあります。コード量ではion-menuの占める割合が大きいですが、これはハンバーガーアイコンをクリックして引き出されるメニューを記述しています。そのためion-menuの記述内容は最初は一切画面に表示されていません。

id属性で指定されている名前は、後でこのコンポーネント(ion-menuとかion-navのひとまとまり)をgetComponent関数で指定するために使用します。

Menus

起動直後の画面では、Menusを使っています。

Menus : ionic 2 Components – Ionic 2 Developer Preview – Ionic Framework

Menusでメニューを記述するためにはion-menuを、メニューからナビゲートされるページにはion-navを指定します。

ion-menuにはcontent属性があります。これはどのコンテンツで画面がドラッグされたときに、メニューを開閉させるかを指定するところです(メニューにとってのメインコンテンツはどれか)。

スクリーンショット 2016-02-20 12.29.33

両方contentなのでややこしいですが、左側のオレンジのcontentがion-menuの属性です。[]で囲むと、Angular2の機能によってバインディングされ、代入された内容に追随するようになります。代入されているcontentはローカル変数です。ion-navの方に#contentと指定されているのが分かると思いますが、これはAngular2におけるローカル変数の指定で、ローカル変数であるcontentにion-navが代入されたことになります。結果、ion-menuのcontentにはこのコードの下部のion-navが代入された事になります。

*ng-forはAngular2のディレクティブで配列をイテレートします。ここではpages配列を順番にpに代入しながら配列の最初から最後まで繰り返しを行います。

(click)もAngular2のディレクティブで、要素がクリックされたときに指定された関数を実行します。app.js内にopenPage関数が定義されていて、開いているメニューを閉じてからsetRootでnavのページを変更しています。

{{p.title}}はDIによって変数がレンダリングされる部分です。これは後で解説します。

スクリーンショット 2016-02-20 12.12.57

ion-nav

ページ本文がion-navの方です。中身が無いのは、root属性で指定されたページがロードされるからです。

Navigation : Ionic 2 Components – Ionic 2 Developer Preview – Ionic Framework

[root]もバインディングでrootPageが指定されています。これはapp.jsのthis.rootPage変数です。この変数にはHelloIonicPageが代入されています。

HelloIonicPageには冒頭部で./pages/hello-ionic/hello-ionicがインポートされています。インポートしているのはhello-ionic.jsです。

すべてのページはこのようにクラスとコンパイル後のテンプレートで構成されます。build/pages/hello-ionic/hello-ionic.htmlの実体はapp/pages/hello-ionic/hello-ionic.htmlなのでここにページの内容が記述されています。

スクリーンショット 2016-02-20 22.37.16

tutorialのapp以下のフォルダ・ファイル構成は、フォルダ名と同名のhtml/js/cssとなっています。これはionicにとって必須のものでは無いものの、ファイルをきちんと整理する観点から推奨されるとのことです。

Page

Pageデコレーターはインポート元であるnode_modules/ionic-framework/decorators/page.jsに実装されています。ここはフレームワーク部分ですからユーザーが触ることはありません。

Page – Function in module – Ionic Framework

Pageデコレーターが付けられると、Angularのビューとして構成されるので、セレクタを使わなくても動的に内容が変更できるページになります。PageはNavControllerによりナビゲーションをさせることができます。

一見して、ブラウザに最初表示された内容であることがわかると思います。

スクリーンショット 2016-02-19 20.35.20

上部の表示が変なのは私がコードを適当にいじったからです。ただ適当にいじったとおりに表示が変わっているのが分かると思います。

Pageのテンプレートはデコレータのところで直接記述することもできます。が、ビューの分離や可読性の向上の観点からすると分離をすべきでしょう。

スクリーンショット 2016-02-20 22.43.49

Live reload

ここでコードを書き換えてみます。

スクリーンショット 2016-02-19 20.37.39

この変更をして保存をした後、5秒ほどすると、ブラウザが自動的にリロードされ、ブラウザに表示されている内容が書き換わっています。

スクリーンショット 2016-02-19 21.57.17

ターミナルのionic serveが作動していることが条件ですので、上手く変更されない場合には、ターミナルの動作状況を確認してください。変更時にはionic serveが変更を捕捉したことがターミナルに出力されています。

ion-navbar

hello-ionic.htmlの下記の部分(ion-navbar)は、画面上部に表示されているハンバーガーアイコンとタイトルを記述しています。この中にion-nav-itemsやion-titleを記述して、その時々に応じたバーを表示させます。

この中の「*navbar」は現状効能が不明です。削除してもサンプルはそのまま動作しました。

buttonにmenuToggleというキーワードが入っています。これはionicが備えているディレクティブで、ボタンにメニューをトグルする機能を持たせることができます。

MenuToggle – Class in module – Ionic Framework

ion-contentが本文部分ですが、この中のbuttonもmenuToggleが記述されているのでメニューをトグルします。

NavController

サイドメニューでMy First Listをタップするとpagesのcomponentで指定されているListPageに遷移します。ListPageは./pages/list/listからインポートされていますので./pages/list/list.jsのクラスです。

ionicのNavigationはページ間に親子関係があるページナビゲーションを実現するためのコンポーネントです。NavControllerをコンストラクタで変数にバインドすれば、コード内でNavControllerを使用できるようになります。

Navigation : Ionic 2 Components – Ionic 2 Developer Preview – Ionic Framework

ページ同士の関係はスタックになっているので、NavControllerでpushすればページを追加して遷移、popをすれば今のページを取り除いて下のページに戻ります。

list.htmlのbuttonのclickにitemTapped関数が指定されています。クリックするとItemDetailsPageにpushされて遷移します。

コンストラクタの中はhtmlで使用するitem配列を作成しています。乱数で生成されているので、このコンストラクタが呼ばれる度(ページに来る度)にアイコンが変わります。

なおこのコードには下記の下線部のコードがありますが、使用していません。次のコードの関係でゴミが残ってしまったのでしょう。

スクリーンショット 2016-02-20 14.04.40

DIを体験してみる

せっかくなのでここでDIの実験をしてみたいと思います。list.htmlの10行目の以下の様に書き換えます。ngforの実行時に変数iにインデックス番号を代入し、クリック時に実行される関数にインデックス番号を引数として渡します。

list.jsの28行目以降を以下の様に書き換えます。もともとのpushをコメントアウトして、items配列の要素のtitleを書き換えます。

これによりタップしたリストアイテムのtitle部分がpushedに書き換わりました。ポイントはjsのロジック上は、ビューの要素を変更する処理を行っていないということです。ただitemsの各要素はリストの要素にバインドされているので、itemsの個別の変数を変更すれば、それによって作られたリストの中身が自動的に変更されます。

スクリーンショット 2016-02-20 19.09.17

NavParams

ItemDetailsPageは../item-details/item-detailsからインポートされていますので、中身はitem-details.jsです。

ここでのポイントはNavParamsです。NavParamsはデータを保持できるオブジェクトです。

NavParams – Class in module – Ionic Framework

一つ前のlist.jsのitemTapped関数内のpushでitemという引数を渡しています。pushはページを移動するだけで無く移動先のページに対して、パラメーターを渡すことができます。

NavController – Class in module – Ionic Framework

この場合で行くとlist.js内のitemをitemというラベルを付けて、次のページに渡すということです。そして次のページではNavParamsを使って、navParams.get(‘item’)と指定することで渡されたデータを取得できます。

this.nav = nav;は無意味な記載でコメントアウトしてもちゃんと動作します。

取得されたデータはselectedItemに代入されており、まず*ngIfでの表示のコントロールに使用されています。当然selectedItemは中身があるのでdivが表示され、タイトルがレンダリングされます。

 

チュートリアル完了

チュートリアルはここで完了です。今後は以下のコンテンツを参照して欲しいとのこと。Platform sectionとDeveloper resources section へのリンクもありましたが、リンク切れでした。

Ionic 2 Components – Ionic 2 Developer Preview – Ionic Framework

Ionic Forum

 

#ionic2 #初心者 #入門 #チュートリアル #解説 #TypeScript #Angular2


Facebooktwittergoogle_pluspinterestlinkedinmail
納得したらすぐにシェア!