Ionic2をはじめるための3つの公式starterパッケージ

公式Documentの通りにIonic2をはじめると、デフォルトテンプレートは”tabs page”が表示されます。(参考:Installing Ionic)。モバイルアプリでは多いパターンかと理解しつつも、Ionic2を学ぶために別途tutorialが提供されていますので、そちらをご紹介いたします。

3パターンのstarter package

https://github.com/driftycoをみていると、Github上にstarterパッケージが複数用意されていますので、2016/05/11地点でのパッケージをご紹介します。将来的に追加されるかもしれないので、ぜひ一度ご確認いただければと思います。

1. ionic2-starter-tabs

公式Documentにあるように

$ ionic start cutePuppyPics --v2 --ts

とコマンドを打つとインストールされるデフォルトテンプレートです。Ionic2をさわったことのある人は、一度は見ていると思います。

スクリーンショット 2016-05-11 16.21.49

https://github.com/driftyco/ionic2-starter-tabs

2. ionic2-starter-sidemenu

ハンバーガーメニューをクリックすると、左からサイドメニューがにゅるっと表示されるテンプレートです。

スクリーンショット 2016-05-11 15.54.04 スクリーンショット 2016-05-11 15.54.16

$ ionic start cutePuppyPics sidemenu --v2 --ts

とコマンドを叩いたらインストールされます。”cutePuppyPics”がプロジェクトフォルダ名、”sidemenu”が引数となります。
https://github.com/driftyco/ionic2-starter-sidemenu

3. ionic2-starter-blank

blankといいつつ、デフォルトテンプレートとしてhomeが生成されます(笑)。まぁ、starterパッケージの中で一番シンプルなものです。

$ ionic start cutePuppyPics blank --v2 --ts

スクリーンショット 2016-05-11 16.31.08

https://github.com/driftyco/ionic2-starter-blank
 

まとめ

ionic startをする時には、ある程度ワイヤーフレームは固まっていると思いますので、自分のワイヤーフレームに近いものをご利用いただければと思います。
それでは、また。

お問い合わせ