SHOEISHA iD

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

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

特集記事

WebMatrixで簡単にWebサイトを構築してみよう

WebMatrix入門

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

WebMatrixを起動してみよう

 それでは早速、WebMatrixを起動してみましょう。WebMatrixを起動すると、スタートページが表示されます(図2)。

図2 WebMatrixのスタートページ
図2 WebMatrixのスタートページ

 スタートページは、4つのアイコンが表示されているだけのシンプルなページです。各アイコンについて、表2にまとめてみます。

表2 スタートページ上の各アイコン
アイコン 説明
My Sites [マイ ドキュメント]フォルダー内に作成される[My Web Sites]フォルダー内の最近使用したWebサイトやすべてのWebサイトが表示され、開くことができる
Site From Web Gallery カテゴリ別に分類されたオープンソースWebアプリケーションをインストールできる
Site From Template 既定で用意されているテンプレートからWebサイトを作成できる
Site From Folder [フォルダーの参照]ダイアログボックスが表示され、Webサイトを開くことができる

 表2から分かるように、WebMatrixからWebサイトを新規作成する場合、2つの選択肢があります。[Site From Template]でテンプレートを選択する方法と、[Site From Web Gallery]でオープンソースWebアプリケーションをインストールする方法です。

 これから、これらの方法についてさらに詳しく説明します。

テンプレートからサイトを作成する - Site From Template -

 スタートページから[Site From Template]アイコンをクリックすると、WebMatrixで用意されているテンプレートを元にして、Webサイトを新規作成できます。作成されたWebサイトをカスタマイズすることにより、必要な機能を持ったWebサイトを素早く構築することができます。

 WebMatrixで用意されているテンプレートについて、表3にまとめてみます。本稿執筆時点では、5つのテンプレートが用意されています。

表3 [Site from Template]ページ内の用意されているテンプレート
テンプレート 説明
Empty Site 空のWebサイト
Starter Site ログイン機能やタブメニューを持つシンプルなサイト
Bakery 「Fourth Coffee」という架空のベーカリーのオンラインショッピングサイト
Photo Gallery フォトギャラリー機能を提供するサイト
Calendar カレンダーでスケジュール管理が行えるサイト

 ページを見ているだけで楽しいWebサイトもありますので、キャプチャで一つずつ紹介します。

 まず、[Starter Site]テンプレートを使用したWebサイトです(図3)。

図3 [Starter Site]テンプレートを使用したWebサイト
図3 [Starter Site]テンプレートを使用したWebサイト

 次に、[Bakery]テンプレートを使用したWebサイトです(図4)。

図4 [Bakery]テンプレートを使用したWebサイト
図4 [Bakery]テンプレートを使用したWebサイト

 次に、[Photo Galelry]テンプレートを使用したWebサイトです(図5)。

図5 [Photo Gallery]テンプレートを使用したWebサイト
図5 [Photo Galery]テンプレートを使用したWebサイト

 最後に、[Calendar]テンプレートを使用したWebサイトです(図6)。

図6 [Calendar]テンプレートを使用したWebサイト
図6 [Calendar]テンプレートを使用したWebサイト

オープンソースアプリをインストールする - Site From Web Gallery -

 スタートページから[Site From Web Gallery]アイコンをクリックすると、カテゴリ別に分類されたオープンソースWebアプリケーションから好きなものを選択してインストールすることができます(図7)。

図7 [Site From Web Gallery]ページ
図7 [Site From Web Gallery]ページ

 選択可能なオープンソースWebアプリケーションには、「DotNetNuke」のようなASP.NETアプリケーションだけでなく、「WordPress」のようにPHPで書かれたWebアプリケーションも数多く含まれています。図8は、「WordPress」を選択して、ダウンロードとインストールを実行し、作成した「WordPress」のサイトをWebMatrix上で動作させたものです。コードを一行も記述することなく、ウィザードによる設定だけで簡単に構築することができます。

図8 作成した「WordPress」のサイト
図8 作成した「WordPress」のサイト

次のページ
データのグリッド表示を行うサンプルを作成してみよう

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

  • X ポスト
  • このエントリーをはてなブックマークに追加
特集記事連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

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

WINGSプロジェクト 広瀬 嘉久(株式会社ジェイテックジャパン)(ヒロセ ヨシヒサ )

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

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

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

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5616 2010/12/17 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング