Vimperator Index of /＋Greasemonkey :: Firefox Add-ons・AutoPagerize -- Userscripts.orgの組み合わせでさらに最速に。

HERE CAPTION

今回のfirefox3に+Vimperator+Greasemonkey+Autopagerizeでどれくらい最速ブラウジングが体験できるかをvideoにしてみました。

vimperatorで操作していますので、[j]キーをずっと押しっぱなしです。（SHIFT+Gだともっと楽です。）

追記：今回のVideoですが、Vimperatorの機能を十分に紹介しきれていません。導入することでVideoでの内容以外にさまざまな便利な機能があります。また次回機会がありました折に紹介してみたいと思っています。

以下、今現在私がfirefox3で使っているアドオンのリストです。

Lastfmを使って自分の聴いている洋楽ナンバーをplaggerで拾ってきて、フィルターでYoutubeに検索をかけてembedコードを書き出し、それをMTにポストするという仕組みです。cronで2時間ごとにまわしています。

そしてPlaggerを使ってMovableType4.1へ収集したものをポストする作業を自動化させて構築してみたサイトがこちらのfm+tubes（試作）です。めっちゃアサマシサイトです。

まず、Twitter / miyagawaさん、Yusukebeさんはじめ、plaggerを使って情報発信している皆様に感謝します。ネット・サイト制作がさらに面白くなりました。

最近MTのタグなどを勉強するのにこちらのサイトmtde.infoを利用しています。

とてもきれいに情報が整理されていて、尚且つ手に届きやすいリンク配置、サンプルコードによるテンプレートタグの解説といった感じでとても参考になります。

テンプレートタグリファレンス | MovableType.jpと併せて頻繁に行ったり来たりしています。firefoxを使っている方は、Movable Type 4 に対応したタグリファレンスを活用する | MovableType.jpでも紹介されているように、検索にテンプレートタグ検索を追加することで、mtdeinfoを読みながら、タグリファレンスを読みたい時に、キーワードを選択して、右クリックでコンテキストメニューを表示し、[MT テンプレートタグ検索]を選択実行することで別タブでバックグランド（設定いるような・・）で開くことができます。

あとは、サイトで開設されているサンプルコードを自サーバ（MTOS）にこのブログのバックアップを流し込んで、その上でサンプルコードをwidgetにして、テンプレートに入れてどんな動きができるのかを試してみたりしています。

変数の動きだけのサンプルコードは、新しいブログを開設して軽い状態で確認表示したりしています。

そんな感じで勉強しています。とても難しいです。サイトに限らず、設計できてないとたぶん使いこなせないかも。なんて感じてます。エンジニア向けだなって。

サイト運営者の方の個人ブログでmtde.info の、できる経緯も合わせて読まれるといいですよ。

引用表示を簡単にするjavascript ブックマークレット

以前は引用元が表示されませんでしたが、今度は引用元も生成されます。

blockquote bookmarklet

Grid表示できるjavascript ブックマーク

最近みつけたjavascript bookmarkletは、表示しているサイトにGridを表示できるようにするものです。マウスでグリッドの位置も移動できます。

Grid bookmarklet

すべてのブックマークにキーワードを指定しておけば、[Alt]+[d]でURLを選択し、[キーワード入力]+[enter]でブックマークが簡単に使えます。

Firefoxでちょっと使えるショートカットとブックマークでも紹介しています。

vimperatorをお使いの方は、[o]を押して（:open)の、キーワード入力で簡単にブックマークを呼び出せます。

Firefox検索ショートカット

他にも、firefoxでは、さまざまなサイトの検索にもキーワードしていできるのでそちらにもキーワードをあてています。

例えば、はてなブックマークのタグ検索にカーソル移動して、右クリックでコンテキストメニューの中から、[この検索にキーワードを設定]を選択。キーワードをhbtagで指定して保存。

あとは、[Alt]+[d]でURLを選択し、hbtag+[スペース空ける]+[探したい情報のタグ入力]+[enter]ではてなタグ検索結果を表示できたりします。
vimperatorだと、[t]での:tabopenで使うと別タブで検索結果を表示できます。そんな感じで、さまざまなサイトの検索窓での検索を使ったりもできます。

