スマホ向け Googlebotが発表。スマホのSEOが変化の時へ

これまで、セミナーなどで私は「現在スマホサイトは、PCサイトと同等と扱われてしまうため、SEO対策はなかなか困難です。PCサイトと振り分ける場合は、スマホサイトのSEOは無視してPCサイト側でSEO対策をすると良いでしょう」と紹介してきました。

もちろん、それに合わせて「当然この方法は、この先有効な方法ではなくなってくるでしょう」ともお話ししてきましたが、いよいよその時がやってきました。

現時点で Googlebot-Mobile が使用する主なユーザーエージェントは次の通りです。

  • 従来型携帯電話版 Googlebot-Mobile
    • SAMSUNG-SGH-E250/1.0 Profile/MIDP-2.0 Configuration/CLDC-1.1 UP.Browser/6.2.3.3.c.1.101 (GUI) MMP/2.0 (compatible; Googlebot-Mobile/2.1; +http://www.google.com/bot.html)
    • DoCoMo/2.0 N905i(c100;TB;W24H16) (compatible; Googlebot-Mobile/2.1; +http://www.google.com/bot.html)
  • スマートフォン版 Googlebot-Mobile
    • Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_1 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8B117 Safari/6531.22.7 (compatible; Googlebot-Mobile/2.1; +http://www.google.com/bot.html)

まだ、スマホサイトのみをリストアップするような機能は発表されていませんが、これも遠からず何らかの動きがあると予想されます。今後は、スマホ向けサイトもSEO対策が必要になってくることでしょう。

とはいえ、文章の流れを無視したようなキーワードの羅列などの「いかにもなSEO」が流行しないことを祈るばかりです。。

Sparrowが Dropboxにも対応して、超絶便利に

Sparrowは、GmailやIMAPのメールクライアントとして、軽くて便利で、デザインも素敵な非常に素敵なソフトです。

今回、こちらのソフトが Dropboxに対応しました!

例えば、メールで相手にファイルを送信しようとしたときに5MB容量があった。そんな時、困りませんか? そのままえいと添付しちゃうと、相手に超重たいメールが行ってしまったり、下手をするとメールボックスがパンクして戻ってきたりして。

そこで、Dropboxを利用してファイルをアップロードし、相手にはそのリンクだけを教えてあげると便利です。この作業を、Sparrowが一気に行ってくれます。

設定画面を開いて「Services」メニューを開くと、次のようなメニューが表示されます。もし、前バージョンで CloudAppとすでに同期していたら、一度接続解除してください。後は、Dropboxのアカウントを入れて接続するだけ。

実際に利用するときも非常に簡単。ファイルを、メール作成画面の上半分にドロップするとDropbox、下半分で添付ファイルにすることができます。マウスカーソルのそばに表示されるアイコンが目印。

これで、Dropboxにアップロードされて実際にメールとして送信されるのは、リンクだけという訳。超絶便利です。もう、手放せません。

GmailをWebで使っているという方は、ぜひこの機会に乗り換えてみてください!

設置が超簡単な WiMAXホームルーター『URoad-Home』

モバイル通信として有名なWiMAXが、ホームルーターを発売したと言うことで、テストユーザーとしてお借りすることができたので、早速使ってみました(金銭は頂いていないので、純粋な感想です)。

箱は、ちょっとAppleを彷彿とするシンプルな化粧箱。

箱の中も、本体とケーブル類の他、簡易なマニュアルが入っているだけのシンプルな構成です。

さて、使い方ですが、本体と電源ケーブルをつないでしばらく待ちます。すると、ランプが点灯するので、後はWi-Fiの接続ポイントとして、アクセスポイントを選ぶだけ。(本体裏のシールに、標準の名前が記載されています)

確かにつながりました。拍子抜けするほど簡単です。

速度などは、通常のWiMAXと同様です。少し心配だったのは、建物の中でしかも、我が家はコンクリート造のマンション。Softbankの電波が圏外となるような立地のため、WiMAXの電波が届くかが心配でした。結果は、普通に窓際でもない机の上に置いても、十分届いています。

また、ホームルータならではの点としては、同時接続数が10台までと大きいことと、有線LANのポートがついているため、無線LAN非対応のDVDプレイヤーやデジタルテレビなども、これに接続することができます。

一応、iPhoneの SpeedTestというソフトで速度を計測してみました。

ダウンロード速度: 2.50Mbps
アップロード速度: 0.15Mbps

これがWiMAXとして早いのか遅いのかの判断がつきませんが、スマートフォンなどでサイトを見る程度であれば、十分と言えます。

電話回線を引いていない一人暮らしの方などに?

ということで、まずはファーストインプレッションですが、とにかく設置が簡単なのは楽で良いです。固定回線で光を導入した場合などは、業者さんが自宅に来て工事をして、ケーブルを壁につないで・・といった作業が必要なので、そこまで速度を求めない一人暮らしの方などは良いかもしれません。

また、回線速度はムービーを試聴したり、ファイルを激しくアップロードするような用途には適していませんが、高速回線のWiMAX 2なども開発中ということなので、今後に期待という所でしょう(とはいえ、このルータはサービスが始まっても非対応となるでしょうが・・)

ただ、ホームルータというところで先のような利点はあるものの、バッテリーを搭載していないためAC電源を抜くことができません。外に持ち出すことはもちろん、ちょっと場所を移動することもできないのは、モバイルルータよりも不便な気もしました。

WiMAXを家庭でも利用して欲しいというメッセージが込められた製品であると思いますが、今後はもう少しホームルータとしての機能を拡充し、例えばリモートハードディスクを内蔵するとか、モバイルルータとペアリングをするなどして、外出先から簡単に家庭内のパソコンにアクセスできる仕組みを作るなど、「ホームルーターならでは」の機能が増えてきたら、面白い製品になる気がしました。

URoad-Home

NドライブとDropboxの組み合わせが最強

今や、Dropboxにどっぷり依存している私ですが、最近NAVERの同種サービスNドライブを組み合わせて使ってみたところ、Dropboxの唯一の不満点が解消されて、非常に快適な生活になりました。

Nドライブの特徴

Nドライブは無料で30GBのスペースを取得でき、WindowsとMacにそれぞれクライアントソフトが、またiPhone/iPad/Androidに専用クライアントが提供され、さらにはWeb版のインタフェースも提供されています。

Dropboxの困った点

Dropboxを使っていて、唯一困った点は「同期をする」という事でしかファイルをアップロードできないことです。普段利用している限り、この同期をするというのは全く困ることはないのですが、例えば外出先でちょっと別のマシンにファイルを送りたいときなどに、Dropboxの場合は対象フォルダにコピーした後、同期されるまで待たなければなりません。

しかも悪いことに、外出先でモバイル通信をしているときは同期すると重いので、一時的に停止していたりします。すると、立ち上げたとたんに全部のファイルを同期しはじめてしまい困ります。といって、Webインタフェースでアップロードしようとすると、ログインが面倒だったり、さてどのフォルダにアップしようかとか、何かと面倒でした。

Nドライブの良いところ

その点Nドライブの場合は、クライアントソフトを起動したときだけ現れるリモートフォルダのような感覚で使うことができます。例えば一時的にファイルをアップロードして、iPadでそのファイルを見たり、事務所内のWindowsマシンでクライアント起動して取り出したり、Webインタフェースで取り出したりと、一時的な作業スペースとして最適です。

「同期をしない」というのは、非常に些細な時間差ではあるのですが、「同期されたのかな? されてないのかな?」と気にしたりするのは、細かなストレスになっていることがNドライブを使って分かりました。

iPhone/iPadとの組み合わせがさらに吉

先の通り、iPadなどで文書を確認したいときにも非常に便利ですが、iPhone/iPadではさらに、カメラロールと連携して、写真を全部バックアップする機能もあります。もちろん、MacのPhoto streamにも保管はされているものの、バックアップはいくらあっても困りません。30GBまで無料というのですから使わない手はないでしょう。

そしてなにより、Webインタフェースのデザインやアイコンのデザインが生かしているという点も、私にはかなり大きなポイントです。無償サービスは意外とWebがいけていなかったりするので・・

ということで、またまたNAVERにはやられてしまいました。どこまで素敵サービスを乱発してくるのでしょう。今後も楽しみでなりません。

スマートフォンに関する「言葉」いろいろ

皆さんは、「スマートフォン」のことを略すとき、なんと呼びますか? 「スマフォ」? 「スマホ」?

私がイベントなどでお話をするときに、定番としているトークの一つです。迷うところですが、現状では「スマホ」と呼ぶ方が圧倒的のようです(Googleでの検索結果より判断)。この他、スマホ業界にはさまざまな呼び方があります。ここでまとめておきましょう。

ガラケー

これはもう定番ですが、スマートフォンに対してこれまで日本国内で販売されていた主な端末のことを「ガラパゴス携帯」で略してガラケーと呼びます。

フィーチャーフォン

その「ガラケー」はちょっとイメージがよくないと言うことで、最近国内端末のことを「feature」という英語、これは「特徴」とか「注目する」みたいな意味がありますが、そこからフィーチャーフォンと呼ばれたりしますが、もう一息普及していていない上に、ちょっと間違えて「フューチャーフォン(future phone)」などと呼んじゃったりして、「未来の携帯」になってしまったりするので注意が必要です。

ガラスマ(ガラパゴススマートフォン)

Android端末は、米国や香港などのメーカーから世界中で販売されている端末と、NECや富士通などの国内メーカーが、国内専用に開発している端末があります。後者の場合、ワンセグやおサイフケータイなど、従来のガラケーにあった機能が搭載されています。

これを「ガラパゴス」+「スマートフォン」で略して「ガラスマ」と呼んでいるようです。

グロスマ(グローバルスマートフォン)

対して、前者の世界標準の端末は、グローバルなスマートフォンで「グロスマ」です。

スマケー(スマートフォンケータイ)

スマートフォンと言えば通常、全面がタッチパネルになっていますが、従来のような二つ折り携帯なのにAndroidを搭載している端末が登場しています。これを、スマートフォン+ケータイで「スマケー」と呼ぶようです。Softbankが提唱しています。

なにやら、用語が続々と増えていて訳が分からなくなってきております。今後も、どんな独特な言葉が生まれていくのか、注目していきましょう。

[WordPress] UserAgent Theme Switcherで、iPadと Androidに対応させる

WordPressで、スマートフォンにのみテーマを変更する際、専用のプラグインも多数ありますが、大抵はテーマとセットになってしまっているため、全くオリジナルのデザインを適用するには、別のアプローチを取る必要があります。

そこで便利なのが「UserAgent Theme Switcher」。スマホに限らず、ユーザーエージェントで判定して、自由にテーマを切り替えることができます。

しかし、こちらのプラグイン、ちょっと困った点があります。

  • iPadがスマートフォンとして認識されてしまう
  • Androidで切り替わらない

そこで、プラグインを少し改造します。なお、ちょっとはまったのがプラグインにはXMLファイルが用意されているため、てっきりこれで制御できるのかと思ったのですが、現状ではこのXMLは使われていないようです。。なぜ・・ ということで、PHPを直接編集します。

/wp-content/plugins/user-agent-theme-switcher/UserAgentThemeSwitcherData.php をエディタで開いて、300行目付近の次の記述を見つけます。


$this->addBrowser(new BrowserUA(‘operadesktop’, ‘Opera’, null, ‘^Opera/[d.]+( ){0,1}(.*).*$’, ‘opera’));
$this->addBrowser(new BrowserUA(‘safarimobile’, ‘Safari Mobile’, null, ‘^Mozilla/5.0 (.*) AppleWebKit/.* (KHTML, like Gecko)( Version/.*){0,1} Mobile[/A-Z0-9]{0,}( Safari/.*){0,1}$’, ‘webkit,mobile’));
$this->addBrowser(new BrowserUA(‘operamini’, ‘Opera Mini’, null, ‘^Opera/.* (.*Opera Mini/.*).*$’, ‘opera,mobile’));
… 

この、太字になった部分(safarimobileと書かれている行がポイント)を次のように書き換えます。


$this->addBrowser(new BrowserUA(‘operadesktop’, ‘Opera’, null, ‘^Opera/[d.]+( ){0,1}(.*).*$’, ‘opera’));
$this->addBrowser(new BrowserUA(‘safarimobile’, ‘Safari Mobile’, null, ‘^Mozilla/5.0 ((iPhone|iPod).*) AppleWebKit/.* (KHTML, like Gecko)( Version/.*){0,1} Mobile[/A-Z0-9]{0,}( Safari/.*){0,1}$’, ‘webkit,mobile’));
$this->addBrowser(new BrowserUA(‘androidmobile’, ‘Android Mobile’, null, ‘^Mozilla/5.0 (Linux; U; Android.*) AppleWebKit/.* (KHTML, like Gecko)( Version/.*){0,1} Mobile[/A-Z0-9]{0,}( Safari/.*){0,1}$’, ‘webkit,mobile’));

$this->addBrowser(new BrowserUA(‘operamini’, ‘Opera Mini’, null, ‘^Opera/.* (.*Opera Mini/.*).*$’, ‘opera,mobile’));
… 

行ったこととしては、「Safari Mobile」をiPhone/iPod touchのみにするために正規表現を少し細かくしています。また、Android用の判定がないので、付け足しています。

これで、動作を確認しました。プラグインを直接書き換えてしまっているため、バージョンアップするとパターンが消えてしまいますが、XMLなどで制御できるようになりそうな感じなので、今後のバージョンアップに期待ですね。

なお、こちらの内容は2011/11/27のWordCamp Tokyo 2011で発表します。

iOS 4以前の iOS Simulatorをインストールするには

※先にご注意:この方法は、途中でインストーラーがクラッシュしますので、XCodeの本体やMac OS Xに何らか影響を与えてしまっている可能性があります。試される場合は、十分ご注意ください。

Mac OS X Lionにして、iOS Simulatorをインストールしようと App Storeから XCodeをインストールすると、なんと最新版のシミュレータには「iOS 5」のものしか収録されていません。

仕方がないとあきらめていたのですが、to-Rのブログにこんな記事が。

もしやと思って、みてみたのですが残念ながら私の環境には、そのフォルダはありませんでした。どうやら、アップデートをした場合にはバックアップが保持されるもよう?

しかし、複数バージョンを同居できるということが分かったので、後からインストールできないかを試してみました。

旧バージョンのXCodeは次のサイトで配布されています。

ダウンロードして解凍し、セットアップを始めると間もなくインストール先を聞かれます。ここで、「Other」を選んで適当なフォルダを選び、インストールを開始します。

しかし・・残念ながら順調には行きません。なぜか、途中で「iTunesが起動しているので終了しろ」といったエラーメッセージが表示されてしまいました。iTunesを終了しても、もう一度起動してから終了をしてもダメ、セットアップ開始前にiTunesを終了してから始めても、やっぱりダメです。3回もインストールをやり直す羽目になりました。。

仕方がないので、そこでインストーラーは強制終了してしまいましょう。おそらく、XCodeは正しく入っていないのですが、iOS Simulatorは正常に起動します。

こうして、iOS 5のシミュレータとそれ以前のシミュレータを同居させることができました。しかし、アップルよ・・過去のOSのシミュレーションができないと、シミュレータの意味がないのではないでしょうか・・アップルの潔さが、かなり裏目に出ている現象な気がしてなりません。

    Facebookでメッセージをやりとりするときは、「友達登録」をしよう

    Facebookのメッセージ機能は、ある条件でメッセージが「その他」というフォルダに振り分けられてしまいます。

    ここに分類されてしまうと、通知のメールも来ないですし、メインページからも見られないため、「見落としていたー」という被害が続出しています。

    @tsubさんに教えてもらったところによると、ここに振り分けられるのは「友達」または「友達の友達」以外からのメッセージが振り分けられてしまうとのこと。リアルの世界で友人でも、Facebookでうっかり友達登録していない場合は、こちらに入ってしまうようですね。

    Facebookでメッセージを送るときは、まずは相手が友達かどうかを確認し、そうでなかったら先に申請をしてからメッセージをやりとりした方が良いかもしれません。SPAM防止策とはいえ、ちょっと困った現象ですね。

    ちなみに、「その他」に振り分けられてしまったメッセージは手作業で戻すこともできます。

    今さらながらの CSSメタ言語『less』入門

    最近、CSSは素のまま書かずに「less」とか「sass」とか「scss」などのいわゆる「メタ言語」で記述するのが一般的らしい。そんな話は聞いていたのですが、忙しさにかまけて勉強を怠っておりました。

    ようやく調べてみたものの、どうやら最近少しやり方なども変わってきたようなので、今さらながらメモ。私と同じく乗り遅れてしまった方は、これを機会にやってみてはいかが?

    メタ言語ってなに?

    そもそもメタ言語とはなにか。それは「ある言語を定義するための言語」という、混乱しそうな説明ですが、要するに「CSSを生成するための別の記述」のこと。CSSには、例えば「見出しと、あるエリアには同じ色を使いたい」という場合にも、変数などの概念がないため、次のように2回同じ記述をしなければなりません。

    #header {
        ….
        color: #4d926f;
    }
    h2 {
        ….
        color: #4d926f;
    }

    そこで、メタ言語を用いると変数などの概念を取り入れて、次のように記述することができ、

    @color: #4d926f; /* これが「変数」 */

    #header {
        color: @color; /* この「@」から始まるキーワードが後で置き換わる */
    }
    h2 {
        color: @color;
    }

    これを「コンパイル」という操作でCSSに変換することで、CSSの管理を楽にするという手法のこと。プログラミングの世界では一般的なことですが、HTML/CSSのマークアップエンジニアの方にとっては、ちょっとピンと来ない概念かもしれません。慣れればぐっと便利になるでしょう。

    JavaScriptライブラリを取得

    lessは、どこかのバージョンからJSライブラリが提供されているようです。少し前の入門記事などではRubyをインストールして、コンパイルといった操作になるため、かなり面倒でしたが、今は非常に楽です。

    次のサイトからダウンロードして、組み込みます。

    そしたら、上記の lessの記述をコピーして、新しいファイルに貼り付け、「style.less」などのファイル名で保存します。そして、HTMLからは次のようにしてこのファイルにリンクします。

    <link rel=”stylesheet/less” type=”text/css” href=”styles.less”>
    <script type=”text/javascript” src=”less.min.js”></script> 

    ポイントは「rel」属性が通常「stylesheet」なのに対して、lessの場合は「stylesheet/less」となっています。これに反応して、JSライブラリがリアルタイムでCSSに変換するというわけです。

    こうしてページを表示すると、問題なくWebページを表示することができます。

    コンパイルする

    このまま運用することも可能ではありますが、このままだとJavaScriptが利用できない環境では、スタイルが一切あたらないことになります。また、表示速度も遅くなってしまいます。そこで、完成したlessファイルを「コンパイル」して、CSSファイルとして保存します。

    これにもやり方がいくつかあるようですが、このブログでも紹介したCodeKit」などのソフトを使うのが簡単そうです。後は、作ったCSSを通常通りリンクすれば、これまで通り使うことができます。CSSを変えたいときは少し面倒ですが、lessをいったん変更した後、コンパイルをしてCSSをアップロードし直すという作業になります。

    他の方法との違い

    冒頭で紹介したとおり、CSSのメタ言語には現在この「less」の他に「sass」や「scss」といった方法があるようで、どれが主流というわけでもないようです。lessはシンプルに記述できるが、機能が少ないというレビューもあるようで、物足りなくなったりする可能性があります。

    他の方法とも比べて、最良方法を選択できると良さそうです。また、学習が進んだら記事を書こうと思います。