yorutoko04-otsune

yorutoko04-otsune

プレゼンテーション

tumblr観測事例

Masafumi Otsune http://www.otsune.com/


夜のプロトコル NO_04

「We love twitter & tumblr.」

hashtag #yorutoko04

2009-07-17

http://www.yorutoko.com/2009/07/no_04we-love-tw.html

概要

頻繁に観測される代表的なtumblr中毒者の閲覧・投稿環境について

  • tumblelogウンチク最適化
  • 閲覧最適化
  • 投稿最適化
  • reBlog最適化

私のネット環境

Wi-Fiはあるけど有線LANでつないでる

同じ画像を何度も表示するtumblr Dashboardは、polipoを使うと高速化する

※ただし閲覧端末にdolipoなどを入れるよりも別サーバーに入れた方がより良い(はず)

ブラウザ

Firefox3.5

ネットウォッチブラウザ (tomblooがあるから)

Safari4.0.2

サブブラウザ

Remedieとかブラウザゲームとか

Opera

いわゆる肌色が多めに含まれる類いのサイト閲覧用

Mozilla Prism

http://prism.mozilla.com/

  • Firefoxのエンジンを使って特定サイトの専用ブラウザを作れる

つまり http://www.tumblr.com/dashboard 専用ブラウザ

http://subtech.g.hatena.ne.jp/otsune/20090611/prismTumblr に作り方を書いた

別プロファイルでFirefoxを同時起動してるのと大差のない使い方

Firefoxで他サイトを見るときに影響を分離できる

MiniBuffer+AutoPagerize+LDRize feat. reblog command + play on tumblrの三種の神器環境を体験するのにも向いている

メインブラウザにGreasemonkeyを入れたくない人とか

Fluid

http://fluidapp.com/

Safariのエンジン GreaseKitが入ってるので便利

詳細割愛 (pbtweetやRemedie Playerとして活用されている)

iPhoneはもってないので分からない

iPodも1台も買った事は無いので

PSP-1000, PSP-2000, DS, PSP-3000, DSiを嫁さんが忘年会の景品で貰ってきたのでPodcast聴くのに使ってるぐらい

そもそもtumblrってなによ

tumblelogを作るためのWebサービス

Webサービスにした事でreBlogfollowDashboardが生まれた

tumblr Dashboard

ソーシャルブックマークのお気に入り

みたいな感じ

reBlog.org

その他、紹介ブログはだいたいreBlog(と言えるかも?)

tumblelogに導入されたreBlogの概念

Marco Armentさん(Tumblr. Inc.)

Reblogというのは前からあったアイディアなんだけど(http://www.reblog.org/を見て),伝統的なブログソフトウェア,そのインタフェース,期待されるものにはフィットしなかったんだ。でも幸運にもTumblelogには完璧にフィットしている。オリジナルと引用のコンテンツが自然に混在できるという点で。

http://gihyo.jp/lifestyle/serial/01/tumblr/0005?page=3

tumblelogとは

http://www.kottke.org/05/10/tumblelogs (英文)

詳細は

http://en.wikipedia.org/wiki/Tumblelog

(日本語版WikipediaTumblrtumblelogを混同しているのでデマの発生源だから注意)

日本語圏におけるWebは、10年以上前からtumblelogがたくさん存在したのでいまいちピンとこないのかも

blogtumblelogの違い

アメリカのblogは「二郎喰った」とか「RubyKaigi行った」とか「取締役の立場を離れて」とかアメブロ芸能人ブログみたいなのじゃなくて、ひとつのまとまった意見や記事を書くツール(かも?) description(概要)書くフォームとかRead moreとかMovableType時代からあるし

2002年当時

思い出したら。アメリカでは2001年9.11テロに関してネットで意見を書くためにblogがよくつかわれていると聴いた)

tumblelogのさまざまな種類

  • textlog

タイトルも概要も無い単文

pya! http://pya.cc/

  • quote

書評ブログ

引用ブログ

tumblelogのさまざまな種類(続き)

  • linklog

リンク羅列型サイト

かーずSP http://www.karzusp.net/

  • chatlog

IRCSkype chatやTwitterの会話を切り抜いて紹介

広い意味で2chまとめサイト

  • audiolog
  • movielog (videolog)

おもしろ動画紹介ブログ

小太郎ぶろぐ http://www.kotaro269.com/

ネット閲覧を効率化しよう

このへんのことはおととしのデブサミで発表しました

netwatch2.0 http://www.slideshare.net/otsune/20-266079

ニコニコ動画 http://www.nicovideo.jp/watch/sm2389227 に音声あり

This Modern Life

http://gyazo.com/e093d3ad8d208ba9853cc0efc21900e7.png

AutoPagerize

なぜAutoPagerizeが快適なのか

ブラウザはページを読み込んで表示するときにどうしてもタイムラグがある

ほとんどの人間はリンクをクリックして表示されるまでの数秒間を「まっしろなブラウザの画面」を見つめて浪費している

その秒数だけ寿命が縮んでいる

AutoPagerizeを使うと

ページの下にいくだけで「次のページ」を継ぎ足してくれる

よくある閲覧スタイルだと

  • クリックして見る→戻るボタンを押す
  • ひとつひとつタブで開いて後で順番に見る

かなり寿命が縮む!

一覧でざっと見よう

たくさんのデータを一枚のページに並べて統一したインターフェースで見るのは効率的

  • Remedie
  • iTunes
  • Cooliris
  • 画像サムネイル
  • 新聞・雑誌もね

なぜLDRizeがさらに快適なのか

