[初心者向け] Ionic2プロジェクトにページを追加する方法

この記事は、「[初心者向け] たった3つの手順ではじめるIonic2 (Angular2)」の続編となります。

Ionic2初期プロジェクトのディレクトリ構成

まずは、Ionic2のディレクトリ構成をみてみましょう。ぜひ手元のプロジェクトと見比べてもらえればと思います(gulpファイルやpackage.jsonなどは画像から割愛しております)

スクリーンショット 2016-04-09 12.11.09

「app/」の中が開発スペース、www/が公開フォルダになります。「app/」に、html,css,tsを入れれば、gulpで自動的にコンパイルされて、「www/」にその結果が反映される形です。その他の親フォルダは、ハイブリッドアプリ構築に必要な「resources/」であったり、最初にページを構築していくのには必要ないので割愛します。
 
で、「app/」の中をみていただくと、「pages/」があります。Ionic2的には、ここにページをつくっていく形になります。
「theme/」が、sassのファイル群となっており、「app.ts」は起動用のファイルです。
イメージとしては、最初にapp.tsが起動して、app.tsで設定されているページ(初期は「TabsPage」)が呼び出され、そのページからthemeを利用する感じとして捉えていただければと思います。
 
「app/」以下の親ディレクトリは、初期では「app/」と「theme/」があり、例えばDirectiveを作ったらここに「directive/」を追加しますし、http周りだけDI前提に外出ししておくなら「data/」を追加することになります。
 
ですので、単にページを追加するだけなら、「app/pages/」の中身だけさわる形となります。

フォルダはコンポーネント単位

Ionic2では、フォルダ毎にページをつくる形となっています。初期だと、「page1/」とかですね。
メジャーなwebサイトでは、htmlをcssで装飾して、jsを呼び出してきて動きをつけたりする形ですが、SPAでは、最初にjsありきで、jsからhtml,cssを呼び出します。
htmlがテンプレートとして使われるのはもちろんのこと、cssもカプセル化されますので、ここで呼び出したcssは他のフォルダ以下のページに影響を与えることはありません。

ここらへんの構成をもっと詳しく学びたかったら、「Angular 2 Style Guide」がおすすめですが、ここでは、「html,css,ts」のセットでフォルダをつくるとおぼえておいて下さい。

ちなみに、「app/theme」の中のcssは今まで通りにグローバルにカスケーディングされますので、全体のデザインとそこでしか使わないデザインとを使い分けていただければと思います。

CLIを使ったページ作成

さて、ではいよいよ本題です。
ページの作成というか追加なのですが、上記の通りで命名規則をすると、例えばhogehogeというページをつくろうと思ったら、「app/pages」以下にhogehogeというフォルダ名をつくり、

pages/
├── page1/
├── page2/
├── page3/
├── tabe/
└── hogehoge/
    ├── hogehoge.ts
    ├── hogehoge.html
    └── hogehoge.css

という形でページをつくる必要があります。ちなみに、tsの中身でclass名もそれも揃えて、Hogehogeというclass・・・めんどい!

まぁ、もちろん手作業でこれを作ってもいいのですが、Ionic2では、CLIにページ作成機能があります。プロジェクトのカレントディレクトリで

$ionic g page hogehoge --ts

と入力してやると、ここらへんが全部自動的にできます。便利!
ちなみに、–tsとつけてやらないと、ES6ファイルが作成されますので、お気をつけて。
  

Page1からhogehogeへの遷移

では、実用編として、Page1からhogehogeへと遷移してみましょう。
Ionic2では、遷移するためには、遷移先のClassをimportしてやる必要があります。また、遷移するためのメソッドはNavControllerなので、そいつをionic-angularから呼び出してやり、Page1で読みこみます。
 
その上で、clickイベントをつくりましょう。click_moveが呼び出されると、HogehogePageに移動します。ソースコードはこんな感じ。

page1.ts

import {Page,NavController} from 'ionic-angular';
import {HogehogePage} from '../hogehoge/hogehoge'

@Page({
  templateUrl: 'build/pages/page1/page1.html',
})
export class Page1 {
  constructor(private nav:NavController) {
    this.nav = nav;
  }
  click_move() {
    this.nav.push(HogehogePage);
  }
}

 
そのクリックイベントを呼び出すために、テンプレートにメソッド呼び出しを書きます。

page1.html

<ion-navbar *navbar>
  <ion-title>Tab 1</ion-title>
</ion-navbar>

<ion-content padding class="page1">
  <h2>Welcome to Ionic!</h2>
  <p>
    This starter project comes with simple tabs-based layout for apps
    that are going to primarily use a Tabbed UI.
  </p>
  <p>
    Take a look at the <code>app/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  
  <button (click)="click_move();">これをクリックしたら遷移します</button>
</ion-content>

 
これで完成です。実際に起動してもらえると、新規ページに遷移できたのが確認できたと思います。
ちなみに、nav.push()なので、上部に「元に戻る」がついていますが、nav.setRoot()だと、「元に戻る」がなくなります。ここらへん、NavControllerのドキュメントを読んで下さい。
 

まとめ

駆け足での内容となりました。お疲れ様でした。
 
それでは、また。

お問い合わせ