情報デザイン演習IIIA/2020/1029

第７回 LocalServer入門

情報デザイン演習IIIA/2020｜情報デザイン専攻｜2020.10.29｜遠隔
情報共有シート｜プロジェクト一覧｜学科サイト

AGENDA

• 以下名簿が表示されます。ご自身の「出席欄」にチェックをつけて下さい。
  　情報共有シート
• 自分のPC上でローカルサーバーを動かす体験を行います。
• 演習のテーマ「私のアナザースカイ」について、プロトタイピングを行うとともに、本日の成果報告を記載して下さい。
  　学科サイト（受講生一覧）
  
  

以下、LIVE動画をご覧下さい。記事に沿って解説しています。

本日のメニュー

• はじめに
  • 次回 11/5 プロトタイプの発表について
• ローカルサーバー（Xampp）の準備
  • XAMPPの利用
  • XAMPPのインストール
  • サーバー環境の動作確認
  • Apacheの起動
• プロトタイピング｜AnotherSky
  • サイト全体
  • 個別投稿記事
• 学科サイトの更新｜次回発表前までに
  • CurrentStatus 部分の更新
  • プロジェクト管理の部分を更新
  • Worklog の 本日の作業記録を各自執筆
• APPENDIX

はじめに

次回 11/5 プロトタイプの発表について

教室にて対面で行います。前回同様に受講生を前半・後半のグループに分けて行いますが、前回とは時間帯の前半・後半を入れ替えて実施します。以下のシートで、事前に出校時間を確認しておいて下さい。

プロジェクト一覧

ローカルサーバー（Xampp）の準備

HTML+CSS+JavaScript だけであれば、エディタとブラウザのみで、自分のPC内で動作確認することができますが、PHPを使ったWebアプリケーションは、サーバーの機能が必要になります。その動作確認を行うには・・

• つくったものをその都度、レンタルサーバーにアップして確認
• 自分のPC内にサーバー機能をもたせ（サーバーソフトをインストールし）、所定の場所（ドキュメントルートと言います）にファイルを置いて確認

Webデザインを学ぶにあたって、サーバー環境の準備は欠かせない作業です。レンタルサーバーにその都度アップして動作確認するというのは能率が悪いので、とりあえず自分のPCにサーバソフトをインストールして実験環境をつくりましょう。一人二役状態、つまりサーバーとクライアントを一台のPCの中で同時に動かす・・ということです。

XAMPPの利用

Windows、Mac、LInux あらゆるOSで利用可能な XAMPPというサーバーパッケージがあります。一般にはこれを用いることが多いと思います。ライセンスGPLです。無料です。Webアプリ開発などの学習には最適のシステムですので、是非自分のPCにインストールして、使ってみて下さい。

XAMPPのインストール

• XAMPP（ザンプ）は、Webサーバーマシンの構築に必要なソフトウェアをパッケージしたもので、以下の4つの主要ソフトウェアと管理ツールなどが含まれてます。これをインストールすることで、自分のPCがサーバー機能を持つことになります。
  • Apache(Webサーバ)
  • MySQL / MariaDB(データベースサーバ)
  • PHP
  • Perl

XAMPPには、ダウンロードデフォルトの VM（バーチャルマシン）タイプと、インストーラータイプと２つの仕様があります。ここでは、従来からあるインストーラー形式のものを前提に説明しています。
インストーラータイプをDLするには、公式サイトのダウンロードページにある「その他のダウンロード」から必要なものを選択していきます。以下です。''

• https://sourceforge.net/projects/xampp/files/
  ここで対応OSを選択して、最新のフォルダを開けると以下のように２つあるので、installer を選んでください。

  xampp-osx-7.4.10-0-vm.dmg
  xampp-osx-7.4.10-0-installer.dmg 　← こちら

• インストールは簡単です。指示にしたがって「次へ」と進めるとインストールが完了します。たまに「オススメ」のインストールのお誘いがありますが、必要ないものは入れないのが賢明です。

