サイトを手軽にモバイル対応にする

Posted by
ぴろり
Posted at
2008/04/06 10:09
Trackbacks
関連記事 (0)
Comments
コメント (2)
Post Comment
コメントできます
Category
開発メモ カテゴリ

 「対応」と云いますか…全て 先生に任せてしまうだけなんですが。 の携帯端末用のゲートウェイを利用することで,どんなサイトでも簡単に対応にできます。ついでに版ページへの も用意しておけば完璧です。

この記事をはてなブックマークに追加する この記事のはてなブックマーク数 | この記事をlivedoorクリップに追加する この記事のlivedoorクリップ数 | この記事をYahooブックマークに追加する この記事のYahoo!ブックマーク数 | この記事をdel.icio.usに追加する | Twitterにポストする

用ゲートウェイ

http://www.google.co.jp/gwt/n?u=[URL]

 [URL] には変換したいサイトの URL を URL エンコードして指定します。この端末用のゲートウェイを利用してサイトにアクセスすると,携帯電話などの端末で読み易いように変換して表示されます(このサイトの例)  で指定された画像などは表示されず,あくまで を処理しているだけですが,かなり正確に文書構造を再現してくれます。「読む」という部分では全く問題ないように感じました。サイト内のについては,ゲートウェイ利用の URL に変換されるので,ページ内の移動も問題なく行えます。

での端末向けURLの記述方法

  で構築されたサイトであれば,トップページだけでなく個々のエントリページからも用のを用意しておくとです。タグで書くと以下のようになります。

http://www.google.co.jp/gwt/n?u=<$MTBlogURL encode_url="1"$>
http://www.google.co.jp/gwt/n?u=<$MTEntryPermalink encode_url="1"$>

を付けてみる

 …まぁ,需要はともかく携帯電話などからアクセスしやすいように を付けてみます(右サイドバー下の例) の表示には,静的な画像ファイルとして用意する方法と,プログラムを用いて都度,を求める方法があると思います。静的な画像ファイルは,Web 上で無料で QRコードを作成できるサイトを利用して作成することができます。今回は個々のページ毎に を設置したかったので,この手間を省くためにも を用いて動的に を生成するようにしてみました。
 の生成には,Y.Swetake さんが公開されているQRcode Perl CGI & PHP scripts ver. 0.50 版を使用しました。この では与えるパラメータに応じて,エラー訂正レベルやバージョンをかなり自由に設定することができます。URL をデータとする は,携帯端末から読み取ると直接その URL に接続できる機能があるのでこれを利用します。
 ちなみにには様々なデータを含めることができるので,URL以外にもこんな使い方もできたりします。

での端末向けURLの記述方法

 生成 にパラメータを渡す場合に URL エンコードが必要になるので,少しややこしいです。タグで書くと以下のようになります。

<img src="/cgi-bin/qr/?s=2&e=L&d=http%3A//www.google.co.jp/gwt/n%3F_gwt_noimg%3D1%26u%3D<$MTBlogURL encode_url="1"$>"%gt; />


 実際にでどれだけ読まれるかは別にして(涙), のゲートウェイを利用することで,携帯端末用に新たに別のプログラムを導入する必要など全くなしに,端末対応できることがわかりました。しかもサイトの形態は特に問わないので,このサイトのように の使用の有無は関係ありません。また,の生成 次第で他の使途にも使えそうですね。


この記事を読んだ人はこんな記事も読んでいます 記事リコメンデーションについて

その他の関連する記事


関連記事/トラックバック

関連記事/トラックバックはまだありません

この記事にトラックバックを送るには?

寄せられたコメント (全 2 件中、最新 5 件まで表示しています)

Posted by
ぴろり ◆OLEEi.VOX.
at
2009/07/22 18:40
ID
Lgh6R5ag

こんにちは。

例えば、以下のURLを携帯で見たいとします。
http://www.magicvox.net/archive/2008/04061009/
次に、このURLの中でURL中で特別な意味を持つ文字をURLエンコーディングします。
http%3A%2F%2Fwww.magicvox.net%2Farchive%2F2008%2F04061009%2F
すると、GoogleのモバイルゲートウェイのURLは以下の通りになります。
http://www.google.co.jp/gwt/n?_gwt_noimg=1&u=http%3A%2F%2Fwww.magicvox.net%2Farchive%2F2008%2F04061009%2F
さらにQRコード生成用のCGIにパラメータとして渡すために再びURLエンコーディングします。

Posted by
田中 康代
at
2009/07/17 15:14
ID
UFhLr.fI

はじめましてぴろりさん

自分でモバイル対応にしたいのですが、素人のため以下の内容が全く解読できません。

質問レベルも以下のとおりです。

[URL] には変換したいサイトの URL を URL エンコードして指定します。(→ってどうすれば良いですか?)
このモバイル端末用のゲートウェイを利用してサイトにアクセス(→何かソフトを使うのでしょうか?)
すると,携帯電話などのモバイル端末で読み易いように変換して表示されます(このサイトの例) CSS で指定された画像などは
表示されず,あくまで HTML を処理しているだけですが,かなり正確に文書構造を再現し
てくれます。「読む」という部分では全く問題ないように感じました。サイト内のリンクに
ついては,ゲートウェイ利用の URL に変換されるので,ページ内の移動も問題なく行えます。

コメントを投稿する

 
 (匿名可/必須/公開)
 (匿名可/必須/非公開)
 (必須)
コメントスパム防止のため投稿前に ランダムな数字 CAPTCHAについて を入力してから投稿してください。お手数ですがご協力のほど宜しくお願いいたします。
 
QRコード, 1Rコード, 2Rコード, WRコード, SRコード, ARコード, QEコード, Q4コード, Q5コード, QTコード, QFコード, QDコード モバイル CGI, XGI, DGI, FGI, VGI, CFI, CTI, CYI, CHI, CBI, CVI, CGU, CG8, CG9, CGO, CGK, CGJ MovableType, NovableType, JovableType, KovableType, MIvableType, M9vableType, M0vableType, MPvableType, MLvableType, MKvableType, MoCableType, MoFableType, MoGableType, MoBableType, MovQbleType, MovWbleType, MovSbleType, MovZbleType, MovaVleType, MovaGleType, MovaHleType, MovaNleType, MovabKeType, MovabOeType, MovabPeType, MovablWType, Movabl3Type, MovablRType, MovablDType, MovablSType, MovableRype, Movable5ype, Movable6ype, MovableYype, MovableGype, MovableFype, MovableTTpe, MovableT6pe, MovableT7pe, MovableTUpe, MovableTHpe, MovableTGpe, MovableTyOe, MovableTy0e, MovableTy-e, MovableTyLe, MovableTypW, MovableTyp3, MovableTypR, MovableTypD, MovableTypS Google, Foogle, Toogle, Yoogle, Hoogle, Boogle, Voogle, GIogle, G9ogle, G0ogle, GPogle, GLogle, GKogle, GoIgle, Go9gle, Go0gle, GoPgle, GoLgle, GoKgle, GooFle, GooTle, GooYle, GooHle, GooBle, GooVle, GoogKe, GoogOe, GoogPe, GooglW, Googl3, GooglR, GooglD, GooglS