Follow Us.RSS

2012年1月6日(金)簡単スマートフォン対応

  • CMONOS.JP 2.0.20111229 から搭載されたスマートフォン用表示切り替え機能について解説します。

  • (2012年1月6日(金) 午後9時43分45秒 更新)
  • このエントリーをはてなブックマークに追加
    BuzzurlにブックマークBuzzurlにブックマーク

何も飾らないのがスマートフォン流?

iPhone ぐらいの小さな画面になると、多くの場合、一切の装飾を外した (X)HTML そのままの表示の方が読みやすく感じます。スマートフォン用ブラウザに搭載された表示調整機能が効くということもあるでしょう。

そこで CMONOS.JP のスマートフォン対応は、CSS 切り替えによって実現しました。JavaScript により CSS を切り替えるだけですので、サーバへの負担も少なく表示切り替えにかかる時間も一瞬です。

iPhone で PC 同様に表示してみたところ

iPhone で「サンプル1」を表示したところ。JavaScript によりスマートフォンであることが自動判別され右下に「Mobile」ボタンが追加されます(PCからアクセスした場合は表示されません)。

一度「Mobile」ボタンをクリックすると、それ以降スマートフォン用の表示となります。

スマートフォン用の表示

スマートフォンでは、PC 用の表示でざっと全体を見渡したくなるときもあります。そんなときは右下の「PC」をタップするだけ。簡単な操作で二つの表示を行き来できます。

このスマートフォン用表示切り替え機能は、CMONOS.JP で管理されていないページでも、CMONOS.JP 付属の JavaScript「cmonos.js」を読み込むだけで利用可能です(CMONOS.JP で管理されているページについては、自動的に「cmonos.js」が読み込まれます)。

スマートフォン用のスタイルは「~/lib/css/mobile.css」に記述されています。スマートフォンでは表示する必要のないセクションについては、この CSS ファイルで「display: none」を指定して、非表示とするとよいでしょう。

旧来の携帯には「cmonos.m」

旧来からある携帯向けには「cmonos.m」による表示変換が用意されています。こちらも「CMONOS.JP」設置ディレクトリ配下のすべてのページが変換対象となります。

つまり、CMONOS.JP を導入すると、既存の掲示板やその他のツールを含めサイトをまるごと携帯に対応させることができる、というわけです!

くわしくはこちらのマニュアル「旧式携帯向けの表示を調整するには」をご覧ください。

携帯での表示

携帯向け表示では文字コードが Shift JIS に変換され、table タグが除去されます。また、ヘッダ部分がページ末尾に移動し、リンクに番号が割り振られます。

更新情報

最近の記事

RSS

カレンダー

2012年1月
1234567
891011121314
15161718192021
22232425262728
293031
このページのトップへ