CodeZine(コードジン)

特集ページ一覧

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

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

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

 それではさまざまなブラウザで今回のアプリの表示を確認していましょう。公式にサポートしているブラウザは、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で送る
  • このエントリーをはてなブックマークに追加

バックナンバー

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

もっと読む

著者プロフィール

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

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

あなたにオススメ

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