ドコモのiモードHTMLシミュレータIIが8.4にバージョンアップし、無駄にカッコよくなりました    

2010/3/19 金曜日 matsui Posted in DoCoMo, ソフト紹介, タレコミ 1 Comment »

フォーラムからmemokamiさんにタレこんでいただきました。
情報提供ありがとうございます。

ドコモ純正の定番ケータイエミュレータである「iモードHTMLシミュレータII」が8.4にバージョンアップしたとのことです。

 

→ NTTdocomo iモードHTMLシミュレータII [nttdocomo.co.jp]

 

前回のバージョンアップから約5ヶ月ぶりの更新ということになります。

今回の変更内容は以下の通りです。

  • シミュレートモード5から8までのブラウザエンジンおよびFlashエンジンのバージョンアップ
  • メイン画面のデザインを変更
  • テーマ設定機能に対応
  • 通信ログ出力内容を改善
  • meta要素による描画モードおよび保存禁止情報のアイコン通知に対応
  • 動作中のシミュレートモードにあわせて、ブラウザ画面およびトルカ画面をリサイズする機能に対応
  • 通信速度設定にHSUPA(6000000bps)、HSDPA(7600000bps)を追加

memokamiさんも書かれている通り、iモードIDの出力には今回のバージョンでもまだ対応されていないようで、残念なところです。

 

そんな中でも今回のバージョンの見所は、テーマ設定機能ですね。
これにより6種類の中から見た目を変更できるようになり、無駄にカッコよくなりました。
まあ不要な機能なんですけどね(笑)

 

20100319imodesim1
旧バージョン(8.3)のデザイン

20100319imodesim2
新バージョン(8.4)からはこうなりました

20100319imodesim3
テーマは6種類の中から選べます

 

お使いの方はバージョンアップしてみてはいかがでしょうか。

 

このエントリーを含むはてなブックマーク はてなブックマークに追加

PHPを使って3分で作る3キャリア対応ケータイサイト    

2009/11/17 火曜日 matsui Posted in ソフト紹介, 全キャリア対応 26 Comments »

本日は3分で3キャリア対応ケータイサイト作れてしまうというPHPスクリプト、「らくらくケータイ3キャリアコンバーター(仮名)」を作成してみましたので、そのご紹介をさせていただきます。

 

先日のPHP勉強会で発表させていただきました。
ご参加いただいた皆様、本当にありがとうございました。

発表資料をアップしてありますので、まずはこちらをご覧ください。

 

 

ということで、「3分で作る」とは謳っているものの、ドコモ用に作られたHTMLを他キャリア用にコンバートするだけの、実に簡素な作りです。

ドコモ用サイトを3キャリア化するのは容易ですが、1からサイトを作成する場合はもちろん3分では作れません(笑)

 

動作条件は以下の通りです。

  • PHPが動作すること(5系で動作確認済み、4でも動くかも?)
  • mod_rewriteが使えること

主な機能はこちらです。

  • キャリア判定
  • XHTML用ヘッダの出し分け
  • 絵文字変換
  • istyle変換

 

上記資料内にもありますが、簡単な使い方をご説明します。

まずはこちらから、ファイルをダウンロードします。

→ ダウンロード rakuraku_ketai_converter_0.11.lzh

※2009/11/21 エスケープ処理を加えver0.1→ver0.11となっています。旧バージョンをお使いの方は再度ダウンロードをお願いします。

 

続いて、FTPなどでファイルをアップします。

