SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

現役エンジニア直伝! 「現場」で使えるコンポーネント活用術(SPREAD)(AD)

SPREAD for ASP.NETでパワーアップしたマルチデバイス対応Webサイトを構築しよう

  • このエントリーをはてなブックマークに追加

SPREAD for ASP.NETの導入

 SPREADをインストールしたらVisual Studioのツールボックスに登録を行います。ツールボックスで[アイテムの選択]を行い、名前空間が「FarPoint.Web.Spread」のチェックボックスをチェックして[OK]ボタンをクリックし、ツールボックスに登録します。

図5 ツールボックスに登録
図5 ツールボックスに登録

 例えば「FpSpread」の行をチェックして[OK]ボタンをクリックすればツールボックスには「FpSpread」が登録されます。

WebフォームにSPREAD for ASP.NETを設定

Webフォームを追加する

 現時点のプロジェクトには何もWebページが存在しないので、ソリューションエクスプローラーでプロジェクト名を右クリックして[追加]-[Webフォーム]メニューでダイアログを開きます。ダイアログで名前を「Home.aspx」と指定してWebフォームを追加します。

図6 Webフォームが追加されたプロジェクト
図6 Webフォームが追加されたプロジェクト

WebフォームにSPREADを配置する

 ソリューションエクスプローラーで「Home.aspx」をダブルクリックしてデザイナを起動します。

 デザイナ上の[DIV]で囲まれた点線のところに、ツールボックスから「FpSpread」をドラッグ&ドロップするとSPREADの配置が完了します。

図7 WebフォームにSPREADを配置
図7 WebフォームにSPREADを配置

Azure Websitesにデプロイする

 ここまででAzure Websitesに再度デプロイしてみましょう。ソリューションエクスプローラーでプロジェクト名を右クリックして[発行]メニューでダイアログを出すところまでは一緒です。一度デプロイしているプロジェクトなので、ダイアログですぐに[発行]ボタンをクリック可能です。

図8 Azure Webサイトからの表示
図8 Azure Webサイトからの表示

 URLのサイドに「Home.aspx」を追加してあげるとSPREADを配置したHome.aspxが表示できます。しかし、よく見てみると一覧表示の下に表示されているはずのアイコンが読み込めてない表示になっています。

アイコンのデプロイ

 SPREADのアイコンは、SPREADをインストールしたPCの「<Program Files Folder>\Common Files\FarPoint Technologies\SpreadNETWebv8\fp_client」フォルダに入っています。

図9 fp_clientフォルダ
図9 fp_clientフォルダ

 このフォルダはプロジェクト外にあるので、プロジェクトをAzure Websitesにデプロイしても一緒にデプロイされません。そこで、fp_clientフォルダは再配布可能なのでプロジェクトに含めて一緒にデプロイしてしまいましょう

 ファイルエクスプローラーを使ってfp_clientフォルダをプロジェクトフォルダのHome.aspxがある場所にコピーします。コピーしただけではVisual Studioがプロジェクトの資産とみなしてくれません。場合によってはソリューションエクスプローラーにコピーしたフォルダが表示されていないかもしれません。

 フォルダが表示されていなかったら、ソリューションエクスプローラーの上部にある[すべてを表示する]アイコンをクリックして、プロジェクトに含まれていないフォルダが点線表示されるようにしてください。その後に点線表示されているfp_clientフォルダを右クリックして[プロジェクトに追加]メニューをクリックします。

図10 fp_clientフォルダを追加したプロジェクト
図10 fp_clientフォルダを追加したプロジェクト

 そうすれば今まで点線表示だったフォルダが色付き表示になり、プロジェクトの資産となります。デプロイを再度行えば今度はアイコンも表示されます。

図11 アイコン付きでAzure Webサイトからの表示
図11 アイコン付きでAzure Webサイトからの表示

次のページ
ExcelデータをSPREADに設定

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
現役エンジニア直伝! 「現場」で使えるコンポーネント活用術(SPREAD)連載記事一覧

もっと読む

この記事の著者

初音玲(ハツネアキラ)

 国内SIerのSEでパッケージ製品開発を主に行っており、最近は、空間認識や音声認識などを応用した製品を手掛けています。 個人的には、仕事の内容をさらに拡張したHoloLensなどのMRを中心に活動しています。 Microsoft MVP for Windows Development ブログ:http://hatsune.hatenablog.jp/

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8910 2016/03/14 11:35

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング