CodeZine(コードジン)

特集ページ一覧

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2015/10/15 14:00

 社内システムであればブラウザを固定することは可能ですが、一般向けWebアプリを作るうえで避けて通れないのが、クラウド配置ならびにマルチデバイス対応です。マルチデバイス対応をする利点は、ブラウザの使用比率に左右されない利用者数の確保だけではありません。マルチデバイス対応したものは経験上ブラウザのバージョン依存も受けづらいため、ブラウザバージョンの更新頻度に左右されないエンハンス計画が可能になるなどの利点も生まれます。

 SPREAD for ASP.NET 8.0であれば、クラウドにも対応し、iPadでの動作もサポート対象となりました。日本とアメリカではiOSのシェアが高いため、このサポート対象追加は重要な意味を持ちます。

 そこで今回は、Excelで作成したデータを最新の「SPREAD for ASP.NET 8.0」を使ってMicrosoft Azureにデプロイして、iPadで表示するWebアプリを作成してみたいと思います。

Webフォームアプリケーションの新規作成

ASP.NET Webアプリケーションの新しいプロジェクトを作成する

 Visual Studioを起動して、新しいプロジェクトとして「ASP.NET Webアプリケーション」を選択します。

図1 新しいプロジェクトを作成
図1 新しいプロジェクトを作成

 「Empty」テンプレートを使って一番シンプルなプロジェクト構成とし、「Web Forms」のコア参照にチェックを入れておきます。

図2 テンプレートの選択
図2 テンプレートの選択

 出来上がったプロジェクトは、初期画面もないシンプルなプロジェクトになります。

図3 初期プロジェクト状態
図3 初期プロジェクト状態

Azure Websitesにデプロイする

 ほぼ何もない状態ですが、このままでもMicrosoft Azure WebsitesにデプロイしてWebサイト(注1)として動作させることができます。ソリューションエクスプローラーでプロジェクト名である「CZ1508Spread」を右クリックして[発行]メニューをクリックします。そうすると[Webを発行]ダイアログが表示されるので以下の手順で発行します。なお、事前にMicrosoft Azureにアカウント登録しておく必要があります。

  1. 発行先を指定するために「Microsoft Azure Websites」をクリックします。
  2. Visual Studioの利用アカウントと同じアカウントであれば「サインイン済み」になっています。もしサインイン済みでないときはここでサインインを行います。
  3. 新しくWebサイトを作りたいので[新規]ボタンをクリックします。
  4. サイト名として好きな名前を入れます。後半の「.azurewebsites.net」は固定です。リージョンとしては「Japan West」がお勧めです。今回はデータベースは使用しないので「データベースなし」で[作成]ボタンをクリックします。
  5. 少しだけ待つと自動的に接続情報が設定されるので[発行]ボタンをクリックします。
  6. 指定したサイト名で青バックのページが表示できればデプロイ完了です。
図4 Azure Websitesにデプロイ
図4 Azure Websitesにデプロイ

注1

 本稿では無事に動作しましたが、Windows Azure Webサイトでの実行は、SPREAD for ASP.NET 8.0の動作保証対象外となっていることに注意してください。

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付属のSPREADデザイナでは、デザインやデータとしてExcelファイルを読み込むことができます。Visual Studioのソリューションエクスプローラーで「Home.aspx」をダブルクリックしてデザイン表示したら、SPREADの右上にある[>]をクリックして「FpSpreadタスク」を表示し、そこから「デザイナ」を選択します。

SPREAD デザイナでExcelファイルを開く

 SPREADデザイナが立ちあがったら[ファイル]-[開く]メニューでExcelファイルを指定します。今回使ったExcelファイルは2シート構成で、1シート目の内容は2シート目を参照して作られています。このような複数シートに分かれたものであってもSPRAEDデザイナは正しく読み込めます。

図12 SPREADデザイナ

図12 SPREADデザイナ

 このシートのD欄にはExcelの条件式書式で数値に応じて背景色が変わるようにデータバーが設定されていたのですが、そこもきちんと反映できています。シート名をクリックすれば2シート目も表示できます。SPREADデザイナでの確認が終わったら保存して終了します。

 もちろん、Visual StudioのWebフォームデザイナにもSPREADデザイナで取り込んだ内容が反映されます。ただし、残念ながらデータバーについてはWebフォームデザイナ上では再現されないようです。

