ke-tai.org ケータイサイト開発に関わる記事・情報を紹介

Perl用の3キャリア対応のCSS変換モジュール「HTML::MobileJpCSS」がリリースされたとのことです。

→　komoriyaのはてなダイアリー　3キャリア対応のCSS変換モジュールHTML::MobileJpCSS [d.hatena.ne.jp]

→　CPAN　HTML-MobileJpCSS-0.01 [search.cpan.org]

ドコモのCSSは、ヘッダ部への記述や外部CSSの利用ができないという困った仕様ため、ページの作成には非常に苦労します。

これらを解決するには、Perlでは「HTML::DoCoMoCSS」、PHPでは「HTML_CSS_Mobile」といったライブラリがありましたが、今回新たな選択肢が追加されたことになります。

従来のライブラリとの違いは、文字サイズやhrタグなどのキャリアによる見え方の差異を吸収してくれたり、isyleの変換機能などが付いている点のようです。

キャリアによる文字サイズの違いは非常に困ることが多いところなので、これは便利な機能ですね。

Perl使いの方はぜひ試してみてはいかがでしょうか。

関連：

• ドコモ用にCSSをインライン化してくれるPHPライブラリ「toInlineCSSDoCoMo」がバージョンアップ
• ドコモのCSSをインラインに埋め込んでくれるPHPライブラリ「toInlineCSSDoCoMo」
• ドコモ端末でCSSを利用するには

少しついでがあったので、ケータイでのメール受信設定の現状についてまとめてみました。

ケータイにはPCとは違い、迷惑メール防止のためのメール受信設定というものがあります。
受信設定を行っているユーザには、これらをしっかり通知しドメインやメールアドレスを登録して貰わないと、ケータイサイトからのメールは届きません。

指定受信案内の例

サイト上でのメール受信設定の対応については、こちらの記事が参考になります。

→　beBit ユーザビリティ実践メモ　携帯サイトではメール受信設定への対応が重要 [bebit.co.jp]

気をつけるポイントとして、次の2点が紹介されています。

1. ドメイン/メールアドレスを追加する必要があるとユーザに気づかせること
2. ユーザが設定をしやすいように配慮すること

1として、注意書きの書き方と実例が、2の方では「指定受信ボタンの追加」と「コピー用テキストボックスの設置」について解説されています。

「指定受信追加ボタンを設置する」については、上記ブログでは具体的なURLが書かれていませんが、次のアドレスで大丈夫なようです。

• ドコモ：　「http://docomo.ne.jp/cp/mailurlfltst.cgi」
• au：　「http://imutl.ezweb.ne.jp/cgi2001/utl_menu.cgi」
• SoftBank：　「http://elinks.softbank.ne.jp/selfcare」

※参考にさせていただいた記事はこちら [unoh.net]

ソフトバンクについては、直接ジャンプするURLは無いようで、次のメニューから設定を行う形のようです。
（もしURLをご存知の方がいましたら教えてください）

追記(9/24)：
ソフトバンクでもジャンプできるURLを教えていただきましたので、記事を修正しました。
詳しくはコメント欄をご参照ください。

ちなみに手動でメール指定受信設定を行う場合の操作は、次の通りです。
どのキャリアも、受信/拒否をドメインやメールアドレスレベルで指定できるようになっています。

• ドコモ
  iMenu　→　お客様サポート　→　各種設定　→　詳細な設定（メール設定）　→　迷惑メール対策
• au
  メールキー　→　Eメール設定　→　その他設定　→　メールフィルター
• ソフトバンク
  メニューリスト　→　MySoftbank　→　各種変更手続き　→　メール各種設定（オリジナルメール設定）　→　迷惑メールブロック設定

関連：

• 全キャリア対応のデコメールの作成・変換が行えるPHPライブラリQdmail
• 各キャリアの画像保存・転送制限の設定方法をまとめてみました
• フォームでのユーザビリティ向上のポイントを紹介した記事「PCサイトとこんなに違う！携帯サイトのフォーム設計ポイントとは」

