Skip to content
2014/02/21 / Javelina

Zootoolの代わりとなるオンラインブックマークツールを作ってみた

bookmarks_ss1

以前、GoogleブックマークからZootoolに乗り換えた。という記事でZootoolというオンラインブックマークサービスを紹介したことがあったのですが、使用開始してから一年とちょっとしか経っていないのに早くもサービスの終了が決定してしまいました。なんてこったい…

Googleブックマークに代わるオンラインブックマークツールとしてバリバリ現役で使っていたのでかなりショックでした。というか困る…!
ブックマークのサムネイル表示&pack分けがかなり重宝していたので、今更Googleブックマークには戻れません。急ぎ代替サービスを探すことに。

…結果から言うと、Zootoolに比較的似ているサービスはいくつかあったのですが、自分的必須要件を満たしてくれる代替サービスを見つけることはできませんでした。
 

私が個人的に重要視しているのは、

①サイトのスクリーンショットをサムネイルにできる
②フォルダのような階層ではなく、カテゴリ分けができる
③Firefoxのアドオンやブックマークレットでブックマークできる
④1クリック・2クリック程度で登録できる
⑤ソーシャルいらない。完全にプライベートにできる
⑥スマートホン(Android)からでも登録可能
 

この6点。⑥はZootoolでも実装されてませんでしたね。iPhoneアプリは用意されていましたが。
意外にも、②~⑥はともかく①をクリアするサービスが見つけられませんでした。(②や④を犠牲にすれば無いこともないのですが)多くのサービスは、単純な登録だけだと「サイト内の画像を拾ってきてサムネイルにする」という感じなんですよね…。

ちなみに試したサービスは、Kippt、Icebergs、Wookmark、Catchbox、Tizmos、Bookmax、おまけにEvernoteなどなど…。私のような条件に拘らない方は上記を試してみてもよいかもしれません。
 

結構本気でどうしようと悩んでいたのですが、ふと、WordPressの引用記事用のブックマークレット「Press This」と、同じくWordPressの「Webページのスクリーンショットを取得できるAPI」があったことを思い出しました。

この二つといくつかのプラグインを組み合わせれば割と簡単にブックマークサイトを作れるんじゃね?と思い立ち、結局WordPressを使って自作してみることに。
前置きが長くなりましたが、それで実際に作ってみたのが冒頭の画像のブックマークサイトです。
 

元にしているテーマは公式テーマのTwenty Fourteenです。骨組みはほぼいじっていないですね。
幅を100%にして、サイドバーをposition:fixedにしました。

肝心のブックマークの仕方ですが、ブックマークレット「Press This」で投稿ウィンドウを出すとタイトルにWebページタイトル、本文に

<p><a href="WebページのURL">Webページタイトル</a>.</p>

という形で入っているので、add_action(‘wp_insert_post’…)を用いて投稿時に本文から正規表現でurl部分を抽出し、カスタムフィールドに保存します。また上記本文の後に何か記述した場合、それも抽出してメモ書きとしてカスタムフィールドに保存します。(urlの取得に$_GET[‘u’]ではなく正規表現を使っているのはスマホの共有にも対応する為だったりします)

通常Press Thisは投稿後勝手にウィンドウは閉じませんが、そのあたりもカスタマイズして投稿終了後1秒で自動的に閉じるようにしています。
 

ブックマーク一覧画面は、上記にて保存した情報と、urlを元にWordPressのAPIで取得したスクリーンショットサムネイルをループ内に並べるだけなので非常に簡単に作られています。
スクリーンショットのAPIはこういうやつですね

https://s-ssl.wordpress.com/mshots/v1/WebページのURL?w=幅&h=高さ

ただしこのAPIを用いたサムネイルの取得は画像ファイルを直接ブックマークした場合には対応できないので、urlから画像ファイルかWebページかを判別して、画像ファイルだった場合はGDを利用したリサイズクラスを使用してサムネイルサイズにリサイズ&トリミングしています。

 
また、Webページだった場合はさらにYouTubeかどうかも判別して、抜き取った動画のIDから画像を取得し、上記の方法でサムネイル化。

http://i.ytimg.com/vi/動画のid/hqdefault.jpg

↑これを適当なディレクトリに保存した上でリサイズクラスに投げる

 
もしPress Thisの画面で画像を指定していた場合(Press ThisはZootoolのようにサイトから画像を引っ張ってきてくれて、その中から選んで本文に挿入することができる)は、そちらを優先するようにしています。やはり上記クラスを使いつつ一旦保存→リサイズ&トリミングという形にします。

 
一覧表示画面でサムネイルをクリックするとブックマーク先へ、”Edit”をクリックすると詳細/編集画面がthickboxで開きます。WordPressの管理画面に入らずにタイトル・URL・カテゴリー・タグ・メモ書きを確認・編集することができます。(この画面はsingle.phpです)

 
YouTubeの場合は、サムネイルクリックでその場で再生可能。

