WebアプリにiOS 7風のUIを実装できる「Framework7」がスゴイ！！

2014年6月14日

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

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

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

Framework7

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

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

このライブラリだけで、

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

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

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

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

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

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

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

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

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

Please Share !