メイン

2008年7月 3日

Ext JSをUIに使って携帯サイトのシミュレータを作ってみた
このエントリーをブックマークに追加 このエントリーをlivedoorクリップに追加

五十川です。

携帯サイトの見栄えをシミュレートするウェブアプリ作りました。と言っても、実際に作ったのはかれこれ半年以上前で、手直ししてから公開しようと思ってたら、結局「guid=ON」を付け足したくらいであとは放置だったので、さすがにいい加減晒そうと。

任意のヘッダでリクエストして、レスポンスの絵文字とか変換してサイトの見栄えを確認するというものですが、これはそもそもExt JSをいじってた頃に、Ext JSでこういうの作ればいい感じになるんじゃね?ということで、丁度2.0がリリースされた頃にデモ用に作ったものなのでした(なので、かれこれ半年以上前)

実機テストの代用になるわけでは、もちろんありませんが、絵文字も含めたマルチキャリアでの見栄えを手軽に確認したいときなどに、わりと便利に使えてたりします。

スクリーンショット

機種ごとのプリセットのヘッダグループをYAMLファイルに書いておいて、以下のようにプルダウンメニューから選択して切り替えます。この画面で直接ヘッダの値を書き換えたり、任意のヘッダを追加したりもできます。

リクエストヘッダ/機種の選択・編集

レスポンスのヘッダとボディ(HTMLソース)を確認できますが、HTMLソースは以下のようにタグなどを色分けして、行番号を付けて表示します。

レスポンスボディ/HTMLの確認

アクセス履歴を保存してドメイン別に表示します。ページタイトル、URL、アクセス日時で並べ替えができ、それぞれダブルクリックで、そのページに再度アクセスできます。

ドメイン別アクセス履歴の表示

その他の機能

  • QRコード表示します。
  • Basic認証をエミュレートします(開発環境には必須かな)
  • iモードの「UTN」と「guid=ON」をエミュレートします。リクエストヘッダのUser-Agentに個体識別情報が含まれる場合は、UTN属性のある要素からのリクエストでは個体識別情報を含むUser-Agentを、それ以外は個体識別情報を除去したUser-Agentを送信します。同様に、リクエストURLのクエリーストリングに「guid=ON」が含まれる場合、X-Dcmguidヘッダが設定されてれば送信します。
  • iモード以外ではCookieの送受信をエミュレートします。

サーバサイドのプログラムは諸般の事情でPHP4スクリプトです(PHP5でも動作確認してます)。PHP4でのHTMLスクレイピングには限度があるので、そのあたりの処理は限定的になってます。

試してみようと思ったかたは

以下アーカイブをどうぞ。

mobile-simulator-1.0.tar.gz

しかしこいつは、各機能を実現するのにさまざまなオープンソースソフトウェアを利用させていただく他力本願なつくりなので、アーカイブの中身だけでは動きません。以下利用させていただいているソフトウェアの一覧です。それぞれ必要な段取りは、アーカイブのREADMEをご覧ください。

Ext JS 2.x

2.0と2.1で確認してます。それ以前のバージョンでは動きません。

MobilePictogramConverter 絵文字変換ライブラリ

絵文字の変換表示にはこちらを利用させていただいてます。

QRcode Perl CGI & PHP scripts ver. 0.50

QRコードの表示にはこちらを利用させていただいてます。

PEAR HTTP_Client

仮想HTTPクライアントのコアはこちら。

PEAR Text_Highlighter

レスポンスボディの強調表示に。

spyc 0.3

YAMLのパースはこちら。

Jsphon - JSON in PHP

JSONのエンコード/デコードはこちら。

SILK ICONS

アイコン画像に利用させていただいています。

2007年11月29日

User Agent Profileについて
このエントリーをブックマークに追加 このエントリーをlivedoorクリップに追加

harukiです。

端末に関する詳細な情報が少ないため苦労することが多いケータイサイト開発ですが、 その手がかりとなる情報にUser Agent Profile(UAProf)があります。

国内で対応しているのはSoftBankの3G端末です。

SoftBankの3G端末はリクエストにX-Wap-Profileヘッダがある端末があります。

(例)SoftBank 911SHの場合

X-Wap-Profile:http://www.sharp-mobile.com/UAProf/911SH_SHJ001_3g.xml

http://www.sharp-mobile.com/UAProf/911SH_SHJ001_3g.xml

 

UAProfについては、以下がとてもわかりやすいです。
Forum Nokia - User Agent Profile の基本 - ツール & SDK - テクニカルインフォメーション
http://www.nokia.co.jp/forum/developer/tech_doc/browsing/user_agent_profile/

 

国内のケータイでは標準の以下の6つに加え

  • HardwarePlatform
  • SoftwarePlatform
  • BrowserUA
  • NetworkCharacteristics
  • WapCharacteristics
  • PushCharacteristics

別途、以下の2つも含まれています。

  • MmsCharacteristics (MMSに関するプロパティ)
  • Streaming (ストリーミング関連)

細かい情報などは以下にあります。

 

しかし残念なことに、技術資料のHTTP編によると、

