「あとで読む」Pocketを登録してみた＆設置してみた

PHP
2015.02.10
この記事は約10分で読めます。

「あ、このページ、後で読もうっと(^-^)o」

というとき。

普段からChromeを使っているので、とりあえずスマートフォンでブックマーク→自宅PCのChromeからモバイルのブックマークを開いて→さっき登録したサイトを表示…とやっていたのですが…。

ページを登録して「あとで読む」サービス「Pocket」というのがあるようなので、登録してみました。

Pocketに登録してみたキッカケ

そもそも「Pocket」に興味を持ったのが、こちらのページ。

キャリコ
 
STINGER5 の記事公開日の後ろに「 あとで読む 」の Pocket リンクを挿入する方法
http://calico.xyz/2014/12/12/pocket-3/
さて、本日はキャリコ初のリクエストにお応えする内容です。今までは記事の内容でここまでは出来たんだけどここはどうすればいいの？っていう質問を Twitter でちょいちょい受けてましたが、今回はストレートにブログで書いてほしいとリクエストいただいたのでラテにお願いします。それじゃあ、よろしくね♪

STINGER5のカスタマイズ記事を沢山扱っていて、ここのところ参考にさせていただいていたサイトさんです。

このページを見て自分も「あとで読む」ボタンを設置してみたいと思ったのと、そもそも普段「あとで読む」をスムーズにできるサービスや機能が無いかなぁと思っていたので良い機会でした。

さっそく登録

Pocketのサイトから登録します。

「Google+アカウント」を持っていれば、連携させてログインすることもできるようです。

メールアドレスで登録する場合、「メールで登録」を押して、氏名やメールアドレスを入力します。

getpocket.com
 
Pocket
https://getpocket.com
When you find something you want to view later, put it in Pocket.

pocket-top

自分の場合、見ていたキャリコさんのPocketリンク設置の記事にある「あとで読む」をクリックして、

read-it-later

メールアドレスでPocketに登録して、

pocket-login

そのまま「あとで読む」に登録されました。

pocket-read-it-later

Chrome拡張機能

PCのブラウザとして「Chrome」を使っている場合、拡張機能で見ているページをすぐに「あとで見る」に登録する「Save to Pocket」というのがあります。

chrome-ext-save-to-pocket

「Save to Pocket」をインストールすると、Chromeの右上に「Pocket」のアイコンが表示され、「あとで読みたい」と思ったページでクリックすると、直ちに登録してくれます。

chrome-pocket

