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

【音声ファイル１】

授業の進め方

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

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

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

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

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

０．前回の振り返り

　　VSCodeを使い、HTMLファイルを作り、表示をした。

１．今回

１．１　フォルダーを作成し、階層構造をつくる

（１）Windowsの場合デスクトップ上で、マウスボタン右クリックする。プルダウンメニューが表示されるので、

「新規作成」「フォルダー」に行き、「フォルダー」のところで、マウスボタン左クリックする。

「新しいフォルダー」として、新規フォルダーができるので、右ボタンクリックで

「名前の変更」を選択し、フォルダ名を「IT」に変更する。さらにこの「IT」フォルダをダブルクリックして、

フォルダの中身を（エクスプローラで）見る。

「IT」フォルダーの中で、右ボタンクリックして、同様に新しいフォルダーを作成し、

「IT3」と名前を変更する。

上矢印のシングルクリックで上に、フォルダーのアイコンをダブルクリックで下に移動できます。

今回は３回目なので「IT3」というフォルダーを作りました。次回は「IT4」にします。

（２）Macの場合

　デスクトップ上で、右クリック（副ボタンクリックをこの授業では右クリックと言う）する。

「新規フォルダ」をクリックする。

　「名称未設定フォルダ」ができる。

　このフォルダを右クリックし、「名前を変更」をクリックし、

フォルダ名を「IT」に変更する。さらにこの「 IT」フォルダをダブルクリックして、 （Finderで）フォルダの中身を見る。

　「IT」フォルダの中で、右クリックして、同様に「名称未設定フォルダ」を作成し、「IT3」と名前を変更する。

　Finderで、四角を 3つに分けているボタンをクリックすると、階層構造が見える形でファイルが表示できる。

【音声ファイル２】

１．２　ニシオ・マトリックス・ｊｐ

　まず、ニシオマトリックスに入る

https://nishio.matrix.jp/

「教材」を押す

下の　

　　「「Webプログラミング練習サンプル」を表示」　を押してみる。

「「Webプログラミング練習サンプル」

その後で戻り

　　「「Webプログラミング練習サンプル」をダウンロード」を押す。ただしこの時ただ押すだけだとダウンロードファイルが

「ダウンロード」フォルダに入り、後でやっかいなことになるので

右ボタンクリックでメニューから

　「名前を付けてリンク先を保存」

　「リンク先を別名で保存」

　「リンク先のファイルを別名でダウンロード」

　「対象をファイルに保存」

などを選び、「IT3」フォルダに保存するようにする。ブラウザにより表現にブレがあります。

「「Webプログラミング練習サンプル」をダウンロード」を押す。先ほど作成したフォルダーに降りて行き、

「保存」ボタンを押して、Zipファイル（圧縮ファイル）を保存する。

左下のｚｉｐのところをクリックする

解凍ダイアログ（展開）が出てくるので。

　　「すべて展開」

を押す。（Macでは自動的に展開される場合がある）

「展開」を押す。

IT3フォルダーの下に　「web_prog」フォルダーができた。

「IT3」フォルダーを見ると、「web_prog」と「web_prog.zip」フォルダーがあるが、ｚｉｐの方は解凍する前で、解凍が終わった今となっては、ｚｉｐフォルダは不要で、

解凍が済んだ「web_prog」フォルダーを使って行きます。

「web_prog」フォルダーの中に入ります

「index.html」ファイルをダブルクリックしてみましょう。最初に見た、ホームページが表示されました。

でもＵＲＬ（インターネットのアドレス）が変ですね。

Ｃ：で始まるのはＰＣのディスクの中のフォルダとファイルを表しています。

ニシオマトリックスからの教材のダウンロードが終わりました。

この後は、ＶＳＣｏｄｅでこのｈｔｍｌファイルを編集して表示を変更してみます。

ダウンメニューから

　新規作成を

　選ぶ　【音声ファイル３】

２　VSCodeを使うVSCodeを立ち上げましょうよく分からない人は、第 2回の解説ファイルを見てください下のような画面が出てきます。

ファイル名をクリックして選び、✖を押して閉じていきます

「ようこそ」は閉じても、閉じなくても良いです

２．１　index.htmlの編集

先ほど、ダウンロードして解凍をした　「IT3」-「web.prog」-「web.prog」フォルダの中の　「index.html」ファイルをのアイコンを、VSCodeにドラッグしてみましょう。

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

日本語で書いてあるところ（全角文字）を、前回の課題と同じようにして

変更してみましょう。

変更します

できたら、「ファイル」から「保存」をしてみましょう。

次に、ブラウザで表示をします。

「web_prog」の中の「index.html」ファイルのアイコンをダブルクリックします。

【音声ファイル４】

３．スクリーンショットの撮り方

提出をWordで行う場合に、画面のスクリーンショット（キャプチャ）が必要になります。（１）Windowsの場合　撮りたいウインドウを表示しておき、キャプチャ（「Alt」キー＋「PrintSC」キー）を行い、Wordに貼り付け（Cntlキー＋Vキー）します。参考：https://faq.nec-lavie.jp/qasearch/1007/app/servlet/relatedqa?QID=017976#a01

（２）Macの場合　Macでは「command」＋「shift』＋「4」キー（スクショ）したものを、Wordに貼り付け（「command」キー＋「V」キー）を行います。参考：https://support.apple.com/ja-jp/HT201361

タイトルを付け、Wordファイルとして保存し、レポートとして提出する。【音声ファイル５】

４．課題

index.htmlのコードを、自分で書き換え index.htmlとして保存し、表示しましょう。前節で紹介した「スクリーンショットの撮り方」を参考にしてWordファイルに張り付け、レポートを作成します。

（学情システムではWordファイル以外提出ができないようです。さらに全部で５MBまでしか提出できないため、今後のファイルの提出について、工夫が必要となります。Zip型式で提出すればできるんじゃないかと思う人がいるかもしれませんが、実際には５ MBの壁を乗り越えることはできません。

なお、スマートフォンのカメラ機能で撮影した写真ファイルは、1枚で約５MB程度になることがあります。なので、「スマホで写メして送ろう」はやめておきましょう。

この場合、私のメールアドレス ynishio@kinjo-u.ac.jpにメールで添付すれば、５MB以上送ることができます。）

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

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

Wordファイルの最後に、感想・コメントを 3行以上付けてください。

提出例

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