差分

このページの2つのバージョン間の差分を表示します。

--- lecture:design_with_prototyping:p5.js編:02.基本的な操作 [2021/02/27 18:23] – 作成 baba
+++ lecture:design_with_prototyping:p5.js編:02.基本的な操作 [2023/06/06 10:46] (現在) – [基本的な操作] baba
@@ 行 1: / 行 1: @@
 ====== 基本的な操作 ======
+まずは、下記動画を一度みて、基本的な操作方法を把握してください。
 <html>
 <div style="position: relative; padding-bottom: 69.76744186046511%; height: 0;"><iframe src="https://www.loom.com/embed/43f8cf772deb4aff8966dcbebc51e2a3" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>
 </html>
+===== ショートカット一覧 =====
+以下のショートカットは最低限使えるようになってください。特にMacの人はカーソル移動でCtrlキーを利用したショートカットが今後とっても役に立つのでまだこのショートカットを未習得のかたは必ずこのタイミングで体になじませていきましょう。
+^ Windows       ^ macOS      ^ 概要              ^
+| Ctrl+Enter        | ⌘+Enter        | スケッチを実行する       |
+| Ctrl+S        | ⌘+S        | 保存する            |
+| Shift+Tab        | Shift+Tab        | 自動整形（オートインデント）  |
+| Ctrl+/        | ⌘+/        | コメントイン / アウト    |
+| --            | Ctrl+a     | カーソルを行頭に移動      |
+| --            | Ctrl+e     | カーソルを行末に移動      |
+| --            | Ctrl+n     | カーソルを一行下へ移動     |
+| --            | Crtl+p     | カーソルを一行上へ移動     |
+| --            | Ctrl+f     | カーソルを右方向にすすめる   |
+| --            | Ctrl+b     | カーソルを左方向にすすめる   |
+| --            | Ctrl+d     | Delete          |
+| --            | Ctrl+h     | Backspace       |
+===== コメント =====
+プログラミングでコメントとは、プログラムの記述の説明のことです。下記動画で確認してみましょう。
+コメントアウト：プログラム実行内で無視してほしい箇所を指定すること
+コメントイン：予めコメントアウトしていたコメントをプログラム内に戻すこと
+<html>
+<div style="position: relative; padding-bottom: 69.76744186046511%; height: 0;"><iframe src="https://www.loom.com/embed/30bd4b9c0d454324b40af4e57ebb365c" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>
+</html>
+===== Debug =====
+ブラウザ動作の為、基本的にはjavascripにおけるデバッグ方法に準拠することになります。ちゃんとdebugする場合は、
+ChromeではDevToolsが用意されているのでこちらを使ってください。使い方は以下のリンクを参照のこと
+  * https://developers.google.com/web/tools/chrome-devtools/javascript?hl=ja
+  * p5.js公式のデバッグに関するページ：https://p5js.org/learn/debugging.html
+この授業では基本的には print や console.log といった文字列を出力する関数を利用して適時簡単なデバッグしていく方法で進めていきます。以下の動画で確認してください。
+<html>
+<div style="position: relative; padding-bottom: 69.76744186046511%; height: 0;"><iframe src="https://www.loom.com/embed/4eaee3b5dab4424ab9621e8058b7a337" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>
+</html>