LogoMark.png

情報デザイン演習IIIA/2021/0921 の変更点


#author("2021-09-28T08:37:57+09:00","default:inoue.ko","inoue.ko")
#author("2021-10-23T15:37:35+09:00;2021-09-28T08:37:57+09:00","default:inoue.ko","inoue.ko")
*第2回|WordPressサイトの開設
[[情報デザイン演習IIIA/2021]] 2021.09.21
[[学科サイト|受講生一覧>https://design.kyusan-u.ac.jp/socialdesign/?%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92IIIA]]
~

***AGENDA
-以下名簿が表示されます。出欠確認をお願いします。
&fontawesome(far fa-hand-point-right); [[出欠確認・座席記録>https://docs.google.com/spreadsheets/d/1lqpK0yahLjyKiQ1j_nVmRSFUojMUstJB8Uln6PtZs_M/edit?usp=sharing]] ←''K'sLife反映済み''
-講義はこのページの内容を解説するかたちで遠隔 LIVE 配信します。
-本日の内容に従って、学科サイトの個人ページに情報を記載して下さい。
&fontawesome(far fa-hand-point-right); [[受講生一覧>https://design.kyusan-u.ac.jp/socialdesign/?%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92IIIA]]
~

#hr
'''''%%以下、LIVE動画をご覧下さい。記事に沿って解説します。%%'''''
%%記録動画の公開は9月24日(金)までとします。早めの確認をお願いします。%%
#hr

''記録動画は、''__[[学科サイト|情報デザイン演習IIIA/限定>https://design.kyusan-u.ac.jp/socialdesign/?%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92IIIA/%E9%99%90%E5%AE%9A]]__にアーカイブしています。

#hr
~


//#youtube(SmrspF_S9aY)
//https://youtu.be/SmrspF_S9aY
//埋め込み無効状態です。授業開始直前にページをリロードして下さい。
//~
//-配信開始:2021.09.21 13:40 -
//-動画は授業直前に有効になります(準備段階では黒い画面)。授業開始時にページを再読み込みしていただくと、視聴が有効になります。
//~

***CONTENTS
#contents2_1

~
~

**はじめに
***今後の進行計画
-%%第1回 09.15 ガイダンス|AnotherSky:「場所」の選定%%
-''第2回 09.21'' WordPressサイト開設|AnotherSky:ネタの洗い出し
-第3回 09.28 WordPress の基本操作|AnotherSky:サンプル記事の投稿
-第4回 10.05 WordPress の活用|AnotherSky:サイトマップ
-第5回 10.12 WordPress のカスタマイズ(スタイルシートの編集)
-第6回 10.19 個別記事のプロトタイピング|AnotherSky:ワイヤーフレーム
-第7回 10.26 中間報告 > 記事の書き方等を確認
 :
 以後、各自のスケジュールに沿ってサイト制作を行っていただきます。
 :
-第14回 12.21 成果報告(プレゼンテーション)


''この授業スケジュールを前提に、各自の進行管理表を作成して下さい。''
~
~

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

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

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

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

-アカウント取得例
--http://opensquarejp.wp.xdomain.jp/
// opensquarejp
--http://opensquarejp.starfree.jp/wordpress/ 
// inoue.ko
~
~

**X-Free でアカウント取得
***公式サイトにアクセス
-公式サイト:https://www.xfree.ne.jp/
-画面下の「無料レンタルサーバー利用お申し込み」をクリック
~


***利用者登録
#image(RentalServer/Account/01.jpg,right,40%)
-はじめに、あなたのメールアドレスを登録します。
-PCで受信トレイを開く前提で Gmail 等がおすすめです。
-メールが届いたら、本登録用のリンクをクリックして、その先へ進みます。
#clear

#image(RentalServer/Account/02.jpg,right,40%)
-利用者情報の登録です。
-パスワードを忘れないようメモしてください。
#clear

#image(RentalServer/Account/03.jpg,right,40%)
-管理パネルへのログイン画面が表示されます。
-利用者IDとパスワードを入力して、先へ進んで下さい。
#clear
~

***サーバー ID(URLの一部)の設定

#image(RentalServer/Account/04.jpg,right,40%)
-サーバー IDを決めてください。
 http://XXXXXXX.html.xdomain.jp/ 
 XXXXXXXX の部分を決める
//例:http://opensquarejp.html.xdomain.jp/
-この文字列は、あなたのサイトのURLの最初の文字列に利用される部分です。将来にわたって利用できるような、ユニークな名称を考えて設定して下さい。
-すでに使われている場合は、先へ進むことができません。他の文字列を検討して無料プランのまま先に進めるまで、繰り返しお試し下さい。

#clear

~

#image(RentalServer/Account/05.jpg,right,40%)
-右のような画面が出ます。
-次のステップで利用するサーバー の種類を選びます。
#clear

~
~

**X-Free でWordPressサイトの開設
***WPサーバーの利用開始

#image(RentalServer/Account/wp01.jpg,right,40%)
-WPサーバー の部分で「利用を開始する」とすると、右のような状態になります。
-管理パネルにログインしてください。 
#clear

#image(RentalServer/Account/wp02.jpg,right,40%)
-新規インストールをクリック
#clear

#image(RentalServer/Account/wp03.jpg,right,40%)
-サイトのアドレスはそのまま
-WordPressID を決めて入力
-ブログタイトルを入力(後の変更可)
-WPからの連絡ようメルアドを入力
#clear

#image(RentalServer/Account/wp04.jpg,right,40%)
-インストールが完了すると、右図のように情報が表示されて、設定やダッシュボードへの入り口が提示されます。
#clear

-以下のアドレスで、WordPressサイトにアクセスすることができます。
 http://xxxxx.wp.xdomain.jp/
 
#image(RentalServer/Account/wp05.jpg,right,40%)
-サイトにアクセスすると、公開されていることが確認できます。
#clear
~


***WordPressの管理情報設定
以上で、サイトは公開されていますが、この時点では、ダッシュボードにログインするためのパスワードの情報が得られていません。以下の手順で、WordPressの管理者IDとパスワードを確認する必要があります。
~

#image(RentalServer/Account/wp06.jpg,right,40%)
-
-WordPress管理画面の「設定」をクリックして下さい。
#clear

#image(RentalServer/Account/wp_Admin01.jpg,right,40%)
-各種管理設定の中に「管理者パスワードの初期化」があるので、それをクリック
#clear

#image(RentalServer/Account/wp_Admin02.jpg,right,40%)
-WordPressのダッシュボードにログインするためのログインIDが表示されていますので、そのまま「パスワードを初期化する」をクリック
#clear

#image(RentalServer/Account/wp_Admin03.jpg,right,40%)
-パスワードが初期化されて、新しいパスワードが表示されます。
-この管理画面では、パスワードが自動生成されるだけです。ここでパスワードを設定し直すことはできません。
-パスワードを自分好みに変更したい場合は、WordPressのダッシュボードの中で行います(後述)。
#clear

#image(RentalServer/Account/wp_Admin04.jpg,right,40%)
-WordPress管理画面の「ダッシュボードへ」をクリックして下さい。
もちろん、http://サイトのURL/wp-admin で入ることもできます。
#clear

#image(RentalServer/Account/wp_Admin05.jpg,right,40%)
-WordPressのログイン画面になるので、ログインIDとパスワードを入力して、ダッシュボードに入って下さい。
-これで、普通にWordPressが使えます。
-以下の作業は任意です。
#clear

-以後、一般に WordPressログインの入り口は、以下のようになります。
IDとパスワードで、管理画面(ダッシュボード)に入ることができます。
 http://xxxxx.wp.xdomain.jp/wp-admin
~

#image(RentalServer/Account/wp_Admin06.jpg,right,40%)
-自動生成されたパスワードを変更したい場合は、ダッシュボードメニューのユーザーから、アカウント管理の部分の「パスワードを生成する」をクリックして下さい。
#clear

#image(RentalServer/Account/wp_Admin07.jpg,right,40%)
-自動生成されたパスワードが表示されますが、これをあなたの好みの文字列に書き換えて「プロフィールを更新」して下さい。
#clear

~
~


**本日の演習
***私のアナザースカイ|ネタの洗い出し
あなたが選定した「場所」について、記事になりそうなネタ項目の洗い出しを行なって、Google Jamboard上で整理して下さい。
-結果は学科サイトの本日の進捗報告部分に掲載して下さい(後述)。
-これは、第4回で行うサイトマップの制作に必要な作業です。
-参考イメージ:[[ソーシャルデザイン応用演習>https://design.kyusan-u.ac.jp/socialdesign/?%E3%82%BD%E3%83%BC%E3%82%B7%E3%83%A3%E3%83%AB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%BF%9C%E7%94%A8%E6%BC%94%E7%BF%92]]
~

***Google Jamboard について
電子的な付箋を使った情報整理ツールとして、Google JamBoard を利用します。1年次のソーシャルデザイン応用演習で紹介しているので、ご記憶にはあるかと思いますが・・・

-Jamboardの作成1
--以下にアクセス
https://jamboard.google.com/
--自身のGoogleアカウントでログインして下さい。
--右下の「+」(新しいJam)をクリック

-''Jamboardの作成2'' ← こちらの方法がおすすめです。
--GoogleDrive にログイン
--マイドライブの中(あるいは作成したフォルダの中)で右クリック
--その他>Google Jamboard を選択

-使い方・・直感的に使えるので特に説明不要かと思います
--[[Google:Google JamBoard 使い方]]

-共有方法
--画面右上の「共有」から設定できます。
--リンクをコピーして、関係者に送るだけで共有できます。

-保存・エクスポート
--Jamboard は GoogleDrive のマイドライブ内に自動的に保存されます
--その他、メニューからPDF形式で保存なども可能です。

~
~


**学科サイトの更新

***サイトのアドレスを記載
X-Free 等で作成した、WPサイトのURLを掲載して下さい。
(https://www.example.com を書き換えて下さい)
進捗確認に必要です。
~

***プロジェクト管理
-各自、Googleスプレッドシート等で進行管理表を作成して、プロジェクト管理の部分に、リンク掲載して下さい。
-ファイルの共有設定は、''リンクを知っている全員が閲覧可能'' にして下さい。
~

***本日分の WorkLog 
プロジェクトページの下の方、Worklog に以下の形式で報告を行って下さい。
 
 **2021.09.21
 ***記事項目の洗い出し> 分類整理
 #image(xxxxxxx.png)
 ~
 ~
 
 ***WordPress|技術メモ
 (本日の演習で学んだ WordPress の基本操作についてメモを残しましょう)
 ~
~
~