構造設計_Webアプリケーション制作

多摩美術大学 / 情報デザイン学科

No. 1

静的なWebページ I

ローカルサーバーへのHTMLのホスティング

導入ワーク

  • 印象に残っているWeb表現についてディスカッションしてみましょう
  • 嫌だったWeb上の体験についてもディスカッションしてみましょう

1. 前期のおさらい

html

HTML、CSS、JavaScript の知識をいまいちど呼び戻すために、p5.js の表示と HTML 要素を組み合わせた簡単なページを VS Code で作成してみましょう。

最低限の HTML はこのようなものでした。文書を構造化されたドキュメントとして表現するのが HTML でした。

<!DOCTYPE html>
<html>
<head>
    <title>Static Web Page</title>
</head>
<body>
    <h1>Welcome to My Static Web Page</h1>
    <p>This is a simple static web page.</p>
</body>
</html>

Safari や Chrome などの Web ブラウザーは、HTML を読み込んで画面に表示する機能を持っています。また、とくに body 内のタグで囲われている部分を Element または DOM 要素 と呼びます。DOM は Document Object Model の略で、HTML 文書をプログラムから扱えるようにした構造です。JavaScript はこの DOM 要素を取得したり、内容や見た目を変更したりできます。

スタイリングがないページはなんとも味気ないので、ドキュメントにスタイルを適用し、見た目をデザインしていくのが CSS でした。

body {
    font-family: Arial, sans-serif;
    margin: 20px;
}
h1 {
    color: #333;
}

CSS は style タグを用いて HTML 内に記述できるほか、.css ファイルとして分けて読み込むこともできます。

プログラミング基礎で習った p5.js は、JavaScript のライブラリとして埋め込めます。

function setup() {
  createCanvas(600, 600);
  noLoop();
}

function draw() {
  background(255);
  let xMargin = 100;
  let xNum = 10;
  let yNum = 16;
  let space = (width - xMargin * 2.0) / xNum;

  noFill();

  for (let y = 0; y < yNum; y++) {
    for (let x = 0; x < xNum; x++) {
      let px = map(x, 0, xNum, xMargin, width - xMargin);
      let py = map(y, 0, yNum, 0, height);

      let offsetScale = map(y, 0, 8, 0, 5);
      let offsetx = random(-offsetScale, offsetScale);
      let offsety = random(-offsetScale, offsetScale);

      push();
      translate(px + offsetx, py + offsety);
      rotate(random(y * 0.02));
      rect(0, 0, space, space);
      pop();
    }
  }
}

JavaScript は script タグ内に記述するか、CSS と同様に .js ファイルとして外部参照できます。注意が必要なのは、p5.js の関数を使うには、先に p5.js 本体のライブラリを読み込む必要があることです。次のような script タグを HTML に追記します。

<script src="https://cdn.jsdelivr.net/npm/p5@1.11.13/lib/p5.js"></script>

CSS や JavaScript が長くなってくると、HTML が肥大化して読みづらくなります。あとから更新したくなったときにも、どこを直せばよいかわかりにくくなります。そのため、HTML、CSS、JavaScript は必要に応じてファイルを分けて整理していくのが無難です。

ワーク

  • 時間をとって、テーマを決めて Web ページを制作してみましょう。（例：プログラミング基礎の最終課題で提出した p5 スケッチと、その解説を加えたページ）

2. Server: サーバー

サーバーとはなんでしょう。英語としてはserveする人、つまりお仕えの人や給仕係といったところでしょうか。Webにおいて、サーバーはほかのプログラムからの要求を待ち受けて、HTML、画像、CSS、JavaScript、データなどを返すプログラムや仕組みです1。Web では、ブラウザーが「この URL のページをください」と要求し、サーバーが「これがお望みの ページファイルですよ」と応答します2。www.idd.tamabi.ac.jp/design/ をクリックすると、ページが表示されます。

この通信では、おおまかに次のような流れが起きています。

  1. ブラウザーが、その URL のサーバーにリクエストを送る。
  2. サーバーが HTML、CSS、JavaScript、画像などをレスポンスとして返す。
  3. ブラウザーが受け取ったファイルを解釈して画面に表示する。

サーバーを自分のPC内（＝ローカル環境）で動かしてみましょう。

VS Code - Live Server

本授業では VS Code を使っているので、その拡張機能を使います。Live Server を Extensions から検索してインストールすると、エディターの右下に “Go Live” と表示されているクリック領域が出てきます。ここをクリックすると、通常は 5500 番ポートで、自分の作業フォルダー内のファイルにアクセスできるサーバーが起動します。

学内サーバー

学内で提供されているサーバーも使ってみましょう。 ファイルサーバーの個人領域の中に public_html ディレクトリを作り、そこに HTML ファイルを格納すると、割り当てられた URL からアクセスできるようになります。

public_html/
├── index.html
├── style.css
├── sketch.js
└── images/
    └── main.jpg

くわしくは 学内サーバーの使い方 を参照してください。

静的なWeb

