早速ブログに Send to Kindle ボタンを導入してみたのだが・・・

先ほど、TechCrunchでこんな記事を発見。 http://jp.techcrunch.com/2013/03/20/20130319amazon-launches-send-to-kindle-button-for-web-developers-wordpress-blogs/
Amazonが[Send to Kindle](コンテンツをKindleへ送る)ボタンをローンチ
ということで早速試してみた。 がしかし!残念な状況であった。まとめると、 * 設置は、OGP設定しつつFacebookボタンを導入するよりもちょっとだけ難しい * 肝心のボタンが日本のAmazonのKindleアカウントにはまだ未対応であった(涙) * 日本Amazonの対応待ってる! ### 設置方法 [Amazon.com: Send to Kindle Button](http://www.amazon.com/gp/sendtokindle/developers/button) のページで以下の内容を設定して、ブログのテンプレートに設置します。 #### 1.ボタンのスタイルを決める ![](http://www.kaoritter.com/2013/03/20/buttonstyle.png) 私はこんな設定にしました。
ボタン内のテキストは、"Send to Kindle"。
フォントは、Verdana。
アイコンの色は、Dark。デフォルトはLightの白でしたが、やっぱり黒のがKindleっぽいね。
#### 2.記事タイトル、著者、発行日を指定 ![](http://www.kaoritter.com/2013/03/20/mark.png) これらの情報の収集元を、Open Graph/scheme.org/hNewsの3種類のマークアップから選べます。ページのHTML内にどういうマークアップで、タイトル/著者情報/発行日を書いておくかってことですね。 わたしは、schema.orgにしました。詳細は次項。 #### 3.本文箇所を指定 ![](http://www.kaoritter.com/2013/03/20/markup.png) こちらは、scheme.org/hNews/Custom CSSの3種類のマークアップから選べます。ページのマークアップがscheme.org形式にも、hNews形式にもなっていない場合、または記事が複数ページにまたがる場合には、Custom CSSで指定可能だそうです。 こちらもわたしは、schema.orgの形式で指定。ざっくり言うと、itempropというアトリビュートを使って、そのタグのコンテンツは何を表しているかを指定する形式です。 Kindleで利用する部分だけ抜き出すと、こんなマークアップになります。

<h1 itemprop="name">Kindles are Fantastic</h1>
<h2>By <span itemprop="author">Johannes Gutenberg</span></h2>
<h2><span itemprop="datePublished">2007-11-19</span></h2>
<div itemprop="articleBody">
  <p>I am of the humble opinion the Kindle is the best e-reader available.</p>
</div>
詳細は、[Getting Started - schema.org](http://www.schema.org/docs/gs.html#microdata_itemprop) の公式情報をご参照くださいませ。 MTのRainierというテンプレートは、最初からこのscheme.orgの形式のマークアップがされていたので、とっても楽ちんでした。 :) セマンティックなマークアップになっていないブログテンプレートの場合は、ここらへんの調整が一番のハードルなんじゃないかなあと思います。 #### 4.Kindleで定期購読マガジンを発行している人用 ![](http://www.kaoritter.com/2013/03/20/subscription.png) お次の設定は、Kindleで定期購読のマガジンを発行している人向けの設定ですが、そんなのないので割愛。ちなみにココを設定しておくとKindleボタンを押した方に、購読をおすすめしてくれるみたいです。 #### 5.コードをブログテンプレに設置 ![](http://www.kaoritter.com/2013/03/20/code.png) 左の黄色いボタンでGENERATEするとコードが発行されます。 STEP1の方のJSのコードは、ご自身のブログテンプレートのbodyタグ直前に設置。
STEP2のdivタグはボタンを表示したいところに設置すれば完成。 ### おまたせしました、実際のボタンはこちら
Send to Kindle
ちなみに記事タイトル直下にも入ってます。 さてこのボタンを押すとですね!なんと!おどろき! ・・・ と言いたいところですが、私のPaperwhiteもiPhoneも日本AmazonのKindleアカウントとして連携していないので、サポートデバイスがないと言われてしまいました・・・。残念。日本Amazonの対応、待ってる!!

前の記事へ

MongoDBのチュートリアルの最後に、おお!って思った

次の記事へ

一つ大人になったけど、大人気ない黒猫ネイルにしてみたよ