SessionDecorator、SiteProfiler の使い方(チュートリアル)
(1) SessionDecorator 、SiteProfiler が正しくインストールされていれば、Fiddler を起動したときに以下のような画面が表示されれます。
![tutorial_01.png](http://www.hagurese.net/blog/File.aspx?key=b14a0d0c-57d1-4ce4-8d5b-b77337e128cd&=x200&y=200)
※それぞれの配布場所はこちら→SessionDecorator、SiteProfiler
(2) SessionDecorator を使って画面遷移を記録してみましょう。
ブラウザに遷移元画面を表示して、画面のイメージをキャプチャーします。
![tutorial_02.png](http://www.hagurese.net/blog/File.aspx?key=1a36b71c-2ea3-4301-ba47-a0748944fc05&=x200&y=200)
画面のイメージをFiddler のセッションに記録します。
![tutorial_03.png](http://www.hagurese.net/blog/File.aspx?key=60af0867-c79f-495d-a21c-799071895774&=x200&y=200)
![tutorial_04.png](http://www.hagurese.net/blog/File.aspx?key=240d2cb4-465d-4da5-9521-ca1980fe3f73&=x200&y=200)
ブラウザを操作して画面を遷移します。画面のイメージをキャプチャーします。
![tutorial_05.png](http://www.hagurese.net/blog/File.aspx?key=ccd32e5a-bf48-40a3-97af-e6cdbad7ff42&=x200&y=200)
画面のイメージをFiddler のセッションに記録します。
![tutorial_06.png](http://www.hagurese.net/blog/File.aspx?key=a7907bcd-d69a-4d2f-bb33-dd7dd59486a5&=x200&y=200)
![tutorial_07.png](http://www.hagurese.net/blog/File.aspx?key=e7410293-7379-46a6-91f1-c6446e5dc58a&=x200&y=200)
区切り線を入れて見やすくしましょう。
![tutorial_08.png](http://www.hagurese.net/blog/File.aspx?key=859794c6-6082-4748-a548-6554dd008768&=x200&y=200)
![tutorial_09.png](http://www.hagurese.net/blog/File.aspx?key=70a4bc2a-b1b5-4aff-b136-0d499433fc01&=x200&y=200)
上記の要領で画面遷移を記録していきます。
![tutorial_10.png](http://www.hagurese.net/blog/File.aspx?key=28cf966d-699d-4156-b1b6-4f7886b44049&=x200&y=200)
(3) セッションに書式を設定してみましょう。
文字色を選択します。
![tutorial_11.png](http://www.hagurese.net/blog/File.aspx?key=c7d96fea-a424-4d2e-ac00-1007f3fc4514&=x200&y=200)
※「A」の文字をダブルクリックして次の色を選択することができます。
背景色を選択します。
![tutorial_12.png](http://www.hagurese.net/blog/File.aspx?key=b2cbab7d-540a-4807-b33a-e05388293973&=x200&y=200)
※「■」の文字をダブルクリックして次の色を選択することができます。
セッションを選択して書式を設定します。
![tutorial_13.png](http://www.hagurese.net/blog/File.aspx?key=dd29b32a-94b4-4f6a-a77b-d3a2ce5fa819&=x200&y=200)
![tutorial_14.png](http://www.hagurese.net/blog/File.aspx?key=72afc64f-82f3-43c7-94e4-fac2eb81093c&=x200&y=200)
※色だけでなく太字、斜体やセッションコメントを設定することができます。
※「Immediate」をチェック状態にしておくと、以降に記録されるセッションに対して自動的に書式を設定します。
※「Erase」で設定された書式を消去します。
(4) SiteProfiler を使って画面遷移情報を作成しましょう。
![tutorial_15.png](http://www.hagurese.net/blog/File.aspx?key=e3dc79f6-a1a7-4a6e-a069-004374cd00cc&=x200&y=200)
![tutorial_16.png](http://www.hagurese.net/blog/File.aspx?key=53152833-5ce2-40c2-939d-8e6fde4ca78f&=x200&y=200)
![tutorial_17.png](http://www.hagurese.net/blog/File.aspx?key=9c30165d-42e3-46de-8cba-b6048be6c748&=x200&y=200)
※Fiddler のセッションはドラッグ&ドロップ操作で取り込みます。
※画面イメージをファイルから取り込みたいときは右クリック
次の画面遷移情報を作成します。
![tutorial_18.png](http://www.hagurese.net/blog/File.aspx?key=29c2ff84-ebe4-4987-9cf0-a4d8bf4c8ec8&=x200&y=200)
登録済みの画面名、アクション名はリストから選択することができます。
![tutorial_19.png](http://www.hagurese.net/blog/File.aspx?key=a03f4b95-dd9c-481d-9d5c-c4434998d5dc&=x200&y=200)
全部入力したら、画面遷移の一覧を表示して調整します。
![tutorial_20.png](http://www.hagurese.net/blog/File.aspx?key=8b2e810c-0ff9-41ed-9e8c-7c772ccddd8c&=x200&y=200)
![tutorial_21.png](http://www.hagurese.net/blog/File.aspx?key=7b366920-e7bd-4839-b124-43d6884f4b49&=x200&y=200)
セッションの詳細を表示して調整します。
![tutorial_22.png](http://www.hagurese.net/blog/File.aspx?key=dd688958-67e7-427e-953b-5c45e0b59ca8&=x200&y=200)
![tutorial_23.png](http://www.hagurese.net/blog/File.aspx?key=de6bf4c3-0e5e-40b2-8db8-0c547d960bfb&=x200&y=200)
![tutorial_24.png](http://www.hagurese.net/blog/File.aspx?key=a8ab7700-22f8-4e61-b3c7-66df26f60ce9&=x200&y=200)
![tutorial_25.png](http://www.hagurese.net/blog/File.aspx?key=be054463-883e-419f-abcf-059d03b0a0b8&=x200&y=200)
※MIMETypeや文字セットは「Content-Type」ヘッダーで判断していますが、ヘッダー情報がない場合や誤りがある場合には、こちらで個別に指定してください。
(5) レポートを出力してみましょう。
![tutorial_26.png](http://www.hagurese.net/blog/File.aspx?key=ad783f92-c8ff-4039-a224-f7894c442753&=x200&y=200)
![tutorial_27.png](http://www.hagurese.net/blog/File.aspx?key=316aa673-0b1d-43f9-b55a-a8c8d4cf2e7d&=x200&y=200)
HTML形式で以下のようなサンプルレポートが出力されます。
![tutorial_28.png](http://www.hagurese.net/blog/File.aspx?key=c3e87d92-b447-4f4b-b71e-579b9eb4febe&=x200&y=200)
(6) データを保存してみましょう。
![tutorial_29.png](http://www.hagurese.net/blog/File.aspx?key=a3f68174-760f-4b93-bbea-3149df25eaa1&=x200&y=200)
(7) カスタマイズしてみましょう。
![tutorial_30.png](http://www.hagurese.net/blog/File.aspx?key=0c31b899-c664-4282-9390-c7005cb271ab&=x200&y=200)
よく使う画面名、アクション名はこちらに登録しておくとリストから選択できます。
![tutorial_31.png](http://www.hagurese.net/blog/File.aspx?key=14b1e203-69c5-489f-ac53-065004c917dc&=x200&y=200)
レポート出力の処理はC#のスクリプトで記述されています。サンプルレポートを参考にしてカスタマイズしてみましょう。
![tutorial_32.png](http://www.hagurese.net/blog/File.aspx?key=c54eae7e-d7fd-4769-9f74-1bfc4e4e6a76&=x200&y=200)
最後に
前作「DropObjects」の「TargetExport」機能で出力していたExcelファイルとほぼ同等のものを出力するスクリプトをご用意しました。
SiteProfilerスクリプト集の「確認項目表(Excel)作成スクリプト.txt」です。・・・(2015/07/11 GitHubにて公開しました。)
※こちらも自己責任でご自由にお使いください。