2007年以降発売の3GC端末では、本ヘッダを送出しない端末がある。
と書かれていて、実際にSoftBank 913SHなどでは送出されてきません。

UAProfも間違いがあったりして、100%信用できる情報ではありませんが、情報が少ないケータイサイト作成者には有益な情報ですので、 メーカーの方々は是非とも情報を提供していただきたいです。

海外ケータイのUAProf

海外でのDDR(Device Description Repository)は以下のようなところもあります。(日本のケータイの情報は足りないです)

上記のWURFLのAPIを使ったものとしてWALLがあります。 WALLは共通のマークアップを書くことにより端末に応じてタグを吐き分けてくれるライブラリです。 http://wurfl.sourceforge.net/java/index.php
WALL 4 PHP
http://wall.laacz.lv/

 

ケータイサイト開発で手詰まりになった際には、(もしかしたら)手がかりになることもあるかもしれません。

2007年11月 1日

FFmpegで変換した3GPP動画をNTTドコモiモーションのストリーミング再生に対応させる (for Linux)
このエントリーをブックマークに追加 このエントリーをlivedoorクリップに追加

isogawaです。

さまざまな形式の動画を携帯電話向けに変換して配信するサービスでは、変換処理をFFmpegで行っている例が多いと思われます。しかしFFmpegが出力する3GPPファイルは、NTTドコモiモーションの、ストリーミング(プログレッシブダウンロード)方式での再生はできません。QuickTime Proや携帯動画変換君で作成した動画はストリーミング再生も可能ですが、変換処理をLinux上で行っている場合には、これらを利用するわけにもいきません(できないことはないですが)。ではどうしたらいいでしょう?という小ネタ。

なにが問題なのか

+--ftyp
+--free
+--mdat
+--moov
  +--mvhd
  +--trak
  | +--tkhd
  | +--mdia
  +--trak
  | +--tkhd
  | +--mdia
  +--udta

3GPPのファイルフォーマットについては、以前の MP4/3GPP/3GPP2ファイルフォーマットの基礎知識をご覧いただくとして、FFmpegが出力する3GPPファイルのAtom/ボックス構造はこんな感じになってます(例によって入れ子は端折ってます)。

このうち、mdatボックスにはメディアデータ(動画や音声の実際のデータ)、moovボックスにはメタデータが格納されているわけですが、この構造だとメディアデータの読み込み完了後にメタデータを読み込むことになるわけで。このままでは、データを逐次読み込んで再生するプログレッシブダウンロードは無理なので、mdatとmoovの順番を入れ替えてやる必要があります。

もうひとつ。ftypボックスにはそのファイルの互換性を示す「ブランド」値が記録されてます。iモード端末は通常のダウンロード再生ではここの値を気にしないようですが、一方ストリーミング再生の場合は、ここにiモーション対応のファイルであることを示す値(mmp4)がないとダメみたいです。

てなことで、FFmpegで変換した3GPP動画をNTTドコモiモーションのストリーミング再生に対応させるには、以下のふたつの処理を行う必要があるようです。

  1. mdatをmoovの後に配置する。
  2. ftypに「mmp4」を追加する。

ではどうするか

FFmpegのGUIフロントエンドである携帯動画変換君で作成した動画がどうして携帯電話できちんと再生できるかというと、携帯動画変換君はFFmpegで(コーデックを)変換した出力を、独自開発のツールで整形しているためです。変換処理をWindows上で行っている場合は、これらのツールが利用できますが、Linuxではそういうわけにもいきません(できないことはないですが)。

ではLinuxではどうしようかということで。バイナリをゴリゴリ削ってファイルフォーマットを書き換えるプログラムを書き起こすのも一興ですが、上に挙げた処理については、オープンソースのマルチメディアフレームワークGPAC付属のコマンドラインツール、MP4Boxを使うと簡単に行えます。はい、ようやく本題です(笑)。

FFmpegの出力をMP4Boxで整形する

以下のようなコマンドで、FFmpegで「input.avi」ファイルからMPEG4/AMRな「output.3gp」ファイルを作成したとして。

ffmpeg -i input.avi -vcodec mpeg4 -b 64k -s qcif -r 15 -acodec libamr_nb -ab 12200 -ar 8000 -ac 1 -flags bitexact output.3gp

MP4Boxで「output.3gp」ファイルを読み込み「output_mod.3gp」ファイルを作成すると。

mp4box -add output.3gp -brand mmp4:1 -new output_mod.3gp
+--ftyp
+--moov
| +--mvhd
| +--trak
| | +--tkhd
| | +--mdia
| +--trak
|   +--tkhd
|   +--mdia
+--mdat
+--free

「output_mod.3gp」ファイルのAtom/ボックス構造を確認するとこんな感じで。ご覧のようにmdatがmoovの後に配置し直されています。

そしてMP4Boxの「-brand」パラメータは、ftypのメジャーブランドの値をパラメータの引数で指定した文字列に変更しています(この例では「mmp4」)。

こうして出来上がった「output_mod.3gp」ファイルは、iモード端末でストリーミング方式での再生ができるようになってると思います。

  • 手持ちの限られた機種でしか再生を確認できていませんので、再生できねーよという場合は、機種名などを添えてコメントをいただければ幸いです。
  • こんな文章をここまで読んでるようなかたには既知の筈ですが、念のため。ストリーミング方式で配信する際に記述するHTMLタグは、通常のダウンロード方式のものとは異なりますのでご注意ください。

