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

川内康雄 2022年2月23日

ionic2でハイブリッドなアプリ開発：チュートリアルをチュートリアル：サンプルプロジェクトを導入して実機で実行するまでこの記事の通りですが、とりあえずionic2のサンプルをそのままならば実行できる状態になりました。が、もちろんそれでは何も面白くありませんので、チュートリアルの本編を敷衍して、アプリ開発の流れを俯瞰します。なお可能であれば以下のionicチームによるAngular2の解説を読んでおくと、よりスムーズに理解できると思います。が、たぶん読まなくても何とかなります。Learn Angular 2 · Learn Angular 2

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

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

$ cd project2$ ionic serve

ちなみにですが、ionicには公式IDEは無いようですが、オススメ環境はあるようです。Ionic 2 Resources | Editors and IDEs – Ionic 2 Developer Preview – Ionic Framework私はもともとatomを使っていたのですが、さらにオススメとあれば使わない手はありません。atomで環境を構築する事にします。

コードハイライタや補完機能はもともと備わっているので、とりあえず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を編集します。

      Pages                      {{p.title}}

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

Menus

起動直後の画面では、Menusを使っています。Menus : ionic 2 Components – Ionic 2 Developer Preview – Ionic FrameworkMenusでメニューを記述するためにはion-menuを、メニューからナビゲートされるページにはion-navを指定します。ion-menuにはcontent属性があります。これはどのコンテンツで画面がドラッグされたときに、メニューを開閉させるかを指定するところです（メニューにとってのメインコンテンツはどれか）。

両方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）ではなく、テンプレートの補間によって変数の値がレンダリングされる部分です。これは後で解説します。

ion-nav

ページ本文がion-navの方です。中身が無いのは、root属性で指定されたページがロードされるからです。Navigation : Ionic 2 Components – Ionic 2 Developer Preview – Ionic Framework[root]もバインディングでrootPageが指定されています。これはapp.jsのthis.rootPage変数です。この変数にはHelloIonicPageが代入されています。

@Page({  templateUrl: 'build/pages/hello-ionic/hello-ionic.html'})export class HelloIonicPage {  constructor() {  }}

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

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

Page

Pageデコレーターはインポート元であるnode_modules/ionic-framework/decorators/page.jsに実装されています。ここはフレームワーク部分ですからユーザーが触ることはありません。Page – Function in module – Ionic FrameworkPageデコレーターが付けられると、Angularのビューとして構成されるので、セレクタを使わなくても動的に内容が変更できるページになります。PageはNavControllerによりナビゲーションをさせることができます。

ionic $ ∆ Copying HTML√ Matching patterns: app/**/*.html√ HTML copied to www/buildHTML changed: www/build/pages/hello-ionic/hello-ionic.html

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

Toggle Menu

NavController

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

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

import {Page， NavController， NavParams} from 'ionic/ionic';@Page({  templateUrl: 'build/pages/item-details/item-details.html'})export class ItemDetailsPage {  constructor(nav: NavController， navParams: NavParams) {    this.nav = nav;    // If we navigated to this page， we will have an item available as a nav param    this.selectedItem = navParams.get('item');  }}

ここでのポイントは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.title}}

You navigated here from {{selectedItem.title}}

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

チュートリアル完了

チュートリアルはここで完了です。今後は以下のコンテンツを参照して欲しいとのこと。Platform sectionとDeveloper resources section へのリンクもありましたが、リンク切れでした。Ionic 2 Components – Ionic 2 Developer Preview – Ionic Framework Ionic Forum #ionic2 #初心者 #入門 #チュートリアル #解説 #TypeScript #Angular2″””