詳細/編集画面では小サイズの埋め込み動画にしています。

 
そしてブックマーク一覧ページと詳細/編集画面の”Delete”ボタンをクリックすると、管理画面を経由せずにブックマークを削除することができます。

記事を削除するリンクの取得

if (current_user_can('edit_post', $post->ID)){
	return get_delete_post_link($post->ID);
}

 
こんな感じ。
Zootoolからのブックマークの移行は、エクスポートしたファイル(html形式)をWordPressのインポート用xmlに整形して行いました。

実際数日使ってみましたが、割と素直に使えています。
最初は物は試し、というだけでしたが自分だけで利用する分にはこれで十分かも?という気がしてきました。

 
ついでに…。スマートホン(Android)からブックマークする場合は、共有メニューからWordPressアプリを呼び出して行います。普段別のWordPressブログをスマホから引用投稿することはまず無いので、今回のブックマークブログを選択して「常にこの設定を使用」にチェックを入れておきます。

メモ書きを加える場合はPress This同様本文のリンクの下に書き加えてもよいのですが、スマホアプリ版の場合は「抜粋」を入力することができるので、抜粋欄にメモを書いた場合はそちらを優先して取り込みます。(というかPress Thisも抜粋欄を設けてくれればいいのに…)
下の例では本文欄でのメモ書きでテスト。

↓ブラウザでチェック

問題なさそうです。
Zootoolではこれができなかったので少し不便だったんですよね。
 

 
最後に。今回のブックマークサイトを作るために使用したプラグインやスクリプトなどです。
 

WordPress プラグイン

Frontend Editor

管理画面に入らずに直接記事内容を編集するために導入

My Category Order

カテゴリーを自由に並べ替える為に導入

Private Only

手っ取り早くプライベートブログにするために導入

Search Everything

サイト内検索の有効範囲を広げるために導入

Press-this auto close

Press Thisを投稿後に自動で閉じます
実際にはプラグインとしては使用せずコードを参考にしてfunctions.phpに書き直しています
プラグインをそのまま使うとオートクローズは3秒固定です
 

あとはRevision Controlやキャッシュ関係など。
 

使ってないけど使えるかもしれないプラグイン

Press This Reloaded

Press Thisをpost-new.php(通常の新規投稿画面)に置き換えてくれます
抜粋やカスタムフィールドの入力ももちろん可能に
Press Thisの特徴であるサイトの画像を取得する機能もそのまま使えます
ただし少し使ってみたところブックマークしたURLがリンクになったりならなかったりで正規表現に優しくないので保留
ポップアップサイズのお陰で1カラムになってしまいサクッと投稿ボタンが押せないのも微妙でした
※有効後にPress Thisブックマークレットを作り直す必要あり
 

スクリプト

Infinate Scroll jQuery Plugin

サイト内で自動ページ送りするために導入
ちなみに1ページ50件に設定しています

ThickBox 3.1

詳細/編集画面(single.php)をライトボックス的に開くために導入
古いライブラリなので本当は別の物を用意した方が良いのでしょうが…
ちなみにInfinate Scrollと併用すると2ページ目以降ThickBoxが働かなくなるのでこちらを参考に修正を加えて使用しています

 

PHPクラス

Resizeimg Class

画像をブックマークした際のサムネイル生成のために導入
GDによる画像のリサイズやトリミングを容易に行えるようにするPHPクラスです
ただしそのままでは拡張子.jpegに対応できない(.jpgはもちろん可能)ので少し修正を加えました
 

広告

2件のコメント

コメントする
  1. Arne / 3月 3 2014 7:59 pm

    Hi Javelina!

    I am not sure if I really got the content of your blog post 100% correct as I cannot read or speak Japanese (I only have a crude Google translation), but I would like to point you at Keeeb.com as an alternative to Zootool.

    Keeeb offers:
    1. Screenshots of the bookmarked pages
    2. Flat hierarchie of the pages
    3. A bookmarklet and browser extensions (Chrome, Firefox, Safari, Internet Explorer, Opera)
    4. Easy registration by email or with social login
    5. Keeeb is not a social bookmark tool. All bookmarks can be entirely privat (but public is possible as well)
    6. There is an app for Android (and for iOS)

    There are more advanced features as well. E.g. it is possible to boomark parts of websites only, as well as pictures or videos.

    Keeeb also released an import tool for existing zootool users: http://keeeb.com/info/en/zootool-import

    Maybe you want to take a look?!

    Kind regards
    Arne – Keeeb.com

  2. Javelina / 3月 4 2014 2:59 pm

    Hi Arne.
    Thanks for letting me know.
    It seems to match my needs. I’ll try it.

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。