Indexページは盛れる！ - DENET 技術ブログ

どうも、年末年始はPSVRでSKYRIMの世界に旅立っていた、森屋です。
近年、SNOWに代表する激盛れカメラアプリが話題ですが、ApacheをはじめとするWEBサーバは、どんどんアップデートされているというのに、Indexページが激ダサだと思いませんか。
そんなオシャレで女子力の高いあなたに届ける記事です。

h5aiでIndexページを盛り盛りに

コチラが、WEBサーバ版SNOWの異名を持つ、h5aiの公式ページです。
これを導入することで、こんなに盛れちゃいます。

もはや詐欺。

盛り方(導入手順)

推奨環境としては、公式には Apache httpd, lighttpd, nginx and CherokeeでPHP5.5が導入されている環境 とされています。
執筆にあたって利用したサーバは、OSがCentOS6の、Apache2.2の、PHP7.0という環境です。
ただ実績として、CentOS7の、Apache2.4の、PHP5.4というPHPが古い環境でも問題なく動いています。
また前提として、Indexページが表示される様に設定されていることとします。
(OptionsディレクティブにてIndexesが許可されている)

パッケージのダウンロードと設置
https://larsjung.de/h5ai/
上記公式サイトにて最新版(執筆時点で0.29.0)を入手します。トップページにデカデカとDOWNLOADボタンがあります。
全てサーバ上でCUIで完結される場合は、wgetなどで入手して下さい。
```
wget https://release.larsjung.de/h5ai/h5ai-0.29.0.zip -P {盛るページのディレクトリ}
```
ダウンロードしたzipを展開します。
```
unzip h5ai-0.29.0.zip
rm h5ai-0.29.0.zip
```
Indexページをh5aiのphpプログラムに向ける
h5aiの中身は、Indexページを整形するphpプログラムです。
そのため実装としては、DirectoryIndexディレクティブにて、普段ならindex.htmlとかを設定する部分に、「h5aiのphpを表示する」という命令を付け加える必要があります。
Apacheの該当ディレクティブへの追加でも良いですし、.htaccessによるOverrideが許可されている場合はコチラで適用するのが手軽です。
```
DirectoryIndex index.html index.php /_h5ai/public/index.php
※.htaccessで適用する場合は、h5aiと同ディレクトリに設置してください
```
Apache以外のWEBサーバで設定される場合は、公式ページをご参照ください。

アクセスしてみる
実は設置手順は以上です。
アクセスしてみると、盛り盛りのIndexページが表示されたと思います。

ここでファイルの中身を見てみましょう。するとテキストの場合こんな感じに仕上がっています。

パッと見かっこいいのですが、文字が選択できずコピーできないんですよねコレ...。
そこで、h5aiには設定ファイル_h5ai/private/conf/options.json が用意されており、このプレビューモードを無効化することができます。

vi _h5ai/private/conf/options.json
-------------------------------------------------------------------
242     Show text file preview on click.
243
244     Available styles are:
245       0: floating text
246       1: fixed width text
247       2: markdown
248       3: syntax highlighting
249
250     - styles: dict string to int, maps types to styles
251     */
252     "preview-txt": {
253         "enabled": true,
254         "styles": {
255             "txt": 1,
256             "txt-authors": 1,
257             "txt-c": 3,
...
277             "txt-script": 3,
278             "txt-xml": 1
279         }
280     },

テキストファイルのプレビューは、このあたりですね。
シンタックスハイライトにも対応していることがわかります。txtファイルは、"1"が設定されており、プレビュー表示かつ固定幅テキストとして扱われる様ですね。
今回の様にプレビューを無効化したい場合は、253行目の"enabled"行を"false"に変更することで実現できます。
その他お勧め設定として、ファイルの検索機能があります。(ファイル名のみ)
295行目あたりからがそれです。

vi _h5ai/private/conf/options.json
-------------------------------------------------------------------
295     Allow searching files and folders in and below current folder.
296     Checks for substrings.
297
298     If advanced is enabled it checks entries for right order of characters,
299     i.e. "ab" matches "ab", "axb", "xaxbx" but not "ba". Space separated
300     sequences get OR-ed. Searches will be treated as JavaScript regular
301     expressions if you prefix them with "re:".
302
303     - advanced: boolean, use advanced pattern parsing
304     - debounceTime: number, debounce wait time in milliseconds
305     - ignorecase: boolean, ignore case
306     */
307     "search": {
308         "enabled": false,
309         "advanced": true,
310         "debounceTime": 300,
311         "ignorecase": true
312     },

ここの"enabled"行を"true"にすると、検索ボタンが追加されます。

虫メガネボタンをクリックして検索をスタートします。