Tumblr＋capture.tumblr.jsの組み合わせでFavorite WEBデザインGalleryを作ってみる

tumblrを使ってFavorite Galleryサイト制作のしかた

必要要件

Firefox

Tumblrアカウント

JSAction　アドオン

capture.tumblr.js ブラウザでキャプチャしてtumblrにpostするJSActionsスクリプト v.0.0.1b ? ku

自分のfavorite galleryサイトを作るのは、こちらのkuさんがリリースされているcapture.tumblr.js ブラウザでキャプチャしてtumblrにpostするJSActionsスクリプト v.0.0.1b ? kuを使って簡単にキャプチャを取得し、そのままtumblrにポストできる組み合わせで作ります。
※MACは、Flashでもキャプチャを撮ることができるみたいですが、Windowsに関しては、Flash部分のキャプチャは取得できません。

JSActionスクリプトの設置・設定

まずは、JSActionのアドオンを設置します。

[1]:
JSAReadMe - + HideAway Firefox +のサイトにてスクリプトセットをダウンロード（圧縮ファイルなので解凍）/ ファイル名：script_set.zip

[2]:
jsactions_3.0.0a4_2008051401.xpi（firefox3用です。ご自分の使っているバージョンにあったものを選択）をインストール。大抵、ダウンロードパターンになるので、とりあえずデスクトップにでも落とします。

[3]:

いつものごとく、ファイル管理しやすいように上図のfirefoxフォルダ＞変数フォルダの中に取得したファイル2つを移動。※gm_scriptフォルダじゃなくて、その上の階層のProfiles>変数フォルダの中なので間違えないように（別にどこでもいいのですが、後々のファイル管理を考えてベストだと思います。

[4]:
capture.tumblr.js ブラウザでキャプチャしてtumblrにpostするJSActionsスクリプト v.0.0.1b ? kuからスクリプトをリンク先のファイルを保存するで先ほどダウンロードしたscript_setフォルダの中のglobalフォルダの中に入れます。

JSActionスクリプトは、この中に収めることで使えるようになります。さまざまな種類があります。

[5]:
今度は、エディタでサイトでも説明されているように、以下の形式でtumblrのアカウントと登録メールアドレス、ログインパスワードを自分のものに書き換えて、globalフォルダと同じ階層にファイル名[capture.tumblr.conf]で保存します。

( {
    id: 'ku',
    email: "ku0522a@example.com",
    password: "********",
} ) ;

引用元: capture.tumblr.js ブラウザでキャプチャしてtumblrにpostするJSActionsスクリプト v.0.0.1b ? ku

[6]:
Firefoxを一旦終了して、xpiファイル(jsactions_3.0.0a4_2008051401.xpi)をfirefoxアイコンに重ねてインストールします。ダウンロードの時点でそのままインストールできるのであればそれにこしたことないです。

[7]:
Firefoxが起動したら、[ツール]>[アドオン]でJSAcitonでの設定ボタンをおして、script_setのファイルまでのパスを入力します。先ほどのscript＿setフォルダを選択すればOKです。

あとは、キャプチャ取りたい部分があれば右クリックでコンテキストメニューの中から[Action]>[Capture]を選択して、始点と終点の2か所をクリックするだけでキャプチャを取得し、tumblrにポストしてくれます。

詳しい使い方は、capture.tumblr.js ブラウザでキャプチャしてtumblrにpostするJSActionsスクリプト v.0.0.1b ? kuにて紹介されています。簡単で便利です。

今のところ、Firefox3でgreasemonkey,firebugもONにしていますが、問題なく使えています。

これで、自分専用のGalleryサイトを簡単に作ることができます。部分的なクリップ集にもいいかとも思います。

tumblrだけでなく、Flickrやはてなフォトライフへのポストも簡単にできるスクリプトも紹介されています。

reblogでカテゴライズしたGalleryサイトで情報共有

さて、最初にもいいましたが、tumblrの魅力の一つはreblogできるところです。こうしたをtumblrでGalleryサイト作る方が増えれば、サイトのキャプチャ、クリップ、共有、フォーカスを絞った情報収集作業が早く・容易になります。また、さまざまな志向でカテゴライズもしやすくなるとおもいます。カラー別でGalleryを作ってみたり、ブログのフッターやコメント部分などのデザインだけをクリップしたGalleryなどとさまざまなスクラップファイルを制制作・収集できると早くて、いつも新しい情報を共有できるのではないでしょうか？最近は、typo、Grid,BK,Grayといった感じでクリップしています。

もしよろしかったら、こちらのweb galleryにfollowください。

WEBデザイン　気ままにCLIP!CLIP!
こちらは、個人志向でのtumblrで女性のポートレートが多いです。

Tumblrには、Groupingといって一つのアカウントでいくつものtumblrサイト（アドレスを変えて作成可能）を作ることができます。試してみたのですが、アドオン・スクリプトを使ってのポストは、ひとつのtumblrアカウントでしかポストできないようです。。Groupでのtumblrページ作成では、作業がとても手間になってしまいます。ただ、マメに収集することでカテゴライズしたtumblr　Galleryをいくつも作ることができます。

参考にしたいデザインを探しているときに、集中的にクリップして、後から並べて比べてみてみるとインスピレーションに刺激を与え、アイデアを膨らませるのに効率的でいいかと思います。

Gallery制作の理由

