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

第６回 WebServer入門

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

AGENDA

• 以下名簿が表示されます。ご自身の「出席欄」にチェックをつけて下さい。
  　情報共有シート
• WordPress の本格導入に向けて、WebサーバーとFTP接続についての概説を行うとともに、レンタルサーバーの確保について説明します。
• 演習のテーマ「私のアナザースカイ」について、プロトタイプの制作を行うとともに、本日の成果報告を記載して下さい。
  　学科サイト（受講生一覧）
  
  

以下、LIVE動画をご覧下さい。記事に沿って解説しています。
配信記録動画の公開は３日間（土曜まで）です。

本日のメニュー

• はじめに
• FTP接続体験
  • ブラウザのFTPクライアント機能で接続体験
  • FTPクライアントを自身のPCにインストール
  • FTPクライアントの接続手順
  • アップロード
• レンタルサーバーの準備
  • アカウント取得について
  • アカウント名について
  • 事例（WordPressの使用を前提とする場合）
  • FTP接続情報の取得について
  • 注意
• プロトタイピング
  • プロトタイピングの目的
  • プロトタイピングの要点
  • プロトタイピング関連参考イメージ
  • 参考：GoogleLab の発想
• 学科サイトの更新｜プロトタイプの発表（11/05）までに
  • CurrentStatus 部分の更新
  • プロジェクト管理の部分を更新
  • Worklog の 本日の作業記録を各自執筆
• APPENDIX

はじめに

本演習におけるWeb関連スキルの学習プロセスを確認します。

• 1. HTMLサイト（静的サイト）とCMS（動的サイト）の違いの理解
• 2. WordPress.comサービスのアカウントを取得してCMSの活用体験
• 3. 学内サーバー（既存）を利用したFTP接続体験
  • 3.1. FTP接続のプロセスを再確認（本日実演）
  • 3.2. 各自、自宅のPCにFTPクライアントのインストール（次週までに）
• 4. レンタルサーバーのアカウント取得
  • 4.1. レンタルサーバーのアカウント取得の方法を理解（本日実演）
  • 4.2. 各自、レンタルサーバーの確保と公開テスト（次週までに）
• 5. 自身の環境にローカルサーバーをインストールして開発環境を構築（次週）
• 6. Webサーバー にCMS（WordPress）のセットアップを体験
• 7. CMS（WordPress）のカスタマイズを体験
  
  
  
  

FTP接続体験

FTPとは、ネットワークでファイルの転送を行うための通信プロトコルの1つで、接続したクライアントとサーバ（FTPサーバ）間の転送に利用される通信規約です。Webサイトのデータ（HTML, CSS, 画像など）を手元のPCからウェブサーバへアップロードする際に必須のプロトコルです。一般にこの作業には、 FTPクライアントソフトが必要になります。

ブラウザのFTPクライアント機能で接続体験

ブラウザには FTPクライアント機能があります。出先のPCでファイルをDLしたいときなどに有効です。試しに、ブラウザのアドレス入力欄に以下を入力してみて下さい（学内から接続した場合にのみ有効）。
ftp://ftp.ip.kyusan-u.ac.jp

• プロトコルが http:// ではなく、 ftp:// となているところが肝心です。
• IDとPWが要求されると思います。
• K'sLifeを利用するときのID,PWで接続されます。
• WWW-KSU というフォルダが、学内Web公開用のディレクトリです。
  
  

FTPクライアントを自身のPCにインストール

今後のWeb制作では、みなさんが作成したWebサイト、あるいはCMSのシステムファイルをサーバーにアップロードするためのソフトウエア（FTPクライアント）が必要になります。代表的な FileZilla を使って説明します。

• FileZilla クライアント（Mac, Win, Linux）
  https://filezilla-project.org/download.php?type=client
• オールドバージョン（3.9.0.5は解凍するだけで使えます）
  http://mac.filehorse.com/download-filezilla/old-versions/
  
  

FTPクライアントの接続手順

• 1. FileZilla を起動します
• 2. 左上のサイトマネージャアイコンをクリック
• 3. 「新しいサイト」をクリックして、サーバー名（自由）を記載
• 4. 右側のフォームにサーバーとの接続に必要な情報を入力
  • HOST：転送先のFTP サーバーのアドレス
  • FTPユーザID：あなたの登録上 のIDです。
  • FTPパスワード：あなた本人からであることを確認するパスワードです。

• 5. 一旦「保存」（２回目以降は 3,4, の手順は不要になります。）

• 6. 以後「接続」をクリックすると、サーバーに接続されて、ファイルをアップする先のディレクトリが開きます。ちなみに、index.htmlをはじめとした、Webサイトのデータを置く場所（ディレクトリ）のことをドキュメントルートと言います。

