大東商工会議所さん主催で、モバイルとTwitterの活用方法を学ぶセミナーの講師をさせて頂くことになりました。
11月11日(木)の13:00～です。
※ちなみに、僕の Twitter アカウント（@t_abe）はこちらです。
そこそこヘビーユーザーなのでツイート数がちょっと多目ですが、よろしければフォローして下さいね。
今回のセミナータイトルは『ビジネスに活用するツイッターと携帯メール販促セミナー』ということで、ケータイでの利用をメインに、メールとTwitterを利用しての販促について解説する予定です。
どうぞお気軽にご参加くださいね。
詳細・申込は以下のチラシ(PDF)からお願いいたします。
Movable Type で作成するサイトっていうのは、基本的には文字コードは UTF-8 になりますよね（もちろん mt-config.cgi を触って、設定を変えることはできますが)。
でも、ケータイ対応のサイトを作ろうとすると、文字コードは Shift_JIS にする必要があるので、ちょっと困ったことになるわけです。
そういう時に、MT-I18N プラグインを使って、ケータイ向けのテンプレートだけ Shift_JIS で出力するようにすれば、あっさり解決できます。
使い方は非常に簡単で、このプラグインを入れた後、MTEncodeText というMTタグで囲んだ部分が、指定した文字コードで出力されるので、ケータイ用のテンプレートの最初と最後に、
<MTEncodeText from="utf-8" to="Shift_JIS"> <!-- ここにテンプレートの内容 --> </MTEncodeText>
という感じで記述すればOKです。
ちなみに、from属性と to属性には、euc-jp 等の文字コードも指定できますので、UTF-8 → Shift_JIS の変換以外の用途にももちろん使えます。
DoCoMo の iモード用サイトで、CSS を使用する際には、色々と注意しなきゃいけない点があるので、ざっくりと書いておきます。
一番重要なのは、2009年3月以前に発売された機種(iモードブラウザ1.0搭載端末)と、2009年5月以降に発売された機種(iモードブラウザ2.0搭載端末)とで、大きく使用が異なることです。
大前提として、外部CSS は効きません。各要素に対して style 属性でスタイルを指定する必要があります。
ぶっちゃけ、管理・運用の効率化の面では CSS を使用するメリットは皆無に近いかと。
<span style="color:#3399cc;font-size:large;">ウルトラセブン！</span>
上記のような感じで、いちいち各要素に記述していかないとダメなわけです。
例外的に、a 要素の link, focus, visited クラスのみ、 style 要素による内部参照が可能なようです。というか、逆にそれしか手段がないから対応している、という感じでしょうか。
また、xhtml で書かれた文書で、かつ Content-type ヘッダが application/xhtml+xml でないとダメです。
text/html ではアウトです。
なので、perl や PHP でページを出力する場合には、以下のように Content-type ヘッダを出力する必要があります。
つぶやく
#-- perl の場合
print qq|Content-type: application/xhtml+xml\n\n|;
#-- PHP の場合
header("Content-type: application/xhtml+xml");
この辺はperl の CGI や PHP でよく出力する Content-type ヘッダ一覧 (MIME-type)なんかも併せてどうぞ。
スクリプトではなく、ベタの xhtml 文書の場合は、 .htaccess で Content-type ヘッダを指定する必要があります。
#-- 拡張子が .html の場合 AddType application/xhtml+xml .html
どちらにしても、3キャリア対応のサイトの場合などは、DoCoMo 用にだけ適用しないといけないので、非常に面倒ですね。
link 要素による外部CSS の参照も可能になり、style 要素による内部参照も a 要素限定ではなくなりました。
また、html、xhtml どちらでも CSS が有効になったので、 Content-type ヘッダも text/html で大丈夫です。
詳しくは、作ろうiモード：iモードブラウザ2.0対応i-CSS2について | サービス・機能 | NTTドコモを参照。
というわけで、今後出る機種に関しては、CSS を使用する場合において、DoCoMo だけ特別な何かをしなければならない、ということはあんまりなくなりそうです。
ただ、まだまだ現状では iモードブラウザ1.0搭載端末の方が圧倒的に多いと思うので、簡単に取り捨てるわけにはいかないでしょうね。
昨日仕事で、携帯からサイトの更新ができる、ちょっとしたCMSツールみたいなのを作っていたんですが、新たな発見があったのでメモ。
作っていたツールというのは「普段PCで更新しているPC向けサイトを、緊急時なんかに外出先でも更新できるようにする」という目的のものです。
ケータイのブラウザでツールにログインして、更新するページの項目を選択。その後表示されるフォームで、コンテンツを携帯から書き換える。というような処理をしています。
で、サイトのコンテンツを更新するツールなので、フォームの input要素や textarea要素には、現在のコンテンツが入った状態で出力されます。
当然、HTMLタグも入っているわけです。下記のような感じ。
<input type="text" name="header" value="<strong>新着情報</strong>" /> <textarea name="content">クリスマス中止のお知らせ！<br />今年のクリスマスは中止！</textarea>
動作確認をしてみると、ソフトバンクのケータイでは input要素や textarea要素内にHTMLタグが入っていても、普通にフォームが表示されました。
auのケータイではアウト。 input要素の value属性内や、textarea要素内の、HTMLタグがある部分で入力欄の内容が終わっちゃいます。
まあ双方一機種ずつしか確認してないので、ソフトバンクでも駄目なケータイがあるかもしれないし、au でも OKなケータイがあるかもしれません。
au とソフトバンクの違いというか、搭載しているブラウザの違いと言うべきでしょうか。
ちなみに、PCで表示した場合、IEだと普通に見れます。
DoCoMo のケータイは持ってないので確かめてません。
どっちにしろ、これは横着した結果こうなったというだけで、ほんとは全部「<」は「<」、「>」は「>」と出力するべきです。
というわけで、そのフォームを出力する前に、
$content =~ s/</</g; $content =~ s/>/>/g;
みたいにしてから、
print qq|<input type="text" name="header" value="$content" />\n|;
とか、
print qq|<textarea name="content">$content</textarea>\n|;
とやれば、au でもちゃんと表示できました。
いわゆる、ブラウザの「お気に入り」「ブックマーク」への追加ボタン・リンクのソースのまとめです。
フォームの場合は以下のような感じ。
<form method="GET" action="#">
<input type="button" value="お気に入りに追加"
onClick="window.external.AddFavorite('URI','タイトル');" />
</form>
アンカーテキストの場合は、以下のような感じ。
<a href="javascript:window.external.AddFavorite('URI','タイトル');">お気に入りに追加</a>
フォームの場合は以下のような感じ。
<form method="GET" action="#">
<input type="button" value="お気に入りに追加"
onClick="window.sidebar.addPanel('サイト名','URI','')" />
</form>
アンカーテキストの場合は、以下のような感じ。
<a href="javascript:window.sidebar.addPanel('サイト名','URI','')">お気に入りに追加</a>
<a href="URI" rel="sidebar" title="サイト名">お気に入りに追加</a>
<a href="device:home/bookmark?url=URI&title=サイト名">お気に入りに追加</a>
DoCoMo の iモード や Softbank のケータイに関しては、資料が見つかりませんでした。
ソーシャルブックマークに関しては、はてなブックマークをはじめ、日本国内のサービスだけでも20種類くらいあるみたいです。
これら全てに対応したボタンを表示するのはちょっと辛いですが、それらを統合してひとつのボタンで対応できる、「AddClips」というサービスがあるので、こちらを利用すると良いかと思います。
「設置したボタンを通じて、どのソーシャルブックマークサービスに何回登録されたか」というデータも見ることができるので、非常に便利です。
参考: JavaScriptでFirefox使用者の閲覧しているページをブックマークするにはどうすればよいのでしょうか？ - 教えて！goo
「IDとパスワードを使ってログインする」というステップを省略するために、PC用のWeb上のサービスやシステムでは Cookie を使うことがよくあります。
ところがPCと違ってケータイは、Cookieに対応していない端末が多数を占めます。
そのため、ケータイ向けのWeb上のサービスやシステムを作る際、ログインを簡略化するために、「サブスクライバID」とか「端末シリアル番号」とか「固体識別情報」とか呼ばれるものを使うことが、よくあります。
これは、それぞれの携帯電話個別に、電話番号とは別に割り振られた固有のIDのようなもので、多分 mixi の「かんたんログイン」とかも、これを取得して認証しているはず。
DoCoMo と Softbank は未確認ですが、少なくとも au の場合は、機種変更をしても、この番号は引き継がれるので、ケータイ所有者個人を識別するためにはかなり有効です。
ただし、どこのキャリアかは知りませんが、「解約して使われなくなった端末識別情報が、別の誰かに割り振られることがある」なんてことを聞いたことがあるので、この端末識別情報に頼りすぎたログイン認証システムは、安全ではないかもしれないことも付記しておきます。
html の a要素や form要素に utn属性 をつけることによって、そのリンクや送信ボタンをクリックした際に、サーバーに固体識別情報が送信されます。
なお、送信される前に端末側には「固体識別情報を送信しますか？」みたいな確認ダイアログが表示され、同意した場合のみ送信されます。
<!-- a要素の場合 --> <p><a href="http://www.abe-tatsuya.com/login.cgi" utn>ログイン</a></p> <!-- form要素の場合 --> <form method="POST" action="http://www.abe-tatsuya.com/login.cgi" utn> <input type="submit" value="ログイン" /> </form>
本当は valid な xhtml にするために、utn="utn" としたいところなんですが、ケータイというのは機種ごとに仕様が異なっていたりして、「utn="utn"」という書き方だと正常に動作してくれない機種なんかもありそうで怖いので、DoCoMo の utn属性の説明ページの通りに書いています。
全機種の動作確認ができる機会も、まずないですし……。
このエントリーのコメントでご指摘頂いた通り、i-mode HTML/XHTML 比較表を見ると、「utn="utn"」という書き方で大丈夫なようです。
コメント頂いたyurikoさん、ありがとうございました。
で、サーバー側に送られてくる固体識別情報はどこに含まれているかというと、User-Agent ヘッダに含まれています。
非FOMA端末の場合、固体識別情報を含んだ User-Agent は以下のようになります。
DoCoMo/1.0/X503i/c10/ser***********
「ser***********」の「***********」の部分には、11桁の英数字が入り、これが固体識別情報に当たります。
perl でこれを取得しようとすると、以下のような感じでしょうか(普段自分が使ってるソースは、他のサブルーチンから渡される変数を色々使ってて、ブログに掲載しても可読性が低いと思われるので新たに書きました。以下のソースは動作確認を全くしてません)。
if($ENV{'HTTP_USER_AGENT'} =~ /^DoCoMo\/1\.0\/.*\/(ser\w{11})$/){
#-- 固体識別情報を変数に代入
$mobile_id = $1;
}
FOMA端末の場合は「携帯電話の製造番号」と「FOMAカードの製造番号」の二種類の固体識別情報が取得できます。
「携帯電話の製造番号」の方は、機種変更をしたら変わってしまうと思うんですが、「FOMAカードの製造番号」の方は、多分機種変更をしても、FOMAカードが同一であれば変わらないはず。
FOMA端末の、固体識別情報を含んだ User-Agent は以下の通り。
DoCoMo/2.0 YYYY(c10;serXXXXXXXXXXXXXXX; iccxxxxxxxxxxxxxxxxxxxx)
「serXXXXXXXXXXXXXXX」の部分が携帯電話の製造番号で、「XXXXXXXXXXXXXXX」には15桁の英数字が入ります。
「iccxxxxxxxxxxxxxxxxxxxx」の部分がFOMAカードの製造番号で、「xxxxxxxxxxxxxxxxxxxx」には20桁の英数字が入ります。
用途にもよりますが、基本的には FOMAカードの製造番号を取得した方が便利ですかね。
FOMAカードの製造番号を取得する perl のスクリプトは以下(上の同じく、以下のソースは動作確認を全くしてません)。
if($ENV{'HTTP_USER_AGENT'} =~ /^DoCoMo\/2\.0 .*; (icc\w{20})\)$/){
#-- 固体識別情報を変数に代入
$mobile_id = $1;
}
au の場合は、自動的にサブスクライバIDと呼ばれる X_UP_SUBNO ヘッダを、サーバーに送信しています。
ただし、ユーザー側がこのヘッダを「通知しない」という設定にしている場合は、送信しません。
通知設定に関しては、au 公式サイトのお知らせにあります。
サーバーに送信される X_UP_SUBNO ヘッダは、以下のようなフォーマットになっています。
xxxxxxxxxxxxxx_**.ezweb.ne.jp
最初の「xxxxxxxxxxxxxx」の部分が14桁の数字で、端末固有の番号にあたるようです。
※参考: モバイルCGI研究（EZweb編）環境変数リファレンス [CGIぽん]
サブスクライバIDを取得する perl スクリプトは以下の通り(同様に以下のソースは動作確認を全くしてません)。
if($ENV{'HTTP_X_UP_SUBNO'} =~ /^(\d{14})_\w{2}\.ezweb\.ne\.jp$/){
#-- サブスクライバIDを変数に代入
$mobile_id = $1;
}
Softbank の端末の場合、ユーザーが「ユーザーID通知」または「製造番号通知」の設定を on にしていれば、端末シリアル番号というものが User-Agent に含まれます。
端末の世代によって、フォーマットが異なってややこしいですが、ソフトバンクの公式サイトのユーザーエージェントについての説明によると、以下のようなパターンがあるらしいです。
#-- SoftBank 6-5 Series J-PHONE/4.0/J-SH51/SN************ SH/0001a Profile/MIDP-1.0 Configuration/CLDC-1.0 Ext-Profile/JSCL-1.1.0 #-- SoftBank 3G Series (Vodafone時代の端末) Vodafone/1.0/V904SH/SHJ001/SN************ Browser/VF-NetFront/3.3 Profile/MIDP-2.0 Configuration/CLDC-1.1 #-- SoftBank 3G Series (Softbank時代の端末) SoftBank/1.0/910T/TJ001/SN************ Browser/NetFront/3.3 Profile/MIDP-2.0 Configuration/CLDC-1.1
「SN************」の部分が端末シリアル番号で「************」には11～15桁の英数字が入るようです。
端末シリアル番号を取得する perl スクリプトは、ちょっといいかげんですが以下のような感じ(同様に以下のソースは動作確認を全くしてません)。
if($ENV{'HTTP_USER_AGENT'} =~ /^(J\-PHONE|Vodafone|Softbank)\/.*\/(SN\w{11,15}) .*/){
#-- 端末シリアル番号を変数に代入
$mobile_id = $2;
}
ログイン認証を端末識別情報に依存しすぎたせいで、「機種変更したらログインできない」なんていう事態に陥ったサービスを知っています。
また、たまたま携帯事業者側の都合で、全く同じ番号の端末識別情報が複数の端末に割り振られた、なんてケースも聞いたことがあります。
ケータイは文字入力が不便なインターフェイスなので、ログインの簡略化のために端末識別情報を使うのは、ユーザーの利便性向上のためにも、良いことだとは思うのですが、認証をこれだけに頼るのは、ちょっと危険かもしれません。
ケータイはPCと比較して、文字入力関連のインターフェイスが非情に不便です。
それはもちろん、携帯電話という端末の特性上、仕方が無い部分でもあるかもしれませんが、ちょっとした工夫でユーザーに与える文字入力へのストレスを軽減することが出来ます。
例えば、何かの入力フォームで、半角数字のみを入力してもらうテキスト入力欄があったとします。
そこで何の工夫も無く、
<input type="text" name="userid" value="" size="7" maxlength="6" />
みたいな感じでやっちゃうと、ユーザーがその入力欄に文字を入力しようとすると、最初に全角かなモードでテキスト入力のウィンドウが開いちゃいます。
これを、最初から半角数字モードで開くようにするだけで、ユーザーが感じるストレスは結構軽くなるんじゃないでしょうか。
各携帯電話のキャリアでは、このようなテキスト入力欄に対して、文字入力の種別を指定するための、input要素向けの独自属性を用意しています。
が、DoCoMo、au、Softbankそれぞれ別の属性になってますので、複数キャリア対応のサイトの場合は、全ての属性を列記しないといけません。
<input type="text" name="userid" value="" size="7" maxlength="6" istyle="4" />
という風に、istyle属性を追加することで、入力してもらう文字種別を指定できます。
istyle属性の値の対応は以下の通り。
<input type="text" name="userid" value="" size="7" maxlength="6" format="*N" />
という風に、format属性を追加することで、入力してもらう文字種別を指定できます。
format属性の値の対応は以下の通り。
ちなみに、「*A」「*a」「*N」等の頭の「*(アスタリスク)」は、「文字数の制限なし」という意味です。
「常に五桁の数字だけを入力してもらいたい」という場合は format="5N"という風に、「*(アスタリスク)」の代わりに、指定した入力文字数を指定すれば、入力する文字数も制限できます。
ただし、「五桁以内の数字を入力してもらいたい」という場合には、この指定方法は使えない端末が多いです。
四桁とか三桁の数字を入力してOKを押しても、端末側でエラーを返してしまいます。
あくまでも「文字数が固定の場合」のみに利用できる方法です。
<input type="text" name="userid" value="" size="7" maxlength="6" mode="numeric" />
という風に、mode属性を追加することで、入力してもらう文字種別を指定できます。
mode属性の値の対応は以下の通り。
上記を踏まえて、DoCoMo、au、Softbankの主要3キャリアに対応したテキスト入力欄を作ろうと思うと、以下のようになります。
まず、全角かなも半角英数も混在するような、何でもOKな入力欄の場合。
<input type="text" name="f1" value="" size="10" maxlength="128"
istyle="1" format="*M" mode="hiragana" />
続いて、メールアドレス等の半角英数（＋記号）だけを入力してもらいたい場合。
<input type="text" name="f2" value="" size="10" maxlength="128"
istyle="3" format="*x" mode="alphabet" />
そして、電話番号や連番のID等、半角数字のみを入力してもらいたい場合。
<input type="text" name="f3" value="" size="10" maxlength="128"
istyle="4" format="*N" mode="numeric" />
以上のようになります。
とりあえず、この3つだけ覚えておけば、ほとんど事足りるかな？
「ケータイでPCのサイトが閲覧できる！」という謳い文句の割に、所謂「フルブラウザ」と比較しても機能的に中途半端で(特にJavaScript非対応はイタい)、個人的にはあんまり使い物にならないと思っている jigブラウザ。
同一URLで、User-Agentを元にして、ケータイとPCを自動で振り分ける際に、jigブラウザをPCサイト側に振り分けると、サイトの構成によっては、あまりいただけないことになってしまいます。
特に問題なのが、ケータイ版のYahoo!検索「Yahoo!モバイル」で検索した際に「PCサイトとの一致」でヒットしたサイトは、自動的にjigブラウザで表示されてしまうこと。
Yahoo!モバイルのインデックスが微妙なせいで、ケータイサイトとPCサイトを同一URLで公開していると、「携帯サイトとの一致」ではヒットしないけど「PCサイトとの一致」ではヒットする、みたいなことも起こりうるんですよね。
「PCサイトとの一致」でヒットしたサイトを、自動でjigブラウザで表示するのは基本的には便利な機能なんですが……。
こっちはちゃんとケータイに合わせた仕様でのサイトを提供しているんだから、わざわざ中途半端な機能しかないjigブラウザでPCサイト見るくらいなら、普通にケータイ用のブラウザでケータイ向けサイトを見てもらった方が、まともにサイト内のコンテンツを利用することができるわけです。
そういうわけで、jigブラウザからのアクセスの場合は、それを判別して、サイト内に注意書きを自動で入れるとか、そもそもjigブラウザでもケータイ向けサイトを表示するようにするとか、そんな対処が必要になります。
「Yahoo!モバイル」等で提供されている「jigブラウザ WEB」のデフォルトのUser-Agentは、
Mozilla/4.0 (jig browser web; version; 機種名
という感じです。
「version」はjigブラウザのバージョン。「1.0.4」みたいな数字が入る。
「機種名」は利用している携帯の機種名。「F904i」「812SH」みたいなのが入る。
なのでとりあえず、User-Agent内に「jig browser web」が含まれている場合はjigブラウザだと判断して、何らかの処理をするのが手っ取り早いかと思います。
perlなら、
if($ENV{'HTTP_USER_AGENT'} =~ /jig browser web/){
#-- ここにjigブラウザの場合の処理
}
PHPなら、
if(preg_match("/jig browser web/",$_SERVER['HTTP_USER_AGENT'])){
// ここにjigブラウザの場合の処理
}
こんな感じで。
ちなみに、GoogleもPCサイトの検索結果に出たサイトを携帯で見る場合、独自のブラウザを介して表示しますが、こっちは未調査です。
そのうち調べます。
Web系Tipsが旧サイトからの転載ネタばっかりなので、たまには新ネタを。
au(Ezweb)向けサイトでオリジナルの音声ファイルを配布する方法です。
これは色んなソフトがありますが、au推奨はQuick Time Proのようです。
他には、Sound it!
作成した3g2ファイルをFTPでWebサーバーにアップロードします。
.htaccessに以下の記述を追加します。
AddType audio/3gpp2 .3g2
音声だけでなく、動画も配布する場合は、以下も追加。
AddType video/3gpp2 .3g2
ダウンロードページを作ります。
音声ファイルのダウンロード用のリンクは、下記のように記述します。
<object data="http://www.abe-tatsuya.com/hyakkusenman.3g2" type="audio/3gpp2" copyright="no" standby="ダウンロードする"> <param name="disposition" value="devmpzz" valuetype="data" /> <param name="size" value="12345678" valuetype="data" /> <param name="title" value="思い出は百千万" valuetype="data" /> </object>
このhtmlファイルをWebサーバーにアップロードすれば、auの3g2対応端末でアクセスすると音声ファイルがダウンロードできます。
各端末の対応状況は、au公式サイトのマルチメディアデータ対応表を参照のこと。
なんというか、今回のは相当古い情報なんですが......最近、携帯関連の仕事も増えてきたし、古くても今でもある程度は通用するノウハウなので、一応旧サイトから転載しておきます。
とりあえず、i-mode,J-SKY,EZwebの各UserAgentに関しては、公式サイトに詳しく載ってます。
上記を踏まえた上で、凄く単純に各携帯端末を判別してみる(perlで)。
#-- i-mode if($ENV{'HTTP_USER_AGENT'} =~ /^DoCoMo\//){$UA = 'i';} #-- J-SKY elsif($ENV{'HTTP_USER_AGENT'} =~ /^J-PHONE\//){$UA = 'j';} #-- EZweb elsif($ENV{'HTTP_USER_AGENT'} =~ /^UP\.Browser\//){$UA = 'e';} #-- EZweb(WAP2.0対応機) elsif($ENV{'HTTP_USER_AGENT'} =~ /^KDDI-/){$UA = 'e2';} #-- その他 else{$UA = 'other';}
実際には、EZwebのWAP2.0非対応機でもEZサーバーがc-html・xhtml・htmlもhdmlに変換して端末へ情報を送ってくれるので、 今後のことを考えれば、携帯端末用コンテンツはEZwebのHTMLコンテンツ変換仕様を考慮した上で、 i-modeやJ-SKY独自の属性を取り込みつつxhtmlで記述するのが一番楽ちんだと思う。
各社のhtml,xhtml等の対応状況とか独自属性とかは下記公式サイト参照。
Webコンサルタントやシステムエンジニア、執筆業などをやっている、グッドホープ代表・阿部辰也のブログです。
Web技術系のTipsから仕事の話、趣味の話まで色々と。
人生は所詮生まれてから死ぬまでの壮大な暇つぶし。
だったら有意義に暇をつぶして生きましょー。
阿部辰也へのお仕事のご依頼・問合せはこちらからどうぞ。
Twitter: @t_abe
読書メーター: ID:Tatsuya
Powered by Movable Type 5.02
