プログラマーズ雑記帳

Redmine Advent Calendar の 23 日目の記事として、 Firefox などのブラウザから UNC パスのリンクをオープンする方法について書いてみようと思います。
直接的には Redmine と関係はないですが、 私は Redmine を使っていると 共有 PC などへのリンクを張りたくなることが結構あるので、 知っていると便利かなと思います。

file URI と UNC パス

PC 内にあるローカルファイルをブラウザなどで表示すると file://D:/home/foo.html といったアドレスになります。 このアドレスは file URI といって、 URI の表記の一つです。
これは RFC で定義されていて、ブラウザでちゃんと扱える表記法なのですが、 http:// のページに張られているローカルファイル(file://)へのリンクは、 メジャーなブラウザの多くではセキュリティ上、クリックしてもリンク先を表示できないようになっています。 (ローカルファイルからローカルファイルへのリンクは可能です)
ローカルファイルへのリンクを開きたいということはあまりないのですが、 ネットワーク上の共有 PC へのリンクを開きたいということは良くあります。
ネットワークコンピューターへのパスは UNC パス といって \\comp_name\share_name\foo\bar.doc のような書き方をします。
これを file URI を使って書くと file://///comp_name/share_name/foo/bar.doc というようになります。
ただし、file URI のパスなので、 基本的にリンク先を開くことは出来ません。 これをブラウザで開くためには、ブラウザごとに対応する必要があります。

ちなみに \ を / に直したり、スラッシュを 5 つ書いたり、とパスをリンク表記に直すのは 若干面倒ですが、 Redmine では Wiki UNC プラグイン を使うと Wiki マクロで UNC パスのリンクが簡単に作成できます。
前回の Redmine Advent Calendar の記事 で Wiki マクロの作成方法を書きましたが、 ちょっとしたコードですごく便利なプラグインが作れというよい例じゃないかとと思います。 私も TestLink Link プラグイン を作る際に参考にさせていただきました。

Internet Explore

IE の場合は簡単です。
IE では PC 内のローカルファイルへのリンクは開けませんが、 UNC パスへのリンクでは何もしなくてもそのままオープンすることが出来ます。

Firefox

Firefox も少し面倒ですが、設定を行うと開けるようになります。

Firefox で GUI が提供されていない設定を変更するには user.js に JavaScript のコードを記述します。
http://level.s69.xrea.com/mozilla/index.cgi?id=aboutconfig

まず、 user.js をおく設定ファイルの場所ですが、OS によって変わります。 Windows では以下のようなパスになっています。

%AppData%\Mozilla\Firefox\Profiles\(ランダム文字列).default

Windows ではアプリケーションデータをおく場所が変わるため、バージョンによっても変わってきます。 ただし、環境変数が設定されていて %AppData% という % をつかった記述で値を取得することが出来ます。 %AppData%\Mozilla\Firefox\Profiles といったパスをそのまま エクスプローラーのアドレスに書くとフォルダーが表示できます。



次に user.js ファイルを作成して、設定ディレクトリにおきます。
すでに user.js ファイルが存在している場合は、追加書き込みしてください。 また、 prefs.js に追記しても問題ありません。
内容は次のような記述になります。

user_pref("capability.policy.policynames", "localfilelinks");
user_pref("capability.policy.localfilelinks.sites", "http://foo.bar.co.jp");
user_pref("capability.policy.localfilelinks.checkloaduri.enabled", "allAccess");

"http://foo.bar.co.jp" を Redmine などのリンクを許可したいページのサーバーにしておきます。 複数ある場合はスペースで区切って記述してください。

後は Firefox を再起動すると開けるようになります。
http://webos-goodies.jp/archives/50214493.html

Google Chrome

Google Chrome では 複雑な設定をしたい場合は起動オプションで指定します。
http://chrome.half-moon.org/43.html

私は確認できなかったのですが、 --allow-file-access-from-files オプションを指定すると file:// のパスが開けるようになるようです。

Safari, Oprera など他のブラウザ

そのほかの Safari, Oprera なども調べてみたのですが、 これらは開けるように設定を変更する方法はないようです。
http://www.websina.com/bugzero/kb/browser-file-url.html
(リンク先に書かれている右クリックで [新しいタブを開く] という方法も 今のバージョンのブラウザはほとんどできなくなっているみたいです。)

こういったブラウザでも Drag&Drop を使えば、表示することが出来ます。
これはリンクをクリックするのではなく、 リンクを押した後、そのままブラウザのアドレスのところまでドラッグして、 離します。
この方法であれば、ほとんどのブラウザでオープンすることはできるのではないかと思います。

