2
4
「WEBアプリ開発 」は、WEBサイトやネットショップを自分の手で作りたい方のための学習ソフトです。
入門編から中級編まで順に学ぶことで、仕組みをやさしく理解できます。
外部サービスでは変えにくい細かな部分も、自分の思いどおりに作れます。
一つずつ作りながら覚えるので、長く使える自分だけのWEBサイトづくりを始められます。
製品の情報は、株式会社FREECSによるものです。
本ソフトをご利用いただくには、「Windowsアプリ開発2（入門・初級・中級編）」、および 「データベースアプリ開発（入門・初級・中級編）」を修了している方、もしくは同等の知識を有し、HTMLの基本を理解されている方が望ましいです。
WEBサイトであれば、データベースに登録されている画像を表示したり、”いいね”の件数を表示できるほか、画像をクリックすると、その画像の動画を再生することもできるようになります。
⇒公開例はこちら （FREECS社のサイトが開きます）
"ネットショップ"を作る場合は、商品の一覧を表示したり、"カートに入れる"をクリックすると、選択した商品の情報がカートに設定されるほか、"カートを見る"をクリックするとカート情報が表示されます。
また、カートページの"この内容で購入する"をクリックすると、申込者の入力画面が表示され、"注文を確定する"をクリックするとメールが送信されます。
本ソフトで学習を進めるには、事前に「Visual Studio Community 2026（無料）」をダウンロードしていただく必要があります。
マイクロソフト社が提供している開発環境で、個人の方は無料でご利用いただけます。
「Visual Studio Community 2026」無料ダウンロードはこちら （マイクロソフト社のサイトが開きます）
本ソフトでは、各例題ごとに「ひな型プロジェクト」をご用意しております。
まずは「ひな型プロジェクト」を起動し（「ソリューションファイル」をダブルクリックするだけ）、「補助コード（ASPXとC#）」をコピー＆ペーストで設定するだけで、例題プロジェクトが完成します。
プロジェクトが完成したら、「コード解説」を読んでコードを理解すれば、ご自身のWEBサイトを作成できるようになります。
また、入門編には、「ひな型プロジェクト」の作成方法も学習できます。
LabelとButtonコントロールを配置して実行したサンプルサイトを作成します。
⇒公開例はこちら （FREECS社のサイトが開きます）
TextBoxに入力した文字列をButtonをクリックしたときにLabelに表示しますが、PostBack処理を組み入れないと正しく表示されません。
⇒公開例はこちら （FREECS社のサイトが開きます）
TextBox、Label、Buttonの外観（サイズ、色など）をstyleで設定しています。
⇒公開例はこちら （FREECS社のサイトが開きます）
Styleの設定内容をひとつのファイル（ここではMySite.css）に記載し、バナーやフッターなどWEBページに必要な項目も追加してページを表示しています。
⇒公開例はこちら （FREECS社のサイトが開きます）
JavaScriptにより、HTMLに記載した文字のサイズを拡大します。
⇒公開例はこちら （FREECS社のサイトが開きます）
HTMLで、Table（表）を構成し、セルにTextBoxとButtonを配置しています。
ここで注文入力を行い、入力結果をLabelに表示しています。
注文入力が未入力の場合、Placeholderを使って入力すべき内容を薄いグレー色で表示しています。
また、計算できない入力があった場合は、メッセージを表示しています。
⇒公開例はこちら （FREECS社のサイトが開きます）
SiteMasterは、複数ページでWEBサイトを構成するときに、共通するページ構成（バナー、フッターなど）をマスターページとして作っておき、個々のページは、相違点のみを記載して重複記載を少なくするものです。
faviconは、サイトに表示するページタイトルのアイコンです。
⇒公開例はこちら （FREECS社のサイトが開きます）
WEBページにメニューを追加しています。メニューは、階層を設置して表示することもできます。
個々のページは、SiteMasterを用いてベースとなるページを作成し、これを元にトップページ、開発元ページ、販売元ページ、バージョン情報ページを作成しています。
⇒公開例はこちら （FREECS社のサイトが開きます）
例題８の構成に「ヘルプページ」を追加し、ヘルプページには「ボタン」を配置しています。
ボタンをクリックすると、そのページに移動するようにしています。
また、SiteMapPathを用いて現在の表示位置が「トップ ＞ ヘルプ」のようにわかるようにし、リンク移動もできるようにしています。
⇒公開例はこちら （FREECS社のサイトが開きます）
Session変数は、ページ間でデータを共有するためのものです。
ここでは、トップページに入力したデータをSession変数に設定することで、編集ページでそのデータを参照して入力データを確認しています。
⇒公開例はこちら （FREECS社のサイトが開きます）
「入門編」が理解できるようになったら、次は「初級編」にステップアップしてみましょう。
専門学校に通うのとは異なり、自分のペースで学習を進められるので、焦らず理解を深めながらステップアップしていきましょう。
学習の進め方は「入門編」と同じで、まずは「ひな型プロジェクト」を起動し（「ソリューションファイル」をダブルクリックするだけ）、「補助コード（ASPXとC#）」をコピー＆ペーストで設定するだけで、例題プロジェクトが完成します。
プロジェクトが完成したら、「コード解説」を読んでコードを理解すれば、ご自身のWEBサイトを作成できるようになります。
問い合わせページの簡易版です。入力したメールアドレス宛に、メールが送信されます。
⇒公開例はこちら （FREECS社のサイトが開きます）
DataListを使って、指定したフォルダの中にある画像ファイル一覧を表示します。
（この例題ではデータベースは使用していません）ラジオボタンで画像を切り替えます。
PostBack時に画像が揺れないように、画面の更新範囲をUpdatePanelで指定しています。
⇒公開例はこちら （FREECS社のサイトが開きます）
データベースを用いて、登録されている画像をListBoxに表します。
⇒公開例はこちら （FREECS社のサイトが開きます）
別売りの『データベースアプリ開発講座』で用いた「都道府県DB」を用いてGridViewに表示しています。
ホームページはリンクを設定し、県庁所在地はボタンをクリックすると、別のページに移動して結果を表示します。
⇒公開例はこちら （FREECS社のサイトが開きます）
例題3と同じデータベースを使用して、DataListに画像を表示しています。
画像の一つをクリックすると、その画像の拡大表示ページが表示されます。
画像の拡大表示は、HTMLの画像タグを動的に生成しています。
⇒公開例はこちら （FREECS社のサイトが開きます）
日本郵便に公開されている「郵便番号CSVデータ」をSQLデータベースに取り込み、このデータベースを用いて、都道府県・市区・町名を選択することで郵便番号を表示します。
同時にフリガナをひらがなで表示しています。
⇒公開例はこちら （FREECS社のサイトが開きます）
iframeを用いると、自分のWEBページ内に既に公開されている他社のホームページ等を組み入れることができます。
この例題では、フリーサイトのページに検索ワードを渡して、例題サイト内に検索結果のページを表示しています。
この例題では、「サイト：pexcels」を組み入れています。
（pexelsサイトの仕様やURLの存続について保証はできません。）
⇒公開例はこちら （FREECS社のサイトが開きます）
最後の「中級編」では、実用的なWEBサイト・ネットショップを作成していただきます。
学習の進め方は「入門編」「初級編」と同じで、まずは「ひな型プロジェクト」を起動し（「ソリューションファイル」をダブルクリックするだけ）、「補助コード（ASPXとC#）」をコピー＆ペーストで設定するだけで、例題プロジェクトが完成します。
プロジェクトが完成したら、「コード解説」を読んでコードを理解すれば、ご自身のWEBサイトを作成できるようになります。
また、中級編では、Windows 11をサーバー設定し、Windows 11にサーバー公開する方法(WebDeploy）も解説しています。
DataListを用いて、データベースに登録されている動画動物の画像を表示しています。
また、DataListには「いいね」の件数も表示しています。
画像のひとつをクリックすると、その画像の動画が再生されます。
表示された動画再生画面で「いいね」をクリックすると、「いいね」のカウントが更新されます。
画像ファイルと動画ファイルは、あらかじめ別のWEBサイトにアップロードしていて、そのURLを参照することで、画像と動画を表示しています。
動画の再生は、「初級編」の例題５と同様HTMLの動画タグを動的に生成しています。
⇒公開例はこちら （FREECS社のサイトが開きます）
GridViewを用いて、ネットショップを構成する商品の一覧を表示しています。
「カートに入れる」をクリックすると、選択した商品の情報がカートに設定されます。
「カートを見る」をクリックすると、カート情報が表示されます。
カートページの「この内容で購入する」をクリックすると、申込者の入力画面が表示されます。
「注文を確定する」をクリックすると、メールが送信されます。
⇒公開例はこちら （FREECS社のサイトが開きます）
（このサイトは講座用の仮想サイトです。実際の注文はできません）
学習を進めていただくと、どうしても行き詰まってしまうことがあるかと思います。 そんな場合は有償で「サポートチケット」をご用意しています。 作成した例題プログラムのエラーやトラブル、疑問点など個別のご相談にお応えします。
製品内の「講座サポート」から購入できます。
高速インターネット接続環境（ブロードバンド回線） ・メールアドレス（ライセンス認証、講座サポート等に必要）
ご購入ガイド