WEBアプリ開発（入門・初級・中級編）

『WEBアプリ開発（入門・初級・中級編）』とは？

本ソフトの「入門編・初級編・中級編」を習得すると、「WEBサイト」や「ネットショップ」をご自身で作っていただけます。外部のサービスを活用すれば、見た目もスッキリしたキレイなWEBサイト・ネットショップを作成することもできますが、自分の思い通りにカスタマイズすることができないこともあります。手間はかかってしまいますが、本ソフトでWEBサイト・ネットショップの構造を理解し、ご自身の手で一から作成すれば、自分の思い通りのWEBサイト・ネットショップを作成できるようになります。

本ソフトをご利用いただくには、弊社で発売しております『Windowsアプリ開発2（入門・初級・中級編）』、および『データベースアプリ開発（入門・初級・中級編）』を修了している方、もしくは同等の知識を有し、HTMLの基本を理解されている方が望ましいです。

機能紹介

こんな「WEBサイト」が作れます

「Webサイト」であれば、データベースに登録されている画像を表示したり、「いいね」の件数を表示できるほか、画像をクリックすると、その画像の動画を再生することもできるようになります。

⇒ 公開例はこちら

こんな「ネットショップ」が作れます

「ネットショップ」を作る場合は、商品の一覧を表示したり、「カートに入れる」をクリックすると選択した商品の情報がカートに設定されるほか、「カートを見る」をクリックするとカート情報が表示されます。また、カートページの「この内容で購入する」をクリックすると申込者の入力画面が表示され、「注文を確定する」をクリックするとメールが送信されます。

⇒ 公開例はこちら

準備ができたらまずは『入門編』を起動

本ソフトでは、各例題ごとに「ひな型プロジェクト」をご用意しております。まずは「ひな型プロジェクト」を起動し（「ソリューションファイル」をダブルクリックするだけ）、「補助コード（ASPXとC#）」をコピー＆ペーストで設定するだけで、例題プロジェクトが完成します。プロジェクトが完成したら、「コード解説」を読んでコードを理解すれば、ご自身のWEBサイトを作成できるようになります。また、入門編には、「ひな型プロジェクト」の作成方法も学習できます。

【例題1】学習項目：Label、Button

LabelとButtonコントロールを配置して実行したサンプルサイトを作成します。

⇒ 公開例はこちら

【例題2】学習項目：TextBox、PostBack処理

TextBoxに入力した文字列をButtonをクリックしたときにLabelに表示しますが、PostBack処理を組み入れないと正しく表示されません。

⇒ 公開例はこちら

【例題3】学習項目：Style

TextBox、Label、Buttonの外観（サイズ、色など）をstyleで設定しています。

⇒ 公開例はこちら

【例題4】学習項目：Css（MySite.css）

Styleの設定内容をひとつのファイル（ここではMySite.css）に記載し、バナーやフッターなどWebページに必要な項目も追加してページを表示しています。

⇒ 公開例はこちら

【例題5】学習項目：Scripts（TextSize.js）

JavaScriptにより、HTMLに記載した文字のサイズを拡大します。

⇒ 公開例はこちら

【例題6】学習項目：Table、注文入力、Placeholder

HTMLで、Table（表）を構成し、セルにTextBoxとButtonを配置しています。ここで注文入力を行い、入力結果をLabelに表示しています。注文入力が未入力の場合、Placeholderを使って入力すべき内容を薄いグレー色で表示しています。また、計算できない入力があった場合は、メッセージを表示しています。

⇒ 公開例はこちら

【例題7】学習項目：SiteMaster、favicon

SiteMasterは、複数ページでWebサイトを構成するときに、共通するページ構成（バナー、フッターなど）をマスターページとして作っておき、個々のページは、相違点のみを記載して重複記載を少なくするものです。faviconは、サイトに表示するページタイトルのアイコンです。

⇒ 公開例はこちら

【例題8】学習項目：Menu

Webページにメニューを追加しています。メニューは、階層を設置して表示することもできます。個々のページは、SiteMasterを用いてベースとなるページを作成し、これを元にトップページ、開発元ページ、販売元ページ、バージョン情報ページを作成しています。

⇒ 公開例はこちら

【例題9】学習項目：SiteMapPath、ページ移動

例題８の構成に「ヘルプページ」を追加し、ヘルプページには「ボタン」を配置しています。ボタンをクリックすると、そのページに移動するようにしています。また、SiteMapPathを用いて現在の表示位置が「トップ　＞　ヘルプ」のようにわかるようにし、リンク移動もできるようにしています。

⇒ 公開例はこちら

【例題10】学習項目：Session変数

Session変数は、ページ間でデータを共有するためのものです。ここでは、トップページに入力したデータをSession変数に設定することで、編集ページでそのデータを参照して入力データを確認しています。

⇒ 公開例はこちら

『入門編』の次は『初級編』にステップアップ