最近のブラウザは html ファイルを描画する部分(レンダリングエンジン) がライブラリなどで分けられているものが一般的です。
よく使われているブラウザとレンダリングエンジンをまとめてみました。

使用、サイト制作

まずはレンダリングエンジンをブラウザの使用やサイト制作に関係するところでまとめてみます。

Trident - Internet Explore

IE のレンダリングエンジンは Trident と呼ばれています。
ブラウザとしてよく使われているのは IE ぐらいですが、 Windows アプリ開発で HTML 表示用のコンポーネントとしても提供されているので、 Windows では意外といろいろなアプリで使用されています。

Gecko - Firefox

Gecko は Mozilla Foundation で開発されているオープンソースなレンダリングエンジンです。
こちらも Trident のように他のアプリからも利用できるのですが、 少し使い方が特異なせいか、使用されているのは Firefox や Thunderbird といった Mozilla 製品ぐらいです。

WebKit - Google Chrome, Safari

Google Chrome, Safari のどちらもレンダリングエンジンは WebKit を使用しています。 これは Apple, Nokia, Adobe といった企業が中心となっている WebKit Foundation でオープンソースとして開発されています。 また、WebKit は iOS, Android の標準エンジンですので、モバイル用ブラウザではほとんど WebKit が採用されています。
さらに Linux の統合ディスクトップ環境である gnome の標準ブラウザ Epiphany も WebKit がレンダリングエンジンに使われています。 Linux には gnome のほかにもう一つ有名な KDE という統合ディスクトップ環境があります。 こちらのファイルマネージャ、ブラウザである Konqueror は KHTML というレンダリングエンジンが使用されています。 WebKit はもともとこの KHTML から派生して作られています。

Presto - Opera

Opera のレンダリングエンジンは Presto という名前です。
任天堂 DS などにも使われているらしいですが、 モジュールとして公開されていないため、 ほぼ Opera だけで使われているレンダリングエンジンです。

なぜ、ブラウザとレンダリングが分けられているのか

ブラウザとレンダリングが分けられている理由は HTML でどんどん高機能なものが求められるようになり、 HTML の表示機能を作るのが大変になっているというところにあります。

例えば、 ブラウザとメーラーを作っていて、 ブラウザだけでなく、メーラーにも HTML の表示機能を付けたいという時、 個々のアプリで実装するよりもブラウザからレンダリングエンジンを分けられるようにして、 それを共有した方が開発はやりやすくなります。
コンピューターを買うとき、どのくらい魅力的なアプリがあるかということが重要です。 Microsoft や Apple はレンダリングエンジンをモジュールとして提供することによって、 アプリ開発を促すことが出来ます。

また、 WebKit などは大変なところはみんなで作って、 それをみんなで使おうという発想から生まれています。

プラットホーム

IE の Trident 以外のレンダリングエンジンはすべてクロスプラットホーム対応です。
Windows, Mac, Linux といったディスクトップ用 OS だけでなく、 iOS, Android といったモバイル用の OS にも対応しています。 WebKit だけでなく、 Opera, Firefox でもそれぞれのエンジンを使ったブラウザのモバイル用が出ています。

• Opera Mini & Mobile
• App Store - Opera Mini Web browser
• Android 版 Firefox
• App Store - Firefox Home

標準対応と速度

使う点で考えた場合、気になるのは HTML5, CSS3 といった標準対応や表示速度ではないかと思います。
これらはバージョンや使っているブラウザによって変わってくるので、比較は難しいところです。 特に速度はブラウザに抜きにはできないのですが、ブラウザの比較であれば、 オンライン上の速度の測定(ベンチマーク)や比較結果を載せたサイトがあります。

• ベンチマークなどのリスト
• メジャーブラウザの比較

HTML5, CSS3 についてもブラウザごとの対応状況を一覧にしてあるサイトがあります。

• HTML5 & CSS3 Support

個人的なイメージだと Firefox が他のものに比べて頭一つ標準への対応が早い気がします。 ただ、 Firefox はフリガナの <ruby> のように対応しないものはいつまでもしないなというところもあります。
遅い方はというと、こちらは IE がかなり遅れてから対応している感じです。 しかし、 IE も自動アップデートするということなので、 Firefox のようなショートスパンでのリリースが期待できるようになるかも知れません。

• ついに！　 Microsoft 、来年から IE を自動アップデートすると発表

CSS のベンダープレフィックス