自分でgalleryを作ろうと思ったのは、最近、国内Galleryでクオリティー高いサイトを見つけたからです。いくつもあるGalleryサイトの中でも自分の志向にマッチするクオリティ高いサイトデザインをクリップしているのをみて、いいなと。Galleryサイトもどれでも集めればいいというのではなく、どこかポリシーみたいなのがあるといいのかもしれないとも感じました。これからそういった傾向が強くなってくるのもあるようですし（志向を同じくする者同士が切磋琢磨して、新しい情報を生成する。また日々indexも更新されるみたいな。わかりやすく言えば、wikiを使って最新情報へと加筆編集できるみたいな動き、流れ）。

• Webデザインリンク集・ソーシャルブックマーク - straightline bookmark | Web design bookmarking
• Web Design Clip [WEBデザインのクリップ・リンク集]
• Web Design File | Web Design Inspiration

今回3サイトを見つけることができてよかったです。世界（観測範囲）が狭かったことを思い知らされました。また、国内の制作会社もいろいろとあって、そういったグループの動き（オリジナルブックマークシステム）もみれたりと。

ちょっとの時間でクリップ収集、羅列という作業が早くなります。Galleryという形にとらわれずに、違った使い方もたくさんできると思います。
興味のある方、試してみてください。

一応、ここでtumblrを使ってのGalleryサイトの作り方は終わりです。以下自分での拡張性などについてのメモ（どんどん話がそれます）。

plaggerを使ってMovabletypeにポスト

Movabletypeを使ってGalleryサイトを構築することも考えています。ただ、サムネイルを作成する手段がありませんでした？（いろいろと探してみましたが、見つけることができませんでした。）

自分の気に入ったサイトをdeliciousに特定タグをつけてストック収集（今使っているvimperatorで特定タグをつけて、deliciousにポストするキーバインドを作成して、簡単に収集）。

plaggerを使って、cronで毎朝、自分の特定タグのフィードを読ませてMTにポストする。

Filter::Thumbnaiを使ってURLからサムネイルを作成する。もしくは、mt.ttをいじってHeartRails Capture | サイトのサムネイル、PDF の生成サービスが表示されるようにする。

Widget::Delicious,Filter::Delicious,Widget::HatenaBookmarkUsersCountでサイトのブックマークカウント数とブックマークリンクをつけるようにする。

といった感じでほぼ自動で、サイトをクリップする作業とMTへアップする手間を減らして、先ほど紹介したWEBGalleryを構築することができます。

問題は、サムネイルサービスを利用や表示形式・大きさに制限があるということで、簡単にキャプチャできる方法を探す方向に変更。結果、今回のTumblr＋JSActionを使ってキャプチャを収集し、そこからフィードを読み込ませた方が手間をかけずに構築できるという結果になりました。

サーバサイドでサムネイルを作成する方法があるみたいなのですが、MAC環境でのサーバの方が手軽にできるみたいです。winだとphpを使ってサムネイルを生成できるソフト＋スクリプのパターンもいくつかアップされていますね。全くわからないのであきらめて、今回の方法を選択することにしました。こっちの方が部分的にフォーカスを当てたカテゴリ（フッターデザイン）も作れたりするのでいいかとも。

Live　Writeを使って再編集

Windowsであれば、Windows Live Writer Betaを使えば、MTにアップしたエントリーをダッシュボードにアクセスすることなく、再編集して再アップすることも簡単にできます。画面遷都なんかでファイル管理もしやすい？（というか表示速度の問題なんですけどね。）

Plagger+MT+Live　Writeを使っての情報整理術

今流行りの知的生産術ですか。今は自分のストックファイルをカテゴリをわけてMTにアップし、それをLiveWriterで読み込んで、もう一度サイトに訪れて重要部分をクリップして、意見やコメントをつけて再編集し、再アップしたりしています。

Tumblrでも同じことができますね。でもカテゴリ分け、検索機能を使ってストックファイルの検索ができないです。そんなことをいうとGmailのストレージを使ってのストックファイルの作成やNotebookなんかもいいですね。（タスクとして1日のルーチンの中にはめこむことを考えてみるとどれがいいんでしょうか？）

梅田 望夫著「ウェブ時代をゆく」P17にて

「あちら側」にノートを作って、プロセスを短縮させる・それを共有するといった事柄が書かれています。はてなグループを使ってますね。いいな。真似できたらと思って考えてみた結果、MTを使うとこうした方法もありか（情報共有、収集編集作業のワークフローを簡素化させる）と思いました。（ただ、情報のゴミを増やしているみたいな感じにも受け取られてしまいそうですが・・・・）

アイデアメモ

上記のワークフローは知的生産・情報整理術術みたいな感じのものですが、WEBサイト構築でのマーケティング展開で使うと考えた場合、検索エンジン対策でナレッジベースカテゴリを構築するとして、自サイトの扱うサービスでの関連キーワードを構築するのにもタスクとして課すことができていいかもしれません。最初は非公開設定にしておき、編集後に公開できるながれで。

ミツエーリンクスがマーケティング用語カテゴリを使って、WEBサイトを構築しているみたいなこともplagger+MT+LiveWriterを使って、日々のタスクとして課し、その場で編集し公開できるようにしておくみたいな。（あれ？おかしいかな）

新しいMTだったら、アップするエントリーからキーワード検索させてリンクを自動で生成させるみたいなことをできるのかなーとも。はてなダイアリー - キーワードのように、自サイトのカテゴリ（ナレッジベースフォルダ）から収集してテキストリンクに変換する。もしくは、機能アップした検索機能へのキーワードリンクを自動で生成する。それができそうな・・・・。できないか。できそうなMTタグの動きを探してみます。

終わり