The Diary of Aska

7kai Tasks(One Page Apps)作るのに使った物Js/CSSライブラリまとめ

7kai Tasks

Bootstrapのお陰でかなり見るに耐える見た目になりました。

急遽スマホ版を用意しましたが、結果としてJs/CSS共に大部分のコードがPC版と共通にできました。

はじめスマホはjQuery Mobile等スマホ専用ライブラリを利用しようとしましたが、動的に要素を作るOne Page Appsには向かなかった(不可能ではない)のと、元々PC版のCSSをベースに作れるのでiPhoneネイティブアプリの様な見た目を無理やり再現してもらう必要もなく不要と判断しました。結果的に大枠のレイアウトこそ違えどパーツレベルではPCとスマホは同じDOM構造となり、Js/CSSも殆ど共通、小さい画面でも操作できるように少し調整しただけで完成しました。

One Page Appsにおいてはスマホは画面の小さいPCなので特別なライブラリは使わずPCと同じJs/CSSでDOMのレイアウト少し弄れば出来る、というのが感想です。

さて、使ったライブラリですが。

PC版

スマホ版

スマホ版で使用がやむを得なかった iscroll.js はフッターメニューをページ最下部に固定させるためのライブラリ、spin.jsはただのローディング表示です、画像でもいいと思います。

スマホ版は「ネイティブアプリに一歩届かない感」が拭えませんが、localStorageもあるしオフライン時のケアも少し出来たのでやや満足してます。

結構頑張ってjQuery Mobileで作ろうとしていたのですが、あれは2度と見たくないです。

その他にもスマホ向けのJsライブラリがいくつか出ていますがSencha以外はiPhoneアプリ臭出す為なら有用知れませんがWebアプリ書くのに必要なものではありませんでした。

Senchaが別格なのはあれはガチでJsフレームワークなのでゴツイの作るときは強力な武器になると思います、一度デモとソース見たら一人違う次元歩いてるのが解ると思います。

取り急ぎこんな感じです。