まだ仕様が確定していない CSS の機能が実装される場合、レンダリングエンジンごとの ベンダープレフィックスが必要なことがあります。

レンダリングエンジン	プレフィックス
Trident	-ms-
Gecko	-moz-
WebKit	-webkit-
Presto	-o-

例えばこのブログの記事のタイトルに使っているグラデーションの機能は CSS では次のように記述しています。

background: -moz-linear-gradient(top, white, silver);
background: -o-gradient(top, white, silver);
background: -webkit-gradient(linear, left top, left bottom, from(white), to(silver));

このプレフィックスは仕様が確定してくると付ける必要がなくなってくるので、 バージョンによってプレフィックスが外れたりします。 そのまま付けておいても問題はないのですが、いっぱい付けるのも面倒ですし、 どの機能にベンダープレフィックスをつけなければいけないのかというのが、 わかっていると便利です。
これをまとめてくれている非常に助かるサイトがあります。

• HTML5 Please
• HTML5 Please 読み方ガイド | プログラマーズ雑記帳

Firefox で Trident を使う

昔は IE でないとちゃんと表示できないようなサイトが結構あったのですが、 最近では標準にあわせることの方が重視されて、そういうサイトは減ってきました。
しかし、 MSDN のような Microsoft のサイトを Firefox でみれないということがありました。 しかも、たちの悪いことに 最近の Visual Studio ではリファレンスなどのヘルプはネット上の MSDN をみるようになっていて、結構不便です。

Firefox では、 Gecko だけでなく、アドオンでレンダリングエンジンに Trident を利用することも出来ます。 これを使って私は MSDN のページは IE のコンポーネントで表示するように設定しています。

• IE Tab V2 (FF 3.5, 4, 5, 6, 7+) | Firefox アドオン

Lunascape - トリプルエンジン

そんなにシェアがあるわけではないですが、レンダリングエンジンに関してちょっと変わり種の Lunascape も紹介しておきます。
この Lunascape では Trident, Gecko, WebKit の 3 つのエンジンを切り替えて使えるようになっています。
こちらも前節のように状況によってエンジンを切り替えるという発想で生まれたブラウザです。

ただ、 3 つ使うという複雑なことをやっているせいか、重くてあまり評判はよくないみたいです。 しかし、ブログなどのサイトや Web アプリケーションなどを作っているときには 簡単に切り替えられるので、見え方を確認するときに重宝します。

また、 User Agent の設定を切り替えて、擬似的に携帯用のページを表示できるようにもなっています。 User Agent の設定は若干わかりづらいですが、 Trident の個別設定ページで設定し、 使う場合も Trident エンジンを選択して表示します。

アプリ開発に利用

html が高機能化していって、個人で標準に対応したブラウザを 1 から作ろうと思うと無理に近いです。 しかし、このレンダリングエンジンを使えば、ブラウザを作ることもそこまで難しくなくなります。
まぁ、あまりブラウザを作ろうと思うことは少ないかも知れませんが、 アプリケーション中で html ファイルを表示したいということは結構あると思います。
今度はこのレンダリングエンジンをアプリ開発に利用する方法について書いてみたいと思います。

ただし、 Opera の Presto に関しては、オープンソースでもないですし、バイナリ(dll) として利用することもできません。

レンダリングエンジン	ソース	ライブラリ利用	dll
Trident	クローズド	○	Mshtml.dll
Gecko	オープン	○	mozctl.dll
WebKit	オープン	○	webkit.dll
Presto	クローズド	×	×

IE コンポーネント、 Trident

Trident はコンポーネントとしてみた場合、 IE コンポーネントや WebBrowser コンポーネントと呼ばれています。 これを使う場合には、 MFC であれば、 CHtmlView クラス、 .NET であれば、 WebBrowser クラス として利用することが出来ます。
Windows で開発するのであれば、これを使うのが一番簡単ではないかと思います。

Gecko

Firefox や Thunderbird といった Mozilla アプリケーションは以下のような構成になっています。

• GUI のレイアウトを XML ファイル (XUL)
• 全体を JavaScript
• スピードネックとなるような箇所を C++ コンポーネント (XPCOM)

こういったにかわ(glue)言語や XML での GUI レイアウトの記述は .NET(WPF) の XAML や Qt の QML など 最近の はやり みたいです。 これらについてはまたの機会に書いてみたいと思います。

レンダリングエンジンの話に戻ると、 Gecko も XPCOM として提供されています。
XPCOM は Windows の COM の クロスプラットホーム版のようなもので、 JavaScript などから C++ コンポーネントが利用できるようになっています。