『入門編』が理解できるようになったら、次は『初級編』にステップアップしてみましょう。専門学校に通うのとは異なり、自分のペースで学習を進められるので、焦らず理解を深めながらステップアップしていきましょう。学習の進め方は『入門編』と同じで、まずは「ひな型プロジェクト」を起動し（「ソリューションファイル」をダブルクリックするだけ）、「補助コード（ASPXとC#）」をコピー＆ペーストで設定するだけで、例題プロジェクトが完成します。プロジェクトが完成したら、「コード解説」を読んでコードを理解すれば、ご自身のWEBサイトを作成できるようになります。

【例題1】問い合わせページ、メール自動送信

問い合わせページの簡易版です。入力したメールアドレス宛に、メールが送信されます。

⇒ 公開例はこちら

【例題2】DataList、フォルダ内画像、ラジオボタン、UpdatePanel

DataListを使って、指定したフォルダの中にある画像ファイル一覧を表示します。（この例題ではデータベースは使用していません）ラジオボタンで画像を切り替えます。PostBack時に画像が揺れないように、画面の更新範囲をUpdatePanelで指定しています。

⇒ 公開例はこちら

【例題3】学習項目：動物画像ListBox、DB（動物リスト）

データベースを用いて、登録されている画像をListBoxに表します。

⇒ 公開例はこちら

【例題4】GridView、DB（都道府県）

別売りの『データベースアプリ開発講座』で用いた「都道府県DB」を用いてGridViewに表示しています。ホームページはリンクを設定し、県庁所在地はボタンをクリックすると、別のページに移動して結果を表示します。

⇒ 公開例はこちら

【例題5】DataList、HTML動的操作、DB（動物リスト）

例題3と同じデータベースを使用して、DataListに画像を表示しています。画像の一つをクリックすると、その画像の拡大表示ページが表示されます。画像の拡大表示は、HTMLの画像タグを動的に生成しています。

⇒ 公開例はこちら

【例題6】学習項目：郵便番号検索、DB（郵便番号）

日本郵便に公開されている「郵便番号CSVデータ」をSQLデータベースに取り込み、このデータベースを用いて、都道府県・市区・町名を選択することで郵便番号を表示します。同時にフリガナをひらがなで表示しています。

⇒ 公開例はこちら

【例題7】学習項目：iframe、フリーサイトの画像・動画検索

iframeを用いると、自分のWebページ内に既に公開されている他社のホームページ等を組み入れることができます。この例題では、フリーサイトのページに検索ワードを渡して、例題サイト内に検索結果のページを表示しています。この例題では、「サイト：pexcels」を組み入れています。（pexelsサイトの仕様やURLの存続について保証はできません。）

⇒ 公開例はこちら

『中級編』では実用的なWEBサイト・ネットショップを作成

最後の『中級編』では、実用的なWEBサイト・ネットショップを作成していただきます。学習の進め方は『入門編』『初級編』と同じで、まずは「ひな型プロジェクト」を起動し（「ソリューションファイル」をダブルクリックするだけ）、「補助コード（ASPXとC#）」をコピー＆ペーストで設定するだけで、例題プロジェクトが完成します。プロジェクトが完成したら、「コード解説」を読んでコードを理解すれば、ご自身のWEBサイトを作成できるようになります。また、中級編では、Windows 11をサーバー設定し、Windows 11にサーバー公開する方法(WebDeploy）も解説しています。

【例題1】学習項目：DataList、動画再生、いいね、DB（動画動物）

DataListを用いて、データベースに登録されている動画動物の画像を表示しています。また、DataListには「いいね」の件数も表示しています。画像のひとつをクリックすると、その画像の動画が再生されます。表示された動画再生画面で「いいね」をクリックすると、「いいね」のカウントが更新されます。画像ファイルと動画ファイルは、あらかじめ別のWebサイトにアップロードしていて、そのURLを参照することで、画像と動画を表示しています。動画の再生は、『初級編』の例題５と同様HTMLの動画タグを動的に生成しています。

⇒ 公開例はこちら

【例題2】学習項目：ネットショップ、カート、郵便番号から住所検索、メール送信、DB（スイーツ、税、送料、郵便番号）

GridViewを用いて、ネットショップを構成する商品の一覧を表示しています。「カートに入れる」をクリックすると、選択した商品の情報がカートに設定されます。「カートを見る」をクリックすると、カート情報が表示されます。カートページの「この内容で購入する」をクリックすると、申込者の入力画面が表示されます。「注文を確定する」をクリックすると、メールが送信されます。

⇒ 公開例はこちら

※このサイトは講座用の仮想サイトです。実際の注文はできません。

学習に行き詰まったら「サポートチケット購入」がおすすめ

学習を進めていくと、どうしても行き詰まってしまうことがあるかと思います。そんな場合はプログラム内から「サポートチケット」をお買い求めください。作成した例題プログラムのエラー、トラブル、疑問点など個別のご相談にお応えします。（5回までメールでサポートします）

• サポートチケットは、プログラム内からお買い求めいただけます。各例題内の「講座サポート ＞ ご購入はこちら」の順にクリックしてください。
• メールサポートの回数は、「メールの回数」ではなく「個別相談として受けた内容の回数」となります。