さて、今回は、tumblrを使って自分のfavorite Galleryを作ってみることについて紹介します。実際に作ってみたのがこちら→web gallery

所要時間はトータルで2時間ぐらいです。（90サイト近くのキャプチャを取得してポストする時間も入れて）ほとんど、目的のデザインばかりを探すのに時間がかかったぐらいでｗ。今回は、BK+Grayでtypography、Gridデザインを意識したWEBサイトばかりを集めてみました。

（※1日にtumblrにアップできるイメージファイルの容量制限があるので真面目にアップしても1時間もかからないです。）

jQueryを使って、とてもシンプルなスクリプトとして出来上がっています。1.2からjsonの読み込みも簡単になったみたいでコードの理解もしやすいです。

ボタンをクリックすると各タイムライン切り替え表示、friendsリスト（１００人まで※今回バージョンアップ）が表示されるようになります。

追記：6月1日　Twitter APIの仕様が変わったようですね。毎回ページをリロードする度にtwitterへのログインを求める表示がでます。サイト訪問者にも表示されるようなので、しばらくの間止めておきます。もし、お使いの方がみえましたらその旨、ご了承願います。

• Get the public timeline
  ユーザー全員のタイムライン表示
• Get the user's twitter
  自分のタイムライン表示
• Get the user's twitter and friends'
  自分を含め友達のタイムライン表示
• Get the user's friends list

friendsリスト表示（１００人まで）

Firefox,Safari,IE7はもちろんIE6でもちゃんと表示機能されます。

Twitterでやり取りをするようになったTwitter / yungsangにすべてスクリプトを作って頂きました。感謝です。
※yungsang/IE 上で透過 PNG を正しく透過させるためのライブラリIEPNGFIX.js を作成した方です。今現在は、名称PNG-TRに変更
About PNG-TR（PNG-TR について） - PNG-TR | Google グループ

デザインを私が担当し、スクリプトをTwitter / yungsangに。つい最近わがままを言って以前からリスト表示したい旨を伝えたら、あっさりと対応するように作っていただけました。

使っている画像は、すべてpngです。IEでの透過png処理（PNG-TRにて）して、その要素でのマウスイベントについても対応してあります。

1分毎に最新のタイムラインをリクエストするようにも作られていますので、リロードすることなく、最新ポストを見ることができるようになっています。

ブログパーツの設置・フラッシュ版・AIR版について紹介しておきます。

最近、2つのサイトのSITEINFOを書きましたので紹介しておきます。temp - SITEINFO避難所にもアップしてありますので、使ってください。（そういえば、整理整頓されましたね。いくつかアップしたCSSギャラリーなどもデフォで反応するようになったのでよかったです。）

イメージ画像をクックするとSITEINFOが表示されます。

めちゃ早！最速ブラウジングが体験できます。

先日、もう一台のPCにアップル - Safariを入れてそのブラウジングの早さに驚いていたんですが、Firefox 3 Beta＋Vimperatorの速さには勝るものはないかも。そんな印象を受けました。Vim自体使ったこともなく、それでも徐々にその使い方を覚えつつハマりつつあります。

今現在の環境は、
Firefox 3 Beta 3（Beta 5はアドオン対応数が少ない為、バージョンダウン。Beta 4よりBeta 3の方が安定しているような感じなので）

一応Firefox 3 Beta環境でVimperatorを体験したい方へ、その導入手順など今現在までのプロセスをの残しておきます。

さて、バージョンダウンするときにダウンロードページを探すのですが・・・これが結構見つけにくいので今現在配布されているアドレスから以前のバージョンのアドレスを推測することに

以前のバージョンのダウンロードアドレスを備忘録として残しておきます。

Firefox 3 Beta 5

http://download.mozilla.org/?product=firefox-3.0b5&os=win&lang=ja

Firefox 3 Beta 4

http://download.mozilla.org/?product=firefox-3.0b4&os=win&lang=ja

Firefox 3 Beta 3

http://download.mozilla.org/?product=firefox-3.0b3&os=win&lang=ja