このため、 Gecko を利用しようとした場合、XULRunner を使って、 XUL+XPCOM アプリケーションとして作成するか、 libxul を使って XPCOM を使えるようにする必要があります。

ちょっと HTML ページを表示したいだけなのに、 Gecko を使おうとすると、いろいろややこしく、 私は途中でやめてしまいました。
ただ、最近では Mozilla ActiveX Control (mozctl.dll) というのができて、 Windows では通常のライブラリのように利用できるようになったようです。

WebKit

WebKit は webkit.dll というライブラリとなっているので、 通常のライブラリのように利用することも出来ます。

しかし、 Qt では QtWebKit モジュールとして組み込まれて、 QWebView クラスで IE コンポーネントの CHtmlView のようにすぐ使えるようになっています。
クロスプラットホームで動作させたい場合には、こちらを利用すると簡単に使うことができます。 Qt のサンプルには、 QtWebKit を使った ブラウザの例 もあります。

また、 Qt では簡単な Html であれば、 ラベルやテキストエリアといった ウィジェットでも表示することは可能です。

結局、どれを使う

エンジンを使ったアプリを作る視点から考えると Windows 版のみなら Trident 、クロスプラットホームや Mac 用ならば WebKit がお勧めです。
Gecko を使うのは少しハードルが高い気がします。 Presto は残念ながら使えません。

ソーシャルブックマークの機能比較を書いてみました。
ただし、あくまで私が欲しいなという機能に関してのみ調べています。

ソーシャルブックマーク(SBM)って ?

ソーシャルブックマーク(Social Book Mark)というのはブックマーク(お気に入り)をネット上で共有、公開するサービスです。
大きく 3 つ利点があると思います。

1 つめはクラウドとしての利点。ブックマークを会社、自宅の PC やスマートフォンなどで共有することが出来ます。

2 つめはソーシャルな面です。良かったサイトをみんなに紹介したり、他の人のコメントが見れたりといった楽しみがあります。

3 つめは人気サイトの検索です。 SBM には、まず検索機能はついています。 人が実際に見て登録しているので、検索エンジンよりも優良なサイトが見つかることが多いです。
比較の一つとしてあげていますが、 Google+1 も検索の精度を上げるといった狙いがあります。

対象 サービス

よく使われているんじゃないかなというものを比較の対象にしました。

• はてなブックマーク

  はてなブックマークはオンラインにブックマークを無料で保存できるソーシャルブックマークサービスです。みんながブックマークしたインターネット上の旬なニュースや情報が集まります。
  

• Delicious

  

  Keep, share, and discover the best of the Web using Delicious, the world's leading social bookmarking service.
  
  <海外で有名な SBM >
  
  

• Buzzurl[バザール]

  Buzzurl（バザール）は、日頃のニュースチェックや情報収集をすばらしいものに変えてくれるソーシャルブックマークサービスです
  

• livedoor クリップ

  「お気に入り」ページを発見＆登録するソーシャルブックマーク
  

ソーシャルブックとはちょっと違いますが、同じ用途として使えそうなものも入れてみました。

• Tumbler

  

  Tumblr はどんなものでも簡単に共有できます。テキスト、画像、引用、リンク、音声、動画、そのどれもがブラウザ、携帯電話、パソコン、メールなどから投稿できます。色はもとより HTML テーマまで、すべてをカスタマイズできます!
  
  <印象としては、 Twitetr と SBM と画像共有サービスを合わせた感じ。>
  

• Google+1

  

  Google+ は、現実の世界と同じような情報共有をウェブ上で可能にします。
  
  <Goole+ 自体はいろんな機能のある SNS 。 +1 ボタンは Facebook の [いいね] にあたる機能だけど、ブックマークとしても使えそう。>
  
  

機能比較

サービス	日本語対応	Twitter 連携	タグ、検索	シェアボタン	ブラウザ拡張
はてブ	○	○	○	◎(コメント表示)	○
Delicious	×	×	○	○(ShareThis)	○
Buzzurl	○	○	○	△	△
livedoor	○	×	○	△	△
Tumblr	○	○	△(タグ選択なし)	○(ShareThis)	○
Google+1	○	×	×	○	△

日本語対応

Delicious は英語のサイトで日本語ページはありません。 ただし、日本語のリンクなどを登録しても、文字化けなどはなくちゃんと表示することは出来ます。

Twitter 連携

Twitter 連携というのは、ブックマークしたときにリンクとコメントを Twitter でつぶやく機能です。

