P5js web editorで、クリエイティブコーディングを！

Editor's Notes

• #2: こんにちは。5分なのでいきなり本題です。鈴木と申します。P5.jsをご存知の方には新しい情報はありませんが、何それ？なんて読むの？という方に、ぜひ一度試していただきたくLTを志願しました。言語の話ではありません。P5jsウェブエディタ、ツールの話です。Processingなら知ってるよ、という方。ほとんど同じですが、こちらに移行されることを絶対おすすめします。
• #3: まず、クリエイティブコーディング？なにそれ？というところからですが、Google画像検索の結果をご覧ください。
• #4: 「パフューム　デジタル」で検索した結果です。パフュームのダンスのモーションデータに合わせて、光の立方体や、細かな破片、パーティクルを動かしたりするものが見つかります。★★★★★左下の検索結果は、processingのプロジェクトで、プログラミング初心者向けのサイトです。
• #5: お次は「インタラクティブアート」で検索した結果です。チームラボが有名ですが、セントレアのフライトオブドリームズや美術館のイベントなど、最近、あちこちで目にします。私は、イオン茶屋店の通路で、前を通ると自分が壁に映り、頭にティアラが載ったりする仕掛けがあるのが好きです。
• #6: プログラムはどうなってるのかなと考えたりもします。
• #7: 楽しい、わくわくするプログラミングです。
• #8: プログラミング教育、本校では、生徒が自らやりたい、学びたい、もっとやりたい、と思う題材を選びたいです。生徒層によっては別のアプローチもあるとは思います。
• #9: 本校では、ここ数年、２年次にProcessingを使ったテキストプログラミングを行なってきました。１年次のフローチャートからの橋渡しとして、昨年度県の発表会で発表したコードを読み解く活動も入れています。これもかなりおすすめです。★★★★★そして、今年度から、Processingに代わり、p5js、processingのjavascript版を使っています。
• #10: アルゴリズムだけならビジュアル系言語や教育用言語でよい、という説もあり、それは全くその通りだと思っています。ただ、私は実用的な言語こだわりたい。理由は「ステップアップしてる感」と「社会でも通用するという自信」です
• #11: 言語の種類だけ考えるのであれば、個人的にはPythonがいいと思っています。でも、本校の実情に合うツールが見つかりません。
• #12: 本校の場合、言語の種類よりもツールの使いやすさの方が重要です。使いにくいツールでは、生徒が投げ出しかねません。
• #13: 昨年度までprocessingを使っていて、とても気に入っていたのですが、唯一、初期設定が面倒なために人さまにお勧めできませんでした。一方、p5.js ウェブエディタは、インストール不要でweb上で動作し、非常に軽いです。ただし、IEでは一部機能が使えないのでChromeをお勧めします。
• #14: では、実際のエディタをみてください。★★★★★最低限のコードは最初から入っており、数行の追加でいろいろできます。★★★★★右側に結果が表示されます★★★★★エラー表示もわかりやすいです。
• #15: インターラクティブなプログラムがコード１行の追加でできます。
• #16: これはコード２行の追加です。
• #17: For文で作られたサンプルコードに、★★★★★もう１つFor文を入れ子にしてみたり、★★★★★色を入れてみたり。ここまでで３行の追加です。
• #18: 3D表示もコード2行です。これをマウスで動かすのもすぐできます。
• #19: 最後に、このエディタの秘められた可能性をお見せして終わりたいと思います。
• #20: そもそも、このツールは、左側でjavascriptを編集して右側でブラウズできる、というものなわけですが、ちょっとびっくりなことがあります。
• #21: 矢印あたりに注目してください。なんと、エディタをhtmlやcssに切り替えて編集でき、結果も確認できるんです。つまり、この右半分はjavascriptとhtmlとcssで作られたwebページなわけです。HTMLの授業と絡めると、もっと面白そうです。
• #22: テキストはすべてslideshareで公開しています。本校では生徒に配布はせず、毎時貸し出ししています。Slideshare内ではなぜか検索にひっかからないので、Google検索で英語で検索してみてください。プレゼンテーションではなくドキュメントの分類の方に入れてあります。ご清聴ありがとうございました。
• #23: 時間がもし余った場合のおまけですが、p5という単語の由来です。