ウェブ進化のインフォグラフィック – The evolution of the web

Chrome の誕生3周年記念らしいのですが、
Google がブラウザ やJavaScript など、もろもろの進化の過程を表したインフォグラフィックを公開。

インフォグラフィック と表題されており、「HTML5だし!」と言われるとなぜか納得してしまう部分もありますが、
これもインフォグラフィックの一つとなると、今後、この手のものも色々でてくるんだろうなぁ。。

Google - The evolution of the web
» The evolution of the web – ウェブの進化

先日改めて公開された、GmailやGoogle calendar などをオフラインで利用可能なHTML5版のChrome アプリで、
ブラウザのキャッシュがストレージ変わり(?)になるような箇所を見て、進化の過程に改めて軽く感動も。

1996年にHTML5スタート
各ブラウザやToolTip をクリックすると、初代から現代までのバージョンや説明が表示されます。
HTML5 って2006年頃からだったんですね..。

The evolution of the webのMOZAIC
なにげに現在使っている中の一台のXP は、ちょっと様相が近かったりも..。

via: Google、Chrome立ち上げ3周年でHTML5のインフォグラフィックを公開 – ITmedia ニュース

Googleの+1ボタンにスニペットが追加。Microdataでサークルへの投稿も管理

昨日、なにかのサイトを見ていた際にいつも通り(?)にGoogleの+1ボタンを押すと、Google+ への投稿と思わしきコメント欄が表れ、
何かしらのプラグイン?と思い、ちょっといいなぁと思っていたところ、実際に機能の拡張があったみたいですね。

たしかに、今まで+1 ボタンを押してもSERP で表示されるほか、Google プロフィールページでしかとくに見たりすることがなかったですしね…。
※”Google” 自体がソーシャルネットワークとすると別?かも知れませんが..

Both sharing from +1 and inline annotations are rolling out fully over the next few days. To test these improvements right now, join our Platform Preview group.

Share bubble(sharebox?)というみたいで、今後ロールアウトされるらしいのですが、The Google+ Project(グループ)のPlatform Preview group に入ると先に使えるようになるそうで、
さっそく、そのGoogle グループに入ってみたところ、すぐに反映されて使えるようになりました。

Platform Preview group に入るとすぐに使えるように
※でも、昨日見たのはなんだったのか…

サイト管理者としては、+1 ボタンを押された際に表示される、「タイトル」、「説明文」、「イメージ(画像)」を、
Facebook のOpen Graph protocol ライクにMicrodata で設定できるそうです。

話はそれますが、 Microformats やYahoo! SearchMonkey のRDFaが、少し前にschema.org に統合され地味に嬉しかったのですが、

それまで補完という意味も含め、Microformats、RDFa、Microdata それぞれ同一ページに書いており、
同一ページでフォーマットを組み合わせて使用するのは避けたほうが良いというアナウンスがあり、そんなアレですけど一応、ちょいちょい修正中…。

Google +1ボタンのmicrodata でのタイトル、説明文、イメージ(画像)の指定方法

現状でMicrodata のitemscopeで指定できるitemtype は以下の4つみたいです。

  • Article
  • Local Business
  • Product
  • Other
1
2
3
4
5
<body itemscope itemtype="https://schema.org/Product">
  <h1 itemprop="name">タイトルです</h1>
  <img itemprop="image" src="image-url"></img>
  <p itemprop="description">説明文です。</p>
</body>

各指定についてはbody内の各タグに、Microdata で指定するのが推奨のようですが、
head内にmetaタグでのOpen Graph protocol の記述でも大丈夫みたいです。

もしかしたら、こちらで既に対応済みのサイトも多いかも知れませんね。
ちなみに、head内でmetaタグにitemprop を指定する方法でも可能らしく、初めて知りました。

1
2
3
<meta itemprop="name" content="Title Of Your +1 Content">
<meta itemprop="description" content="This would be a description of the content your users are +1ing">
<meta itemprop="image" content="images/cool-image.png">

その他、Microdata の指定がない場合、head内のtitle、description が利用され、画像は適切っぽいものを取得するようです。
また、それもない場合は、Google がページ内の適切なものを抜粋してくれるそうです。

詳細についてはこちらに説明があります。
» Adding the +1 Button – +1 Button API – Google Code

非同期での+1 ボタンコード作成ページに今回の拡張スニペットに追加するmicrodata のコードを書きだしてくれるものも設置されてました。
» plusone-button

Mac debut!

いよいよ先週末、”Mac”デビューしました。

Macbook Pro が新しくなり、Mac への買い替えを決め、
その当時から話題になっていた”Lion” がデフォルト搭載されるのを待って半年ほど。
※なぜLion のデフォルト搭載にこだわったのかはアレですけど…

その後、新しいAir の登場など、かなり迷う要素が多々有りましたが、
最終的にApple ストアのスタッフにアレコレ聞いたりして、”Macbook Pro 13inch (Core i5)” に決定。

Apple ストアスタッフ以外にも、いろいろとご意見いただいてありがとうございました。笑

大手量販店での購入も考えましたが、
“初”だったのでミーハー気分全開でApple Store(銀座)で購入。

いやはや、Air とはかなり迷いました。。
今後、主流はAir になっていくと思いますが、Mas初心者だし、ここはMacbook Pro かなぁと。
※ちなみにメモリは8GB に増設(8GBってどんなか使ってみたかった..)

