差分

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

--- lecture:design_with_prototyping:01.開発環境:p5.js [2021/02/27 17:24] – baba
+++ lecture:design_with_prototyping:p5.js編:01.開発環境 [2021/03/11 01:53] – [もっと詳しく] baba
@@ 行 3: / 行 3: @@
 このページでは学習環境としてp5.jsを利用する場合の導入案内ページになります。p5.jsはブラウザ動作のため、アプリケーションのインストールは必要ありません。利用するブラウザ環境についてですが、基本的にはGoogle Chrome, Safari, Firefox等のモダンなブラウザであれば動作しますが、授業では問題解決を容易にするため、<wrap hi>必ずGoogle Chromeを利用してください。</wrap>
+年8月31日にProcessing Foundationからp5.js Web Editorがアナウンスされたことで，Processingを利用した場合と比較して、環境構築の手間が大きく省かれました．端的に言えば，ブラウザで動作するProcessing IDEになります．試しに下記リンクに飛んでみてください．
+  * https://editor.p5js.org/tetsuakibaba/sketches/8ygaoJ6Aj
-===== Windows10 =====
+モンドリアンのコンポジションが確認できたと思います，これは同時に編集もできます．使い方は下記動画を参照してください．ログインせずとも利用できますが，ファイルの保存やshare等の機能を利用するにはアカウントを作成し，ログインしておくとよいでしょう．
-==== インストール手順 ====
+{{youtube>x1rJJRVTpAI?large}}
-Processingにはインストーラーパッケージはないので，ダウンロード後下記画像のようにダウンロードしたファイルを右クリックして，すべて展開を選択し，解凍したフォルダをデスクトップ等に移動してください．その後実行してProcessingが起動，exampleを開いて実行できるところまでを動作確認とします．そこまでの様子を動画にまとめましたので，以下ご参照ください．Processingを起動する際にデスクトップからの起動では気持ちが悪いと感じる方は，Program Filesフォルダ等に移動し，Processing実行ファイルのショートカットをご自身の好きなところに作成すると良いでしょう．
-{{ :lecture:design_with_prototyping:install_processing_windows.mp4 |}}
-===== macOS =====
+===== もっと詳しく =====
-==== インストール手順 ====
+上記動画を参照すればある程度の事が把握できますが、p5.jsは javascript, html, css をセットで考える必用があるため、ある程度ウェブコーディングの経験がないと最初は混乱してしまうでしょう。ただしこのあたりに慣れてしまえば、html, cssをGUI的に利用することができるとても汎用性の高いウェブアプリケーションを作成することができるようになります。このあたりの基礎のはなしを以下のページにまとめていますので、00.目次から08.jsの文法基礎までを目を通しておきましょう。
-macOSも同様に，Processingではインストーラーパッケージがないので，ダウンロード後（自動）展開されたProcessingをデスクトップに置くなどしてください．デスクトップでは邪魔だというかたは，applicationフォルダに入れておけばランチャー起動もできるので便利になります．一通りの流れは下記の動画を参照してください．
-{{ :lecture:design_with_prototyping:install_processing_macos.mp4 |}}
-===== 各種機能の概要説明 =====
-プロセッシングを立ち上げたところから動画で説明していきます．まずは最初に立ち上げた画面のOSごとの違いを説明しておきます．
-講義の中では馬場はmacOS環境を利用して進めて行きますが，WindowsとMacとでは機能はほぼ一緒ですが，メニューの位置が異なります．
-下記画像をご連絡ください．
-<WRAP group>
-<WRAP half column>
-=== Windows ===
-メニューがウィンドウ内に含まれている．
-{{ :lecture:design_with_prototyping:スクリーンショット_2020-04-14_20.45.48.png?direct |多段組み}}
-</WRAP>
-<WRAP half column>
-=== macOS ===
-左のWindowsとはことなり，画面内にメニューがない．メニューは画面上部（メニューバー）に表示されている．画像をクリックすると拡大します．
-{{ :lecture:design_with_prototyping:スクリーンショット_2020-04-14_20.56.19.png?direct |}}
-</WRAP>
-</WRAP>
-----
-[[lecture:design_with_prototyping:02.基本的な操作|基本的な操作]]へつづく