近頃の、とあるR。

WEBサービス100選 日本で有名でないおもしろサービス part2の文末に記載されている「こねた」に触発されケータイサイトを作ってみました。当然アクセスはありません＼(^o^)／

アクセスにガツガツするのは嫌いなのですが、私もウェブ屋の端くれ。好き嫌い以前に、ある程度は出来なきゃなりませぬ。と言う訳で、これを機会に携帯SEOに挑戦！……基礎的すぎてお恥ずかしい(ノ∀`)

とりあえずサイト作る

後にも先にもまずはサイトを作らねば始まりません。

押しやすそうなドメインを取ってみた

携帯で押しやすそうな admda.com を取ってみました。

深く考えずにコンテンツを作ってみた

知育系の内容で、更新の必要がほとんど無いツールっぽいコンテンツを作ってみました。
深い理由はありません。ただ、絶対音感コンテンツはDoCoMo未対応に(ノД`) だってDoCoMoで音を出すのがそんなに難しいとは知らなかったんです

googleにインデクスしてもらう

勉強と言うことで、今風のやり方に挑戦。

google webmaster tools

google webmaster toolsにアカウントを作ります。

サイトマップを作成

モバイルサイトマップの作製にマニュアルがありますが、googleサイトマップ ツール等でググると、ウェブ上で使える楽ちんツールがヒットしましたのでそちらのお世話になりました。
google webmaster tools にサイトマップのURLを登録すれば、数分（精々数時間？のオーダー）で認識されました。

robots.txtを設置

ロボットウェルカムですから、無くても全く問題ないような気がしましたが、練習ですので、しっかり!?と設置。

インデクスされたのは３日後

金曜日夜にこの作業を行い、実際にインデクスされたのは月曜日でした。

アドセンスを使う

同金曜日に、Google AdSenseに申請。こちらの承認も月曜の昼ころとなりました。

ソーシャルブックマークサービスに登録

触発された元ネタに従い、めぼしいソーシャルブックマークサービスに登録。
SEO以外で勉強になった点も少なからず有りました。例えば、

• アドレスを入力するとタイトルを自動取得してくれるインターフェイスを採用しているブクマサービスが多かった
• 携帯のUIDを認証の代わりにしていて～もにゃもにゃ～でセキュリティ的に問題のあるサイトが少なくなかった
• 普段携帯サイトを使わないからか、メアドの入力や空メールがとても怖かった（結局ほとんどの操作をPCから行うことに）

ポッとでの孤立サイトにドカンとアクセスが集まるような劇的な効果は有りませんが、確かに、SEO効果は有りそうです。キーワードでググると、ブクマサービスのページがかなり引っかかりますので。

マイナー検索エンジンにも登録

携帯専用の検索エンジンサービスにも何件か登録してみましたが、即反映されないからでしょうか、今のところSEO的な効果は見られません。

失敗した点

まだ、ちょっと登録した段階なのですが、それでも結構失敗したなぁと思う点があります。

• コンテンツそれぞれを別サイトにすべきだった
• もろもろ登録作業中に登録キーワードが揺らいだ
• 既存カテゴリにバッチリ当てはまるコンテンツではなかった

ぼやき

社○.comなんかは、17日にドメイン登録でその日のうちにブレイク。おそらく某ニュースサイト自身による小遣い稼ぎか実験なんだろうなぁ(・ω・)
４文字＋jpのドメインは某NTT系列が抑えまくってる。

position:relative;やabsoluteで位置を調整するケースがありますが、
微調整に向いているrelativeに意外な落とし穴を発見。

落とし穴１：パーセント値の扱いが違う

サンプルHTMLを用意しました。
これの、黄色のボックスの位置がブラウザによって結構変わります。
px指定の場合は大差無いんですけどね(・ω・)パーセント指定だと途端に癖が出まくります。
まとめると以下の通り。

自ボックスを基準にした指定値（ほぼ）を取る

IE6
IE7

ブラウザのinnerHeight?を基準にした指定値をとる

Chrome(2.0.172.30)
safari(4.0)

指定が無効

IE8
FireFox(3.0.10)
Opera(9.64)
macのSafari(3.2.3)

落とし穴２：webkitの挙動がwindowsとmacで異なる

微妙なバージョンの違いかも知れませんが、何れにせよ、
本件に限らず、windowsのChromeやSafariでレンダリングが意図通りだからと言って、
macのSafariでも大丈夫とは限らない訳です((((；ﾟДﾟ))))
ちゃんと、macチェックもしましょう俺(ノ∀`)
※追記：safari4で挙動がそろいました

ウェブとしては、テキストはザックリ(ﾟДﾟ)と流し込み、ブラウザのレンダリングに任せて整形。細かい文字送りや禁則に左右されないデザインを心がけるのが理想の一つです。
しかし、毎度毎度そうはいきませんよねぇ。
字数を決めてコピーを書いてもらった挙げ句、macだけちょっと２、３文字飛び出て改行しちゃいます(ノ∀`)とかwindowsは字足らず気味になっちゃいます……等々を避ける為にも、テキストのズレを最小に抑えたいケースも多々。

最も簡単な方法

等幅フォントにしてしまうことです。
PSDデザインの時点で、「HiraKakuPro W3」か「MS　ゴシック」を使ってテキスト部をデザインしてもらいます。
これだけで、全角は大体合います。

厄介なのは実は半角

サンプルHTMLを用意しました。
このテストのAが通常の等幅フォント指定となります。（私の場合）
しかし、これですと、半角に差が出ちゃうんですよねぇ。「MS　ゴシック」の半角の方が細いのです。

全角指定が先の場合

Aの書き方
font-family:”Hiragino Kaku Gothic Pro”,”ヒラギノ角ゴ Pro W3″,”ＭＳ ゴシック”,Helvetica,Arial,sans-serif;
では、全角フォントを先に指定し、その後半角フォントを指定しています。
しかし、この指定方法では、半角も「MS　ゴシック」に（つまり細く）なってしまうんですよね……

半角指定が先の場合

Bの書き方
font-family:Helvetica,Arial,sans-serif,”Hiragino Kaku Gothic Pro”,”ヒラギノ角ゴ Pro W3″,”ＭＳ ゴシック”;
では、逆に、半角フォントを先に指定しています。
しかし、FireFoxとMacのSafari以外、つまりwindowsの殆どのブラウザでは、全角フォントの指定が無視されてしまいます。よって、ツカエナイパターン。

バッチリ合わせるには

まぁ、Aで良いと思います。実用的には。半角でズレますけど。
そこもバッチリ合わせたいんじゃー！！と言う場合は、
Cの方法。
全角に font-family:”Hiragino Kaku Gothic Pro”,”ヒラギノ角ゴ Pro W3″,”ＭＳ ゴシック”;
半角に font-family:Helvetica,Arial,sans-serif;
全角と半角で異なるフォントを割り当てるしかなさそうですOrz
もっとマシな方法を発見したい(ノ∀`)

Microsoft Explorer Mouseが突然、充電できなくなって困りましたが、電池を入れ直したら復活しました(ﾟДﾟ)

それに気がつくまで、有線の予備マウスで仕事。
このマウスに乗り換えるまで、長年有線マウスを愛用していたので、ケーブルは気にならない方だと自覚していたのですが……一旦ワイヤレスに慣れちゃうと、やっぱりケーブルは無い方が良いですね(・ω・)本体の重さは案外気になりませんし。

でも、Microsoft Explorer Mouseはホイールクリックが重いよ(ノ∀`)