サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
GPT-4o
dspt.blog59.fc2.com
さっそく、読者の方から、「iモードブラウザ」が「2.0」になりましたが、 携帯サイト市場としてすぐに対応は必要ですか? というご質問を頂いたので、今更ではありますが僕なりの見解をお伝えしますね。 結論から言うと 「もちろん動向をウォッチしていくことは必要だが、焦ってすぐに対応する必要はない」 と思います。 iモードブラウザ2.0がドコモ新機種(昨年の夏モデル)に搭載されたとき、 技術系のブログではいち早く過去のブラウザバージョンとの違いを比較した情報を伝えていましたが、 私はその情報はもちろん作り手として知る必要はあると思うんですけど、 おそらく皆さんが思っているのは、そうではなくて、 じゃぁすぐに対応すべきかっていうことだと思うんです。 確かに携帯サイト業界のトレンドや動向は変化が早いと言われますが、 XHTML+CSSベースで携帯サイトが作れるようになった今でも、 核となる制作ノウハウ
当ブログが携帯サイト作成法に関する記事をかいていることから、読者の方から、 『モバゲーのような携帯サイトを作るためにはどうしたらいいんですか?』 っていう質問を最近良く受けます。 おそらく、モバゲーがとても有名で、ある種モバゲーが携帯サイト界のデファクトスタンダードのような 位置づけになってきているのでしょうか。 確かに、携帯サイトを作ってきている身としても、 モバゲーのサイトデザインにするには、結構難しいことも多いし、学ぶことも多い。しかし、最近の携帯サイトは、実機からしかアクセスできないようになっていて、PCからコードを覗くことができないことも多く、学ぶことも難しいようです。 ということで、今回は実際にモバゲータウンに携帯でアクセスして、携帯の画面を見ながら、デザインを真似て新しく自分なりに作ってみましたので、そこから得た経験をTipsとして公開したいと思います。 ちなみに、左のスクリ
こんにちは。更新が滞ってしまい申し訳ありません。 前回の「携帯絵文字変換スクリプトの改良版 (PHP・SSI対応版)を作りました」の記事や 過去の記事においてもたびたびご質問があったケースについてここで一度回答したいと思います。 ご質問いただいた方ありがとうございました。 質問の内容は、 「ドコモの絵文字がすべて白黒で表示されてしまう」 という問題です。当ブログで配布している携帯絵文字変換スクリプトに限らず、 ある指定をHTMLにしていると、ドコモの絵文字がすべて黒で表示されてしまいます。 その条件とは、 ①HTMLで、BODYタグ内の属性においてページ全体の文字色を指定しているケース 例: <body text="#000000">… ②XHTMLまたはHTMLでBODYタグ内のstyle属性でCSSでページ全体の文字色を指定しているケース 例: <body style="color:#
以前、このブログで携帯絵文字変換スクリプトを配布しましたが、 今回はその改良版です。今まで、こちらの携帯絵文字変換スクリプトを使用していた方で、 どうやっても動作しないよ!と悩んでいた方はこちらに変えてみてください。 改良点は以下の通り。 ・もちろん全3キャリア対応 (ただしドコモはiモードHTML4.0以上の機種に限る) ・PHPとSSI両方に対応 ・安定動作のため、Unicode数値参照方式(&#x\\\\;)に変更 ・PHPは4と5で動作 ・PCで閲覧した場合にも絵文字が表示される ・ドコモの絵文字を基準とするのはそのまま 以前の携帯絵文字変換スクリプトはドコモの絵文字においてShift-JISの2バイトコードを 絵文字の変換テーブルに用いていたため、サーバー環境によっては文字化けが起きたり、 XHTMLとHTMLで動作が異なったりしていましたが、今回は全キャリアが対応している Un
最近では携帯サイトはXHTMLで作るようになってきていますが、 そこで指定すべきコンテンツMIMEタイプはどのようにしなければならないか。 これはこのブログや書籍をご購入いただいた方はすでにご存じかと思いますが、 ドコモの仕様に合わせて「application/xhtml+xml」を指定するということでした。 再度説明するとドコモがXHTMLモードになる条件は ①サーバーが出力するHTTPヘッダーを「application/xhtml+xml」とする。 ②metaタグの「content」を「application/xhtml+xml」とする。 ことでした。しかし、この方法では、 1. 古い機種によってはエラーになってしまう可能性があること。 2. auやソフトバンクはMIMEタイプを「text/html」としてもXHTMLで動作すること。 3. 「application/xhtml+xml
CSSの「background-positionプロパティ」の値の指定方法で 各社どのように対応するか詳しく挙動を調べてみたのでメモ。 CSSセレクタbackground-position設定方法ドコモauSoftBankキーワード指定 (left center)×○○パーセント指定 (33% 50%)×○○合成形の指定 (33% center)××○キーワード省略形 (bottom)×○○パーセント省略形 (30px)×○○※background-positionプロパティはauとソフトバンクのみに対応(ただし、使えるタグが限られる) ※画像はbackground-imageで指定するが、ドコモではbodyタグのみ。 ソース例 <body style="background:url(./image.gif) no-repeat; background-position:30px;"> <
書籍を執筆する段階でもそうだったんですが、 携帯サイトでのau端末の動作を確認する「Openwave SDK 6.2K」って 今公開中止になっていますよね。 これによって携帯サイト開発が滞ってる方って結構いらっしゃるんじゃないでしょうか。 実は私もサブPC用に入れたいのに入手できずにいた者の一人です。笑 プログラムがないかネットで情報を探したところ、 どうやらweb.archive.orgで入手可能な様子。 リンクはっておきますね。 Openwave SDK 6.2K いつなくなるか分からないので、まだ入手できてない方は、 今のうちににゲットしちゃいましょう。 では。 P.S プレゼント企画ですが、続々とメッセージ届いてます。 ありがとうございます。現在約20名ほど頂いてます。
先日出版させていただいた「携帯サイト コーディング&デザイン」の中でも 触れている携帯サイトで使えるCSSハックをご紹介。 ドコモ端末だけ内容を表示する 「displayハック」 勝手に名付けてしまってはいますが… 「display:none;」というCSSプロパティと値の組み合わせは、 現在auとソフトバンク端末で対応しています。 CSSで「display:none;」とすると、これが指定された要素は完全に非表示になりますが、 displayセレクタに対応していないドコモ端末は、内容が表示されてしまうという CSSの対応度を逆手に取ったCSSハックです。 ただし、「3G端末(+XHTMLコーディング)」に限るという条件付き。 したがって、できればドコモユーザだけに表示させたいけど、 まぁ他キャリアにも表示されてもいいや程度に使うと便利かなと思います。 なので、 <div style="d
コカコーラ、GAP、NIKEなど有名ブランドでも 最近は携帯サイトが公開されていることが多く、しかも、かなりイケてる。 そういったリッチなデザインを有する携帯サイトを日々紹介しているブログさんを発見したのでご紹介。 そんな素敵なサイトはこちら。 case:Mobile Designさん 小さな画面なのに、 ブランディングを維持したまま携帯サイトを作るのって意外と難しいですよね。 最近はXHTML+CSS/Flash Liteでリッチな携帯サイトを作れるようになってきたし、 それを閲覧できる端末も一巡した感がありますが、 今から始める携帯サイト制作の記事が人気だったということからも、 まだまだ携帯サイトを作り始めようかなっていうフェーズにいる人が潜在的に今一番多いはず。 だから今はまだデザインのノウハウなどはまとまった情報はそれほど出てこないし、 それを今解説したこところでまだ早いかなって気
携帯サイトの作り方を詳しく解説した本 「携帯サイト コーディング&デザイン」が12月26日(金)に発売(予定)になります。 非常に反響の大きかったThinkITの今から始めるモバイルサイト制作以来の執筆(単著)です。 ────────────────────────────── 携帯サイト コーディング&デザイン 12/26 発売予定 ISBN 978-4-7973-4848-4 著者 高木 悠介(ペンネーム) 価格 2,709円 ページ数 260 出版社 ソフトバンククリエイティブ ────────────────────────────── 今までも、携帯サイトの制作に触れた本はあったのですが、 各キャリアが公表している仕様をただ右から左に流しているだけの書籍や 携帯サイトだけではなく、デコメや着メロ、アプリの作り方など 携帯サイトでできることを鳥瞰したような広く浅い内容で、 誰に向け
Thinki ITにて携帯サイトの制作についてまとめた 「今から始める携帯サイト制作」を執筆させていただきました。 本日より公開です。 このブログと同じで、PCサイトを制作したことはあるけど、 携帯サイトは初めてっていう方向けに書きました。 Think ITについてちょっとだけ説明させていただくと、Impress ITが運営するThink ITは、 Webに関わる技術者向けの技術解説サイトで、毎月2つの特集が組まれています。 特集では、一つのテーマを一人の著者が毎週同じ曜日を担当し、 1ヶ月で3~5回(1回につき3ページ)に渡って解説しています。 で、10月は特集2でモバイル向け制作という特集が組まれ、 その中の毎週火曜日「今から始める携帯サイト制作」が僕の担当。 全4回に渡り以下のようなテーマでお話しします。 第1回 携帯サイトとPCサイトはここまで違う! - 本日 第2回 携帯サイトの
以前、 ドコモ iモードサイト作成時のHTML DOCTYPEまとめ (http://dspt.blog59.fc2.com/blog-entry-37.html) について書きましたが、今読み返すとあまりに適当な気がして、 読者の方に誤解を招くのは申し訳ないので、携帯サイトを制作する際に、 DOCTYPEはどのように記述すべきかもう一度考えてみます。 現在、各キャリアが推奨しているDOCTYPEは、 Kamitani79-メロンとバナナとブログさんに書かれているように、各社独自に定めています。 が、しかし実際のところは、3キャリア共通のXHTMLを書く場合には、 XHTML Mobile Profileに従って記述するほうが、各社のXHTMLの仕様を見ても、 一番合っている気がします。 ただ、XHTML Mobile Profileはかの有名なW3Cが勧告したものではなく、 携帯端末の特
auとソフトバンクの3G端末は外部CSSを読み込むことで、 豊富な表現が可能になっています。(ドコモはダメ) ただし、auとソフトバンク端末に搭載されているブラウザは種類が異なるので、 3キャリア対応のサイトを1枚のHTMLで作る場合は、文字サイズなどの違いがどうしてもでてきてしまいます。これに対処するためには、auとソフトバンク端末で読み込む外部CSSを切り替えてあげる方法があります。 そこで、今回はauとソフトバンクで外部CSSを切り替えるスクリプトをご紹介します。 まず、どのような設計にするかというと、 ・au用の外部CSS「css_au.css」とソフトバンク用の外部CSS「css_sb.css」を用意する。 ・au端末でアクセスしてきたら、「css_au.css」を読み込むようにlinkタグを発行する。 ・同様に、ソフトバンク携帯には「css_sb.css」を読み込むようなlin
こんにちは、shibaです。 前回の記事「モバゲーのような携帯サイトを作るための12のTips」が予想以上の大反響で少々びっくりしてます。はてブの数とか半端ないです。こんなブックマークが付く記事を書いたことがありません。笑 いといろとコメントくださった方ありがとうございます。 おかげさまで、この記事以来、怒濤のように仕事が舞い込んできており、 多忙の毎日を送っています。 さて、今回は前回の記事のコメントでいただいた、 ソフトバンクのVGA端末でのサイト内画像の出力に関するお話です。 前回の記事で、ソフトバンクの高解像度(横240ピクセル以上)VGA端末では、ロゴなどの画像を他のキャリアに合わせて横240ピクセルで作成した画像を表示すると、高解像度のまま小さく表示されてしまう(けっこうかっこ悪い…)という問題がでてきてしまうという点について触れました。 ちなみに、ソフトバンク以外のキャリアの
久しぶりの更新です。毎日暑い日が続いていますね、、 さて、通常、携帯向けホームページを3キャリア(ドコモ、au、ソフトバンク)対応して作成するとき、業界的というか作成慣れしている人は「ドコモ+au」と「ソフトバンク」の2キャリア対応で作成するというお話しを、以前の記事でちょろっとしました。 これは絵文字の互換性の問題が影響しており、絵文字の互換性があるドコモとau、互換性のないボーダフォンを分けて作らなければならないということでした。 ただ、ドコモとauに絵文字の互換性があるといっても、1つのHTMLで2キャリアに対応させると、それ以外の部分、特にデザイン周りの違いがどうしても出てきてしまいます。 どうやら、ドコモ、auともにブラウザエンジンにHTMLの誤った解釈があり、例えばauではブロックレベル要素(Pタグやhrタグなど)に解釈の間違いがあるようです。 この不具合は、IEなどと同じよう
お久しぶりです。 なんと前回から約8ヶ月ぶりという更新。 さぼりすぎててすみません。 言い訳すると、ちょっと私的な都合でホームページの運営や更新の現場から離れていまして、 最近復活しました。 いろいろとコメントを頂きありがとうございます。 一通り読ませていただいています。 さて、もう今となっては古い情報になってしまいましたが、 話題のiPhone 3Gが7月に発売されるようですね。 デジモノ好きの自分としてはなんとも物欲をそそる商品。 ぜひ値段も安いそうですし欲しいですね。 さて、このiPhone。日本ではソフトバンクから発売されるそうで。 auを使っている自分ははたしてどうするか。 中にはiPhoneを今のキャリアを変えてまで欲しいという人もいますが、 自分としてはiPhoneは2台目に最適な商品ではないかと思うのです。 MNPまでしてソフトバンクに変更しない理由。 それは、ネットワーク
2008年11月25日追記 下記の情報は古くなっています。 最新のスクリプトは以下で配布しています。 →http://www.dspt.net/tools/emoji/ 3キャリア対応サイトを作成するために、ネックなのは絵文字の互換性。 ドコモの絵文字で入力したページを作成して、他のキャリアの携帯で見ると、auはサーバー側で自動変換されますが、ソフトバンクは対応していないので表示されません。 そこで、キャリアに合わせてドコモ&auとソフトバンクという2ページでページを作るのは面倒だし、 3キャリア別々に作成してもいちいち同じ絵文字を探して入力するのは少々面倒です。 そこで、絵文字を自動変換してくれるスクリプトが登場するわけですが、 僕が探したところフリーってのはなかなかないみたいです。 ということで作ってみました。 絵文字を変換するにあたって、まず考えなくてはならないのは、 絵文字の相互変
前回ブログで書いた携帯サイト作成時のページ容量編についての関連情報です。 携帯の機種ごとのキャッシュサイズ(ページ表示用の一時メモリ)を調べる方法がないか調べてみたところ、以下のスクリプトを発見しました。 Kawa.net XPさんの公開されている[Perl] phone.pl 携帯電話キャリア自動判別ライブラリ で、どうやらキャッシュサイズを取得できそうです。 こちらで公開されている「phone.pl」をもとに、 自前でごくごく簡単なCGIを作りましたので、 もし、ご自分の機種のキャッシュ容量を知りたければ、 以下にアクセスすれば分かります。 ■自分の機種の端末情報(キャッシュ容量など)を知るスクリプト ※2次元バーコードを読み取りできる機種をお持ちの方 (結果で表示された番号等の意味は、配布元をご覧になってください) ※それ以外の方 URL:http://www.dspt.net/cg
前回の記事でHTMLの冒頭で宣言するDOCTYPEの違いについて触れたのと、 携帯の機種によってDOCTYPEを自動出力するようなプログラム(関数) を作ろうかなって思ったので、ここで今一度覚え書き程度にまとめてみます。 3回にわたって各キャリア別に書いていきます。 まずはドコモから。 ○iモードHTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD Compact HTML 1.0 Draft//EN"> 通称:Compact HTML(CHTML)。W3Cで正式な勧告がなされている。 以前、携帯メーカー各社がこの「Compact HTML」をW3Cに逆提案したいきさつがある。 現在バージョンは7.0まであり、バージョンアップを重ねるごとに ドコモの新機能に対応した形でリリースされる。基本的にはHTMLと同様。 このDOCTYPEは省略可能か公式サイトには明言され
最近発売されているドコモの機種(FOMA)のブラウザにはたいてい iモードHTMLとiモードXHTMLの両方に対応したモードが搭載されています。 例えば、最新のハイエンド機種FOMA 904iでは、ドコモの技術情報の端末スペック表を見ると、 iモードHTMLはバージョン7.0、iモードXHTMLは2.1に対応していることが分かります。 これは、携帯電話が機能向上するのと並行して、 携帯に対応したHTMLもバージョンアップを繰り返すためです。 このi-HTMLとi-XHTMLの違いは、多くはHTMLタグで指定できる属性やCSSの対応状況になりますが、簡単に言ってしまえば、i-XHTMLのほうがより豊かな表現が可能になっていると解釈しても間違いではないでしょう。 さて、携帯サイトを作成する際のポイントについてふれますが、 多くの方が勘違いされているのは、 ドコモの機種が割と新しい機種、つまりX
携帯電話向けのサイトに埋め込むアクセスキーはリンクを携帯電話の文字(数字)盤に対応させたもの。 ちょっとした気配りは、嬉しいものです。 アクセスキー(accesskey)をもう少し詳しく説明すると、携帯サイトのメニュー画面等で、上から順に数字が割り当てられている場合がありますよね。例えば以下のような感じです。 トップーページ 掲示板 このとき、実際の携帯電話の操作は、文字盤の上にある方向キーを使って、「↓」を押してから、リンクに照準を合わせ、真ん中の「決定」ボタンを押します。 しかし、予めリンクに「アクセスキー」を指定しておくと、この操作をせずに、対応した番号の携帯電話の文字盤の数字キーを押せば、スグにリンク先に飛ぶことができます。 一見、それほど必要性が感じられないかもしれませんが、携帯サイトは縦に長くなりやすく、画面の末端にリンク先があるような場合では、このアクセスキーが指定され
こんにちは。久しぶりの更新です。 以前、このブログで書いた、 携帯サイトでのユーザのターゲッティングと運営。第2回 「PCからの閲覧制限」 で、携帯サイトを運営する上で、PCからの閲覧を制限するための方法と、 注意点についてふれました。 この記事を簡単におさらいすると、サーバーに「.htaccess」というファイルをおくと、PCからの閲覧を制限(携帯端末からのアクセスのみ許可)することができるということだったんですが、 このファイルの書き方が分からないという方も何名かいらっしゃたので、このhtaccessを簡単に生成できるツールを本家のサイトで公開しましたので、よかったら使ってみてください。
なかなか更新できず申し訳ないです。 auのGPS機能を利用する方法と、GPSの起動方法については前回の au携帯のGPS機能で地図を表示させるプログラム を参考にしていただければ、だいたいの流れは分かったとは思いますが、 今回は最終回「auのGPSから緯度や経度を取得するプログラム例」を書きたいと思います。 前回の記事で、 GPSを起動させるには、 <a href="device:gpsone?url=test.php&ver=1&datum=1&unit=0&acry=0&number=0">位置情報取得</a> というような記述をすればよいということはふれました。 ここで、上記の「url=test.php」という部分は、GPSにより得られた結果を処理するプログラムを指すわけですが、実際のところ、プログラムの肝となるのは、MapFanのような携帯地図表示サービス(要登録)が提供している仕
前回は、携帯サイトを運営する際に、サーバー定義ファイルである「.htaccess」を利用することで、各キャリアによる振り分けの方法を説明しました。 今回はさらに発展させて、PCからの閲覧を制限するなど、IPを利用したユーザーの絞り込みについてお話しします。 さて、「.htaccess」の有効利用として、一つ。 IPによる閲覧制限というものがあります。 有料携帯サイトの著作権管理(コピー制御)や、携帯からでしか受けられないサービスを提供している場合など、携帯からの閲覧のみを許可して、PC等からのアクセスを禁止させる方法があります。 PCサイトなどでは、荒らし対策などで使われるアクセス制限も、各社IPが固定されているという現実から、容易に制限ができるという点で携帯サイトでは広く一般的に行われています。 .htaccessに記述する場合は、各キャリアが発表しているIP帯域一覧を参考にして以下のよ
前回の「携帯のGPS機能を使って、携帯サイトで地図サービスを提供するには」という記事で、携帯のGPS機能を使って、自分のいる場所を地図に表示させる方法の概略を説明しましたので、今回は実際のプログラムの説明です。 まず、GPSで場所を特定して、地図に表示させるには、 以下のような手順を踏む必要があります。 1. au携帯のGPSをホームページから呼び出す。 2. 携帯に場所(緯度・経度)を取得させる。 3. 取得した緯度と経度を変換して、地図表示プログラムへ渡す。 4. 地図の表示 実際には、以下のようなサービスを最終的に作るまでの流れです。 ■GPSによる現在地表示サービス例 (キャッシング@消費者金融ナビ-周辺地図検索) http://cash.mobile1st.net/ie/map/ (auのみアクセス可能) QRコード 今回は1と2について説明します。 au携帯にあらかじめ搭載され
次のページ
このページを最初にブックマークしてみませんか?
『携帯ホームページを作ろう! -ちょっと詳しいモバイルサイトの作り方-』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く