tyoshikawa1106のブログ

- Force.com Developer Blog -

Heroku:Lightning Design Systemとviewport設定でモバイルブラウザに対応する

Lightning Design SystemはSalesforceのCSS Frameworkです。自分でCSSを用意しなくてもいろいろなCSSコンポーネントを利用することができるので便利です。

Lightning Design System


Salesforce内の開発以外でもHerokuなどスタンドアローンアプリの開発でも利用できます。例えばこんな感じの画面が作れます。
f:id:tyoshikawa1106:20151011152440p:plain


画面サイズに合わせてinputTextの幅を調整してくれたり、リストを横表示から縦表示に切り替えてくれたりとすごく便利です。
f:id:tyoshikawa1106:20151011153005p:plain:w200


幅調整などはLightning Design Systemの方で自動対応してくれますが、これだけではモバイル対応としては不十分です。スマートフォンのブラウザからアクセスするとこのように小さな文字サイズで表示されてしまいます。
f:id:tyoshikawa1106:20151011153611p:plain


忘れてはいけないのがモバイル用の設定でお馴染みのmetaタグの"viewport"です。


これでスマートフォンのブラウザからアクセスしたときでも文字が見やすい大きさに拡大されて表示されます。
f:id:tyoshikawa1106:20151011154007p:plain


ということでLightning Design Systemで開発するときでもモバイルブラウザからアクセスして使用する画面の場合は、metaタグの"viewport"はきちんと宣言した方が良さそうです。

デモ動画