tigGit をなかなか使いこなせずにいる私ですが、これはいい !

コンソールから使える git ブラウザ、tig が超便利

Vim に近い操作感で使えるのが Vim 使いには非常に嬉しいところです。以下で、インストール方法と基本操作について紹介します。

インストール

インストールは、まずソースコードからやってみたのですが、パッケージが存在することに気づいたので、 aptitude で入れ直しました。

sudo aptitude install tig

はい、簡単ですね。

起動する

カレントディレクトリを Git のワークツリーに移動して、 tig コマンドを実行します。

$ cd /path/to/work-tree
$ tig

ヘルプを表示する: h

何はともあれ、わからないことがあればとりあえず h を押してヘルプを調べましょう。

カーソルの移動: j, k

Vim ユーザなら、何の問題もないでしょう。 j で下へ、 k で上へ移動します。

メイン画面の表示: m

tig 起動時のデフォルト画面です。カーソルを移動して、詳細を確認したいコミットを選択し、 Enter キーで diff が表示されます。

Enter キーを押すと、上にコミットリスト、下には diff という 2 ペイン表示です。ちょうど上に載せたスクリーンショットの画面です。

フォーカスを移動する: Tab

2 ペイン表示時に Tab キーを押すと、カーソルのフォーカスがコミットリストと diff とで交互に移動します。

リポジトリ上のファイルツリーを表示する: t

リポジトリ上のファイルを参照するのに使います。カーソルを上下に移動して Enter キーで選択するとことで、ディレクトリを潜ったり、ファイルの中身を表示することができます。

これも 2 ペイン表示なので、 Tab キーでフォーカスの移動ができます。

キーワード検索: /,?

これも Vim ユーザにはお馴染みの操作ですね。 foo というキーワードで検索するときは、 /foo と入力して Enter キーを押せば、下へ向かって検索できます。

逆に、上へ向かって検索するときは ?foo と入力して Enter キーです。

また、これまた Vim と同じく、 n で最後に検索したキーワードで繰り返し下へ向かって検索し、 N で上へ向かって検索できます。

その他にもたくさんの機能があるようなので、Git ユーザの皆さんは是非使ってみましょう !

See also

,

このブログでは、はてなブックマーク、 Twitter, Facebook に記事を推薦するためのボタンを表示するのに、 WP Social Bookmarking Light というのを使っています。

基本的に最小限の機能が揃っている上、対応するウェブサービスも多いのでいい感じなのですが、ボタン表示されるのが記事個別の Permalink で参照しているときのようです。

というわけで、トップページでもボタンが表示されるよう、微修正を加えました。
YOUR_TWITTER_ACCOUNT の所は自分のものに書き換えてください。

ただし、個別のウェブサービスについては、 Twitter のみしか修正を行っていないのでご注意ください。このサイトで使用している hatena, hatena_users, facebook, facebook_like については特に修正がいらないようなのですが、その他のものについては特に確認しておりません。

このプラグインには公式の Tweet Button というのが使われています。パラメータによっていろいろ調整できるので、自分好みに修正が必要な方は、下記のページが参考になります。
Twitter / ツイートボタン

Enjoy !

, ,

このブログでは、記事中のプログラムの文法ハイライトに、 Syntax Highlighter and Code Colorizer for WordPress というプラグインを使用しています。 JavaScript と CSS で、プログラムを見易くしてくれる素敵なプラグインなのですが、 JavaScript ファイルだけで 1 度に 18 ものファイルを読むのが気になるところです。

外部のリソースが増えると、当然 HTTP リクエストも増え、ページ全体の表示時間に影響が出ます。

というわけで、以下のようなスクリプトを用意しました。

使い方

まずは、上記 Ruby スクリプトを syntax-highlighter-minimizer.rb といった適当な名前で保存します。

このスクリプトの動作には、 JSMin という Rubygems が必要なので、インストールします。

$ gem install jsmin --no-rdoc --no-ri

スクリプトは以下のように使用します。

$ ruby syntax-highlighter-minimizer.rb /path/to/syntax-highlighter-and-code-prettifier/script

プログラムの引数として、 sh***.js といったファイルの含まれるディレクトリのパスを渡して実行します。すると、ディレクトリ内に以下のようなファイルが保存されます。

  • syntax-highlighter-all.js … sh***.js をすべて結合したもの
  • syntax-highlighter-all-min.js … ***.js をすべて結合し、難読化したもの

仕上げとして、 JavaScript ファイルの読み込み部分を書き換え、ファイルを結合・難読化したものと置き換えます。

./wp-content/plugins/syntax-highlighter-and-code-prettifier/syntax-highlighter.php

18 もあった JavaScript ファイルがひとつにまとまりました !

難読化とは

文字通りに言えば、プログラムを読みにくくすることですが、実際はソースコードの圧縮が目的です。インデント等を極力少なくすることで、圧縮されます。

どれぐらいの効果があるか

以下のようなページを作って測定してみました。

  • default.html … 元の 18 の JavaScript が読み込まれる
  • all.html … 18 の JavaScript を 1 つのファイルに結合したものが読み込まれる
  • all-min.html … 1 つのファイルに結合したのち、難読化したものが読み込まれる

いずれも、 script タグにより JavaScript が読み込まれるだけのシンプルなページです。 FireFox で Ctrl + F5 の強制更新で、 onload イベントの発生までの時間を計測しています。

default.html all.html all-min.html
1 379ms 140ms 180ms
2 375ms 148ms 168ms
3 556ms 131ms 133ms
4 365ms 135ms 124ms
5 370ms 146ms 137ms
6 363ms 128ms 133ms
7 370ms 257ms 132ms
8 397ms 122ms 133ms
9 411ms 127ms 136ms
10 362ms 135ms 135ms
Avg. 394.8ms 146.9ms 141.1ms

難読化による効果は誤差程度に止まりましたが、 JavaScript ファイルをまとめることは、絶大な効果があるようです。今回の例でいえば、 2.8 倍近い高速化が実現できました。

ただし、実際のウェブサイトは、 JavaScript 以外にもたくさんの要素を含み、キャッシュ等の要因も絡むため、ここまでのインパクトは無いと思いますが、ページの表示時間が気になるときは、是非検討してみるべきでしょう。

今後の予定

今回は特定のプラグインに標的を絞りましたが、 WordPress といった CMS を使用する場合、プラグインで JavaScript や CSS の数がもの凄いことになっていた ! というのはよくあると思います。それらを 1 つ 1 つ潰していくことで、案外バカにできない効果が期待できそうです。

あと、 JavaScript ファイルを減らそう ! とかいいながら、この記事には GitHub の Gist が 2 つも貼り付けられています。これらは JavaScript の外部リソースによるものなので、ページ全体の読み込み時間に影響します。ページの読み込み時に読み込むのではなく、「このコードは読んでみたいな」と思ってクリックするまで、読み込みを遅延させる、という仕組みもアリかもしれません。

参考文献

ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール

Yahoo ! のフロントエンド最適化チームによるノウハウ集で、 JavaScript の結合・難読化についてはほとんどこの書籍に書いてあります。

その他にも様々なテクニックが紹介されていますが、その中でも特に敷居が低いのが、この JavaScript についての最適化です。

是非試してみてはいかがでしょうか。

, ,