モバイルアプリ・サイトを効率良く作るためのフレームワークまとめ

Pocket

モバイルアプリ・サイトを効率良く作るためのフレームワークまとめ

最近人気の高いモバイルアプリ&サイト制作。以前はXcodeとややこしいObjective-Cを使ってアプリを作ってましたが、今ではHTML5とjavascriptで簡単なアプリを作れるようになってきました。

僕もAngularJSを使っていろんな機能を実装したりしてますが、やっぱりフレームワークってすごく便利なんですよね。しかもモバイル向けに最適なUIまで用意されていたりするので以前より作りやすくなってます。

ここではモバイルサイト・アプリを効率良く作るためのフレームワークをまとめていきます。

モバイル制作効率化フレームワークまとめ

PhoneGap

PhoneGapはHTML5とjavascriptで記述したWebアプリケーションをiOSやAndroid端末向けにコンパイルしてくれる便利なツール。JAVAやObjective-Cなどの言語を使う必要があったモバイルアプリ制作が、Web系の言語だけで簡単に作成可能になります。

PhoneGap
モバイルアプリ制作のフレームワークPhoneGap

AngularJS

こちらはモバイル向けというわけではないものの、Webアプリを作る際にとても便利なフレームワーク。htmlファイルのインクルードや値のバインド、要素の繰り返しなどを簡単に実装可能。Google製。

AngularJS
モバイルアプリ制作のフレームワークAngularJS

jQueryMobile

こちらはモバイルサイト向けのUIが用意されたフレームワーク。Bootatrapを使ったことがあるなら、同じ感覚でスマートフォン向けのUIを実装できます。

jQueryMobile
モバイルアプリ制作のフレームワークjQuery_Mobile

Ionic

こちらもモバイル用のUIがたくさん用意されているフレームワーク。デザインがシンプルで非常に洗練されている感じ。先ほど紹介したAngularJSと組み合わせてさらに複雑な機能を実装するのも面白そう。

Ionic
モバイルアプリ制作のフレームワークIonic

SenchaTouch

HTML5・CSS3・javascriptで作られたモバイルアプリ向けフレームワーク。アニメーションやUIコンポーネントなどが豊富に揃ってます。また、PhonGapにも対応しているので作ったアプリをすぐにiOSやAndroid端末に変換可能。

SenchaTouch
モバイルアプリ制作のフレームワークSencha_Touch

Ratchet

Bootstrapのように簡単に扱えるモバイルサイト向けフレームワーク。まるでiOSのデフォルトのようなテーマになっていてかなり綺麗です。

Ratchet
モバイルアプリ・サイトを効率良く作るためのフレームワークまとめ

Lungo

こちらはUIだけでなく、javascriptのAPIにも対応しているフルパッケージ的なフレームワーク。APIはAngularJS風なので使い勝手も良好。

Lungo
モバイルアプリ制作のフレームワークLungo

まとめ

Web制作でモバイル向けのサイトを作るときはレスポンシブを使ってPCサイズのものを(無理矢理)モバイル画面に表示させています。レスポンシブは1つのHTMLファイルでモバイルもPCも処理できて便利なんですが、ユーザビリティのことを考えるとまだまだ改良点が多いのも事実。

モバイルはモバイルでここで紹介したようなフレームワークを使って別ファイルにするというのも選択肢の1つとして十分ありだろうと思ってます。

個人的にはWebベースならAngularJS + Ionicが結構いけてる感じ。