第９回 Webプロジェクト５
特定演習｜情報デザインB｜芸術研究科 博士前期課程｜2020.11.11｜遠隔
芸術研究科サイト
AGENDA
- WordPress を活用したプロジェクトを進めます。
- 今週の成果を、研究科のサイトに記載して下さい。
芸術研究科サイト
ZoomMeeting 15:40 -
以下の会議室にお入り下さい
Zoomミーティングに参加する
- ミーティングID: 849 7629 9803
- パスコード: 3pSZPz
Webプロジェクト
WordPressにおける記事構成
プロトタイプ（続き）
前回に引き続き、サイトのプロトタイプについて報告していただきます。
- 固定ページのレイアウト
- 投稿ページのレイアウトと情報掲載項目
受講生 WebProject ページ
受講生WordPressサイト
- 季 卓芸：https://jzy722.wordpress.com
- 蔡 玥阳：https://coyii7456.wordpress.com
- 宋 高天：https://cykxcn.wordpress.com
- 陳 嵐清：http://www.sukiychan.com/
説明用リンク
WordPress が使えるレンタルサーバーについて
WordPress.com の利用では、スタイルのカスタマイズ等ができませんが、レンタルサーバーを利用して、オリジナルのWPサイトを構築すれば、自由なカスタマイズが可能になります。これは必須ではありませんが、参考までに、レンタルサーバの利用方法について紹介します。
はじめに（再確認）
HTMLサイト（静的サイト）とCMS（動的サイト）の違いの理解
アカウント取得について
アカウント取得には、メールアドレスが必須です。まず、メールで本人確認した後、正式なアカウント登録となるケースが多いようです。適宜説明にしたがって、手続きを進行させて下さい。一般に以下の情報が必要になります。しっかりとメモをとって残すようにして下さい。
- アカウントID
- パスワード
- 登録メールアドレス
事例紹介 ＞ RentalServer/Account
アカウント名について
フリーのレンタルサーバーでは、アカウント名は、あなたのサイトのアドレスに表記される文字列になります。すでに使われているものとの重複はできませんので、ユニークな名称を事前に考えておきましょう。
- アカウント名のよくない例
- 学籍番号（ほぼ個人情報です）
- 無意味な数字列がつくもの
- X-Free でのアカウント取得例
http://opensquarejp.html.xdomain.jp/
FTP接続情報の取得について
レンタルサーバーを使ったWebの公開で、最終的に必要となるのは、FTP接続情報です。これは、当該サービスのサイトでログインすると「管理情報」などの画面で確認することができます。接続には、以下３つの情報が必要です。
- FTP接続先（FTPサーバーアドレス）
- FTP接続ID
- FTP接続パスワード
FTP接続について
FTPとは、ネットワークでファイルの転送を行うための通信プロトコルの1つで、接続したクライアントとサーバ（FTPサーバ）間の転送に利用される通信規約です。Webサイトのデータ（HTML, CSS, 画像など）を手元のPCからウェブサーバへアップロードする際に必須のプロトコルです。一般にこの作業には、 FTPクライアントソフトが必要になります。
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です。
動作確認
公開アドレスにアクセスして、ページが表示されることを確認してください。
- http://opensquarejp.html.xdomain.jp/
ドキュメントルート直下の index.html が表示されます。 - http://opensquarejp.html.xdomain.jp/SampleSite
SampleSite フォルダの中の index.html が表示されます。