手順２	手順３・４	手順６

アップロード

FTPツールは、一般に左にローカルマシンのディレクトリ、右にリモートサーバーのディレクトリーが見えます。ローカルにあるサイトの中身をそっくりそのまま（相対的な位置関係を変えずに）リモートにアップすればOKです。

• 大学に用意された練習用のディレクトリとURLを使って試します。本学では学生個々人にメールアドレスとホームページ作成用のエリアがすでに用意されています。学内のネットワークからは、

  http://www.kyusan-u.ac.jp/~k19as000

  というアドレスで閲覧可能です。
  • HOST　→　ftp.ip.kyusan-u.ac.jp（133.17.4.74）
  • ユーザID　→　K'sLifeで用いているもの
  • パスワード　→　K'sLifeで用いているもの
  • ターゲットフォルダ　→　WWW-KSU

以上の情報は、九州産業大学、造形短期大学部ともに共通です。

レンタルサーバーの準備

無料のレンタルサーバーでは、小さく広告が入るなどの条件がありますが、アカウントの登録だけで簡単に利用することができます。今回は、WordPressの利用を前提とするので、PHPやMySQLが利用できるサービスを選ぶことが必要です。

アカウント取得について

アカウント取得には、メールアドレスが必須です。まず、メールで本人確認した後、正式なアカウント登録となるケースが多いようです。適宜説明にしたがって、手続きを進行させて下さい。一般に以下の情報が必要になります。しっかりとメモをとって残すようにして下さい。

• アカウントID
• パスワード
• 登録メールアドレス
  
  

アカウント名について

フリーのレンタルサーバーでは、アカウント名は、あなたのサイトのアドレスに表記される文字列になります。すでに使われているものとの重複はできませんので、ユニークな名称を事前に考えておきましょう。

• アカウント名のよくない例
  • 学籍番号（ほぼ個人情報です）
  • 無意味な数字列がつくもの

• アカウント取得例
  http://opensquarejp.html.xdomain.jp/
  
  

事例（WordPressの使用を前提とする場合）

• XFREE
• Star Server Free
• その他を探すには、Google: サーバー　フリー　WordPress
  
  

FTP接続情報の取得について

レンタルサーバーを使ったWebの公開で、最終的に必要となるのは、FTP接続情報です。これは、当該サービスのサイトでログインすると「管理情報」などの画面で確認することができます。接続には、以下４つの情報が必要です。

• ホームページの公開アドレス
• FTP接続先（FTPサーバーアドレス）
• FTP接続ID
• FTP接続パスワード
  
  

注意

登録時に自分で入力したIDやパスワードは、メモ帳などに同時に
Copy&Pasteするなどして、しっかりと管理してください。

また、試しにつくってみただけ、というような使い方は先方に失礼ですので、
不要なものについては、必ず削除の手続きを行って下さい。

プロトタイピング

プロトタイピング（Prototyping）とは、実際に目で見て、手で触れることができるモノを作ること、ソフトウエアで言えば、入力から出力までの一連のプロセスを確認できる試作品を制作することを意味します。以下、前期の講義＋　です。

プロトタイピングの目的

プロトタイピングの目的は、アイデアに対するユーザーの反応を見ることにあります。構想中のアイデアの「全体像」がある程度具体的なカタチになることで、ユーザーは具体的な感想を持つことができます。プロトタイピングの目的は・・

• 利用者（ターゲット層）にアイデアを具体的なカタチで説明するため。
• 開発メンバー間でアイデアを具体的なカタチで見て議論するため。
• 最小限の投資で早期に多くの失敗を体験するため。
  
  

プロトタイピングの要点

• 短時間でつくることができるものを使う
• 修正・改善しやすいものを使う
• お金をかけずにつくる

• 利用者が全体を見て・触ることができるようにつくる（プロダクト）
• 利用者が全プロセスを体験できるようにつくる（Web・ソフトウエア）

• プロトタイプで何を確認したいのかを明確にする
  • 大きさを確認したい ＞ 大きさに忠実な模型を作る
  • 手触りを確認したい ＞ 素材を忠実に使う（さわる部分的のみ）
  • 操作性を確認したい ＞ インターフェイス部分のみ再現（その他はダミー）
    
    

プロトタイピング関連参考イメージ

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

参考：GoogleLab の発想

• とにかく実験的なシステムを続々と作る。
• ユーザーの共感が得られるプロジェクトをブラッシュアップしていく
• ユーザーの共感が得られなかったプロジェクトは閉じていく

学科サイトの更新｜プロトタイプの発表（11/05）までに

CurrentStatus 部分の更新

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

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

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

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

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

APPENDIX