• このとき重要なのが、XAMPPがHD内のどこにインストールされたのか・・ということです。XAMPP フォルダは直接扱うので、必ず把握して下さい。
  
  

サーバー環境の動作確認

以下、インストールしたサーバー環境の動作確認を行います。

• XAMPP フォルダの中に、以下のアイコンがあるはずです。それをダブルクリックしてコントロールパネルを起動して下さい。
  • Windowsの場合は xampp-control.exe
  • Macの場合は manager-osx
    
    

Apacheの起動

• Xamppのコントロールパネルから、サーバー(Apache)を起動して下さい。
  参考記事（AdminWeb）
• 例えば、Pukiwikiの利用であれば、Apacheサーバーのみ動けばOKです。
• ブラウザを起動して、アドレスバーに以下を直接入力して下さい。

  http://localhost/

• 「It Works!」と表示されれば、サーバーは正常に動いています。
  このとき、あなたのPCは、一人二役状態にあります。
  あなたのPC内のサーバーソフトが、あなたのPC内のブラウザからの要求に応答している…という状態です。

• Xampp フォルダの中に htdocs というフォルダを見つけて下さい。
  /xampp/htdocs/
• htdocs が 配信用のHTMLファイルを置く場所（ドキュメントルート）です。
  その中に、 index.html があって、ソースを見ると、先の「It Works!」
  が書かれているのがわかると思います。
• その index.html をあなたが作ったものと入れ替えれば、動作確認ができます。

• 要確認
  • 単にファイルをブラウザにドラッグした場合、アドレスは

    file://    

  • htdocs内にファイルを置いて、Localhostにアクセスした場合、

    http:// 

    と、明らかに異なる動作確認を行っていることがわかります。
    前者は、ファイルとして表示したもの、
    後者はサーバーから配信されたもの・・ということになります。
    
    
    
    

プロトタイピング｜AnotherSky

サイト全体

前回に引き続き、プロトタイプの制作を進めて下さい。次回までに、サイトマップとワイヤーフレーム（WordPress の外観＞テーマ のレイアウト）を決めて、プロジェクトのページに掲載して下さい。

• GoogleImage:サイトマップ　← どちらかと言えば「アイデア創出」段階
• GoogleImage:ワイヤーフレーム
  
  

個別投稿記事

投稿記事の基本的な情報構成パターンについても、プロトタイプを作成して、「投稿プロトタイプ」等の名称で投稿してください。投稿は、一般に以下のような要素を含みます

• 投稿タイトル（形式の統一が必要です）
• アイキャッチ（メインビジュアル）
• ５W２H（記事によって必要な項目は異なります）
  • What ： これは何？
  • When ： いつ？　
  • Where ： どこで？
  • Who ： 誰が？
  • Why ： なぜ？
  • How ： どのように？　
  • How much ： いくら？
• 記事本文
• 詳細説明画像とキャプション

• 事例：投稿プロトタイプ
  
  
  
  

学科サイトの更新｜次回発表前までに

CurrentStatus 部分の更新

• サイトマップとワイヤーフレームを作成して掲載して下さい。
• プロトタイプサイト（WordPress.com）のアドレスを掲載して下さい。
• 特徴的なページのスクリーンショットも掲載して下さい。
  
  

プロジェクト管理の部分を更新

• スケジュールを更新して下さい。
• ToDo項目を整理・更新して下さい。
  
  

Worklog の 本日の作業記録を各自執筆

• この部分は当該週の「日記」です。今週の作業内容を報告して下さい。
• WebServerに関する技術的なメモも残しましょう。
  
  
  
  
  
  
  
  

APPENDIX

• 世界最初のWebサーバー（画像）　関連記事
• 日本最初のWebサーバー
• 日本で最初のホームページ（アーカイブ）
  高エネルギー加速器研究機構 計算科学センターの森田洋平博士によって発信
  情報源＞株式会社つくばマルチメディアが管理するサイト