本ブログでも何度も紹介させて頂いているゆどうふさんが、携帯XHTMLでの入力モードについてのまとめ記事を書かれたようなので、ご紹介させていただきます。

先日こちらの記事のコメント欄から質問を書いたところ、親切にもエントリーとしてまとめてくれたようです。ありがとうございます。

→　ゆどうふろぐ　携帯XHTMLでの入力モードのまとめと、ちょっとしたハマりどころについて [d.hatena.ne.jp]

現状の入力モードの仕様について、とてもわかりやすくまとめられていると思います。

入力モードとは、ケータイから文字を入力する際に選ぶ、「漢全」「カナ半」「英半」「数半」といった文字種のことです。

入力モードの例

ケータイでは入力の手間を軽減するため、標準で選択される入力モードを指定できるのですが、こちらの指定の仕方が各キャリアによって異なっています。

最も気になるのは「プログラムで出し分けをすることなく入力モードの指定が出来るか」という点なのですが、結論から言うと、ソフトバンクのSH系の機種で入力制限モードになってしまうようで、やはり難しいようです。

私の手持ちの端末でテストした結果をまとめておきます。

テストに使用したinputタグ

<input type="text" name="hoge" istyle="3″ format="*m" mode="alphabet" style="-wap-input-format:&quot;*&lt;ja:en&gt;&quot;;-wap-input-format:*m;" />

・入力制限モードになる
705SH

・入力モードのみ指定になる
904T, 813T, 705N, 804N, 703SH

ということで、SH系であったとしても、必ずしも入力制限モードになるわけではないようです。
よくわからないですね。

最近の端末であればistyleを指定（ただしドコモXHTMLの場合のみ「-wap-input-format」を利用）するだけで、全端末問題ないと思っていたのですが、

詳しい状況や機種等を聞いていなかったので再現条件が不明なのが申し訳ないところですが。。。どうも、単にmode属性やistyle属性を指定しただけでは、おかしなことになる場合があるようです。

とのことですので、そういうわけでもないようです。
（※私の手持ちの端末では全て正常に動作しました）

この辺り詳細な情報を持っている方がいましたら、ぜひ教えてください。

関連：

• 第35回PHP勉強会で発表された「symfonyでモバイル開発なんてどうですか。」
• ケータイの端末ID・ユーザIDの取得についてまとめてみました
• ドコモ用にCSSをインライン化してくれるPHPライブラリ「toInlineCSSDoCoMo」がバージョンアップ

先週末からのiPhone騒動で、すっかり紹介しそこなってしまいました。

すでに1000以上のはてぶが付いている状態ですので、みなさんご存じだとは思いますが、良い記事なのでご紹介させていただきます。

→　携帯ホームページを作ろう！　-ちょっと詳しいモバイルサイトの作り方-　モバゲーのような携帯サイトを作るための12のTips [blog59.fc2.com]

モバゲーは、シンプルで見やすい構成ながら、意外と凝った作りとなっており、お手本にはもってこいです。
この記事では、そんなモバゲータウンを参考に、12個の実例を挙げて、3キャリアケータイ向けＨＴＭＬ作成の解説を行っています。

内容は、文字サイズ変更などの基本的なことから、反転文字や水平線、画像の回り込みまで、ケータイサイトを作成する上で必要なエッセンスが網羅されています。

特に「PC向けのHTMLは作成したことがあるが、ケータイは初めて」というような方にぴったりの内容だと思います。

かなり人気のあった記事のようですし、とても役に立ちますので、ぜひ続編を書いて欲しいですね。

関連：

• モバゲータウンがPCからも閲覧できるようになるようです
• 他のケータイサイトのHTMLを参考にする際に便利な裏技
• ケータイでの画像回り込みについてまとめてみました

今回は各キャリア・各フォーマット毎に、転送制限画像の作り方をまとめてみました。

ケータイでは、待ち受け画像などで使うために、ダウンロードした画像を再配布させないための、保存制限や転送制限を行うことができます。
転送制限をかけた画像は、メールへの添付や、SDカードへの保存が行えなくなります。
保存制限をかけた場合は、保存すらできません。

