【パブリッシャー】Restfulサービスを利用した書き込みを試してみる

今回は[Sharperlight](https://sharperlight.jp/)のRestfulサービスを利用して、データの書き込み処理をJavaScriptで作成してみます。
データベースもテーブルも何もない状態から始めてみます。
### データベースの準備 ###
Micorosoft SQLサーバーに新しくデータベースを作成します。
#### 新しいデータベース ####
Microsoft SQL Management Studioで新しいデータベースを以下のように作成します。名前は**QiitaTopic**とでもしましょうか。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/4e86b9fb-5f4d-393f-4965-71bdb9f5dbe8.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/b7728c4e-6544-6569-c7bf-a514c7911179.png)
#### テーブルの作成 ####
データを書き込む用のテーブルを一つ準備します。スクリプトで作成します。
```
CREATE TABLE [dbo].[Sales_Items](
	[id] [int] IDENTITY(1,1) NOT NULL,
	[code] [varchar](512) NOT NULL,
	[name] [varchar](1024) NOT NULL,
	[qty] [int] NOT NULL,
	[amount] [decimal](18,0) NOT NULL,
	[date] [datetime] NOT NULL
 CONSTRAINT [PK_Sales_Items_ID] PRIMARY KEY CLUSTERED 
(
	[id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/18ffde4c-4ea6-01f9-ca54-34e5eba15b8e.png)
### データモデルの作成 ###
[Sharperlight](https://sharperlight.jp/)アプリケーションメニューから**スタジオ**を起動します。
新規アイコンをクリックして、先ほど作成したデータベースに接続する準備を始めます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/73c6b79a-f2af-88df-18ca-323c6ceef449.png)
**Description**、**Unique Code**、**Target Platforms**を設定して`OK`ボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/f25a42f3-0f41-b4d1-ca38-845de2c23c90.png)
データベースへの接続詳細を入力するダイアログが表示されるので、正しい接続情報を記述します。`テスト`ボタンで接続を確認することができます。今回はWindows認証を使用しましたが、SQLサーバー認証も使用できます。
`テスト`ボタンで接続が正しく行われることを確認できたなら、`OK`ボタンで保存します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/e46387fa-db87-49cb-ccdd-6ea50964ca5d.png)
データベースのスキーマ情報の読み込みを促すメッセージが表示されます。`Yes`ボタンで次に進みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/f3d536cd-2418-10e0-5aa7-05fdbb6aaaea.png)
インポートオブジェクトダイアログが表示されるので、既定の設定のまま`Get Tables`ボタン（緑のボタン）を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/ee182889-065b-4818-f0c7-25adff3d24ea.png)
データベースのスキーマ情報がツリー形式で表示されるので、全てにチェックが付与されていることを確認して、`OK`ボタンで先に進みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/0e6e5749-cac9-c16d-4438-a8bb4c90e3f3.png)
**一つのテーブルが読み込まれました**というメッセージが表示されるので、`OK`ボタンで先に進みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/9d1d831f-ac2c-680c-5707-b7869ce41df9.png)
テーブルツリーが左側に表示されている状態になるので、**Other**フォルダを開いて表示されるテーブルをダブルクリックします。フィールドの一覧が中央の領域の表示されます。これがスキーマ情報が読み込まれた初期の状態です。
テーブルも**Other**フォルダに入っています。この状態がクエリビルダのテーブル検索ダイアログの表示に反映されます。**Other**フォルダでは意味が不明なので名前を変更するか、またはテーブルをルートフォルダに移動させるかを検討します。
ルートフォルダつまり**Table Display**フォルダに移動させて、**Other**フォルダは削除します。
**Table Display**フォルダを選択し、右クリックメニューから**Move Tables**を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/d6133794-9fd5-18df-9b7c-5d3e42e37bf5.png)
テーブル一覧が表示されるので、チェックを入れてOKボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/945ea5e6-67d5-47a9-7b32-d58ce2cfc0f9.png)
テーブルが移動されたことを確認後、**Other**フォルダを選択し、右クリックメニューから**Delete Folder**を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/236c51bc-d9a5-5a8d-44ab-362b447ff441.png)
確認メッセージが表示されるので、`Yes`ボタンを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/1a6ecf84-4cef-ad41-9144-c29039360cd6.png)
**Other**フォルダが削除されて、このようなスッキリした状態になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/70ab85f2-354a-7542-38bb-9c0386af3372.png)
次に、テーブルをデータ書き込み可能に設定します。<INS>**Sharperlightでは基本的にデータの書き込みは禁止となっています。**</INS>
今回はこのテーブルに対してデータの書き込みを行いたいので、`書き込み可能`の許可をこのテーブルに与えます。
テーブルを選択すると、右端の領域にテーブルプロパティ一覧が表示されるので、**Allow Table Writeback**プロパティを探し出し、**True**を設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/ec579d34-0b85-47bb-bea0-a4d30db05897.png)
これでデータモデルの作成は終了です。**File**メニューから**Exit**を選択します。保存を促すメッセージが表示されるので、`Yes`ボタンで保存します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/d313acf3-c9d4-c6d6-dfa1-bbb340921046.png)
データモデルの保存先に関する注意事項が表示されるので`OK`ボタンで先に進みます。
`指定したフォルダに保存しないとSharperlightで使用することはできませんよ`というメッセージです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/961e4363-c681-2518-c541-f99ecb28968a.png)
ファイルエクスプローラが表示されるので、<INS>保存先はそのままに</INS>して`Save`ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/291e683d-7dd9-f7df-be5e-2860eba1e56d.png)
以上でデータモデルの準備ができました。
### データベースとデータモデルの接続 ###
[Sharperlight](https://sharperlight.jp/)アプリケーションメニューから**クライアントのセットアップ**を起動します。
対象データモデル**QiitaTopic**のデータベース接続情報を設定し、`接続テスト`ボタンで接続を確認します。
`OK`ボタンで保存します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/ebd7e5aa-7db2-6a12-e15e-d8817621ed84.png)
以上で、Sharperlightはデータモデルを介して、データベースと会話することが可能になりました。
次にサービスを有効にします。下図のような設定になります。サービスコードがサービスのURLの一部として使用されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/610b1950-8043-d822-48f5-43f5ff41b4d9.png)
### データ書き込みUIとバックエンドコードの記述 ###
今回の試みでは書き込みデータは固定値として、`Save`ボタン等だけをWebページに配置します。そしてどのようにRESTfulサービスを利用したデータの書き込みを作成していくのかを見ていきます。
#### RESTfulサービスの起動 ####
では早速サービスの起動をします。サービスの起動は、[Sharperlight](https://sharperlight.jp/)アプリケーションメニューから、あるいはWindowsサービスから行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/4947fc62-e8b8-96c7-db72-40a388e084cb.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/becaca5c-1bc7-1bd4-6c01-b7f3e664c324.png)
#### サービスIndexページの表示 ####
サービスが起動したら、インデックスページを表示します。以下のURLを使用します。
```
http://{サーバー名}/mdService1Rest/Index
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/ab91cd42-e7d2-e73a-960c-42fb1996a68c.png)
#### 書き込み用JavaScriptテンプレートの取得 #####
テンプレートへは、インデックスページの書き戻し-> メタデータからアクセスします。製品コードに先ほど作成したデータモデルのコード**QTX**をタイプし、送信ボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/73180d17-0d52-bc7f-748d-e0c608216aeb.png)
すぐ下にテーブル一覧（今回はひとつだけ）が表示されるので、対象テーブル名**Sales Items**を選択します。右側に各種URLとJavaScriptテンプレートが表示されます。
**JavaScript POST Simple**あるいは**JavaScript POST Full**をクリップボードにコピーします。
パブリッシャーで新しいレポートを作成し、`オプション`タブの**ヘッダー**にチェックを入れます。
`編集`ボタンでエディタを起動し、あらかじめクリップボードにコピーしておいたテンプレートを貼り付けます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/b5c2bf72-a93f-0db1-c46c-ff01e1b53910.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/e3a15a17-ac51-c3a6-e2fc-c13c1af8bcf2.png)
そして、書き込みデータは固定値とするので、テンプレートコードのここにテスト用のデータを記述します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/ce3a3b03-9f84-7fce-c84f-c20b98885c07.png)
`OK`ボタンでテンプレートコードを保存します。
`クエリを編集`ボタンでSales Itemsデーブルに対するクエリを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/0a3ecbe4-0492-c8d1-2737-0edbcbc727ce.png)
クエリの作成が済んだらレポートのグループ名とコードを記入して保存します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/442c604e-91f0-61c9-1a3c-966192687c93.png)
右クリックメニューから`レポートの表示`を選択し、レポートをブラウザで表示します。
このようなページが表示されました。
`SAVE`ボタンを押すと先ほど設定したテストデータが、データベースに書き込まれます。
書き込みが成功すると、`SAVE`ボタンはこのように緑色に変わります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/f9f768ce-a719-9b98-0e67-a70395b114ed.png)
レポートを更新するかMicrosoft SQL Management Studioで**Sales_Items**テーブルをクエリして、実際にデータが書き込まれているか確認してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/768835f7-b23d-6455-d9df-4d6b230a63ff.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/4890b1d5-753b-81e8-07ce-bd1252b330cc.png)

このようにSharperlightは単にレポーティングツールではなく、JavaScriptおよびHTML等と共用することで、様々なソリューションをあまり手間をかけないで作り出すことができるのでたいへん面白いです。

では、失礼します。