勝屋さん、高須賀さんの AJITO に潜入してきた!
みなさん、こんにちは!
お元気ですか?僕は元気です。
勝屋さんと高須賀さんのオフィス AJITO に行ってきました!
先日、弊社の米良と東大の松尾さんと、勝屋さんにお仕事の相談を兼ねてオフィス AJITO に行ってきました!
左から、勝屋久さん(@katchamans、VentureBeat-Japan)、米良はるかさん、松尾豊さん、僕、高須賀宣さん (@ttakasuka、 id:ttakasuka) です。
オフィスに入ると、高須賀さんもいらっしゃってみんなでワイワイお話してきました!
それが、素晴らしい体験だったので、ブログに残していただきたいと思います。
勝屋さんのスケッチブック
お話する中で、勝屋さんのスケッチブックを見せてもらいました。
一見ふつうのスケッチブックなのですが…、開いてみると…?
携帯電話の写真ではきっと伝わりきらないかもしれないのですが、言葉と絵とそのコンテキストが色彩豊かに表現されています。
感情や物事を表現するときに、事実よりもコンテキストのほうが圧倒的に情報量が多く、そのすべてを表現するためにあえてこういう形で情報を残しているそうです。
ステキですねー。
一ページ一ページに、テーマがありその内容がダイナミックに伝わってきます
勝屋さんは、デジタルなものよりこういうアナログのもののほうが好きで、資料などもスケッチブックで作ったりするそうです。
一色一色、水彩のような柔らかいタッチから、クレヨンのような固いタッチまで様々な塗り分けがされていて、このスケッチブックの質感はソフトウェアではなかなか表現できないものだなあと思います。
一度、勝屋さんのプレゼンなどを見てみたいなあと思いましたヽ(´ー`)ノ
高須賀さんのお話
高須賀さんには、事業の相談に乗っていただき「65 億人が使うサービスを作っていくには、どのように考えていけば良いか」というアドバイスをいただきました。
その内容を忘れないように、ここに自分なりにまとめてみたいと思います。
不確実性こそが本質
イノベーションとは何か。
イノベーションを起こす事業を考えるうえで、「不確実性」について考えることが重要だそうです。
「不確実性」。世の中には、以下のような「不確実性」があります。
- 計算可能、予測可能な不確実性(計算することや、将来発生するであろう変化から、予測可能な不確実性)
- 計算すれば出来る、大企業の得意分野
- 不確実性は大きいが、方向性のハンドリング可能な不確実性
- ここがイノベーション。我々は、ここを目指すべき。
- 不確実性が大きすぎて、まったく未来が読めない不確実性
- 事業化不可能
自分たちである程度ハンドリング出来る「大きな不確実性」を持つ事業こそが、「イノベーション」を産むという話を伺いました。
オーマでも、もう少し事業の「不確実性」というものを考えてみようと思いました。
コンセプト、戦略、実行のパワーバランス
事業を行うときに、時間軸的には「コンセプト」→「戦略」→「実行」と進むわけですが。
一昔前は、以下のようにそのフェーズの重要度は後のフェーズに進むほど増えていきました。
「実行力」こそが最重要なパワーだったのですね。
ただ、今は以下のように「コンセプト」こそが重要な時代になっています。
それは、「コンセプト」を考えるということが、もっとも「不確実性」が高く、プロジェクトが進むほど「不確実性」が落ち着いていくからだそうです。
クリエイティブなアイデアが創造される場とはどんな場所?
現在、アイデアというものは以下のような場所から産まれている
このどちらもダメ。
クリエイティブな状態はその中間にあり、その中間を維持しつづけることで創造的なアイデアが生まれるそうです。
また、人間はクリエイティブじゃ無くなるほう無くなるほうへ行きたがるので、それを保ち続ける方法を考える必要があるそうです
アイデアよりも「アイデアの切り口」を見つける
ロジカルとケイオティックな中間を保つ一つの方法として、「アイデアの切り口」を見つけるという方法を教えていただきました。
ブレストのような会議では、アイデアを絞る方向絞る方向に向かいがちです。
なので、まずはブレストのようにアイデアを出し、その中からアイデアを絞る前に「それはどういう切り口から産まれたアイデアなのか」を考え「切り口」を見つけだし、「その切り口をもっと考えて見る」ということをやることで、ロジカルとケイオティックを混ぜて中間を保つことが出来るということでした。
急いでアイデアを絞るのではなく、いいアイデアが欲しいときこそ「急がば回れ」が大事ですね。
そのほかにも
松下時代 〜 Lunar までどんなことを考え、何を作ってきたかという話を実例で教えていただき、非常にエキサイティングで感動しました
ぜひ、時間があるときにもっとお話しを伺いしたいなあと思いました!
オフィスの紹介
勝屋さんや高須賀さんのお話も素晴らしかったのですが、オフィスもとても独創的で面白かったので紹介させていただきます
最後に
勝屋さん、高須賀さん、お忙しい中お時間をいただき本当にありがとうございました!
とっても楽しかったです!また、事業のアドバイスもいただき、とても勉強になりました!
最後に記念撮影をしました。
パシャッ
おまけ
最後の最後にプレゼントに、エベレスト登山で有名な栗木史多さん(http://kurikiyama.jp/)Tシャツと DVD をいただきました!
栗木さんは、高須賀さんの価値観に影響を与えた 2 人目の人らしく、今ではオフィスぐるみの付き合いをしているそうです。
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か
みなさん、こんにちは
お元気ですか?僕は元気です。
さて
最近よく、「いいね!」ボタンや「ミクシィチェック」ボタンによって、ウェブページを紹介し合う文化が少しずつ定着してきたなーと思います。
そんな中で、今後重要になってくるんじゃないかと思われる OGP (Open Graph Protocol)と言われる仕様があります。今日はそのことについて書いてみたいと思います。
OGP? おーじーぴー??とはなんでしょうか。
OGP とは
簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。
まあ、普通のウェブページは人間が読めばだいたい何のことが書いてあるか分かりますよね。
ですが、プログラムは人間ほど頭が良くないので、そのウェブページ内の文章だけではそのページが何のことについて書かれているページなのか正確に識別することが難しいのです。
なので、決まった OGP という書き方で HTML に情報を付加しておくことで、プログラムからも意味を理解しやすいウェブページを作っていこうってことです。
なぜ、これが重要か
「いいね!」ボタンや「チェック」ボタンで、ウェブページが紹介されるようになって、ウェブ中の様々なウェブページがどんどん SNS の中に流れ込んでくるようになっているんですね。
で、そうすると当然 SNS の中でそのページをどう表現すればいいか(リンクテキストはどうすべきか、画像はどうすべきか、どこに表示すべきか)という問題が出てきます。
そこで、最近さまざまな SNS サイトで使われるようになった仕様が OGP なんですね。
SNS だけでなく、これからは様々なサイトで「ウェブ上に書かれたモノ」と「人」をつないで行く時代になると思います。
OGP も SNS だけに留まらず、そのほかのサイトでもどんどん使われるようになっていくのだと思います。
具体的にはどう書くの?
さて、では具体的にどのように書くのか、その一例を見せたいと思います。
たとえば僕のブログのトップページについて OGP で記述すると、以下のようになります。
<!DOCTYPE html> <html xmlns:og="http://ogp.me/ns#"> <head> <title>IT戦記 - はてなダイアリー</title> <meta property="og:title" content="IT戦記"> <meta property="og:type" content="blog"> <meta property="og:description" content="IT戦士あまちゃんが、日々思ったことやウェブのことプログラミングのことを書いている日記的なブログです。"> <meta property="og:url" content="http://d.hatena.ne.jp/amachang/"> <meta property="og:image" content="http://www.st-hatena.com/users/am/amachang/user.jpg"> <meta property="og:site_name" content="はてなダイアリー"> <meta property="og:email" content="seijro@gmail.com"> <meta property="og:phone_number" content="080-1266-2159"> </head> <body>
簡単に説明すると
- og:type
- このウェブページが何のページであるかを記述(必須)
- og:title
- このウェブページが記述しているモノの名前(必須)
- og:image
- このウェブページが記述しているモノの画像(必須)
- og:url
- このウェブページの正式な URL(必須)
- og:description
- このウェブページの説明
- og:site_name
- このウェブページが何かのサイトに所属する場合そのサイト名
- og:email, og:phone_number
- 連絡先
詳細はThe Open Graph protocolに記述されています。
まあ、要はウェブページの情報を HTML 上の meta 要素として記述するんですね!簡単ですよね!
フェイスブックでの使われ方
ちょっと概要ばっかりだとピンとこないと思うので、具体的にフェイスブックでこの情報がどんな感じで使われるかを見てみましょう。
フェイスブックでは、以下の 4 つの箇所で OGP の情報を使っています。
- 「いいね!」した人のウォール(「いいね!」した瞬間)
- 「シェア」した人のウォール
- 「いいね!」した人のプロフィール
- 「いいね!」した人のウォール(「いいね!」した後日)
ひとつひとつ具体例を見てます。
「いいね!」した人のウォール(「いいね!」した瞬間)での OGP の使われ方
まずは、「いいね!」を押した人のウォールに書き込まれる文言についてです。
OGP の情報によって表示されるリンクテキストを変えることができます。
たとえば、ちょっとサンプルとして以下のようなウェブページを用意してみました。
http://callee.jp/ogp/003.html
このウェブページでは、まったく OGP を使っていません。
これを「いいね!」すると以下のようにウォールに流れます。
こんな感じでドメイン名のトップとタイトルがそれぞれリンクされます。(場合によっては、ドメイン名の変わりにトップページのタイトルが入ったりします。)
そこで、以下のようにウェブページ og:title と og:site_name という property 属性を持った meta 要素を追加してみます。
<!DOCTYPE html> <html xmlns:og="http://ogp.me/ns#"> <head> ... <meta property="og:title" content="タイトルだよ"> <meta property="og:site_name" content="サイト名だよ"> ... </head>
http://callee.jp/ogp/004.html
そうすると、以下のようにリンクテキストをカスタマイズすることが出来ます。
「シェア」した人のウォールでの OGP の使われ方
次は、リンクを「シェア」した瞬間にその人のウォールに表示される文言や画像についてです。
ここでも、 OGP の情報によってリンクテキストや画像や概要の文言を変えることができます。
たとえば、以下の URL を「いいね!」すると
http://callee.jp/ogp/007.html
以下の画像のような感じにウォールに表示されます。
「画像」と「ウェブページのタイトル」と「ドメイン」と、場合によっては、「概要」が挿入されていますね。
これを、以下のような meta 要素を挿入すると
<!DOCTYPE html> <html xmlns:og="http://ogp.me/ns#"> <head> ... <meta property="og:title" content="おーじーぴーのテスト"> <meta property="og:description" content="これは、あまちゃんが Open Graph Protocol の挙動を試すために用意したページです。"> <meta property="og:image" content="http://callee.jp/ogp/full_moon.jpg"> ... </head>
http://callee.jp/ogp/009.html
以下のように、「画像」と「ウェブページのタイトル」と「概要」をカスタマイズすることが出来ます。
音声や動画を添付する方法
また OGP の情報を使ってシェアされたリンクに音声や動画を添付することが出来ます。
以下は、音声を添付する例です。<!DOCTYPE html> <html xmlns:og="http://ogp.me/ns#"> <head> ... <meta property="og:audio" content="http://callee.jp/ogp/audio.mp3"> <meta property="og:audio:title" content="すごい歌"> <meta property="og:audio:artist" content="すごいバンド"> <meta property="og:audio:album" content="すごいアルバム"> <meta property="og:audio:type" content="application/mp3" /> ... </head>http://callee.jp/ogp/015.html
添付された音声は、以下のようにウォールに表示されます。
以下は、動画を添付する例です。<!DOCTYPE html> <html xmlns:og="http://ogp.me/ns#"> <head> ... <meta property="og:video" content="http://callee.jp/ogp/movie.flv"> <meta property="og:video:width" content="450"> <meta property="og:video:height" content="390"> <meta property="og:video:type" content="application/x-shockwave-flash" /> ... </head>ちなみに、動画を添付するには以下のフォームでサイトの審査の申請をする必要があるようです。
http://www.facebook.com/help/contact.php?show_form=video_embed_whitelist
「いいね!」した人のプロフィールでの OGP の使われ方
また、以下のように og:type と fb:admins が設定されていると、
<!DOCTYPE html> <html xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"> <head> ... <meta property="og:title" content="おーじーぴー・ザ・ムービー"> <meta property="og:type" content="movie"> <meta property="fb:admins" content="amachang"> <meta property="og:image" content="http://callee.jp/ogp/amachang.gif"> ... </head>
http://callee.jp/ogp/011.html
以下のような感じで og:type で指定した種類のモノとしてプロフィールに登録されます。
ここで、このリンクをクリックすると「いいね!」したウェブページに飛びます。
ただ、ちょっとややこしいんですが、 fb:admins で指定したフェイスブックのユーザーだけは違う挙動をします。
fb:admins で指定したユーザーは、そのページの管理人となります。
管理人は、次の項で示すようにそのページを「いいね!」した人のウォールにあとからお知らせを流すことが出来ます。
「いいね!」した人のウォール(「いいね!」した後日)での OGP の使われ方
前に述べたように、「いいね!」した人のウォールに後日お知らせを流すことが出来ます。
このお知らせは、管理ページ(ファンページに似たページ)から流すことが出来ます。
管理ページへは、前述した fb:admins で指定されたフェイスブックユーザーで、ウェブページの以下の部分をクリックすることで行くことができます。
管理ページは、以下のようにファンページのような感じです。
ただ、このファンページは管理者からしか見えないファンページで、「お知らせを流す用途」にだけ使います。
たとえば、以下のようにすると
以下のようにウォールにポストされます。
で、この名前の部分をクリックするとまたウェブページに人を呼び戻すことができます。(ただ、管理者がクリックした場合は、管理ページに飛ばされます。)
つまり、この機能を使うと外部サイトに内部ファンページと同等のユーザーの呼び戻し機能を付加することが出来るということです。
これは、非常に有益になってくると思います。重要ですよ!
あと、ひとつだけ注意すべきなのは og:type が article なものはこのお知らせの機能は使えません。
これは、 article は一時的なものでリアルなモノを指さない(ブログの記事など、それ自体がファンの対象ではない)からだそうです。
fb:admins の代わりに fb:app_id を使う
fb:admins を使って、手動でお知らせを流すことが出来るのは良い機能なのですが、一つのサイトにたくさんのウェブページがあって、たくさんの「いいね!」があった場合は一個一個のページに対して管理していくのは大変ですね。
そんな場合は、 fb:admins の代わりに fb:app_id を使うことで、プログラムからそれらの作業を自動化することが出来ます。
やり方としては、以下のページからお知らせ専用のフェイスブックアプリを作ります。
Facebook for Developers | F8 Facebook開発者向けカンファレンス: 5月1~2日
で、以下の ID を
以下のように fb:app_id として設定します。<!DOCTYPE html> <html xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"> <head> ... <meta property="og:title" content="おーじーぴー・ザ・ムービー2"> <meta property="og:type" content="movie"> <meta property="fb:app_id" content="168986543145706"> <meta property="og:image" content="http://callee.jp/ogp/amachang.gif"> ... </head>http://callee.jp/ogp/012.html
この際、以下のようにアプリケーションの設定でドメインと URL を指定しておく必要があります。
そうしたら、まず access_token (アプリケーション自身が、アプリケーションのリソースを自由に使うための認可を示す文字列)を取得します。
コマンドラインで以下のように叩きます。# まず、アプリケーションがアプリケーション自身のリソースにアクセスするための認可を取得する curl -F type=client_cred -F client_id=168986543145706 -F client_secret=アプリケーションの秘密鍵https://graph.facebook.com/oauth/access_token # 次に、 URL を指定してお知らせを流す curl -F "access_token=上のコマンドで取得できたaccess_token" -F message="Hey guys" -F id=http://callee.jp/ogp/012.html https://graph.facebook.com/feed
ミクシィやグリーでの使われ方
ミクシィやグリーでは、主に「いいね!」や「チェック」したときにストリームに流れる情報の以下の三つの指定に使われます。
プロフィールへのプッシュや、あとからお知らせを流したりする機能はないと思います(あったらすみません)
OGP のこれから
このように、大手 SNS がこぞって OGP を採用したことによって、今後ますますウェブページでの OGP の利用が進んでいくのだろうと思っています。
とくに、トラフィックの重要度が高いメディアや大手ブログでの OGP の利用が進むのではないでしょうか。(はてなダイアリーでも、早く対応してくれないとユーザーがスネちゃうぞ><)
また、様々なウェブページの OGP 利用を始めることで、その情報を活用するサイトも増えてくると思います。
まず、ソーシャルブックマークサイトや Twib などのように URL に紐づいた情報をたくさん持っているサイトでの活用が思い浮かびます。情報として URL を大量に持っていて、さらに OGP によって「URL が何を示すものか」が分かるようになる訳ですから「URL をブックマークするサイト」から「リアルオブジェクトをブックマークするサイト」に進化することが出来る訳ですね!
たとえば、はてなブックマークで考えてみると URL を基にした「人気エントリ」だけではなく、リアルオブジェクトを基にした「人気の本」とか「人気の映画」とか「人気のアスリート」とか「人気の人」とか「人気の場所」とか「人気の店」とか、色んな切り口で表現できるようになれるわけです。
なんかわくわくしますね!
と、いうわけで
今回は OGP (Open Graph Protocol)について紹介いたしました。
OGP、おもしろくないですか?
この記事を読んで興味を持った人は、ぜひ自分のウェブページに OGP の情報を付加してみませんか?
また、これから何か URL に紐づいたデータを扱うようなサービスを作ろうとしているなら、 OGP の情報を活用してみるとおもしろいのではないでしょうか?
ではではーヽ(´ー`)ノ
株式会社ゼロスタートコミュニケーションズに遊びに行ってきた!
みなさん、こんにちは
お元気ですか、僕はグミを食べてます。
さてさて、今日は、「ファセット検索」や「レコメンドエンジン」で有名な株式会社ゼロスタートコミュニケーションズ様のところに遊びに行ってきましたよ!
上から時計まわりに、社長の山崎さん、ディレクターの村山さん、広報兼デザイナーの栗鼠子さんのお出迎え!わいわい!
なんか、華やかで楽しそうな面々ですねえ(^▽^
山崎さんとは、エンジニアブレークスルーというイベントに参加させていただいたりして、その関係で仲良くさせてもらってます!
(第3回も、やるらしいのでこうご期待!)
栗鼠子さんも知る人ぞ知る広報さんですね。
それにしても、静かで綺麗なオフィスです。ものづくりの現場といった感じ
部屋の隅にサーバーラックがドーンと置かれているところも、やはり技術の会社って感じですね!
サーバーラックの撮影をしていると広報の人に背後から撮られました><はずかしい
そして、甘酒貰いました!あまちゃんだけに。
あまざけ
あまざけ
久し振りに飲みました。gokgok
そのあとは、 Ustream で、ゼロスタートの広報活動や新しい事業についてお話。
「検索」や「レコメンドエンジン」、「これからの新事業」など、技術者にとってかなり新しく面白いことに挑戦できる会社だなあと思いました。
広報活動のお話も、僕は畑違いだけど「Facebook ファンページの活用事例のお話」など非常に面白かったです。
これから、どんどん企業もソーシャルメディアで発信していくような時代になるのかもしれませんね。
そして、最後に社長机を見せてもらいました。
据え置き型の PC は無く Macbook Air をディスプレイに繋いで仕事をしているようです。
そのため、足元も机の上も非常にすっきりしています。
すっきり。
キーボードは無刻印 HHK !かっこいー!
ディスプレイはこれがおススメだそうです。(それにしても段ボールの人形がかわいい!)
そのあとも、いろいろくっちゃべってきました(^^;
はてなダイアリーにいいねボタンを置く方法
みなさん、こんにちは
お元気ですか、僕はアイスのあとラーメンを食べて気持ち悪い状態ですが元気です。
さてさて
最近は、フェイスブックやミクシィやツイッターなどの SNS で面白いと思ったモノを紹介し合う文化が定着してきているような気がします。
そんな中で、ウェブページを紹介するために使われるためにウェブページに置かれるものが「いいね!」ボタンだったり、「ツイート」ボタンだったりするわけですね。
というわけで、はてなダイアリーにそういったボタンを配置する方法を紹介したいと思います。
ここで紹介する方法は、ちゃんと理解して置きたい人向け、 XML や HTML を分かっている人向けとなります。
グーグルガジェットの作り方
グーグルガジェットとは、様々なページに貼り付けやすいように設計されたブログパーツみたいなもんです。
はてなダイアリーにはグーグルガジェット用の HTML を張り付けることが出来るので、グーグルガジェットとして様々なボタンを貼り付けようということですね。
まず、簡単な XML を書く
グーグルガジェットは、以下のような XML ファイルをどこか URL を持つ場所に公開すれば良いです。
<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="720" height="150" /> <Content type="html"><![CDATA[ ここにボタンの HTML を貼り付ける ]]></Content> </Module>
XML からグーグルガジェット用の HTML を取得する
たとえば、上の XML を http://callee.jp/socialbuttons/sample/000.xml に置いてみました。
これから HTML を作るには http://www.gmodules.com/ig/creator?url=http://callee.jp/socialbuttons/sample/000.xml にアクセスして、「Get the Code」を押します。そうすると HTML が表示されると思います。
具体的には以下のようなものです。
<script src="http://www.gmodules.com/ig/ifr?url=http://callee.jp/socialbuttons/sample/000.xml&synd=open&w=720&h=150&title=%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AA%E3%83%BC%E3%82%BD%E3%83%BC%E3%82%B7%E3%83%A3%E3%83%AB%E3%83%9C%E3%82%BF%E3%83%B3&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>
これをはてなダイアリーの日記に貼り付ければ良いのです。
これで
グーグルガジェットは作れるようになりましたね。
次は、具体的に様々なボタンをこのグーグルガジェットを書いてみましょう。
グーグルガジェットにツイッターのボタンを貼り付ける
ツイッター用のツイートボタンは、以下のページから作ることが出来ます。
http://twitter.com/goodies/tweetbutton
今回は以下のように作りました
水平方向にカウントを表示
とりあえずツイートテキストは適当に入れておきます(グーグルガジェットの場合、タイトルの自動取得はうまくいきません。)
とりあえず URL も適当に入れておきます(グーグルガジェット内の場合、 URL の自動取得はうまくいきません。)
言語は日本語で
一緒にツイッターユーザー名もツイートさせることもできますが、これは使いません(とくに理由はありません)
そうすると、 HTML が出来ますね。
で、貼り付けるとグーグルガジェットの XML は以下みたいな感じになります。
<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="720" height="150" /> <Content type="html"><![CDATA[ <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://d.hatena.ne.jp/amachang/" data-text="IT戦記" data-count="horizontal" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> ]]></Content> </Module>
次に、フェイスブックのボタンを貼り付ける
フェイスブックのいいね!ボタンは以下のページで作ることができます。
いいね!ボタン - ソーシャルプラグイン - ドキュメンテーション - 開発者向けFacebook
以下のように作ります
なるべく、シンプルなボタンになるようにしてみました。
「Get Code」ボタンを押して、上のほうの iframe って書いてあるテキストボックスから HTML をコピーします。
で、貼り付けるとグーグルガジェットの XML は以下みたいな感じになります。
<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="720" height="150" /> <Content type="html"><![CDATA[ <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fd.hatena.ne.jp%2Famachang%2F&layout=button_count&show_faces=false&width=110&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe> <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://d.hatena.ne.jp/amachang/" data-text="IT戦記" data-count="horizontal" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> ]]></Content> </Module>
次に、はてなブックマークのボタンを貼る
はてなブックマークのボタンは以下のページで作ることができます。
はてなブックマークボタンの作成・設置について - はてなブックマーク
以下のように作ってみました
適当に URL とタイトルを入れて、アイコンのタイプを選びます。
右側の HTML をグーグルガジェットの XML に貼り付けます。
で、貼り付けるとグーグルガジェットの XML は以下みたいな感じになります。
<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="720" height="150" /> <Content type="html"><![CDATA[ <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fd.hatena.ne.jp%2Famachang%2F&layout=button_count&show_faces=false&width=110&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe> <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://d.hatena.ne.jp/amachang/" data-text="IT戦記" data-count="horizontal" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> <a href="http://b.hatena.ne.jp/entry/http://d.hatena.ne.jp/amachang/" class="hatena-bookmark-button" data-hatena-bookmark-title="IT戦記" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> ]]></Content> </Module>
最後にミクシィイイネ!ボタンを貼り付ける
ミクシィのチェックボタンを作るのは結構めんどくさいです。
まず、 mixi Plugin の登録をする
以下のページに行きます
ソーシャル・ネットワーキング サービス [mixi(ミクシィ)]
新規サービスの追加を押します。
このように必要事項を埋めて、同意→作成と進みます
HTML を取得する
このページの一覧から、以下のようなページに進むことが出来ます
上記のように設定してタグを取得してみます
で、貼り付けるとグーグルガジェットの XML は以下みたいな感じになります。
<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="720" height="150" /> <Content type="html"><![CDATA[ <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fd.hatena.ne.jp%2Famachang%2F&layout=button_count&show_faces=false&width=110&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe> <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://d.hatena.ne.jp/amachang/" data-text="IT戦記" data-count="horizontal" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> <a href="http://b.hatena.ne.jp/entry/http://d.hatena.ne.jp/amachang/" class="hatena-bookmark-button" data-hatena-bookmark-title="IT戦記" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> <iframe scrolling="no" frameborder="0" allowTransparency="true" style="overflow:hidden; border:0; width:140px; height:20px" src="http://plugins.mixi.jp/favorite.pl?href=http%3A%2F%2Fd.hatena.ne.jp%2Famachang%2F&service_key=c5892ab99a0d2928d6383cfefd07fd5ae021920d&show_faces=false&width=140"></iframe> ]]></Content> </Module>
対象 URL、タイトルをカスタマイズ可能にする
とりあえずだいぶ出来てきましたが、この手順を毎回ブログを書くたびに行うのは面倒です。なので、 URL やタイトルなどはカスタマイズ可能にしておきましょう。
UserPref という仕組みを使う
さっきまでの URL に以下のように UserPref というタグを追加します。
<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="720" height="150" /> <UserPref name="articleUrl" datatype="string" display_name="記事の URL" required="true" /> <UserPref name="articleTitle" datatype="string" display_name="記事のタイトル" required="true" /> <Content type="html"><![CDATA[ ...省略 ]]></Content> </Module>
UserPref の値を HTML の中で使う
_IG_Prefs というオブジェクトを HTML の中の JavaScript から使うことが出来ます。
最終的には、以下のような感じになります。
<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="720" height="150" /> <UserPref name="articleUrl" datatype="string" display_name="記事の URL" required="true" /> <UserPref name="articleTitle" datatype="string" display_name="記事のタイトル" required="true" /> <Content type="html"><![CDATA[ <iframe id="facebook-like-for-article" src="" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe> <a id="twitter-share-for-article" href="http://twitter.com/share" class="twitter-share-button" data-url="" data-text="" data-count="horizontal" data-lang="ja">Tweet</a> <a id="hatena-bookmark-for-article" href="" class="hatena-bookmark-button" data-hatena-bookmark-title="" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a> <iframe id="mixi-check-for-article" scrolling="no" frameborder="0" allowTransparency="true" style="overflow:hidden; border:0; width:140px; height:20px" src="http://plugins.mixi.jp/favorite.pl?href=http%3A%2F%2Fd.hatena.ne.jp%2Famachang%2F&service_key=c5892ab99a0d2928d6383cfefd07fd5ae021920d&show_faces=false&width=140"></iframe> <script type="text/javascript"> /* Get UserPrefs Values */ var prefs = new _IG_Prefs(); var articleUrl = prefs.getString('articleUrl'); var articleTitle = prefs.getString('articleTitle'); /* Facebook Like for Article */ var facebookLikeForArticleEl = document.getElementById('facebook-like-for-article'); facebookLikeForArticleEl.src = 'http://www.facebook.com/plugins/like.php?href=' + encodeURIComponent(articleUrl) + '&layout=button_count&show_faces=true&width=110&action=like&colorscheme=light&height=21'; /* Twitter Share for Article */ var twitterShareForArticleEl = document.getElementById('twitter-share-for-article'); twitterShareForArticleEl.setAttribute('data-url', articleUrl); twitterShareForArticleEl.setAttribute('data-text', articleTitle); /* Hatena Bookmark for Article */ var hatenaBookmarkForArticleEl = document.getElementById('hatena-bookmark-for-article'); hatenaBookmarkForArticleEl.href = 'http://b.hatena.ne.jp/entry/' + articleUrl; hatenaBookmarkForArticleEl.setAttribute('data-hatena-bookmark-title', articleTitle); /* Mixi Check for Article */ var mixiCheckForArticleEl = document.getElementById('mixi-check-for-article'); mixiCheckForArticleEl.src = 'http://plugins.mixi.jp/favorite.pl?href=' + encodeURIComponent(articleUrl) + '&service_key=c5892ab99a0d2928d6383cfefd07fd5ae021920d&show_faces=false&width=140' </script> <!-- Twitter Share for Article --> <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> <!-- Hatena Bookmark for Article --> <script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> ]]></Content> </Module>
グーグルガジェット内のデザインを調整
次に、グーグルガジェット内のデザインを調整
以下のように構造化して、適当に CSS を書きます
<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="500" height="21" /> <UserPref name="articleUrl" datatype="string" display_name="記事の URL" required="true" default-value="http://d.hatena.ne.jp/"/> <UserPref name="articleTitle" datatype="string" display_name="記事のタイトル" required="true" default-value="title" /> <UserPref name="backgroundColor" datatype="string" display_name="背景色" required="true" default-value="#FFFFFF" /> <Content type="html"><![CDATA[ <style> body, html { overflow: hidden; margin: 0; } body { font-size: 14px; font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif; } ul { margin: 0; padding: 0; } li { display: inline; vertical-align: middle; margin: 0; padding: 0; list-style: none; } #mixi-check-for-article { margin: 0 0 0 5px; } </style> <ul> <li><iframe id="facebook-like-for-article" src="" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe></li> <li><a id="twitter-share-for-article" href="http://twitter.com/share" class="twitter-share-button" data-url="" data-text="" data-count="horizontal" data-lang="ja">Tweet</a></li> <li><a id="hatena-bookmark-for-article" href="" class="hatena-bookmark-button" data-hatena-bookmark-title="" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a></li> <li><iframe id="mixi-check-for-article" scrolling="no" frameborder="0" allowTransparency="true" style="overflow:hidden; border:0; width:140px; height:20px" src="http://plugins.mixi.jp/favorite.pl?href=http%3A%2F%2Fd.hatena.ne.jp%2Famachang%2F&service_key=c5892ab99a0d2928d6383cfefd07fd5ae021920d&show_faces=false&width=140"></iframe></li> </ul> <script type="text/javascript"> var prefs = new _IG_Prefs(); var articleUrl = prefs.getString('articleUrl'); var articleTitle = prefs.getString('articleTitle'); document.body.style.background = prefs.getString('backgroundColor'); /* Facebook Like for Article */ var facebookLikeForArticleEl = document.getElementById('facebook-like-for-article'); facebookLikeForArticleEl.src = 'http://www.facebook.com/plugins/like.php?href=' + encodeURIComponent(articleUrl) + '&layout=button_count&show_faces=true&width=110&action=like&colorscheme=light&height=21'; /* Twitter Share for Article */ var twitterShareForArticleEl = document.getElementById('twitter-share-for-article'); twitterShareForArticleEl.setAttribute('data-url', articleUrl); twitterShareForArticleEl.setAttribute('data-text', articleTitle); /* Hatena Bookmark for Article */ var hatenaBookmarkForArticleEl = document.getElementById('hatena-bookmark-for-article'); hatenaBookmarkForArticleEl.href = 'http://b.hatena.ne.jp/entry/' + articleUrl; hatenaBookmarkForArticleEl.setAttribute('data-hatena-bookmark-title', articleTitle); /* Mixi Check for Article */ var mixiCheckForArticleEl = document.getElementById('mixi-check-for-article'); mixiCheckForArticleEl.src = 'http://plugins.mixi.jp/favorite.pl?href=' + encodeURIComponent(articleUrl) + '&service_key=c5892ab99a0d2928d6383cfefd07fd5ae021920d&show_faces=false&width=140' </script> <!-- Twitter Share for Article --> <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> <!-- Hatena Bookmark for Article --> <script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> ]]></Content> </Module> 続けるにはENTERを押すかコマンドを入力してください <?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="500" height="21" /> <UserPref name="articleUrl" datatype="string" display_name="記事の URL" required="true" default-value="http://d.hatena.ne.jp/"/> <UserPref name="articleTitle" datatype="string" display_name="記事のタイトル" required="true" default-value="title" /> <UserPref name="backgroundColor" datatype="string" display_name="背景色" required="true" default-value="#F9F9F9" /> <Content type="html"><![CDATA[ <style> body, html { overflow: hidden; margin: 0; } body { font-size: 14px; font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif; } ul { margin: 0; padding: 0; } li { display: inline; vertical-align: middle; margin: 0; padding: 0; list-style: none; } #mixi-check-for-article { margin: 0 0 0 5px; } </style> <ul> <li><iframe id="facebook-like-for-article" src="" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe></li> <li><a id="twitter-share-for-article" target="_top" href="http://twitter.com/share" class="twitter-share-button" data-url="" data-text="" data-count="horizontal" data-lang="ja">Tweet</a></li> <li><a id="hatena-bookmark-for-article" target="_top" href="" class="hatena-bookmark-button" data-hatena-bookmark-title="" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a></li> <li><iframe id="mixi-check-for-article" scrolling="no" frameborder="0" allowTransparency="true" style="overflow:hidden; border:0; width:140px; height:20px" src="http://plugins.mixi.jp/favorite.pl?href=http%3A%2F%2Fd.hatena.ne.jp%2Famachang%2F&service_key=c5892ab99a0d2928d6383cfefd07fd5ae021920d&show_faces=false&width=140"></iframe></li> </ul> <script type="text/javascript"> var prefs = new _IG_Prefs(); var articleUrl = prefs.getString('articleUrl'); var articleTitle = prefs.getString('articleTitle'); document.body.style.background = prefs.getString('backgroundColor'); /* Facebook Like for Article */ var facebookLikeForArticleEl = document.getElementById('facebook-like-for-article'); facebookLikeForArticleEl.src = 'http://www.facebook.com/plugins/like.php?href=' + encodeURIComponent(articleUrl) + '&layout=button_count&show_faces=true&width=110&action=like&colorscheme=light&height=21'; /* Twitter Share for Article */ var twitterShareForArticleEl = document.getElementById('twitter-share-for-article'); twitterShareForArticleEl.setAttribute('data-url', articleUrl); twitterShareForArticleEl.setAttribute('data-text', articleTitle); /* Hatena Bookmark for Article */ var hatenaBookmarkForArticleEl = document.getElementById('hatena-bookmark-for-article'); hatenaBookmarkForArticleEl.href = 'http://b.hatena.ne.jp/entry/' + articleUrl; hatenaBookmarkForArticleEl.setAttribute('data-hatena-bookmark-title', articleTitle); /* Mixi Check for Article */ var mixiCheckForArticleEl = document.getElementById('mixi-check-for-article'); mixiCheckForArticleEl.src = 'http://plugins.mixi.jp/favorite.pl?href=' + encodeURIComponent(articleUrl) + '&service_key=c5892ab99a0d2928d6383cfefd07fd5ae021920d&show_faces=false&width=140' </script> <!-- Twitter Share for Article --> <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> <!-- Hatena Bookmark for Article --> <script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> ]]></Content> </Module>
背景の色は、 IT 戦記の背景色に合わせてみました。
実際に貼り付ける
次は実際に貼り付けてみましょう。ぺた
不要な部分を CSS で隠します
貼り付けられたグーグルガジェットは、以下のような HTML の構造をしています。
- table.gadget
- tbody
- tr
- td
- span.title
- a
- span.title
- td
- tr
- td
- tr
- td
- div
- iframe (これ以外は不要!!!)
- div
- td
- tr
- td
- a
- img
- a
- td
- span.powered
- a
- #text
- span.powered
- td
- tr
- tbody
貼り付ける HTML のそばに以下のような CSS を一緒に貼り付けます。
<style> /* IE 以外用 */ /* IE では、 nth-child が使えない */ table.gadget tr:nth-child(1), table.gadget tr:nth-child(2), table.gadget tr:nth-child(4) { display: none !important; } /* IE 用 */ /* IE ではテーブルはコンテンツがあればつぶれないので、不要なものを消して td の高さを 0px にし iframe だけ残す */ table.gadget td { height: 0px !important; padding: 0px !important; } table.gadget img, table.gadget span, table.gadget a, table.gadget a:hover { display: none; height: 0px !important; font-size: 0px !important; } /* 共通 */ table.gadget td, table.gadget tr, table.gadget iframe, table.gadget div ,table.gadget { padding: 0 !important; margin: 0 !important; border: 0 !important; } </style>
この CSS は大変便利なのではてなダイアリーの詳細デザイン設定で、ブログ全体の CSS として設定しておくのもいいかもしれません。
こんなめんどくさいことできない><!!!
そういう人のために、汎用化したものも作っておきました。
http://www.gmodules.com/ig/creator?url=http://callee.jp/socialbuttons/sample/complete.xml
ここで生成された HTML を、前述した以下の CSS と一緒に貼り付けてくださいね。
<style> /* IE 以外用 */ /* IE では、 nth-child が使えない */ table.gadget tr:nth-child(1), table.gadget tr:nth-child(2), table.gadget tr:nth-child(4) { display: none !important; } /* IE 用 */ /* IE ではテーブルはコンテンツがあればつぶれないので、不要なものを消して td の高さを 0px にし iframe だけ残す */ table.gadget td { height: 0px !important; padding: 0px !important; } table.gadget img, table.gadget span, table.gadget a, table.gadget a:hover { display: none; height: 0px !important; font-size: 0px !important; } /* 共通 */ table.gadget td, table.gadget tr, table.gadget iframe, table.gadget div ,table.gadget { padding: 0 !important; margin: 0 !important; border: 0 !important; } </style>
ちなみに僕のブログでは以下のようなの使ってます!
http://www.gmodules.com/ig/creator?url=http://callee.jp/socialbuttons/buttons.new.xml?v9
というわけで
みなさんも、はてなダイアリーにいいねボタン貼り付けてみませんか?
ではではーヽ(´ー`)ノ
*1:管理ページが記事ページとが同じオリジン(Same origin)であるため
29 才になりました。
みなさん、こんにちは
お元気ですか。僕は元気です。
今日は誕生日ということで、僕もとうとう 29 才になりました。
一世代というのが約 30 年を言うらしいので、一世代分くらい生きていることになります。
時間の経過というのは早いものですね。
20 代最後の一年精一杯頑張って、次の世代に残していけるような何かを作っていけたらなあと思います!
最後に
父母へ、産んでくれてありがとう。