Windows用のフリーウェアなどには、転送制限を行わせないための情報を埋め込むソフトがあったりするのですが、CMSの管理画面からのアップロードや、メール添付による画像アップロードなど、サーバ上で動的に画像を生成しなければならないケースも多いと思いますので、PHPを使ったサンプル（とは言ってもコマンドを叩いているだけですが）でまとめてみることにします。

まず、概要を表にまとめると次の通りです。

*1　：　ドコモ、auのjpg, gifを転送禁止にする方法

画像のヘッダ部分にコメントを入れます。
ドコモであれば「copy="NO"'」、auであれば「kddi_copyright=on」を入れてあげればOKです。
両対応にする場合は、カンマで続けて書けば大丈夫ですが、auは先頭に文字列がある必要がありますので、こちらを先に書き、「kddi_copyright=on,copy="NO"」のようにします。

PHPから処理する場合は次の通りです。
※ImageMagickのコマンド「mogrify」がインストールされている必要があります。

$cmd = "mogrify -comment 'kddi_copyright=on,copy=\"NO\"' test.jpg";
$res = system($cmd);

*2　：　auのPNG画像を転送禁止にする方法

auのPNGを転送禁止にするには、画像のCopyrightキーワードの部分に「kddi_copyright=on」を埋め込んでやればＯＫとのことです。

ImageMagickを使った方法が良くわからなかったため、次のソフトを使いました。
（※方法をご存じの方教えてください）

こちらの記事の下段の方に「imgcmt」というソフトが公開されています。
→　MODULE.JP　imgcmt version 1.0.0 [module.jp]

次のようにコマンドを実行することで、うまくいきました。
PHPのsystem関数でも同様で行けると思います。

imgcmtpng Copyright kddi_copyright=on < test.png > test.png

*3　：　auで画像を保存禁止にする方法

こちらは簡単です。imgタグにcopyright=yesという属性を付けてやればOKです。

<img src="test.png" copyright="yes" />

*4　：　ソフトバンクで画像の転送を禁止する方法

.htaccessに次のように記載します。
（Apacheの「mod_headers」モジュールがインストールされている必要があります）

<FilesMatch "\.(jpg|gif|png)$">
  Header append x-jphone-copyright no-transfer
  Header append x-jphone-copyright no-peripheral
</FilesMatch>

もうあまりアクセスは無いとは思いますが、J-Phone時代のC型端末の場合は、上記設定では対応できません。
C型端末に対応する場合は、画像の拡張子を変更することで転送を防ぐことができます。（「jpg　→　jpz」、「png　→　pnz」）

*5　：　ソフトバンクで画像の保存を禁止する方法

同じく.htaccessに次のように記載します。

<FilesMatch "\.(jpg|gif|png)$">
  Header set x-jphone-copyright no-store
  Header append x-jphone-copyright no-transfer
  Header append x-jphone-copyright no-peripheral
</FilesMatch>

※公式サイトのPDF資料に、一部の端末ではno-storeが利用できないとありましたので、念のため3つを併記しました。

今回はImageMagickのコマンドを、system関数から叩くという方法を取っています。
他にも「MagickWand For PHP」を使った方法もあり、その例はウノウラボさんのブログに情報がありましたので、こちらを参照すると良いと思います。

→　ウノウラボ　携帯キャリアで画像を転送させない方法 [unoh.net]

上記ブログにもありますが、せっかく対策を行ってもケータイ以外からアクセスされては意味がありません。
IPアドレスによる制限をかけ、PCやWillcom、イーモバイルなどからのアクセスも遮断しましょう。

なお、これらの情報はまだ勉強中の段階のため、誤り等がありましたら、突っ込みをお願いいたします。

関連：

• 2008年9月下旬にドコモのIPアドレスが追加になるようです
• ケータイキャリアやクローラのIPアドレス情報を共有するためのWikiを作ってみました
• ケータイからのみアクセスを許可する.htaccess