出町柳しんごです。

ホロホロッとネットしてたら、こんな携帯サービスがユーザー数20,000人突破でがんばってるとか。

ヒトメボβ版│一目惚れしたとき押すスイッチ

1. 一目惚れしたぜっ！
2. 携帯のボタンをスイッチオンッ！
3. 一目惚れした時間と場所を記録してくれる
4. 同じ場所、時間で記録した人がいたら「両想いかも？！」
5. ドキドキがとまらね〜と妄想を膨らませる

と、こんな感じのサービスかな。（iPhoneのため確認できず。。。）
てか、まどろっこし〜

GPSを使ったサービスで面白いアイディアだと思いました。
消極的な恋愛行動へのプローチが爽やかな感じで良い。
これにマチコさん的な要素があれば、、、ん？売り込む？！

モバイルサイトマーケティングにおけるQRコードの役割はいろいろありますが、ひとえにQRコードと言ってもURLへ誘導するだけのものではありません。

QRコードで可能なことは
・サイトのURLを表示
・テキストで文字情報の表示
・アドレス帳に登録
・メールアドレスの登録
・メロディ・画像の再生／保存
・Bookmark登録
・アプリ
など。

今回はQRコードからアドレス帳に登録する際のやり方を忘備録としてメモ。

各キャリアによって微妙に書き方が違う

【au】【SoftBank】

MEMORY:メモ領域にセットする文字列（必須）
NAME1: 韋駄天　（改行）
NAME2: 太郎　（改行）
MAIL1:kiteretsuso@gmail.com　（改行）
TEL1:08012345678（改行）
ADD: 大阪市北区東天満

など

【docomo】

MEMORY:MECARD:N:韋駄天,太郎;SOUND:ｲﾀﾞﾃﾝｴ,ﾀﾛｳ;TEL:08012345678;EMAIL:kiteretsuso@gmail.com;ADR:大阪市北区東天満;URL:http://www.kiteretsu-so.com/;;

など
MEMORY～は一行で書くようにしましょう。

【3キャリア対応】

MEMORY:MECARD:N:韋駄天,太郎;SOUND:ｲﾀﾞﾃﾝｴ,ﾀﾛｳ;TEL:08012345678;EMAIL:kiteretsuso@gmail.com;;
NAME1:韋駄天 太郎
NAME2:ｲﾀﾞﾃﾝﾀﾛｳ
MAIL1:kiteretsuso@gmail.com
TEL1:08012345678


上記、docomoの部分は改行しないでそのまま使用してください。

3キャリア対応サンプル

先日の「第1回　キテレツ巡業　キテレツ春場所」で発表したモバイルサービス『マチコ』の全貌です。
今回の開発にあたって、モバイルの現状、技術的な部分、その他知りたい情報など共有できれば良いし、アウトプットしたいので見たいところだけ見てください。

結局『マチコ』の全体構成って？

▲この記事の先頭に戻る

GPSやら位置情報がどうのこうの言ってるけど何？

携帯電話で位置情報を取得する方法は２つあります。
・基地局を使った位置情報
・GPSを使った位置情報
の２つです。今回は主に、後者のGPSを使った位置情報の取得の仕方を利用しています。
それでは両者のちがいを簡単に説明します。

[基地局を使った位置情報]

　基地局の位置情報を利用した場合は各キャリア（docomo,au,softbankなど）のアンテナとなる基地局を利用することになります。
メリットはGPS対応機種でなくても利用できるところです。しかし、自分が今いる位置を正確に表してくれるとは限りません。
だいぶズレます。数kmずれるのなんかざらにあります。そういう面で、かなりアバウトなところがデメリットですね。

[GPSを使った位置情報]

　GPSを利用した場合、衛星使っているのでかなり正確な位置情報を取得することができます。みなさんご存知のカーナビとかに使われているシステムですね！
ただ、位置を取得す場所によって測位レベルが低いとやはりズレちゃいます。それでも、基地局のアンテナを利用するよりも遥かに正確に位置を取得することができるのがメリットです。
　デメリットは、まだGPSに対応している携帯の機種をもっている人が少ないというところです。
ただ、総務省が今年度４月から携帯電話にはGPS搭載を義務づけることが決まっています。今後必ずGPS対応のサービスが普及してくるでしょう。

ちなみにGPSがどれくらい精度が高いかというと、この写真（Google Earth）を見て頂ければわかると思います。

これは、先日の5月10日の発表会の後にデジハリ大阪校の前の道路で、実験で位置情報を取得した位置です。
右の黄色のピンの位置が実際に取得された位置です。
多少ずれてはいますが、ほぼあっています。おそらく誤差は数メートルといったところでしょう！やはり衛星のシステムを使うと精度が高いんですね～

