ComponentOne Studio for ASP.NET Web Forms ユーザーガイド 2015.05.20 更 新 グレープシティ 株 式 会 社
目 次 ComponentOne Studio for ASP.NET Web Forms ユーザーガイド 2 コンポーネントをプロジェクトに 組 み 込 む 方 法 2 コンポーネントのランタイムファイル 2-3 エクスポートサービス 3-4 重 要 なヒント 4-5 テーマ 6 ThemeRoller for Visual Studio 6 ThemeRoller for Visual Studio クイックスタート 6 手 順 1:アプリケーションの 作 成 6 手 順 2:テーマのデザイン 6-9 手 順 3:アプリケーションの 実 行 9-10 ThemeRoller for Visual Studio の 要 素 10 [タスク]メニュー 10-11 新 しいテーマ 画 面 11-12 ThemeRoller 12-15 Bootstrap for ASP.NET Web Forms クイックスタート 15-17 クライアント 側 タスク 別 ヘルプ 18 1 Copyright GrapeCity inc. All rights reserved.
ComponentOne Studio for ASP.NET Web Forms ユーザーガ イド より 少 ないコードでより 多 くの 成 果 を 達 成 できる 製 品 です ComponentOne Studio for ASP.NET Web Formsに 収 録 されて いる40 種 類 以 上 の 優 れたコンポーネントがAjax jqueryに 対 応 し HTML5/CSS3に 準 拠 しています すべてのコントロールが ASP.NETコントロールとMVCツールとして 提 供 されています コンポーネントをプロジェクトに 組 み 込 む 方 法 コンポーネントの 組 み 込 み Visual Studio では ツールボックスにコンポーネントを 追 加 しただけでは プロジェクトにコンポーネントを 追 加 したことにはな りません プロジェクトの 参 照 設 定 へ 追 加 された 時 点 でコンポーネントが 組 み 込 まれます 以 下 のいずれかの 操 作 を 行 うとプロジェクトへコンポーネントが 組 み 込 まれます 1. フォームにコンポーネントを 配 置 する 2. ソリューションエクスプローラ 上 で 参 照 の 追 加 を 行 う プロジェクトに 組 み 込 まれているコンポーネントの 一 覧 は ソリューションエクスプローラで 確 認 できます また 各 コンポーネン トが 使 用 している DLL もソリューションエクスプローラに 登 録 される 場 合 があります 詳 細 については Visual Studio の 製 品 ヘ ルプを 参 照 してください 本 製 品 で 使 用 しているアセンブリの 一 覧 を 以 下 に 示 します ファイル C1.C1Report.4.dll C1.Web.Wijmo.Controls.4.dll C1.Web.Wijmo.Controls.4.resources.dll C1.Web.Wijmo.Controls.Design.4.dll C1.Web.Wijmo.Controls.Design.4.resources.dll 内 容 本 体 アセンブリ 本 体 アセンブリ 本 体 アセンブリのサテライトリソー ス デザイナアセンブリ デザイナアセンブリのサテライトリ ソース フォームにコンポーネントを 配 置 する 方 法 以 下 に コントロールをツールボックスに 追 加 し フォームに 配 置 する 方 法 を 示 します これにより コンポーネントがプロジェク トに 組 み 込 まれます 配 置 手 順 1. ツール]メニューから[ツールボックスツールボックス アイテムの 選 択 ]を 選 択 します 2. [ツールボックス アイテムの 選 択 ]ダイアログの.NET Framework コンポーネント タブを 選 択 します 3. 使 用 するコンポーネントのチェックボックスを ON にして OK ボタンをクリックしてください ツールボックスに 指 定 したコ ントロールのアイコンが 表 示 されます 4. ツールボックスから 指 定 したコントロールのアイコンを 選 択 してフォームに 配 置 します ソリューションエクスプローラの 参 照 設 定 に 指 定 したコントロールの 名 前 空 間 が 追 加 されます コンポーネントのランタイムファイル 2 Copyright GrapeCity inc. All rights reserved.
ComponentOne Studio for ASP.NET Web Forms のランタイムファイルは 次 のファイルです アセンブリファイル ファイル C1.C1Report.4.dll C1.Web.Wijmo.Controls.4.dll C1.Web.Wijmo.Controls.4.resources.dll C1ASPNETExportService.msiおよび このインストーラによりインストールされるファイル 内 容 本 体 アセンブリ 本 体 アセンブリ 本 体 アセンブリのサテライトリソース Wijmoエクスポートサービス 注 意 : 本 製 品 に 含 まれているファイルのうち 上 記 以 外 のファイルは 配 布 できません C1.Web.Wijmo.Controls.Design.4.dll C1.Web.Wijmo.Controls.Design.4.resources.dll エクスポートサービス C1 ASP.NET Export Service を 使 用 すると 複 雑 なエクスポートアプリケーションを 作 成 しなくても チャートを 画 像 または PDF とグリッドをエクセル CSVまたはPDFとしてにエクスポートできます このサービスはアプリケーションサーバー 上 に 置 かれま す C1 ASP.NET Export Service を 使 用 する 利 点 は 次 のとおりです インストール 書 式 設 定 を 維 持 したままチャートまたはグリッドをエクスポートできます エクスポートされたファイルの 設 定 を 必 要 に 応 じて 変 更 できます Export Service は インターネットインフォメーションサービス(IIS) 上 に 配 布 される Web アプリケーションです C:\Program Files\ComponentOne\Studio for ASP.NET Web Forms フォルダにある C1ASPNETExportService インストーラを 実 行 してく ださい 次 のファイルが IIS にインストールされます これらのファイルは 次 の 場 所 にも 格 納 されています C:\ProgramData\ComponentOne\C1ASPNET\C1APNETExportService ライセンス 認 証 Webサーバーでエクスポートサービスを 実 行 するには Webサーバー 環 境 でライセンス 認 証 を 行 う 必 要 があります ライセン ス 認 証 を 行 わないとトライアル 版 として 実 行 され エクスポートされたファイルにトライアル 版 であることを 示 すウォーターマーク が 埋 め 込 まれます トライアル 版 の 使 用 期 間 (30 日 間 )を 過 ぎるとエラーが 発 生 します ライセンス 認 証 はエクスポートサービスのインストール 中 に 自 動 的 に 実 行 されますので ユーザー 名 会 社 名 ComponentOne Studioのシリアルナンバーを 入 力 してください 3 Copyright GrapeCity inc. All rights reserved.
インストール 後 にライセンス 認 証 を 行 う 場 合 は 下 記 の 場 所 にインストールされるライセンス 認 証 ツールを 実 行 してください C:\Program Files\Common Files\ComponentOne Shared\C1LicenseActivation.exe システム 要 件 サービスホストのシステム 要 件 は 次 のとおりです Microsoft Windows 7 以 上 ASP.NET 4.0 以 上 (.NET Framework 4.0)を 含 む IIS 7.0 以 上 サービスホスト 上 に IE9 以 上 Microsoft Windows 7 または Microsoft Windows Server 2008 R2 では.Net Framework 4.0 をアップデートでき ます 詳 細 については http://support.microsoft.com/kb/2468871 を 参 照 してください 重 要 なヒント 次 のヒントは ComponentOne Studio for ASP.NET Web Forms で 作 業 する 場 合 の 問 題 解 決 に 役 立 ちます ヒント1:メタタグを 編 集 してレンダリングを 修 正 することにより Quirks モードでの 質 の 悪 いページレンダリングを 防 止 する ユーザーのブラウザが Quirks モードでページをレンダリングしている 場 合 ウィジェットとコントロールがページ 上 に 正 しく 表 示 されない 場 合 があります これは アドレスバーに 壊 れたページアイコンが 表 示 されることでわかります 互 換 表 示 では ブラ ウザは 古 いレンダリングエンジンを 使 用 します 4 Copyright GrapeCity inc. All rights reserved.
ユーザーがこの 表 示 を 設 定 して 問 題 が 発 生 した 可 能 性 があります Quirks モードでのレンダリングを 防 止 するために ページ が 最 新 のブラウザでレンダリングされるように 設 定 できます 以 下 のメタタグをページのヘッダーに 追 加 します <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" /> 5 Copyright GrapeCity inc. All rights reserved.
テーマ CSSの 知 識 が 無 くても Wijmoコントロールでは 容 易 にテーマを 設 定 することができます Wijmo では ThemeRoller for Visual Studio コンポーネントが 含 まれ Bootstrapテーマも 対 応 されています デザイン 環 境 を 離 せず 美 しいカスタムテーマ を 作 成 してASP.NET Web Formsコントロールに 適 用 するか 1クリックでBootstrapテーマを 組 み 込 めます ThemeRoller for Visual Studio ThemeRoller for Visual Studio は ComponentOne Studio for ASP.NET Web Forms コントロールに 使 用 する 美 しいテー マを 簡 単 に 作 成 できるようにします ThemeRoller for Visual Studio を 使 用 して アプリケーション 全 体 のテーマを ComponentOne Studio for ASP.NET Web Forms に 適 用 できます アプリケーションに ComponentOne Studio for ASP.NET Web Forms コントロールを 追 加 したら コントロールのスマートタグから ThemeRoller for Visual Studio にアク セスすることができます ThemeRoller は Visual Studio 内 に 開 きます ThemeRoller を 使 用 することで CSS やコントロール の 知 識 がなくても テーマをカスタマイズすることができます ThemeRoller for Visual Studio クイックスタート このクイックスタートでは ComponentOne Studio for ASP.NET Web Forms コントロールを Visual Studio アプリケーショ ンに 追 加 する 方 法 について 説 明 します ここでは スマートタグを 使 用 して[タスク] [タスク]メニューを 開 く ThemeRoller for Visual Studio を 開 く ThemeRoller for Visual Studio を 使 用 してテーマをデザインするなどの 操 作 を 実 行 します メモ:ここでは C1Calendar を 例 として 説 明 します なお チャートとゲージを 除 く 他 の ComponentOne Studio for ASP.NET Web Forms コントロールでも 同 様 の 手 順 で ThemeRoller for Visual Studio を 使 用 することができます 手 順 1:アプリケーションの 作 成 この 手 順 では Visual Studio でアプリケーションを 作 成 し 適 切 なアセンブリ 参 照 を 追 加 して ComponentOne Studio for ASP.NET Web Forms コントロールをアプリケーションに 追 加 します 次 の 手 順 に 従 います 1. Visual Studio の[ファイル]メニューから [ 新 規 作 成 ] [プロジェクト]を 選 択 します [ 新 しいプロジェクト]ダイアログ ボックスが 表 示 されます 2. [ 新 しいプロジェクト]ダイアログボックスの 左 ペインで 言 語 を 展 開 し [Web]を 選 択 します 右 ペインで [ASP.NET 空 の Web アプリケーション]を 選 択 し アプリケーションの 名 前 を 入 力 して [OK]を 選 択 します 新 しいアプリケーショ ンが 作 成 されます 3. ソリューションエクスプローラで プロジェクトを 右 クリックし [ 参 照 の 追 加 ]を 選 択 します 4. [ 参 照 の 追 加 ]ダイアログボックスで C1.Web.Wijmo.Controls.4 アセンブリと C1.Web.Wijmo.Controls.Design.4 アセンブリを 見 つけて 選 択 し [OK]をクリックします 参 照 が 追 加 されます 5. デザインビューで Visual Studio のツールボックスに 移 動 し [C1Calendar]アイコンをダブルクリックし て C1Calendar コントロールをページに 追 加 します Visual Studio ASP.NET アプリケーションを 作 成 し 適 切 なアセンブリ 参 照 を 追 加 し C1Calendar コントロールをアプリケー ションに 追 加 しました 次 の 手 順 では ThemeRoller for Visual Studio を 使 用 して C1Calendar コントロールをカスタマイズ します 手 順 2:テーマのデザイン この 手 順 では ThemeRoller for Visual Studio を 使 用 してテーマをデザインします 1. アプリケーション 内 の C1Calendar コントロールを 選 択 し スマートタグ をクリックして[C1Calendar のタスク]メ 6 Copyright GrapeCity inc. All rights reserved.
ニューを 開 きます 2. [C1Calendar のタスク]メニューから[ 新 しいテーマの 作 成 ]を 選 択 して ThemeRoller for Visual Studio を 起 動 しま す 3. ThemeRoller for Visual Studio が 起 動 したら 新 しいテーマ 画 面 から 最 終 的 な 製 品 のテーマによく 似 たテーマを 選 択 します このテーマから 作 業 を 開 始 することで テーマのデザインにかかる 時 間 を 節 約 することができます 7 Copyright GrapeCity inc. All rights reserved.
4. [ 次 へ]をクリックすると ThemeRoller が 起 動 します ThemeRoller では フォント 背 景 色 境 界 線 テキスト 色 などを 変 更 することができます ThemeRoller の 右 ペインに デザイン 中 のテーマのプレビューが 表 示 されます テーマの 名 前 を 選 択 することもできます このため テーマに 覚 えやすくわかりやすい 名 前 を 付 けることができます 8 Copyright GrapeCity inc. All rights reserved.
5. テーマのカスタマイズが 完 了 したら [プロジェクトに 追 加 ]をクリックします ThemeRoller は 自 動 的 にテーマをプロ ジェクトに 追 加 して 参 照 します プロジェクトにテーマが 表 示 されたら ThemeRoller を 閉 じます メモ:プロジェクトに 追 加 されたカスタムテーマは ~/Content/themes/ に 保 存 されます この 手 順 では ThemeRoller テーマをカスタマイズしてプロジェクトに 追 加 しました 次 の 手 順 では このアプリケーションを 実 行 します 手 順 3:アプリケーションの 実 行 この 手 順 ではアプリケーションを 実 行 します 1. [F5]キーを 押 すか デバッグを 開 始 して アプリケーションを 実 行 します 次 の 図 のようになります テーマに 加 えた 変 更 を 確 認 してください テーマをさらに 変 更 する 場 合 は コントロールのスマートタグをクリックします 次 の 図 に ThemeRoller テーマを 適 用 し た 後 のスマートタグの 例 を 示 します 9 Copyright GrapeCity inc. All rights reserved.
ThemeRoller で 作 成 したテーマが[テーマ]ドロップダウンに 表 示 され [C1Calendar のタスク]メニューに[テーマのカ スタマイズ] 項 目 が 追 加 されていることがわかります この 項 目 をクリックすることで 作 成 したテーマを 編 集 したり さら にカスタマイズすることができます ThemeRoller for Visual Studio の 要 素 以 下 のトピックでは ThemeRoller for Visual Studio の 構 成 要 素 について 説 明 します メモ:ここでは C1Calendar を 例 として 説 明 します なお チャートとゲージを 除 く 他 の ComponentOne Studio for ASP.NET Web Forms コントロールでも 同 様 の 手 順 で ThemeRoller for Visual Studio を 使 用 することができます [タスク]メニュー ThemeRoller for Visual Studio には 任 意 の ComponentOne Studio for ASP.NET Web Forms コントロールの[タス ク]メニューおよび[ [ 新 しいテーマの 作 成 ]オプションからアクセスできます 次 の 図 にこのオプションを 示 します 10 Copyright GrapeCity inc. All rights reserved.
[ 新 しいテーマの 作 成 ]オプションには テーマを 作 成 した 後 でもアクセスできます テーマの 作 成 後 に 何 らかの 変 更 を 加 える 場 合 は [テーマのカスタマイズ] [テーマのカスタマイズ]オプションを 選 択 します [テーマのカスタマイズ]を 選 択 すると ThemeRoller ウィンドウが 再 度 開 きます このウィンドウで 新 しいテーマをさらにカスタ マイズすることができます 新 しいテーマ 画 面 11 Copyright GrapeCity inc. All rights reserved.
コントロールの[タスク] [タスク]メニューから[[ 新 しいテーマの 作 成 ]を 選 択 すると 新 しいテーマ 画 面 が 開 きます 新 しいテーマ 画 面 では 用 意 されている Wijmo テーマまたは jquery UI テーマのいずれかを 基 本 テーマとして 選 択 することができます 以 前 にカスタマイズしたテーマも[ユーザーテーマ] [ユーザーテーマ]セクションに 表 示 され 他 のテーマと 同 様 にアクセスして 編 集 することがで きます [テーマのインポート] [テーマのインポート]ボタンを 使 用 してテーマをインポートすることで 外 部 のテーマをカスタマイズすることもできま す [ [ 次 へ]をクリックすると ThemeRoller が 開 きます ThemeRoller ThemeRoller for Visual Studio を 使 用 して 使 用 するコントロールの 外 観 のほとんどの 要 素 をカスタマイズすることができ ます 別 のテーマと 間 違 えないように 自 分 のテーマには 独 自 の 名 前 を 付 けてください カスタマイズのベースとして 選 択 した テーマの 名 前 に -custom を 付 けたものが 初 期 のテーマ 名 になります つまり arctic テーマを 選 択 した 場 合 初 期 のテー マ 名 は arctic-custom になります 12 Copyright GrapeCity inc. All rights reserved.
[ThemeRoller]ウィンドウには ウィンドウの 左 側 に 設 定 パネル 設 定 パネルの 右 側 にコントロールのプレビュー コントロー ルのプレビューの 下 にプレビュースウォッチが 表 示 されます ThemeRoller の 左 側 の 設 定 パネルでは フォント フォントスタイル 背 景 色 さまざまなインタラクティブ 操 作 状 態 オーバー レイ シャドウなどを 変 更 することができます 設 定 パネル 内 で 変 更 を 加 えると コントロールのプレビューとプレビュースウォッ チに 自 動 的 に 適 用 されます 13 Copyright GrapeCity inc. All rights reserved.
任 意 の 設 定 の 色 入 力 領 域 をクリックすると カラーピッカーが 開 きます 14 Copyright GrapeCity inc. All rights reserved.
変 更 を 加 えると [ThemeRoller]ウィンドウのコンThemeRollerトロールのプレビューと コントロールの 下 のスウォッチに 自 動 的 に 適 用 されます Bootstrap for ASP.NET Web Forms クイックスタート Visual Studio 2013 では Bootstrap テーマフレームワークを 使 用 した 新 しいプロジェクトテンプレートが 導 入 されまし た ComponentOne Studio for ASP.NET Web Forms も Bootstrap を 正 式 にサポートするようになりました 次 の 手 順 に 従 って Bootstrap を ComponentOne Studio for ASP.NET Web Forms コントロールに 簡 単 に 組 み 込 めること を 確 認 してください メモ:ここでは C1Calendar を 例 として 説 明 します なお チャートとゲージを 除 く 他 の ComponentOne Studio for ASP.NET Web Forms コントロールでも 同 様 の 手 順 で BootStrap を 使 用 することができます 15 Copyright GrapeCity inc. All rights reserved.
1. [ファイル]メニューを 選 択 します [ファイル]メニューのリストから [ 新 規 作 成 ] [プロジェクト]を 選 択 します 2. [ 新 しいプロジェクト]ダイアログボックスの 左 ペインで [テンプレート] [テンプレート]からいずれかの 言 語 を 選 択 します 3. [ 新 規 ASP.NET プロジェクト]ダイアログボックスで 使 用 可 能 なテンプレートから[Web フォーム]を 選 択 し [プロジェク トの 作 成 ]を 選 択 します 4. Default.aspx ファイルをダブルクリックして 開 きます 5. Bootstrap は 既 にテンプレートに 含 まれているため アプリケーションを 実 行 して Bootstrap がデフォルトでどのように 表 示 されるかを 確 認 することができます [F5]キーを 押 すか デバッグを 開 始 して アプリケーションを 実 行 します 6. デバッグを 停 止 して デザインビューに 切 り 替 えます 7. Visual Studio ツールボックスで C1Calendar コントロールを 見 つけます コントロールをデザインサーフェスにドラッグし てアプリケーションに 追 加 します 8. コントロールを 選 択 し スマートタグ をクリックして [C1Calendar のタスク]メニューを 開 きます 16 Copyright GrapeCity inc. All rights reserved.
9. [Bootstrap の 使 用 ]オプションを 選 択 して Bootstrap をアプリケーションに 組 み 込 みます このようにとても 簡 単 です 10. [F5]キーを 押 すか デバッグを 開 始 して アプリケーションを 実 行 します C1Calendar は 次 の 図 のように 表 示 されます おめでとうございます これで Bootstrap for ASP.NET Web Forms クイックスタート は 終 了 です このトピックでは 新 しい Visual Studio 2013 ASP.NET Web フォームアプリケーションを 作 成 し ComponentOne Studio for ASP.NET Web Forms コントロールをアプリケーションに 追 加 し Bootstrap テーマを 追 加 しました 17 Copyright GrapeCity inc. All rights reserved.
クライアント 側 タスク 別 ヘルプ クライアント 側 のタスク 別 ヘルプは MVC Tools ウィジェット の 内 容 を 参 考 にしてください また クライアント 側 リファレンス については 下 記 のリンクを 参 照 してください jquery と jquery UI の 概 要 Wijmo API 注 意 : 上 記 リンク 先 のサンプルコードに 記 載 されている $("#accordion").wijaccordion のような 箇 所 を Wijmo コントロールの 場 合 には $("#<%=C1Accordion1.ClientID%>").c1accordion のように 置 き 換 える 必 要 があります 18 Copyright GrapeCity inc. All rights reserved.