ここでサーバーが行っていることは、あらかじめ用意されたHTML一式をそのまま返しています。これは今は珍しいかもしれません。なぜかと言うと今私たちが使う多くのサイトはログインした人に対して個別のページ表示を用意するためです。だれがアクセスしても変わらないサイト（内部的にはあらかじめ用意されたHTMLを返却しているだけのサイト）を静的 static なサイトと良い、逆に状況（人や時間など）に応じてサイトのコンテンツをプログラムが出し分けるサイトを動的 dynamicなサイトといいます。動的なサイトをつくるためには、単純なファイルサーバーでは足りず、サーバーサイドのプログラムが必要になります。

3. Network: ネットワーク

html

Web ページを見るとき、ブラウザーとサーバーはネットワークを通じて通信しています。ネットワークとは、複数のコンピューターやスマートフォンなどが互いに通信できるようにつながった状態のことです。自宅や教室の Wi-Fi も小さなネットワークです3。

インターネットは、世界中のネットワーク同士をつないだ巨大なネットワークです。自分の PC、スマートフォン、大学のネットワーク、プロバイダー、Web サーバーなどが段階的につながることで、遠くのサーバーにある Web ページを閲覧できます。

IP アドレス

このとき、URL は人間が読みやすい名前ですが、ネットワーク上の機器同士は最終的に IPアドレスを使って相手を見つけます。IP アドレスは、ネットワーク上の住所のようなものです。

さきほど、Live Server で起動したサーバーは、自分のマシン上で動いています。自分のマシンから見て、自分自身の中にあるサーバーをローカルサーバーといい、localhost という名前、または 127.0.0.1 という ネットワークアドレス＝IPアドレス4でアクセスできます。これは「自分自身」を意味する特別なアドレスです。

html

http://localhost:5500/
http://127.0.0.1:5500/

5500 の部分はポート番号です。ポート番号は、同じコンピューターの中で動いている複数のサーバーやサービスを区別する番号です。Live Server では 5500 番がよく使われますが、環境によって別の番号になることもあります。また別のプログラムが同じポート番号を使っているとうまくサーバーが起動しなかったり問題が生じます。

もしマシンが Wi-Fi のアクセスポイントなど何かのネットワークに接続されていれば、同じネットワークにある別のマシンからもアクセスできる場合があります。

http://自分のローカルIPアドレス:5500/

IPアドレスを確認する

Mac の場合は、Terminal（「ターミナル」という名前のアプリ、または VS Code の Terminal）で次のコマンドを実行して結果を確認します。

ifconfig

別の確認方法：

  • Apple メニュー（リンゴマーク）> システム設定 > ネットワーク > 「Wi-Fi」または「Ethernet（有線）」> 詳細 > TCP/IP > IP アドレス

Windows の場合は、PowerShell またはコマンドプロンプトで次のコマンドを実行します。

ipconfig

表示された結果の中から、現在使っているネットワークアダプターの IPv4 アドレス を確認します。ただし、OS のファイアウォール、学校のネットワーク設定、Live Server の設定によっては、同じネットワーク内でもアクセスできないことがあります。アクセスできない場合は、同じ Wi-Fi に接続しているか、URL とポート番号が正しいか、ファイアウォールで通信が止められていないかを確認します。

ワーク

  • 自分のスマートフォンを学内サーバーにつなげて、自分のPCのサーバーにアクセスできるかテストしてみましょう。
  • 現在の IP アドレスをクラス内で共有し、相互にアクセスしましょう。
  • iframe という HTML タグを用いて、外部の Web ページや他者の公開ページを読み込んでみましょう。

iframe

iframeとは、別のWebページを窓のように配置できるHTMLタグです。HTMLとしては、HTML配下にHTMLをまるごと読み込むことになるので、動作上の注意は必要です。

<iframe
  id="inlineFrameExample"
  title="Inline Frame Example"
  width="400"
  height="400"
  src="https://ayumu-nagamatsu.com/demo/bm-orbs/">
</iframe>

Footnotes

  1. 　Webサーバー自体は、マシンとしてはほとんど私たちが使っているPCとかわりありませんが、サーバーとして動作させる専用のハードウェアとソフトウェアを備えています。ハードウェアとしては、ラック式のものや、普通のパソコンのようなものなどがあります。サーバーのソフトウェアとしては、シェアの高いものだと nginx や apache があります。 ↩

  2. ページなどのやりとりはある種の挨拶やマナーのように定型化されています。この決まり文句のようなお作法を「プロトコル」と良い、サーバーにおける通信の代表格が HTTP と呼ばれるプロトコルです。 ↩

  3. ネットワークをつくるには、ハブというEthernetを相互接続する機器や、Routerというインターネット回線とネットワークを接続する機器などが必要になります。これらが実際にどこにあるかを確認してみましょう。 ↩

  4. 私たちが目にするのは、0-255の値がドット区切りで4つある（つまり8bit x 4 = 32bitの）数字列です。これはIPv4と呼ばれる表記です。同一のネットワーク内からわかるIPアドレスはローカルIPアドレスと呼ばれ、インターネット上でつかわれるIPアドレス（グローバルIPアドレス）とは区別されます。192.168.x.x、10.x.x.x、172.16.x.x から 172.31.x.x のようなアドレスは、多くの場合ローカル IP アドレスです。 ↩

Back to 構造設計_Webアプリケーション制作