既に登録されているページの場合、アイコンが赤くなっているので分かります。（登録直後に赤くなるだけでした(^-^;）

Androidの「Pocket」アプリ

Android、iOS向けにアプリがあります。

Pocket
 
Pocket: Android
https://getpocket.com/android/?ep=1
Android 向け Pocket Android デバイスでリストを閲覧しましょう。 Google Play から Pocket アプリを無料でダウンロードできます。

同じアカウントを登録しておくことで、「あとで読む」を共有できます。

外ではスマートフォンで「あとで読む」登録。

休憩時間にはタブレットで「あとで読む」を開く。

家に帰ったらのんびり「あとで読む」を開く。

そんな使い方が出来ます。

 

さて、Androidの「Pocket」をインストールすると、「共有…」メニューに「Pocket」が表示されます。

chrome-menu

「Pocket」を選べば、すぐに「あとで読む」に登録されます。

share-pocket

今まで「共有…」メニューをあまり使っていなかったので知りませんでしたが、最後に使った「共有」のアイコンが表示されるので、次からはそのアイコンを押すだけで「あとで読む」に登録できます。

chrome-share-icon

アプリ「Pocket」を起動すれば、「あとで見る」に登録してある一覧が表示されます。

android-pocket

STINGER5の記事に「あとで読む」を付けてみる

STINGER5の記事タイトルのところに、「あとで読む」ボタンをつけてみました。

popozure-later

キャリコ
 
STINGER5 の記事公開日の後ろに「 あとで読む 」の Pocket リンクを挿入する方法
http://calico.xyz/2014/12/12/pocket-3/
さて、本日はキャリコ初のリクエストにお応えする内容です。今までは記事の内容でここまでは出来たんだけどここはどうすればいいの？っていう質問を Twitter でちょいちょい受けてましたが、今回はストレートにブログで書いてほしいとリクエストいただいたのでラテにお願いします。それじゃあ、よろしくね♪
ガジェニュー
 
【STINGER5カスタマイズ】日付・更新日の横にPoketの後で読むボタンを追加 | ガジ...
http://smart-phone.783783783.com/2014/12/11/stinger5-customize-poket/
今回も、STINGER5のカスタマイズ記事です。 普段スマホでネットサーフィンをしていて、記事の上の方に「Poket」の後で読むボタンを設置しているブログをチラホラと見かけました。

参考にしたキャリコさんのところと同じく、「single.php」の更新日を表示している辺りに追加します。

[2015/11/02追記]※「Pocket」のカウントの取得にはWordPressプラグイン「SNS Cache Count」を利用しています。こちらのプラグインを有効にするとカウントも表示されます。

 <div class="blogbox">
<p><span class="kdate"><i class="fa fa-calendar"></i> 
<time class="entry-date" datetime="<?php the_time('c') ;?>">
<?php the_time('Y/m/d') ;?>
</time>
 
<?php if ($mtime = get_mtime('Y/m/d')) echo ' <i class="fa fa-repeat"></i>  ' , $mtime; ?>
</span> </p>
</div>
 <div class="blogbox">
<p><span class="kdate"><i class="fa fa-calendar"></i> 
<time class="entry-date" datetime="<?php the_time('c') ;?>">
<?php the_time('Y/m/d') ;?>
</time>
 
<?php if ($mtime = get_mtime('Y/m/d')) echo ' <i class="fa fa-repeat"></i>  ' , $mtime; ?>
 
<span style="color:#ee4056;"> <i class="fa fa-check-square"></i></span>
<a href='http://getpocket.com/edit?url=<?php the_permalink(); ?>&title=<?php echo get_the_title(); ?>' onclick="window.open(this.href, '', 'height=300, width=600, menubar=no, toolbar=no, scrollbars=yes'); return false;">あとで読む</a><?php if(function_exists('get_scc_pocket')) echo '('.get_scc_pocket().')'; ?>
</span></p>
</div>

ちゃんと登録もできました。

popozure-read-it-later

FontAwesomeが有効ならPocketアイコンが使えます

[2015/11/02追記]

STINGER5では「FontAwesome 4.0.3」というウェブフォントが使用出来るように設定されています。

具体的には header.php に指定があります。

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

記事を投稿した頃にはpocketのブランドアイコンが無かったため、参考にしたキャリコさんのところと同じく似たアイコン「check-square」を使用していました。

「FontAwesome 4.4」で「Amazon」や「pocket」などのアイコンが追加されているので、FontAwesome 4.4以降を指定している場合、pocketのブランドアイコンで表示させることができます。

header.phpにあるFontAwesomeの指定がを、4.4に変更します。（子テーマを作っている方は、そちらで修正することを推奨します。）

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

上の single.php の修正例の「<i class=”fa fa-check-square”></i>」となっている部分を、

&lt;span style="color:#ee4056;"&gt;&amp;nbsp;&lt;i class="fa fa-check-square"&gt;&lt;/i&gt;&lt;/span&gt;
&lt;a href='http://getpocket.com/edit?url=&lt;?php the_permalink(); ?&gt;&amp;title=&lt;?php echo get_the_title(); ?&gt;' onclick="window.open(this.href, '', 'height=300, width=600, menubar=no, toolbar=no, scrollbars=yes'); return false;"&gt;あとで読む&lt;/a&gt;&lt;?php if(function_exists('get_scc_pocket')) echo '('.get_scc_pocket().')'; ?&gt;

「<i class=”fa fa-get-pocket”></i>」に変更します。

&lt;span style="color:#ee4056;"&gt;&amp;nbsp;&lt;i class="fa fa-get-pocket"&gt;&lt;/i&gt;&lt;/span&gt;
&lt;a href='http://getpocket.com/edit?url=&lt;?php the_permalink(); ?&gt;&amp;title=&lt;?php echo get_the_title(); ?&gt;' onclick="window.open(this.href, '', 'height=300, width=600, menubar=no, toolbar=no, scrollbars=yes'); return false;"&gt;あとで読む&lt;/a&gt;&lt;?php if(function_exists('get_scc_pocket')) echo '('.get_scc_pocket().')'; ?&gt;

 

これで、さらにそれっぽくなります。

pocket-read-it-later

まとめ

今までは「ちょい読みしたい」「あとで読みたい」というものもブックマークを使っていました。

基本的にブックマークには「困った時の参考にしたい」ものなどを登録しているので、「ちょい読み」したいものまで登録していると、ごちゃごちゃしてきてしまいます。

Pocketにはタグ機能もあるので、また読みたくなりそうなものには、タグを付けておくと探しやすくなります。

いざというときのためにしっかり登録するブックマークと、「あ、あとで読もう」と気軽に登録するPocketで上手く使い分けられると便利そうです。

 

この記事で追加したとおり、投稿日のところの「あとで読む」からPocket登録と、このページを「あとで読む」に登録できます。（下のシェアボタンからも登録できます。）

どんな動作をするか確認がてら登録していただけると幸いです。

コメント

  1. 名前:でーさん : 投稿日：2015/11/02(月) 16:12:38 ID：gzOTQzMDE

    昨日は追記のご連絡ありがとうございました。早速、追記された記事を拝見し header.php の記述を 4.4.0 のものに修正し、 single.php で「<i class=”fa fa-check-square”></i>」となっている部分を「<i class=”fa fa-get-pocket”></i>」に変更したのですが、私の環境ではフォントが表示されませんでした。取り急ぎ、報告までご連絡させていただきました。

    返信
    • 名前:ぽぽろん : 投稿日：2015/11/02(月) 19:09:55 ID：Q0NDY3MTE

      でーさんさん、コメントありがとうございます。

      FontAwesome4.4の記述はちゃんとされていたようですが、何かかしらのプラグインでFontAwesome4.1.0を使用しているらしく、そちらに上書きされている状態のようです。

      どうせならpocketのアイコンの方が「それっぽい」ので、そのプラグインのバージョンアップか、定義を書き換えて治ると良いですね(^-^;

      返信
  2. 名前:STINGER5 投稿日付の右側に「あとで読む」を設置する | でーさん : 投稿日：2015/11/01(日) 23:50:23 ID：kyNDMwNDY

    […] 「あとで読む」Pocketを登録してみた＆設置してみた | ぽぽづれ。 STINGER5 の記事公開日の後ろに「 あとで読む 」の Pocket リンクを挿入する方法 | キャリコ […]

    返信
タイトルとURLをコピーしました