SHOEISHA iD

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

連載記事

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

翔泳社では、「独習」「徹底入門」「スラスラわかる」「絵で見てわかる」「一年生」などの人気シリーズをはじめ、言語や開発手法、最新技術を解説した書籍を多数手がけています。プロジェクトマネジメントやチームビルティングといった管理職向けの書籍も豊富です。

ITエンジニアとしてのスキルアップ・リスキリングに、ぜひお役立てください。

書籍に関する記事を見る

'); googletag.cmd.push(function() { googletag.pubads().addEventListener('slotRenderEnded', function(e) { var ad_id = e.slot.getSlotElementId(); if (ad_id == 'div-gpt-ad-1659428980688-0') { var ad = $('#'+ad_id).find('iframe'); if ($(ad).width() == 728) { var ww = $(window).width(); ww = ww*0.90; var style = document.createElement("style"); document.head.appendChild( style ); var sheet = style.sheet; sheet.insertRule( "#div-gpt-ad-1659428980688-0 iframe {-moz-transform: scale("+ww/728+","+ww/728+");-moz-transform-origin: 0 0;-webkit-transform: scale("+ww/728+","+ww/728+");-webkit-transform-origin: 0 0;-o-transform: scale("+ww/728+","+ww/728+");-o-transform-origin: 0 0;-ms-transform: scale("+ww/728+","+ww/728+");-ms-transform-origin: 0 0;}", 0 ); sheet.insertRule( "#div-gpt-ad-1659428980688-0 div{ height:"+(90*ww/728)+"px;width:"+728+"px;}", 0 ); } else { if ($(window).width() < 340) { var ww = $(window).width(); ww = ww*0.875; var style = document.createElement("style"); document.head.appendChild( style ); var sheet = style.sheet; sheet.insertRule( "#div-gpt-ad-1659428980688-0 iframe {-moz-transform: scale("+ww/320+","+ww/320+");-moz-transform-origin: 0 0;-webkit-transform: scale("+ww/320+","+ww/320+");-webkit-transform-origin: 0 0;-o-transform: scale("+ww/320+","+ww/320+");-o-transform-origin: 0 0;-ms-transform: scale("+ww/320+","+ww/320+");-ms-transform-origin: 0 0;}", 0 ); sheet.insertRule( "#div-gpt-ad-1659428980688-0 div{ height:"+(180*ww/320)+"px;width:"+320+"px;}", 0 ); } } } }); }); } else { document.write('
'); document.write('
'); }
現役エンジニア直伝! 「現場」で使えるコンポーネント活用術(SPREAD)(AD)

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

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

ダウンロード サンプルファイル (1.1 MB)

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

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

 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の導入

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

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

もっと読む

この記事の著者

初音玲(ハツネアキラ)

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

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

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

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

この記事をシェア

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

おすすめ

アクセスランキング

  1. 1
    「アップサート」 ~マンガでプログラミング用語解説
  2. 2
    なりたくなかったマネージャーが天職に? 知らない景色に飛び込むエンジニアは「何にだってなれる」
  3. 3
    Google、同社史上もっともインテリジェントなAIモデル「Gemini 2.5」を発表 NEW
  4. 4
    「Developers Summit 2025 アワード」ベストスピーカー1位は安野貴博氏&漆原茂氏と、「ちいさなDX」セッションがW受賞 NEW
  5. 5
    企業の約7割、AIによってエンジニアの採用要件が変化すると予想。ファインディが調査 NEW
  1. 6
    Rust製の高速コードエディタ「Zed」、Gitを統合
  2. 7
    Linuxディストリビューション「Fedora Linux 42」のベータ版が登場 NEW
  3. 8
    オラクルとNVIDIAが協業し、企業のエージェント型AI推論の加速を支援 NEW
  4. 9
    クラウドセキュリティの統合的なアプローチ「CNAPP」とは? 開発者が意識すべきセキュリティ対策3つのポイント NEW
  5. 10
    生成AIモデルGeminiとBigQueryで実現! データ分析の効率と効果を飛躍的に向上させる方法 NEW

