WebアプリにiOS 7風のUIを実装できる「Framework7」がスゴイ!!
2014年6月14日
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
公式サイトに、デモのアプリがアップされています。
見た目だけでなくアニメーションまで非常に細かく再現されており、よほど詳しい人でなければ気づかないのではないでしょうか。
私も、Cordovaで軽く作ってみましたが、英語のドキュメントさえ解読できれば後は簡単に実装できます。中学生でもできたんだから誰でも出来ると思います!
とはいっても、初心者には取っ付きにくい書き方がされていることもあるので、後々ブログに使い方の記事が書ければいいなと思っています。
さいごに
ということで、Framework7のご紹介でした。
Cordovaでネイティブのタブバーを呼び出すプラグインもあるのですが、Web表示の方がコールバックなどの管理が楽なので、このライブラリを採用することにしました。
Cordovaだけでなく、通常のWebサイトやWebアプリなどにも十分導入できます。
iOS 7風のUIの実装をお考えの方は、一度ドキュメントを読まれてみてはいかがでしょうか。
以上、しゅんぼー(@shun_kashiwa)でした。