MP4Boxの使い途あれこれ

MP4Boxは3GPPやMP4ファイルを操作するさまざまな機能が用意されており、携帯電話向けの動画を扱う際にはなにかと便利です。

ファイルを指定サイズで分割したり

例えば携帯電話向けの動画は、端末が受信可能なデータサイズの制限に応じてファイルを分割する必要が生じる場合がありますが、以下のようなコマンドで、指定のデータサイズ(以下の例では300キロバイト)以内で、動画を複数のファイルに分割してくれます。

mp4box -splits 300 large-file.3gp

ちなみにFFmpegでもファイルを分割できますが、指定のデータサイズ以内にきちんと収まらなかったり、あれこれバッドなノウハウを凝らす必要があったりするので、単純な分割であれば、MP4Boxを利用したほうがお手軽かと。

フラグメントを結合したり

あるいはFFmpegで、auの携帯電話で作成した3GPP2ファイルを変換すると、(本来の再生時間はもっと長い筈なのに)最初の15秒しか変換されない場合があったりしますが、この現象もMP4Boxを使って解消できます。

この現象は3GPP2の特徴のひとつであるムービーフラグメントに因るものですが(ムービーフラグメントについては MP4/3GPP/3GPP2ファイルフォーマットの基礎知識の、moofボックスの説明をご覧ください)。フラグメントなファイルをMP4Boxで-addとかした出力は(明示的に指定しない限り)フラグメントが結合されるので、FFmpegでもきちんと変換できるようになります。

MP4Boxについて

MP4Boxは、GNU LGPLでライセンスされるオープンソースのマルチメディアフレームワークGPACの付属ツールです。MP4Boxはコマンドラインツールですが、WindowsではYAMBなどのGUIフロントエンドも利用できます。

MP4Boxのドキュメントは以下にあります。

謝辞

この記事の元ネタ作成はharukiさんに協力いただきました。Thanksでーす。

2007年10月30日

携帯へメールを送る際の確認事項
このエントリーをブックマークに追加 このエントリーをlivedoorクリップに追加

harukiです。

ケータイ宛にメールを送信するサイトにおける確認事項をまとめてみました。

サーバ側

DNS

  • IPアドレスが逆引きできるようになっているか
  • SPFレコードが正しく設定されているか

SPFは、2007年11月1日からDoCoMoも対応します。

http://www.nttdocomo.co.jp/service/mail/imode_mail/sender_id/index.html

MTA

  • EHLO/HELOコマンドでのドメイン名が正しいか
  • エンベロープFrom/Toは正しいか

その他

  • Fromフィールドのドメインが正しいか
    (Aレコード、MXレコードが存在しているドメインか)
  • Return-Pathは設定しているか
  • 端末で表示できる文字コード・形式で送っているか

あとは、OP25B(Outbound Port 25 Blocking)に該当する場合は、その確認も必要になります。

メールログを確認すれば、だいたいの原因は判明します。

端末側

「メールが届かない」といった類の問い合わせに対応するためには、届かないケースを運営側が把握しておく必要があります。

  • 容量がいっぱいになっていないか
  • 拒否設定にひっかかっていないか

    メール設定を確認

    (エラーメールを返さない設定をしていないかを確認)

    拒否設定の変更をしている場合、念のため、拒否→解除と再度行ってみると効果がある場合もあります。

各キャリアのメール設定へ行くことができるページを用意してあげることも効果的です。

 

新しくサービスを始める場合、機能追加の際などに、設定・確認もれのないように気をつけましょう。

2007年9月28日

携帯サイトとクローラ
このエントリーをブックマークに追加 このエントリーをlivedoorクリップに追加

harukiです。

ケータイユーザも検索エンジンから来るユーザも増えています。
そのため、携帯サイトも検索エンジンのクローラへ対応する必要があります。

・Mobile Link Discoveryの記述を追加する

PC用のページのheadタグ内に

<link rel="alternate" media="handheld" href="(ケータイURL)" />
の記述を追加するだけです。

Mobile Link Discoveryに対応しているサイトでは、ケータイからのアクセス時に直接アクセスしてもらえるようになります。

Mobile Link Discovery 仕様
http://www.sixapart.jp/docs/tech/mobile_link_discovery_ja.html

 

検索エンジンでは、Googleモバイルのgoogle mobile proxy
http://www.google.co.jp/gwt/n

Yahoo!モバイルでの検索→PCサイトの結果のところにケータイサイトのURLが追加されるようです。

(他の検索エンジンでは対応してたり、してなかったりします)

また、はてなMobileGatewayも対応しています。
http://mgw.hatena.ne.jp/help

 

PC用のページに1行追加するだけですので簡単です。

…ということで、昨日、ビデオポップsugu.CCにも追加しておきました。

・ケータイ検索エンジン用クローラ対策

先ほどのMobile Link Discoveryは主にPC用の検索エンジンのクローラ等への対応になります。
対応しておいて損はないという程度だと思います。

