Ionic 2 を試してみた
あけましておめでとうございます。年の瀬に Maven Resources Plugin の記事 を書き、お正月だからとだらだらしていたら 3 年経ってしまいました。
それはともかく、少し時間ができたのでスマホアプリの技術でも触ってみようかと思い、Ionic 2で遊んでみました。今回は Ionic 2 のインストールから空のプロジェクトを作ってブラウザから動作確認をし、独自の新ページを追加するところまでです。
スマホアプリというと Android や iPhone の実機をつないで都度ビルドしながらデバッグする、というイメージが強いですが、Ionic 2 などの最近のフレームワークは WEB ベースの技術が組み合わさっているため、実機がなくてもブラウザから動かすことができます。簡単なページは JavaScript や CSS を使って WEB アプリ的に実装し、それで実現できない部分は端末固有の実装として Java や Swift で書いたプラグインに任せよう、という設計思想だそうです。確かに、ゲーム系でないスマホアプリは、突き詰めてしまえばボタンを押しながら画面遷移していくだけの事が多いので、WEB アプリに似せた開発ができるというのは効率的なのだと思います。
Ionic 2 は Cordova というマルチプラットフォーム向けのフレームワークに覆いかぶさる形で作られています。なので Cordova 同様、Ionic 2 で書いたアプリも Android や iOS 用にビルドすることができます。また Ionic 2 の特徴として、AngularJS と切っても切れないほと密接に連携していて、その特徴を色濃く受け継いでいます。データとデータを取り扱うロジック部分をビューから切り離し、そのデータをビューに対して自動的に埋め込ませることができます。このあたりの考え方は、WEB アプリを作ったことのある人には、馴染みの深い MVC モデルの応用のように聞こえますが、MVC モデル自体がデスクトップアプリケーションに端を発しているものなので実際は逆輸入なのかもしれません。
さて、今回の目標としては、似非商品検索アプリを作ってみようと思います。トップ画面から検索画面に遷移し、そこで入力したキーワードから、キーワードを商品名に含む商品の一覧を表示する、という感じの動きです。ただし、今回は実際に DB や WEB サービスから検索するわけではなく、キーワードを商品名っぽく加工して表示するだけとします。
こんな感じの仕上がりを目指していこうと思います。
続きを読む WEB 技術, Ionic 2 コメント (0) 2017/01/24 19:19:22