Azure Websitesにデプロイする

 それではAzrue Webサイトでの表示を確認してみましょう。これまでと同様にソリューションエクスプローラーでプロジェクトを右クリックして[発行]を行います。

図13 ExcelデータのWebサイト表示
図13 ExcelデータのWebサイト表示

 データバーも含めてきちんと再現されています。読み取り専用モードにはしていませんので、各セルをクリックして編集モードにすれば参照式なども表示できます。もちろん10行ごとのページ制御も可能です。

iOSシミュレータで確認する

 iOSシミュレータで「iPad 2 / iOS 8.4」での表示を確認してみましょう。

図14 iPad 2での表示
図14 iPad 2での表示

 IEで表示した時と同様に、特に違和感なく編集なども含めてきちんと動作しています。

マルチデバイスでの表示確認

 それではさまざまなブラウザで今回のアプリの表示を確認していましょう。公式にサポートしているブラウザは、IE8~IE11、Microsoft Edge(Service Pack 2で対応)、Chrome最新版および1世代前、そしてSafari for iOSですが、実際に使っているさまざまなブラウザで確認したいと思います。よって、保証対象外のものも含まれていることをあらかじめご了承ください。

Microsoft Edgeでの確認

 Microsoft EdgeはWindows 10の標準ブラウザです。Active Xのサポート中止といった古い技術を破棄するなどの、さまざまな変更が施されています。今回のサンプルにアクセスした結果が次の図です。表示崩れや操作誤動作なども特になさそうな感じです。

図15 Microsoft Edgeでの確認
図15 Microsoft Edgeでの確認

Chromeでの確認

 ブラウザシェアでInternet Explorerと人気を二分しているのがChromeです。SPREAD for ASP.NETでも正式サポートしています。

図16 Chromeでの確認
図16 Chromeでの確認

Safari(Mac OS)での確認

 Mac OSの標準ブラウザがSafari 8.0.7です。公式にサポートしているブラウザではありませんが、今回のサンプルにアクセスした結果が次の図です。表示崩れや操作誤動作なども特になさそうな感じです。

図17 Safari 8.0.7での確認
図17 Safari 8.0.7での確認

Safari for iPadでの確認

 iPadの標準ブラウザがSafari for iPadです。日本のタブレット端末でiPadのシェアは高いのでSafari for iPadが正式サポートされているのは大きな意味があります。

図18 Safari for iPadでの確認
図18 Safari for iPadでの確認

iPadでの操作確認

グリッパーによるセル選択

 SPREAD for ASP.NETで作成したページをSafari for iPadで表示して表部分をタップするとグリッパーが表示されます。このグリッパーの○部分をドラッグして範囲を自由に変更できます。

図19 グリッパーによるセル選択
図19 グリッパーによるセル選択

タッチツールバー

 グリッパーで選択した範囲に対して、コピー、カット、ペーストなどの操作をしたいときは、選択後にもうワンタップします。するとタッチツールバーが表示されて所定の操作用のアイコンが表示されます。

図20 タッチツールバー
図20 タッチツールバー

まとめ

 今回はExcelファイルを読み込んだだけで1行目を列タイトルに変更したりしませんでした。もちろん、A、Bなどと表示されていた部分を「都道府県」などのタイトルに変更できますのでぜひ確認してみてください。

 今回、iPadなど非Microsoftデバイスについても問題なく表示できることができました。これはSPREAD for ASP.NET自体がSPREAD定義からデバイスの差異を吸収するようなHTMLやJavaScriptを自動生成してくれていたから可能になっています。

 これからのWebアプリは、開発者が意識してデバイスの差異が生じないようなHTMLやJavaScriptを書くことがますます必須となってきます。HTMLなどの仕様解釈もブラウザ間で少なくなってきてはいますが、コンポーネントを使って、さらにその部分を省力化することで開発効率全体をブーストできるというのは、リリース時期や品質の面からもますます重要になってくることでしょう。

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

著者プロフィール

  • 初音玲(ハツネアキラ)

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

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5