文系プログラマによるTIPSブログ

文系プログラマ脳の私が開発現場で学んだ事やプログラミングのTIPSをまとめています。

【iOS7風】ionicフレームワークを少しだけ使ってみる【モバイル】

マルチデバイス対応いいですよ〜
f:id:treeapps:20180424102046p:plain

【iOS7】mobile firstレスポンシブフレームワークを探す【Android】 - 文系プログラマによるTIPSブログ
ionicは前回の↑の記事で紹介した、iOS7風UIのモバイルレスポンシブフレームワークです。

このionic、htmlだけでなく、Apache Cordovaを使ったネイティブアプリにも対応しています。
Apache Cordova
Cordovaに触れてしまうとiOSのネイティブアプリやら何やらに踏み込んでしまい、いつになったらionicでまともに実装が始められるか解らなかったので、触ってません。
(実は少し触ってネイティブアプリの出力ができましたが習得に時間かかりそうなのでやめました)

とりあえずブラウザサポート、htmlの部分のみを使ってちょっとデザインを試してみました。
大体↓こんな感じです。縦に長いので画像を分割しています。
f:id:treeapps:20131228022241p:plain
f:id:treeapps:20131228022247p:plain
f:id:treeapps:20131228022253p:plain

中々綺麗ですね。
ただ、これはブラウザの横幅をぐっと狭くしてスマホっぽく見せてるだけですが、PCのブラウザ本来の横幅で見ると、ラジオボタン等が左に文字、右にアイコン、等と離れてしまって見難いです。
PCから閲覧した場合だけ横幅を強制的に狭くする、とかしないとこのUIのままPCで見るには難がありますね。逆にそこさえ解決できればモバイルフレームワークをPCで使っても問題無いですね。

ちなみにionicはangular.jsもサポートしていますが、今回は多分使いません。
angular.jsよりBackbone.jsの方が使いたいし、そもそもajaxにする気もないですし。