Twitter 自体に Facebook との連携機能があるので、なくてもかまわないのですが、 はてなブックマーク, Tumblr では Facebook との連携も可能です。

タグ、検索

登録するときにリンクにタグづけできるものがあります。
私は気になったものはどんどん登録していくので、 このタグによる検索などの自分が登録したブックマーク内の検索は必須です。

表の△マークはタグ機能はあるけど、登録するときに自分の過去のタグや他の人のタグから選択できないものです。 タグを書くのも結構面倒なので、選択して付けることができれば便利です。
Tumblr のタグは SBM ではないのもあって、 どちらかというと Twitter のハッシュタグに近い機能です。

シェアボタン

このブログでも付けていますが、コンテンツなどにシェアボタンが付いていれば、 それをクリックして簡単に登録できます。

シェアボタンはあるけど、リンク数のカウンター機能が付いていないものは △ にしています。 はてなブックマークではさらにシェアボタンから他の人のコメントなどもみることができるので、 ◎にしています。

Delicious, Tumblr は ○ にしていますが、カウンター機能は付いてません。 ShareThisという複数のシェアボタンをまとめて表示してくれるサービスがあり、 ShareThis ではカウンターつきのシェアボタンを独自にを作っているので、 こちらを利用するとカウンターをつけることが出来ます。

• ShareThis - Share Buttons, Share Plugin, Share Analytics, Media Solutions

ブラウザ拡張

リンクを登録する時、シェアボタンがなくても、ブラウザからすぐ登録できると便利です。
ブラウザ拡張はアドオンなどで、簡単に登録できるかどうかの比較です。 アドオンなどがあまり充実していないものを最初の表で △ マークにしました。

サービス	ブックマークレット	アドオン	Tombloo, Taberareloo
はてブ	○	IE, Firefox, Chrome	○
Delicious	○	IE Firefox, Chrome	○
Buzzurl	○	Chrome	×
livedoor	○	×	○
Tumblr	○	Firefox, Chrome	○
Google+1	×	Firefox, Chrome	△

ブックマークレット というのはブックマーク(お気に入り)のリンクから機能を呼び出すもので、 モダンなブラウザであれば、大抵のブラウザで利用できます。 リンクをブックマークツールバーなどに登録して、クリックすれば、表示中のページを SBM に登録できます。


ブックマークレットがあれば、簡単にリンクはできるのですが、 ブラウザのアドオンがあった方が表示ページのブックマーク数なども見れたりして、 より便利です。
アドオンについて調べたブラウザは IE, Firefox, Goole Chrome の 3 つです。 Firefox は表中にリンクがないものがありますが、こちらは Firefox の[アドオンマネージャ] で検索した方が簡単にインストールもできると思います。

Tombloo, Taberareloo はそれぞれ Firefox と Google Chrome のアドオンで、様々なサービスへのリンクの共有が出来ます。 livedoor クリップは直接のアドオンはありませんが、これらを使って登録することが出来ます。
ただし Google+1 は Taberareloo のみです。Taberarelooも +1 としてではなく、"投稿" になってしまいます。

まとめ

実は SBM をいろいろ試したのは、 はてなブックマークの トラッキング問題 があったときに別のに乗り換えようかなと思ったのがきっかけでした。

しかし、結局はてなブックマークが自分がやりたいことには一番あっているように思いました。

Delicious は英語なのと Twitter の連携機能がないことを除けば、いい SBM でした。
特にブックマークを集めて Stack というものが作れるのですが、 これで簡単にまとめサイト的なものが作れます。

• Delicious.com - [SNS ボタンの設置]

使わないのはちょっと惜しいかなと思いました。 SBM はたくさん登録していくと検索が大変になってくるので、 はてなブックマークの方にはどんどん登録していって、 Delicious にはよく見に行くページを登録するように使い分けて使っていくつもりです。

Buzzurl, livedoor クリップ はそれほど悪いものではありませんでしたが、 はてなブックマークのプラスアルファ的なところもなかったので、乗り換えるほどでもないかなというところです。

Tumblr はタグが少し使いづらい点を除けば、希望どおりだったので、 こちらに変えようかなとも思いました。
しかし、もともといろいろなものを共有するためのサービスで、投稿したうちのリンクだけを見るということができません。 SBM として使おうとすると自分で "リンクしか登録しない" という縛りをつける必要があります。
Tumblr は Tumblr として面白そうだったので、縛りをつけて使うのがもったいないなということでやめました。

Google+1 はもともと SBM ではないので、タグ機能がないなど、やはり SBM として使うにはちょっと無理がある感じでした。