WGGの活動log

都内でゲーム開発だったりVRだったりをしてるかもしれないエンジニアです． WGGは「ワグ」と読みます

リプライで p5.js のプログラムを実行する TwitterBot を Raspberry Pi で作った話

Processing p5.js プログラミング Twitter

Twitter Bot を作った話

ふと，↓こんなことを思いつきました

このツイートのうち，後者の方の仕組みでちょっと TwitterBot を作ったので，その仕組とかの話です

作ったbot

f:id:wgg00sh:20200725170613p:plain https://twitter.com/p5_bot

bot の遊び方

この bot が呟いてる， #p5js と付いているツイートを探します

このツイートに， $1 $2 のように $ から始まる文字があるので，その個数分数値を入力してリプライを送ります このツイートの場合， 3つですね

すると，元のプログラムから $1 $2 ... と書かれていた部分が，リプライで送った値に置き換わってプログラムが実行されます

動画の場合

元となるプログラムが書かれたツイートに， // #p5js mov と書かれている場合があります その場合は，実行結果を動画で出力してくれます

この bot を作った経緯

僕自身， #つぶやきProcessing が結構好きで，色んな方が作られた作品を見させていただいているのですが， #つぶやきProcessing に限らずジェネラティブアートでは，わずかなパラメータの違いで見栄えが大きく変わります

元として投稿された作品は色々試行錯誤した結果良いと思ったパラメータを選んでいると思うのですが，Twitter に投稿されるものとしては， 投稿者なりの1つの解 しか見せられないです

そのプログラムにはもっと可能性があるかもしれないのに，たった1つの面しか見られないのは勿体ないと思って， 人のプログラムを簡単に改変して，結果が見られる bot を作りたいと思いました (OpenProcessing など， ソースコードの共有ができるサービスもありますが，Twitter上で実質的なコーディングから実行結果の確認まで完結するのは結構大きな利点だと思います)

他人に改変してもらう力

自分でジェネラティブアートを作っていると， 自分らしさ ，みたいなものができてくると思います． しかし，このbotはそんな自分らしさから，ほんの一部を他人に任せることができます

bot 稼働後から受け取ったリプライの中には，元のプログラムの規則性を破壊するような仕組みを埋め込んだ人もおり，自分で見ていて何度もびっくりさせられました

f:id:wgg00sh:20200725173820p:plain

bot の仕組み (ここから先は技術的な話です)

今回作ったTwitterBot は，すべてこちら↓でソースコードを公開しています

github.com

そのため，こちらのリポジトリをcloneして，環境構築だけすれば他のアカウントでもこの bot を動かせるようになっています

また，botのプログラム自体は Raspberry Pi に入れたUbunt上で動かしています．最低限の構成をした小型のコンピュータです (もうちょっといいやり方あるだろうけど，別の用途でも手に入れてたRasPiを使いたかったので)

最新版の Raspberry Pi 4 でも一番安いモデルなら ¥5000 程で購入できます

www.raspberrypi.org

Twitter API Key の取得

こちらのサイトでTwitter社に， bot 作りたいからAPI Key 発行してくださいとお願いします developer.twitter.com

(ここの工程が一番面倒でした... 慣れない英文書くの苦労する...)

環境構築

README ちょっと更新できていないのですが， nodejs npm chromium-browser imagemagik (convert コマンド) があれば動くはずです

( convert 使うのあんまり気に入ってないので npm モジュールで完結させたいところ...)

あとは .env_example に倣って .env ファイルを作成し，API Key などを入力して， npm run start を実行すると bot が起動します

bot の実装解説

bot を実行すると， p5-start twitter-start と2つのタスクが実行されます

前者は，p5.js のプログラムを走らせることができるローカルサーバの立ち上げで， 後者は Twitter API を実行するプログラムの立ち上げです

p5-start

"p5-start": "browser-sync start --server --no-open --files='./p5js/script.js'",

以前自分のブログの他の記事で書いた方法で，p5.js のプログラムを実行するローカルサーバを起動します ( browser-sync を使用)

./p5js/script.js は，後者のタスクでユーザのリプライを受けて作られる p5.js のソースコードです

wgg.hatenablog.jp

twitter-start

"twitter-start": "node ./twitter.js",

ここから，メインの nodejs のプログラムです

ファイル構成

bot のプログラムは，以下の構成で成り立っています

  • twitter.js
  • p5js/
    • modify.js
    • movie.js
    • p5save.js
    • p5save-movie.js

twitter.js

TwitterBot としての機能を制御する部分です

一定時間ごとに，自身に向けられたリプライを取得して，まだ返信していないツイートに対してリプライの返信などを行います

昔は User Stream API というのが使用できたので，リプライに反応して即座に返したりすることもできたのですが，今は個人レベルではできないので，他のAPIで代用しています

TwitterAPI の実行回数制限を越えないように， 1分ごと に実行されます．また，最新のリプライを取得すると，1分前の実行でも取得したリプライが再度拾われたりする問題があるのですが， tweet_id を 保存しておくことで同じツイートに2回反応することを回避しています

( リポジトリの tweet_data/ 内に保存されるので bot を運用していると少しずつ膨らんでいきます)

リプライを受け取ると， modify.js によってソースコードを生成して p5save.js または p5save-movie.js で実行結果を取得します

p5save.js / p5save-movie.js

この2つは， puppeteer というライブラリを使い，ブラウザを操作しています

ヘッドレスブラウザを起動し，先に p5-start で立てておいた p5.js が実行されるローカルサーバのページを開くことで，その実行結果の取得まで行うことができます

github.com

p5save-movie.js の場合は少し特殊で，リプライによって作られた script.js とは別に， movie.js というプログラムも合わせて実行します

これは p5.js のプログラムの実行速度を固定したり，フレームごとにスクリーンショットを取るなどの処理を行っています

(実行環境によって動作速度に差が出ることが予測されるので)

これで取得された画像・動画を， twitter.js で受け取ってリプライに添付して返信することで，この Bot の機能が実現されています

終わりに

こんな感じで， TwitterBot を作ってみました

まだまだ不完全で，機能不足な点もありますが少しずつ拡張できたらなあ～といった状態です (割と忙しくてこれの開発に取り組めてない)

一応今後の機能拡張としては， 第三者がこのbotに改変元となるプログラムを提供できるようにする 機能とか追加したいなーって思ってます

自分で作った #つぶやきProcessing の作品のURLを，この bot にリプライなり DM なりで送ると， bot がそのソースコードをツイートしてくれて，他の人がそれを改変できるようになる... みたいなのを想定しています

(ただ自由に呟かせられることになるのでリスクとかが結構ありそうで着手できていない...)

あと， TwitterBot 作ったのは初めてではないのですが，身内向けじゃなく，こうして誰かに使ってもらうために作ってみたのは初めてで，実際に触ってくれる人が居てすごい嬉しかったです