SSブログ
2021年08月 ｜ 2021年09月 ｜2021年10月 ブログトップ

apache2 httpdで綺麗にディレクトリ表示する方法　[技術]

ネットを検索すると、httpdのディレクトリ表示はセキュリティがあーだ情報漏洩がこーだ、と否定的な記事が山盛りだが、社内のサーバーでファイル共有に使いたいといった用途には便利だ。気に入らない点は、アイコンが粗雑だったりWindowsで日本語表示させるとフォントが汚らしいこと。レイアウトもなんとなくダサい気がする。そこで、設定だけでどこまで変えられるのか挑戦してみた。

初期状態のファイル一覧をWindows 10のFirefoxで表示した状態がこれ。

default-listing.png

素の状態はダサい。

アイコン

まずアイコン。今時、無料で綺麗なアイコンを提供しているサイトがいくつかある。今回はicons8からアイコンを拝借する。このサイトでは有料のアイコンが多いが、無料のSVGアイコンを探せばそれなりに綺麗なものが揃えられる。有料アイコンの場合、ダウンロードダイアログでSVGの横に錠前の絵が出るので、それ以外を探せばよい。SVGにするのは、拡大しても綺麗に表示されるから。検索する際にはAll stylesをGradientに変更し、色も好きなものを選ぶとよい。
icons8-search.png

たとえばこのcursorアイコンは「親ディレクトリ」用に使える。httpdのディレクトリ表示で使うには、大きさは32px程度がちょうどよい。(以下のアイコンがpngなのはss-blogがsvgを受け付けないため。実際にはZIPアイコン以外はSVGがダウンロード可能なもの。)
icons8-cursor-32.png
そのほかにも無料で使えるアイコンの例
icons8-adobe-acrobat-reader-32.png icons8-adobe-illustrator-32.png icons8-android-os-32.png icons8-apple-logo-32.png icons8-file-32.png icons8-folder-32.png icons8-html-5-32.png icons8-java-32.png icons8-microsoft-excel-32.png icons8-microsoft-powerpoint-32.png icons8-microsoft-word-32.png icons8-python-32.png icons8-zip-32.png

これらのアイコンをSVG形式でダウンロードしたら、httpdの設定ファイルを探し、初期状態のアイコン定義がどうなっているか確認する。Ubuntu 20.04の場合、次のように定義されていることがわかる。
# pwd
/etc/apache2
# grep -r unknown.gif .
./mods-available/autoindex.conf:	DefaultIcon /icons/unknown.gif

つまり/etc/apache2/mods-available/autoindex.confですべてのアイコンを設定しているので、ここで定義されているアイコンをicons8からダウンロードしたものに変更する。以下のように追加し、デフォルトで設定されているアイコンの定義はすべてコメントにする。最下行のAddIconByTypeは最初から書かれている設定で、この上にアイコン設定を追加する。そうしないと一部のアイコン設定の効果が発揮されない。
        AddIcon /icons/icons8/icons8-adobe-acrobat-reader.svg .pdf
        AddIcon /icons/icons8/icons8-adobe-illustrator.svg .ai
        AddIcon /icons/icons8/icons8-android-os.svg .apk
        AddIcon /icons/icons8/icons8-apple-logo.svg .ipa
        AddIcon /icons/icons8/icons8-cursor.svg ..
        AddIcon /icons/icons8/icons8-file.svg .txt
        AddIcon /icons/icons8/icons8-folder.svg ^^DIRECTORY^^
        AddIcon /icons/icons8/icons8-html-5.svg .html .htm .shtml
        AddIcon /icons/icons8/icons8-java.svg .java
        AddIcon /icons/icons8/icons8-microsoft-excel.svg .xlsx .xls
        AddIcon /icons/icons8/icons8-microsoft-powerpoint.svg .pptx .ppt
        AddIcon /icons/icons8/icons8-microsoft-word.svg .docx .doc

        AddIconByType (TXT,/icons/text.gif) text/*

また、DefaultIconのアイコンファイルもsvgに変更しておく。これにより、httpdに含まれている粗雑なアイコンが一掃される。
        DefaultIcon /icons/icons8/icons8-file.svg

次に、ダウンロードしたsvgファイルをhttpdが管理しているディレクトリ下に移動する。まず既存のアイコンがどこにあるか確認する。
# pwd
/etc/apache2
# grep -r 'Directory.*/icons' .
./alias.conf:	<Directory "/usr/share/apache2/icons">

