Shumbo Image 2014 06 14 23 17 35

Webプログラミングが一番詳しいしゅんぼー(@shun_kashiwa)です。

Cordova(Phonegap)でアプリを作っていまして、HTML+CSS+JavaScriptでiOS 7風のUIを実装できるフレームワークを探したところ「Framework7」というフレームワークが引っかかりました。

これが、思ったよりシンプルにiOS 7そっくりなインターフェースを実装できたので、ご紹介したいと思います。


Framework7

Framework7 – Full Featured HTML Framework For Building iOS7 Apps

こちらが公式サイトです。

オープンソースで開発されており、Githubからダウンロードできます。

このライブラリだけで、

  • メニューバー
  • 複数のページ
  • タブバー
  • ツールバー
  • ボタン
  • スライダー
  • オーバーレイ通知

など、アプリを作成する時に必要だと考えられる機能やパーツが一通り使えます。

画面の推移には非同期通信(Ajax)を利用するため、遅延の少ない高速なアプリを作成できます。

どんな感じになる?

Ready To Use Framework7 Examples

公式サイトに、デモのアプリがアップされています。

Shumbo Image 2014 06 14 23 28 56

見た目だけでなくアニメーションまで非常に細かく再現されており、よほど詳しい人でなければ気づかないのではないでしょうか。

IOSシミュレータのスクリーンショット 2014 06 14 23 30 17

私も、Cordovaで軽く作ってみましたが、英語のドキュメントさえ解読できれば後は簡単に実装できます。中学生でもできたんだから誰でも出来ると思います!

とはいっても、初心者には取っ付きにくい書き方がされていることもあるので、後々ブログに使い方の記事が書ければいいなと思っています。

さいごに

ということで、Framework7のご紹介でした。

Cordovaでネイティブのタブバーを呼び出すプラグインもあるのですが、Web表示の方がコールバックなどの管理が楽なので、このライブラリを採用することにしました。

Cordovaだけでなく、通常のWebサイトやWebアプリなどにも十分導入できます。
iOS 7風のUIの実装をお考えの方は、一度ドキュメントを読まれてみてはいかがでしょうか。

以上、しゅんぼー(@shun_kashiwa)でした。