※Macの方は、アドレス"win"→"osx"へ
Linuxの方は、"win"→"linux"へ

ちなみに今までfirefox2で使っていたアドオンが数多く対応されているバージョンは3.0b3なのでそちらにバージョンダウンしました。

アドオンの対応状況なんかのシートなんかも作ってみるといいかもしれないですね。

これからのウェブデザインで必要な要素についていくつか取り上げられています。ウェブデザインに従事している方には、とても役立つ内容かと思われましたので訳してみました。

翻訳については、著作者への承諾不要となっていますが、定型フォーマット表示義務が必要となります（また、正しく内容を伝える必要がある）。国内多くのウェブデザイナーの方たちで海外の役立つリソースを翻訳・共有できればといいなーと思います。古いリソースでも勉強になるものがたくさんあります。

はてなブックマークページを閲覧をするときは、キーボードショートカットを使っています。livedoor Readerと同じようなショートカットなので意外と便利でサクサク読みたい記事にピンをつけて、元記事を一気に開いて、全文選択して内容を携帯のメールに送っています。

キーボードショートカット機能

はてなブックマークの利用に慣れて来たら、ショートカットキーを使ってみましょう。ショートカットキーを使うと、はてなブックマークの各ページ、例えば人気エントリーページで公開されているエントリーをすばやく読んでいくことができます。

基本的な使い方は、j キー と k キーでエントリーを移動、気になるエントリーに x でピンでマーキングし、o でまとめて開く...という流れです。

はてなブックマークのキーボードショートカットで今日新しい発見をしました。[j][k]で記事を順に選択できるようになっています。ピンをつけても付けなくても、記事が選択されている状態なら[o]で別ウインドウ（新しいタブ）で元記事が開きます。

Shift＋[o]でブックマークコメントページも開くことがわかりました。同時に二つのページが開くということです。

はてなブックマークのページ閲覧でキーボードショートカットを使っている方がいましたら、試してみてください。

今回は、Highslide JS用のコードをMT4.1のファイルアップロード＞ファイルオプション＞[アップロードしたファイルを使ってブログ記事を書く]にチェックをつけた時に、自動で生成されるようにするカスタマイズを紹介します（一応ここ2週間ほど使っていますが、問題なく使えていますので紹介記事としてエントリーアップ）。

※尚、このカスタマイズを行って正しく動作するためには、「WYSIWYGのフォーマット設定がなし」の状態でないと正しいコードが生成されません。 また、現状問題なく動作していますが、もしコードを改編してシステムがおかしくなるかもしれませんので、自己責任の元参考にして試してみてください（デフォルトファイルのバックアップを取っておくことをおススメします）。

AutoPagerize対応class指定を設定しておくことで、エントリーを昇順で読むことができるようになります。実際にMovableType.jpで対応されているので、導入している方には、過去のエントリーから読んでいくとページ末尾に新しい記事（次ページ）が追加表示されるようになり、読みやすさを実感できるかと思います。

インデックスページ（トップページ）で、エントリーがアップした日付で降順に表示されるのが一般的です。記事を読み始めると昇順に記事が追加され読めるようになります。逆でもいいのですが、こっちの方がスマートかもしれません。

最初のエントリー投稿内容からコードの追記修正いたしました。最新記事において、「次の記事」が表示されていたのを表示されないコードに修正しました。

MT3.3xでは、MTRoundRobin:一覧表示で交互に背景・文字色をかえるで紹介していたMTRoundRobinというプラグインを使って、記事リストをストライプにして表示させていました。

新しいMovableType4.1では、そうしたプラグインは必要なく、変数を設定し条件分岐させることで、対象の要素に奇数偶数回数目で設定内容を指定してページ生成することが可能です。この変数指定での条件分岐を使って、奇数、偶数の要素に対してclass指定を交互に変えて生成するようにすれば、cssの設定だけでストライプ表示をさせることが可能となります。

参考になるエントリーは、こちらの拡張された MTElse タグを利用した複雑な条件分岐 | MovableType.jpを読んでみるとその内容がわかると思います。

また、サンプルページは、MovableType.jpにて最近のブログ記事リストがこの方法を使って、ストライプ表示をさせていると思われます。