ASP.NET Web API コントロール

2016.05.18 更 新 グレープシティ 株 式 会 社

目 次 ComponentOne Studio for Web API 3 インストール 3-4 システム 要 件 4 Web APIクライアントJavaScriptの 追 加 4-5 Web APIの 使 用 5-6 Web API の 設 定 6-8 ストレージの 設 定 8-10 サーバー 側 の 接 続 文 字 列 の 設 定 10-12 クライアントアプリケーションの 設 定 12 クライアントアプリケーションの 作 成 12-16 REST APIサービス 用 のクライアントアプリケーション 16-18.NETコレクションの 設 定 18 再 配 布 可 能 ファイル 18-19 Web API Editionの 制 限 19-20 サービス 21 レポートサービス 21 レポートリストサービス 21 レポートのサービス 21 レポートロードサービス 21-22 パラメータ 情 報 22 サポート 形 式 サービス 22-23 エクスポート 23-24 レポートキャッシュサービス 24 Excelサービス 24-25 エクスポートサービス 25 ExcelへのFlexGridのエクスポート 25-27 インポートサービス 27 FlexGridへのExcelのインポート 27-29 Excelサービスの 生 成 29-32 ストレージ 内 のXMLからExcelを 生 成 32-34 1 Copyright GrapeCity inc. All rights reserved.

ストレージ 内 のデータソースからExcelを 生 成 34-36 ストレージからのデータを 使 用 したワークブック 形 式 の 変 換 36-39 クライアントからポストされたXMLからExcelを 生 成 39-42 クライアントからポストされたJSONデータからExcelを 生 成 42-45 クライアントからポストされたデータを 使 用 してワークブック 形 式 を 変 換 45-49 Excelサービスの 結 合 49-50 ストレージに 存 在 する 複 数 のExcelファイルを 結 合 50-52 クライアントからポストされた 複 数 のExcelファイルを 結 合 52-55 画 像 サービス 55-56 エクスポートサービス 56 BulletGraphの 画 像 エクスポート 56-58 RadialGaugeの 画 像 エクスポート 58-60 FlexPieの 画 像 エクスポート 60-63 FlexChartの 画 像 エクスポート 63-65 LinearGaugeの 画 像 エクスポート 65-67 バーコードサービス 67-68 テキストからバーコードを 生 成 68-71 サポートされているバーコードシンボル 71-76 バーコード 機 能 76-79 2 Copyright GrapeCity inc. All rights reserved.

ComponentOne Studio for Web API ComponentOne Studio for Web API は ASP.NET Web APIおよびASP.NET 5 技 術 の 上 に 構 築 されたHTTPサービスセット です Web API は Visual Studio 内 でサービスを 作 成 したり サービスを 詳 細 にカスタマイズするために Visual Studioテンプ レートとして 使 用 されます 作 成 したサービスアプリケーションは HTTPでWebに 公 開 できます Web API は 複 数 のプラットフォーム 上 に 展 開 して さまざまなホストオプションをサポートするように 設 計 されています IIS 展 開 クラウド 展 開 として 実 行 できるほか セルフホストすることもできます 展 開 されたサービスアプリケーションは 幅 広 いクラ イアント(モバイルデバイス ブラウザなど)に 対 してサーバー 側 として 機 能 します 以 下 のトピックでは Web API のインストール ライセンス テクニカルサポートなどについて 説 明 します このセクションは Web API サービスの 使 用 を 開 始 するにあたって 役 立 つ 情 報 を 提 供 することを 目 的 としています サービスの 使 用 方 法 の 詳 細 については サービス セクションを 参 照 してください インストール c1.grapecity.comからインストーラc1studioinstaller.exeをダウンロードします インストールウィザードの 手 順 に 従 って Web APIのASP.NET DLL テンプレート 依 存 DLL スタイルシート およびスクリプトをインストールします Web APIサービスは Visual Studioテンプレートとして 提 供 され Web APIのインストール 後 に 使 用 できるようになります Visual StudioでComponentOneテンプレートを 使 用 してWeb APIサービスアプリケーションを 作 成 すると テンプレートによっ てC1.Web.API.dll C1.C1Excel.dllなどの 関 連 アセンブリへの 参 照 がサービスプロジェクトに 追 加 されます メモ: Web API Editionをインストールした 後 は お 使 いのWindows 10マシンを 一 度 ログオフするか 再 起 動 し その 後 サービスアプリケーションを 作 成 して 必 要 な 環 境 変 数 が 設 定 されるようにすることをお 勧 めします ただし Windows 10にWeb API Editionをインストールした 後 そのままサービスアプリケーションを 作 成 すると 必 要 な 環 境 変 数 は 設 定 されません サンプル 製 品 のサンプルは デフォルトでComponentOne Samplesフォルダにインストールされます C:\Users\<User Name>\Documents\ComponentOne Samples\Web Api Web APIライブラリをNuGetから 追 加 するには ComponentOne Web APIライブラリは NuGetを 介 して 提 供 されます NuGetは ライブラリと 参 照 を 自 動 的 にプロジェクトに 追 加 するVisual Studioの 拡 張 機 能 です Web API 用 のNuGetパッケージは http://nuget.grapecity.com/nugetからweb APIサービスアプリケーションに 追 加 できます このパッケージは Web API Editionがインストールされると Visual Studioで 使 用 できるようになります ライブラリをNuGetからサービスアプリケーションに 追 加 するには 次 の 手 順 を 実 行 します NuGetをインストールするには 1. http://nuget.org/にアクセスし [Install NuGet]をクリックします 2. NuGet.vsixインストーラを 実 行 します 3. [Visual Studio 拡 張 機 能 インストーラ]ウィンドウで [インストール] [インストール]をクリックします 4. インストールが 完 了 したら [ [ 閉 じる]をクリックします Web API 参 照 をサービスアプリケーションに 追 加 するには 1. 新 しいWeb APIプロジェクトを 作 成 します( Web APIの 設 定 を 参 照 ) 2. ソリューションエクスプローラーで [ [ 参 照 ]を 右 クリックし [NuGetパッケージの 管 理 ]を 選 択 します 3. NuGetパッケージマネージャー パッケージマネージャーで C1.Web.APIパッケージを 検 索 します 4. [インストール]をクリックします NuGetパッケージソースを 手 動 で 作 成 するには 3 Copyright GrapeCity inc. All rights reserved.

