「メモ」携帯サイトをUTF-8で出力する方法とSEO評価

DoCoMo,AU,SoftbankのモバイルサイトをUTF-8 + XHTMLで作った時の対応方法と、モバイルクローラーUTF-8ページに対する評価

対応端末

DoCoMo
- UTF-8で記述するにはXHTMLが前提なので、XHTML対応端末が必須になります。

AU

EZwebでは文字コードの指定は必須です。
また、EZwebでサポートする文字コードはShift-JISです。
文字コードの指定が無い場合、Shift-JIS以外の文字コードを指定した場合には、コンテンツが正しく表示されない (文字化けする) 場合がありますのご注意ください。

404 Not Found

- 推奨してないっぽい

Softbank
- HTML,XHTML対応してるけど推奨はしていない?ただShift_JISの場合、FORMからの絵文字の送信が怪しい挙動をするのでUTF-8の方がちゃんとしてる

Content-Type

DoCoMo,Softbankは、

application/xhtml+xml; charset=UTF-8

AUは、

text/html; charset=UTF-8

ちなみにShift_JISの時は3キャリアとも、

application/xhtml+xml; charset=Shift_JIS

FORM

AUだけ何故かFORMからSUBMITされた値がShift_JISで送られてきます。

auのフォームはSJISで送られてくる
UTF-8対応と公表しているドコモはもちろんSoftBankも、ページの表示がUTF-8の場合はそのフォームから送られてくるクエリーも UTF-8でしたが、auはなんとページの表示がUTF-8だろうと、そのフォームに入力した文字列はSJISで送られてくることがわかりました。新旧8 機種試して全てそうだったのでauはそういう仕様なのかなと思います。

ケータイ飲食検索、au・ソフトバンク端末に対応|blog|たたみラボ

GET,POST共にFORMの値の場合なので、クエリーにUTF-8の日本語を引き回すようなときと切り分けるためEncode::Guessでとりあえず回避。

if ($agent->is_ezweb) {
    my $enc = guess_encoding($_);
    $_ = encode('x-utf8-kddi', decode('x-sjis-kddi-auto', $_)) unless ref $enc;
}

機種依存文字?

DoCoMoの一部の端末で

¢ (セント)
£ (ポンド)
− (マイナス)
‖ (たて)

この辺の全角記号(実機では全角記号として扱われている)がFORMから半角で送信されてきて、キャリア間の絵文字互換用にEncode::JP::Mobile通すと?扱いになっちゃうため

$str =~ s/\302\242/\357\277\240/g;     # cent
$str =~ s/\302\243/\357\277\241/g;     # pondo
$str =~ s/\342\210\222/\357\274\215/g; # maenas
$str =~ s/\342\200\226/\342\210\245/g; # tate

とりあえず直書きで全角に変更。
上記以外にもあると思われます。
(もっといい方法あるんだろうけど深く追っていない・・・・。うーむ)

SEO

5.遅くなりましたが基本です

文字コードはShift-JIS。
JavaScriptは使わない。
これ基本です。携帯サイトっぽいという意味での基本です。
お願いします。

実践モバイルSEO講座|携帯サイトとして検索エンジンに認識させるための8つのTIPS | スマホサイト・アプリをつくろう。

これは違うっぽいです。
サイトのリニューアルの際にShift_JIS -> UTF-8をやってみたんですけど、リニューアル前後でのAU Googleの検索流入数、INDEX数共に減少することなく、いくつかの最適化も行ったことも加えて増加傾向にあります。
いくつかの最適化方もそれほど大きなことをしたわけでは無いので文字コードによるマイナスポイントは特に無いと思います。
推奨していないAUでの検索結果においても文字化けせずに正しく表示されてることも確認しました。
(Googleクローラーが勝手にやってるだけでAUはその辺関与してないとかな気が)
ちなみにYahoo Mobileは特に変化無し

携帯SNSサイトの入会フローについてまとめてみた

gree,モバゲー,mixiの3大モバイル対応SNSサイトに加えて、魔法のiらんど,前略プロフィールの携帯ユーザーがいっぱいいるサイトの入会フローについてまとめてみました。

gree

