【webdavにおすすめ】ブラウザでディレクトリへアクセスしたときのインデックス表示をかっこよくする

index.htmlやindex.phpなどのファイル名を省略した際に表示されるこのページです。

（といっても、最近のWebサイトはこの画面を出さない設定にしていることがほとんですが…）

今回使うのは「h5ai」というPHPプログラムで、導入するとこんな感じ↓になります。

公式のデモはこちら: https://larsjung.de/h5ai/demo/

表示形式の切り替えやサムネイル表示など、一通りの機能がついており非常に便利です。

Webサイトのディレクトリ内を公開したい状況はあまりないと思いますが、WebDAVなどを導入していて、ファイルマネージャーからだけでなくブラウザからも閲覧したい場合に便利だと思います。

導入手順

本稿ではLAMP構築済みのサーバーに導入しています。

「h5ai」をダウンロード・配置

配布サイトへ行き、最新版をサーバーへダウンロードして解凍します。
https://larsjung.de/h5ai/

$ wget https://release.larsjung.de/h5ai/h5ai-0.29.0.zip
$ unzip h5ai-0.29.0.zip

解凍した「_h5a1」の配置場所は、公開したいディレクトリの直下です。

var
  └ www
     └ html
        └ webdav
           ├ _h5ai
           ├ dir1
           │   └ …
           └ dir2
               └ …

Apacheまたは.htaccessに設定を書く

DirectoryIndex index.html index.php /_h5ai/public/index.php

もし公開ディレクトリがWebルートより深い場所にある場合、/_h5ai/public/index.phpの部分を/hoge/_h5ai/public/index.phpのようにルートから見て適切なパスにする。

確認

ブラウザからアクセスし、確認してみましょう。
たいていのサーバーはこれだけで一通りの機能が動くと思われます。

一部機能に問題がある場合

例：動画のサムネが表示されない　など

以下のURLから、必要なソフトがサーバーにインストールされているかを確認できます。
http://あなたのサイト/_h5ai/public/index.php

（上記画面のログインパスワードは初期だと空になっています。変更したい場合は./_h5ai/private/conf/options.jsonのハッシュ値を変更します。）

各項目に対し、何をインストールすればよいかが書かれているので、「no」になっている項目を確認して必要なソフトをインストールしましょう。

WebDAVと組み合わせる場合

WebDAVに対してh5aiを導入すると、WindowsのファイルエクスプローラーやMacのFinderなどといったファイルビュアーでWebDAV内を正しく表示できなくなってしまいます。

そのため、h5aiがブラウザからアクセスした時だけ有効になるよう、最初のDirectoryIndexの設定を変更しましょう。

# ※Apache2.4の書き方です
# UAがchromeのときだけ有効に
<If "%{HTTP_USER_AGENT} =~ /chrome/i">
    DirectoryIndex index.html index.php /_h5ai/public/index.php
</If>