ディレクトリの参照のページを CSS でカスタマイズ

## 導入

ディレクトリの参照を有効 IIS でフォルダ参照しているけど、ものすごく簡素。スタイルシートを適用したい。
どうやら『URL 書き換え』を利用すればできるそうだ。
そして、手順の最後にある通り、必須条件の設定は不要そうなので、再手順だけの設定だけでよさそう！

## 環境
Windows8.1 64bit
IIS8.5

## 手順
(1) [URL Rewrite](http://www.iis.net/downloads/microsoft/url-rewrite) をダウンロード

> Web Platform Installer も必要と言われた。ので、インストールした。

(2) ダウンロードした urlrewrite2.exe を実行

> インストール済みだといわれた・・・
> ![image](https://qiita-image-store.s3.amazonaws.com/0/81548/de6e989e-8f44-fbee-4d07-ce9653e38ece.png)

(3) 適用する CSS ファイルを作成

(4) CSS ファイルは適当な場所に保管

(5) IIS マネージャを起動

> inetmgr

(6) [接続] ペインから、CSS を適用するサイトやディレクトリを選択

(7) 中央ペインから [URL 書き換え] をダブルクリック

(8) [操作] ペインから [送信規則]-[必須条件の表示...] を選択

(9) 送信規則の必須条件画面の [操作] ペインから [追加] を選択

(10) 必須条件の追加ダイアログの各項目に下記を入力

| 項目名 | 値 |
|:--|:--|
|名前:|任意の必須条件名 (例: フォルダ参照の必須条件)|
|使用:|正規表現|
|論理グループ化|すべて一致|

(11) 必須条件の追加ダイアログの [追加] ボタンをクリック

(12) 追加の条件ダイアログの各項目を下記のように入力し、[OK] ボタンを押す

| 項目名 | 値 |
|:--|:--|
|条件の入力|{REQUEST_FILENAME}|
|入力文字列が次の条件を満たしているかどうかをチェック:|   パターンに一致する|
|パターン|	¥¥$|
|大文字と小文字を区別しない|チェック|

(13) 再度、必須条件の追加ダイアログの [追加] ボタンをクリックし、下記のように入力して追加する

| 項目名 | 値 |
|:--|:--|
|条件の入力|{HTTP_CONTENT_TYPE}|
|入力文字列が次の条件を満たしているかどうかをチェック:|   パターンに一致する|
|パターン|^text/html|
|大文字と小文字を区別しない|チェック|

> 最終的にこんな感じ
> ![image](https://qiita-image-store.s3.amazonaws.com/0/81548/0afedcd4-f4e9-b952-80e3-cdd59e2be6c0.png)

(14) すべての入力が完了したら必須条件の追加ダイアログの[OK]ボタンを押す

(15) [操作] ペインから [規則に戻る] を選択

(16) URL 書き換え画面の [操作] ペインから [追加] を選択

(17) 規則の追加ダイアログより、[送信規則]-[空の規則] を選択し、[OK] ボタンを押す

(18) 送信規則の編集画面にて、各項目に下記を入力

| 項目名 | 値 |
|:--|:--|
|名前:|任意のルール名 (例: フォルダ一覧)|
|必須条件:|(10) で入力した必須条件名 (例: フォルダ参照の必須条件)|
|**一致**||
|一致するスコープ:|応答|
|一致するコンテンツの範囲:|選択しない|
|カスタム タグ:|選択不可|
|コンテンツ:|パターンに一致する|
|使用:|完全一致|
|パターン:|`</head>`|
|大文字と小文字を区別しない:|チェック|
|**条件**||
||※特にそのままで良い|
|**アクション**||
|アクションの種類:|書き換え|
|アクションのプロパティ - 値:|(2) で作成したCSSファイルを読み込むlinkタグに続けて</head>を記入　(例: `<link type="text/css" href="/css/default.css" rel="stylesheet" /></head>`)|
|後続の規則の処理を停止する|ディレクトリの参照の表示に、他の書き換え規則を適用する可能性がない場合のみチェック。それ以外の場合、チェックしない。|

> こんな感じ
> ![image](https://qiita-image-store.s3.amazonaws.com/0/81548/52690fc8-d7e6-5fa9-7cc8-f7e1e07c47a6.png)


(19) [操作] ペインから [適用] を選択

(20) [操作] ペインから [規則に戻る] を選択

以上で設定完了

## と思ったのに・・・

設定できなかった。

## 必須条件があるとうまく動作しない様子

というわけで、パターンを修正して必須条件不要にする。

## 再手順

(1) [URL Rewrite](http://www.iis.net/downloads/microsoft/url-rewrite) をダウンロード

> Web Platform Installer も必要と言われた。ので、インストールした。

(2) ダウンロードした urlrewrite2.exe を実行

> インストール済みといわれた・・・
> ![image](https://qiita-image-store.s3.amazonaws.com/0/81548/de6e989e-8f44-fbee-4d07-ce9653e38ece.png)

(3) 適用する CSS ファイルを作成

(4) CSS ファイルは適当な場所に保管

(5) IIS マネージャを起動

> inetmgr

(6) [接続] ペインから、CSS を適用するサイトやディレクトリを選択

(7) 中央ペインから [URL 書き換え] をダブルクリック

(8) URL 書き換え画面の [操作] ペインから [規則の追加] を選択

(9) 規則の追加ダイアログより、[送信規則]-[空の規則] を選択し、[OK] ボタンを押す

(10) 送信規則の編集画面にて、各項目に下記を入力

| 項目名 | 値 |
|:--|:--|
|名前:|任意のルール名 (例: フォルダ一覧)|
|必須条件:|＜なし＞|
|**一致**||
|一致するスコープ:|応答|
|一致するコンテンツの範囲:|選択しない|
|カスタム タグ:|選択不可|
|コンテンツ:|パターンに一致する|
|使用:|完全一致|
|パターン:|`</head><body><H1>`|
|大文字と小文字を区別しない:|チェック|
|**条件**||
||※特にそのままで良い|
|**アクション**||
|アクションの種類:|書き換え|
|アクションのプロパティ - 値:|(2) で作成したCSSファイルを読み込むlinkタグに続けて</head>を記入　(例: `<link type="text/css" href="/css/default.css" rel="stylesheet" /></head><body><H1>`)|
|後続の規則の処理を停止する|ディレクトリの参照の表示に、他の書き換え規則を適用する可能性がない場合のみチェック。それ以外の場合、チェックしない。|

(11) [操作] ペインから [適用] を選択

(12) [操作] ペインから [規則に戻る] を選択

以上で設定完了

> ただし、この方法だと自分で作成したページもパターンに一致した場合は書き換えが適用されてしまうので注意！

## 動作確認

フォルダ一覧のページのソースを確認すると、CSS が設定されていることがわかる。

> ![image](https://qiita-image-store.s3.amazonaws.com/0/81548/096cef13-20c2-4eb4-eb36-8bc706187e3e.png)

 
## 参考
[ディレクトリの参照の表示にスタイルシートを適用する - Windows Maniax](http://www.windows-maniax.com/kuniteru/iis/iis-tips271.html)