1.TOPページ
新規入会リンクへのフォーカス数 1
2.入会案内ページ
ドメイン指定受信の説明など
3.空メール
4.入力ページ
- 名前(性)
- 名前(名)
- ニックネーム
- パスワード(6-20の半角英数)
- 居住地(県をプルダウンより選択)
- 生年月日(ex.yyyymmdd,パスワードリマインダーにも使うらしい)
- 性別
5.入力確認ページ
名前,ニックネームなどがデフォルト公開になっていて、登録後に非公開にできると注釈
SUBMIT時にUTN送信
6.登録完了ページ
└登録完了メール
ファーストビューにアバターの紹介や300Gプレゼントしましたなど

全体的に文言などが丁寧でわかりやすくスムーズに入会できる感じでした。入会後もアバターなどへの導線がわかりやすく設置されて参考にしたいです。

モバゲー

1.TOPページ
新規入会リンクへのフォーカス数 1
2.入会案内ページ
ドメイン指定受信の説明、パケ放題推奨など
3.空メール
4.端末識別番号送信ページ
DoCoMoでやってたらUTN送信の認証ページが
5.入力ページ
- ニックネーム
- 性別
- 生年月日(ex.yyyymmdd,機種辺時のリマインダーにも使うらしい)
 └公開しないチェックボックス
- 血液型
- 地域(県をプルダウンより選択)
 └友達検索に公開しないチェックボックス
6.入力確認ページ
7.登録完了ページ
ファーストビューにアバターの紹介や300Gプレゼントしましたなど

パスワードを端末識別番号と生年月日で代用することで入力項目を少なくしたっぽい。こちらも全体的に見やすい感じ。
他のサイトと比べ唯一登録完了メールの送信が無かった。

mixi

mixiでは招待メールが送られてきた状態から

1.招待メール
2.入会案内ページ
招待者のアイコンなど、新規入会リンクへのフォーカス数 1
3.入力ページ
- 性
- 名
- ニックネーム
- 地域(県をプルダウンより選択)
 └公開範囲選択プルダウン
- 性別
- 誕生日 月
- 誕生日 日
 └公開範囲選択プルダウン
- 生まれた年
 └公開範囲選択プルダウン
- パスワード(6-64の半角英数)
- パスワード(再入力確認)
- 簡単ログイン(デフォルトON)
4.入力確認ページ
メールアドレスは公開されないと注釈
SUBMIT時にUTN送信
5.登録完了ページ
└登録完了メール

公開範囲などについて細かい設定が指定できて、プライバシーについて気を配っているのが入会の時点でわかります。

魔法のiらんど

1.TOPページ
新規入会リンクへのフォーカス数 3
TOPから直に空メールへのリンクとなっている
2.空メール
3.入力ページ
- 魔法のiらんどID
- パスワード(10-20の半角英数)
- パスワード(再入力確認)
- 生年月日(ex.yyyymmdd,パスワードリマインダーにも使うらしい)
- お知らせメール(デフォルト受け取る)
- 簡単ログイン(デフォルトON)
- 着せ替えテーマ(プルダウン選択)
4.入力確認ページ
性別、生年月日などが非公開と注釈
SUBMIT時にUTN送信
5.登録完了ページ
└登録完了メール

TOPページからいきなり空メールへのリンクと他サイトより1ステップ絞った感じです。
ただパスワードが10文字からと他サイトに比べ群を抜いて長いのが気になりました。セキュリティ的な観点は置いといて携帯からだとちとメンドイ。

前略プロフィール

1.TOPページ
新規入会リンクへのフォーカス数 3
2.利用規約同意ページ
3.空メール
4.端末識別番号送信ページ
DoCoMoでやってたらUTN送信の認証ページが
5.入力ページ
- パスワード(フォーマットに)
- パスワード(再入力確認用)
- 生年月日 年
- 生年月日 月
- 生年月日 日
- ニックネーム
- 個人情報保護に同意チェックボックス(デフォルトOFF)
6.登録完了ページ
└登録完了メール

規約や個人情報保護に気を使ってる感じですね。
プロフサイトだけにその辺でいろいろトラブルでもあったのでしょうか。。
文言などはだいぶざっくりとした感じ。

まとめ

入会へのリンク

TOPページより3フォーカス目以内に設置するのが人気サイトの常識!

空メール

サイトに入会するには必ずあるものとして認知されていると言っておk!

