Indexページは盛れる!

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

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

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

盛り方(導入手順)

推奨環境としては、公式には 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ページが表示されたと思います。
    after.png
    ここでファイルの中身を見てみましょう。するとテキストの場合こんな感じに仕上がっています。
    preview.png
    パッと見かっこいいのですが、文字が選択できずコピーできないんですよねコレ...。
    そこで、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"にすると、検索ボタンが追加されます。
    search.png
    虫メガネボタンをクリックして検索をスタートします。


    以上、Indexページを盛ってみる記事でした。
    みなさん、盛りすぎには注意ですよ!

返信を残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA