情報処理基礎2023

スケジュールなど

HTML・CSSの基礎（演習１）

Processingとの連携（参考）

• [Official｜p5.js]
• [GitHub｜processing.js]

Sublime Text（エディタ）

今回の演習では、エディタとして「Sublime Text」を使用します（WINでもMACでも可）。
こちらからダウンロードしてください。

• [Sublime Text]

---

インストールの仕方がわからない場合、（例えば）以下を参照してください。

• [Windows10 – Sublime Text 3 のダウンロードとインストール]
• [Mac – Sublime Text 3 のダウンロードとインストール]

---

「HTML-CSS-JS Prettify」プラグインを使うと、「cmd + shift + H」のショートカットでコードの整形をしてくれます。ただし、事前に「Node.js」がインストールされている必要があります。

• [SublimeText3でHTML・CSS・JSを整形するプラグイン]
• [Node.jsのダウンロード]

参考となるページ

• 要素：HTML5要素一覧
• 色：カラーチャート
• CSS：CSSの属性一覧
• フォント：font-familyプロパティで指定できるフォント名, 有名サイトのフォントの設定
• ページ内リンク
• 箇条書きの記号を変える

イントロダクション

授業のすすめかた

• 初回の授業のみZoomでライブ配信による授業をします。それ以降は、各人のPC環境で、小鷹が作成するYoutube資料を教材として、演習を進めてもらいます。
• 基本的に一つの演習を二周で完了するサイクルで進みます。一周目に講義とともに最後に課題を出します。課題は、通常２週間後の授業までに提出を求めますので、二周目の授業では課題のための学習に使ってください。なお二周目の段階で、課題の一部の解答を解説する動画を挙げる予定でいます。
• オンデマンド用の動画は可能な限り、授業日の1日前には確認できるようにします。必ずしも、金曜日の対応する時間に受講する必要はありません。

PC環境・受講場所について

• PC環境はWinでもMacでも大丈夫ですが、個人の環境が不調であれば、工場のPCを使ってもらって構いません。
• 小鷹はMacを使用して講義をすすめます。

課題提出の方法

• ファイルリクエストで課題提出が求められた際には、名前入力の際に、冒頭に学籍番号をつけてください（例：2350xx_kenrikodaka）。dropboxにログインしている場合は、dropboxのアカウントで設定された名前が使われてしまいますので、一旦ログアウトしてもらえると助かります。

事前準備

• 各人所有のPCにあらかじめ最新版のProcessing（4.2）をダウンロードしておいてください。WinでもMacでも問題ありませんが、授業資料はMacベースですすめていきます。チップがM1、M2のPCの場合（比較的最近のもの）、「Apple Silicon」のバージョンを選択してください。それ以前のものは「Intel 64-bit」です。

• [ProcessingのDOWNLOAD]

• 僕からの授業の案内などは、（LIVE CAMPUSではなく）DISCORDを通して行います。また、基本的なコミュニケーション（質問を含む）などもDISCORDを通して行うことを想定しています。運用方法については、授業をすすめながら徐々に確定させていきます。
  (+) DISCORDをインストールしていない場合、まずインストールをしましょう。
  • [公式]｜DISCORDのインストール

  (+) DISCORDインストール後に、この授業のサーバー「情報処理基礎2023」に登録してください。

  • [招待コード]｜Invite friend to 情報処理基礎2023

  (+) ニックネームを「学籍番号 名前」に変更してください。

  • [LINK]｜Discord(ディスコード)名前をサーバーごとに変える簡単な方法

関連資料

• [AMAZON] – Processingをはじめよう 第2版 (Make: PROJECTS)
• [PDF] – Keyboard（Mac）の対応表
• [WEB] – e-typing
• [YOUTUBE] – Boids are confused / Scraps are scrapped again
• [WEB] – imd.nagoya
  

  ICC キッズ・プログラム 2021「チューンナップ　じぶんをととのえる」オンライン展示は，一部コンテンツをのぞき，アーカイヴ公開しています．

  小鷹研究室（名古屋市立大学）
  《東京即錯2021》
  ↓https://t.co/npw7Rasc4I

  *スマートフォン，タブレット環境では体験できるコンテンツが限定されます． pic.twitter.com/eiFUY54KF0

  — NTT ICC (@NTTICC) August 31, 2021

• 卒業制作

  カーソルの動きを工夫して没入感を高めるサイトを制作しました。PCではもちろん、スマホでもカーソルを操作するという特殊なインターフェイスを実装しています。
  正直まだ修正やブラッシュアップしたい点が山盛りですが、一旦区切りとします。

  ※Chrome推奨ですhttps://t.co/w6B6oqPCTW pic.twitter.com/MJ5pvBhT6f

  — かまぼこ｜web (@bokoko33) March 2, 2021

授業でやること（教員用メモ）

• 授業のすすめかた
• Processingのダウンロード
• PC環境のアンケート（WIN or MAC）
• 受講場所のアンケート（学内、自宅）
• Processingでできること（最近の学生の作品）
• ProcessingとWEB [p5js]
• 課題提出の練習
• タイピングの練習
• 個別相談