【ポケットの中のp5.js】Liquid Logicでいつでも p5.js の開発環境をを持ち歩こう！
ナカジ(@cp_nakajun)です。
先日、iPhoneで出来るクリエイティブコーディング学習を考えてみた結果
p5.jsが良さそうだ
という記事を書きました。
その際にコーディング環境として紹介した「Liquid Logic」というiOSアプリについてもう少し書こうと思います。
Liquid Logic（リキッドロジック）
先の記事と同じですが、まずは簡単に「Liquid Logic」の概略を載せておきます。
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の要素を階層表示して変更の確認ができる開発ツールを搭載。
- タッチ操作に加えキーボードのショートカットに対応。
という感じです。
ネットの評判を見ていると「githubに対応していない」ことから大規模開発は難しそう（向いてない）という声はありますが
そこを補って余りある「無料アプリでこれだけの高機能」ということで全体的には高評価というところです。
WEBサイトの修正とかなら余裕の活躍だろうし
普段の環境への慣れなどでめんどくさく感じるかもしれませんが、ちょっとしたLPやWEBサイトなら全然作れる気がします。
できれば、iPhoneじゃなくてiPadがいいけどね。
p5.js開発環境としての「LiquidLogic」
LiquidLogicの用途としてはかなり限定的ですがp5.jsで遊ぶが目的です。
「ポケットの中のp5.js」
iPhoneとかiPadで作曲したい！みたいなノリ
モバイルDAWって本気でやると画面が小さいから使い勝手悪いけどなぜかワクワクしません？？
p5.jsの開発環境について
先の記事にも書きましたが、p5.jsの開発環境を作るには
- P5.js Web Editorを使う
- ライブラリを読み込んで使う
の大きく分けて2つの方法があり
さらにライブラリを読み込んで使う方法にも「読み込み方」に2通りあって
- CDN（ネットワーク経由）
- ライブラリをダウンロード（ローカル）
という方法があります。
テーマが「ポケットの中のp5.js」と僕が勝手に決めてることもあり
「ライブラリを読み込んで使う」方法がおすすめだと思いますので、この方法について書いていきます。
iPhoneも通信できるのでCDNでもいいとは思いますが、大したことなくても通信容量を気にしたりするのもアレなんで…
LiquidLogicにp5.js開発環境を構築
まずは以下のページからテンプレートとライブラリをダウンロードします。
僕はとりあえず何も考えずに「p5.js complete」をダウンロードしました。
ZIPファイルが落ちてきます。
iPhoneだけで完結させる方法は試してません…すいません…
解凍するとフォルダーの中は以下のようになってます。
この「empty-example」フォルダーの中の「sketch.js」にプログラムを記述します。
テンプレートとライブラリを移動
iPhoneやiPadのLiquidLogicにダウンロードしたテンプレートとライブラリを持っていきたいわけです。
CDNでライブラリを利用する場合はLiquidLogicで直接ファイルを作って記述するだけなので
ちょっとめんどくさいですが通信費とどこでもp5.jsを実現する為に頑張りましょう！
ライブラリは一度持って行ってしまえば、新しいアイデアを試すときは「empty-example」フォルダーを複製してリネームするだけなのでこの手間は最初だけです。
LiquidLogicに持っていく流れは
- DropBoxやFTPサーバーにフォルダーを置く
- LiquidLogicでアクセスしてダウンロード
です。
ファイルを移動したりする機能が充実しているのはまず便利ですね。
- ファイラーを搭載。複数オープンや各種ファイル操作が可能。
- SMB接続に対応。サーバーやNASデバイスのファイルを直接編集。
- FTP/FTPS/SFTP搭載。ダウンロード/アップロードやファイルの直接編集にも対応。
- ファイラーにDropbox、Google Driveのアカウントを追加可能。
コーディングとプレビュー
以下の特徴が「ポケットの中のp5.js」の実現にとても貢献してると思います。
- カーソル移動や記号、括弧、数字、全角スペースなどが入力できる移動/入力バー。
- 複数ファイルをタブで切り替えて表示・編集。
- ファイラーを搭載。複数オープンや各種ファイル操作が可能。
- ブラウザーを搭載。Webページの表示を確認しながら編集が可能。
- タッチ操作に加えキーボードのショートカットに対応。
最初はBluetoothキーボードを別に用意していたんですが、ソフトウェアキーボードの上部に出る
入力バーがとても便利なことに気がつき「とりあえずiPhoneだけでいいや」という結論になりました。
以下にいくつかスクリーンショットを掲載するので雰囲気を感じてもらえればと思います。