この時、ドキュメントルート(例えば「http://example.jp/」の直下)に設置する場合は、そのままアップするだけでOKです。

あとはアップしたいケータイサイト用HTMLを隣にアップすれば、ケータイから3キャリア対応サイトとして見ることができます。
もちろんフォルダを作ってその中にアップしても大丈夫です。

設置例:
public_html
 ├ .htaccess
 ├ viewer.php
 └ sample.html
http://example.jp/sample.htmlでアクセスするだけ

 

もし「/」直下ではなく、フォルダを作ってその中に設置したい場合は、付属の「.htaccess」ファイルを次のように修正してください。

例:http://example.jp/mobile/に設置したい場合

<IfModule mod_rewrite.c>
  RewriteEngine On

  # 設置したディレクトリに合わせて変更
  RewriteBase /mobile/      # ← ここを設置したいディレクトリ名に合わせて変更

  RewriteRule ^([0-9A-Za-z~_\/\-\.]+)\.html$ viewer.php?p=$1 [L]
</IfModule>

「RewriteBase /mobile/」の部分をフォルダ名に合わせて修正します。

 

コンテンツの記述ルールは次の通りです。

  • 絵文字はドコモの「&#xXXXX形式」を使う (i絵文字を使うと便利)
  • 入力文字種の指定は「istyle=”1 or 2 or 3 or 4″」で指定
  • 画像はjpgかgifを使う

 

動作サンプルはこちらです。

→ らくらくケータイ3キャリアコンバーター(仮名) サンプル

20091117_3minphp

 

自分がちょっとしたケータイサイトを作りたいときに使いたいために作ったシンプルなものですので、あまりメンテなどはしないかもしれませんが、ご要望が多ければバージョンアップするかもしれません。
なお、現在何か素敵なソフト名を募集中です。

また、もしよければ以前作ったこちらも合わせてどうぞ。
→ 実際に動いてすぐ使える「PHPによるかんたんログインサンプル」を作ってみました

 

関連:

このエントリーを含むはてなブックマーク はてなブックマークに追加

P1エミュレータがバージョンアップし、iモードブラウザ2.0に対応したとのことです    

2009/8/7 金曜日 matsui Posted in ソフト紹介, タレコミ No Comments »

takatutoさんからのタレコミです。
(情報提供ありがとうございます)

業務用の3キャリア対応ケータイシミュレータであるP1エミュレータですが、先日8月6日にバージョンアップし、iモードブラウザ2.0に対応したとのことです。

 

→ NetFarm P1エミュレータ トップページ [p1.netfarm.ne.jp]

→ ニュースリリース 「P1エミュレータ 1.0.1.100」が「iモードブラウザ2.0」に対応 [p1.netfarm.ne.jp] ※PDFです

 

P1エミュレータは、国内3キャリア・数多くの機種に対応した、強力なケータイサイト検証用シミュレータです。

このソフトを使えば、わざわざ実機を揃えることなく、PC上からケータイサイトの動作を検証することができます。

今年のドコモ夏モデルから採用され、外部CSSやCookie対応、左右キーのフォーカス移動など、数多くの変更があったiモードブラウザ2.0ですが、P1エミュレータでもそれらの新機能がエミュレートできるようになったとのことです。

 

またなんとマクロ機能を搭載した、「P1エミュレータ スペックV」というバージョンも現在開発中とのことです。

→ P1エミュレータ 携帯サイト自動テストツール「SpecV」 [p1.netfarm.ne.jp]

 

サンプルの画面を見る限りは、SeleniumIDEのような形でテストの自動化を行えるようなイメージに見えます。

このエミュレータは開発者のほかにも、テスターの方が使われている方が多いと思いますので、おそらくこの機能はかなり期待されているのではないでしょうか。

 

P1エミュレータは、法人限定ではありますが無料評価版の提供も行っています。
ケータイサイト開発は実機だけではコスト面でも効率面でも限界があります。
興味のある方はぜひ試してみてはいかがでしょうか。

→ P1エミュレータ 評価版お申込みフォーム [p1.netfarm.ne.jp]

 

関連:

このエントリーを含むはてなブックマーク はてなブックマークに追加

実際に動いてすぐ使える「PHPによるかんたんログインサンプル」を作ってみました    

2009/7/31 金曜日 matsui Posted in PHP, ソフト紹介 10 Comments »

ログインが必要なケータイサイトではほぼ必須となる、端末情報を使った「かんたんログイン」ですが、Web上にはあまり良い情報がないようです。

そこで、実際に動いてすぐ使えるような、PHPによる3キャリア対応かんたんログインのサンプルプログラムを作ってみました。

※かんたんログイン機能は、セキュリティ上の危険が指摘されています。
 ご利用には十分お気をつけください。
 (コメント欄に補足事項を記載しておきますので参考にしてください)

 

サンプルの機能

ログイン画面、 新規登録画面、 ログイン後(マイページ)画面

かんたんログインとは?

プログラムを紹介する前に、かんたんログインについて軽く説明します。

かんたんログインとは、ケータイ端末から契約情報や製造番号をサイトに送信し、それを使ってログインするプログラムの総称です。

ユーザ名やメールアドレス、パスワードなどを入力せずワンタッチでログインできますので、文字が打つのが大変なケータイ環境ではとても重宝されます。

 

今回は端末情報として、「ドコモ:iモードID、au:EZ番号、ソフトバンク:x-jphone-uid」を使って認証を行います。
各種端末IDについては、以前書いたこちらの記事で詳しく説明しています。

→ ke-tai.org ケータイの端末ID・ユーザIDの取得についてまとめてみました [ke-tai.org]

動作条件と設置の流れ

動作に必要な条件:

  • PHP 5系が動くこと
  • MySQLが動くこと
  • .htaccessが動くこと

※DB接続にはPDO、端末情報の取得にはPEAR::Net_UserAgent_Mobileを利用しています。
※.htaccessはケータイからのセッションを使うためとアクセス元制限に利用しています。

 

設置の流れとしては次の通りです。

  1. プログラム一式をダウンロードする
  2. MySQLにデータベース「login_db」を作成する
  3. 「users.sql」を元にテーブル「users」を作成する
  4. プログラム一式をアップロードする
  5. PEARのNet_UserAgent_Mobileが入っていないのであればインストールもしくはアップロードする

かんたんログインサンプルの設置

1. プログラム一式をダウンロードします

こちらからダウンロードしてください。

→ ke-tai.org かんたんログイン サンプルプログラム (ver1.0) [ke-tai.org]

 

2. MySQLにデータベース「login_db」を作成します
3. テーブル「users」を作成します。

作成方法はあまりに基礎的な内容のためここでは紹介しません。
不慣れな方はphpMyAdmin上から作ると便利でしょう。

 

4. プログラムをアップロードします

設置は次のように行います。
設置先は仮で「login」フォルダとします。必要に応じて適宜変更してください。

login/
├ .htaccess   ケータイからセッションを使うための設定ファイル
├ common.php  共通関数
├ login.html  ログイン画面テンプレートHTML
├ login.php   ログイン画面PHP
├ mypage.html  マイページテンプレートHTML
├ mypage.php  マイページPHP
├ new.html   新規登録テンプレートHTML
├ new.php    新規登録PHP
├ users.sql   テーブル作成用SQL(※こちらはアップの必要はありません)
└ Net      PEAR::Net_UserAgent_Mobile(※インストールされてない場合のみ)
    └ UserAgent [以下略]

PEAR::Net_UserAgent_Mobileは、サーバにインストールを行います。
レンタルサーバなどでインストール出来ない場合は、こちらからダウンロードを行い、上記(loginフォルダの下にNet/UserAgent/・・・)のようにアップロードします。

→ PEAR Net_UserAgent_Mobile Download [pear.php.net]

 

5. パスワードを変更する

データベースに接続するユーザ名、パスワードはデフォルトでroot:rootになっています。

common.phpの以下の部分(44行目付近)を環境に合わせて変更してください。

/**
 * DB接続
 *
 * データベースに接続する
 *
 * @return	class		PDO接続クラス
 */
function dbConnect()
{
	// データベースの設定
	$db_host = 'localhost';		// 接続サーバ
	$db_name = 'login_db';		// 接続DB名
	$db_user = 'root';		// 接続ユーザ名
	$db_pass = 'root';		// 接続パスワード

 

6. 動作確認を行う

ケータイからアップロードしたサイトの「login/login.php」にアクセスすれば、かんたんログイン登録が行えるはずです。

※PCからはアクセスできません。
※端末ID通知がオフの場合は登録できません。

プログラム解説

キモとなるのは端末のユーザID取得とセッション管理の部分だけです。

端末ユーザIDの取得は次のようにして行っています。
この情報は個人情報となりますので、暗号化して格納した上で方が良いでしょう。
($salt_stringの値には必要に応じてランダムな文字列をセットしてください)

/**
 * ユーザID取得
 *
 * ケータイのユーザID(契約に紐付くID)を取得する
 *
 * @return	string		ユーザID文字列
 */
function getPhoneUserId()
{
	// PEAR::Net_UserAgent_Mobileの読み込み
	require_once('Net/UserAgent/Mobile.php');

	// インスタンスを生成
	$agent = Net_UserAgent_Mobile::singleton();

	// ユーザID取得
	$uid = $agent->getUID();

	// 暗号化
	if ($uid != '') {
		$salt = 'salt_string';
		$uid = md5($uid . $salt);
	}

	return $uid;
}

 

なお、かんたんログイン機能で最も重要なのは、ケータイからのみアクセスを許可することです。(PCからの接続は不可とする)
PCからだと端末ユーザIDはいくらでも詐称できてしまいます。
必ずケータイからのみアクセス許可としましょう。

アクセス制限は.htaccess内で行っていますが、簡易版となっています。
各キャリアのページや下記のページを参考にして、常に最新のキャリアIPアドレス帯域を指定することをオススメします。

→ ke-tai.org ケータイキャリア・クローラIPアドレス [ke-tai.org]

※追記
可能であるなら上記のアクセス制限に加え、接続元IPアドレスとユーザエージェントを照らし合わせ、同一キャリアであることも確認した方がより良いようです。詳しくはコメント欄をご覧ください。

 

セッションに関しては、上記で取得したユーザIDをセッション変数に格納することでログイン状態としています。
ケータイからセッションを維持するため、.htaccessで次のように設定しています。

php_flag session.use_trans_sid On
php_flag session.use_cookies On

セッションに関してはセキュリティ上の問題も絡みますので、ここでは詳しく解説しませんが、下記の記事(コメント欄も参考になります)を参照してください。

→ ke-tai.org PHPでケータイからセッションを使う場合の設定方法 [ke-tai.org]

その他

  • 本プログラムはかんたんログインの学習用を目的とした簡易的なものとなっています。必要に応じて機能を追加しご利用ください。(こちらではこれ以上の機能追加の予定はありません)
  • プログラムに不備がありましたら、すぐ修正しますのでご指摘ください。
  • お問い合わせ・サポートは原則いたしませんが、フォーラムに書き込むと回答が得られるかもしれません。
  • 重要と思われる情報は下記コメント欄に転載するようにします。あわせてご覧の上でご利用ください。

 

関連:

このエントリーを含むはてなブックマーク はてなブックマークに追加

Emacsで絵文字の表示と入力補完が行える「emoji.el」    

2009/7/7 火曜日 matsui Posted in ソフト紹介, 記事紹介・リンク No Comments »

先日2009年7月4日に行われた「Shibuya.lisp テクニカルトーク#3」でIMAKADO氏によって発表された、「Emacsで絵文字の表示と入力補完が行えるemoji.el」が面白かったのでご紹介させていただきます。

 

→ ニコニコ動画 Emacs上での携帯絵文字の表示と入力補完 [nicovideo.jp]

 

ダウンロードはこちらから行えるようです。

→ github imakado’s emoji at master – GitHub [github.com]

 

インストールや利用方法などはこちらのブログがとても詳しいです。

→ 日々、とんは語る。 Emacs 上で携帯絵文字の表示と入力補完する emoji.el が素晴しい。 [hatena.ne.jp]

 

emoji.elは、ドコモ、au、ソフトバンクの3キャリアの絵文字表示と、その補完入力機能を備えています。

詳しくは上記の動画を見るのがわかりやすいと思いますが、絵文字の表示は画像を置換して表示、補完は説明文の一部を入力することで対象がリストアップされるという形になっているようです。

Emacs使いのケータイ開発者にとってはかなり便利なものではないでしょうか。
興味のある方はぜひ試してみてください。

 

関連:

このエントリーを含むはてなブックマーク はてなブックマークに追加