tumblrはたくさんの短いpostのかたまり

マウスホイールでスクロールしていくと、視線が上下にぶれる

postの位置を探す秒数だけ寿命が縮んでいる

LDRizeを使うとjを押すだけで次のpostまでスクロールする

何かボタンを押していると操作した気分になる

→バイトヘル2000

ボールペン工場

http://gyazo.com/a451173e651b7a9c734a4af2c62d4b33.png

ひよこ鑑定士

http://gyazo.com/65da6d545be12b03057b9f3f67fbe4f2.png

私の閲覧環境

Firefox3.5

(SafariOperaでもAutoPagerize同等の機能をうごかす手段はあります。詳細は「os0x」検索)

MiniBuffer script

t: reblogする

T: reblog投稿フォームを開く(追記・編集するときにつかう)

RET: 画像を大きくしたり

l: likeを押す

h: noteを開いたり閉じたり

tumblr Dashboardをキーボード操作だけで閲覧・reBlogできる

さらに便利に

var r=new XMLHttpRequest(),u='http://www.tumblr.com/new/text';
    r.open('GET',u,false);
    r.send(null);
var k=r.responseText.match(/name='form_key' value='([^']+)'/m)[1];
    r.open('POST',u,false);
    r.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=UTF-8');
    r.send('post[one]=%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E8%AA%AD%E3%82%93%E3%81%A0&post[is_private]=1&form_key='+k);
location.reload();

表示まわりのチューニング

グリモンがあればStylish入れなくても使える

引用・引用・引用……の隙間をつめる

自分のpostだけ表示しない

その他

投稿最適化

投稿フォーム (Dashboardの上にあるアイコン)

www.tumblr.com/new/{text, photo, quote, ...}

公式bookmarklet

AccountメニューのGoodiesに

http://www.tumblr.com/goodies

これだけでも2007年当時はかなり使いやすいと思った

今でもこれだけ使ってる愛用者はいるっぽい(例:いしたにまさき)

Email Posting

メールだすとpost

AOL Instant Messenger

TumblrBot

Third-Party Apps

http://www.tumblr.com/docs/apps

しかし我々には最強のツールがある

tombloo

Firefox使ってるオレらにはこれだけでOk

tombloo http://wiki.github.com/to/tombloo

tumblrだけでなくソーシャルブックマークやTwitterにも投稿できる

それどころか聴いた事も無いようなWebサービスにも投稿できる

詳細はウェブで!

ブクマにも使える

オレはdeliciousがメインのソーシャルブックマーク

Plaggerをつかってはてなブックマークとlivedoor Clipに同期している

Pukkaというシェアウェア$10のdelicious専用クライアントがあるけど、乗り換えた

(CoreData (SQLite DB)が大きくなりすぎて重くなったので)

スクリーンキャプチャーも取れる

gyazo.comでもいいけど)

「ブラウザの1ページをローカルHDDに保存する」でネット使わない

tumblr Photoのバックアップも取れる

tomblooの設定で保存先を指定できる

Finderデモ

さらなる廃人を目指して

おまけです

Vimperator

マウスをまったく使わずキーボードだけでFirefoxを操作できる

エディターのVimに似せたキーバインド

実はLDRizeのj,kもviキーバインドから来ている

tumblr Dashboard三種の神器と相性バッチリ

BBT2

http://gyazo.com/3e1c7e015f1ee176b5cd410b2a0ca970.png

drikin作

hjklでマウスカーソルをうごかしてspaceやgでクリック

リブログ最適化 (reBlog Optimize)

真っ昼間に異性臀部の写真を貼るな ……とかそういうことではなく

テーマを弄るときにあるタグを入れてほしい

ThemeはDashboardではなく表ページに適用される


AutoPagerize用タグのススメ

Customize

http://www.tumblr.com/customize

からThemeタブをクリックして「Use custom HTML」を押す

class入れろ(重要!)

{block:Posts}

を探して

<span class="autopagerize_page_element">{block:Posts}

にする

{/block:Posts}

を探して

{/block:Posts}</span>

にする

次のページ(重要!)

<a href="{NextPage}">

を探して

<a href="{NextPage}" rel="next">

にする

ついでに

<a href="{PreviousPage}">

を探して

<a href="{PreviousPage}" rel="prev">

にする

LDRize用タグのススメ

理想はhAtomというmicroformatsにすると素晴らしい

けど{Permalink}だけでもやるとreBlogされやすいtumblrになるよ

Permalink重要!

<a href="{Permalink}">

を探して

<a href="{Permalink}" class="permalink" rel="bookmark">

にする

hAtom

<div class="content">

を探して

<div class="content hfeed">

にする

entry

<div class="post">

を探して

<div class="post hentry">

にする(複数あるので全部に)

内容

content

<span class="entry-content">
...
</span>

で本文っぽいところを囲む

title

タイトルになる部分を

<span class="entry-title">
...
</span>

で囲む

日付

ISO-8601

日付部分を

<abbr class="published" title="{Year}-{MonthNumberWithZero}-{DayOfMonthWithZero}T{24HourWithZero}:{Minutes}:{Seconds}Z">
...
</abbr>

で囲む

細かい事は

microformats大好きな誰かのブログでいずれ書かれるはず。(というか書いて!)

というかどんなテーマ書いても自動的に適用される未来になるのが正しい

苦労するのはユーザー全員じゃなくて機械や少数の専門家のほうが効率がいいんだけど

最適化を極めると

こうなれます

http://gyazo.com/a8741032387029453e2931522d6f6036.png

おわり

ご清聴ありがとうございました