Amazon よりウェブサイト用の「Send to Kindle ボタン」が公開された。
早速、問い合わせをいただいたので、設置を試してみた。
WordPress 用にプラグインが用意されているのだが、試してみたところ、ウェブサイト上で生成をしてしまった方が手っ取り早かったので、こちらの方法をメモとして残す。
まず注意点だが、現時点では Amazon.co.jp のアカウントでは Kindle に送信をすることができないので、Amazon.com のアカウントが動作検証のために必要になる (まだ、用途が限られる)
僕はこの 2 つのアカウントの統合は行っていないので、以前に使用をしていた iPhone 4 を英語環境にし、Kindle アプリにて確認をしている。
以下は、Amazon.com: Send to Kindle Button にて設定を行う。
ボタンスタイルの指定
「Choose your button style」にあるプルダウンメニューとチェックボックスより任意の項目を選択することで見た目の指定を行う。
この投稿の下に表示をしていますが、以下の指定としている。
| Text | Kindle |
|---|---|
| Font | Sans Serif |
| Icon Color | Light |
| Icon Size | Small |
| Theme | Light |
| Border | チェック |
タイトル、作者、公開日時の指定
「How do you mark the title, author, and publication date on your pages ?」部分ですが、Facebook の Like Button や Like Box の設置をしていれば Open Graph protocol (OGP) の記述はあるかと思う。
このブログの場合も記述済みなので [Open Graph] を選択する。
ここで必要なものは以下の 3 つになる。
<meta property="og:title" content="<?php the_title(); ?> | <?php bloginfo('name'); ?>" />
<meta property="og:article:author" content="<?php the_author(); ?>" />
<meta property="og:article:published_time" content="<?php the_time(__('Y-m-d')) ?>" />
実際はもっと多くの OGP の記述があるが、ここでは割愛をする。
気になる方は HTML をご覧ください。
表示をさせるコンテンツの指定
「How do you mark the main body of content on your pages ?」の部分になる。
このブログは Wpshower の「Blogum」というテーマを使用しているが、コンテンツ部分の CSS セレクタが「post_content」で、その中に投稿のタイトルが含まれる構造となっており、うまく抽出をできなかった。
構造の変更をする余裕がないので [Custom CSS Selectors] の使用は見送り [schema.org] に準じて Microdata のプロパティの記述をする。
この部分のみで気持ちが悪いのだが、いずれ対応をするということにしたいと思う。
投稿であれば single.php、ページであれば page.php のコンテンツ表示部分を以下の様に「articleBody」の指定をすることにより抽出される。
<div itemprop="articleBody"><?php the_content(); ?></div>
Kindle ストアで定期刊行物の販売をしているかの指定
「Do you sell a periodicals subscription on Kindle ?」の部分だが、多くの方は当てはまらないと思うので [No] にて問題はないだろう。
ウェブサイトへの設置と動作の確認
以上で設定は終了となり [Generate widget code] をクリックし、コードを取得する。
「Step 1」を footer.php にある </body> タグの直前に記述する。
「Step 2」は表示をさせたい任意の位置に記述する。ずらずらと style があるので、カスタマイズも可能。
以下が表示結果になります。
最初は左側の設定画面が表示されるが、次回からは右側の画面が直接、表示される様になる。
この右側の画面にて [Send] をクリックすることで指定の Kindle デバイス、またはアプリに送信される。
受信をした Kindle アプリでの表示が以下になる。
CSS の問題かもしれないが、表示にズレが見られる。
今後、当然の様に設置されるボタンになった場合は、Kindle での表示確認も検証項目に含まれるかもしれない。
後ほど読むためのクリップとしての用途が多いかとは思うが、普段は Pocket を利用しているので、使い分けはどうなっていくか。
持ち歩いている Kindle は Paperwhite なので転送はしないだろうが、Fire 等のタブレット端末とは相性の良いボタンかと思う。