/usr/share/apache2/iconsにあることがわかったので、この中にサブディレクトリを作り、ダウンロードしたsvgを移動する。
# mkdir /usr/share/apache2/icons/icons8
# mv icons8-* /usr/share/apache2/icons/icons8

httpdを再起動すると新しい設定が読み込まれる。
# apachectl restart

アイコン変更後、ブラウザで再読み込みするとこうなった。

svg-icons.png

小汚いアイコンはなくなったとはいえ、まだ全体的な見栄えは悪い。

フォントとCSS

Windowsでは、MSナントカフォントがいつまでも使われていたりして、なんとなくレンダリングが汚らしいのが残念。今時、無料で使えて綺麗なフォントがいろいろあるので、webサーバー側で強制的にフォントを指定してしまうといい。
今回使うのは、Googleから提供されているNoto Sans JP。このリンクを開くとフォントの取り込み方法が画面右下に表示されているので、CSSファイルに設定を行う。
ディレクトリ一覧で使うCSSはIndexStyleSheetで設定する。アイコン設定を行なったautoindex.confでIndexOptionsの下に次の設定を追加する。

	IndexStyleSheet	"/autoindex.css"

次に、/autoindex.cssファイルを作成する。まず/がどのディレクトリにマッピングされるか調べる。
 # grep -r DocumentRoot .

./sites-available/000-default.conf:	DocumentRoot /var/www/html

./sites-available/default-ssl.conf:		DocumentRoot /var/www/html

場所がわかったのでファイルを作る。このcssでNoto Sans JPフォントを読み込ませる。その他のタグについても色や間隔などを設定する。アイコンに合わせて文字は青系で統一し、背景を暗くしてみした。
# cat > /var/www/html/autoindex.css

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100&display=swap');



html {

    font-family: 'Noto Sans JP Thin', 'Noto Sans JP', sans-serif;

}



body {

    margin-left: 20px;

    background-color: #002;

    color: #38f;

}



a {

    text-decoration: none;

}



a:link {

    color: #49f;

}



a:visited {

    color: #8af;

}



a:hover {

    color: #83e;

}



h1 {

    color: #27f;

}



hr {

    border: none;

    height: 1px;

    background: #48f;

}



.indexcollastmod, .indexcolsize, .indexcoldesc {

    padding-left: 20px;

}



address {

    color: #27f;

    font-size: 10pt;

    font-style: italic;

}

残りの設定

httpdのautoindexモジュールでは、拡張子ごとに説明を設定することができる。以下の最初の3行はすでにautoindex.confファイルの中に存在するのでコメントを外し、さらにその下の設定を追加する。
        AddDescription "GZIP compressed document" .gz

        AddDescription "tar archive" .tar

        AddDescription "GZIP compressed tar archive" .tgz

        AddDescription "Adobe PDF" .pdf

        AddDescription "Adobe Illustrator" .ai

        AddDescription "Android Application" .apk

        AddDescription "iOS Application" .ipa

        AddDescription "Parent Directory" ..

        AddDescription "Text file" .txt

        AddDescription "HTML file" .html .htm .shtml

        AddDescription "Java code" .java

        AddDescription "Python code" .py

        AddDescription "Microsoft Excel" .xlsx .xls

        AddDescription "Microsoft PowerPoint" .pptx .ppt

        AddDescription "Microsoft Word" .docx .doc

        AddDescription "Zip file" .zip

最後に、アイコンをicons8.comから取得したことを明記するため、フッターを設定する。autoindex.confで次の設定をおこなう。最初からautoindex.confになんらかの設定がなされているので、パスを書き換える。
        ReadmeName /autoindex-footer.html

また、/autoindex-footer.htmlを作成し、icons8へのリンクを張る。
# cat > /var/www/html/autoindex-footer.html 

<address><a href="https://icons8.com/">Icons by Icons8</a></address>

最終的にこうなった。

final-listing.png

エンジニアのやっつけ仕事とはいえ、デフォルト状態よりはかなりマシになった。配色やアイコンはもう少し工夫の余地があるかもしれない。Windowsの設定が悪いのか、ちょっと暗めでフォントもぼんやりしている。

同じページをMacで表示するとこんな感じで、もう少し発色がよくて、フォントもはっきり見えるんですけどね。

autoindex-blue-mac.png


2021-09-11 00:00  nice!(0)  コメント(0) 
共通テーマ：日記・雑感

2021年08月 ｜2021年09月 ｜2021年10月 ブログトップ

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。