「かみあそび」の全体像を説明しますね。
どんなアプリか
写真とマスキングテープ、ステッカー、手書き風の文字を組み合わせて、紙のコラージュ(スクラップブッキング)遊びがブラウザ上でできるアプリです。机の上で紙を切り貼りする感覚を再現していて、作った作品はPNG画像として保存できます。
使える素材と機能
しゃしん — 端末から写真をアップロードすると、白いふち付きのポラロイド風になって台紙に貼られます。複数枚まとめて選択できます。
マスキングテープ — 6色(からし色・サーモンピンク・くすみグリーンなど)×4柄(無地・ストライプ・ドット・チェック)から選んで貼れます。端がちぎれたような形と半透明の質感で、本物のマステらしく見えるようにしています。
レトロステッカー — クリームソーダ、珈琲カップ、さくらんぼ、デイジー、切手、GOOD!バッジ、にじ、ちょうちょ、たいようの9種類。純喫茶・昭和レトロな配色の手描き風イラストです。
らくがき文字 — 入力したテキストを、鉛筆の落書きのような日本語フォント「Yomogi」で貼れます。文字色は5色から選択。
だいし — 和紙、クラフト紙、コルクボード、ほうがん紙、リネン、紺の画用紙の6種類。紙の繊維やざらつきといった質感まで再現しています。
貼ったものはすべて、ドラッグで移動、上のハンドル「↻」で回転、右下の「⤡」で拡大縮小ができます。選択中は画面下にバーが出て、重ね順の変更(手前へ/奥へ)、複製、削除(剥がす)ができます。仕上がったら右上の「画像で保存」でPNGとしてダウンロード。「ぜんぶ剥がす」で最初からやり直せます。スマホのタッチ操作にも対応しています。
技術的な仕組み
HTMLファイル1枚だけで完結する静的なウェブアプリで、サーバー側のプログラムやデータベースは使っていません。中身はこうなっています。
- 編集画面は、素材ひとつひとつをHTML要素として台紙の上に絶対配置し、位置・回転・大きさをJavaScriptで管理しています。Pointer Eventsを使っているので、マウスでも指でも同じように操作できます。
- ステッカーと台紙の紙質感はSVGで作っています。ステッカーは描き起こしたベクターイラストなので拡大しても粗くならず、紙のざらつきはSVGフィルター(ノイズ生成)で表現しています。画像ファイルを別途用意していないので、1ファイルのまま完結します。
- 「画像で保存」を押すと、画面上の配置をCanvasに描き直して高解像度(2倍)のPNGを生成します。台紙の質感、テープのちぎれた端や柄、フォントまで、見た目そのままに書き出されます。
- 写真の処理はすべて利用者のブラウザ内で行われ、どこかのサーバーに送信されることはありません。プライバシー面でも安心です。
外部に依存しているのはフォント(Google Fonts)の読み込みだけなので、XServerのような静的ファイルを置けるサーバーにアップロードすればそのまま公開できます。
現在のバージョンではこんな感じ。
ステッカーがしょぼいのは画像を使ってないからなんよな。
ペーパーコラージュみたいなことができたらいいなぁと思って簡易的に作ってみたんだけど、質感とか素材にこだわりたいなら大規模な改変が必要じゃな。
独自ドメインにアップして運用できてる。
いつまで残すか分からんけど、気になる人は見てみて。
https://naokiti3.com/paper-collage.html
デリートボタンで消せなかったりUIが見にくかったり、色々ツッコミどころはあるけど改善しようと思えばいくらでも改善できるから面白い。
レトロな何か作りたいんよなぁ。好きだから。
ていうか、これデータ31kbなんだけど、こんなんでも動くんじゃな。笑
スマホの写真1枚より余裕で軽い。
これでウェブアプリとWordPressプラグインは普通に作れるようになった。
あと、WordPressのページ内に埋め込んで動くタイプのやつか。
Macのアプリも作れそうなんよね〜。
実用的なものを作ろうと考え中。
自分が何をどこまで作れるか把握できたら、新しい道に進めるかな。
そんな簡単じゃないかな。
やりたいことを具現化できるのってめちゃくちゃおもしろいよ。
ゲームより自由度高いから、ゲームより面白いわな。笑
この記事のアイキャッチ作成にはこれ使った。
