Webデザイン基礎B/2020/1207

第11回 Webサイト制作１

Webデザイン基礎B/2020｜造形短期大学部｜2020.12.07｜遠隔
情報共有シート｜特設サイト

AGENDA

• 以下名簿が表示されます。ご自身の「出席欄」にチェックをつけて下さい。
  　情報共有シート
• 今回から各自のサイトの制作をはじめます。
• 本日の成果は GitHubページを更新する形で公開して下さい。
  
  

はじめに LIVE動画をご覧ください。それ以後は Zoomで個別に対応します。
過去のLIVE動画については、限定公開アドレスを K'sLife の連絡通知で送っていますので、復習が必要な場合は、そちらからご覧下さい。

Zoom

制作上の質問がある場合は、以下のアドレスから「会議室」にお入りください。

• Zoomミーティングに参加する （終了しました。）
  
  

はじめに

最終回までの進行について

• 今回から制作期間となります。毎回11:00から簡単な補足説明を行い、その後は Zoom で個別質問に対応するかたちで進めます。

• 最終回については、皆様からの成果報告ではなく、GitHub上に公開されたそれぞれのWebサイトについて私の方から Live配信にて講評・アドバイスを行う・・という形を予定しています。
  
  

Zoomを用いた質疑応答について

すでに他の授業で Zoom の利用を経験されているようですが、もし初めての方がおられたら、以下から Zoomクライアントをダウンロードして下さい。ゲストとしてミーティングに参加するだけなら、アカウント無しで利用できます。

• PCで利用する場合は、以下ホーム画面下部の ミーティング用 Zoomクライアントのダウンロードをクリック
  https://zoom.us/jp-jp/meetings.html
  参考）以下から直接ダウンロードも可能です。
  https://zoom.us/download#client_4meeting

• スマートフォンまたはタブレットの場合は、以下、AppStore、GooglePlayから専用アプリ「ZOOM CloudMeetings」をダウンロードしてくだい。
  • AppStore
  • GooglePlay

• ダウンロードしたインストーラーを起動すると、インストールが始まります。Zoom はシンプルなため、インストール自体に時間はかかりません。また、特に情報を入力する必要もありません。

• インストール済みの状態であれば、上記の会議室の案内リンクをクリックして、リンクを開く・・とすると自動的に起動して、接続可能になります。
  
  
  
  

GitHubPage での公開方法｜再確認

Portfolioサイトは、新規のリポジトリ Portfolio を作成して、以下のようなURLで公開することを前提としています。

https://（ユーザー名）.github.io/portfolio

リポジトリの作成がまだの方は、以下の手順を再確認して下さい。

リポジトリの作成

• GitHub にログインして下さい。
  
  

• 画面右上のプラスアイコン「+」をクリックし、New repository を選択。

• Repository nameという入力欄にリポジトリ名を入力します。リポジトリ名は任意ですが、 ここでは portfolio という名称にした前提で、説明します。
  
  

• Create repository をクリック
  　＞　以上でリポジトリができました。
  
  

• リポジトリ作成後は右のような画面が表示されます。表示された画面で Uploading an existing file の部分をクリックして下さい。
  
  

• ファイルをドラッグ&ドロップ できるスペースが表示されるので、手元で制作中の サイトのフォルダの中身を丸ごとアップします（フォルダそのものをアップしないでください。フォルダの中身のファイル、つまりindex.htmlとstyle.css をアップして下さい）。
  
  

• Commit changes をクリックすることで、操作が完了します。

• リポジトリが以下のような形になれば正解です。
  

ページの公開設定

• 公開設定を行います。リポジトリ画面の右端のタブ Settings をクリックします。
  
  

• ページの下の方に GitHub Pages という項目があります。見つけて下さい。

• Source の項目が None となっているので、これを main（master） に変更して save（保存）して下さい。
  ＞ 公開URL が表示されます。

• 自身の公開URLにアクセスしてみて下さい。

  https://（ユーザー名）.github.io/portfolio

  設定変更から公開まで数分かかることがあります。
  
  

• 確認できたら、上記のアドレスを特設サイトの個人ページに掲載して、相互に閲覧できるようにして下さい。
  
  
  
  

JavaScript について

• 以下のページで概要を補足説明します。
  JavaScript

• シングルページのサンプルにおける JavaScript について説明します。
  • DEMO：https://koichi-inoue.github.io/SinglePage/
  • CODE：https://github.com/koichi-inoue/SinglePage

では、この後は個別の質疑応答の時間とします。次回も同様ですが、11:00から Live配信で全体説明を行いますので、視聴をお願いします。