HTMLの最近のブログ記事

前回のエントリーで、HTML5やCSS3のごく簡単なおさらいや、それらを使用した"次世代の可能性"を感じるwebサイトの事例を紹介させてもらいました。

今回のエントリーは"CSS3つながり"で、当バージョンから新たに導入された仕様「Webフォント」について、自分の備忘録的な意味合いが大きいのですが、まとめてみました。

ここ2～3年の間で、HTML5／CSS3に関連するブログ記事のエントリーやセミナーなども増えて、これらのキーワードもすっかり定着してきました。
このブログをご覧いただいている方も、各々抱えられているweb系の業務案件で、大なり小なりHTML5やCSS3などの技術を取り入れている方、その可能性を体験している方がほとんどではないでしょうか？

今回のエントリーでは、HTML5／CSS3／jQueryなどを組み合わせることによってどんどん変化していっている"webサイトの表現"について、事例をご紹介したいと思いますが、まず始めに少しだけおさらいを書かせてもらいます。

今年の3月、米Googleが、Googleの検索結果や広告を友達間でオススメ＆共有できる「＋1」ボタンを実装しました。

この機能は、検索結果の中で、自分が気に入った情報や、友達にオススメしたい情報があった時にこのボタンを押すと、Googleアカウントでつながりのあるユーザー間でその情報を共有することができる機能です。Facebookの「いいね！」ボタンと似てますね。
（英語版「Google.com」のみの限定公開で、日本語版は未実装。）

［参考記事］
グーグル、検索結果や広告をオススメ＆共有できる　「＋1」ボタンを提供：MarkeZine（マーケジン）

その「＋1」ボタンを、ブログやWebサイトに設置できるよう一般公開されたので、弊社で運営しているブログ（当Tips*Blog、マーケティングブログ「市場のお手入れ」、キュレーションブログ「Social Media Curator」）にも設置してみました。

以下に、設置方法をまとめたので、ご参考にしてみてください。
とっても簡単ですよ。

先週4月21日（木）に1周年を迎えたFacebookの代表的なプラグイン「いいね！」ボタン。
ここ数カ月で、Webサイトやブログ上でこのようなソーシャル・プラグインを見る機会がほんとに増えましたよね。

そして、「いいね！」ボタンの兄弟分として新しいプラグイン「Send」ボタン（和名：「送信」ボタン）が実装されたので、このブログにも設置してみました。
「いいね！」ボタンは、クリックすることでFacebook上の友達全員のニュースフィード上に表示されるのに対して、
「Send」ボタンは、Facebook上の友達、Facebookで自分が参加しているグループ、任意のEメールアドレスなど、ある特定の相手に対して、コメント付きで情報を送信することができる機能です。

Facebook上の友達に「Send」すると、
↓このようにFacebook上のメール機能で届く。


自分が参加しているグループに「Send」すると、
↓このようにグループのウォールに表示。


任意のEメールアドレスに「Send」すると、
↓このようなメールが届く。



家族、友達、同僚など、つながりのある全ての人たちに対して情報を表示するのではなく、必要がある人たちの間だけで情報を共有することができる（必要のない人たちに無駄な情報を流さなくて済む）。しかも、URLをコピー→メーラーを立ち上げてペースト、という所作がなくとも、簡易メーラーとして手軽に利用することができるわけですね。これは便利です。

今回の記事では、この「Send」ボタンの設置方法をご説明します。