芸工　情報処理　第４回　2020年１０月１４日　西尾

【音声ファイル１】

授業の進め方

　遠隔授業であり、授業で必要な教材は学情システムから入り、［北］情報処理の「レポート」の欄からたど

り、指示にあるニシオマトリックスのページから、参照してください。

https://nishio.matrix.jp/kyozai/mei.html質問やコメントなどは下記の図を参考にしてメールで送ってください。

課題レポート提出は学情システムの「レポート」から「第 X回　情報処理　レポート」の欄にアップしてください。

情報処理で学習する内容　3次元CGを扱えるWebプログラミング　JavaScript言語で３DCGを扱う Three.jsを使い、３DCGの基礎を学ぶ。授業の前半はHTML、CSS、JavaScriptでＷｅｂプログラミング（マルチプラットフォーム）を行うための基礎を学習する。後半では３次元 CGのプリミティブ図形、オブジェクト表面の表現、ライトなどの３次元 CGの技術を学びながら作品を作成して行く。

０．前回の振り返り

　ニシオマトリックスの「教材」の「ステップ０」から「Webプログラミング練習用サンプル」をダウンロードした。

さらにｚｉｐファイルを解凍し、デスクトップ上の「IT」「IT3」フォルダを作成し「web_prog」フォルダの中に、ｈｔｍｌファイル、ｃｓｓフォルダ、imagesフォルダを置いた。VSCodeを使い、ｈｔｍｌファイルを編集し、表示をした。

１．今回

１．１　「IT3」フォルダ下のファイルを編集する　前回作成した「IT3」フォルダ下のファイルを編集して表示をします。　ここで、１つ訂正があります。

　ファイルの階層構造について、操作の都合上、Macの場合と、Windowsの場合異なります。

（１）Macの場合のファイルの階層構造　先週説明したままです。

（２）Windowsの場合のファイルの階層構造　先週の説明と異なり、「web_prog」が 2重になり、「web_prog」の下に「web_prog」が出来てしまいます。

機能的には何も問題はありませんが、気を付けて使ってもらえばOKです。

【音声ファイル２】

１．２　「IT3」フォルダ内の探検　前項でデスクトップ上に先週作成した「IT」「IT3」フォルダの階層構造について述べました。実際にデスクトップ画面から、フォルダのアイコンをダブルクリックして、「IT」フォルダの中の「IT3」フォルダの中に入ってみましょう。さらに「web_prog」フォルダに入って行きます。（Windowsの場合前項の事情により、2度「web_prog」フォルダに入る操作が発生します）「web_prog」フォルダの表示は

のようです。

表示が異なり、ｈｔｍｌファイルであることが表示されない場合、以下のように、「web_prog」ダイアログの中で、マウスの右ボタンクリックにより、プルダウンメニューが表示された状態で、「表示」―「詳細」と

選べば、詳細表示が見えます。もちろん「大アイコン」などを選べば、表示が変わります。いろいろ試してみ

てください。

「index.html」ファイルをダブルクリックしてみましょう。

先週編集したホームページが表示されます。

ここで、上のURL（インターネットのアドレス）のところが「C:」で始まっていることを確認しましょう。PCのディスク内のファイルを表示していることを示しています。よくある「http://www.tbc.co.jp/」などは、インターネットで外のホームページを参照していることを表しています。（これは TBCのホームページです）

【音声ファイル３】

１．３　VSCodeによりファイルを編集する　VSCodeを立ち上げます。先週、編集していた画面が出てきます。

このまま編集を続けても良いのですが、練習のため、一旦 マークを押してファイル表示をやめます。✖

「IT3」-「web.prog」-「web.prog」フォルダの中の　「index.html」ファイルをのアイコンを、VSCodeにドラッグしてみましょう。

「index.html」ファイルの中身が表示され、編集可能となりました。

　

「css」フォルダをダブルクリックして中に入る　

VSCodeに「index.html」をドラッグして開いた時と同じように、「style.css」ファイルをドラッグする

「style.css」ファイルの中身が表示される

「index.html」をダブルクリックして表示

【音声ファイル４】

１．４　VSCodeによりｃｓｓファイルを編集する　VSCodeの画面を表示します

何だか記号のようなものばかりで、分かりにくいですね。

でも、大丈夫、全体がよくわからなくても、自分の必要なところだけ理解できればOKです。

以下の図のように、「header」のバックグラウンドカラーを変更します。チョット微妙な操作ですが、「rgb(」の後ろの数字あたりに、マウスポインタを持っていきます。運がいいと、パレットが表示されるので、色をクリックして取ってみてください。

色が青から変化しましたね。ファイルの保存を行い、「index.html」を再表示してみましょう。

リロードして更新をすると、ヘッダーの色が変わったのを確認できます。

VSCodeの画面で「style.css」ファイルの他の色指定のところを、同じ要領でパレットにより、色を変化させ、保存、再表示を行い確認する作業を数回行ってください。

頭ではなく、感覚と手で覚えましょう。

【音声ファイル５】

３．課題

ｃｓｓファイル「style.css」を編集し、色を変えた「index.html」を表示しましょうスクリーンショットを撮り（キャプチャする）、Wordファイルに貼り付けて、Wordファイルの最初に「芸工情報処理第４回 2020年 10月 14日」、2行目に「学籍番号　氏名」を入れてください。

「index.html」ファイルも VSCodeで編集して、前回と同様に、学籍番号　名前を入れ、本文を少しアレンジしてください。

最後に、感想・コメントを 3行程度でよいので書いてください。

課題レポート提出は学情システムの「レポート」から「第 X回　情報処理　レポート」の欄にアップしてください。

アップするWordファイルのファイル名は「情報処理第X回　学籍番号名前」の形式で、下の提出例を参考にしてインターネットで学情システムに提出してください。

提出例

　Wordファイル　ファイル名「芸工情報処理第４回 123456西尾吉男.docx」