もともと使っていたのは”VAIO”。

前職のころ、外回りメインでの利用が主目的だったので、
そこそこのスペックを考えると、現職での使用でかなりがんばってくれたと思います。笑

Macbook Pro 13inch (Core i5)を購入

ストアのスタッフに教えてもらったのですが、「開封の儀」というらしい。

Macbook Pro のアプリ一覧の画面

なんとも。。
まさか自分が”Mac” を選択するとは、数年前だったら選択肢にも入っていなかったはず…。

VAIOとMacbook Pro の比較

今までご苦労さまでしたVAIO。追々、いろいろとアンインストールして身軽にし、
また何かの時にはヨロシク。。

まだ2~3日ぐらいしか使っていませんが、
感想は、会社のPCもせめてキーボード だけでも現状でMac にしてしまおうかと考えてしまう感じです。

みんな「Mac になっちゃえばいいのに…」。笑

===================================================================
Mac の使い始めにとても参考になりました。

ひとりStartMac
https://www.ideaxidea.com/archives/category/apple_tools/startmac

===================================================================

mi でPHPモードを追加してみた。

mac をつい初めて、エディター関連がなにかないかともろもろ探してみたのですが、
個人的に気になったmi を使ってみることにしました。

まだ使い始めですが、これがなかなか。

現状ではあまりアレですが、既存の「モード」の中にPHP が無かったので探してみると、
下記のような記事が。
»» USSY'S – GADGETS

なんともありがたく、シンタックスハイライト的ものをなプラグインで追加ができるようでしたので、
さっそく追加してみました。

mi へのPHPプラグイン追加方法

mi > モード設定(画面右上リンゴマークの環境設定の欄) > モード設定フォルダを開く
「mi PHP MODE」をコピー。

上記でPHPモード が追加できましたが、ダウンロードファイルを開こうとすると、
「Stuffitアーカイブには対応していません 」とういうエラーメッセージ。

なにか開く方法はないかと探し見てると、以下の方法で解凍できました。
※あくまでも参考ということでどうぞ。

[Stuffit アーカイブを開けない時の対処方法]

1, “Zipファイル”のようなものみたいで、それを解凍(開く)する「Free StuffIt Expander」をダウンロード。
»» StuffIt® Downloads | File Compression Trial, Free Expander, Supports StuffIt and Zip Compression
※mac用を選択。Win用もあるみたいです。

2, “Macintosh: Learn more | Download the FREE StuffIt Expander Now”をクリック。
とくにメアドとか登録せず、”StuffIt Expander Only”を選択
※ご希望に応じて選択してください。

3, “StuffIt Expander 2011” ダウンロードを選択。
“StuffIt Expander 2011 Macintosh”をダウンロード。

Dreamweaver あったらいいなぁと思いますが、”.5″が気になるのでもう少しもろもろ試してみます。笑

P.S.
昨日よりMac を使い始めて、もろもろ設定中のため、その感動は改めて書きたいと思います。笑

AdWords商品情報表示オプションを試してみました

個人的に興味先行で気になっていたAdWords のProduct extensions(商品情報表示オプション) が、
いよいよ日本でも利用可能となり、ちょっと試してみました。

設定については、現状ではかなりシンプル。

事前にGoogle Merchant Center に登録を行っておく必要がありますが、AdWords アカウントにリンクしてあれば、
自動的に「広告設定オプション > 商品情報表示オプション」にマーチャントセンターのアカウントが表示されます。

表示させる商品については、マーチャントセンター内でなにかしらの調整が行えるようですが、
商品情報表示オプション を設定すると、関連した商品を自動的に表示してくれます。

設定後、説明ではおよそ12 時間ほどかかる場合があるとのことでしたが、
翌日確認した際にはすでに、プラスボックスが表示されていました。

実際のところ、どれだけのユーザーが商品情報表示オプションの「+」ボタンをクリックするかは、その他のSERP 上での変化と同様、ちょっと疑問は残りますが、
一見すると、サイトリンクも設定しているせいか、思ったよりは目につくように感じました。

AdWords商品情報表示オプションのテスト
※広告プレビューツール。会社のアカウントなので、一応(?)タイトルなどは消しています。

個人的にはできれば開いた状態で表示してくれたら…とも思います。笑

実際のところ、今日現在(2日目)でどのくらいクリックされているかというと…。

AdWords商品情報表示オプションの掲載結果

クリックしてくれてる!笑
※お見せするほどの件数や比較もなくて申し訳ないです。

ちなみに、

Google Merchant Center のアカウントに設定を追加すれば、特定のキーワードに対して表示する商品を調整することもできます。
Marchant Center アカウントで、商品情報表示オプションに使用する属性を更新する – AdWords ヘルプ

とのことで、表示させる商品情報など、マーチャントセンターへの登録feed へ属性を追加することで、変更・調整が可能のようです。

iPhone でも確認してみたのですが、スマートフォン では未だ、商品情報表示オプション の表示を確認できてません。

» Inside AdWords-Japan: 商品情報表示オプションで、もっとショッピングユーザーにアピール


20110819
Google ショッピングでは、商品画像が”展開”された状態で表示されてました。笑
GoogleショッピングでのAdWordsの商品情報表示オプションの表示のされ方

change_history