ITエンジニア/デザイナ向けにオープンソースを毎日紹介

ハイブリッドアプリをさくさくっと作りましょう!

ここ1年くらいWebとネイティブの技術を組み合わせたハイブリッドアプリに対する注目が急激に高まっています。Mobile Safariのパフォーマンス向上、HTML5への期待の現れと言えるでしょう。

今回はそんなHTML5を利用したWebアプリケーション開発に使えるフレームワークIonicを紹介します。この手のフレームワークはたくさんありますので、より先進的なものを選ぶと最新の機能が使えるのではないでしょうか。

タスク一覧のデモ。ヘッダー、フッターは常時張り付きます。
タスク一覧のデモ。ヘッダー、フッターは常時張り付きます。

タブバーをクリックして画面の切り替えもできます。
タブバーをクリックして画面の切り替えもできます。

スライドメニュー。画面をスワイプまたは左上のメニューアイコンをタップします。
スライドメニュー。画面をスワイプまたは左上のメニューアイコンをタップします。

メニューが左からスライドしてきました。
メニューが左からスライドしてきました。

画面を切り替えた後の戻る機能もあります。
画面を切り替えた後の戻る機能もあります。

フォーム。
フォーム。

サンプルの天気アプリ。
サンプルの天気アプリ。

地図アプリ。
地図アプリ。

プロフィールアプリ。
プロフィールアプリ。

Ionicは現在のところiOS 6以上をサポートしています。画面の雰囲気的にはフラットになっていますので、iOS 7以上向けに最適ではないかと思います。Androidは4.1以上を対象としています。

AngularJSも組み込まれていますが、フロントエンドのフレームワークなのでサーバサイドは自由に選択したり、PhoneGapなどを使ってネイティブアプリに組み込むことができるでしょう。

IonicはHTML5/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

Ionic: Advanced HTML5 Hybrid Mobile App Framework

driftyco/ionic

 

MOONGIFTの関連記事

  • DevRel
  • Com2