更新頻度についてはもはや触れないでいく。

最近Ionic2というものを使ってアプリを作ったりしている。最近は増えてきたとは言え、まだまだ歴史も浅く、日本語の文献も少なく試行錯誤してきたので、自分用に備忘録を残してみようと思う。このサイトの本来の使い方である。なお、Ionic2のバージョンは執筆時点で最新版の3.4を使用しているが、すべてが最新版ではないので細かな挙動の違いとかはあるかもしれない。参考程度に。

global packages:
    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 7.0.1
    Ionic CLI        : 3.4.0

local packages:
    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : android 6.2.3 browser 4.1.0 ios 4.4.0
    Ionic Framework                 : ionic-angular 3.0.1

System:
    Node       : v7.10.0
    OS         : Windows 7
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 4.2.0

Ionic2とは

読み方は「アイオニックツー」で正しいと思う。cordovaとAngular2を使ったフレームワーク。
cordovaはざっくり言うとHTMLでアプリが作れるというフレームワーク（swiftやJavaを覚えなくて良い）。
Angular2は、JavaScriptを大規模開発用に整えていろいろ便利な機能を追加したりした「モダンなWeb」のためのフレームワーク。基本TypeScriptを使って書く。

もう全部フレームワーク。フレームワークとフレームワークを合体させたフレームワーク。
役割的には、
cordova：
HTMLアプリの基本的な動きの実装、カメラとかのデバイスネイティブ機能を使える機能を提供。
プラグインのインストールとかはやるけど基本内部で動くのであんまり意識することはない。
Angular2：
基本これで処理を書いていくTypeScriptなので拡張子は「.ts」。これとHTMLとSCSSで基本作っていく。
Ionic2：
上記2つを含んだフレームワーク。デザインや動きまで完成された「リスト」や「モーダル」なんかを簡単に作っていける。Angular2は処理だけだけど、見た目も全部含めて1つのパーツにしてくれてるから、基本の動きだけであればコピペするだけで完成する。Ionic2のコンポーネントで作った要素以外の動きをTypeScriptで別途書いていくという感じ。

Ionic2の何がいいのか

まず何と言っても「Webの知識を使ってネイティブアプリが（割と簡単に）作れる」というところ。しかもiOSとAndroidとWeb、それぞれを意識せずにハイブリッドアプリが作れる。
また、cordovaやAngular2をバラで使うといろいろめんどくさいけど、Ionic2を使って書くとデザインや細かい処理をぜ～んぶ内部で上手いことやってくれる。なので気に入らない部分だけ修正したりするだけでOK。
TypeScriptとかやってなかったら最初は覚えることも多いけど、これでアプリ作れるなら安いものってくらいには簡単に作れます。

始め方

Ionic2のドキュメンテーションを参考に。
npmは既にある前提で、Ionicとcordovaをインストール。

npm install -g ionic cordova

環境が整ったので、アプリのプロジェクトフォルダを作る。
前は--v2を入れてIonic2を使うよ～と宣言しなきゃいけなかったんだけど、今はなくなったっぽい。
ionic start [AppName]でOK。
<code>

ionic start TestApp

するとどのテンプレートを使うかを聞かれるので、ここではまっさらな「blank」を選択。プロジェクト「TestApp」のフォルダやら一式が作られます。ここで「sidemenu」や「tabs」を選ぶと、最初からその機能が入った状態でプロジェクトが始まるので、使う予定が有る場合はそちらを選ぶと楽（もちろん後でも追加できる）。

そうしたら、そこに移動して、

cd TestApp

アイオニックのWebビューを起動してみましょう。

ionic serve

できました！
ということで簡単でしたね。
このionic setveは後半までの確認作業で頻繁に使用するので覚えておきましょう。

Ionic2プロジェクトの構造

まあ構造を把握するのは大事ということで。

ルートディレクトリ

「src」：
もっとも触ることが多い、アプリの中身が入ったフォルダ。この中はあとで詳しく見ていきます。
「www」：
アプリをWebビューにコンパイルしたデータが入るところ。勝手に作られて更新されるので、触ることはない。
「platform」：
iOSやAndroid用にビルドした時のデータが入る。勝手に作られて勝手に更新されるのでry
「package.json」：
npmユーザーおなじみ。ここで追加しているプラグインのバージョンなんかを管理したり確認したりする。
「ionic.config.json」：
このプロジェクトを実機表示テスト用アプリ「Ionic View」で見る際のidなんかが入っている。Ionicアプリ管理サイト上でアプリを作って、そのIDにリンクすると、Ionic Viewで見れるようになる。

srcフォルダ内

「app」：
アプリ全体に及ぶ「app.html」「app.component.ts」「app.module.ts」「app.scss」なんかが入っている。
サイドメニューなどのサイト全体にまたぐものはここに入れたりする。どのページでも必ず通る道みたいな感じ。
「assets」：
画像とかフォントとか入れるところ。
「pages」：
ページ関係は全部ここ。だいたいはhtml、scss、tsの3つの組み合わせ。
モーダルとかも一旦ページとして作ってから、モーダル表示関数でモーダルとして表示するので、ページ数以上にここは増えることが多い。
「theme」：
テーマとなるscssがあるだけ。アプリ全体の背景や色の指定なんかは個別のscssではなくここに書くことになる。
その他：
サービスと呼ばれるmodel風のプログラムとかは、人によって入れる場所が違う。まあ分かりやすく分けてるだけで実際はどこにどのファイルを作ってもパスさえちゃんと知れてば自由でOK。でも基本どおり作るのが当然分かりやすい。

よく使うコマンド一覧

ionic serve

Webビューで確認したりする時に使う。ファイルを開いたり保存した時は自動でブラウザリロードしてくれるスグレモノ。
基本はこれでデバッグできるけど、cordovaを使うネイティブ機能は対応してない。

ionic link
ionic upload

実機確認用アプリ「Ionic View」で表示するためにサーバーにアップロードするコマンド。
リンクでアプリを紐づけて、アップロードでアップロード。

ionic generate page AboutPage

ページだったりプロバイダだったりパイプだったりをコマンドライン上から作れる。必要なファイルや最低限の記述がされた状態で出来上がるので楽。

cordova platform add ios
cordova platform add android
cordova platform add browser

アプリにプラットフォームを登録する。とりあえず全部やっておけばいいじゃんの精神。

Tips

個人的な備忘録など。

クリックイベント

<button>Button</button>

最新版では直ってるかもしれないけど、(tap)=""だとバグが有ったのでこの記述にした。tappableを付けないとレスポンスが悪くなる仕様。

カメラ画像のbase64での保存時は「DomSanitizer」を使う

これ使わないと上手く取れなかった。

ストレージ使用時は「IonicStorageModule」

app.module.tsにはStorageではなくIonicStorageModuleをインポートする必要があるっぽい。

NativeAudio

パスはassets/~

そんなものかな。何かあったら追記します。
繰り返しになるけども、自分の環境での無いようなので、詰まった時の解決策の一つとしてお試しいただけたらと思います。