やはり、ケータイサイトであるならば、ケータイ用の検索エンジンのクローラに対応してあげるほうが効果は高いです。

サイトでSessionや端末IDを使用する場合は、各キャリアのIPアドレス帯域による制限を行っていると思います。
しかし、それではクローラのアクセスも弾かれてしまいますので、クローラにもケータイ向けのページを表示してあげる必要があります。

対応する際には、以下の順序で対応していくのがいいと思います。

  • プログラムでキャリアのIP帯によるアクセスなのかを判断できるようにする
    .htaccessなどでうまくやる方法があれば教えて下さい
  • クローラのIPもしくはUserAgentのアクセスを許可する
    クローラの一覧はぜひ共有したいです
  • Sessionの利用・端末IDの取得はキャリアのIP帯からしか許可しない
    キャリアのIP帯以外からの場合はSessionは「使わない・破棄する」
このように対応すると、ログイン後に見れるページ以外は検索エンジンに登録してもらえるようになります。

・検索ワードの把握

Referrerを送ってくれるauとSoftBankでは検索ワードが取得することができます。
webalizerの場合は、webalizer.confにこんな感じで追加するとSearch Stringの取得ができます。

SearchEngine    google.co.jp    q=
SearchEngine    yahoo.co.jp     p=
SearchEngine    ezweb.ne.jp     query=
SearchEngine    livedoor.com    q=

まだまだ、勉強不足な分野ですので、ツッコミや追加の情報などがあれば是非、教えていただければと思います。

2007年9月 3日

携帯のエラーメールの種類
このエントリーをブックマークに追加 このエントリーをlivedoorクリップに追加

harukiです。

メールを送信するサイトの場合、メールアドレスのクリーニングは定期的に行うべきです。 そのためにはエラーメールを解析しなければなりません。

そこで、エラーメールの種類をまとめてみました。

SMTPエラー

存在しないメールアドレスや、正しい形式でないメールアドレスの場合は、 DoCoMo,au,SoftBankの3キャリアともSMTPエラーになります。

例として、以下の条件でメールを送信したとします。

From: sender@example.com
Return-Path: bounce@example.com
To: アドレス@docomo.ne.jp

MTAにより異なりますので、ここではPostfixを例にします。
Postfixではmultipart/reportのメールがbounce@example.comに届きます
(※ 必要な情報のみに省略しています)

From: MAILER-DAEMON@example.com (Mail Delivery System)
Subject: Undelivered Mail Returned to Sender
To: bounce@example.com
Content-Type: multipart/report; report-type=delivery-status;
	boundary="boudary/example.com"

This is a MIME-encapsulated message.

--boudary/example.com
Content-Description: Notification
Content-Type: text/plain

(メッセージ)

<アドレス@docomo.ne.jp>: host mfsmax.docomo.ne.jp[203.138.180.240] said: 550
    Unknown user アドレス@docomo.ne.jp (in reply to end of DATA command)

--boudary/example.com
Content-Description: Delivery report
Content-Type: message/delivery-status

X-Postfix-Sender: rfc822; sender@example.com

Final-Recipient: rfc822; アドレス@docomo.ne.jp
Action: failed
Status: 5.0.0
Diagnostic-Code: X-Postfix; host mfsmax.docomo.ne.jp[203.138.180.240] said: 550
	Unknown user アドレス@docomo.ne.jp (in reply to end of DATA
	command)

--boudary/example.com
Content-Description: Undelivered Message
Content-Type: message/rfc822

(ヘッダ)
From: sender@example.com
To: アドレス@docomo.ne.jp

(本文)

--boudary/example.com--

Content-Type: message/rfc822のToから、「アドレス@docomo.ne.jp」を取得できます。

特殊なエラーメール

auとSoftBankでは、上記のエラーに加えて、一旦受信されてから送り返されてくるものがあります。 種類は4つあります。
(※ ここでも必要な情報のみに省略しています)

  • 1. multipart/report
  • 2. text/plain
  • 3. multipart/mixed
  • 4. multipart/mixed(自動転送先)

1. multipart/report

Postfixの例で書いたものがサーバから送られてきます。
auとSoftBankにこのタイプがあります。

2. text/plain

拒否している場合のauのエラーメールです。
※ <アドレス@ezweb.ne.jp>の行がない場合もあります。

Content-Type: text/plain; charset=iso-2022-jp
From: Postmaster@ezweb.ne.jp
To: bounce@example.com
Subject: Mail System Error - Returned Mail

次のあて先へのメッセージはエラーのため送信できませんでした。

<アドレス@ezweb.ne.jp>

送信先メールアドレスが見つからないか、
送信先メールサーバの事由により送信できませんでした。
メールアドレスをご確認の上、再送信してください。
Each of the following recipients was rejected by a remote mail server.
---------------------------------------------------
(送信したメールのヘッダ)
From: sender@example.com
To: アドレス@ezweb.ne.jp

(本文)

SoftBankにもこのタイプがあります。

To: bounce@example.com
From: MAILER-DAEMON@softbank.ne.jp
Content-Type: text/plain; charset="iso-2022-jp"
Content-Transfer-Encoding: 7bit
Subject: Non Delivery Notification