端末識別番号の送信

DoCoMoだけですが送信時に確認のアラートが出るのも、気にせず"OK"を押してるはずw

生年月日

最近のサイトではyyyymmddの形式で一つの項目にまとめてるサイトが多いですね。これも携帯サイト標準くらいな感じでしょうか。
ついでにパスワードリマインダーにも使われているのも普通っぽいです。

規約とか

規約などはサイトにより様々でTOPに置いてあったり、フォーカス数を減らすために下の方にこっそりおいてみたりと扱いはマチマチです。



携帯のタブブラウザすげー楽だ。

Yokohama.pm tech talk #4 - HTML::AAFindを発表してきました

4/17(金)に行われたYokohama.pm #4でHTML::AAFindについてLT発表させていただきました。


発表資料:
HTML::AAFind in Yokohama.pm #4


こういった場でプレゼンするのは初めてで、○○.pmとかのイベントも初参加だったのでだいぶ緊張しました。
(さらに神奈川県民でもないアウェイ状態)
時間が押していたのと、5分枠ということを意識しすぎで早口になりすぎ3分くらいで発表が完了してしまうという見事なあわてぶり。
お聞き苦しい点があったことを反省してます。。


やる夫で学ぶ○○をプレゼンで使ってみましたw
固くなりがちな技術の話題とかを柔らかく伝えられないかと思い「やる夫メッソド」提案させていただきます!!
新しいプレゼン手法として是非使ってください!!(嘘)


RepositoryはCodeRepos lang/perl/HTML-AAFindに置いてあります。
現在EUC-JPのみの対応となっており、他の文字コードの対応や検出精度の向上などはいずれ。。
紹介できなかったAAの画像への変換についてはこちらのブログに書く予定です。


懇親会では、ネット上では知ってるけど始めて会う人やボクが作ったモジュールを使ってくれてる人などと話すことができ貴重な体験ができました。
Yokomaha.pm関係者の皆様、このような機会を与えていただきありがとうございます!


はてなアイデア
とのこと。

HTML-MobileJpCSS-0.02リリースしました

http://search.cpan.org/~komoriya/HTML-MobileJpCSS-0.02/


変更箇所については、
Craftworks » HTML::MobileJpCSS レビュー
こちらのレビュー等を参考にさせていただきました。

変換定義の変数のスコープをmyからourに変更

hr の色指定は border-color じゃなくて、background-color でやりたかったので、new() のオプションで変換ルールのマッピングを上書きできると pod に書いてありましたが、バージョン 0.01 の現時点では実装がありませんでしたので以下のように修正しました。pod の style_map のコード例も誤字でキーが style になっていますので注意。

ご指摘の通りで不十分なものでしたので、定義を外部から変更できるようにして対応としました。

$HTML::MobileJpCSS::StyleMap->{hr}->{color} = {
    I => 'background-color',
    S => 'background-color',
};

このようにしていだければboder-colorをbackground-colorに変更可能となります。

cssオプションの追加
my $inliner = HTML::MobileJpCSS->new(
    css => {'.color-red' => { color => 'blue' },},
);

動的にCSSの定義が可能にしました。

<link rel ="***">の削除

EZでインライン化したときなど2重で当てられている状態だったので削除するように変更。

タグ内改行の対応

検討事項