▲この記事の先頭に戻る

実際の位置情報を取得するのって難しい？

　実際に位置情報を取得する方法はメチャ簡単です。

『DoCoMOの場合』

<a href="http://www.example.com/index.php?" lcs>GPSで位置情報を取得</a>

『auの場合』

<a href="device:gpsone?url=http://www.example.com/index.php?ver=1&ver=1&datum=0&unit=0">GPSで位置情報を取得</a>

『softbankの場合』

<a href="location:auto?url=http://www.example.com/index.php?">GPSで位置情報を取得</a>

softbankの場合「location:auto」で簡易位置情報（基地局で取得する方）「location:cell」とGPSで取得する「location:gps」の優先度の高い方に自動的に選択されるので、GPSに非対応の機種でも簡易位置で取得できます。

設置するソースは簡単です。
ただ、設置しても今度レスポンスされたときの返される戻り値がまたキャリアによって変わってくるのです。3キャリアとも単純に「緯度」と「経度」が10進数で返ってこりゃ一番楽なのですが、そういうわけにはいかないです。
また、キャリアごとに設置するa要素のhref属性が違うので、振り分ける必要が出てきます。
よって、結果的に結構めんどくさいです。

▲この記事の先頭に戻る

このサービスの核になるPEARのNet_UserAgent_Mobile_GPS

　ここはPHPの話になります。
各キャリアごとにアクセスしてきたユーザーエージェントを判別して、GETで取得するための（「3.実際の位置情報を取得するのって難しい？」）の記述を3つ書いて、更にまた、各キャリアごとのレスポンスのパラメータを分解させて・・・
みたいなことを１からやろうとすると、それだけで１ヶ月かかっちゃいます。

そこでPEARというところから提供されているPHPで有名なライブラリを使います。
使うライブラリ名はNet_UserAgent_Mobile_GPSです。

例えば、GPSで位置情報を取得するためのa要素（リンク）を設置するのと、それをクリックした後のレスポンスで緯度・経度を取得するソースは以下のような感じです。

[リンクの設置](PEARでNet_UserAgent_Mobile_GPSをインストールしていることを前提としています)

<?php
require 'Net/UserAgent/Mobile/GPS.php';

try {
    $g = Net_UserAgent_Mobile_GPS::factory();
} catch (Net_UserAgent_Mobile_GPS_Exception $e) {
    var_dump($e->getMessage());
    exit();
}
$url = "http://machiko.kiteretsu-so.com/form.php";
$str = "GPS対応機種かどうかﾁｪｯｸ";
$glink = $g->getGPSLink($url, $str);
?>

[返り値の緯度と経度を取得]

<?php
require 'Net/UserAgent/Mobile/GPS.php';

try {
    $g = Net_UserAgent_Mobile_GPS::factory();
} catch (Net_UserAgent_Mobile_GPS_Exception $e) {
    var_dump($e->getMessage());
    exit();
}
$res = $g->getGPSResponse();
//array(2) { ["lat"]=>  string(13) "+35.40.58.968" ["lon"]=>  string(14) "+139.41.12.966" }
?>

めちゃくちゃ簡単です。
60進数で緯度と経度が配列で返ってくるので、超扱いやすいです。
これだけで、3キャリア統一したかたちで動かすことができるのだから、やはり先人に感謝せんといけませんね(^^)

僕の個人のブログにも詳細あります。

▲この記事の先頭に戻る

電話がかかってきたり、他の人からメールがきたらどうするの？

　ユーザーを特定させる方法、つまりセッション管理の話です。
『マチコ』の使用中に電話がかかってきたり、他の人からメールがきたらどうするの？という問題です。
　結論からいうと受信メールにユーザーを特定するアクセスURLを残しておくことでいったんサイトを離れたとしても、特定できるようにしました。
基本idは使い捨てにしていますので、再びちがう人と距離を感じたい場合はまた新たなIDが発行され、アクセス用URLが受信メールに残る仕組みです。

ここからはその、ユーザーを特定させるセッション管理の話です。

　PCでログインを維持するために、あらかじめログイン名やパスワードを入力させるという方法をとります。かしこさんの得意なヤツですね！！
モバイルはPCとはちがって、文字の入力やボタン操作がしにくいのが特徴です。
いちいちモバイルサイトに訪問したときに、ログイン名やパスワードを入力させようとすると「うわ、めんどくせー」と思っちゃいユーザーは離れていきます。

　モバイルのセッション管理の有効な方法は大きく３つあります。
・クッキーを利用
・URLにセッションIDを付与していく方法
・かんたんログイン（個体識別情報）を利用する