送信先エラーにより、配信されませんでした。
To:アドレス@softbank.ne.jp
Date:Sun, 1 Sep 2007 00:00:00 +0900

3. multipart/mixed

auでは送信したメールの内容がないパターンもあります。

To: bounce@example.com
From: Postmaster@ezweb.ne.jp
Content-Type: multipart/mixed; boundary="==boundary"
Subject: Mail System Error - Returned Mail

This message is in MIME format.Since your mail reader does not understand this format, some or all of the message may not be legible

--==boundary
Content-Type: text/plain; charset="ISO-2022-JP"
Content-Transfer-Encoding: 7bit

次のあて先へのメッセージはエラーのため送信できませんでした。

送信先メールアドレスが見つかりませんでした。
メールアドレスをご確認の上、再送信してください。

The user(s) account is disabled.

<アドレス@ezweb.ne.jp>


--==boundary--

4. multipart/mixed(自動転送先)

auでは自動転送先が2つまで設定できます。 自動転送先へメールが届かなかった場合に、以下のメールが送られてくることがあります。

To: bounce@example.com
From: Postmaster@ezweb.ne.jp
Content-Type: multipart/mixed; boundary="==boundary"
Subject: Mail System Error - Returned Mail

This message is in MIME format.Since your mail reader does not understand this format, some or all of the message may not be legible

--==boundary
Content-Type: text/plain; charset="ISO-2022-JP"
Content-Transfer-Encoding: 7bit

次のあて先へのメッセージはエラーのため送信できませんでした。

送信先メールアドレスが見つからないか、
送信先メールサーバの事由により送信できませんでした。
メールアドレスをご確認の上、再送信してください。

Each of the following recipients was rejected by a remote
mail server.

    Recipient: <転送先アドレス>
    >>> RCPT TO:<転送先アドレス>
    <<< 550 Unknown user 転送先アドレス


--==boundary--

4は特殊な状況なので、4以外のエラーメールにはできるだけ対応しておいたほうがいいと思います。

※参考
KDDI au: EZwebへメール送信する際の注意事項 > 技術仕様
http://www.au.kddi.com/notice/manner/jyushin_policy/shiyo.html

追記(09/04 18:15)

はてブのコメントでご指摘いただいたVERPについて、知りませんでしたので試してみました。

Postfix VERP Howto
http://www.postfix.org/VERP_README.html

 Postfix 2.3 and later:

    % sendmail -XV -f owner-listname ....

    % sendmail -XV+= -f owner-listname ....

Postfix 2.2 and earlier (Postfix 2.3 understands the old syntax for backwards compatibility, but will log a warning that reminds you of the new syntax):

    % sendmail -V -f owner-listname ....

    % sendmail -V+= -f owner-listname ....

ということで、PHPのmail関数の場合は、
mail($to, $subject, $message, $additional_headers, '-XV -f bounce');

として、すぐ確認できる種類を試してみました。
(確認できなかった種類 = 2.text/plainのSoftBank)

結果として、確認できた種類ではすべて

To: bounce+アドレス=docomo.ne.jp@example.com
という形式で取得することができました。

貴重な情報をありがとうございます。

2007年8月 7日

携帯サイト作成のためにも使えるPHPのライブラリ
このエントリーをブックマークに追加 このエントリーをlivedoorクリップに追加

harukiです。

携帯サイト作成の際に使えるPHPのライブラリを知っているだけ羅列してみます。

Net_UserAgent_Mobile

基本となるライブラリです。機種判定など、様々な用途に使用します。
細かい情報については、スクレイピングなどをしたりして自前で用意する必要があります。

PEAR::Mail

メールの送信に使用できます。
特殊な送信の際は、Mail::factory()にsmtpで使用することになりますが、キャリアの迷惑メールの設定にも気をつける必要があります。

