nishio.matrix.jp · web...
TRANSCRIPT
![Page 1: nishio.matrix.jp · Web viewWordファイルの最後に、感想・コメントを3行以上付けてください。提出例 Wordファイル ファイル名「芸工情報処理第3回0123456西尾吉男.docx」](https://reader036.vdocument.in/reader036/viewer/2022071610/614a0b9912c9616cbc6928ad/html5/thumbnails/1.jpg)
芸工 情報処理 第3回 2020年10月9日 西尾
【音声ファイル1】
授業の進め方
遠隔授業であり、授業で必要な教材は学情システムから入り、[北]情報処理の「レポート」の欄からたど
り、指示にあるニシオマトリックスのページから、参照してください。
https://nishio.matrix.jp/kyozai/mei.html質問やコメントなどは下記の図を参考にしてメールで送ってください。
課題レポート提出は学情システムの「レポート」から「第 X回 情報処理 レポート」の欄にアップしてください。
情報処理で学習する内容 3次元CGを扱えるWebプログラミング JavaScript言語で3DCGを扱う Three.jsを使い、3DCGの基礎を学ぶ。授業の前半はHTML、CSS、JavaScriptでWebプログラミング(マルチプラットフォーム)を行うための基礎を学習する。後半では3次元 CGのプリミティブ図形、オブジェクト表面の表現、ライトなどの3次元 CGの技術を学びながら作品を作成して行く。
0.前回の振り返り
VSCodeを使い、HTMLファイルを作り、表示をした。
![Page 2: nishio.matrix.jp · Web viewWordファイルの最後に、感想・コメントを3行以上付けてください。提出例 Wordファイル ファイル名「芸工情報処理第3回0123456西尾吉男.docx」](https://reader036.vdocument.in/reader036/viewer/2022071610/614a0b9912c9616cbc6928ad/html5/thumbnails/2.jpg)
1.今回
1.1 フォルダーを作成し、階層構造をつくる
(1)Windowsの場合デスクトップ上で、マウスボタン右クリックする。プルダウンメニューが表示されるので、
「新規作成」「フォルダー」に行き、「フォルダー」のところで、マウスボタン左クリックする。
「新しいフォルダー」として、新規フォルダーができるので、右ボタンクリックで
「名前の変更」を選択し、フォルダ名を「IT」に変更する。さらにこの「IT」フォルダをダブルクリックして、
フォルダの中身を(エクスプローラで)見る。
「IT」フォルダーの中で、右ボタンクリックして、同様に新しいフォルダーを作成し、
「IT3」と名前を変更する。
![Page 3: nishio.matrix.jp · Web viewWordファイルの最後に、感想・コメントを3行以上付けてください。提出例 Wordファイル ファイル名「芸工情報処理第3回0123456西尾吉男.docx」](https://reader036.vdocument.in/reader036/viewer/2022071610/614a0b9912c9616cbc6928ad/html5/thumbnails/3.jpg)
上矢印のシングルクリックで上に、フォルダーのアイコンをダブルクリックで下に移動できます。
![Page 4: nishio.matrix.jp · Web viewWordファイルの最後に、感想・コメントを3行以上付けてください。提出例 Wordファイル ファイル名「芸工情報処理第3回0123456西尾吉男.docx」](https://reader036.vdocument.in/reader036/viewer/2022071610/614a0b9912c9616cbc6928ad/html5/thumbnails/4.jpg)
今回は3回目なので「IT3」というフォルダーを作りました。次回は「IT4」にします。
(2)Macの場合
![Page 5: nishio.matrix.jp · Web viewWordファイルの最後に、感想・コメントを3行以上付けてください。提出例 Wordファイル ファイル名「芸工情報処理第3回0123456西尾吉男.docx」](https://reader036.vdocument.in/reader036/viewer/2022071610/614a0b9912c9616cbc6928ad/html5/thumbnails/5.jpg)
デスクトップ上で、右クリック(副ボタンクリックをこの授業では右クリックと言う)する。
「新規フォルダ」をクリックする。
「名称未設定フォルダ」ができる。
このフォルダを右クリックし、「名前を変更」をクリックし、
フォルダ名を「IT」に変更する。さらにこの「 IT」フォルダをダブルクリックして、 (Finderで)フォルダの中身を見る。
![Page 6: nishio.matrix.jp · Web viewWordファイルの最後に、感想・コメントを3行以上付けてください。提出例 Wordファイル ファイル名「芸工情報処理第3回0123456西尾吉男.docx」](https://reader036.vdocument.in/reader036/viewer/2022071610/614a0b9912c9616cbc6928ad/html5/thumbnails/6.jpg)
「IT」フォルダの中で、右クリックして、同様に「名称未設定フォルダ」を作成し、「IT3」と名前を変更する。
![Page 7: nishio.matrix.jp · Web viewWordファイルの最後に、感想・コメントを3行以上付けてください。提出例 Wordファイル ファイル名「芸工情報処理第3回0123456西尾吉男.docx」](https://reader036.vdocument.in/reader036/viewer/2022071610/614a0b9912c9616cbc6928ad/html5/thumbnails/7.jpg)
Finderで、四角を 3つに分けているボタンをクリックすると、階層構造が見える形でファイルが表示できる。
![Page 8: nishio.matrix.jp · Web viewWordファイルの最後に、感想・コメントを3行以上付けてください。提出例 Wordファイル ファイル名「芸工情報処理第3回0123456西尾吉男.docx」](https://reader036.vdocument.in/reader036/viewer/2022071610/614a0b9912c9616cbc6928ad/html5/thumbnails/8.jpg)
【音声ファイル2】
1.2 ニシオ・マトリックス・jp
まず、ニシオマトリックスに入る
https://nishio.matrix.jp/
「教材」を押す
下の
「「Webプログラミング練習サンプル」を表示」 を押してみる。
![Page 9: nishio.matrix.jp · Web viewWordファイルの最後に、感想・コメントを3行以上付けてください。提出例 Wordファイル ファイル名「芸工情報処理第3回0123456西尾吉男.docx」](https://reader036.vdocument.in/reader036/viewer/2022071610/614a0b9912c9616cbc6928ad/html5/thumbnails/9.jpg)
「「Webプログラミング練習サンプル」
![Page 10: nishio.matrix.jp · Web viewWordファイルの最後に、感想・コメントを3行以上付けてください。提出例 Wordファイル ファイル名「芸工情報処理第3回0123456西尾吉男.docx」](https://reader036.vdocument.in/reader036/viewer/2022071610/614a0b9912c9616cbc6928ad/html5/thumbnails/10.jpg)
その後で戻り
「「Webプログラミング練習サンプル」をダウンロード」を押す。ただしこの時ただ押すだけだとダウンロードファイルが
「ダウンロード」フォルダに入り、後でやっかいなことになるので
右ボタンクリックでメニューから
「名前を付けてリンク先を保存」
「リンク先を別名で保存」
「リンク先のファイルを別名でダウンロード」
「対象をファイルに保存」
などを選び、「IT3」フォルダに保存するようにする。ブラウザにより表現にブレがあります。
![Page 11: nishio.matrix.jp · Web viewWordファイルの最後に、感想・コメントを3行以上付けてください。提出例 Wordファイル ファイル名「芸工情報処理第3回0123456西尾吉男.docx」](https://reader036.vdocument.in/reader036/viewer/2022071610/614a0b9912c9616cbc6928ad/html5/thumbnails/11.jpg)
「「Webプログラミング練習サンプル」をダウンロード」を押す。先ほど作成したフォルダーに降りて行き、
「保存」ボタンを押して、Zipファイル(圧縮ファイル)を保存する。
左下のzipのところをクリックする
解凍ダイアログ(展開)が出てくるので。
「すべて展開」
を押す。(Macでは自動的に展開される場合がある)
![Page 12: nishio.matrix.jp · Web viewWordファイルの最後に、感想・コメントを3行以上付けてください。提出例 Wordファイル ファイル名「芸工情報処理第3回0123456西尾吉男.docx」](https://reader036.vdocument.in/reader036/viewer/2022071610/614a0b9912c9616cbc6928ad/html5/thumbnails/12.jpg)
「展開」を押す。
IT3フォルダーの下に 「web_prog」フォルダーができた。
「IT3」フォルダーを見ると、「web_prog」と「web_prog.zip」フォルダーがあるが、zipの方は解凍する前で、解凍が終わった今となっては、zipフォルダは不要で、
解凍が済んだ「web_prog」フォルダーを使って行きます。
![Page 13: nishio.matrix.jp · Web viewWordファイルの最後に、感想・コメントを3行以上付けてください。提出例 Wordファイル ファイル名「芸工情報処理第3回0123456西尾吉男.docx」](https://reader036.vdocument.in/reader036/viewer/2022071610/614a0b9912c9616cbc6928ad/html5/thumbnails/13.jpg)
「web_prog」フォルダーの中に入ります
「index.html」ファイルをダブルクリックしてみましょう。最初に見た、ホームページが表示されました。
でもURL(インターネットのアドレス)が変ですね。
C:で始まるのはPCのディスクの中のフォルダとファイルを表しています。
![Page 14: nishio.matrix.jp · Web viewWordファイルの最後に、感想・コメントを3行以上付けてください。提出例 Wordファイル ファイル名「芸工情報処理第3回0123456西尾吉男.docx」](https://reader036.vdocument.in/reader036/viewer/2022071610/614a0b9912c9616cbc6928ad/html5/thumbnails/14.jpg)
ニシオマトリックスからの教材のダウンロードが終わりました。
この後は、VSCodeでこのhtmlファイルを編集して表示を変更してみます。
![Page 15: nishio.matrix.jp · Web viewWordファイルの最後に、感想・コメントを3行以上付けてください。提出例 Wordファイル ファイル名「芸工情報処理第3回0123456西尾吉男.docx」](https://reader036.vdocument.in/reader036/viewer/2022071610/614a0b9912c9616cbc6928ad/html5/thumbnails/15.jpg)
ダウンメニューから
新規作成を
選ぶ 【音声ファイル3】
2 VSCodeを使うVSCodeを立ち上げましょうよく分からない人は、第 2回の解説ファイルを見てください下のような画面が出てきます。
![Page 16: nishio.matrix.jp · Web viewWordファイルの最後に、感想・コメントを3行以上付けてください。提出例 Wordファイル ファイル名「芸工情報処理第3回0123456西尾吉男.docx」](https://reader036.vdocument.in/reader036/viewer/2022071610/614a0b9912c9616cbc6928ad/html5/thumbnails/16.jpg)
ファイル名をクリックして選び、✖を押して閉じていきます
「ようこそ」は閉じても、閉じなくても良いです
2.1 index.htmlの編集
先ほど、ダウンロードして解凍をした 「IT3」-「web.prog」-「web.prog」フォルダの中の 「index.html」ファイルをのアイコンを、VSCodeにドラッグしてみましょう。
![Page 17: nishio.matrix.jp · Web viewWordファイルの最後に、感想・コメントを3行以上付けてください。提出例 Wordファイル ファイル名「芸工情報処理第3回0123456西尾吉男.docx」](https://reader036.vdocument.in/reader036/viewer/2022071610/614a0b9912c9616cbc6928ad/html5/thumbnails/17.jpg)
「index.html」ファイルの中身が表示され、編集可能となりました。
日本語で書いてあるところ(全角文字)を、前回の課題と同じようにして
変更してみましょう。
![Page 18: nishio.matrix.jp · Web viewWordファイルの最後に、感想・コメントを3行以上付けてください。提出例 Wordファイル ファイル名「芸工情報処理第3回0123456西尾吉男.docx」](https://reader036.vdocument.in/reader036/viewer/2022071610/614a0b9912c9616cbc6928ad/html5/thumbnails/18.jpg)
変更します
できたら、「ファイル」から「保存」をしてみましょう。
次に、ブラウザで表示をします。
「web_prog」の中の「index.html」ファイルのアイコンをダブルクリックします。
![Page 19: nishio.matrix.jp · Web viewWordファイルの最後に、感想・コメントを3行以上付けてください。提出例 Wordファイル ファイル名「芸工情報処理第3回0123456西尾吉男.docx」](https://reader036.vdocument.in/reader036/viewer/2022071610/614a0b9912c9616cbc6928ad/html5/thumbnails/19.jpg)
【音声ファイル4】
3.スクリーンショットの撮り方
![Page 20: nishio.matrix.jp · Web viewWordファイルの最後に、感想・コメントを3行以上付けてください。提出例 Wordファイル ファイル名「芸工情報処理第3回0123456西尾吉男.docx」](https://reader036.vdocument.in/reader036/viewer/2022071610/614a0b9912c9616cbc6928ad/html5/thumbnails/20.jpg)
提出をWordで行う場合に、画面のスクリーンショット(キャプチャ)が必要になります。(1)Windowsの場合 撮りたいウインドウを表示しておき、キャプチャ(「Alt」キー+「PrintSC」キー)を行い、Wordに貼り付け(Cntlキー+Vキー)します。参考:https://faq.nec-lavie.jp/qasearch/1007/app/servlet/relatedqa?QID=017976#a01
(2)Macの場合 Macでは「command」+「shift』+「4」キー(スクショ)したものを、Wordに貼り付け(「command」キー+「V」キー)を行います。参考:https://support.apple.com/ja-jp/HT201361
タイトルを付け、Wordファイルとして保存し、レポートとして提出する。【音声ファイル5】
4.課題
![Page 21: nishio.matrix.jp · Web viewWordファイルの最後に、感想・コメントを3行以上付けてください。提出例 Wordファイル ファイル名「芸工情報処理第3回0123456西尾吉男.docx」](https://reader036.vdocument.in/reader036/viewer/2022071610/614a0b9912c9616cbc6928ad/html5/thumbnails/21.jpg)
index.htmlのコードを、自分で書き換え index.htmlとして保存し、表示しましょう。前節で紹介した「スクリーンショットの撮り方」を参考にしてWordファイルに張り付け、レポートを作成します。
(学情システムではWordファイル以外提出ができないようです。さらに全部で5MBまでしか提出できないため、今後のファイルの提出について、工夫が必要となります。Zip型式で提出すればできるんじゃないかと思う人がいるかもしれませんが、実際には5 MBの壁を乗り越えることはできません。
なお、スマートフォンのカメラ機能で撮影した写真ファイルは、1枚で約5MB程度になることがあります。なので、「スマホで写メして送ろう」はやめておきましょう。
この場合、私のメールアドレス [email protected]にメールで添付すれば、5MB以上送ることができます。)
課題レポート提出は学情システムの「レポート」から「第 X回 情報処理 レポート」の欄にアップしてください。
アップするWordファイルのファイル名は「第X回情報処理 学籍番号名前」の形式で、下の提出例を参考にしてインターネットで学情システムに提出してください。
Wordファイルの最後に、感想・コメントを 3行以上付けてください。
提出例
Wordファイル ファイル名「芸工情報処理第 3回 0123456西尾吉男.docx」