2008-09-14
■[mobile]携帯XHTMLでの入力モードのまとめと、ちょっとしたハマりどころについて
先日の勉強会での発表内容に関して、ke-tai.orgさんのところで入力モードについて突っ込まれたので、せっかくだし書きかけの記事をきちんとまとめてみることにしました。
元々、wideの%MobileStudyで入力モードの話が出た際、意外と情報が間違って知られていたりすることが多いようだったので、特にはまりやすいあたりを中心に、入力モード指定についてざっくりと書いておこうと思って、まとめたかけでそのまま放置していたwものがあったんですが、それがベースです。
そんなわけで、記憶頼りが中心であんまり検証しないで書いてるので、間違いが含まれてたらごめんなさい。
では本題。
入力モードとは
まず、入力モード指定って何のことかという話からすると、みんな携帯をいじる時に「全角かな」とか「数字」とか「英小文字」とかいろいろ端末の文字入力を切り替えると思うんですが、あれのことです。
サイトを作る時にinputタグとかで入力欄をつけたりしますが、その入力欄に書き込む際に、入力モードを自動的に数字入力モードにする、とかそういう切り替えを実現するものです。
この、入力モード指定には各キャリア別も含めて4種類の指定があります。英字入力モードを例にとれば
- mode="alphabet"
- istyle="3"
- format="*m"
- style="-wap-input-format:"*<ja:en>""
という4種類です。
まず、ハマりどころとかは置いといてそれぞれのことを簡単に説明します。
mode
これはsoftbank特有の指定です。
パラメータには
- hiragana : 全角かな
- katakana : 全角カナ
- hankakukana : 半角カナ
- alphabet : 英字
- numeric : 数字
があります。
istyle
元々はdocomoの「HTML」の仕様です(docomoのXHTMLでは使えません。)。
- 1 : 全角かな
- 2 : 半角カナ
- 3 : 英字
- 4 : 数字
になります。
format
softbankは互換仕様を実装している機種もある。。と仕様書にはありますが、ごく一部のみのようで、3GC系はこれだけじゃ何も変わりません。
docomoには、互換実装はないみたいです。
- A : 英大文字のみ (句読点の入力も可能)
- a : 英小文字のみ (句読点の入力も可能)
- N : 数字のみ
- X : 大文字と数字記号 (句読点、記号の入力も可能)
- x : 英小文字と数字記号 (句読点、記号の入力も可能)
- M : 全角漢字 (トグルによりすべての文字)
- m : 英小文字 (トグルによりすべての文字)
といったパラメータがあります。
各パラメータの前に、数字を付与することで、入力文字数を設定できます。(6Mとか。)
数字の代わりに*をつけると、無制限になります。
-wap-input-format
style属性として指定します。
元々WAP2.0の仕様として存在するものですが、これの独自拡張がdocomoに実装されています。
指定可能なパラメータは
- -wap-input-format:"*<ja:h>" : 全角かな
- -wap-input-format:"*<ja:hk>" : 半角カナ
- -wap-input-format:"*<ja:en>" : 英字
- -wap-input-format:"*<ja:n>" : 数字
となっています。
やはりsoftbankはこれの互換モードを実装してあります。
また、auに関しては、WAP2.0の仕様にのっとった、-wap-input-formatの指定が可能です。
仕様については、こちらのページが詳しいです。
http://www.marguerite.jp/Nihongo/WWW/RefCSS/-wap-input-format.html
ハマりどころ:初期入力モードと入力モード制限
各設定項目の仕様は、だいたい上記のようになっています。
さて、それではこれらを総合すると、3キャリア対応テンプレートで使用するにはどのような書き方をすれば良いかというと、アルファベット入力にしたいのであれば
<input type="text" name="hoge" istyle="3" format="*m" mode="alphabet" style="-wap-input-format:"*<ja:en>";-wap-input-format:*m;" />
と記述することで、各キャリアで入力モードがアルファベットになります。*1
。。。なんてのが、だいたいよく知られてるところなんですが。
実際には、これはちょっとした落とし穴があります。
それは、SoftBank端末に対してDoCoMo互換の-wap-input-formatを指定した場合、単に入力する文字種の初期状態にあたる「初期入力モード」が変更されるのではなく、入力内容そのものが制限される「入力モード制限」になってしまう、ということです。*2
入力モード制限がかかってしまうと、本当にその文字しか入れられません。許可されているモード以外の入力モードに変更できないのはもちろん、ひらがなモードになってしまえば、変換してカタカナを入れようとしてもはじかれてしまったり、英字のトグルから数字が除外されてしまうなどといった徹底ぶり。
このため、よく知られているはずの上述の方式は、本当にそのモード以外制限されてしまっていい場合を除き、ちゃんとした入力のできない困ったモード設定になってしまいます。
メールアドレスを入力させるつもりで英字モードにしたら、数字が入れられなくて登録できない!なんて落ちが待っていたりします。なお、添えておきますがこのモード制限の実装は機種依存のようです。*3
また、SoftBankの入力モード制限は-wap-input-formatのときだけではありません。
これは自分が直面した問題ではなく、IRCで相談されたときの問題なのですが、何かしらの条件下でmode属性やistyle属性の指定を行ったら、なぜか入力モード制限になってしまった、という現象がありました。
その際、なぜかistyleとformatを併せて指定したらモード制限がなくなり、めでたく初期入力モードの切り替えに成功した、なんて事もありました。
詳しい状況や機種等を聞いていなかったので再現条件が不明なのが申し訳ないところですが。。。どうも、単にmode属性やistyle属性を指定しただけでは、おかしなことになる場合があるようです。
じゃあどうするのか
上述の問題があるため、実は一切の切替機構なしにDoCoMoとSoftBankでちゃんとしたモード切り替えの実現を両立させることはできません。
きちんとしたモード切り替えを全キャリアで実装するには、別テンプレート化or何らかの切替機構が必要になります。
振り分けをする場合は
という感じになるように切り替えてやると、おかしな状況にも対応でき、きちんとした入力モードの切り替えが実装できて、良い感じです。
Smartyのプラグインなり、ヘルパーにまとめるなりしてやると、簡単に使えると思います。
最後にいいわけ。
なんかこんなちょっとした話のためにだいーぶ長いエントリになってますが、まぁその辺はご愛嬌ということで。*4
一応、この内容は自分の記憶+調べられる範囲内の内容だけなので、もっと細かく面倒な情報があるかもしれません。
もし、他にも色々詳しく知っている方等いらっしゃったら、ぜひご指摘ください。
*1:最後の-wap-input-format2つ目は、au用です。これがないと、auはDoCoMoの独自-wap-input-formatの影響でおかしくなったりします。
*2:初期入力モードも入力モード制限も、自分の造語です。何と表現すればいいか迷って適当にことば作りました。
*3:ただ、上述の現象が発症したのがSH系の数種だったため、SoftBankで大きなシェアを誇るSH系機種がダメということは、使えないと判断していい思います。
*4:書きかけのエントリに追記すると結構gdgd感が出ちゃうなぁというのが反省点。
- 61 http://ke-tai.org/blog/2008/09/19/inputmode/
- 53 http://ke-tai.org/
- 39 http://search.yahoo.co.jp/search?p=?????í????泣?????&search.x=1&fr=top_ga1&tid=top_ga1&ei=UTF-8
- 24 http://reader.livedoor.com/reader/
- 21 http://gmail.1o4.jp/imap.html
- 17 http://www.google.co.jp/search?sourceid=navclient&hl=ja&ie=UTF-8&rlz=1T4GGIH_jaJP223JP223&q=3キャリア対応+XHTML
- 13 http://www.google.co.jp/search?hl=ja&client=firefox-a&rls=org.mozilla:ja:official&q=絵文字データ&btnG=検索&lr=lang_ja
- 10 http://b.hatena.ne.jp/add?mode=confirm&title=%u643A%u5E2FXHTML%u3067%u306E%u5165%u529B%u30E2%u30FC%u30C9%u306E%u307E%u3068%u3081%u3068%u3001%u3061%u3087%u3063%u3068%u3057%u305F%u30CF%u30DE%u308A%u3069%u3053%u308D%u306B%u3064%u3044%u3066 - %u3086%u3069
- 9 http://events.php.gr.jp/events/show/51
- 8 http://search.yahoo.co.jp/search?p=iphone+メールアカウント&search.x=1&fr=top_ga1&tid=top_ga1&ei=UTF-8
