モダンなディレクトリインデックス「h5ai」を導入してみた

経緯

  • img.example.comみたいな感じで画像を貯めておける場所がほしい
  • 場所は用意出来たけどブラウザから見るとデフォルトのダサいインデックスが出てきてしまう
  • 調べたらこれが出てきた

というわけで使ってみることにしたh5ai

h5aiとは

h5ai is a modern file indexer for HTTP web servers with focus on your files. Directories are displayed in a appealing way and browsing them is enhanced by different views, a breadcrumb and a tree overview. Initially h5ai was an acronym for HTML5 Apache Index but now it supports other web servers too. (公式サイトより引用)

HTML5 Apache Indexの略だったけど今は他のhttpサーバでも使えるらしい。

導入する

nginxでの導入手順は

  1. 公式サイトから最新版(執筆当時は0.26.1)をダウンロードして、設置したいディレクトリに解凍。_h5aiディレクトリが出てくる。
  2. nginx.confもしくは所定の設定ファイルのserverディレクティブに
    index index.html index.php /_h5ai/server/php/index.php;
    を設定。
  3. _h5ai/server/php/index/index.php
    define("PASSHASH", "da39a3ee5e6b4b0d3255bfef95601890afd80709");
    ハッシュ値を編集する。これは設定ページを開くためのパスワードで、デフォルトでは空のハッシュ値になっている。www.sha1.czなどでハッシュ値を生成して置き換える。

これで、_h5aiディレクトリを設置したディレクトリにアクセスすればデモページのような表示になっているはず。

細かい設定

  • _h5ai/index.htmlから設定ページに飛べる。画像・動画・PDFなどのサムネイル機能があるが、有効にするにはそれぞれ別のソフトウェアが必要。
  • _h5ai/conf/options.jsonから直接設定が変更できる。標準ではURLをQRCode化して表示する機能があるが、要らなかったのでここから無効にした。
  • 上記の設定ファイルと、同階層にあるtypes.jsonを併せて編集して、新しい拡張子を登録してプレビューを有効にしたりできる模様。試しにWebP形式を登録してみたところ、ブラウザ自体が対応していれば正常にプレビューされた。ただ、サムネイル生成はできなかった。

スクリーンショット

f:id:aiwas:20170413215024p:plain

感想

導入も簡単、設定ファイルもJSON形式なのでとても易しいところが良かった。httpサーバでちょっとしたファイル置き場を作るときには便利なんじゃないかと思った。

これを書いている今、留年確定まで残り17時間を切っているががんばりたいと思う。