Mail_mime_Decomail (Y-110's Wiki)

Mail_mimeと同じ使い方で、デコメール送信用にMIMEを組み立てることができるのでとても便利です。

Mail_mimeDecode

空メール・エラーメールなどを受け取って解析する際に使用します。
解析の際には、Mail_RFC822::parseAddressListも使用します。

Net_IPv4

キャリアのIP帯域の判定に使用します。

HTTP_Download

auでのFlashや動画などの分割ダウンロードの際にも使用できます。
setContentType()でvideo/3gpp2などが指定できないので、手を加える必要があります。

画像処理

使える画像の種類が違うため変換したり、リサイズなどの処理のために使用します。
ライブラリについてはこちらのエントリに詳しくまとめられています。

上記のライブラリで、ある程度、末端の処理の手間を省けるのではないでしょうか。
それ以外の処理は、普段使用しているフレームワークなどでがんばることになります。。。

便利なライブラリがあったらぜひ教えて下さい。

2007年7月11日

3G携帯のみに限定したサイトを作る場合
このエントリーをブックマークに追加 このエントリーをlivedoorクリップに追加

harukiです。

最近では3Gのみ対応というサイトも増えてきています。 そこで、3Gに限定した場合の端末の対応具合をまとめてみました。

以下を該当の機種として進めます。

DoCoMoFOMA(※)
auWAP2.0
SoftBank3GC型

※XHTML対応機種(FOMA 2001,2002,2101V以外)

●記述言語

HTMLが必須ではなくなり、XHTML「のみ」という選択も可能になります。

●文字コード

Shift_JISに加えてUTF-8、EUC-JPも使えるようです。

●ページサイズ

DoCoMo100KB
auテキスト9KB程度以内
SoftBank300KB

テキストと画像のサイズ合計で1.2KB, 5KB, 7.5KB, 10KBということをあまり気にしなくてもよくなります。

●画像

DoCoMoGIF / JPEG
auGIF / JPEG / PNG
SoftBankGIF / JPEG / PNG

よほどのことがない限り、GIFとJPEGで事足ります。

●メール

端末が受信可能な文字コードは以下になります。

DoCoMoShift_JIS / ISO-2022-JP
auShift_JIS / JIS / ISO-2022-JP
SoftBankUTF-8 / ISO-2022-JP

3キャリアすべてで、太字になっている文字コードでは、メールに絵文字を含めることが可能です。

また、サイズは以下になります。

DoCoMo全角5,000文字
au全角5,000文字
SoftBank300Kbyte

500Byteや384Byteという制限もありません。

デコメールやデコメ絵文字の受信にも対応しているものも多いです。

●その他

3Gの場合に、比較的対応している機能もあります。

・Flash

それぞれのキャリアでの対応するFlash Liteのバージョンは以下のとおりです。

DoCoMo1.0 / 1.1
900iシリーズのみ1.0、以降は1.1
au1.1 / 2.0
WIN端末では比較的対応しています。
SoftBank1.1 / 2.0
50%ぐらい対応しているようです。

・動画

対応機種はMPEG-4に対応しています。

DoCoMo3GPP
auAMC / 3GPP2
SoftBank3GPP

MNG,Nancyなどはありません。

と、3Gに限定することにより、かなり差異が少なく、敷居も低くなっています。 携帯用のサイトを作成したことがない方は、ここから手をつけてみてはいかがでしょうか。

2007年6月 4日

携帯におけるメールアドレスの制限について調べてみました
このエントリーをブックマークに追加 このエントリーをlivedoorクリップに追加

harukiです。
携帯サイトの開発は、いわば端末の制限との戦いとも言えます。
今回は、メールアドレスだけに絞って、端末での制限について調べてみました。

(会社にある端末で調べたので、すべての端末で当てはまるかどうかは保障できません)

    まず、携帯のメーラでは宛先に入れられるByte数が決まっています。
  • DoCoMo: 50Byte
  • au: 64Byte
  • SoftBank: 128Byte
  • 上記のByte数より長いメールアドレスへは端末からは絶対に送信できません。

    次に、local-partで使える文字を以下の機能が動くかどうかで調べてみました。
  • メールの送信
  • web(aタグのmailto)
  • メール(本文でのmailto機能)
文字RFC2822DoCoMoauSoftBank
送信aタグメール本文送信aタグメール本文送信aタグメール本文
!
"×××××××××
#
$
%
&×
'
(×××××××××
)×××××××××
*
+
,××××××××××
-
.
/
:××××××××
;××××××××
<×××××××××
=×
>×××××××××
?×
@×××××××××
[××××××××
\××××××××
]××××××××
^
_
`
{
|
}
~
"localpart"@example.com××××
"localpart@example.com"×××××
<localpart@example.com>××××
[localpart]@example.com×××××××
.localpart@example.com×

よほど特殊な事情がない限りは気にしなくていいことではありますが、何かの時に一から調べるのが面倒なのでまとめてみました。

2007年4月 2日

デコメールを使ってみる
このエントリーをブックマークに追加 このエントリーをlivedoorクリップに追加

harukiです。

1ヶ月ほど前になりますが、社内の勉強会でデコメールについて説明しました。

その際の資料をPDFファイルとしてULしておきます。

http://labs.unoh.net/deco.pdf (183KB)


これだけでは少しさみしいので、もう少し携帯を使ってみたいと思います。


最近の端末では、PDFファイルなどをドキュメントビューアで見ることができる端末があります。


携帯の液晶で、1画面1ページで見ることができる(240x320で倍率25%)ぐらいの、

小さい文字が使用されていないドキュメントは、閲覧も思っているほど、苦になりません。


閲覧する方法としては、

PDFファイルのURLをメールで送って、携帯のブラウザでアクセスするとダウンロードできたり、

PCから携帯へメールで送る際にPDFファイルを添付すると見ることができると思います。


各キャリアでの対応機種などの情報は以下にあります。


・DoCoMo

PDF対応ビューア

http://www.nttdocomo.co.jp/service/imode/content/pdf/index.html


・au

EZドキュメントビューアー

http://www.au.kddi.com/ezweb/service/document_viewer/index.html


・SoftBank

http://mb.softbank.jp/mb/product/3G/

※左下の「携帯電話 機能一覧(PDF)」 → オリジナル機能の項目


また、SoftBankのシャープ製の端末では、SVG Tiny(Scalable Vector Graphics Tiny)形式で表示が可能です。

変換するためのソフトウェアが提供されています。

シャープ - PCドキュメント変換ユーティリティ

http://k-tai.sharp.co.jp/download/tools/pcdc/


携帯でドキュメントを見たことがない方は、一度お試し下さい。

また、携帯で見るのに適した資料があれば、是非教えて下さい。

2007年3月 1日

auは絵文字を自動変換していたわけではなかった
このエントリーをブックマークに追加 このエントリーをlivedoorクリップに追加

こんばんは。harukです。

前回、絵文字の相互変換リストというエントリを書きましたが、

説明に正しく理解できていなかった箇所がありましたので訂正しておきます。


今回のリストを作っていた時や、前々から気にはなっていたんですが、

auのケータイではwebで表示されているDoCoMoの絵文字は
auの絵文字に自動で変換して表示していた。
というふうに理解していました。

携帯サイトを作り始めの頃に見た、↓↓のような技術資料によって記憶に刷り込まれたのかもしれません。

http://www.au.kddi.com/ezfactory/tec/spec/html_con004.html

http://www.au.kddi.com/ezfactory/tec/spec/html_con.html

http://www.au.kddi.com/ezfactory/tec/spec/i_mode.html

実際は、auの端末がformでの絵文字の入力・送信ができるようになった時には、もう違っていたようです。


まず、auがShift_JISのページのformで入力した場合の絵文字は以下の範囲です。

  • F340~F3FC
  • F440~F48D
  • F640~F6FC
  • F740~F7FC

一方、DoCoMoの絵文字の範囲は以下です。

  • F89F~F8FC
  • F940~F9FC

このDoCoMoの絵文字をauの端末で見た場合に表示されるのは、

それぞれのDoCoMoの絵文字に対応するauの絵文字です。


この文字をコピペしてフォームから送信すると・・・

そのまま(F8xx~F9xxの範囲)送られてきます。


auはサーバで変換しているのではなくて、

ただ、その範囲に絵文字を割り当てているだけのようです。

(普通に考えたらわかりそうなものですが。。。)


SoftBankの端末ではHTMLをコピーできる端末を知っていますが、

もし、auでそういう端末がある場合は、

DoCoMoの絵文字でauでの絵文字の表示も兼ねているサイトではHTMLからコピーして、

formでペーストして。。。とDoCoMoの絵文字が手軽に送られてくるのかもしれません。


厳密に行うには、

au(DoCoMoの絵文字) → au(本来のauの絵文字)

への変換をしてあげないといけません。

(そこまで面倒を見てあげる気にはなれませんが。。。)


もし同じ誤解をしている方がいましたら、気をつけてください。

2007年2月 2日

絵文字の相互変換リスト
このエントリーをブックマークに追加 このエントリーをlivedoorクリップに追加

こんばんは。harukです。

2週間前からビデオポップ担当になり、まず最初に、3キャリアの絵文字の変換から取り組みました。

検索して探してみたものの、いいものが見つからなかったのですが、幸いにも、3キャリアそれぞれメールでは絵文字の自動変換があるので、それを利用して作ることができます。(昔は手入力で一つ一つやってました)

Tab区切りのテキストファイル(TSV)を置いておきましたので使いたい方は使ってください。

絵文字の番号の付け方はそれぞれ以下のようになっています。

  • DoCoMo(i-mode)
    基本絵文字:%i(1~176)%
    拡張絵文字:%i(1001~1076)%
  • au(EZweb)
    絵文字番号=%e(1~822)%
  • SoftBank
    PAGE1(G):%s( 1~ 90)%
    PAGE1(E):%s(101~190)%
    PAGE1(F):%s(201~290)%
    PAGE1(O):%s(301~377)%
    PAGE1(P):%s(401~476)%
    PAGE1(Q):%s(501~562)%

ファイルは各キャリアごとになっています。

  • i-mode → EZweb, SoftBank
    [ファイルの内容]
    i-mode番号, Shift_JIS(hex), EZweb, SoftBank, EZweb(webでの自動変換)

    i-mode→EZwebはメールだけではなく、webでの自動変換もあります。 近似の絵文字を表示してくれます。
    メールとwebでの変換を見比べてみると、36文字も違っていました。
  • EZweb → i-mode, SoftBank
    [ファイルの内容]
    EZweb番号, Shift_JIS(web/hex), i-mode, SoftBank

    文字になってしまうものが多いので、気に入らない人は変えたほうがいいです。
  • SoftBank → i-mode, EZweb
    [ファイルの内容]
    SoftBank番号, Webコードの一部, i-mode, EZweb

    SoftBankからの場合は〓(ゲタ)になるものが多いです。
このデータが少しでもお役に立つのであれば幸いです。

2007年1月13日

SoftBank絵文字の対処法
このエントリーをブックマークに追加 このエントリーをlivedoorクリップに追加

こんにちは。harukです。

今回はSoftBankの絵文字の対処法の基礎的な部分についてです。

絵文字コードは以下のようになっています。

0x1B    0x24($)   【 ? 】    【 X 】…   0x0F

【 ? 】 = G / E / F / O / P / Q

【 X 】 = 0x21~0x7E

【 X 】の部分には、[ < ]や[ ' ]や[ \ ]などが含まれているので多少やっかいです。

入力された絵文字を含む文字列を表示する際などには HTMLエンコード(実体参照化)してあげなければいけませんが、

絵文字の中もエンコードされてしまいます。

(例)

こんにちは(0x1B)(0x24)G>(0x0F)

こんにちは(0x1B)(0x24)G&gt;(0x0F)

となってしまい、4文字の別の絵文字になってしまいます。

対応するにはPHPでは以下のように行います。


function SB_htmlspecialchars($str)
{
    $emoji_range = '[G|E|F|O|P|Q][\x21-\x7E]';
    $pattern = '/[\x1B][\x24]'.$emoji_range.'+[\x0F]/';
    $matches = array();
    $match_count = preg_match_all($pattern, $str, $matches);
    if (!$match_count) {
        return _htmlspecialchars($str);
    }

    $matches[0][] = '';
    $split = preg_split($pattern, $str);

    $split = array_map('_htmlspecialchars', $split);
    $htmlstr = '';
    foreach ($split as $key => $val) {
        $htmlstr .= $val.$matches[0][$key];
    }
    return $htmlstr;
}

function _htmlspecialchars($str)
{
    $encode = mb_internal_encoding();
    return htmlspecialchars($str, ENT_QUOTES, $encode);
}

さきほどの例文で、注意点が一つあります。

古い機種で、絵文字で終わっている場合に末尾の(0x0F)がつかない端末があります。。。

そのため、受け取った文字列に最初に以下の処理を通しておきます。


/* 末尾に0x0Fがない場合に追加 */
function SBEmoji($str)
{
    $emoji_range = '[G|E|F|O|P|Q][\x21-\x7E]';
    $pattern = '/[\x1B][\x24]'.$emoji_range.'+([\x0F]?)$/';
    $matches = array();
    preg_match_all($pattern, $str, $matches);
    if (isset($matches[1][0]) && $matches[1][0] === '') {
        $str .= pack("C*", 0x0F);
    }
    return $str;
}

こんな感じでSoftBankのエスケープシーケンスでの絵文字を対応しておけば問題はないと思います。

あとは、絵文字の相互変換のために、連続している絵文字を1文字ずつに分けたり、

2バイトの絵文字の対応を行ったり、という処理があるぐらいです。

基礎の部分でしたが、お役に立てれば幸いです。



最後に今年の目標を…「Vodafoneと言わないようにする」

修正(2007/10/19 18:15)

コメントにて指摘があり修正しました。ありがとうございます。

    // 修正前
    preg_match_all($pattern, $str, $matches);
    if (count($matches) == 0) {
        return _htmlspecialchars($str);
    }
    // 修正後
    $match_count = preg_match_all($pattern, $str, $matches);
    if (!$match_count) {
        return _htmlspecialchars($str);
    }

2006年12月19日

Mac OS Xで携帯サイトの開発環境を整える
このエントリーをブックマークに追加 このエントリーをlivedoorクリップに追加

尾藤正人(マカー3号)です。

家でも会社でも MacBook を使うようになって、名実共にマカーの仲間入りをしました。

最近はずっと携帯サイトの開発をやっているのですが、MacよりもWindowsの方が携帯サイト開発用のツールは充実してます。 携帯サイトを開発しているMacユーザの方で、本当はWindowsは使いたくないんだけど、Windowsマシンを使ってたり、Parallels Desktop使ってる方は多いんじゃないでしょうか。

新しいParallels Desktopでは、Coherenceモードを使えばWindows上のアプリがMac上のアプリかのように使えるので、大きな問題はないのかもしれませんが、やはりMacネイティブでできるようにしたいものです。

というわけでMacで携帯サイトの開発環境を整えてみたので、何をやったのかを具体的に書いてみたいと思います。

Macで絵文字を表示できるようにする

ピクチャ 1
ピクチャ 1 posted from フォト蔵

下記の記事を参考にしました。やってることは全く同じです。

imode用携帯サイトを開発する場合のメモ

  • i絵文字をダウンロードする。
  • Windowsの実行形式になってますが、LHAで解凍します。
  • mv iemoji.tte $HOME/Library/Fonts/iemoji.ttf
  • 各アプリで使用するフォントをi絵文字(i-emozi)を選択します。

これで Cocoa アプリで絵文字が表示できるようになります。 手元ではMac標準のテキストエディタでは問題なく絵文字を表示できましたが、Safariでは絵文字が化けて表示されます。 ブラウザでの表示の確認には未だにWindowsを使っているので、この辺の詳しい情報お持ちの方いたら、よろしくお願いします。

Macで絵文字を入力する

ピクチャ 2
ピクチャ 2 posted from フォト蔵

絵文字の表示ができるようになったので、次は入力です。 エモジモ2というソフトウェアを使うと絵文字の入力ができます。 普通にインストールして起動するとアプリが起動するので、後は入力した絵文字をテキストエディタまでドラッグアンドドロップするだけ。

まとめ

Macでも頑張れば、絵文字の表示、入力ができるようになります。 残念なのはブラウザでの表示ができないことです。 これができれば、ほぼ完全にMacだけで開発ができるのですが...