【パブリッシャー】WebレポートにExcelダウンロード用アイコンを追加してみる

# はじめに #
Sharperlightパブリッシャーは、お好みのデータソースからダイナミックに抽出したデータを元に、表やチャートなどを作成しブラウザ上で可視化することを手助けするエンドユーザー向けアプリケーションです。
今回は、表として作成したものをマイクロソフトエクセルファイルとしてダウンロードするためのアイコンを追加する方法、および装飾を試してみようと思います。

# Webレポートの作成 #
Sharperlightアプリケーションメニューよりパブリッシャーを起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/21c9681d-5ec2-1a29-1be2-558eddf85556.png)
パブリッシャーが起動したら、`新規`ボタンでWebレポートの作成を開始します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/e38e3b51-df7b-2c4b-adfd-8487d83f37f8.png)
先ず**コード**、**グループ**、**タイトル**および**レポートのタイトル**を入力します。
**コード**と**グループ**でこのレポートの**一意のコード**となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/f7a822df-389e-907a-768a-bc0182a48368.png)
次にレポートの核となるクエリを作成します。
`クエリーを編集`ボタンでクエリビルダを起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/9b0edd72-8254-a36f-6be1-db0ee855a21c.png)
クエリビルダでは既存のデータベースを利用します。
Sharperlightは基本的にデータモデルを介してデータベースと会話します。そのデータモデルを`製品`と呼んでいます。ここではフィルター領域の`製品`でどのデータモデルに接続するかを指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/c5c9bb18-a344-b493-5ae1-f1839ce59675.png)
データモデルが指定されると、そのデータモデルに定義されている各テーブルにアクセス可能となります。
フィルター領域の`テーブル`では、使用するテーブルをその一覧から選ぶことになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/b8688201-94ca-e606-cf68-fe9a793528ac.png)
テーブルが指定されると、今度はそのテーブルに属する列およびJOIN情報が選択領域にツリー形式で表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/64672923-12bf-7403-1dd5-7461cdf77ccc.png)
選択領域に表示された列の中からどの列のデータを出力するかを選択することになります。
出力したい列をダブルクリックあるいはドラッグ＆ドロップで出力領域に設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/7dee21c3-cc95-4389-e687-ed30b67f444d.png)
また、フィルターアイテムとしてフィルター領域にドラッグ＆ドロップで設定することも可能です。今回は**売上日**、**区名**および**製品分類名**を指定しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/4eaaa01a-e3c1-15fc-b578-44ff146876dc.png)
出力領域の最下段のアイテム**金額**は、選択領域には存在しません。
これは**拡張表現式**といって、Sharperlightが提供する拡張オプションのひとつです。
ここでは`販売価格`x`数量`という式を定義して金額を求めています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/e6c9631b-a966-0788-b872-faa06a8702f0.png)
`プレビュー`ボタンでクエリを検証します。今回はデータが表示されれば良しとします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/8439e4a7-842d-c727-7e48-896af9186b39.png)
`クエリに戻る`ボタンでクエリ定義画面の戻り、`OK`ボタンでクエリを保存します。

次に`オプション`タブに移動します。既定の出力形式が**Table**になっていることを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/01aeb049-d362-7038-f1a3-e7b55465d23a.png)
その他様々なオプションは既定のままで、`OK`ボタンを押してWebレポートを保存します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/4a91a9cc-886f-3770-4ae8-12d7cf020173.png)

Sharperlightアプリケーションメニューより、あるいはWindowsサービスダイアログから**Sharperlightサービス**を起動します。
アプリケーションメニューより。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/6e235c76-35db-f153-8e3e-e45e93aa8fbe.png)
あるいはWindowsサービスダイアログから。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/ca10e7b6-3f8a-7c89-fd3a-7c8234ce4a9b.png)
パブリッシャーに戻り、先ほど作成したレポートを選択し、右クリックメニューから**レポートの表示**を実行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/2913417a-9014-b065-4a39-750c51b7c53b.png)
既定ブラウザにこのような表が表示されます。
クエリビルダでフィルター領域に設定した列がレポート上部に表示されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/6987c382-a969-ed23-f292-1477d8471d05.png)
これで基本となるWebレポートが完成です。

# アイコンの表示 #
では、ダウンロード用のエクセルアイコンを追加してみます。
もう一度パブリッシャーに戻り、先ほどのWebレポートの定義を開きます。
`オプション`タブに移動し、右下方にある`アイコン Excel`チェックボックスを**オン**にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/e952986f-adb1-20f0-bf9c-5c8fa3b421dd.png)
Webレポートの定義を`OK`ボタンで保存し、ブラウザ上に表示されているレポートをF5キーで更新します。
右隅にエクセルアイコンが表示されました。クリックすると表示されている情報がエクセルファイルとしてダウンロードされます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/7e4a2a0a-2c62-0ee0-fc3a-dcb3b81f661a.png)

# アイコンの装飾 #
”**でも、アイコンが小さい、もっと大きくしたい**”って思いませんか？
そんな場合は、CSSを利用しましょう。
もう一度パブリッシャーに戻り、先ほどのWebレポートの定義を開きます。
`オプション`タブの中ほどにある`ユーザー設定のスタイル CSS`を**オン**にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/96a853c4-169f-e3cf-35cc-012460a0921b.png)
`編集`ボタンでエディタを開き、以下のCSS構文を貼り付けます。(あくまでも一例です）
```
<style type="text/css">
.k-i-excel {
    font-size: 40px;
    margin-right: 50px;
}
</style>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/8f72271a-c5b5-0085-9469-f8e7f1890cbc.png)
変更を保存し再度レポートを更新してみます。
アイコンが大きく表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/a3db81cc-4fdc-6e20-5437-962f17dab697.png)

このようにアイコン等のクラス名やIDをブラウザ標準の開発者支援ツールを利用して探し出し、それらを装飾し直すことが可能です。（場合によっては出来ないこともあります）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/8fedb48d-313a-bd36-6bcb-32e8837831cd.png)

# おわりに #
Sharperlightで作成したWebレポートはHTMLとCSSで構成された標準的なHTMLページです。
今回試してみたように、場合によってはサイズ変更や表示位置等を自由に変更することができますね。
是非試してみてください。