1. Visual Studioで [ツール]メニューから[NuGetパッケージマネージャー] パッケージマネージャー] [パッケージマネージャー 設 定 ]を 選 択 しま す [オプション] [オプション]ダイアログボックスが 表 示 されます 2. 左 ペインで [NuGetパッケージマネージャー] パッケージマネージャー] [パッケージソース] [パッケージソース]を 選 択 します 3. 右 上 隅 にある[ [ 追 加 ]ボタンをクリックします [[ 使 用 可 能 なパッケージソース]に 新 しいソースが 追 加 されます 4. 新 しいパッケージソースの 名 前 を 設 定 し ソース は http://nuget.grapecity.com/nugetに 設 定 します 5. [ 更 新 ]をクリックし [OK]をクリックします これで NuGetパッケージソースが 作 成 されました システム 要 件 Web APIをインストールするには 以 下 のコンポーネントがシステムにインストールされている 必 要 があります C1.Web.Api 4(Web API 2.2の の 場 合 ) ここにタブコンテンツを 挿 入 します.NET 4.5 以 上 Visual Studio 2012 2013 2015 IIS 7 以 上 (IISでホストする 場 合 ) C1.Web.Api 5(Web API 3の の 場 合 ).NET.NET 4.5 以 上 Visual Studio 2015 IIS 7.5 以 上 (IISでホストする 場 合 ) ブラウザのサポート Internet Explorer 9 以 上 Mozilla Firefox Safari Web APIクライアントJavaScriptの 追 加 クライアントアプリケーションはWeb APIサービスアプリケーションに 要 求 を 送 信 します Web APIは Webプラットフォーム 内 で この 要 求 を 生 成 するためのJavaScriptクライアントコードを 提 供 しています ComponentOne Web APIクライアントJavaScript ファイルwebapiclient.min.jsは WijmoおよびMVCコントロール 用 のエクスポート/インポート 拡 張 jsです これは クライアン トアプリケーションからサーバー 側 を 呼 び 出 すためのAPIを 提 供 します RESTベースのAPIサービスを 使 用 するためには クライアントJavaScriptファイルは 不 要 であることに 注 意 してください RESTful サービスの 呼 び 出 しには リクエストメソッドのGETとPOSTを 使 用 します メモ: [webapiclient.min.js]ファイルは デフォルトではC:\Program Files (x86)\componentone\web Api Edition\clientにインストールされます クライアントアプリケーションにWeb APIクライアントJavaScriptファイルを 追 加 して 使 用 するには 次 の 手 順 を 実 行 します MVC 4 Copyright GrapeCity inc. All rights reserved.

1. webapiclient.min.js ファイルをクライアントプロジェクトの [Scripts] フォルダに 追 加 します 2. webapiclient.min.js 参 照 を [Views] [Shared] [_Layout.cshtml] ファイルに 追 加 しま す "webapiclient.min.js" ファイルを ソリューションエクスプローラー からこのファイルの 上 部 にあるスクリプト 設 定 の 場 所 にドラッグします クライアントプロジェクトがあるフォルダにwebapiclient.min.jsファイルを 追 加 します webapiclient.min.jsファイルへの 参 照 を 他 のWijmo 参 照 と 共 にページの<head>タグ 内 に 追 加 します クライ アントJavaScriptファイルを Scripts フォルダに 配 置 した 場 合 追 加 する 参 照 は 次 のようになります 1. クライアントプロジェクトがあるフォルダに"webapiclient.min.js"ファイルを 追 加 します 2. webapiclient.min.js ファイルへの 参 照 を 他 のWijmo 参 照 と 共 にページの<head>タグ 内 に 追 加 します クライ アントJavaScript ファイルを Scripts フォルダに 配 置 した 場 合 追 加 する 参 照 は 次 のようになります <script src="scripts/webapiclient.min.js" type="text/javascript"></script> Web APIの の 使 用 Web APIは ASP.NET Web APIまたはASP.NET 5を 使 用 して 実 装 できる 次 世 代 のサービスセットです 最 初 にVisual Studioで サービスプロジェクトを 作 成 したら それをIIS 上 に 展 開 するか セルフホストする 必 要 があります これで クライアントアプリ ケーション(MVCアプリケーション ベースのアプリケーション デスクトップアプリケーション または 他 の 一 般 的 なアプリ ケーション)は これらのWeb APIサービスを 呼 び 出 すことでExcelファイルのエクスポートとインポート ( 目 的 の 形 式 での) 画 像 5 Copyright GrapeCity inc. All rights reserved.

のエクスポート 指 定 されたデータおよびテンプレートからのExcelファイルの 生 成 および 指 定 されたテキストからのバーコー ドの 生 成 を 実 行 することができます 以 下 のトピックでは Web APIサービスプロジェクトの 作 成 および 展 開 方 法 サービスプロジェクトを 使 用 するクライアントアプリ ケーションの 作 成 方 法 について 説 明 します 開 始 する 前 に システム 要 件 を 参 照 してください Web API の 設 定 このトピックでは Web APIサービスアプリケーションをVisualStudioで 作 成 し IIS 上 に 展 開 する(またはセルフホストする) 方 法 につい て 説 明 します これにより クライアントアプリケーションに 対 するサーバー 側 (エンドポイント)が 構 築 されます クライアントアプリケー ションは サービスにアクセスするためにエンドポイントに 要 求 を 送 信 し 応 答 を 受 信 します 次 の 画 像 は ホストされているWeb APIサービスアプリケーションを 示 します Web API 2.2 1. Visual Studio 2013を 開 き [ファイル] [ファイル] [[ 新 規 作 成 ] [プロジェクト]を 選 択 して 新 しいWeb APIサービスプロジェクトを 作 成 します 2. インストール 済 みテンプレートから [Visual C#] [Web] [IISでホストされた C1 Web API アプリケーション] (IISでホストさ れるサービスアプリケーションを 作 成 する 場 合 )または [Visual C#] [Web] [セルフホスト[セルフホスト C1 Web API アプリケーション] (セルフホストされるサービスアプリケーションを 作 成 する 場 合 )を 選 択 します 6 Copyright GrapeCity inc. All rights reserved.

3. アプリケーションの[ 名 前 ]および[ 場 所 ]を 設 定 します 4. Visual StudioまたはIISでアプリケーションを 実 行 します ComponentOneテンプレートは この 新 しいプロジェクトに C1.Web.Api.dll C1.C1Excel.dll phantomjs.exeなどの 関 連 アセ ンブリへの 参 照 を 追 加 します license.licxファイルは アプリケーションに 自 動 的 に 追 加 されます 5. これでサービスプロジェクトを 設 定 できました プロジェクトをIIS 上 に 展 開 するか(IISでホストされるサービスアプリケーションの 場 合 ) 単 にアプリケーションを 実 行 して(セルフホストされる 場 合 ) 使 用 を 開 始 します IIS Web APIテンプレートはIIS 展 開 として 使 用 されます また セルフホスト WebAPIテンプレートは 1つのプロセス 内 で 実 行 で きる 実 行 可 能 サービスとして 使 用 されます Web API 3 1. Visual Studio 2015を 開 き [ファイル] [ファイル] [[ 新 規 作 成 ] [プロジェクト]を 選 択 して 新 しいWeb APIサービスプロジェクトを 作 成 します 2. インストール 済 みテンプレートから [Visual C#] [Web] [C1 Web API Application for ASP.NET 5]を 選 択 します 7 Copyright GrapeCity inc. All rights reserved.

3. アプリケーションの[ 名 前 ]および[ 場 所 ]を 設 定 します 4. ランタイムライセンスをアプリケーションに 追 加 します 5. Visual StudioまたはIISでアプリケーションを 実 行 します ComponentOneテンプレートは この 新 しいプロジェクトに C1.Web.Api.dll C1.C1Excel.dll phantomjs.exeなどの 関 連 アセンブリへ の 参 照 を 追 加 します サーバー 側 が 作 成 されます これで 起 動 したWebAPI サービスに 対 して 生 成 されたURLを 使 用 して クライアントアプリケーションか らサービスプロジェクトを 呼 び 出 すことができます 上 の 例 では サービスは http://demos.componentone.com/aspnet/c1webapiservice/ でホストされています このURLは サービス セクションの 例 で 使 用 します メモ: REST APIサービスを 使 用 するクライアントアプリケーションは 構 成 されたリモートまたはローカルストレージのデータをア クセスすることができます ローカルストレージを 構 成 する 方 法 のためにストレージの 設 定 サーバー 側 の 接 続 文 字 列 の 設 定.NETコレクションの 設 定 を 参 照 してください OneDriveなどのようなリモートストレージをデータのリポジトリとして 構 成 の 詳 細 については ComponentOneのサンプルフォルダにインストールされているWeb APIのサンプルプロジェクトを 参 照 してくださ い ストレージの 設 定 Web APIサービスアプリケーションを 作 成 し ホストした 後 オプションでそこにストレージを 構 成 できます ストレージは サー バー 側 またはリモートの 場 所 でデータのリポジトリとして 機 能 します データベースまたはデータファイルから クライアントアプ リケーションにデータを 提 供 します クライアントアプリケーションは このデータを 使 用 し GET 要 求 を 通 してREST APIサービス を 利 用 して 目 的 の 形 式 でExcelファイルを 生 成 変 換 および 結 合 します ユーザーがGET 要 求 を 発 行 すると クライアントアプリケーションは 構 成 されたストレージからデータ/ファイルをフェッチしま す ストレージには リモートストレージまたはローカルストレージを 使 用 できます リモートストレージは クラウド 上 に 存 在 する 場 合 や ホストサービスを 構 成 したサーバーとは 別 のサーバー 上 に 存 在 する 場 合 があります 一 方 ローカルストレージは ホ ストサービスが 配 置 されているサーバーと 同 じサーバーに 存 在 します このセクションでは サービスアプリケーション 内 でロー カル 保 存 フォルダを 作 成 構 成 する 方 法 を 具 体 的 に 説 明 します また 以 降 の 各 セクションでは ローカルストレージを 構 成 す るためのサーバー 側 接 続 文 字 列 および.NETコレクションについて 説 明 します Web APIの 設 定 トピックで 作 成 したWeb APIサービスでローカルストレージを 構 成 するには 次 の 手 順 を 実 行 します 1. サービスアプリケーションで [Files]という 名 前 のフォルダを 作 成 します 2. 目 的 のデータファイルをこのフォルダに 追 加 します 8 Copyright GrapeCity inc. All rights reserved.

3. サービス 内 でこのストレージを 構 成 するには 以 下 に 示 すように GetFullRoot() メソッドを 呼 び 出 し その 値 をWeb APIサービスプロジェクトのStartup.cs ファイル 内 のConfiguration (IAppBuilder app) メソッドのローカル 変 数 folderに 渡 します C# var folder = GetFullRoot("Files"); 4. 以 下 に 示 すように Startup クラス 内 でGetFullRoot()メソッドを 定 義 します C# private static string GetFullRoot(string root) var applicationbase = AppDomain.CurrentDomain.SetupInformation.ApplicationBase; var fullroot = Path.GetFullPath(Path.Combine(applicationBase, root)); if (!fullroot.endswith(path.directoryseparatorchar.tostring(), StringComparison.Ordinal)) // GetFullPathで 一 致 を 判 定 する 場 合 は 完 全 なディレクトリ 名 のみとの 一 致 が 判 定 されます fullroot += Path.DirectorySeparatorChar; return fullroot; 5. 以 下 に 示 すように Startup.cs 内 のConfiguration メソッドのAddDiskStorage() メソッドを 通 して ディスクストレー ジをサービスアプリケーションの[StorageProviderManager]に 追 加 します 9 Copyright GrapeCity inc. All rights reserved.

C# app.adddiskstorage("root", folder); このメソッドは ルート 名 およびストレージの 完 全 パスを 取 ります 保 存 フォルダに 適 切 な 名 前 たとえば この 場 合 に は"root"を 付 けます サーバー 側 の 接 続 文 字 列 の 設 定 また データベースファイルからのデータを 使 用 して Excelファイルを 生 成 結 合 および 変 換 できます 接 続 文 字 列 も 設 定 す る 必 要 があります 以 下 の 例 では C1NWind という 名 前 のローカルに 使 用 可 能 なmdbファイルをストレージとして 使 用 し ま た OleDbデータプロバイダを 使 用 します ただし データベースファイルはローカルに 配 置 されている 場 合 やSQL Serverに 存 在 する 場 合 があり また 他 のデータプロバイダも 使 用 できます ローカルに 使 用 可 能 な"C1NWind.mdb" データベースファイルの 接 続 文 字 列 を 設 定 するには 次 の 手 順 を 実 行 します 1. Web APIサービスアプリケーションで 新 しいフォルダを 作 成 し そこにデータベースファイルを 追 加 します ここでは App_Dataフォルダにファイルを 追 加 します 2. アプリケーションでOleDbProvider.csファイルを 作 成 し OleDbProvider クラスを 追 加 します 10 Copyright GrapeCity inc. All rights reserved.

3. OleDbProvider クラスに 次 のコードを 追 加 します C# public class OleDbProvider : DataProvider public OleDbProvider(string name, string connectionstring) Name = name; ConnectionString = connectionstring; public string Name get; private set; public string ConnectionString get; private set; public override bool Supports(string name) return name.startswith(name, StringComparison.OrdinalIgnoreCase); public override IEnumerable GetObject(string name, NameValueCollection args) var tablename = name.substring(name.length).trimstart('\\', '/'); var selectcommand = string.format("select * from 0", 11 Copyright GrapeCity inc. All rights reserved.

tablename); conn; var conn = new OleDbConnection(ConnectionString); var command = new OleDbCommand(selectCommand) Connection = conn.open(); return command.executereader(commandbehavior.closeconnection); 4. 以 下 に 示 すように Startup クラスのConfiguration (IAppBuilder app) メソッド 内 でデータベースファイルの 接 続 文 字 列 を 設 定 します C# var connectionstring = ConfigurationManager.ConnectionStrings["Nwind"].ConnectionString; app.adddataprovider(new OleDbProvider("Nwind", connectionstring)); クライアントアプリケーションの 設 定 クライアントアプリケーションの 作 成 このセクションでは MVCおよびWijmo 5コントロールを 使 用 して Web APIサービスを 呼 び 出 すことができるクライアントアプ リケーションを 作 成 する 方 法 を 説 明 します クライアントアプリケーションへのコントロールの 追 加 クライアントアプリケーションを 作 成 し FlexGridコントロールを 追 加 するには 次 の 手 順 を 実 行 します MVC 1. Visual StudioでMVC 5アプリケーションを 作 成 します 2. コントローラ(たとえば MVCFlexGridController)を Controllers フォルダに 追 加 します 次 のコードを MVCFlexGridController に 追 加 します C# public ActionResult Index() return View(Sale.GetData(10)); 3. コントローラの 対 応 するビュー( 名 前 Index.cshtml )を 追 加 し 次 のコードを 追 加 してFlexGridコントロールをビューに 追 加 します Razor @(Html.C1().FlexGrid<Sale>().Id("flexGrid").Width("auto").AutoGenerateColumns(false).Bind(bl => bl.bind(model)).cssclass("grid").isreadonly(true).columns(bl => bl.add(cb => cb.binding("id")); bl.add(cb => cb.binding("date")); copycode copycode 12 Copyright GrapeCity inc. All rights reserved.

) ) bl.add(cb => cb.binding("country")); bl.add(cb => cb.binding("product")); bl.add(cb => cb.binding("color")); bl.add(cb => cb.binding("amount")); 1. 新 しいページを 作 成 するには 任 意 のテキストエディタで 次 のコードを 追 加 し.html 拡 張 子 を 付 けてドキュメント を 保 存 します <!DOCTYPE > <> <head> </head> <body> </body> </> 2. 依 存 関 係 へのリンクをページの<head>タグ 内 に 追 加 します メモ:アプリケーションでWijmo 5コントロールを 使 用 するには いくつかのWijmoファイルへの 参 照 を ページに 含 める 必 要 があります これらのWijmoファイルをダウンロードしてアプリケーション 内 の 適 切 な フォルダにコピーするか クラウド 上 のコンテンツ 配 信 ネットワーク(CDN)でホストされているWijmoファイルを 参 照 します Wijmoスクリプトファイルを Scripts というフォルダに cssファイルを Styles というフォルダに Wijmo コントロールに 固 有 のスクリプトファイルを Controls フォルダにダウンロードして 配 置 した 場 合 は ページ の<head>タグ 内 に 次 のWijmo 参 照 を 追 加 します <!-- Wijmo 参 照 --> <script src="controls/wijmo.min.js" type="text/javascript"></script> <link href="styles/wijmo.min.css" rel="stylesheet" type="text/css" /> <script src="scripts/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="controls/wijmo.grid.min.js" type="text/javascript"></script> <script src="scripts/webapiclient.min.js" type="text/javascript"></script> 3. 次 のマークアップを<body>タグ 内 に 追 加 して コントロールを 作 成 します <div id="theflexgrid" style="width:auto"></div> <br/> クライアントアプリケーションへのデータの 追 加 クライアントアプリケーションにデータを 挿 入 するには 次 の 手 順 を 実 行 します MVC 1. ソリューションエクスプローラーで [Models]フォルダを 右 クリックし [ [ 追 加 ] [クラス]を 選 択 します [ [ 新 しい 項 目 の 追 加 ]ダイアログボックスが 表 示 されます 13 Copyright GrapeCity inc. All rights reserved.

2. [ 新 しい 項 目 の 追 加 ]ダイアログで クラスの 名 前 ( 例 :Sale.cs)を 設 定 します 3. [ 追 加 ]をクリックします 4. 新 しいモデルクラスに 次 のコードを 追 加 します Sale.cs public class Sale public int ID get; set; public DateTime Date get; set; public string Country get; set; public string Product get; set; public string Color get; set; public double Amount get; set; copycode private static List<string> COUNTRIES = new List<string> "US", "UK", "Canada", "Japan", "China", "France", "Germany", "Italy", "Korea", "Australia" ; private static List<string> PRODUCTS = new List<string> "Widget", "Gadget" ; /// <summary> /// データを 取 得 する /// </summary> /// <param name="total"></param> /// <returns></returns> public static IEnumerable<Sale> GetData(int total) var colors = new[] "Black", "White", "Red", "Green", "Blue" ; var rand = new Random(0); var dt = DateTime.Now; var list = Enumerable.Range(0, total).select(i => var country = COUNTRIES[rand.Next(0, COUNTRIES.Count - 1)]; var product = PRODUCTS[rand.Next(0, PRODUCTS.Count - 1)]; var color = colors[rand.next(0, colors.length - 1)]; var date = new DateTime(dt.Year, i % 12 + 1, 25); return new Sale ID = i + 1, Date = date, Country = country, Product = product, Color = color, Amount = Math.Round(rand.NextDouble() * 10000-5000, 2) ; ); return list; public static List<string> GetCountries() 14 Copyright GrapeCity inc. All rights reserved.

var countries = new List<string>(); countries.addrange(countries); return countries; public static List<string> GetProducts() List<string> products = new List<string>(); products.addrange(products); return products; 5. アプリケーションを 保 存 します 1. <head>タグ 内 の 参 照 の 下 に 次 のスクリプトを 追 加 してグリッドを 初 期 化 し データを 生 成 します Javascript <script type="text/javascript"> $(document).ready(function () // ランダムデータを 作 成 します var countries = 'US,UK,Canada,Japan,China,France,Germany, Italy,Korea,Australia'.split(','); var products = 'Widget,Gadget'.split(','); var colors = 'Black,White,Red,Green,Blue'.split(','); var today = new Date(); var dd = today.getdate(); var yyyy = today.getfullyear(); var numrows = 10; var data = []; for (var i = 0; i < numrows; i++) var date = (i%12+1)+'/'+dd+'/'+yyyy; data.push( id: i + 1, date: date, country: countries[math.floor((math.random() * 100) + 1) % 10], product: products[math.floor((math.random() * 100) + 1) % 2], color: colors[math.floor((math.random() * 100) + 1) % 5], amount: Math.random() * 5000 ); // データのCollectionViewを 作 成 します(イベント 取 得 のため) var view = new wijmo.collections.collectionview(data); // グリッドを 初 期 化 しま す var grid = new wijmo.grid.flexgrid('#thegrid', columns: [ binding: 'id', header: 'ID', binding: 'date', header: 'Date' 15 Copyright GrapeCity inc. All rights reserved.

, binding: 'country', header: 'Country', binding: 'product', header: 'Product', binding: 'color', header: 'Color', binding: 'amount', header: 'Amount' ], autogeneratecolumns: false, itemssource: view, selectionmode: wijmo.grid.selectionmode.row ); ); </script> 2. アプリケーションを 保 存 します 先 頭 に 戻 る MVCコントロールとWijmo 5 FlexGridコントロールを 備 えた 新 しいクライアントアプリケーションを 作 成 できました このクライア ントアプリケーションからWeb APIサービスを 呼 び 出 して エクスポート/インポート 機 能 を 使 用 できます クライアントアプリケー ションからサービスを 呼 び 出 す 方 法 については サービス セクションを 参 照 してください REST APIサービス 用 のクライアントアプリケーション このセクションでは RESTful Web APIサービスを 呼 び 出 すクライアントアプリケーションの 作 成 方 法 を 具 体 的 に 示 します RESTに 基 づくWeb API Editionサービスは さまざまなプラットフォーム 上 に 構 築 されたクライアントアプリケーションで 利 用 できます 以 降 の 各 セクションの 例 では アプリケーションおよびWinFormsアプリケーションを 使 用 してREST APIサービスを 呼 び 出 し ます したがって このセクションでは この2つのアプリケーションを 作 成 します このセクションで 作 成 するクライアントアプリケーションは Excelファイルを 生 成 するためにエンドポイント(サーバー)にPOST 要 求 を 送 信 し また GET 要 求 を 送 信 するクライアントも 同 様 の 行 で 作 成 できると 考 えられます クライアントアプリケーションへのコントロールの 追 加 クライアントアプリケーションを 作 成 し 入 力 コントロールを 追 加 するには 次 の 手 順 を 実 行 します WinForms 1. Visual Studioに 新 しいWinFormsプロジェクトを 作 成 します 詳 細 については.NETプロジェクトの 作 成 を 参 照 してくださ い 2. 次 の 参 照 を 追 加 します C# using System; using System.Diagnostics; using System.IO; using System.Net.Http; 16 Copyright GrapeCity inc. All rights reserved.

using System.ComponentModel; using System.Windows.Forms; 3. ツールボックスから 2つのC1Buttonコントロール 4つのC1Labelコントロール および3つのC1TextBoxコントロールを フォームに 追 加 します 4. これらの 入 力 コントロールのテキストプロパティを 設 定 します 5. [ビルド] [ソリューションのビルド]をクリックして プロジェクトをビルドします [F5]を 押 してプロジェクトを 実 行 します フォームが 次 のように 表 示 されます 6. [Shift]+[F5]を 押 してアプリケーションのデバッグを 停 止 し デザインビューに 切 り 替 えます ツールボックスから OpenFileDialogコンポーネントをフォームにドラッグアンドドロップします このコンポーネントは WinFormsアプリケーショ ンのデザインビューのコンポーネントトレイに 表 示 されます OpenFileDialogコンポーネントは Web APIサービスに 対 してリクエストを 実 行 するときに データファイルを 選 択 するた めのダイアログボックスを 表 示 します 1. 自 分 の 好 みのテキストエディタで 新 しいページを 作 成 するには テキストエディタで 次 のタグを 追 加 し.html 拡 張 子 を 付 けてドキュメントを 保 存 します <!DOCTYPE > <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> </body> </> 2. 次 のマークアップを<body>タグ 内 に 追 加 して コントロールを 作 成 します <h1>webapiを 呼 び 出 すためのWebアプリケーション</h1> <form> <label for="datafile">データファイル:</label> <input type="file" id="datafile" name="datafile" accept=""/> <br /><br /> 17 Copyright GrapeCity inc. All rights reserved.

</form> <label for="filename">ファイル 名 :</label> <input type="text" id="filename" name="filename" value=""/> <br /><br /> <label for="fileformat">ファイル 形 式 :</label> <input type="text" id="fileformat" name="type" value=""/> <br /><br /> <input type="submit" value="excelを 生 成 します"/> 3. ファイルを 保 存 し それをブラウザで 開 きます 入 力 コントロールを 含 むページが 次 のように 表 示 されます 先 頭 に 戻 る 新 しいWinFormsアプリケーションとアプリケーションが 作 成 され Web API Edition RESTサービスのクライアントとして 機 能 します このクライアントアプリケーションを 通 してWeb APIサービスを 呼 び 出 して Excelファイルを 生 成 および 結 合 すること また はバーコードを 生 成 することができます クライアントアプリケーションからサービスを 呼 び 出 す 方 法 については サービス セク ションを 参 照 してください.NETコレクションの 設 定.NETコレクション 内 のデータは 目 的 の 形 式 でExcelファイルを 生 成 結 合 および 変 換 する 際 にも 使 用 できます このセクショ ンでは Web API サービスアプリケーションで.NETコレクションを 構 成 する 方 法 を 具 体 的 に 示 します この 例 では IEnumerable インタフェースを 実 装 して モデルで 生 成 されたデータを 使 用 します 1. サービスアプリケーションで Models フォルダ 内 に 目 的 のモデルクラスを 作 成 します たとえば ここではSales.cs モデ ルとCustomerOrder.cs モデルを 作 成 します 2. 以 下 に 示 すように AddDataSet()メソッドを 通 してサービスアプリケーションのデータプロバイダマネージャーにデータ セットを 追 加 することにより Startup クラスのConfiguration (IAppBuilder app) メソッド 内 でモデルを 設 定 します C# app.adddataset("sales", () => Sale.GetData(10).ToList()); app.adddataset("orders", () => CustomerOrder.GetOrderData(20).ToList()); 再 配 布 可 能 ファイル ComponentOne Web APIは グレープシティ 株 式 会 社 によって 開 発 および 公 開 されています このコントロールを 使 用 したり 統 合 することができる 環 境 であれば Microsoft Visual Studio などの 任 意 のプログラミング 環 境 と 組 み 合 わせて アプリケー ションの 開 発 に 使 用 できます また ネットワークのクライアント 側 /ワークステーション 側 にある1つのCPUで 個 別 に 使 用 される 場 合 に 限 り 開 発 したアプリケーションと 一 緒 に 次 に 示 す 再 配 布 可 能 ファイルを 無 償 で 配 布 できます 再 配 布 可 能 ファイル 18 Copyright GrapeCity inc. All rights reserved.

Web API 2.2の の 場 合 C1.Web.API.dll C1.Excel.dll phantomjs Web API 3の の 場 合 C1.Web.Apiパッケージ C1.Excelパッケージ phantomjs Web API Editionの の 制 限 Web API サービスには 次 に 示 すいくつかの 制 限 があります これらのいくつかは 製 品 の 改 良 に 従 って 取 り 除 かれる 予 定 で す 画 像 サービス ユーザーの 操 作 によって 変 更 されたクライアントの 外 観 は 画 像 ではエクスポートされない 場 合 があります たとえば クリック 後 のFlexPieの 回 転 はエクスポートされません コントロールの 外 観 が 特 定 の 状 況 でテーマの 影 響 を 受 ける 場 合 エクスポートされる 画 像 にその 外 観 は 反 映 されませ ん データラベルのエクスポートは カスタムitemFormatter JS 関 数 をサポートしません 折 れ 線 系 列 は グリッド 線 に 重 なる 場 合 にはエクスポートに 表 示 されません Excelサービス 共 通 PivotTableはサポートされていません VBAマクロのサポートは 限 定 的 であり xlsxに 対 しては 不 透 過 コピーのみがサポートされています どのファイル 形 式 であっても Excelファイルがロードおよび 保 存 されるたびにチャートオブジェクトが 保 存 されることはあ りません 保 護 構 造 /Windowsはサポートされていません 詳 細 については.NET 制 限 に 対 するExcel を 参 照 してください インポートとエクスポート FlexGridでは 結 合 されたセルを 持 つExcelファイルのインポートとエクスポートはサポートされていません Excel 97-2003 形 式 では エクスポートされた 色 の 表 示 が 異 なることがあります FlexGridでは スタイルのインポートはサポートされていません ( 強 調 表 示 された 塗 りつぶしを 持 つ) 選 択 されたセルはエクスポートされます 書 式 設 定 は FlexGridの 列 単 位 でのみインポートされます 列 内 の 最 後 のセルの 書 式 設 定 がその 列 全 体 のセルに 適 用 されます これは FlexGridコントロールの 制 限 事 項 です MVC FlexGridでは disableserverread がfalse onlycurrentpage もfalseに 設 定 されている 場 合 には カスタム 列 ヘッダーをエクスポートできません インポートすると グループの 折 りたたまれた 状 態 は 失 われ すべてのグループが 展 開 されます Excelファイル 内 の 画 像 は エクスポートもインポートもできません Excelファイル 内 に 設 定 されたアイコンは エクスポートもインポートもできません Excelファイルの 生 成 19 Copyright GrapeCity inc. All rights reserved.

ExcelファイルをJSON 文 字 列 に 生 成 し それをFlexGridで 読 み 込 むと グループの 折 りたたまれた 状 態 は 失 われ すべ てのグループが 展 開 されます 画 像 が 含 まれるExcelファイルをJSON 文 字 列 またはXML 文 字 列 に 生 成 する 場 合 生 成 された 文 字 列 に 画 像 は 含 まれ ません Excelファイルの 結 合 配 布 画 像 が 含 まれるExcelファイルをJSON 文 字 列 またはXML 文 字 列 に 結 合 する 場 合 結 合 された 文 字 列 に 画 像 は 含 まれ ません アイコンが 設 定 されているExcelファイルの 結 合 はサポートされません VSの[ 作 成 時 に 新 しいプロジェクトを 保 存 ]というオプションをオフにすると NuGetは 機 能 しません このオプションは Visual Basic の 環 境 設 定 ではデフォルトでオフになっています この 設 定 を 使 用 する 場 合 には このオプションを 必 ず オンにしてください すべてのユーザーが Web 環 境 を 選 択 して 開 発 することを 強 くお 勧 めします 20 Copyright GrapeCity inc. All rights reserved.

サービス レポートサービス Web API Studio Editionでは さまざまなHTTPサービスを 構 築 できるReport ServiceのBetaバージョンがリリース/ 導 入 されて います 構 築 されたHTTPサービスは さまざまなクライアントがレポートを 表 示 ロード およびキャッシュするために 利 用 でき ます これらはRESTベースのAPIサービスで 5レポートビューアコントロール(FlexViewer)と 通 信 して レポートのコンテ ンツをWeb 上 に 表 示 します C1 Web APIはVisual Studioテンプレートとして 提 供 され Visual Studio 上 でレポートサービスを 作 成 するために 使 用 できま す クライアントアプリケーションは レポートサービスアプリケーションに 要 求 を 送 信 して レポートをロード/エクスポートした り ユーザーがレポートでパラメータを 使 用 できるようにします このサービスは PDF Excel RTF OpenXML および 画 像 形 式 へのレポートのエクスポートをサポートしています レポートリストサービス レポートリストサービスは Get Reports APIを 使 用 して エンドユーザーがクライアントアプリケーションからストレージ 内 の 指 定 レポートファイルに 存 在 するレポートのリストをフェッチできるようにします クライアントアプリケーションは Get Reports APIを 使 用 するためのHTTP 要 求 をサービスアプリケーションに 送 信 します レポートリストサービスの 要 求 スキーマ サーバー 上 の 指 定 レポートファイルにあるレポートのリストを 取 得 するには GETメソッドを 使 用 する 必 要 があります 要 求 URL で 次 のようにレポートファイルのパスを 指 定 します GET: http://[port]/api/reports/report path 次 の 図 は レポートリストを 取 得 するためのパラメータを 指 定 した 要 求 URLを 示 しています 応 答 は レポート 名 を 示 す 文 字 列 の 配 列 を 含 むJSON 文 字 列 です URLパラメータ レポートリストサービスのURLは パラメータとして ストレージ 内 にあるレポートファイルのレポートパスだけを 受 け 取 ります レ ポートファイル 内 のレポートリストにアクセスするには ストレージマネージャーが 認 識 できるレポートファイル 名 を 指 定 する 必 要 があります レポートのサービス レポートロードサービス レポートロードサービスは Load APIを 使 用 して エンドユーザーがレポートをロードし 応 答 から 実 行 情 報 を 取 得 できるように します クライアントアプリケーションは Load APIを 使 用 するためのHTTP 要 求 をサービスアプリケーションに 送 信 します ス テータスが Loaded になると クライアントはRender APIを 使 用 してレポートをレンダリングします 21 Copyright GrapeCity inc. All rights reserved.

レポートロードサービスの 要 求 スキーマ クライアントがサーバー 上 の 指 定 レポートファイルから 目 的 のレポートをロードするには GETメソッドを 使 用 する 必 要 がありま す 要 求 URLで 次 のようにレポートファイルのパスを 指 定 します GET: http://[port]/api/report/report path/report name/load 応 答 は IExecutionInfo 型 オブジェクトを 含 むJSON 文 字 列 です 次 の 図 は レポートをストレージからロードするためのパラメータを 指 定 した 要 求 URLを 示 しています URLパラメータ レポートロードサービスのURLは 第 一 にレポートパスとレポート 名 の2つのパラメータを 受 け 取 ります 要 求 URLで レポート ファイル 名 とレポート 名 (レポートファイル 内 で 定 義 されている)を 指 定 する 必 要 があります パラメータ 情 報 パラメータ 情 報 取 得 サービスは Get Parameters APIを 使 用 して ユーザーが 指 定 レポートのパラメータ 記 述 を 取 得 し この 情 報 を 使 用 してパラメータパネルを 初 期 化 できるようにします クライアントアプリケーションは Get Parameters APIを 使 用 す るためのHTTP 要 求 をサービスアプリケーションに 送 信 します パラメータ 情 報 サービスの 要 求 スキーマ クライアントからレポート 内 で 定 義 されているすべてのパラメータの 情 報 を 取 得 するには GETメソッドを 使 用 する 必 要 がありま す 要 求 URLで 次 のようにレポートファイルのパスとレポート 名 を 指 定 します GET: http://[port]/api/report/report path/report name/parameters 応 答 は IParameterのコレクションを 含 むJSON 文 字 列 です 次 の 図 は レポートのパラメータ 記 述 を 取 得 するためのパラメータを 指 定 した 要 求 URLを 示 しています URLパラメータ パラメータサービスのURLは 第 一 にレポートパスとレポート 名 の2つのパラメータを 受 け 取 ります 要 求 URLで レポートファイ ル 名 とレポート 名 を 指 定 する 必 要 があります サポート 形 式 サービス サポート 形 式 サービスは GetSupportedFormats APIを 使 用 して エンドユーザーがサポートされているレポートエクスポー 22 Copyright GrapeCity inc. All rights reserved.

ト 形 式 を 取 得 できるようにします クライアントアプリケーションは GetSupportedFormats APIを 使 用 してサポートされている レポートエクスポート 形 式 に 関 する 情 報 を 取 得 するためのHTTP 要 求 をサービスアプリケーションに 送 信 します サポート 形 式 サービスの 要 求 スキーマ クライアントからサポートされているレポートのエクスポート 形 式 を 取 得 するには GETメソッドを 使 用 する 必 要 があります 要 求 URLで 次 のようにレポートファイルのパスとレポート 名 を 指 定 します GET: http://[port]/api/report/report path/report name/supportedformats 応 答 は IExportDescriptorのコレクションを 含 むJSON 文 字 列 です 次 の 図 は レポートをストレージからロードするためのパラメータを 指 定 した 要 求 URLを 示 しています URLパラメータ サポート 形 式 サービスのURLは 第 一 にレポートパスとレポート 名 の2つのパラメータを 受 け 取 ります 要 求 URLで レポート ファイル 名 とレポート 名 を 指 定 する 必 要 があります エクスポート レポートデータをいつでもどこでもさまざまなファイル 形 式 にエクスポートできます データと 共 にレポートのレイアウトとスタイ ルも 指 定 された 形 式 にエクスポートされます エクスポートサービスは Export APIを 使 用 して エンドユーザーが 指 定 レポートを 目 的 の 形 式 に 簡 単 にレンダリングおよびエ クスポートできるようにします クライアントアプリケーションは Export APIを 使 用 してレポートをサポートされている 形 式 にエ クスポートするためのHTTP 要 求 をサービスアプリケーションに 送 信 します エクスポートサービスの 要 求 スキーマ クライアントからサポートされているレポートのエクスポート 形 式 を 取 得 するには GETメソッドを 使 用 する 必 要 があります 要 求 URLで レポートファイルのパスとレポート 名 を 指 定 します クライアントアプリケーションは 次 のようなHTTP 要 求 メッセージを サービスに 送 信 します GET: http://[port]/api/report/report path/report name/export 応 答 は エクスポートされたファイルです 次 の 図 は レポートをエクスポートするためのパラメータを 指 定 した 要 求 URLを 示 しています 23 Copyright GrapeCity inc. All rights reserved.

URLパラメータ エクスポートサービスのGET 要 求 URLは パラメータとして レポートファイルのパス レポート 名 エクスポートされたファイルの 名 前 およびサポートされるエクスポート 形 式 を 受 け 取 ります レポートキャッシュサービス レポートキャッシュサービスは レポートのキャッシュを 操 作 するためのAPIモデルを 提 供 します レポートキャッシュサービス は サービスにHTTP 要 求 を 送 信 するクライアントアプリケーションから 使 用 されます 名 前 HTTPメソッ ド URLスキーマ 説 明 レンダリング GET /api/reportcache/cache id/render レポートをレンダリングし 実 行 情 報 を 取 得 します キャッシュID GET /api/reportcache/cache id 指 定 されたキャッシュIDを 持 つレ ポートの 実 行 情 報 を 取 得 します パラメータ GET /api/reportcache/cache id/parameters レポートで 定 義 されているすべて のパラメータを 取 得 します パラメータ POST /api/reportcache/cache id/parameters レポートのパラメータを 設 定 し 検 証 結 果 を 取 得 します サポート 形 式 GET /api/reportcache/cache id/supportedformats サポートされているすべてのエク スポート 形 式 を 取 得 します エクスポート GET /api/reportcache/cache id/export 指 定 された 形 式 とオプションでレ ポートをエクスポートします アウトライン GET /api/reportcache/cache id/outlines 指 定 されたキャッシュIDを 持 つレ ポートのアウトラインを 取 得 しま す レポートがレンダリング 済 み であることを 確 認 してください ブックマーク GET /api/reportcache/cache id/bookmark レポート 内 のブックマークの 位 置 を 取 得 します レポートがレンダ リング 済 みであることを 確 認 して ください 検 索 GET /api/reportcache/cache id/search 指 定 されたキャッシュIDを 持 つレ ポートの 検 索 結 果 を 取 得 します レポートがレンダリング 済 みであ ることを 確 認 してください レンダリング 停 止 GET /api/reportcache/cache id/stop 現 在 のレンダリングを 停 止 しま す キャッシュID DELETE /api/reportcache/cache id キャッシュを 削 除 します Excelサービス Web API は MVCおよびWijmo 5コントロールのExcelインポート/エクスポートサービスをサポートしています Web API 内 に は Excelファイルのエクスポート/インポート 機 能 を 提 供 するHTTP 要 求 メッセージが 含 まれています Web API Edition は Visual Studio 上 でWeb APIサービスを 作 成 するためのVisual Studioテンプレートとして 使 用 できます 作 成 したサービスは ク 24 Copyright GrapeCity inc. All rights reserved.

ライアントアプリケーションがFlexGridおよびExcelデータのエクスポート/インポートに 使 用 できます レイアウトとスタイルはデータと 共 に 指 定 された 形 式 にエクスポートされます つまり 結 合 されたセルまたはヘッダー 書 式 設 定 されたテキスト グループ 化 されたデータを 含 むFlexGridがそのままエクスポートされます Excel 形 式 にエクスポートする 場 合 は グリッドデータの 列 ヘッダーは 含 めることも 除 外 することもできます エクスポートサービス Web API Editionエクスポートサービスを 使 用 して 任 意 の 時 点 および 任 意 の 場 所 でFlexGridデータをExcelにエクスポートしま す レイアウトとスタイルはデータと 共 に 指 定 された 形 式 にエクスポートされます つまり 結 合 されたセルまたはヘッダー 書 式 設 定 されたテキスト グループ 化 されたデータを 含 むFlexGridがそのままエクスポートされます Excel 形 式 にエクスポートす る 場 合 は グリッドデータの 列 ヘッダーは 含 めることも 除 外 することもできます ExcelへのFlexGridのエクスポートのエクスポート このセクションでは クライアントアプリケーションを 通 してWeb APIサービスプロジェクトを 呼 び 出 し FlexGridデータをExcelデータとしてエクスポートするための 関 数 を 追 加 する 方 法 を 説 明 します 手 順 1:サービスを 呼 び 出 す 手 順 2:クライアントプロジェクトを 実 行 する 次 の 図 は 上 記 の 手 順 を 実 行 した 後 のFlexGridを 示 しています IncludeColumnHeader Xls Export 手 順 1:サービスを 呼 び 出 す Web APIサービスを 呼 び 出 すには 次 の 手 順 を 実 行 します 1. C1 Web APIクライアントJavaScriptファイルとその 参 照 をMVCまたはプロジェクトに 追 加 します( 詳 細 については Web APIクライアント JavaScriptの 追 加 を 参 照 してください) 2. Client JavaScript Helperを 使 用 して エクスポート 機 能 を 実 装 するための 関 数 を 作 成 します MVC FlexGridデータをExcelにエクスポートするには 次 のコードを [Views] [MVCFlexGrid] [Index.cshtml] に 追 加 します Index.cshtml <script type="text/javascript"> copycode 25 Copyright GrapeCity inc. All rights reserved.

function exportflex() var exporter = new c1.mvc.grid.excelexporter(); filetype = document.getelementbyid("myselect").value; var gridcontrol = wijmo.control.getcontrol("#flexgrid"); exporter.requestexport(gridcontrol, "http://demos.componentone.com/aspnet/c1webapiservice/api/export/excel", filename: "exportflexgrid", type: filetype, ); </script> FlexGridデータをExcelにエクスポートするには 次 のマークアップを<script>タグ 内 に 追 加 します JavaScript <script type="text/javascript"> function exportflex() var exporter = new wijmo.grid.excelexporter(); var grid = wijmo.control.getcontrol("#theflexgrid"); exporter.requestexport(grid, "http://demos.componentone.com/aspnet/c1webapiservice/api/export/excel", filename: "export", type: wijmo.exportfiletype.xls, ); </script> メモ: アプリケーションでWijmo 5コントロールを 使 用 するには いくつかのWijmoファイルへの 参 照 をページに 含 める 必 要 がありま す これらのWijmoファイルをダウンロードしてアプリケーション 内 の 適 切 なフォルダにコピーするか クラウド 上 のコンテンツ 配 信 ネットワーク (CDN)でホストされているWijmoファイルを 参 照 します Wijmoスクリプトファイルを Scripts というフォルダに cssファイルを Styles というフォ ルダに Wijmoコントロールに 固 有 のスクリプトファイルを Controls フォルダにダウンロードして 配 置 した 場 合 は ページの<head>タグ 内 に 次 の 参 照 を 追 加 します <script src="controls/wijmo.min.js" type="text/javascript"></script> <link href="styles/wijmo.min.css" rel="stylesheet" type="text/css" /> <script src="scripts/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="controls/wijmo.grid.min.js" type="text/javascript"></script> <script src="scripts/webapiclient.min.js" type="text/javascript"></script> 3. ボタンを 追 加 し ボタンクリックでエクスポート 機 能 を 呼 び 出 して エクスポート 要 求 が 開 始 されるようにします MVC 次 のコードを[Views] [MVCFlexGrid] [Index.cshtml]に 追 加 して エクスポート/インポート 機 能 に 対 応 するボタンを 追 加 します 次 のコードを[Views] [MVCFlexGrid] [Index.cshtml]に 追 加 して エクスポート 機 能 に 対 応 するボタンを 追 加 します Index.cshtml <div> <select id="myselect"> <option selected>xls</option> <option>xlsx</option> <option>csv</option> </select> <button onclick="exportflex()" title="export">export</button> </div> copycode 26 Copyright GrapeCity inc. All rights reserved.

次 のマークアップを<body>タグ 内 に 追 加 して エクスポート 機 能 に 対 応 するボタンを 作 成 します <button onclick="exportflex()" title="export">export</button> 先 頭 に 戻 る 手 順 2:クライアントプロジェクトを 実 行 する MVCアプリケーション [ビルド] [ソリューションのビルド]をクリックして プロジェクトをビルドします [F5]キーを 押 してプロジェクトを 実 行 します アプリケーション ファイルを 保 存 し それをブラウザで 開 きます [Export]ボタンがコントロールと 共 に 出 力 に 表 示 されます このボタンを 使 用 して コントロール 内 のデータをExcel 形 式 にエクスポートできます MVCおよびWijmo5 FlexGridコントロールを 使 用 したエクスポートサービスのデモサンプルをぜひご 覧 ください 先 頭 に 戻 る MVCFlexGridライブデモ Wijmo5FlexGridライブデモ インポートサービス FlexGridコントロールにExcelデータを 簡 単 にインポートします このサービスは xlsx xls およびcsvの 各 ファイル 形 式 から Excelデータへのインポートをサポートします このサービスでは 列 ヘッダーが 存 在 するかどうかに 関 係 なく Excelデータを 柔 軟 にインポートできます Excelファイルに 式 が 含 まれる 場 合 は 計 算 フィールドがFlexGridにインポートされます FlexGridへのExcelのインポートのインポート このセクションでは クライアントアプリケーションを 通 じてWeb APIサービスプロジェクトを 呼 び 出 し ExcelデータをFlexGridコントロールにインポートするための 関 数 を 追 加 する 方 法 を 説 明 します 手 順 1:サービスを 呼 び 出 す 手 順 2:クライアントプロジェクトを 実 行 する 次 の 図 は 上 記 の 手 順 を 実 行 した 後 のFlexGridを 示 しています IncludeColumnHeaderImport Choose File no file selected 27 Copyright GrapeCity inc. All rights reserved.

手 順 1:サービスを 呼 び 出 す Web APIサービスを 呼 び 出 すには 次 の 手 順 を 実 行 します 1. C1 Web APIクライアントJavaScriptファイルとその 参 照 をMVCまたはプロジェクトに 追 加 します( 詳 細 については Web APIクライアント JavaScriptの 追 加 を 参 照 してください) 2. Client JavaScript Helperを 使 用 して ボタンクリックイベントでトリガされるインポート 機 能 を 追 加 します MVC ExcelデータをFlexGridコントロールにインポートするには 次 のコードを [Views] [MVCFlexGrid] [Index.cshtml] に 追 加 します Index.cshtml <script type="text/javascript"> var gridcontrol; c1.mvc.utils.documentready(function () gridcontrol = wijmo.control.getcontrol('#flexgrid') ); function importflex() var file = document.getelementbyid("fileinput").files[0]; var importer = new wijmo.grid.excelimporter(); importer.requestimport(gridcontrol, "http://demos.componentone.com/aspnet/c1webapiservice/api/import/excel", file, true) </script> copycode ExcelデータをFlexGridコントロールにインポートするには 次 のマークアップを<script>タグ 内 に 追 加 します JavaScript <script type="text/javascript"> var grid; $(document).ready(function () grid = wijmo.control.getcontrol('#thegrid') ); function importflex() var file = document.getelementbyid("fileinput").files[0]; var importer = new wijmo.grid.excelimporter(); importer.requestimport(grid, " http://demos.componentone.com/aspnet/c1webapiservice/api/import/excel", file, true) </script> メモ: アプリケーションでWijmo 5コントロールを 使 用 するには いくつかのWijmoファイルへの 参 照 をページに 含 める 必 要 がありま す これらのWijmoファイルをダウンロードしてアプリケーション 内 の 適 切 なフォルダにコピーするか クラウド 上 のコンテンツ 配 信 ネットワーク (CDN)でホストされているWijmoファイルを 参 照 します Wijmoスクリプトファイルを Scripts というフォルダに cssファイルを Styles というフォ ルダに Wijmoコントロールに 固 有 のスクリプトファイルを Controls フォルダにダウンロードして 配 置 した 場 合 は ページの<head>タグ 内 に 次 の 参 照 を 追 加 します <script src="controls/wijmo.min.js" type="text/javascript"></script> <link href="styles/wijmo.min.css" rel="stylesheet" type="text/css" /> <script src="scripts/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="controls/wijmo.grid.min.js" type="text/javascript"></script> <script src="scripts/webapiclient.min.js" type="text/javascript"></script> 3. クライアントアプリケーションでインポート 要 求 を 開 始 するための 入 力 コントロール(たとえば ボタン)を 提 供 します 28 Copyright GrapeCity inc. All rights reserved.

MVC 次 のコードを[Views] [MVCFlexGrid] [Index.cshtml]に 追 加 して エクスポート/インポート 機 能 に 対 応 するボタンを 追 加 します 次 のコードを[Views] [MVCFlexGrid] [Index.cshtml]に 追 加 して インポート 機 能 に 対 応 するボタンを 追 加 します Index.cshtml <div> <span>import</span> <input type="file" value="import" id="fileinput" class="upload" onchange="importflex()" /> </div> copycode 次 のマークアップを<body>タグ 内 に 追 加 して インポート 機 能 に 対 応 するボタンを 追 加 します <input type="file" id="fileinput" class="upload" onchange="importflex()" /> 先 頭 に 戻 る 手 順 2:クライアントプロジェクトを 実 行 する MVCアプリケーション [ビルド] [ソリューションのビルド]をクリックして プロジェクトをビルドします [F5]キーを 押 してプロジェクトを 実 行 します アプリケーション ファイルを 保 存 し それをブラウザで 開 きます インポートするファイルを 選 択 するためのボタンがコントロールと 共 に 出 力 に 表 示 されます このボタンを 使 用 して 目 的 のファイルからコントロールにデータを インポートできます MVCおよびWijmo5 FlexGridコントロールを 使 用 したインポートサービスのデモサンプルをぜひご 覧 ください 先 頭 に 戻 る MVCFlexGridライブデモ Wijmo5FlexGridライブデモ Excelサービスの 生 成 指 定 されたXML JSON およびデータソースファイルから RESTベースのAPIで 瞬 時 にExcelファイルを 生 成 します さらに REST APIサービスを 利 用 することにより 各 種 のワークブック 形 式 の 間 で 簡 単 に 変 換 できます リモートストレージまたはロー カルストレージからデータを 取 得 するか またはクライアントからデータをアップロードしてExcelファイルを 生 成 し Excel 形 式 の 間 で 変 換 します クライアントアプリケーションは HTTPリクエストをWeb APIサービスアプリケーションに 送 ります このリクエストは GETメソッ ドとPOSTメソッドを 使 用 してサービスからの 応 答 を 検 索 します GETメソッドは 指 定 されたリソースから 目 的 の 情 報 を 取 得 し POSTメソッドはリソースにデータを 送 信 します Excelリクエストスキーマの 生 成 ストレージ(ローカルまたはリモート) 内 に 存 在 するデータから 適 切 な 形 式 でExcelワークブックを 生 成 するには GETメソッドを 使 用 する 必 要 があります この 場 合 は リクエストURL 内 で 保 存 場 所 および 生 成 されるExcelのファイル 形 式 を 指 定 します GET: http://[:port]/api/excel?filename=<>&type=<>&datafilename=<> XMLからExcelを を 生 成 するためのGET 要 求 スキーマ 29 Copyright GrapeCity inc. All rights reserved.

次 の 図 は ストレージに 存 在 するXMLデータファイルから 目 的 の 形 式 でExcelを 生 成 するためのための 要 求 URLパラメータを 示 しています 次 の 表 は 要 求 URLパラメータ(ストレージ 内 のXMLからExcelを 生 成 するためのパラメータ)とそれらのサポートされる 値 を 示 し ています パラメータ サポートされた 値 説 明 ファイル 名 String 生 成 されたExcelファイルの 名 前 は ユーザによって 指 定 さ れます ファイル 形 json, xlsx, xls, csv, xml 生 成 されたExcelファイルの 形 式 データファイル 名 ストレージマネージャが 認 識 するデータファイ ル 名 ストレージ 内 のXMLデータファイル データセット/コレクションからExcelを を 生 成 するためのGET 要 求 スキーマ 次 の 図 は ストレージに 存 在 するデータセット/コレクションから 目 的 の 形 式 でExcelを 生 成 するためのための 要 求 URLパラ メータを 示 しています 次 の 表 は 要 求 URLパラメータ(ストレージ 内 のデータセット/コレクションからExcelを 生 成 するためのパラメータ)とそれらのサ ポートされる 値 を 示 しています パラメータ ファイル 名 String サポートされた 値 説 明 生 成 されたExcelファイルの 名 前 は ユーザによって 指 定 されます ファイル 形 json, xlsx, xls, csv, xml 生 成 されたExcelファイルの 形 式 データ 名 データプロバイダが 認 識 するデータ 名 ストレージ 内 のデータセット/データコレクション Excel 形 式 を 変 換 するためのGET 要 求 スキーマ 30 Copyright GrapeCity inc. All rights reserved.

次 の 図 は ストレージに 存 在 するExcel 形 式 のファイルを 目 的 の 形 式 で 変 換 するための 要 求 URLパラメータを 示 しています 次 の 表 は 要 求 URLパラメータ(ストレージ 内 のExcelファイルを 希 望 の 形 式 に 変 換 するためのパラメータ)とそれらのサポートさ れる 値 を 示 しています パラメータ サポートされた 値 説 明 ファイル 名 String 生 成 されたExcelファイルの 名 前 は ユーザによって 指 定 されます ファイル 形 json, xlsx, xls, csv, xml 変 換 されたExcelファイルの 形 式 ワークブックファイ ル 名 ストレージマネージャが 認 識 しているExcel ファイル 名 ストレージ 内 の( 変 換 されるための)Excelファイル クライアントからポストされたXMLからExcelを を 生 成 するためのPOST 要 求 スキーマ データがストレージに 存 在 せず クライアントから 提 供 される 場 合 には POSTメソッドを 使 用 する 必 要 があります この 場 合 ク エリー 文 字 列 のパラメータは URLではなくPOST 要 求 のHTTPメッセージ 本 文 に 含 まれて 送 信 されます POSTの 要 求 URLは 次 のように 表 示 されます POST: http://[:port]/api/excel データがストレージに 存 在 せず クライアントから 提 供 される 場 合 は POSTメソッドを 使 用 します 次 の 表 は 要 求 URLパラメータ(クライアントからポストされたXMLからExcelを 生 成 するためのパラメータ)とそれらのサポート される 値 を 示 しています パラメー タ ファイル 名 ファイル 形 データ ファイル サポートされた 値 String json, xlsx, xls, csv, xml xml 説 明 生 成 されたExcelファイルの 名 前 は ユーザによって 指 定 されます 生 成 されたExcelファイルの 形 式 クライントからアップロードするためのXMLデータのコンテキストはコレクションのようです(ルート 要 素 の 同 じに 複 数 の 子 要 素 を 持 つ 要 素 ) クライアントからポストされたJSONデータからExcelを を 生 成 するためのPOST 要 求 スキーマ 次 の 表 は 要 求 URLパラメータ(クライアントからポストされたJSONからExcelを 生 成 するためのパラメータ)とそれらのサポート される 値 を 示 しています パラメータ サポートされた 値 説 明 ファイル 名 String 生 成 されたExcelファイルの 名 前 は ユーザによって 指 定 されます ファイル 形 json, xlsx, xls, csv, xml 生 成 されたExcelファイルの 形 式 31 Copyright GrapeCity inc. All rights reserved.

データ json ライアントからアップロードする 必 要 があるJSONデータ Excel 形 式 のファイルを 変 換 するためのPOST 要 求 スキーマ 次 の 表 は 要 求 URLパラメータ(クライアントからポストされたExcelを 希 望 の 形 式 に 変 換 するためのパラメータ)とそれらのサ ポートされる 値 を 示 しています パラメータ サポートされた 値 説 明 ファイル 名 String 生 成 されたExcelファイルの 名 前 は ユーザによって 指 定 されます ファイル 形 json, xlsx, xls, csv, xml 変 換 されたExcelファイルの 形 式 ワークブックファイル xls, xlsx, csv ライアントからアップロードする 必 要 がある 変 換 されたExcelファイル ここでは ユーザーが 要 求 URL 内 のクエリパラメータを 指 定 する 必 要 はありません (クライアントからポストされたXMLから Excelを 生 成, クライアントからポストされたJSONデータからExcelを 生 成, and クライアントからポストされたデータを 使 用 して ワークブック 形 式 を 変 換 t)のトピックでは パラメータまたはクエリー 文 字 列 をPOST 要 求 のHTTPメッセージ 本 文 に 含 まれて 送 信 される 方 法 を 具 体 的 に 説 明 します ストレージ 内 のXMLからExcelを 生 成 このセクションでは クライアントアプリケーションを 通 してWeb APIサービスを 呼 び 出 し ストレージ(リモートストレージまたは 同 じサーバー 内 のストレージ) 内 に 存 在 するXML 文 字 列 からExcelファイルを 生 成 する 方 法 を 具 体 的 に 示 します 手 順 1:サービスを 呼 び 出 す 手 順 2:クライアントプロジェクトを 実 行 する 次 の 例 では Web APIサービスをおよびWinFormsクライアントアプリケーションから 呼 び 出 します これらのクライアント はサービスにGET 要 求 を 送 り サービスは 応 答 ストリームを 返 します これにより この 応 答 ストリームは 目 的 のExcelファイル 形 式 で 保 存 されます 次 の 例 では サービスURLは DataFileNameパラメータにXMLデータファイル(ストレージ 内 に 存 在 )を 取 り Typeパラメータ に 目 的 のファイル 形 式 としてcsvを 取 ります 指 定 された10RowsData.xmlという 名 前 のXMLデータファイルは ホストされる サービスのルートフォルダに 存 在 します Web App to call C1 Web API The web api url: http://demos.componentone.com/aspnet/c1webapiservice/api/excel FileName: ExcelfromStorage FileFormat: csv Xmldatafile: root/10rowsdata.xml Generate Excel 手 順 1:サービスを 呼 び 出 す 32 Copyright GrapeCity inc. All rights reserved.

Web APIサービスを 呼 び 出 すには 次 の 手 順 を 実 行 します C# 1. REST APIサービスに 対 するクライアントの 設 定 の 説 明 に 従 ってWinFormsアプリケーションを 作 成 します 1つの C1Label 1つのC1TextBox および1つのC1Buttonコントロールを 追 加 します フォームが 次 のように 表 示 されます 2. 以 下 に 示 すように お 使 いのWinFormsアプリケーションのフォームクラスにメソッド(たとえば GetExcel())を 定 義 し て サービスアプリケーションを 呼 び 出 します C# public void GetExcel() var apiurl = string.isnullorempty(c1textbox1.text)? "http://demos.componentone.com/aspnet/c1webapiservice/api/excel? FileName=excel&type=csv&datafilename=root%2F10rowsdata.xml" : C1TextBox1.Text; WebRequest request = WebRequest.Create(apiURL); WebResponse response = request.getresponse(); var filestream = File.Create("D:\\ExcelfromStorage.csv"); //ここで 指 定 したファイル 形 式 は 要 求 されたURLと 同 じである 必 要 があります response.getresponsestream().copyto(filestream); 3. [Excelの の 生 成 ]ボタンのボタンクリックイベントで GetExcel()メソッドを 呼 び 出 します 1. REST APIサービスに 対 するクライアントの 設 定 の 説 明 に 従 ってアプリケーションを 作 成 します 2. ページの<body>タグ 内 の<form>タグに 以 下 のマークアップを 追 加 します <form action="http://demos.componentone.com/aspnet/c1webapiservice/api/excel" method="get"> <label for="filename">file Name:</label> <input type="text" id="filename" name="filename" value="excelfromstorage" /> <br /> <label for="fileformat">file Format:</label> 33 Copyright GrapeCity inc. All rights reserved.

<input type="text" id="fileformat" name="type" value="csv" /> <br /> <label for="datafilename">xml data file:</label> <input type="text" id="datafilename" name="datafilename" value="root/10rowsdata.xml" /> <input type="submit" value="generate Excel"/> </form> 先 頭 に 戻 る GET 要 求 に 関 して <form>タグのmethod 属 性 にGET およびそのaction 属 性 にサービス 要 求 URLを 設 定 したことに 注 意 してください また ページに 入 力 コントロールを 作 成 します このコントロールは ストレージ 内 に 存 在 する XMLデータファイルから 目 的 のExcel 形 式 を 生 成 するための 各 種 パラメータを 取 ります 手 順 2:クライアントプロジェクトを 実 行 する WinFormsアプリケーション [ビルド] [ソリューションのビルド]をクリックして プロジェクトをビルドします [F5]を 押 してプロジェクトを 実 行 します Request URLフィールドに 対 応 するテキストボックスに 適 切 なパラメータを 含 むクエリー 文 字 列 と 共 に サービスURLを 指 定 します [Excelの の 生 成 ]ボタンをクリックします 生 成 されたExcelデータストリームは GetExcel()メソッドで 指 定 された 場 所 にダ ウンロードされます アプリケーション ファイルを 保 存 し それをブラウザで 開 きます 目 的 のExcelファイル 形 式 に 該 当 するパラメータを 設 定 して [Excelの の 生 成 ]ボタンをクリックします 以 下 に 示 す ストレージで 使 用 可 能 なXMLデータファイルからExcelを 生 成 するREST APIサービスのデモサンプルをご 覧 ください 先 頭 に 戻 る Excelの 生 成 のライブデモ ストレージ 内 のデータソースからExcelを 生 成 このセクションでは クライアントアプリケーションを 通 してWeb APIサービスを 呼 び 出 し ストレージ(リモートストレージまたは 同 じサーバー 内 のストレージ) 内 に 存 在 するデータセットまたは.NETコレクションからExcelファイルを 生 成 する 方 法 を 具 体 的 に 示 します 手 順 1:サービスを 呼 び 出 す 手 順 2:クライアントプロジェクトを 実 行 する 次 の 例 では Web APIサービスをおよびWinFormsクライアントアプリケーションから 呼 び 出 します これらのクライアント はサービスにGET 要 求 を 送 り サービスは 応 答 ストリームを 返 します これにより この 応 答 ストリームは 目 的 のExcelファイル 形 式 で 保 存 されます 次 の 例 では サービスURLはDataNameパラメータにデータセット/コレクション(ストレージ 内 に 存 在 )の 名 前 と 場 所 を 取 り Typeパラメータに 目 的 のファイル 形 式 であるxlsを 取 ります Productsという 名 前 の 指 定 されたデータセットは ホストされて いるサービスのNwindフォルダ 内 に 存 在 しています Web App to call C1 Web API 34 Copyright GrapeCity inc. All rights reserved.

Web App to call C1 Web API The web api url: http://demos.componentone.com/aspnet/c1webapiservice/api/excel FileName: ExcelfromStorage FileFormat: xls DataName: Nwind/Products Generate Excel 手 順 1:サービスを 呼 び 出 す Web APIサービスを 呼 び 出 すには 次 の 手 順 を 実 行 します C# 1. REST APIサービスに 対 するクライアントの 設 定 の 説 明 に 従 ってWinFormsアプリケーションを 作 成 します 1つの C1Label 1つのC1TextBox および1つのC1Buttonコントロールを 追 加 します フォームが 次 のように 表 示 されます 2. 以 下 に 示 すように お 使 いのWinFormsアプリケーションのフォームクラスにメソッド(たとえば GetExcel())を 定 義 し て サービスアプリケーションを 呼 び 出 します C# public void GetExcel() var apiurl = string.isnullorempty(c1textbox1.text)? "http://demos.componentone.com/aspnet/c1webapiservice/api/excel? FileName=excel&type=xls&dataname=Nwind%2FProducts" : C1TextBox1.Text; WebRequest request = WebRequest.Create(apiURL); WebResponse response = request.getresponse(); var filestream = File.Create("D:\\ExcelfromStorage.xls"); //ここで 指 定 したファイル 形 式 は 要 求 URLで 指 定 された 形 式 と 同 じである 必 要 があります response.getresponsestream().copyto(filestream); 35 Copyright GrapeCity inc. All rights reserved.

3. [Excelの の 生 成 ]ボタンのボタンクリックイベントで GetExcel()メソッドを 呼 び 出 します 1. REST APIサービスに 対 するクライアントの 設 定 の 説 明 に 従 ってアプリケーションを 作 成 します 2. ページの<body>タグ 内 の<form>タグに 以 下 のマークアップを 追 加 します <form action="http://demos.componentone.com/aspnet/c1webapiservice/api/excel" method="get"> <label for="filename">file Name:</label> <input type="text" id="filename" name="filename" value="excelfromstorage" /> <br /> <label for="fileformat">file Format:</label> <input type="text" id="fileformat" name="type" value="xls" /> <br /> <label for="dataname">data Name:</label> <input type="text" id="dataname" name="dataname" value="nwind/products" /> <input type="submit" value="generate Excel"/> </form> 先 頭 に 戻 る GET 要 求 に 関 して <form>タグのmethod 属 性 にGET およびそのaction 属 性 にサービス 要 求 URLを 設 定 したことに 注 意 してください また ページで 入 力 コントロールを 作 成 し 各 種 のパラメータを 指 定 して ストレージ 内 に 存 在 するデータセットから 目 的 のExcel 形 式 でExcelファイルを 生 成 します 手 順 2:クライアントプロジェクトを 実 行 する WinFormsアプリケーション [ビルド] [ソリューションのビルド]をクリックして プロジェクトをビルドします [F5]を 押 してプロジェクトを 実 行 します Request URLフィールドに 対 応 するテキストボックスに 適 切 なパラメータを 含 むクエリー 文 字 列 と 共 に サービスURLを 指 定 します [Excelの の 生 成 ]ボタンをクリックします 生 成 されたExcelデータストリームは GetExcel()メソッドで 指 定 された 場 所 にダ ウンロードされます アプリケーション ファイルを 保 存 し それをブラウザで 開 きます 目 的 のExcelファイル 形 式 に 該 当 するパラメータを 設 定 して [Excelの の 生 成 ]ボタンをクリックします 以 下 に 示 す ストレージで 使 用 可 能 なデータソースからExcelを 生 成 するREST APIサービスのデモサンプルをご 覧 くださ い 先 頭 に 戻 る Excelの 生 成 のライブデモ ストレージからのデータを 使 用 したワークブック 形 式 の 変 換 36 Copyright GrapeCity inc. All rights reserved.

このセクションでは クライアントアプリケーションを 通 してWeb APIサービスを 呼 び 出 し ストレージ(リモートストレージまたは 同 じサーバー 上 のストレージ) 内 で 使 用 可 能 なExcelファイルを 別 のファイル 形 式 に 変 換 する 方 法 を 具 体 的 に 示 します 手 順 1:サービスを 呼 び 出 す 手 順 2:クライアントプロジェクトを 実 行 する 次 の 例 では Web APIサービスをおよびWinFormsクライアントアプリケーションから 呼 び 出 します これらのクライアント はサービスにGET 要 求 を 送 り サービスは 応 答 ストリームを 返 します これにより この 応 答 ストリームは 目 的 のExcelファイル 形 式 で 保 存 されます 次 の 例 では サービスURLは WorkBookFileName パラメータにExcelワークブック(ストレージ 内 に 存 在 )を 取 り Typeパラ メータに 目 的 のファイル 形 式 であるjsonを 取 ります 指 定 されたExcelワークブック results.xlsxは ホストされるサービスの ルートフォルダに 存 在 します Web App to call C1 Web API The web api url: http://demos.componentone.com/aspnet/c1webapiservice/api/excel FileName: ExcelConvert FileFormat: json WorkBookFileName: root/grouping.xlsx Convert Excel Format 手 順 1:サービスを 呼 び 出 す Web APIサービスを 呼 び 出 すには 次 の 手 順 を 実 行 します C# 1. REST APIサービスに 対 するクライアントの 設 定 の 説 明 に 従 ってWinFormsアプリケーションを 作 成 します 1つの C1Label 1つのC1TextBox および1つのC1Buttonコントロールを 追 加 します フォームが 次 のように 表 示 されます 2. 以 下 に 示 すように お 使 いのWinFormsアプリケーションのフォームクラスにメソッド(たとえば ConvertExcel())を 定 義 して サービスアプリケーションを 呼 び 出 します 37 Copyright GrapeCity inc. All rights reserved.

C# public void ConvertExcel() var apiurl = string.isnullorempty(c1textbox1.text)? "http://demos.componentone.com/aspnet/c1webapiservice/api/excel? FileName=excel&type=json&workbookfilename=root%2Grouping.xlsx" : C1TextBox1.Text; WebRequest request = WebRequest.Create(apiURL); WebResponse response = request.getresponse(); var filestream = File.Create("D:\\ExcelConvert.json"); response.getresponsestream().copyto(filestream); 3. [Excel 形 式 の 変 換 ]ボタンのボタンクリックイベントで ConvertExcel()メソッドを 呼 び 出 します 1. REST APIサービスに 対 するクライアントの 設 定 の 説 明 に 従 ってアプリケーションを 作 成 します 2. ページの<body>タグ 内 の<form>タグに 以 下 のマークアップを 追 加 します <form action="http://demos.componentone.com/aspnet/c1webapiservice/api/excel" method="get"> <label for="filename">file Name:</label> <input type="text" id="filename" name="filename" value="excelconvert" /> <br /> <label for="fileformat">file Format:</label> <input type="text" id="fileformat" name="type" value="json" /> <br /> <label for="workbookfilename">workbook File Name:</label> <input type="text" id="workbookfilename" name="workbookfilename" value="root/grouping.xlsx" /> <input type="submit" value="convert Excel Format"/> </form> 先 頭 に 戻 る GET 要 求 に 関 して <form>タグのmethod 属 性 にGET およびそのaction 属 性 にサービス 要 求 URLを 設 定 したことに 注 意 してください また ページにコントロールを 作 成 します このコントロールは 各 種 パラメータを 指 定 して ス トレージ 内 に 存 在 するExcelワークブックから 目 的 の 形 式 でExcelを 生 成 します 手 順 2:クライアントプロジェクトを 実 行 する WinFormsアプリケーション [ビルド] [ソリューションのビルド]をクリックして プロジェクトをビルドします [F5]を 押 してプロジェクトを 実 行 します Request URLフィールドに 対 応 するテキストボックスに 適 切 なパラメータを 含 むクエリー 文 字 列 と 共 に サービスURLを 指 定 します [Excel 形 式 の 変 換 ]ボタンをクリックします 生 成 されたExcelデータストリームは ConvertExcel()メソッドで 指 定 された 場 所 にダウンロードされます 38 Copyright GrapeCity inc. All rights reserved.

アプリケーション ファイルを 保 存 し それをブラウザで 開 きます 目 的 のExcelファイル 形 式 に 該 当 するパラメータを 設 定 して [Excel 形 式 の 変 換 ]ボタンをクリックします 以 下 に 示 す ワークブック 形 式 を 変 換 するREST APIサービスのデモサンプルをご 覧 ください 先 頭 に 戻 る Excel 形 式 の 変 換 のライブデモ クライアントからポストされたXMLからExcelを 生 成 このセクションでは クライアントアプリケーションを 通 してWeb APIサービスを 呼 び 出 し クライアントからポストされたXMLデー タファイルからExcelを 生 成 する 方 法 を 具 体 的 に 説 明 します 手 順 1:サービスを 呼 び 出 す 手 順 2:クライアントプロジェクトを 実 行 する 次 の 例 では Web APIサービスをおよびWinFormsクライアントアプリケーションから 呼 び 出 します これらのクライアント はサービスにPOST 要 求 を 送 り サービスは 応 答 ストリームを 返 します これにより この 応 答 ストリームは 目 的 のExcelファイル 形 式 で 保 存 されます 次 の 例 では クライアントアプリケーションを 通 してXMLデータファイルを 提 供 します さらに エンドユーザーは クライアントプ ロジェクトを 通 して 生 成 されるExcelファイルのサービスURL 名 前 および 適 切 なファイル 形 式 を 指 定 する 必 要 があります こ れは 生 成 するExcelのパラメータまたはクエリー 文 字 列 は リクエストURL 内 ではなくPOST 要 求 のHTTPメッセージ 本 文 に 含 ま れて 送 信 されるためです Web App to call C1 Web API The web api url: http://demos.componentone.com/aspnet/c1webapiservice/api/excel Xmldatafile: Choose File no file selected FileName: Excel FileFormat: xlsx Generate Excel 手 順 1:サービスを 呼 び 出 す Web APIサービスを 呼 び 出 すには 次 の 手 順 を 実 行 します C# 1. REST APIサービスに 対 するクライアントの 設 定 の 説 明 に 従 ってWinFormsアプリケーションを 作 成 します 4つの C1Labelコントロール 3つのC1TextBoxコントロール 2つのC1Buttonコントロール および1つのOpneFileDialogコン 39 Copyright GrapeCity inc. All rights reserved.

ポーネントを 追 加 します フォームが 以 下 のように 表 示 されるように テキストプロパティを 設 定 します 2. [データファイルを 選 択 ]ボタンのボタンクリックイベントに 以 下 のコードを 追 加 します C# private void button1_click(object sender, EventArgs e) var result = openfiledialog1.showdialog(); if (result == DialogResult.OK result == DialogResult.Yes) _filepath = openfiledialog1.filename; if (!string.isnullorempty(_filepath)) label1.text = _filepath; 3. [Excelの の 生 成 ]ボタンのボタンクリックイベントに 以 下 のコードを 追 加 します C# private void button2_click(object sender, EventArgs e) if (string.isnullorempty(_filepath)) MessageBox.Show("Invalid response."); return; using (var client = new HttpClient()) using (var formdata = new MultipartFormDataContent()) using (var filestream = File.OpenRead(_filePath)) var filename = string.isnullorempty(c1textbox1.text)? "test" : textbox1.text; var fileformat = string.isnullorempty(c1textbox2.text)? "xlsx" : textbox2.text; formdata.add(new StringContent(fileName), "FileName"); 40 Copyright GrapeCity inc. All rights reserved.

formdata.add(new StringContent(fileFormat), "FileFormat"); formdata.add(new StreamContent(fileStream), "DataFile", Path.GetFileName(_filePath)); var response = client.postasync(c1textbox3.text, formdata).result; if (!response.issuccessstatuscode) MessageBox.Show("Invalid response."); return; var temppath = Path.Combine(Path.GetTempPath(), Guid.NewGuid().ToString()); if (!Directory.Exists(tempPath)) Directory.CreateDirectory(tempPath); var tempfilepath = Path.Combine(tempPath, string.format("0.1", filename, fileformat)); using (var newfile = File.Create(tempFilePath)) response.content.readasstreamasync().result.copyto(newfile); Process.Start(tempFilePath); POST 要 求 に 関 して System.Net.Http.MultipartFormDataContent クラスのインスタンスであるformDataが 使 用 され ることに 注 意 してください コードを 通 して HTTPコンテンツをformDataに 追 加 し 指 定 されたURIに 非 同 期 POST 要 求 を 送 る 際 にそれを 渡 します 1. REST APIサービスに 対 するクライアントの 設 定 の 説 明 に 従 ってアプリケーションを 作 成 します 2. ページの<body>タグ 内 の<form>タグに 以 下 のマークアップを 追 加 します <form action=http://demos.componentone.com/aspnet/c1webapiservice/api/excel </form> method="post" enctype="multipart/form-data"> <label for="datafile">xml data file:</label> <input type="file" id="datafile" name="datafile" accept=".xml" /> <br/><br/> <label for="filename">file Name:</label> <input type="text" id="filename" name="filename" value="test"/> <br /><br /> <label for="fileformat">file Format:</label> <input type="text" id="fileformat" name="type" value="xlsx" /> <br /><br /> <input type="submit" value="post"/> POST 要 求 に 関 して <form>タグのmethod 属 性 にPOST そのenctype 属 性 に"multipart/form-data" およびそ のaction 属 性 にサービス 要 求 URLを 設 定 したことに 注 意 してください また ページに 入 力 コントロールを 作 成 し 41 Copyright GrapeCity inc. All rights reserved.

先 頭 に 戻 る ます このコントロールは クライアントからポストされたXMLデータファイルからExcelファイルを 生 成 するために 各 種 の パラメータを 取 ります 手 順 2:クライアントプロジェクトを 実 行 する WinFormsアプリケーション [ビルド] [ソリューションのビルド]をクリックして プロジェクトをビルドします [F5]を 押 してプロジェクトを 実 行 します [データファイルを 選 択 ]ボタンをクリックして XMLデータファイルを 選 択 およびポストします 対 応 するテキストボックスに 生 成 されたExcelの 名 前 と 適 切 なファイル 形 式 を 指 定 します 対 応 するテキストボックスに POST 要 求 のサービスURL (http://demos.componentone.com/aspnet/c1webapiservice/api/excel)を 入 力 し [Excelの の 生 成 ]ボタンをクリッ クします 生 成 されたExcelファイルが 開 きます アプリケーション ファイルを 保 存 し それをブラウザで 開 きます XMLデータファイルを 選 択 してポストします 名 前 と 適 切 なファイル 形 式 を 生 成 されるExcelに 対 して 設 定 し [Excelの の 生 成 ]ボタンをクリックします 以 下 に 示 す XMLデータファイルからExcelを 生 成 するREST APIサービスのデモサンプルをご 覧 ください 先 頭 に 戻 る XMLライブデモからExcelを 生 成 クライアントからポストされたJSONデータからExcelを 生 成 このセクションでは クライアントアプリケーションを 通 してWeb APIサービスを 呼 び 出 し クライアントからポストされたJSON データファイルからExcelを 生 成 する 方 法 を 具 体 的 に 説 明 します 手 順 1:サービスを 呼 び 出 す 手 順 2:クライアントプロジェクトを 実 行 する 次 の 例 では Web APIサービスをおよびWinFormsクライアントアプリケーションから 呼 び 出 します これらのクライアント はサービスにPOST 要 求 を 送 り サービスは 応 答 ストリームを 返 します これにより この 応 答 ストリームは 目 的 のExcelファイル 形 式 で 保 存 されます 次 の 例 では クライアントアプリケーションを 通 してJSONデータファイルを 提 供 します さらに エンドユーザーは クライアント プロジェクトを 通 して 生 成 されるExcelファイルのサービスURL 名 前 および 適 切 なファイル 形 式 を 指 定 する 必 要 があります これは 生 成 するExcelのパラメータまたはクエリー 文 字 列 は リクエストURL 内 ではなくPOST 要 求 のHTTPメッセージ 本 文 に 含 まれて 送 信 されるためです Web App to call C1 Web API The web api url: http://demos.componentone.com/aspnet/c1webapiservice/api/excel Jsondatafile: Choose File no file selected 42 Copyright GrapeCity inc. All rights reserved.

FileName: Excel FileFormat: xlsx Generate Excel 手 順 1:サービスを 呼 び 出 す Web APIサービスを 呼 び 出 すには 次 の 手 順 を 実 行 します C# 1. REST APIサービスに 対 するクライアントの 設 定 の 説 明 に 従 ってWinFormsアプリケーションを 作 成 します 4つの C1Labelコントロール 3つのC1TextBoxコントロール 2つのC1Buttonコントロール および1つのOpneFileDialogコン ポーネントを 追 加 します フォームが 以 下 のように 表 示 されるように テキストプロパティを 設 定 します 2. [データファイルを 選 択 ]ボタンのボタンクリックイベントに 以 下 のコードを 追 加 します C# private void button1_click(object sender, EventArgs e) var result = openfiledialog1.showdialog(); if (result == DialogResult.OK result == DialogResult.Yes) _filepath = openfiledialog1.filename; if (!string.isnullorempty(_filepath)) label1.text = _filepath; 3. [Excelの 生 成 ]ボタンのボタンクリックイベントに 以 下 のコードを 追 加 します 43 Copyright GrapeCity inc. All rights reserved.

C# private void button2_click(object sender, EventArgs e) if (string.isnullorempty(_filepath)) MessageBox.Show("Invalid response."); return; using (var client = new HttpClient()) using (var formdata = new MultipartFormDataContent()) using (var filestream = File.OpenRead(_filePath)) var filename = string.isnullorempty(c1textbox1.text)? "test" : textbox1.text; var fileformat = string.isnullorempty(c1textbox2.text)? "xlsx" : textbox2.text; formdata.add(new StringContent(fileName), "FileName"); formdata.add(new StringContent(fileFormat), "FileFormat"); formdata.add(new StreamContent(fileStream), "DataFile", Path.GetFileName(_filePath)); var response = client.postasync(c1textbox3.text, formdata).result; if (!response.issuccessstatuscode) MessageBox.Show("Invalid response."); return; var temppath = Path.Combine(Path.GetTempPath(), Guid.NewGuid().ToString()); if (!Directory.Exists(tempPath)) Directory.CreateDirectory(tempPath); var tempfilepath = Path.Combine(tempPath, string.format("0.1", filename, fileformat)); using (var newfile = File.Create(tempFilePath)) response.content.readasstreamasync().result.copyto(newfile); Process.Start(tempFilePath); POST 要 求 に 関 して System.Net.Http.MultipartFormDataContentクラスのインスタンスであるformDataが 使 用 され ることに 注 意 してください コードを 通 して HTTPコンテンツをformDataに 追 加 し 指 定 されたURIに 非 同 期 POST 要 求 を 送 る 際 にそれを 渡 します 1. REST APIサービスに 対 するクライアントの 設 定 の 説 明 に 従 ってアプリケーションを 作 成 します 2. ページの<body>タグ 内 の<form>タグに 以 下 のマークアップを 追 加 します <form action=http://demos.componentone.com/aspnet/c1webapiservice/api/excel 44 Copyright GrapeCity inc. All rights reserved.

method="post" enctype="multipart/form-data"> <label for="data">json data file:</label> <input type="file" id="data" name="data" accept=".json" /> <br/><br/> <label for="filename">file Name:</label> <input type="text" id="filename" name="filename" value="test"/> <br /><br /> <label for="fileformat">file Format:</label> <input type="text" id="fileformat" name="type" value="xlsx" /> <br /><br /> <input type="submit" value="generate Excel"/> </form> 先 頭 に 戻 る POST 要 求 に 関 して <form>タグのmethod 属 性 にPOST そのenctype 属 性 に"multipart/form-data" およびそ のaction 属 性 にサービス 要 求 URLを 設 定 したことに 注 意 してください また ページに 入 力 コントロールを 作 成 し ます このコントロールは クライアントからポストされたJSONデータファイルからExcelファイルを 生 成 するために 各 種 のパラメータを 取 ります 手 順 2:クライアントプロジェクトを 実 行 する WinFormsアプリケーション [ビルド] [ソリューションのビルド]をクリックして プロジェクトをビルドします [F5]を 押 してプロジェクトを 実 行 します [データファイルを 選 択 ]ボタンをクリックして JSONデータファイルを 選 択 およびポストします 対 応 するテキストボックスに 生 成 されたExcelの 名 前 と 適 切 なファイル 形 式 を 指 定 します 対 応 するテキストボックスに POST 要 求 のサービスURL (http://demos.componentone.com/aspnet/c1webapiservice/api/excel)を 入 力 し [Excelの の 生 成 ]ボタンをクリッ クします 生 成 されたExcelファイルが 開 きます アプリケーション ファイルを 保 存 し それをブラウザで 開 きます JSONデータファイルを 選 択 してポストします 名 前 と 適 切 なファイル 形 式 を 生 成 されるExcelに 対 して 設 定 し [Excelの の 生 成 ]ボタンをクリックします 以 下 に 示 す JSONデータファイルからExcelを 生 成 するREST APIサービスのデモサンプルをご 覧 ください 先 頭 に 戻 る JSONライブデモからExcelを 生 成 クライアントからポストされたデータを 使 用 してワークブック 形 式 を 変 換 このセクションでは クライアントアプリケーションを 通 してWeb APIサービスを 呼 び 出 し クライアントからポストされたExcelファ イルの 形 式 を 変 換 する 方 法 を 具 体 的 に 説 明 します 手 順 1:サービスを 呼 び 出 す 手 順 2:クライアントプロジェクトを 実 行 する 45 Copyright GrapeCity inc. All rights reserved.

次 の 例 では Web APIサービスをおよびWinFormsクライアントアプリケーションから 呼 び 出 します これらのクライアント はサービスにPOST 要 求 を 送 り サービスは 応 答 ストリームを 返 します これにより この 応 答 ストリームは 目 的 のExcelファイル 形 式 で 保 存 されます 次 の 例 では クライアントアプリケーションを 通 してExcelデータファイルを 提 供 します さらに エンドユーザーは クライアントプ ロジェクトを 通 して 生 成 されるExcelファイルのサービスURL 名 前 および 適 切 なファイル 形 式 を 指 定 する 必 要 があります こ れは 変 換 するExcel 形 式 のパラメータまたはクエリー 文 字 列 は リクエストURL 内 ではなくPOST 要 求 のHTTPメッセージ 本 文 に 含 まれて 送 信 されるためです Web App to call C1 Web API The web api url: http://demos.componentone.com/aspnet/c1webapiservice/api/excel Selectdatafile: Choose File no file selected FileName: Excel FileFormat: xlsx Convert Excel Format メモ: サービスは クライアントからポストされたxlsファイル xlsxファイル およびcsvファイルを 変 換 できます 手 順 1:サービスを 呼 び 出 す Web APIサービスを 呼 び 出 すには 次 の 手 順 を 実 行 します C# 1. REST APIサービスに 対 するクライアントの 設 定 の 説 明 に 従 ってWinFormsアプリケーションを 作 成 します 4つの C1Labelコントロール 3つのC1TextBoxコントロール 2つのC1Buttonコントロール および1つのOpneFileDialogコン ポーネントを 追 加 します フォームが 以 下 のように 表 示 されるように テキストプロパティを 設 定 します 46 Copyright GrapeCity inc. All rights reserved.

2. [データファイルを 選 択 ]ボタンのボタンクリックイベントに 以 下 のコードを 追 加 します C# private void button1_click(object sender, EventArgs e) var result = openfiledialog1.showdialog(); if (result == DialogResult.OK result == DialogResult.Yes) _filepath = openfiledialog1.filename; if (!string.isnullorempty(_filepath)) label1.text = _filepath; 3. [Excel 形 式 の 変 換 ]ボタンのボタンクリックイベントに 以 下 のコードを 追 加 します C# private void button2_click(object sender, EventArgs e) if (string.isnullorempty(_filepath)) MessageBox.Show("Invalid response."); return; using (var client = new HttpClient()) using (var formdata = new MultipartFormDataContent()) using (var filestream = File.OpenRead(_filePath)) var filename = string.isnullorempty(c1textbox1.text)? "test" : textbox1.text; var fileformat = string.isnullorempty(c1textbox2.text)? "xlsx" : textbox2.text; formdata.add(new StringContent(fileName), "FileName"); formdata.add(new StringContent(fileFormat), "FileFormat"); 47 Copyright GrapeCity inc. All rights reserved.

formdata.add(new StreamContent(fileStream), "DataFile", Path.GetFileName(_filePath)); var response = client.postasync(c1textbox3.text, formdata).result; if (!response.issuccessstatuscode) MessageBox.Show("Invalid response."); return; var temppath = Path.Combine(Path.GetTempPath(), Guid.NewGuid().ToString()); if (!Directory.Exists(tempPath)) Directory.CreateDirectory(tempPath); var tempfilepath = Path.Combine(tempPath, string.format("0.1", filename, fileformat)); using (var newfile = File.Create(tempFilePath)) response.content.readasstreamasync().result.copyto(newfile); Process.Start(tempFilePath); POST 要 求 に 関 して System.Net.Http.MultipartFormDataContentクラスのインスタンスであるformDataが 使 用 され ることに 注 意 してください コードを 通 して HTTPコンテンツをformDataに 追 加 し 指 定 されたURIに 非 同 期 POST 要 求 を 送 る 際 にそれを 渡 します 1. REST APIサービスに 対 するクライアントの 設 定 の 説 明 に 従 ってアプリケーションを 作 成 します 2. ページの<body>タグ 内 の<form>タグに 以 下 のマークアップを 追 加 します <form action="http://demos.componentone.com/aspnet/c1webapiservice/api/excel" \ method="post" enctype="multipart/form-data"> <label for="workbookfile">select data file:</label> <input type="file" id="workbookfile" name="workbookfile" /> <br/><br/> <label for="filename">file Name:</label> <input type="text" id="filename" name="filename" value="excel"/> <br /><br /> <label for="type">file Format:</label> <input type="text" id="type" name="type" value="xlsx" /> <br /><br /> <input type="submit" value="convert Excel Format"/> </form> POST 要 求 に 関 して <form>タグのmethod 属 性 にPOST そのenctype 属 性 に"multipart/form-data" およびそ のaction 属 性 にサービス 要 求 URLを 設 定 したことに 注 意 してください また ページに 入 力 コントロールを 作 成 し ます このコントロールは クライアントからポストされたExcelファイルのファイル 形 式 を 変 換 するために 各 種 のパラメー 48 Copyright GrapeCity inc. All rights reserved.

先 頭 に 戻 る タを 取 ります 手 順 2:クライアントプロジェクトを 実 行 する WinFormsアプリケーション [ビルド] [ソリューションのビルド]をクリックして プロジェクトをビルドします [F5]を 押 してプロジェクトを 実 行 します [データファイルを 選 択 ]ボタンをクリックして 変 換 するExcelファイル(xls xlsx またはcsv)を 選 択 してポストします 対 応 するテキストボックスに 生 成 されたExcelの 名 前 と 適 切 なファイル 形 式 を 指 定 します 対 応 するテキストボックスに POST 要 求 のサービスURL (http://demos.componentone.com/aspnet/c1webapiservice/api/excel)を 入 力 し [Excel 形 式 の 変 換 ]ボタンを クリックします 生 成 されたExcelファイルが 開 きます アプリケーション ファイルを 保 存 し それをブラウザで 開 きます Excelデータファイルを 選 択 してポストします 名 前 と 適 切 なファイル 形 式 を 生 成 されるExcelに 対 して 設 定 し [Excel 形 式 の 変 換 ]ボタンをクリックします 以 下 に 示 す Excelファイル 形 式 間 で 変 換 を 行 うREST APIサービスのデモサンプルをご 覧 ください 先 頭 に 戻 る Excel 形 式 の 変 換 のライブデモ Excelサービスの 結 合 REST APIサービスで 複 数 のExcelファイルをワークブックに 結 合 します サービスは 複 数 のExcelファイルを 結 合 して サポー トされているワークブック 形 式 (JSON XLSX XLS およびXML)にします 結 合 するファイルがストレージに 存 在 する 場 合 は GET 要 求 を 使 用 します また 結 合 するExcelファイルをクライアントを 通 して 提 供 する 場 合 は POST 要 求 が 適 切 です Excelリクエストスキーマの 結 合 GET 要 求 URLで マージされたエクセルの 保 存 場 所 および 生 成 されるExcelのファイル 形 式 を 指 定 します GET: http://[:port]/api/excel/merge?filename=<>&type=<>&filenamestomerge=<>&filenamestomerge 複 数 のExcelファイルを 結 合 するためのGET 要 求 スキーマ 次 の 図 は ストレージに 存 在 する 複 数 のエクスるファイルを 結 合 するための 要 求 URLパラメータを 示 しています 次 の 表 は 要 求 URLパラメータ(ストレージである 複 数 のExcelファイルを 結 合 するためのパラメータ)とそれらのサポートされる 値 を 示 しています 49 Copyright GrapeCity inc. All rights reserved.

パラメータ サポートされた 値 説 明 ファイル 名 String 生 成 されたExcelファイルの 名 前 は ユーザによって 指 定 されます ファイル 形 xlsx, xls, xml 結 合 されたExcelファイルのファイル 形 式 結 合 するファイルの 名 ストレージマネージャが 認 識 するExcelファ イルの 名 ストレージにある 結 合 するためのExcelファイル 複 数 のExcelファイルを 結 合 するためのPOST 要 求 スキーマ 結 合 するExcelファイルをクライアントを 通 して 提 供 する 場 合 は POST 要 求 が 適 切 です POSTの 要 求 URLは 次 のように 表 示 さ れます POST: http://[:port]/api/excel/merge 次 の 表 は POST 要 求 のクエリパラメータ(クライアントを 通 して 提 供 する 複 数 のExcelファイルを 結 合 するためのパラメータ)とそ れらのサポートされる 値 を 示 しています パラメータ サポートされた 値 説 明 ファイル 名 String 生 成 されたExcelファイルの 名 前 は ユーザによって 指 定 されます ファイル 形 xlsx, xls, xml 結 合 されたExcelファイルのファイル 形 式 結 合 するファイル xlsx, xls, and csv クライアントから 結 合 するためのExcelファイルがアップされました ここでは ユーザーが 要 求 URL 内 のクエリパラメータを 指 定 する 必 要 はありません クライアントからポストされたXMLから Excelを 生 成 トピックでは Excelのパラメータまたはクエリー 文 字 列 をPOST 要 求 のHTTPメッセージ 本 文 に 含 まれて 送 信 される 方 法 を 具 体 的 に 説 明 します ストレージに 存 在 する 複 数 のExcelファイルを 結 合 このセクションでは クライアントアプリケーションを 通 してWeb APIサービスを 呼 び 出 し ファイルストレージ(リモートストレージまたは 同 じサー バー 上 のストレージ) 内 で 使 用 可 能 な 複 数 のExcelファイルをワークブックに 結 合 する 方 法 を 具 体 的 に 示 します 手 順 1:サービスを 呼 び 出 す 手 順 2:クライアントプロジェクトを 実 行 する 次 の 例 では Web APIサービスをおよびWinFormsクライアントアプリケーションから 呼 び 出 します これらのクライアントはサービスにGET 要 求 を 送 り サービスは 応 答 ストリームを 返 します これにより この 応 答 ストリームは 目 的 のExcelファイル 形 式 で 保 存 されます 次 の 例 では サービスURLは FileNamesToMergeパラメータに 結 合 するExcelデータファイル(ストレージ 内 に 存 在 )を 取 り Typeパラメータに 目 的 のファイル 形 式 であるxlsを 取 ります 結 合 される 指 定 されたExcelファイルは ホストされるサービスのルートフォルダに 存 在 します Web App to call C1 Web API The web api url: http://demos.componentone.com/aspnet/c1webapiservice/excel/merge FileName: MergedFile FileFormat: xls FileNamestoMerge: root/gas.xls root/houston.xlsx Merge Excel 50 Copyright GrapeCity inc. All rights reserved.

手 順 1:サービスを 呼 び 出 す Web APIサービスを 呼 び 出 すには 次 の 手 順 を 実 行 します C# 1. REST APIサービスに 対 するクライアントの 設 定 の 説 明 に 従 ってWinFormsアプリケーションを 作 成 します 1つのC1Label 1つの C1TextBox および1つのC1Buttonコントロールを 追 加 します フォームが 次 のように 表 示 されます 2. 以 下 に 示 すように お 使 いのWinFormsアプリケーションのフォームクラスにメソッド(たとえば MergeExcel())を 定 義 して サービスアプリ ケーションを 呼 び 出 します C# public void MergeExcel() var apiurl = "http://demos.componentone.com/aspnet/c1webapiservice/api/excel/merge? FileName=excel&type=xls&FileNamesToMerge=root%2FGAS.xls&FileNamesToMerge=root%2FHouston.xlsx"; WebRequest request = WebRequest.Create(apiURL); WebResponse response = request.getresponse(); var filestream = File.Create("D:\\MergedFile.xls"); response.getresponsestream().copyto(filestream); 3. [Excelファイルの 結 合 ]ボタンのボタンクリックイベントで MergeExcel()メソッドを 呼 び 出 します 1. REST APIサービスに 対 するクライアントの 設 定 の 説 明 に 従 ってアプリケーションを 作 成 します 2. ページの<body>タグ 内 の<form>タグに 以 下 のマークアップを 追 加 します <form action="http://demos.componentone.com/aspnet/c1webapiservice/api/excel/merge" method="get"> <label for="filename">file Name:</label> <input type="text" id="filename" name="filename" value="mergedfile" /> <br /><br /> <label for="fileformat">file Format:</label> <input type="text" id="fileformat" name="type" value="xls" /> <br /><br /> <label for="filenamestomerge">file Names to Merge:</label> <input type="text" id="filenamestomerge" name="filenamestomerge" value="root/gas.xls" /> <input type="text" id="filenamestomerge" name="filenamestomerge" value="root/houston.xlsx" /> <input type="submit" value="merge Excel"/> </form> 51 Copyright GrapeCity inc. All rights reserved.

先 頭 に 戻 る GET 要 求 に 関 して <form>タグのmethod 属 性 にGET およびそのaction 属 性 にサービス 要 求 URLを 設 定 したことに 注 意 してください ま た ページに 入 力 コントロールを 作 成 します このコントロールは ストレージで 使 用 可 能 で 目 的 のExcel 形 式 に 複 数 のExcelファイ ルを 結 合 するための 各 種 のパラメータを 取 ります 手 順 2:クライアントプロジェクトを 実 行 する WinFormsアプリケーション [ビルド] [ソリューションのビルド]をクリックして プロジェクトをビルドします [F5]を 押 してプロジェクトを 実 行 します Request URLフィールドに 対 応 するテキストボックスに 適 切 なパラメータを 含 むクエリー 文 字 列 と 共 に サービスURLを 指 定 します [Excelファイルの 結 合 ]ボタンをクリックします 結 合 されたExcelデータストリームは MergeExcel()メソッドで 指 定 された 場 所 にダウンロー ドされます アプリケーション ファイルを 保 存 し それをブラウザで 開 きます 名 前 と 適 切 なExcelファイル 形 式 を 設 定 し [Excelファイルの 結 合 ]ボタンをクリックします 以 下 に 示 す 複 数 のExcelファイルを 結 合 するREST APIサービスのデモサンプルをご 覧 ください 先 頭 に 戻 る Excelの 結 合 のライブデモ クライアントからポストされた 複 数 のExcelファイルを 結 合 このセクションでは クライアントアプリケーションを 通 してWeb APIサービスを 呼 び 出 し クライアントからポストされた 複 数 の Excelファイルをワークブックに 結 合 する 方 法 を 具 体 的 に 示 します 手 順 1:サービスを 呼 び 出 す 手 順 2:クライアントプロジェクトを 実 行 する 次 の 例 では Web APIサービスをおよびWinFormsクライアントアプリケーションから 呼 び 出 します これらのクライアント はサービスにPOST 要 求 を 送 り サービスは 応 答 ストリームを 返 します これにより この 応 答 ストリームは 目 的 のExcelファイル 形 式 で 保 存 されます 以 下 の 例 では (ワークブックに 結 合 される)Excelファイルがクライアントアプリケーションを 通 して 提 供 されます さらに エンド ユーザーは クライアントプロジェクトを 通 して ( 複 数 のExcelシートの 結 合 時 に 生 成 された)ワークブックのサービスURL 名 前 および 目 的 のファイル 形 式 を 指 定 する 必 要 があります これは 結 合 するExcelのパラメータまたはクエリー 文 字 列 は リク エストURL 内 ではなくPOST 要 求 のHTTPメッセージ 本 文 に 含 まれて 送 信 されるためです Web App to call C1 Web API The web api url: http://demos.componentone.com/aspnet/c1webapiservice/api/excel/merge ExcelFilestoMerge: Choose File no file selected MergedWorkbookName: NewExcel GeneratedFileFormat: xlsx 52 Copyright GrapeCity inc. All rights reserved.

Merge Excel メモ: サービスは クライアントからポストされたxlsファイル xlsxファイル およびcsvファイルを 結 合 できます 手 順 1:サービスを 呼 び 出 す Web APIサービスを 呼 び 出 すには 次 の 手 順 を 実 行 します C# 1. REST APIサービスに 対 するクライアントの 設 定 の 説 明 に 従 ってWinFormsアプリケーションを 作 成 します 4つの C1Labelコントロール 3つのC1TextBoxコントロール 2つのC1Buttonコントロール および1つのOpneFileDialogコン ポーネントを 追 加 します フォームが 以 下 のように 表 示 されるように テキストプロパティを 設 定 します 2. [ 結 合 するファイルを 選 択 ]ボタンのボタンクリックイベントに 以 下 のコードを 追 加 します C# private void button1_click(object sender, EventArgs e) OpenFileDialog x = new OpenFileDialog(); x.multiselect = true; x.showdialog(); result = x.filenames; label1.text = "Files Selected"; 3. [Excelファイルの 結 合 ]ボタンのボタンクリックイベントに 以 下 のコードを 追 加 します C# private void button2_click(object sender, EventArgs e) if (result.length <= 0) MessageBox.Show("Please select excel files to merge."); 53 Copyright GrapeCity inc. All rights reserved.

return; using (var client = new HttpClient()) using (var formdata = new MultipartFormDataContent()) using (var filestream = File.OpenRead(result[0])) using (var filestream1 = File.OpenRead(result[1])) var filename = string.isnullorempty(txtfilename.text)? "test" : txtfilename.text; var fileformat = string.isnullorempty(txtfileformat.text)? "xlsx" : txtfileformat.text; formdata.add(new StringContent(fileName), "FileName"); formdata.add(new StringContent(fileFormat), "Type"); formdata.add(new StreamContent(fileStream), "filestomerge", result[0]); formdata.add(new StreamContent(fileStream1), "filestomerge", result[1]); var response = client.postasync(txturl.text, formdata).result; if(!response.issuccessstatuscode) MessageBox.Show("Get invalid response."); return; var temppath = Path.Combine(Path.GetTempPath(), Guid.NewGuid().ToString()); if (!Directory.Exists(tempPath)) Directory.CreateDirectory(tempPath); var tempfilepath = Path.Combine(tempPath, string.format("0.1", filename, fileformat)); using (var newfile = File.Create(tempFilePath)) response.content.readasstreamasync().result.copyto(newfile); Process.Start(tempFilePath); POST 要 求 に 関 して System.Net.Http.MultipartFormDataContentクラスのインスタンスであるformDataが 使 用 され ることに 注 意 してください コードを 通 して HTTPコンテンツをformDataに 追 加 し 指 定 されたURIに 非 同 期 POST 要 求 を 送 る 際 にそれを 渡 します 1. REST APIサービスに 対 するクライアントの 設 定 の 説 明 に 従 ってアプリケーションを 作 成 します 2. ページの<body>タグ 内 の<form>タグに 以 下 のマークアップを 追 加 します 54 Copyright GrapeCity inc. All rights reserved.

<form action="http://demos.componentone.com/aspnet/c1webapiservice/api/excel/merge" method="post" enctype="multipart/form-data"> <label for="filestomerge">excel Files to Merge:</label> <input type="file" id="filestomerge" name="filestomerge" multiple/> <br /><br /> <label for="filename">merged Workbook Name:</label> <input type="text" id="filename" name="filename" value="excel"/> <br /><br /> <label for="type">generated File Format:</label> <input type="text" id="type" name="type" value="xlsx" /> <br /><br /> <input type="submit" value="merge Excel"/> </form> 先 頭 に 戻 る POST 要 求 に 関 して <form>タグのmethod 属 性 にPOST そのenctype 属 性 に"multipart/form-data" およびそ のaction 属 性 にサービス 要 求 URLを 設 定 したことに 注 意 してください また ページに 入 力 コントロールを 作 成 し ます このコントロールは クライアントから 提 供 され 目 的 のワークブック 形 式 に 複 数 のExcelファイルを 結 合 するため の 各 種 のパラメータを 取 ります 手 順 2:クライアントプロジェクトを 実 行 する WinFormsアプリケーション [ビルド] [ソリューションのビルド]をクリックして プロジェクトをビルドします [F5]を 押 してプロジェクトを 実 行 します [ 結 合 するファイルを 選 択 ]ボタンをクリックして 複 数 のExcelファイルを 選 択 します メモ: [Ctrl]キーまたは[Shift]キーを 押 しながら 複 数 のExcelファイルを 選 択 します 対 応 するテキストボックスに 生 成 されたワークブックの 名 前 と 適 切 なファイル 形 式 を 指 定 します 対 応 するテキストボックスに POST 要 求 のサービスURL (http://demos.componentone.com/aspnet/c1webapiservice/api/excel/merge)を 入 力 し [Excelファイルの 結 合 ]ボタンをクリックします 結 合 されたExcelファイルが 開 きます アプリケーション ファイルを 保 存 し それをブラウザで 開 きます 結 合 するExcelファイルを 選 択 します メモ: [Ctrl]キーまたは[Shift]キーを 押 しながら 複 数 のExcelファイルを 選 択 します 名 前 と 適 切 なファイル 形 式 を 結 合 されるExcelに 対 して 設 定 し [Excelファイルの 結 合 ]ボタンをクリックします 以 下 に 示 す 複 数 のExcelファイルを 結 合 するREST APIサービスのデモサンプルをご 覧 ください 先 頭 に 戻 る Excelの 結 合 のライブデモ 画 像 サービス 55 Copyright GrapeCity inc. All rights reserved.

Web API Studio は MVCおよびWijmo 5コントロールの 画 像 エクスポートサービスをサポートしています C1 Web APIは Visual Studio 上 でWeb APIサービスを 作 成 するためのVisual Studioテンプレートとして 使 用 できます クライアントアプリケー ションは Web APIサービスアプリケーションに 要 求 を 送 信 して MVCおよびWijmo 5コントロールを 画 像 としてエクスポートで きます サービスは PNG JPG BMP TIFF およびGIFF 形 式 への 画 像 エクスポートをサポートしています エクスポートサービス BulletGraphの の 画 像 エクスポート このセクションでは クライアントアプリケーションを 通 してWeb APIサービスプロジェクトを 呼 び 出 し BulletGraphコントロールを 画 像 としてエクスポー トするための 関 数 を 追 加 する 方 法 を 説 明 します 手 順 1:サービスを 呼 び 出 す 手 順 2:クライアントプロジェクトを 実 行 する 次 の 図 は 上 記 の 手 順 を 実 行 した 後 のBulletGraphを 示 しています Png Export 手 順 1:サービスを 呼 び 出 す Web APIサービスを 呼 び 出 すには 次 の 手 順 を 実 行 します 1. C1 Web APIクライアントJavaScriptファイルとその 参 照 をMVCまたはプロジェクトに 追 加 します( 詳 細 な 手 順 については Web APIク ライアントJavaScriptの 追 加 を 参 照 してください) 2. Client JavaScript Helperを 使 用 して エクスポート 機 能 を 実 装 するための 関 数 を 作 成 します MVC BulletGraphコントロールを 画 像 にエクスポートするには 次 のコードを[Views] [BulletGraph] [Index.cshtml]に 追 加 します Index.cshtml <script type="text/javascript"> function exportimage() var exporter = new wijmo.gauge.imageexporter(); imagetype = document.getelementbyid("myselect").value; control = wijmo.control.getcontrol('#bulletgraph'); exporter.requestexport(control, "http://demos.componentone.com/aspnet/c1webapiservice/api/export/image", filename: "exportbulletgraph", type: imagetype, ); </script> copycode BulletGraphコントロールを 画 像 にエクスポートするには 次 のマークアップを<script>タグ 内 に 追 加 します JavaScript <script type="text/javascript"> 56 Copyright GrapeCity inc. All rights reserved.

function exportimage() var exporter = new wijmo.gauge.imageexporter(); var bulletgraph = wijmo.control.getcontrol("#bulletgraph"); exporter.requestexport(bulletgraph, "http://demos.componentone.com/aspnet/c1webapiservice/api/export/image", filename: "exportbulletgraph", type: Png, ); </script> メモ: アプリケーションでWijmo 5コントロールを 使 用 するには いくつかのWijmoファイルへの 参 照 をページに 含 める 必 要 があります これらのWijmoファイルをダウンロードしてアプリケーション 内 の 適 切 なフォルダにコピーするか クラウド 上 のコンテンツ 配 信 ネットワーク(CDN)でホストされているWijmoファイルを 参 照 します Wijmoスクリプトファイルを Scripts というフォルダに cssファイ ルを Styles というフォルダに Wijmoコントロールに 固 有 のスクリプトファイルを Controls フォルダにダウンロードして 配 置 した 場 合 は ページの<head>タグ 内 に 次 の 参 照 を 追 加 します <script src="controls/wijmo.min.js" type="text/javascript"></script> <link href="styles/wijmo.min.css" rel="stylesheet" type="text/css" /> <script src="scripts/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="controls/wijmo.gauge.min.js" type="text/javascript"></script> <script src="scripts/webapiclient.min.js" type="text/javascript"></script> 3. ボタンを 追 加 し ボタンクリックでエクスポート 機 能 を 呼 び 出 して エクスポート 要 求 が 開 始 されるようにします MVC 次 のコードを[Views] [MVCFlexGrid] [Index.cshtml]に 追 加 して エクスポート/インポート 機 能 に 対 応 するボタンを 追 加 します 次 のコードを[Views] [BulletGraph] [Index.cshtml]に 追 加 して エクスポート 機 能 に 対 応 するボタンを 追 加 します Index.cshtml <select id="myselect"> <option selected>png</option> <option>jpg</option> <option>gif</option> <option>bmp</option> <option>tiff</option> </select> <button onclick="exportimage()" title="export">export</button> copycode 次 のマークアップを<body>タグ 内 に 追 加 して エクスポート 機 能 に 対 応 するボタンを 作 成 します <button onclick="exportimage()" title="export">export</button> 先 頭 に 戻 る 手 順 2:クライアントプロジェクトを 実 行 する MVCアプリケーション [ビルド] [ソリューションのビルド]をクリックして プロジェクトをビルドします [F5]キーを 押 してプロジェクトを 実 行 します アプリケーション 57 Copyright GrapeCity inc. All rights reserved.

ファイルを 保 存 し それをブラウザで 開 きます [Export]ボタンがコントロールと 共 に 出 力 に 表 示 されます このボタンを 使 用 して コントロールを 画 像 としてエクスポートできます MVCおよびWijmo5 BulletGraphコントロールを 使 用 した 画 像 エクスポートサービスのデモサンプルをぜひご 覧 ください 先 頭 に 戻 る MVCBulletGraphライブデモ Wijmo5BulletGraphライブデモ RadialGaugeの の 画 像 エクスポート このセクションでは クライアントアプリケーションを 通 してWeb APIサービスプロジェクトを 呼 び 出 し RadialGaugeコントロール を 画 像 としてエクスポートするための 関 数 を 追 加 する 方 法 を 説 明 します 手 順 1:サービスを 呼 び 出 す 手 順 2:クライアントプロジェクトを 実 行 する 次 の 図 は 上 記 の 手 順 を 実 行 した 後 のRadialGaugeを 示 しています Radial Gauge Png Export 手 順 1:サービスを 呼 び 出 す Web APIサービスを 呼 び 出 すには 次 の 手 順 を 実 行 します 1. C1 Web APIクライアントJavaScriptファイルとその 参 照 をMVCまたはプロジェクトに 追 加 します( 詳 細 な 手 順 に ついては Web APIクライアントJavaScriptの 追 加 を 参 照 してください) 2. Client JavaScript Helperを 使 用 して エクスポート 機 能 を 実 装 するための 関 数 を 作 成 します MVC RadialGaugeコントロールを 画 像 にエクスポートするには 次 のコードを[Views] [RadialGauge] [Index.cshtml]に 追 加 します 58 Copyright GrapeCity inc. All rights reserved.

Index.cshtml <script type="text/javascript"> copycode function exportimage() var exporter = new wijmo.gauge.imageexporter(); imagetype = document.getelementbyid("myselect").value; control = wijmo.control.getcontrol('#radialgauge'); exporter.requestexport(control, "http://demos.componentone.com/aspnet/c1webapiservice/api/export/image", filename: "exportradialgauge", type: imagetype, ); </script> RadialGaugeコントロールを 画 像 にエクスポートするには 次 のマークアップを<script>タグ 内 に 追 加 します JavaScript <script type="text/javascript"> function exportimage() var exporter = new wijmo.gauge.imageexporter(); var radialgauge = wijmo.control.getcontrol("#radialgauge"); exporter.requestexport(radialgauge, " http://demos.componentone.com/aspnet/c1webapiservice/api/export/image", filename: "exportradialgauge", type: Png, ); </script> メモ: アプリケーションでWijmo 5コントロールを 使 用 するには いくつかのWijmoファイルへの 参 照 を ページに 含 める 必 要 があります これらのWijmoファイルをダウンロードしてアプリケーション 内 の 適 切 な フォルダにコピーするか クラウド 上 のコンテンツ 配 信 ネットワーク(CDN)でホストされているWijmoファイルを 参 照 します Wijmoスクリプトファイルを Scripts というフォルダに cssファイルを Styles というフォルダに Wijmo コントロールに 固 有 のスクリプトファイルを Controls フォルダにダウンロードして 配 置 した 場 合 は ページ の<head>タグ 内 に 次 の 参 照 を 追 加 します <script src="controls/wijmo.min.js" type="text/javascript"></script> <link href="styles/wijmo.min.css" rel="stylesheet" type="text/css" /> <script src="scripts/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="controls/wijmo.gauge.min.js" type="text/javascript"></script> <script src="scripts/webapiclient.min.js" type="text/javascript"></script> 3. ボタンを 追 加 し ボタンクリックでエクスポート 機 能 を 呼 び 出 して エクスポート 要 求 が 開 始 されるようにします MVC 59 Copyright GrapeCity inc. All rights reserved.

次 のコードを[Views] [MVCFlexGrid] [Index.cshtml]に 追 加 して エクスポート/インポート 機 能 に 対 応 す るボタンを 追 加 します 次 のコードを[Views] [RadialGauge] [Index.cshtml]に 追 加 して エクスポート 機 能 に 対 応 するボタンを 追 加 しま す Index.cshtml <select id="myselect"> <option selected>png</option> <option>jpg</option> <option>gif</option> <option>bmp</option> <option>tiff</option> </select> <button onclick="exportimage()" title="export">export</button> copycode 次 のマークアップを<body>タグ 内 に 追 加 して エクスポート 機 能 に 対 応 するボタンを 作 成 します <button onclick="exportimage()" title="export">export</button> 先 頭 に 戻 る 手 順 2:クライアントプロジェクトを 実 行 する MVCアプリケーション [ビルド] [ソリューションのビルド]をクリックして プロジェクトをビルドします [F5]キーを 押 してプロジェクトを 実 行 します アプリケーション ファイルを 保 存 し それをブラウザで 開 きます [Export]ボタンがコントロールと 共 に 出 力 に 表 示 されます このボタンを 使 用 して コントロールを 画 像 としてエクス ポートできます MVCおよびWijmo5 RadialGaugeコントロールを 使 用 した 画 像 エクスポートサービスのデモサンプルをぜひご 覧 ください 先 頭 に 戻 る MVCRadialGaugeライブデモ Wijmo5RadialGaugeライブデモ FlexPieの の 画 像 エクスポート このセクションでは クライアントアプリケーションを 通 してWeb APIサービスプロジェクトを 呼 び 出 し FlexPieコントロールを 画 像 としてエクスポートする ための 関 数 を 追 加 する 方 法 を 説 明 します 手 順 1:サービスを 呼 び 出 す 60 Copyright GrapeCity inc. All rights reserved.

手 順 2:クライアントプロジェクトを 実 行 する 次 の 図 は 上 記 の 手 順 を 実 行 した 後 のFlexPieを 示 しています Png Export 手 順 1:サービスを 呼 び 出 す Web APIサービスを 呼 び 出 すには 次 の 手 順 を 実 行 します 1. C1 Web APIクライアントJavaScriptファイルとその 参 照 をMVCまたはプロジェクトに 追 加 します( 詳 細 な 手 順 については Web APIク ライアントJavaScriptの 追 加 を 参 照 してください) 2. Client JavaScript Helperを 使 用 して エクスポート 機 能 を 実 装 するための 関 数 を 作 成 します MVC FlexPieコントロールを 画 像 にエクスポートするには 次 のコードを[Views] [FlexPie] [Index.cshtml]に 追 加 します Index.cshtml <script type="text/javascript"> copycode function exportimage() var exporter = new wijmo.chart.imageexporter(); imagetype = document.getelementbyid("myselect").value; control = wijmo.control.getcontrol('#flexpie'); exporter.requestexport(control, "http://demos.componentone.com/aspnet/c1webapiservice/api/export/image", filename: "exportflexpie", type: imagetype, ); </script> 61 Copyright GrapeCity inc. All rights reserved.

FlexPieコントロールを 画 像 にエクスポートするには 次 のマークアップを<script>タグ 内 に 追 加 します JavaScript <script type="text/javascript"> function exportimage() var exporter = new wijmo.chart.imageexporter(); var control = wijmo.control.getcontrol("#flexpie"); exporter.requestexport(control, " http://demos.componentone.com/aspnet/c1webapiservice/api/export/image", filename: "exportflexpie", type: Png, ); </script> メモ: アプリケーションでWijmo 5コントロールを 使 用 するには いくつかのWijmoファイルへの 参 照 をページに 含 める 必 要 があります これらのWijmoファイルをダウンロードしてアプリケーション 内 の 適 切 なフォルダにコピーするか クラウド 上 のコンテンツ 配 信 ネットワーク(CDN)でホストされているWijmoファイルを 参 照 します Wijmoスクリプトファイルを Scripts というフォルダに cssファイ ルを Styles というフォルダに Wijmoコントロールに 固 有 のスクリプトファイルを Controls フォルダにダウンロードして 配 置 した 場 合 は ページの<head>タグ 内 に 次 の 参 照 を 追 加 します <script src="controls/wijmo.min.js" type="text/javascript"></script> <link href="styles/wijmo.min.css" rel="stylesheet" type="text/css" /> <script src="scripts/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="controls/wijmo.chart.min.js" type="text/javascript"></script> <script src="scripts/webapiclient.min.js" type="text/javascript"></script> 3. ボタンを 追 加 し ボタンクリックでエクスポート 機 能 を 呼 び 出 して エクスポート 要 求 が 開 始 されるようにします MVC 次 のコードを[Views] [MVCFlexGrid] [Index.cshtml]に 追 加 して エクスポート/インポート 機 能 に 対 応 するボタンを 追 加 します 次 のコードを[Views] [FlexPie] [Index.cshtml]に 追 加 して エクスポート 機 能 に 対 応 するボタンを 追 加 します Index.cshtml <select id="myselect"> <option selected>png</option> <option>jpg</option> <option>gif</option> <option>bmp</option> <option>tiff</option> </select> <button onclick="exportimage()" title="export">export</button> copycode 次 のマークアップを<body>タグ 内 に 追 加 して エクスポート 機 能 に 対 応 するボタンを 作 成 します <button onclick="exportimage()" title="export">export</button> 先 頭 に 戻 る 62 Copyright GrapeCity inc. All rights reserved.

手 順 2:クライアントプロジェクトを 実 行 する MVCアプリケーション [ビルド] [ソリューションのビルド]をクリックして プロジェクトをビルドします [F5]キーを 押 してプロジェクトを 実 行 します アプリケーション ファイルを 保 存 し それをブラウザで 開 きます [Export]ボタンがコントロールと 共 に 出 力 に 表 示 されます このボタンを 使 用 して コントロールを 画 像 としてエクスポートできます MVCおよびWijmo5 FlexPieコントロールを 使 用 した 画 像 エクスポートサービスのデモサンプルをぜひご 覧 ください 先 頭 に 戻 る MVCFlexPieライブデモ Wijmo5FlexPieライブデモ FlexChartの の 画 像 エクスポート このセクションでは クライアントアプリケーションを 通 してWeb APIサービスプロジェクトを 呼 び 出 し FlexChartコントロールを 画 像 としてエクスポート するための 関 数 を 追 加 する 方 法 を 説 明 します 手 順 1:サービスを 呼 び 出 す 手 順 2:クライアントプロジェクトを 実 行 する 次 の 図 は 上 記 の 手 順 を 実 行 した 後 のFlexChartを 示 しています Png Export 手 順 1:サービスを 呼 び 出 す Web APIサービスを 呼 び 出 すには 次 の 手 順 を 実 行 します 1. C1 Web APIクライアントJavaScriptファイルとその 参 照 をMVCまたはプロジェクトに 追 加 します( 詳 細 な 手 順 については Web APIク ライアントJavaScriptの 追 加 を 参 照 してください) 2. Client JavaScript Helperを 使 用 して エクスポート 機 能 を 実 装 するための 関 数 を 作 成 します MVC FlexChartコントロールを 画 像 にエクスポートするには 次 のコードを[Views] [FlexChart] [Index.cshtml]に 追 加 します 63 Copyright GrapeCity inc. All rights reserved.

Index.cshtml <script type="text/javascript"> function exportimage() var exporter = new wijmo.chart.imageexporter(); imagetype = document.getelementbyid("myselect").value; control = wijmo.control.getcontrol('#flexchart'); exporter.requestexport(control, "http://demos.componentone.com/aspnet/c1webapiservice/api/export/image", filename: "exportflexchart", type: imagetype, ); </script> copycode FlexChartコントロールを 画 像 にエクスポートするには 次 のマークアップを<script>タグ 内 に 追 加 します JavaScript <script type="text/javascript"> function exportimage() var exporter = new wijmo.chart.imageexporter(); var control = wijmo.control.getcontrol("#flexchart"); exporter.requestexport(control, " http://demos.componentone.com/aspnet/c1webapiservice/api/export/image", filename: "exportflexchart", type: Png, ); </script> メモ: アプリケーションでWijmo 5コントロールを 使 用 するには いくつかのWijmoファイルへの 参 照 をページに 含 める 必 要 があります これらのWijmoファイルをダウンロードしてアプリケーション 内 の 適 切 なフォルダにコピーするか クラウド 上 のコンテンツ 配 信 ネットワーク(CDN)でホストされているWijmoファイルを 参 照 します Wijmoスクリプトファイルを Scripts というフォルダに cssファイ ルを Styles というフォルダに Wijmoコントロールに 固 有 のスクリプトファイルを Controls フォルダにダウンロードして 配 置 した 場 合 は ページの<head>タグ 内 に 次 の 参 照 を 追 加 します <script src="controls/wijmo.min.js" type="text/javascript"></script> <link href="styles/wijmo.min.css" rel="stylesheet" type="text/css" /> <script src="scripts/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="controls/wijmo.chart.min.js" type="text/javascript"></script> <script src="scripts/webapiclient.min.js" type="text/javascript"></script> 3. ボタンを 追 加 し ボタンクリックでエクスポート 機 能 を 呼 び 出 して エクスポート 要 求 が 開 始 されるようにします MVC 次 のコードを[Views] [MVCFlexGrid] [Index.cshtml]に 追 加 して エクスポート/インポート 機 能 に 対 応 するボタンを 追 加 します 次 のコードを[Views] [FlexChart] [Index.cshtml]に 追 加 して エクスポート 機 能 に 対 応 するボタンを 追 加 します Index.cshtml <select id="myselect"> <option selected>png</option> <option>jpg</option> <option>gif</option> <option>bmp</option> copycode 64 Copyright GrapeCity inc. All rights reserved.

<option>tiff</option> </select> <button onclick="exportimage()" title="export">export</button> 次 のマークアップを<body>タグ 内 に 追 加 して エクスポート 機 能 に 対 応 するボタンを 作 成 します <button onclick="exportimage()" title="export">export</button> 先 頭 に 戻 る 手 順 2:クライアントプロジェクトを 実 行 する MVCアプリケーション [ビルド] [ソリューションのビルド]をクリックして プロジェクトをビルドします [F5]キーを 押 してプロジェクトを 実 行 します アプリケーション ファイルを 保 存 し それをブラウザで 開 きます [Export]ボタンがコントロールと 共 に 出 力 に 表 示 されます このボタンを 使 用 して コントロールを 画 像 としてエクスポートできます MVCおよびWijmo5 FlexChartコントロールを 使 用 した 画 像 エクスポートサービスのデモサンプルをぜひご 覧 ください 先 頭 に 戻 る MVCFlexChartライブデモ Wijmo5FlexChartライブデモ LinearGaugeの の 画 像 エクスポート このセクションでは クライアントアプリケーションを 通 してWeb APIサービスプロジェクトを 呼 び 出 し LinearGaugeコントロールを 画 像 としてエクスポー トするための 関 数 を 追 加 する 方 法 を 説 明 します 手 順 1:サービスを 呼 び 出 す 手 順 2:クライアントプロジェクトを 実 行 する 次 の 図 は 上 記 の 手 順 を 実 行 した 後 のLinearGaugeを 示 しています Linear Gauge Png Export 手 順 1:サービスを 呼 び 出 す Web APIサービスを 呼 び 出 すには 次 の 手 順 を 実 行 します 1. C1 Web APIクライアントJavaScriptファイルとその 参 照 をMVCまたはプロジェクトに 追 加 します( 詳 細 な 手 順 については Web APIク ライアントJavaScriptの 追 加 を 参 照 してください) 2. Client JavaScript Helperを 使 用 して エクスポート 機 能 を 実 装 するための 関 数 を 作 成 します MVC LinearGaugeコントロールを 画 像 にエクスポートするには 次 のコードを[Views] [LinearGauge] [Index.cshtml]に 追 加 します 65 Copyright GrapeCity inc. All rights reserved.

Index.cshtml <script type="text/javascript"> function exportimage() var exporter = new wijmo.gauge.imageexporter(); imagetype = document.getelementbyid("myselect").value; control = wijmo.control.getcontrol('#lineargauge'); exporter.requestexport(control, "http://demos.componentone.com/aspnet/c1webapiservice/api/export/image", filename: "exportlineargauge", type: imagetype, ); </script> copycode LinearGaugeコントロールを 画 像 にエクスポートするには 次 のマークアップを<script>タグ 内 に 追 加 します JavaScript <script type="text/javascript"> function exportimage() var exporter = new wijmo.gauge.imageexporter(); var gauge = wijmo.control.getcontrol("#lineargauge"); exporter.requestexport(gauge, " http://demos.componentone.com/aspnet/c1webapiservice/api/export/image", filename: "exportlineargauge",type: Png, ); </script> メモ: アプリケーションでWijmo 5コントロールを 使 用 するには いくつかのWijmoファイルへの 参 照 をページに 含 める 必 要 があります これらのWijmoファイルをダウンロードしてアプリケーション 内 の 適 切 なフォルダにコピーするか クラウド 上 のコンテンツ 配 信 ネットワーク(CDN)でホストされているWijmoファイルを 参 照 します Wijmoスクリプトファイルを Scripts というフォルダに cssファイ ルを Styles というフォルダに Wijmoコントロールに 固 有 のスクリプトファイルを Controls フォルダにダウンロードして 配 置 した 場 合 は ページの<head>タグ 内 に 次 の 参 照 を 追 加 します <script src="controls/wijmo.min.js" type="text/javascript"></script> <link href="styles/wijmo.min.css" rel="stylesheet" type="text/css" /> <script src="scripts/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="controls/wijmo.gauge.min.js" type="text/javascript"></script> <script src="scripts/webapiclient.min.js" type="text/javascript"></script> 3. ボタンを 追 加 し ボタンクリックでエクスポート 機 能 を 呼 び 出 して エクスポート 要 求 が 開 始 されるようにします MVC 次 のコードを[Views] [MVCFlexGrid] [Index.cshtml]に 追 加 して エクスポート 機 能 に 対 応 するボタンを 追 加 します 次 のコードを[Views] [LinearGauge] [Index.cshtml]に 追 加 して エクスポート 機 能 に 対 応 するボタンを 追 加 します Index.cshtml <select id="myselect"> <option selected>png</option> <option>jpg</option> <option>gif</option> <option>bmp</option> <option>tiff</option> copycode 66 Copyright GrapeCity inc. All rights reserved.

</select> <button onclick="exportimage()" title="export">export</button> 次 のマークアップを<body>タグ 内 に 追 加 して エクスポート 機 能 に 対 応 するボタンを 作 成 します <button onclick="exportimage()" title="export">export</button> 先 頭 に 戻 る 手 順 2:クライアントプロジェクトを 実 行 する MVCアプリケーション [ビルド] [ソリューションのビルド]をクリックして プロジェクトをビルドします [F5]キーを 押 してプロジェクトを 実 行 します アプリケーション ファイルを 保 存 し それをブラウザで 開 きます [Export]ボタンがコントロールと 共 に 出 力 に 表 示 されます このボタンを 使 用 して コントロールを 画 像 としてエクスポートできます MVCおよびWijmo5 LinearGaugeコントロールを 使 用 した 画 像 エクスポートサービスのデモサンプルをぜひご 覧 ください 先 頭 に 戻 る MVCLinearGaugeライブデモ Wijmo5LinearGaugeライブデモ バーコードサービス 各 種 の 標 準 エンコーディングタイプを 使 用 し ( 指 定 された)テキストに 基 づいて C1でサポートされるスキャン 可 能 なバーコー ドをオンザフライで 作 成 します これによって 取 得 されたバーコードは 画 像 またはストリームとして 保 存 できます たとえば バーコードをPDFドキュメントまたはフォームで 使 用 したいとします この 場 合 は バーコード 化 するテキストとバー コードタイプを 単 純 なクライアントアプリケーションを 通 して 提 供 するだけで 済 みます クライアントアプリケーションがGET 要 求 をREST APIサービスに 送 ると REST APIは 応 答 として 生 成 したバーコードを 画 像 ストリームで 返 します バーコードサービスで は バーコードの 画 像 をPNG JPEG BMP GIF またはTIFFの 各 画 像 形 式 で 保 存 できます 取 得 したバーコード 画 像 は PDF や 他 のドキュメント フォーム データベース IDカードなどに 埋 め 込 んだり 使 用 することができます バーコードサービス 要 求 のスキーマ クライアントアプリケーションがHTTP 要 求 メッセージをサービスにGET: http://[:port]/api/barcode として 送 信 します 目 的 のバーコード 画 像 を 生 成 するには このサービスURLで 各 種 のバーコードパラメータを 指 定 する 必 要 があります 以 下 の 図 解 は バーコードを 生 成 するパラメータを 指 定 したリクエストURLを 示 しています 次 の 表 は バーコードパラメータと それぞれでサポートされる 値 を 示 します 67 Copyright GrapeCity inc. All rights reserved.

バーコー ドパラメー タ サポートされる 値 説 明 タイプ PNG JPEG BMP GIFF TIFF 生 成 するバーコード 画 像 のファイルタイプを 指 定 しま す Text エンコーディングタイプに 依 存 します 詳 細 については サポートされるバーコードシンボル を 参 照 してくださ い バーコード 画 像 にエンコードされるテキスト 文 字 列 を 指 定 します コードタイ プ サポートされるバーコードシンボル を 参 照 してくださ い テキスト 文 字 列 から 画 像 を 生 成 するために サポート されるすべてのエンコーディングタイプを 指 定 します 背 景 色 透 過 白 黒 赤 緑 青 黄 オレンジ 生 成 するバーコード 画 像 の 背 景 色 を 指 定 します 前 景 色 透 過 白 黒 赤 緑 青 黄 オレンジ サポートされるバーコード 画 像 の 前 景 色 を 指 定 しま す キャプショ ンの 位 置 キャプショ ンの 配 置 チェックサ ムの 有 効 化 上 下 なし 左 中 央 右 True False 生 成 したバーコード 画 像 内 でのバーコードのキャプ ションの 位 置 を 指 定 します 生 成 したバーコード 画 像 内 でのバーコードのキャプ ションの 配 置 を 指 定 します バーコードに 対 してチェックサムを 計 算 して 生 成 す る 画 像 に 含 めるかどうかを 指 定 します テキストからバーコードを 生 成 このセクションでは クライアントアプリケーションを 通 してWeb APIサービスを 呼 び 出 し 目 的 のテキストからバーコード 画 像 を 生 成 する 方 法 を 具 体 的 に 示 します 手 順 1:サービスを 呼 び 出 す 手 順 2:クライアントプロジェクトを 実 行 する 次 の 図 は 上 記 の 手 順 を 実 行 した 後 に 生 成 されるバーコードを 示 しています 次 の 例 では Web APIサービスをおよびWinFormsクライアントアプリケーションから 呼 び 出 します これらのクライアント はサービスにGET 要 求 を 送 り サービスは 応 答 としてバーコードストリームを 返 します この 応 答 ストリームは 上 記 のバーコー ド 画 像 のように 画 像 として 保 存 されます 次 の 例 では サービスURLはTextパラメータに1234567890を 取 り エンコーディングタイプパラメータとしてCode39xを 取 って 上 記 の 画 像 を 生 成 します Web App to call C1 Web API The web api url: http://demos.componentone.com/aspnet/c1webapiservice/api/barcode 68 Copyright GrapeCity inc. All rights reserved.

http://demos.componentone.com/aspnet/c1webapiservice/api/barcode FileFormat: Jpeg BarcodeText: 123456790 CodeType: Code39x BackColor: White ForeColor: Black CaptionPosition: Below CaptionAlignment: Center CheckSumEnabled: True Generate Barcode 手 順 1:サービスを 呼 び 出 す Web APIサービスを 呼 び 出 すには 次 の 手 順 を 実 行 します C# 1. REST APIサービスに 対 するクライアントの 設 定 の 説 明 に 従 ってWinFormsアプリケーションを 作 成 します 1つの C1Label C1TextBox および1つのC1Buttonコントロールを 追 加 します フォームが 次 のように 表 示 されます 2. 以 下 に 示 すように お 使 いのWinFormsアプリケーションのフォームクラスにメソッド(たとえば GetBarcode())を 定 義 し て サービスアプリケーションを 呼 び 出 します C# public void GetBarcode() var apiurl = string.isnullorempty(c1textbox1.text)? "http://demos.componentone.com/aspnet/c1webapiservice/api/barcode? Type=Png&Text=1234567890&CodeType=Ansi39" : c1textbox1.text; WebRequest request = WebRequest.Create(apiURL); 69 Copyright GrapeCity inc. All rights reserved.

WebResponse response = request.getresponse(); var filestream = File.Create("D:\\BarcodeImg.Png"); //ここで 指 定 するファイル 形 式 は リクエストURLに 指 定 されたものと 同 じである 必 要 があります response.getresponsestream().copyto(filestream); 3. [バーコードを 生 成 ]ボタンのボタンクリックイベントで GetBarcode()メソッドを 呼 び 出 します 1. REST APIサービスに 対 するクライアントの 設 定 の 説 明 に 従 ってアプリケーションを 作 成 します 2. ページの<body>タグ 内 の<form>タグに 以 下 のマークアップを 追 加 します <form action="http://demos.componentone.com/aspnet/c1webapiservice/api/barcode" method="get"> <label for="fileformat">file Format:</label> <input type="text" id="fileformat" name="type" value="jpeg" /> <br /><br /> <label for="text"> Barcode Text:</label> <input type="text" id="text" name="text" value="123456790"/> <br /><br /> <label for="codetype">code Type:</label> <input type="codetype" id="codetype" name="codetype" value="code39x"/> <br /><br /> <label for="backcolor">back Color:</label> <input type="backcolor" id="backcolor" name="backcolor" value="white" /> <br /><br /> <label for="forecolor">fore Color:</label> <input type="forecolor" id="forecolor" name="forecolor" value="black"/> <br /><br /> <label for="captionposition">caption Position:</label> <input type="captionposition" id="captionposition" name="captionposition" value="below" /> <br /><br /> <label for="captionalignment">caption Alignment:</label> <input type="captionalignment" id="captionalignment" name="captionalignment" value="center" /> <br /><br /> <label for="checksumenabled">checksum Enabled:</label> <input type="checksumenabled" id="checksumenabled" name="checksumenabled" value="true" /> <br /><br /> <input type="submit" value="generate Barcode"/> </form> 先 頭 に 戻 る GET 要 求 に 関 して <form>タグのmethod 属 性 にGET およびそのaction 属 性 にサービス 要 求 URLを 設 定 したことに 注 意 してください また ページに 入 力 コントロールを 作 成 します これらのコントロールは 指 定 したテキストから 目 的 の 画 像 形 式 のバーコード 画 像 を 生 成 する 各 種 のバーコードパラメータを 取 ります 70 Copyright GrapeCity inc. All rights reserved.

手 順 2:クライアントプロジェクトを 実 行 する WinFormsアプリケーション [ビルド] [ソリューションのビルド]をクリックして プロジェクトをビルドします [F5]を 押 してプロジェクトを 実 行 します Request URLフィールドに 対 応 するテキストボックスに 適 切 なバーコードパラメータを 含 むクエリー 文 字 列 と 共 に サー ビスURLを 指 定 します [バーコードを 生 成 ]ボタンをクリックします GetBarcode()メソッドで 指 定 された 位 置 に 生 成 されたバーコードの 画 像 がダウンロードされます アプリケーション ファイルを 保 存 し それをブラウザで 開 きます 意 図 したバーコード 画 像 を 得 るためのバーコードパラメータを 設 定 し [バーコードを 生 成 ]ボタンをクリックします 以 下 に 示 す バーコードを 生 成 するREST APIサービスのデモサンプルをご 覧 ください 先 頭 に 戻 る バーコード 生 成 のライブデモ サポートされているバーコードシンボル バーコードエンコーディングのさまざまなタイプ(またはバーコードシンボル)により テキスト/メッセージの 文 字 と 数 字 をバー コード 内 の 広 いバーと 細 いバー スペース およびクワイエットゾーンのパターンに 変 換 するスキームが 指 定 されます 以 下 の 表 では バーコードサービスでサポートされるエンコーディングタイプを 解 説 します コードタイプ 例 説 明 Ansi39 ANSI 3 of 9(Code 39)は 大 文 字 数 字 -, * $ / + %を 使 用 します これがデ フォルトのバーコードスタイルです Ansi39x Codabar ANSI Extended 3 of 9(Extended Code 39)は ASCII 文 字 セット 全 体 を 使 用 しま す Codabarは A B C D + - :. / $および 数 字 を 使 用 します Code_128_A Code 128 Aは 制 御 文 字 数 字 句 読 点 大 文 字 を 使 用 します Code_128_B Code 128 Bは 数 字 句 読 点 大 文 字 小 文 字 を 使 用 します 71 Copyright GrapeCity inc. All rights reserved.

Code_128_C Code 128 Cは 数 字 だけを 使 用 します Code_128auto Code_2_of_5 Code 128 Autoは ASCII 文 字 セット 全 体 を 使 用 します 最 小 のバーコードになるよ うに Code 128 A B およびCから1つが 自 動 的 に 選 択 されます Code 2 of 5は 数 字 だけを 使 用 します Code93 Code 93は 大 文 字 数 字 % $ * /, + - を 使 用 します Code25intlv Interleaved 2 of 5は 数 字 だけを 使 用 しま す Code39 Code 39は 大 文 字 数 字 % * $ /., - +を 使 用 します Code39x Extended Code 39は ASCII 文 字 セット 全 体 を 使 用 します Code49 Code93x Code 49は 各 段 8 文 字 の2~8 段 から 成 る2 次 元 高 密 度 スタック 型 バーコードです 各 段 には スタートコードとストップコード が 含 まれます ASCII 文 字 セット 全 体 をエ ンコードします Extended Code 93は ASCII 文 字 セット 全 体 を 使 用 します DataMatrix Data Matrixは 正 方 形 または 長 方 形 のマ トリックスパターンに 並 べられた 正 方 形 モ ジュールから 成 る2 次 元 高 密 度 バーコード です EAN_13 EAN-13は 数 字 (12 個 の 数 字 とチェックデ ジット)だけを 使 用 します 12 個 の 数 字 だ けを 文 字 列 として 受 け 取 ってチェックデ ジット(CheckSum)を 計 算 し それを13 番 目 の 位 置 に 追 加 します チェックデジット は バーコードが 正 しくスキャンされたかど 72 Copyright GrapeCity inc. All rights reserved.

うかを 検 証 するために 使 用 される 追 加 の 桁 です チェックデジットは CheckSumプ ロパティがtrueに 設 定 されると 自 動 的 に 追 加 されます EAN_8 EAN-8は 数 字 (7 個 の 数 字 とチェックデ ジット)だけを 使 用 します EAN128FNC1 EAN-128は 運 送 業 で 梱 包 物 を 識 別 する ためのアプリケーション 識 別 子 (AI)データ の1 次 元 英 数 字 表 現 です このタイプのバーコードには 以 下 のセク ションが 含 まれています 先 頭 のクワイエットゾーン( 空 白 領 域 ) Code 128のスタート 文 字 スキャナにEAN-128バーコードで あることを 識 別 させるFNC(ファンク ション)1 文 字 データ(AI +データフィールド) シンボルチェック 文 字 ( スタート コード 値 + 各 文 字 位 置 と 各 文 字 値 の 積 を103で 除 算 この 剰 余 値 が チェックサム) ストップ 文 字 末 尾 のクワイエットゾーン( 空 白 領 域 ) データセクションのAIは 後 に 続 くデータの タイプ(ID 日 付 数 量 計 量 単 位 など)を 設 定 します データのタイプごとに 固 有 の データ 構 造 があります このAIがあること が EAN-128コードがCode 128と 異 なる 点 です 1つのバーコードで 複 数 のAI(およびその データ)を 組 み 合 わせることができます EAN128FNC1はUCC/EAN-128 (EAN128)バーコードタイプの1つで 任 意 の 場 所 にFNC1 文 字 を 挿 入 したり バーサ イズを 調 整 することができるなど UCC/EAN-128にはない 機 能 をサポートし ています FNC1 文 字 を 挿 入 するには 実 行 時 にText プロパティに"\n"(C#の 場 合 )また は"vbLf"(VBの 場 合 )を 設 定 します IntelligentMail Intelligent Mail( 以 前 の4-State Customer Barcode)は 米 国 内 の 郵 便 に 使 用 される65 本 のバーコードです 73 Copyright GrapeCity inc. All rights reserved.

JapanesePostal Matrix_2_of_5 MicroPDF417 MSI これは 日 本 の 郵 便 制 度 で 使 用 される バーコードです 18 桁 の 英 数 字 をエンコー ドします これには 7 桁 の 郵 便 番 号 の 後 に 必 要 に 応 じて 番 地 や 部 屋 番 号 などの 情 報 が 含 まれます エンコードするデータ にはハイフンを 含 めることができます Matrix 2 of 5は 3 本 の 黒 バーと2 本 の 白 バーから 成 る 比 較 的 高 密 度 のバーコード です MicroPDF417は PDF417から 派 生 された 2 次 元 多 段 バーコードです Micro- PDF417は データをできる 限 り 小 さなサイ ズの2 次 元 シンボル( 最 大 150バイト 英 数 字 250 文 字 数 字 366 桁 )にエンコードする 必 要 があるアプリケーション 用 に 設 計 され ています MicroPDF417では 可 変 長 のアプリケー ション 識 別 子 (AI)のフィールド 区 切 り 文 字 としてFNC1 文 字 を 挿 入 することができま す FNC1 文 字 を 挿 入 するには 実 行 時 にText プロパティに"\n"(C#の 場 合 )また は"vbLf"(VBの 場 合 )を 設 定 します MSI Codeは 数 字 だけを 使 用 します Pdf417 PostNet Pdf417は よく 使 用 されている2 次 元 高 密 度 バーコードです 最 大 1,108バイトの 情 報 をエンコードできます このバーコード は 小 さなバーコードを 積 み 重 ねて 構 成 さ れます ASCII 文 字 セット 全 体 をエンコード します 10のエラー 修 正 レベルと3つの データコンパクションモード(Text Byte およびNumeric)があります このバー コードシンボルは 英 数 字 で 最 大 1,850 文 字 数 字 で 最 大 2,710 桁 をエンコードでき ます PostNetは 数 字 とチェックデジットを 使 用 します QRCode QRCodeは 英 数 字 やバイトデータに 加 え て 日 本 語 の 漢 字 やかな 文 字 も 扱 うことが できる2 次 元 バーコードです このバー コードは 最 大 7,366 文 字 をエンコードできま す 74 Copyright GrapeCity inc. All rights reserved.

RM4SCC RSS14 RSS14Stacked RSS14StackedOmnidirectional Royal Mail RM4SCCは 文 字 と 数 字 (チェックデジット 付 き)だけを 使 用 します これは イギリスのロイヤルメールで 使 用 されるバーコードです RSS14は 全 方 向 型 POSスキャンに EAN.UCC 品 目 識 別 を 使 用 する14 桁 の 省 スペースシンボル(Reduced Space Symbology:RSS)です RSS14Stackedは RSS14Truncatedと 同 様 にインジケータデジットを 含 むEAN.UCC 情 報 を 使 用 しますが 幅 が 狭 い 場 合 2 段 に 積 み 重 ねられます RSS14Stackedでは 合 成 オプションを 設 定 できます [タイプ] [タイプ]ドロップダウンリストか らバーコードのタイプを 選 択 し [ [ 値 ]フィー ルドで 合 成 バーコードの 値 を 指 定 できま す RSS14StackedOmnidirectionalは RSS14と 同 様 に 全 方 向 型 スキャンを 含 む EAN.UCC 情 報 を 使 用 しますが 幅 が 狭 い 場 合 2 段 に 積 み 重 ねられます RSS14Truncated RSSExpanded RSSExpandedStacked RSS14Truncatedは RSS14と 同 様 に EAN.UCC 情 報 を 使 用 しますが POSでス キャンされない 小 さな 品 目 に 使 用 するため に 0または1のインジケータデジットを 含 みます RSSExpandedは RSS14と 同 様 に EAN.UCC 情 報 を 使 用 しますが 重 量 や 賞 味 期 限 などのAI 要 素 を 追 加 します RSSExpandedでは 可 変 長 のアプリケー ション 識 別 子 (AI)のフィールド 区 切 り 文 字 としてFNC1 文 字 を 挿 入 することができま す FNC1 文 字 を 挿 入 するには 実 行 時 にText プロパティに"\n"(C#の 場 合 )また は"vbLf"(VBの 場 合 )を 設 定 します RSSExpandedStackedは RSSExpanded と 同 様 にAI 要 素 を 含 むEAN.UCC 情 報 を 使 用 しますが 幅 が 狭 い 場 合 2 段 に 積 み 重 ねられます RSSExpandedStackedでは 可 変 長 のア 75 Copyright GrapeCity inc. All rights reserved.

プリケーション 識 別 子 (AI)のフィールド 区 切 り 文 字 としてFNC1 文 字 を 挿 入 すること ができます FNC1 文 字 を 挿 入 するには 実 行 時 にText プロパティに"\n"(C#の 場 合 )また は"vbLf"(VBの 場 合 )を 設 定 します RSSLimited UCCEAN128 UPC_A RSS Limitedは RSS14と 同 様 にEAN.UCC 情 報 を 使 用 しますが POSでスキャンされ ない 小 さな 品 目 に 使 用 するために 0また は1のインジケータデジットを 含 みます RSSLimitedでは 合 成 オプションを 設 定 で きます [タイプ] [タイプ]ドロップダウンリストから バーコードのタイプを 選 択 し [ [ 値 ]フィール ドで 合 成 バーコードの 値 を 指 定 できます UCC/EAN 128は ASCII 文 字 セット 全 体 を 使 用 します HIBCアプリケーションで 使 用 される 特 殊 なCode 128です UPC-Aは 数 字 (11 個 の 数 字 とチェックデ ジット)だけを 使 用 します UPC_E0 UPC_E1 UPC-E0は 数 字 だけを 使 用 します Zero SuppressionのUPCシンボルに 使 用 されま す Captionプロパティには 6 桁 のUPC-E コードまたは 完 全 な11 桁 ( 必 須 のコードタ イプ0を 含 む)のUPC-Aコードを 入 力 する 必 要 があります 11 桁 のコードが 入 力 され た 場 合 バーコードコントロールは 可 能 であればそれを6 桁 のUPC-Eコードに 変 換 します 11 桁 のコードを6 桁 のコードに 変 換 できない 場 合 は 何 も 表 示 されません UPC-E1は 数 字 だけを 使 用 します 主 に 小 売 業 界 で 在 庫 ラベルに 使 用 されます UPC-E1の 入 力 文 字 列 の 長 さは 数 字 6 個 で す バーコード 機 能 以 下 に C1でサポートされ Web APIサービスを 使 用 して 生 成 できるバーコードを 示 します BarCodeDirection: バーコードの 方 向 を 選 択 できます 次 のオプションから 選 択 します LeftToRight: バーコードシンボルを 左 から 右 に 印 刷 します(デフォルト) RightToLeft:バーコードシンボルを 右 から 左 に 印 刷 します TopToBottom:バーコードシンボルを 上 から 下 に 印 刷 します BottomToTop:バーコードシンボルを 下 から 上 に 印 刷 します BarHeight: バーコードの 高 さを 画 面 ピクセル 単 位 で 指 定 します バーの 高 さがコントロールの 高 さより 大 きい 場 合 このプ ロパティは 無 視 されます CodeType:バーコード 画 像 を 生 成 するためにTextプロパティに 保 存 された 値 に 適 用 するエンコーディングを 選 択 できます CaptionAlignment:バーコードの 値 の 表 示 位 置 を 選 択 できます 使 用 可 能 なオプションは Left Right Centerです 76 Copyright GrapeCity inc. All rights reserved.

CaptionGrouping: 長 い 番 号 を 読 みやすくするために キャプションの 文 字 グループ 間 にスペースを 入 れるかどうかを 示 す 値 を 指 定 できます CaptionPosition:バーコードシンボルに 対 するキャプションの 相 対 的 な 垂 直 位 置 を 選 択 します 使 用 可 能 なオプションは None Above Belowです 画 像 : Textプロパティの 値 を 表 すバーコードの 画 像 を 取 得 します 画 像 は CodeTypeで 指 定 されたエンコーディングを 使 用 して 生 成 されます ModuleSize: バーコードのモジュール( 最 も 狭 いバーの 幅 )を 画 面 ピクセル 単 位 で 指 定 します 広 いバーの 幅 は バーコー ドタイプに 応 じて 自 動 的 に 計 算 されます QuietZone:バーコードのクワイエットゾーンを 指 定 できます クワイエットゾーンは バーコードがどこから 始 まってどこで 終 わるかをスキャナが 認 識 できるようにバーコードの 左 右 に 置 かれた 空 き 領 域 です 有 効 なパラメータは 次 のとおりです Left: バーコードの 左 に 残 す 空 き 領 域 のサイズを 入 力 します Right:バーコードの 右 に 残 す 空 き 領 域 のサイズを 入 力 します Top:バーコードの 上 に 残 す 空 き 領 域 のサイズを 入 力 します Bottom:バーコードの 下 に 残 す 空 き 領 域 のサイズを 入 力 します 次 の 図 は 左 右 のクワイエットゾーンを 示 します Text:バーコード 画 像 としてエンコードされる 値 を 指 定 できます WholeSize:バーコード 全 体 のサイズを 指 定 します WholeWidthはバーコード 全 体 の 幅 を 表 し WholeHeightはバーコード 全 体 の 高 さを 表 します FixLength:バーコードの 値 の 固 定 桁 数 を 指 定 できます これには 整 数 値 を 設 定 します AutoSize: バーコードをコントロールに 合 わせて 拡 大 するかどうかを 指 定 できます 値 はTrueまたはFalseです AutoSizeをTrueに 設 定 した 場 合 バーコードはコントロールにちょうど 収 まるように 自 動 的 に 拡 大 されます 読 み 取 り 可 能 なサイズは バーコード 自 体 によって 計 算 されます マトリックスバーコードのサイズは OnCalculateSizeメソッドによって 計 算 されます マトリックス 以 外 のバーコードのサイズは BarHeightとModuleSizeによって 計 算 されます 77 Copyright GrapeCity inc. All rights reserved.

AutoSizeをfalseに 設 定 した 場 合 バーコードのサイズは WidthプロパティまたはHeightプロパティによって 決 定 されます BarHeightがコントロールの 高 さより 大 きい 場 合 は コントロールがクリップされます BarHeightが 高 さより 小 さい 場 合 は バーコードとコントロールの 間 に 余 白 が 残 ります バーコードのタイプに 固 有 のオプションは 次 のとおりです CheckSumEnabled: チェックデジットを 自 動 的 に 追 加 するかどうかを 指 定 できます 連 結 されているデータに 既 にチェックデジット が 含 まれている 場 合 は チェックデジットが 自 動 的 に 追 加 されないようにする 必 要 があります このプロパティは Code49 Code128 PostNet5/9/11 JapanesePostalの 各 バーコードでサポートされます Ean128Fnc1Options: Dpi:プリンタの 解 像 度 を 指 定 します これには 整 数 値 を 設 定 します BarAdjust:ドット 単 位 の 調 整 サイズを 指 定 できます ModuleSize: バーコードモジュールの 水 平 方 向 のサイズを 指 定 できます これには 整 数 値 を 設 定 します Code25intlvOptions: BearBar:ITF(Interleaved Two of Five)バーコードにベアラバーを 表 示 するかどうかを 選 択 できます 値 はTrueまたはFalse です LineStroke:ベアラバーの 色 を 選 択 できます LineStrokeThickness: ベアラバーの 線 の 幅 を 選 択 できます これには 整 数 値 を 設 定 します Code49Options: Grouping: バーコードでグループ 化 を 使 用 します 値 はTrueまたはFalseです Group: バーコードをグループ 化 する 際 のグループ 番 号 を 取 得 または 設 定 します 有 効 な 値 は0~8です Groupingの 値 が Trueの 場 合 Groupの 値 の 範 囲 は0~8です Groupingの 値 がFalseの 場 合 Groupの 値 は0です Groupingの 値 がtrue で Group 値 が0より 小 さいか8より 大 きい 場 合 は BarCodeException.EnumErrorCode.Code49GroupNoが 生 成 されます DataMatrixOptions: EccMode: ECCモードを 選 択 します 有 効 な 値 は ECC000 ECC050 ECC080 ECC100 ECC140 ECC200です Ecc200SymbolSize: ECC200シンボルのサイズを 選 択 します デフォルト 値 はSquareAutoです Ecc200EncodingMode: ECC200エンコーディングモードを 選 択 します 有 効 な 値 は Auto ASCII C40 Text X12 EDIFACT Base256です Ecc000_140SymbolSize:ECC000_140シンボルのサイズを 選 択 します StructuredAppend: 現 在 のバーコードシンボルが 構 造 的 連 接 シンボルの 一 部 かどうかを 選 択 します StructureNumber: 構 造 的 連 接 シンボル 内 の 現 在 のシンボルの 構 造 番 号 を 指 定 します この 値 の 範 囲 は0~15です FileIdentifier: 関 連 する 構 造 的 連 接 シンボルグループのファイル 識 別 子 を 指 定 します 有 効 なファイル 識 別 子 値 は [1,254] 以 内 である 必 要 があります ファイル 識 別 子 を0に 設 定 すると ファイル 識 別 子 が 自 動 的 に 計 算 されます GS1CompositeOptions: Type: 合 成 シンボルタイプを 選 択 します 選 択 できる 値 はNoneまたはCCAです CCA(Composite Component - Version A)は 最 小 タイプの2 次 元 コンポジットコンポーネントです 値 : CCA 文 字 データを 指 定 できます MicroPDF417オプション: CompactionMode: CompactionModeのタイプを 選 択 します 有 効 な 値 は Auto TextCompactionMode NumericCompactionMode ByteCompactionModeです FileID: 構 造 的 連 接 シンボルのファイルIDを 指 定 します 0~899の 値 を 取 ります この 値 が0より 小 さいか899より 大 きい 場 合 は BarCodeException.EnumErrorCode.MicroPDF417FileIDが 生 成 されます SegmentCount: 構 造 的 連 接 シンボルのセグメント 数 を 指 定 します 0~99999の 値 を 取 ります この 値 が0より 小 さいか 99999より 大 きい 場 合 は BarCodeException.EnumErrorCode.MicroPDF417SegmentCountが 生 成 されます SegmentIndex: 構 造 的 連 接 シンボルのセグメントインデックスを 指 定 します 0~99998の 範 囲 で セグメント 数 の 値 より 小 さい 値 を 取 ります この 値 が0より 小 さいか99998より 大 きい 場 合 は BarCodeException.EnumErrorCode.MicroPDF417SegmentIndexが 生 成 されます 78 Copyright GrapeCity inc. All rights reserved.

Version: シンボルサイズを 選 択 します デフォルト 値 はColumnPriorAutoです PDF417オプション: Column: バーコードの 列 数 を 指 定 します これには 整 数 値 を 設 定 します デフォルト 値 は-1で 値 の 範 囲 は1~30です こ の 値 が-1 以 外 で1より 小 さいか30より 大 きい 場 合 は BarCodeException.EnumErrorCode.PDF417Colが 生 成 されます Row: バーコードの 行 数 を 指 定 します これには 整 数 値 を 設 定 します デフォルト 値 は-1で 値 の 範 囲 は3~90です この 値 が-1 以 外 で3より 小 さいか90より 大 きい 場 合 は BarCodeException.EnumErrorCode.PDF417Rowが 生 成 されます ErrorLevel: バーコードのエラー 修 正 レベルを 指 定 します これには 整 数 値 を 設 定 します 値 は-1または 値 の 範 囲 は0~8 です この 値 が-1 以 外 で0より 小 さいか8より 大 きい 場 合 は BarCodeException.EnumErrorCode.PDF417ErrorLevelが 生 成 されます レベル0は 強 度 が 低 く デフォルト 値 は-1です Type: PDF417バーコードのタイプを 選 択 します 使 用 可 能 なタイプはNormalおよびSimpleです QRCodeOptions: Model: QRCodeのモデルを 選 択 します 使 用 可 能 なモデルはModel1およびModel2です ErrorLevel: バーコードのエラー 修 正 レベルを 選 択 します 使 用 可 能 なオプションは Low Medium Quality Highです Version: バーコードのバージョンを 指 定 します マスク: バーコードのマスクに 使 用 されるパターンを 選 択 します QRCodeが 正 しく 読 み 取 られるようにするには マスク 処 理 で 明 度 のバランスを 取 る 必 要 があります 使 用 可 能 なオプションは Auto Mask000 Mask001 Mask010 Mask011 Mask100 Mask101 Mask110 Mask111です 次 の 図 は QRCodeのマスクを 示 します Connection: バーコードにコネクションを 使 用 するかどうかを 選 択 します 値 はTrueまたはFalseです ConnectionNumber: バーコードのコネクション 番 号 を 指 定 します 0~15の 範 囲 の 整 数 値 を 取 ります この 値 が0より 小 さ いか15より 大 きい 場 合 は EnumErrorCode.QRCodeConnectionNo 例 外 が 生 成 されます エンコーディング: バーコードのエンコーディングを 選 択 できます これには 整 数 値 を 設 定 します Modelプロパティが Model1に 設 定 されている 場 合 値 は-1または1~14の 範 囲 です ModelプロパティがModel2に 設 定 されている 場 合 値 は- 1または1~40の 範 囲 です RssExpandedStackedオプション: RowCount: 積 み 重 ねる 段 数 を 指 定 します これには 整 数 値 を 設 定 します 範 囲 は1~11です この 値 が1より 小 さいか11 より 大 きい 場 合 は BarCodeException.EnumErrorCode.RSSExpandedStackedCountが 生 成 されます 79 Copyright GrapeCity inc. All rights reserved.