Follow Us.RSS

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

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

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

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

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

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

iPhone で「サンプル1」を表示したところ。 によりスマートフォンであることが自動判別され右下に「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 タグが除去されます。また、ヘッダ部分がページ末尾に移動し、リンクに番号が割り振られます。

コメント

トラックバック

関連記事

[画像]

CMONOS.JP | 開発者ブログ | iPhone から画像をアップロードしよう

2011年4月26日 ...iPhone の Safari には一つだけ大きな弱点があります。 ... まず、iPhone の Twitter アプリで、画像をアップロードする写真共有サイトを選択します。 ... iPhone4 になって、 iPhone でもかなりきれいな写真が撮れるようになりました。 .... 自動スクロールする ブックマークレット(iPhoneAndroidでも動きます☆); リンクタグを表示する Safari 機能拡張(コンテキストメニューから選択テキストを検索することも可能☆ 価格. ... 会社 概要 · 代行設置 · 問い合わせ · サポート · マニュアル · ニュース · 携帯向けサイト.
https://cmonos.jp/blog/2011042602/1.shtml
[画像]

CMONOS.JP | 開発者ブログ | 自動スクロールするブックマークレット

2013年9月2日 ... 友人がこういうのほしいと言っていたので作ってみました。PC では画面をマウスで ドラッグすると、ドラッグしたスピードで自動スクロールが始まります(ドラッグの向きは タッチと同じ「ナチュラル」です)。iPhoneAndroid では画面を指先で ...
https://cmonos.jp/blog/2013090200/1.shtml
[画像]

CMONOS.JP | 開発者ブログ | カレンダーを施設予約に使おう

2011年2月22日 ...携帯からも書き込み可能. CMONOS.JP の「カレンダー」は、携帯対応機能「cmonos.m 」により、古い携帯電話で表示することができるだけでなく書き込みも可能となっています 。 携帯向け表示. 携帯シミュレータ上で「cmonos.m」を通じて「 ...
https://cmonos.jp/blog/2011022200/1.shtml
[画像]

CMONOS.JP | 開発者ブログ | ウェブにも縦書きを!「竹取JS」公開

2010年7月5日 ...iPhoneAndroid 携帯でも縦書き. 「竹取Web」は、JavaScript 非依存なので、 iPhone など非力な環境でも縦 .... JP | 開発者ブログ | サイト丸ごと携帯 ... JP | 開発者 ブログ | 簡単スマートフォン対応. 2012年1月6日 ... iPhone の Safari に ...
https://cmonos.jp/blog/2010070500/1.shtml
[画像]

CMONOS.JP | 開発者ブログ | サイト丸ごと携帯対応「cmonos.m」

2011年2月1日 ... 新機能「cmonos.m(クモノス・ドット・エム)」は、「CMONOS.JP」に含まれるツールだけで なく、他の CMS や CGI を利用しているページ、静的 HTML ファイルなど、既存サイトの すべてのページを携帯用に変換します。
https://cmonos.jp/blog/2011020100/1.shtml
[画像]

CMONOS.JP | 開発者ブログ | 日中韓ウェブをまるっと縦書き化

2011年9月14日 ...iPhoneAndroid 携帯でも縦書き. 「竹取Web」は、JavaScript 非依存なので、 iPhone など非力な環境でも縦書き化できます。 あらかじめブックマークレットを登録し ておけば、縦書きしたいページを表示してから、ブックマークを開き、 ...
https://cmonos.jp/blog/2011091400/1.shtml
[画像]

CMONOS.JP | 開発者ブログ | さくらで、快適 CMONOS.JP!

2009年7月17日 ... JP で管理されていないページでも、CMONOS.JP 付属の JavaScript「cmonos.js」を 読み込むだけで利用可能です(CMONOS.JP で管理されているページについては、自動 的に「cmonos.js」が読み込まれます)。 スマートフォン用のスタイル .
https://cmonos.jp/blog/2009071700/1.shtml
[画像]

CMONOS.JP | 開発者ブログ | 自動スクロール Safari 機能拡張「手ぶら ...

2013年9月4日 ... 自動スクロールするブックマークレット(iPhoneAndroidでも動きます☆); リンクタグを 表示する Safari 機能拡張(コンテキストメニューから選択テキストを検索することも可能 ☆ 価格.COMや楽天ブックスなどUTF-8で検索できないサイトにも ...
https://cmonos.jp/blog/2013090400/1.shtml
[画像]

CMONOS.JP | 開発者ブログ | NicEdit 日本語版

2010年1月8日 ... タッチイベントに対応し、iPhone や iPad での動作を改善しました。(bluezさんご指摘 ありがとう ...... ひとつめは古い携帯など JavaScript が動作しない環境でも textarea から改行付きで入力できるようにするためです。 (このコメント入力欄の ...
https://cmonos.jp/blog/2010010800/1.shtml
[画像]

CMONOS.JP | 開発者ブログ

2015年1月13日 ...iPhone で使っているところ(動画). 2013年9 .... CMONOS.JP 2.0.20111229 から 搭載されたスマートフォン用表示切り替え機能について解説します。 ... 竹取Web」が 中国語・ハングルに対応 · iPhoneAndroid 携帯でも縦書き. 2011年9 ...
https://cmonos.jp/blog/

更新情報

最近の記事

RSS

カレンダー



[日] 1
[月] 2
[火] 3
[水] 4
[木] 5
[金] 6
[土] 7

[日] 8
[月] 9
[火] 10
[水] 11
[木] 12
[金] 13
[土] 14

[日] 15
[月] 16
[火] 17
[水] 18
[木] 19
[金] 20
[土] 21

[日] 22
[月] 23
[火] 24
[水] 25
[木] 26
[金] 27
[土] 28

[日] 29
[月] 30
[火] 31
[水]
[木]
[金]
[土]

最近のコメント

RSS

最近のトラックバック

RSS

このページのトップへ

© CMONOS Co. Ltd.


PC 向けページに移動する