1時間で携帯サイトをスマートフォン対応にする方法 | GREE Engineering
初めての投稿となります。エンジニアのmatsuです。 携帯向けウェブサイトを1時間でスマートフォン対応する方法を紹介します。 概要 2011年4月7日のニュースにて携帯電話の新規契約数のうち、スマートフォンが占める割合が50%を越え、スマートフォンが本格的に普及する兆しが見えてきました。 現在、スマートフォン向けサイトを新規構築するためのチュートリアルは数多く出ていますが、既存の携帯サイトをスマートフォンに最適化する方法があまり紹介されていないのでこの記事で紹介したいと思います。 このチュートリアルを行うと以下のようになります。 実装 全部で8ステップあります。 このチュートリアルではブログのトップページを例にとって説明します。 前半では文字コードの変更、HTMLの変更といった構造を変更します。後半では絵文字や文字スタイルを行い、仕上げとしてHTML5のバリデーションを行っていきます。最初
携帯の位置情報取得後にセッションを引き継ぐ方法 - 遠い目日記
携帯の位置情報を使う場合、キャリアによってはセッションをそのままでは引き継げないものがある。 そういう時は戻り先URLにセッション変数を埋め込んだ形にすると良い。 それをmod_rewriteで処理すればセッションを引き継いだまま位置情報を取得することが出来る。 例:) .htaccess RewriteRule ^search/list-([^\-]+?)\.php$ search/list.php?PHPSESSID=$1&%{QUERY_STRING} [L] 戻り先URLは http://example.com/search/list-xxxx.php として、xxxxにセッションIDを埋め込むだけで良い。
携帯サイトをUTF-8で出力するかShift_JISで出力するか - F.Ko-Jiの「一秒後は未来」
携帯サイトをUTF-8で出力しようかShift_JISで出力しようか悩んでいました。 超手抜きでウェブサイトをモバイル対応 2008 – 15Pubを読むと「UTF-8でも大丈夫」とあるのですが、ウノウラボ Unoh Labs: 携帯サイト作成時のXHTMLでの相違点では「文字コードはShift_JIS」と書いてあります。 ネットで調べてみるとポイントになっているのは au の仕様で、公式ページには「EZwebでサポートする文字コードはShift-JISです」とあるにも関わらず、UTF-8でも文字化けすることなく表示できてしまうとのこと。 色々迷った挙げ句、「楽だから」という理由でまずはUTF-8で出力することにしました。 HTMLのContent-Typeは以下のように記述。 <meta http-equiv="content-type" content="application/xht
3キャリア対応の携帯サイトを作るには
制限の多いキャリアに合わせた作り 前回（http://www.thinkit.co.jp/article/143/2/）は、汎用的な携帯サイトを作る手順とポイントを解説しました。今回は、3キャリア対応の携帯サイトを作るテクニックと「こうしたい」を実現するデザインテクニックを技術的視点で解説します。 3キャリアに対応した携帯サイトを作るためには、各キャリアの仕様を比較し、最も制限の多い（自由度の低い）キャリアに合わせなくてはなりません。まず、第1回（http://www.thinkit.co.jp/article/143/1/）と第2回（http://www.thinkit.co.jp/article/143/2/）の内容をふまえて、3キャリアの携帯サイト制作のポイントをおさらいしましょう。 HTML／CSSに関しては、最新のデザインを取り入れるならHTML文書は「XHTML」で記述する、コ
[Think IT] 第1回：携帯サイトとPCサイトはここまで違う！ (1/3)
XHTML Mobile Profileに対応したHTML 本連載では、「PCサイトを制作してきたけど、携帯サイトは初めて」といった企業や個人クリエイター向けにPCとモバイルの違いなどをふまえ、携帯サイトを公開するまでの入門的なノウハウを紹介していきます。 まず、今回はHTMLの種類やタグ、CSSなど携帯ブラウザによる違いと、画面サイズやキャッシュ容量などの端末による違いについて紹介していきます。 では、早速携帯サイトを作る上でマークアップの基本となるHTMLについて説明します（図1-1）。携帯電話はPCと比べても非常に早い進化を遂げてきたため、どれも基本はHTMLを基準に作られていますが、携帯ブラウザ（iモード、EZweb、Yahoo!ケータイ）で表示可能なHTMLの仕様には実に多くの種類が存在します。 現在市場に出回っている機種ということに限定すれば、XHTML Mobile Prof
携帯絵文字変換スクリプト 3キャリア対応
携帯絵文字変換スクリプト（PHP配布） 携帯3キャリア（NTTドコモ,au,ソフトバンク）の共通絵文字を表示するスクリプトです。 従来、絵文字については各キャリア相互に互換性がなく、携帯サイトを制作する際は各キャリアに合わせたページを制作する必要がありましたが、このスクリプトを利用することで、1つのページで3キャリアに対応させたページ作りが可能となります。 プログラム概要 共通絵文字変換表に基づき、ドコモの絵文字を基準に、auとソフトバンク向けの携帯電話に対し、同等の絵文字を表示します。 スクリプトの呼び出しはSSIを利用するため、現在のHTMLをPHPに変換したりする必要はありません。 スクリプトはPHP単体で動作するため、HTML内の絵文字を表示したい部分に一定の記述（SSI）を追加するだけで、絵文字を簡単に表示させることができます。 →サンプル ※サンプル画面にはありませんが、ソフト
【mobile site】3キャリア共通XHTMLでコーディングしてみた - AKeY Blog｜chocolateboad
簡単なモバイルサイトを、3キャリア共通のXHTMLファイルで作成した際、ドコモのCSSにハマりました。。。au、softbankはOKなのに、docomoだけCSSが一切効かないっていう・・・。 まずは、3キャリア共通XHTMLにするためにheadタグ内に記述した内容をメモしておこうと思います。 ★ソースの一番最初★ <?xml version="1.0" encoding="Shift_JIS"?> ★DOCTYPE宣言★ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="
3キャリア対応ケータイXHTMLのTIPS 8つ : アシアルブログ
という素敵仕様なので、泣く泣く各タグ内にstyle属性を書きます。 どーしても我慢できない場合は、外部スタイルシートをインライン展開するようなフィルターを作成するとかでしょうか。ググッてみたら、HTML::DoCoMoCSSというPerlモジュールを作成されている方もいらっしゃいました。 ■画像形式 GIFとJPEGであれば大丈夫なようです。 ・iモード対応コンテンツ作成時の仕様 | サービス・機能 | NTTドコモ ・KDDI au: 技術情報 > 機種別情報一覧 ・ソフトバンク 端末情報 Part1 ～ ソフトバンク 端末情報 Part4 ・Mobile Creation 対応フォーマット一覧 ただ、SoftBankの場合、 ソフトバンク 端末情報 と気になる記述があったりするのですが、この2機種は、 ・V801SHをご利用のお客さまへ ・V-NM701/V801SAをご利用のお客さま
3キャリア共通のモバイルサイトコーディングにおけるポイント
MT4i3.0.8X1の公開後、テンプレートセット作ったりしてますが、中には自分でコーディングしたい!って人もいると思われます。 そんな人のために、既に情報としてはいろいろなところで出ているんですが、一応3キャリア(i-mode/EZweb/Yahoo!ケータイ)共通のコーディングのポイントを纏めておこうかなと。 別にMT4i3.0.8X1だけじゃなく、普通にどんなモバイルサイトのコーディングでも使えます。 一応、注意点をまず述べておくと、XHTMLに対応しているのは、 docomoのFOMA端末 auのWIN端末 softbankの3GC端末 という、いわゆる上位端末になります。古い下位機種では利用できません。 最近は下位端末を利用している人は少なくなりましたし、仮に利用していてもまずネット閲覧にケータイを使う目的ではないので、このあたりは非対応でも問題ないかなと考えています。 次に全体
第1回 PCサイトと携帯サイトの違いを知る | gihyo.jp
携帯サイト開発で考慮すること PCサイトの作成経験者が初めて携帯サイトを作るときには、どのような所に違いがあるのかをまず認識しなければなりません。PCサイトの場合ブラウザの数も限られており、またそれぞれの動作も大きくは異なりませんが、携帯サイトではキャリアはもちろん機種ごとにも動きが変わってきてしまいます。そして携帯サイトはPCと違い、ブラウザのバージョンアップができません。そのため広く使ってもらうサイトを作るには古い機種にも対応しなければならず、多種多様な仕様の端末を想定して開発をしていく必要があります。そのため開発の前にどのような点に気をつけなければならないかをきちんと認識しておく必要があります。 携帯サイトの開発において、最初のポイントは「携帯端末で画面を正しく表示すること」です。PCサイトと同じように携帯サイトを作成すると、画像が表示されなかったり、画面レイアウトが崩れたりといった
case:MobileDesign! モバイルサイトのデザイン紹介ブログ
case:MobileDesign! モバイルサイトのデザイン紹介ブログ 引っ越ししました。 http://case-mobile-design.com/ case:MobileDesign! モバイルサイトのデザイン紹介ブログ > 2010-02-15 >
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