アクセスランキング

  1. 1
    「アップサート」 ~マンガでプログラミング用語解説
  2. 2
    なりたくなかったマネージャーが天職に? 知らない景色に飛び込むエンジニアは「何にだってなれる」
  3. 3
    Google、同社史上もっともインテリジェントなAIモデル「Gemini 2.5」を発表 NEW
  4. 4
    「Developers Summit 2025 アワード」ベストスピーカー1位は安野貴博氏&漆原茂氏と、「ちいさなDX」セッションがW受賞 NEW
  5. 5
    企業の約7割、AIによってエンジニアの採用要件が変化すると予想。ファインディが調査 NEW
  6. 6
    Rust製の高速コードエディタ「Zed」、Gitを統合
  7. 7
    Linuxディストリビューション「Fedora Linux 42」のベータ版が登場 NEW
  8. 8
    オラクルとNVIDIAが協業し、企業のエージェント型AI推論の加速を支援 NEW
  9. 9
    クラウドセキュリティの統合的なアプローチ「CNAPP」とは? 開発者が意識すべきセキュリティ対策3つのポイント NEW
  10. 10
    生成AIモデルGeminiとBigQueryで実現! データ分析の効率と効果を飛躍的に向上させる方法 NEW
  1. 1
    世界6000万ユーザーの「TimeTree」、サービスの未来を見据えて挑んだデータベース移行の舞台裏
  2. 2
    「オブザーバー・パターン」 ~マンガでプログラミング用語解説
  3. 3
    3/5まで書籍全文が無料公開 『Pythonで動かして学ぶ!Kaggleデータ分析入門』
  4. 4
    データサイエンス基礎を高校数学から復習しよう! D3.jsでデータを表現する
  5. 5
    macOS上のアプリケーションからChatGPTが呼び出せるように。各種IDEやターミナル、メモなどが対応
  6. 6
    マイクロソフト、VSCodeの新機能「Copilot Next Edit Suggestions」のプレビュー版公開
  7. 7
    GitHub、あらゆるエディタやIDEとGitHub Copilotとの統合を可能にする「Copilot Language Server SDK」を一般公開
  8. 8
    フロントエンドの定番ライブラリ「React 19」の新機能を紹介──React Server Componentsとその他の改善点
  9. 9
    「Tailwind CSS」の公式UIライブラリ「Tailwind UI」、サービス拡大を視野に「Tailwind Plus」へ名称変更
  10. 10
    オープンソーステキストエディタ「Emacs 30.1」リリース

イベント

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

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

メールバックナンバー

アクセスランキング

  1. 1
    「アップサート」 ~マンガでプログラミング用語解説
  2. 2
    なりたくなかったマネージャーが天職に? 知らない景色に飛び込むエンジニアは「何にだってなれる」
  3. 3
    Google、同社史上もっともインテリジェントなAIモデル「Gemini 2.5」を発表 NEW
  4. 4
    「Developers Summit 2025 アワード」ベストスピーカー1位は安野貴博氏&漆原茂氏と、「ちいさなDX」セッションがW受賞 NEW
  5. 5
    企業の約7割、AIによってエンジニアの採用要件が変化すると予想。ファインディが調査 NEW
  1. 6
    Rust製の高速コードエディタ「Zed」、Gitを統合
  2. 7
    Linuxディストリビューション「Fedora Linux 42」のベータ版が登場 NEW
  3. 8
    オラクルとNVIDIAが協業し、企業のエージェント型AI推論の加速を支援 NEW
  4. 9
    クラウドセキュリティの統合的なアプローチ「CNAPP」とは? 開発者が意識すべきセキュリティ対策3つのポイント NEW
  5. 10
    生成AIモデルGeminiとBigQueryで実現! データ分析の効率と効果を飛躍的に向上させる方法 NEW

アクセスランキング

  1. 1
    「アップサート」 ~マンガでプログラミング用語解説
  2. 2
    なりたくなかったマネージャーが天職に? 知らない景色に飛び込むエンジニアは「何にだってなれる」
  3. 3
    Google、同社史上もっともインテリジェントなAIモデル「Gemini 2.5」を発表 NEW
  4. 4
    「Developers Summit 2025 アワード」ベストスピーカー1位は安野貴博氏&漆原茂氏と、「ちいさなDX」セッションがW受賞 NEW
  5. 5
    企業の約7割、AIによってエンジニアの採用要件が変化すると予想。ファインディが調査 NEW
  6. 6
    Rust製の高速コードエディタ「Zed」、Gitを統合
  7. 7
    Linuxディストリビューション「Fedora Linux 42」のベータ版が登場 NEW
  8. 8
    オラクルとNVIDIAが協業し、企業のエージェント型AI推論の加速を支援 NEW
  9. 9
    クラウドセキュリティの統合的なアプローチ「CNAPP」とは? 開発者が意識すべきセキュリティ対策3つのポイント NEW
  10. 10
    生成AIモデルGeminiとBigQueryで実現! データ分析の効率と効果を飛躍的に向上させる方法 NEW
  1. 1
    世界6000万ユーザーの「TimeTree」、サービスの未来を見据えて挑んだデータベース移行の舞台裏
  2. 2
    「オブザーバー・パターン」 ~マンガでプログラミング用語解説
  3. 3
    3/5まで書籍全文が無料公開 『Pythonで動かして学ぶ!Kaggleデータ分析入門』
  4. 4
    データサイエンス基礎を高校数学から復習しよう! D3.jsでデータを表現する
  5. 5
    macOS上のアプリケーションからChatGPTが呼び出せるように。各種IDEやターミナル、メモなどが対応
  6. 6
    マイクロソフト、VSCodeの新機能「Copilot Next Edit Suggestions」のプレビュー版公開
  7. 7
    GitHub、あらゆるエディタやIDEとGitHub Copilotとの統合を可能にする「Copilot Language Server SDK」を一般公開
  8. 8
    フロントエンドの定番ライブラリ「React 19」の新機能を紹介──React Server Componentsとその他の改善点
  9. 9
    「Tailwind CSS」の公式UIライブラリ「Tailwind UI」、サービス拡大を視野に「Tailwind Plus」へ名称変更
  10. 10
    オープンソーステキストエディタ「Emacs 30.1」リリース