iPhoneで出来るクリエイティブコーディング学習を考えた結果「p5.js」を選択した！なぜならば…
ナカジ(@cp_nakajun)です。
先日、飛行機に７時間乗る予定がありました。旅行です。
エコノミー席で爆睡するのもよかったのですが、まとまった時間をとれる機会も貴重なので有意義に使いたいなと考える訳です。
ここで普通にシンプルなのはノートPCを持ち込んで制作するなり学習するです。
ですが今回はただの家族旅行なのでノートPCとは言え、重い荷物が増えるのに抵抗を感じました。
そうなると「読書」するぐらいかなぁ～と最初は思っていたのですが、やはり技術学習は「実際に手を動かしながら」がいいので
必ず持っているiPhoneを活用することを考えました。
その結果、学習テーマは「p5.js」を選びました。
なぜならば
コードを書いてプレビューできるiOSアプリを見つけることができたからです！
しかも通信の必要が無く、ローカル環境でプレビューできます。（飛行機内は必須の条件だからね）
iPhoneもしくはiPadでp5.jsに取り組む人がどれだけいるのかわかりませんが、上記のようなかなり個人的な状況と理由から試してみたことを共有できたらと思います。
iPhoneもしくはiPadでp5.js学習
最初に今回「p5.js」を選んだ理由を改めて書きますと
- 開発環境を構築する必要がない
- 必ずしも実行にネットワーク接続の必要がない
ということなのですが、それをお伝えする為に少しだけp5.jsの説明をします。
p5.jsとは
p5.jsは、アーティスト、デザイナー、教育者、初心者、その他の誰もがアクセスできる包括的なコーディングを実現するための、クリエイティブコーディング用のJavaScriptライブラリです！
p5js.orgより
多くの場合「Processingをjavascriptに移植したもの」というように紹介されています。
Processingは総合開発環境のインストールが必要です。
対してp5.jsの開発を行う方法は
- P5.js Web Editorを使う
- ライブラリを読み込んで使う
ざっくり2通りの方法があります。
１つめのWeb Editorはブラウザから使うWEBアプリ。
２つめは先に書いたようにp5.jsは「JavaScriptライブラリ」なので簡単に言うとWEBページを作るように制作します。
テキストエディターでコーディングし、ブラウザでプレビューできる訳です。
また、ライブラリを読み込む方法として
- CDN（ネットワーク経由）
- ライブラリをダウンロード（ローカル）
の２つあります。
ライブラリをダウンロードすれば通信環境は必要ないので、今回のケース（ニーズ）の場合はこちらの方法となります。
あとはiPhoneのエディタとプレビューする方法です。
p5.jsは「Liquid Logic」で制作できる
iPhoneでp5.jsをやってみようと２～３、iPad・iPhone用テキストエディターを試してみたところ
「Liquid Logic」が良さそうだと思いますのでご紹介します。
LiquidLogic（リキッドロジック）
LiquidLogic（リキッドロジック）は、iPad/iPhoneでテキストファイル、Webページ、ソースコードを編集できるテキストエディターです。
高機能なエディターにファイラー、FTPを搭載しクラウドやサーバーのファイルを編集。
専用ブラウザーでWebページの確認やHTMLプレビューも可能。
これひとつで本格的なテキスト編集が可能です。
主な特徴としては
- 複数ファイルをタブで切り替えて表示・編集。
- 画面を分割してファイル2つを見ながら編集可能。
- Perl正規表現にも対応したリアルタイム検索。
- grep検索（指定フォルダーのファイルの中の文字列を検索）に加えgrep置換を搭載。
- HTML、XML、CSS、JavaScript、PHP、Perl、Ruby、C++など14の言語に対応。
- 言語にそってシンタックスハイライト表示。
- カーソル移動や記号、括弧、数字、全角スペースなどが入力できる移動/入力バー。
- Unicode、シフトJIS、EUCなど34種類の文字コードに対応し、文字コードや改行コードの変更が可能。
- ファイラーを搭載。複数オープンや各種ファイル操作が可能。
- SMB接続に対応。サーバーやNASデバイスのファイルを直接編集。
- FTP/FTPS/SFTP搭載。ダウンロード/アップロードやファイルの直接編集にも対応。
- ファイラーにDropbox、Google Driveのアカウントを追加可能。
- ブラウザーを搭載。Webページの表示を確認しながら編集が可能。
- ブラウザーからHTMLソースをダウンロードしてエディターで編集を実現。
- HTML、CSSの要素を階層表示して変更の確認ができる開発ツールを搭載。
- タッチ操作に加えキーボードのショートカットに対応。
と、高機能なエディターです。
このエディターを見つけたことが、iPhoneでp5.jsの学習ができるんじゃないかと思ったきめてです。
このアプリについては別途書きたいなぁと思っていますので、ここではこのくらいの紹介にしつつ
次に実際のp5.jsのコードがプレビューできていることをお見せできればと思います。
LiquidLogicでp5.jsを実行
今回、学習に「Generative Design with p5.js ― ウェブでのクリエイティブ・コーディング」購入しました。
この本を読み進めながら、LiquidLogicでサンプルを実行・確認しつつ、コードを変えてみたりしながら学習する計画です。
以下に後撮りですが、LiquidLogicでp5.jsを実行している写真と映像を載せておきます。
Generative Design with p5.js のサンプルをiPhoneのテキストエディタアプリでプレビュー pic.twitter.com/RLnLAIYQqS
— ナカジ (@cp_nakajun) November 3, 2019
まとめ
下の画像は飛行機内で撮った写真です。
これでiPhoneだけでクリエイティブコーディングで遊べる選択肢ができました。
スキマ時間のお供にもいいですね。