[クッキーを利用する]

上の表のように各キャリアがそれぞれcookieに対応しているわけではありません。
なので、cookieを利用したセッション管理は現状では３キャリア統一させた管理は難しいと思います。

[URLにセッションIDを付与していく方法]
　URLにセッションIDを付与していく方法は、セッション ID という、各ユーザー固有の ID を保存し、各ページ間で共有することによって、同一のユーザからのアクセスかどうかを判断することによって実現されています。

URLに付与されるセッションIDの例
http://www.example.com/index.php?PHPSESSID=957e1ace99b2e12f36f295529e57d8aa

　このように、[PHPSESSID=セッションID」というフォーマットでURLに付与されるようになります。
PHPSESSIDというのはデフォルトのセッション ID名になりますので変更することができます。

例えばユーザー管理の情報が
・名前：棟居
・住所：大阪
・年齢:25
の場合

[１ページ目]

<?php
	ini_set('session.use_trans_sid', '1');
	session_start();
?>
<html>
<body>
<p>session.phpのページ</p>

<?php
　$_SESSION["name"] = "棟居";
　$_SESSION["pref"] = "大阪";
　$_SESSION["age"] = 25;
?>

<a href="session2.php">確認画面へ</a>
</body>
</html>

[2ページ目]

<?php
	ini_set('session.use_trans_sid', '1');
	session_start();
?>

<html>
<body>
<p>session2.phpのページ</p>

<?php
　print htmlspecialchars($_SESSION["name"]) . "<BR>";
　print htmlspecialchars($_SESSION["age"]) . "<BR>";
　print htmlspecialchars($_SESSION["pref"]) . "<BR>";
?>

<a href="session3.php">session3.phpへ</a>

</body>
</html>

これは１ページ目にセットされたユーザー情報を2ページ目に持っていってブラウザに出力させるといことができます。
このようにしていくと、ページの遷移の際にURLにセッションIDが付与されながらユーザーの情報をいくらでも他のページに持ち回すことができます。

１行目の

ini_set('session.use_trans_sid', '1');

はphp.iniの設定を変えていることになります。
「’session.use_trans_sid’」はURLに自動的にセッションIDを埋め込むかどうかの設定になります。する場合「1」しない場合「0」です。

この設定はphp.iniに書くのが一般的ですが、全体が変更されてしまうため、セッションIDを利用するファイル数が少ないときなどはこのように直接phpファイルの先頭に書いやることもできます。

今回『マチコ』では一部この方法をとっています。
ただ、URLにセッションIDを付与していく方法はセキュリティ上よくありません。
URLにセッションIDが丸見えだからです。特にdocomo。
この辺はセキュリティ対策を考えながら利用する必要があります。

[かんたんログイン（個体識別情報）を利用する]

　かんたんログインはセッション管理が必要なモバイルサイトで非常によく利用されています。
これは携帯電話端末の個体識別情報を利用しています。

携帯端末には一台一台「個体識別番号」という番号が割り振られていて、この番号を取得することによってユーザーがアクセスしてきた時に認証の判断を行ないます。
個体識別番号のパラメータの取得方法は各キャリアによってこれも違ってきます。

メリットはやはり、ID、パスワードを入力しなくてもクリック１回でログインでき、ユーザーにスムーズにコンテンツに入り込むんでもらうことができます。

デメリットはユーザ本人が個体識別番号を送信するかしないか選択するこができるようになっているところです。

[docomo]

　僕はdocomoを使っているのですが、このようにdocomoでは１回目「FOMAカードの製造番号を送信しますか？」というダイアログのようなものがでてきます。
初めの１回だけですが、普通の人なら少し警戒してしまうこともあると思います。

[au]
　auは端末を購入して最初の設定のときに、「EZ番号を送りますか？」とユーザに問いかけられていて、たいていのユーザは「はい」と答えていると思います。

[softbank]
　softbankは端末を購入したままの設定で、「個体識別番号を送らない」という設定になっている機種があります。特に3G端末からなっているみたいです。

　携帯の端末情報を送信しているだけなので、携帯電話番号、メールアドレス、住所、氏名が送信されているわけではないです。
その辺を安心してユーザーに利用してもらえるようにすればかなり便利な機能だと僕は思います。

▲この記事の先頭に戻る

取得した【緯度】【経度】【距離】【タイムスタンプ】をCSVで保存

　取得した、【緯度】【経度】【距離】【タイムスタンプ】はCSV（カンマ区切り）データとして保存していきます。
先日とんかさんがAさんとBさんの距離を求める式の記事を公開してくれました。
最新のAさんとBさんの距離を求める場合、それぞれの最新の緯度と経度の値が必要になります。
そこで、CSVに保存していくことによって、CSVから相手の最新のデータをひっぱってきています。

IDがa45さんの人が「♪バイブで距離を感じる♪」ボタンを押すと、IDがb45さんのcsvデータの最新の緯度・経度を取り出して計算するという方法をとりました。

▲この記事の先頭に戻る

現在人気モバイルサイトの傾向

　どんなモバイルサイトを作ろうかという打ち合わせをしたときに作った資料です。
僕はモバイルの知識が全くの0だったために、どういうサイトがあるのかも知らなかったです。今でも頻繁にモバイルサイトを利用しているわけではないですが・・・。

現状、モバイルのヘビーユーザーのほとんどが学生であるために、学生ぐらいをターゲットにしたコンテンツがやっぱり多いみたいですね。

傾向としては「自分をアピールできるサービス」がヒットしています。

最近は小学生や中学生でも「魔法のiらんど」や「mobilespace」などの有名な無料ホムペ開設サイトでホームページで自分のサイトを持ち「前略プロフィール」でプロフを公開し、自分をアピールしていっています。
アピールの仕方は開設した、ホムペやミニブログなどで写真をUPさせたり記事を書いたりしています。
特に、クリスマス、誕生日、夏休み、土曜日、日曜日などのモブログのＵＰ率は非常高いらしいです。これは、学生が休みやイベント日に投稿している人がやはりたくさん多いということなんでしょうな～。

コミュニティ系はなんだかんだで結局mixiにたどりつく人が多いみたいです。

あと女子学生をターゲットにしている「@peps」はすごいです！
ユーザビリティもクソもありません！とにかくギラギラしたもん勝ち！
最近、小中高生の保護者が子供に携帯電話をどういうふうに持たせるかという社会問題がありますが、割かし「モバゲータウン」や「GREE」などはCM広告も打っているだけに保護者自身もアクセスしたことがあるみたいですが、@pepsは最強です！
「@peps」保護者は知りません！とにかく女子学生の利用数がすごいみたい！！

▲この記事の先頭に戻る

こんばんわ、私が棟居真一郎です。
ひどく投稿が遅れましたので、俳句を作りましたのでこちらを堪能しお許しください。
こう情景今年の花見にはよく・・・あると思います。

1.画面表示の最適化
2.キャリア/機種判別
3.絵文字
4.ユーザーエージェント
5.位置情報
6.かんたんログイン
7.携帯メール
8.デコメール
9.空メール
10.QRコード

今日は今月「春場所対決」で必死に開発をしているモバイルサイト（そこはもうバラしますが）の参考書籍です。
これ、はっきり言うてかなり使えます！！

今初めてモバイルサイトを作っているのですが、ネットの情報って結構まだ少ないんですよね。
あるのはるのですが、まだまとまってないというか。モバイルもトレンドが速いんで、2年まえぐらいの情報だともうだいぶ古い感じなんですよね～。

でこの『PHPx携帯 -デベロッパーズバイブル-』はかなり、細かい情報がまとまってて、初めてモバイルサイトを制作する人にはかなり便利な一冊になるはず。

作ってて、結局一番ぶちあたる壁がやっぱりキャリアの差なんですよね。
上記にあげた、10項目ほとんどキャリアによる差があります。一々DoCoMoやらSoftBankやらのオフィシャルサイトに行って仕様とかジロジロ眺めたりするのって結構時間食っちゃうんですよね～。
かなり短期間で要約した情報が理解できるのではないでしょうか。

今回は前に作ったキテレツ荘のFlashブログパーツの作り方を紹介します。
めっちゃ簡単なのでこの機会にオリジナルのFlashブログパーツを作ってみてはいかがですか。

今回ActionScript2.0で制作しましたので（AS3がわからないので）AS3でやる人はその辺だけ変更してください。

まず、Flashでデザインをつくり、ボタン用にムービークリップ（以下MC）を作成。
今回はインスタンス名を“btn”としました。
必要であれば、そのMCにマウスオーバーしたときの処理などをいれてください。

タイムラインの1フレーム目に以下スクリプトを記述。

btn.onRelease=function(){
getURL(”javascript:void(jsfunction())”);　// 【jsfunction】はJavascriptで用意するfunction名です
}

あとは書き出してFlash側は終了。

続きましてJavascriptファイルに下記スクリプトを記述して終了。

var code2 = ‘‘;
document.write(code2);

function jsfunction(){
document.body.innerHTML=document.body.innerHTML.replace(/です/g,’ナリ’);

さまざまなドメイン上で動作させてますのでallowScriptAccessプロパティの値はalwaysにしてください。（デフォルトはsameDomainかな？）
あとはdocument.body.innerHTML.replace(/です/g,’ナリ’);を増やしていってさまざまな言葉が変換されるようにしています。

あとは貼り付けるときのスクリプトは下記になります。

簡単だったと思いますけどどうですか？？
とはいいましても棟居真一郎さんと風の谷のかしこさんがつくったようなもんですが。。。

世の中、不況と言われてますし、個人的にも昨年末のお金の使い過ぎで
節約しなきゃいかんなと思うことが多いです。

さて、Googleからこんなコンテンツが（英語）。

Tip Jar

節約に関するアイデアを共有できるクラウドソーシング。
先日、韋駄天太郎くんのエントリーで「クラウド・コンピューティングとは」って
エントリーがあったので、あえてクラウドソーシングって使ったけど、
ここで言うクラウドはまた違う意味なので、簡単に紹介しときます。

クラウドソーシングで使われるクラウドは”crowd”なので、”群衆”って意味。
SNSとかをマーケティングに取り入れる手法とかもこれ。

今回、上で紹介しているコンテンツはGoogleのModeratorサービスってのをベースで
使ってて、それはGoogle App Engine上に構築されてるとか。
（てことは、これはクラウドコンピューティングなクラウドソーシング？！ややこしっ）

週に一度くらいはおにぎりでも持って行けるようにしたい。
Tip Jarで掲載されているアイディアの内容よりも、実行力が問われるんすよね。。。

ほな、さいなら。

遅れをとってはならんということで、今日はFlashで作るデコメアニメを紹介。

作り方はデコメ作成と同様超簡単なので、時間あるときにでもオリジナルデコメアニメを作ってみてください。

【デコメアニメの作り方】

1. NTTドコモのサイトから『デコメアニメキット』をダウンロード、インストール。
   >>デコメアニメキットはこちらから
   
2. Flashを起動し、デコメアニメキットに使用するswfファイルを作成。
   （Flash Lite3.0がない場合はAdobeよりバージョンをアップデートしてください。）
   （Adobe Device Central CS3も必要なので合わせてアップデート。）

   手順1：新規ドキュメントでFlashファイル（モバイル）を選択

   

   手順2：プレーヤーバージョンを『Flash Lite3.0』に設定→デバイスを選択。
   （480ｐｘ ×480pxで作っておけばとりあえずは大丈夫）

   

   手順3：適当にムービーを作り、MCを作成。赤枠のインスタンス名に『_img#』を指定。
   （#の中には1～29までの数字が入ります。ここはダウンロードしたユーザーが好きな画像にさしかえれるスペースとなります。）

   

   手順4：上記手順3同様にMCを作り、インスタンス名を『_tb#』とする。（#には1～29の数字）
   

   手順5：最後に下図のようにパブリッシュ設定をして書き出せばOK。
   

3. デコメアニメキットを起動してswfをデコメアニメの形式（.vgt）で出力。手順1：ファイル→開く→背景SWFを選択し、さきほど書き出したSWFファイルを選択。
   手順2：あとは下のNo.1～4の手順でテンプレート出力すれば完了。
   （出力は.vgt形式となります）
   
4. 最後にFTPソフトを使ってサーバにアップすれば完了。

サンプル

あっしのケータイはwillcomのため動作確認できてないでやんす！なので動作報告よろしくお願いします。

本日は仕事でたまに行っておる”デコメ”の作り方をみなに紹介するでごわす。

1. docomoより提供されているデコメールテンプレート作成ツールをダウンロード、インストールする下記URLより
   http://www.nttdocomo.co.jp/service/imode/make/content/deco_mail/template/tool/
2. 画像編集ソフト（あっしはFireworksを得意としてやす）で画像をつくり、書き出しやす。（大きさは最近のケータイだと横240pxとかでいいと思いやす。縦は大体160px位におさえればいいかなと）
3. 最後にインストールしたデコメールテンプレート作成ツールを開き、
   （デコメールバージョン1.0でOK）画像をドラッグ&ドロップ。
   その他、背景・テキストの色などは適宜かえて
   変換ボタンを押せば完了。

簡単でごわしょう。拡張子は『～.dmt』になりやす。

これをFTPソフトを使ってアップすれば携帯端末でダウンロードして使用できるでやんす。

下記制作にあたっての注意点・目安をいくつか紹介する。

・画像のファイルサイズは9kb以内にする。（一応10kb以内となっている）

・インライン画像数は最大10個

・画像の書き出しはGIF（アニメーションGIF）かJPG形式