angularJSで構築したPCサイトのスマホ版を作成しようと考えてて、 angularJSを使っているのにもかかわらず、 JQuery Mobileで実装するしかないかなと、半ば諦めかけていたところ、ありました、 Mobile Angular UI というangularJS用のスマホ向けライブラリが。
本家サイト
使い方
- Downloadボタンからソースファイルとデモを一式ダウンロードする(git hubもありました)
- demoフォルダのindex.htmlを開く
- おそらく、いくつかリンク切れのエラーが出るので、その辺りを自分の環境に合わせて、修正していく。(ブラウザのコンソールログに404になっているファイルが出てくるので、それで大体確認できます)
- 自分の好みに合わせてファイルを修正する。
ただそれだけ。
ポイント
参考になるかどうかわかりませんが、自分がはまった箇所を記載。
- ファイルのパス、リンクが間違っていて、うまく動かないときにわかりづらい。(angularJSそのものの習性かもしれません)
- 利用できるiconの種類がわからなかった。→ドキュメントはもちろん英語で、シンプルです。ものたりないかもしれません。(が、多すぎて読む気をなくすよりはいいです)
アイコンの種類を調べるために、一覧を作成しました。参考にしてください。(cssファイルからの逆引き)
Mobile Angular UIのアイコン一覧
感想
demoがものすごくシンプルで、変更が入れやすく、非常に使いやすいです。
既存のangularJSで実装した、Service,Controller類も何の変更も加えず流用できます。
しかも、 前人未到、未知への領域によくある はまる ということがほぼありません。
JQuery Mobileは、相当はまりましたけどね。
自分の実力が上がったという説もあります。