Processing.js でスライドショーができるブログパーツを作りました 〜SUZURI オススメカタログ〜 : だらっと学習帳
上記の記事を書いてから2年、WebとProcessingの関係のトレンドはProcessing.jsからp5.jsに移り変わりました。
p5.jsは技術的にも非常に興味深く、また今後の伸びしろもありそうということで、
ブログパーツもProcessing.jsからp5.jsへ移行することにしました。
当初はぱぱぱーっとできるだろうと考えていたのですが、これが想像以上の激闘となりました。
そもそもこれはなに？
SUZURIというオリジナルグッズを制作・販売できるサービスにショップを持っているのですが、
そのショップに登録している商品の画像とリンクをスライドショーするブログパーツです。
何もしない状態にしておくと、一定時間ごとに自動で商品画像が切り替わります。
商品画像上にマウスカーソルを持っていくと商品名が表示されます。
また、同じく表示される左右矢印をクリックすることで自由にスライドを操作できます。
商品画像をクリックすると表示中の商品の販売ページにジャンプします。
ソースコード
github にあげました。ファイルの内容についてはREADMEをご覧ください。
以下、スケッチ部分のJSコードのみ掲載します。
悩まされたポイント
JSONファイルと画像の扱い
今回、スライドショー用の画像をp5.jsのスケッチで扱うにあたって、
ファイル名などの情報をJSONファイルにまとめて利用することにしました。
しかし、JSONと画像ファイルの両方をpreloadする必要があるのに上手くいかない…と悩まされました。
状況説明のコードなどをここに掲載すると長くなるので、解決方法も含め以下の記事にまとめましたので詳しくはこちらをご覧ください。
p5.js でJSONファイルも画像も両方preloadする : だらっと学習帳
ボタンとスケッチの位置調整
スライドショーの操作のために表示する左右矢印をボタンとして実装することにしました。
ボタンの実装には p5.dom.js を利用しています。
しかし、ボタンとテキストの位置を上下中央揃えにする方法がわからず、思いの外難航してしまいました。
結果的にはボタンのサイズを適切に指定してやることで解決することができました。
こちらも以下にまとめましたのでよろしければご覧ください。
p5.js でボタンの上下中央揃え : だらっと学習帳
また、ボタンのサイズ調整や背景を透明にするなどの処理にCSSを(間接的に？)利用しました。
こちらも以下にまとめたのでどうぞご覧ください。
p5.js と p5.dom.js (とcssパワー) でボタンのデザインまとめ : だらっと学習帳
ライブドアブログにp5.jsとp5.dom.jsと画像ファイルを利用したスケッチを埋め込むということ
旧ブログパーツは画像ファイルをライブドアブログの画像管理システム上にアップロードしたものを利用していたのですが、
新ブログパーツはその方法が使用できなかったため、
p5.js ライブラリやJSONファイルと一緒にファイル管理システム上にアップロードしました。
また、ブログパーツは「フリーエリア(ブログパーツの種類でhtmlが記述できるもの)」として入れ込んでいます。
このフリーエリアに記述するにあたって、p5.jsスケッチをインスタンスモードで実装しました。
インスタンスモードにおけるcanvasのコンテナの指定方法はいくつかあるようで、今回は以下のページの一番上の記述方法を参考にしました。
Instance Container - p5.js | examples
ブログパーツエリアの見出しとの兼ね合いで、いったんブログパーツ自体の設定を「見出しを付けない」とし、
その後エリアの大きさなどをCSSで手を入れつつ自分でブログパーツ内に見出しのためのdivを追記する形で実装しています。
この時、スケッチ自体のpositionも指定してやることで表示位置を調整しています。
このposition調整をボタンにも適用してやることで、ボタンの位置も調整しました。
この回りくどい方法をとらないとスケッチやボタンが意図した場所に表示されませんでした…
移行を進めるにあたって
作業のタスク整理やメモをJootoで行いました。
Jootoは日頃から愛用しているのですが、進行度の可視化付きチェックリストやメモをまとめて管理できるので本当に便利です。
画像がわかりにくくて申し訳ないのですが、今回の作業では以下のようにチェックリストでタスクを管理しつつ、メモやアイデア、参考リンクをコメント欄に残すというように利用していました。
チェックリストもタスクの種類ごとに分けています。
個人で行う作業の忘備録やまとめツールとしてかなりオススメです(そしてなんと複数人利用もできるようです！)。
総括
毎日ちまちまと作業したり調べ物したり…と進めていたら、結構な時間がかかってしまいました。
しかしその分、p5.jsやp5.dom.jsについての知識が増えて良い収穫が多かったなと思っています！
特にp5.dom.jsは便利ですが調整が必要な部分もあるということで、今後も上手に利用していきたいと思いました。
宣伝
SUZURIに登録している商品はProcessing製グラフィックを使用しています！
グラフィックはジェネラティブなものからアートなもの、数学的なものやギークなものまで幅広く展開！
商品を通して個性的なファッションとスタイルをご提案致します。
ブログパーツ上では前回はiPhoneケース、今回はフルグラフィックTシャツを紹介していますが、
他にも様々なグッズを扱っていますのでぜひ一度のぞいてみてくださいね！
レオナ ( reona396 ) のオリジナルアイテムズ ∞ SUZURI（スズリ）