*.red { color: #FF0000; }
div.foo a.bar { ... }
<hr class="green fs10" />

指摘していただいた、この辺のCSSの定義はEZの実機で動くか検証して無いのでそちら検証してみて(普通に動くのかな?)からと、正規表現が問題になるかもしれないのでそれも含めて検討です。

XML::LibXMLとかのXPathによる置換についてはパフォーマンスの問題で導入しなかったのですが、Selectorの対応等も考えるとこちらも要検討ですね。
*この辺のベンチについてはいずれまとめたいです


id:yappoさんにCodeReposのcommit権もいただき、さっそくimportしましたので改良してくれる方などいましたら大歓迎です。

/lang/perl/HTML-MobileJpCSS

yappoさんありがとうございます。

IP制限のかけられたモバイルサイトのソースを見る方法

モバイルサイトのコーディングをする際、他サイトのコードを参考にしたいけど携帯端末以外のIP制限がかけられておりソースが参照できない場合があります。
そういったときはGoogleを使ってPCのブラウザなどから見る事ができます。

まずGoogleサイト検索を使って見たいモバイルサイトのURLで検索します。

例えば、はてなダイアリーモバイル場合
site:d.hatena.ne.jp/mobile
はてなモバイルはIP制限をかけておりませんが例として。

普通に検索結果をクリックしますとPCページへリダイレクトされてしまいますので、「キャッシュ」の方をクリックします。



そうするとGoogleにキャッシュされているモバイルページが閲覧することができます。
あとはブラウザからソースを表示すればGoogleの注意書き以降は対象ページのソースとなります。

その他

Googleのキャッシュを見る事になるので、当然GoogleにINDEXされている必要があります
・サイトによっては端末のスペックにより表示を切り替えてたりしますので505i、905iでクローリングするGooglebot-MobileのINDEXするタイミングによりキャッシュされる内容がことなる場合も発生します
Softbankの古い端末でソースを表示できる端末があったような・・・

3キャリア対応のCSS変換モジュールHTML::MobileJpCSS

DoCoMo,EZweb,Softbankを共通の外部CSSファイルからスタイルを反映させるモジュールを作りました。

http://search.cpan.org/~komoriya/HTML-MobileJpCSS-0.01/

3キャリア間での変換の必要性

DoCoMoでは外部CSSを参照できずインラインのみの対応となっています。
DoCoMoのインライン化についてはid:tokuhiromさんの作成したHTML::DoCoMoCSSこちらで対応が可能なのですが、3キャリア間で共通のCSSを参照するとなると属性の指定方法に微妙な差異が問題となります。

例えば小さいフォントを表示したい時は、

DoCoMo   --- font-size:xx-small
EZweb    --- font-size:10px
Softbank --- font-size:small

と属性の値が異なります。
hrタグに色をしていしたいときなどは、

DoCoMo   --- <hr style="border-color:#FF0000;" />
EZweb    --- <hr style="color:#FF0000;" />
Softbank --- <hr style="border-color:#FF0000;" />

とタグにより属性名が異なります。

このような差異を吸収して1つのテンプレート、共通のCSSファイルでケータイサイトが作成ができればなといった感じです。

使い方

SYNOPSIS

メソッド

基本的にHTML::DoCoMoCSSを参照させていただきました。
(中身はパフォーマンスの都合上正規表現でごりっと置換しています)

CSS

EZwebCSSを基本ファイルとしHTTP::MobileAgentにてキャリア判別を行い、DoCoMo,Softbankならインライン化&変換、EZwebならデフォルトでは何もしないという仕様になっています。

istyle

DoCoMoならistyleの変換も行います

istyle="1" => style="-wap-input-format:&quot;*&lt;ja:h&gt;&;"
istyle="2" => style="-wap-input-format:&quot;*&lt;ja:hk&gt;&quot;"
istyle="3" => style="-wap-input-format:&quot;*&lt;ja:en&gt;&quot;"
istyle="4" => style="-wap-input-format:&quot;*&lt;ja:n&gt;&quot;"
オプション
  • agent
  • inliner_ezweb
    • EZwebにて外部CSSの読み込みが終わるまでのレイアウト崩れるのが気になるみたいなときにtrueの値を渡せばEZwebCSSをインライン化します
  • base_dir
  • css_file
    • XHTML内にhrefを記述せずにCSSファイルのパスを直接して読み込ませます
  • style_map
    • キャリア別の差異のマッピングをhashの形式にて上書きします

変換ルール

デフォルトで適用される変換については、共通のCSSファイルにEZwebの記法で記述したものを以下のルールで変換します。

  • プロパティの変換
タグ プロパティ DoCoMo Softbank
hr text-align float float
hr color border-color border-color
  • プロパティと値の変換
タグ プロパティ:値 DoCoMo Softbank
div font-size:10px font-size:xx-small font-size:small
div font-size:16px font-size:xx-large font-size:xx-large
span font-size:10px font-size:xx-small font-size:small
span font-size:16px font-size:xx-large font-size:xx-large
img text-align:left float:left float:left
img text-align:right float:right float:right
img text-align:center float:none float:none

その他

  • CPANに始めてアップしていろいろてこずりました。そしてドキュメントのインデントがなんか汚いw
  • willcomどうしようかな