フリート芸術を後世に残すべくWebアプリを作った【Fleets Forever!!】

今年もやって参りました クソアプリ Advent Calendar 2021！8日目を担当します @okumura_daiki です。今年で参加4年目になるクソアプリストです。よろしくお願いします。

▼記事を読むのが面倒な人向け、今年のクソアプリはこちら！

フリート画像作成Webアプリ 「Fleets Forever!!」

▼過去の作品も見てね。

はじめに

Twitter のフリート機能をご存知でしょうか？ Instagram のストーリーズに似た機能で、24時間で消えるコンテンツ(動画やテキストなど)を投稿できる機能です。24時間で消えるため本当にどうでもいいことを気軽に投稿できて気に入っていました。しかし、そんなお気に入りの機能が2021年8月に終了してしまったのです。さよなら、フリート。

まぁ、なくなったらなくなったで、不便というわけでもないので別によかったのですが、ある日「もう一度フリート投稿をしたい！」と思う出来事がありました。それは普段通り Twitter を見ていた時、終了したはずのフリート機能を使って面白い画像を投稿している人を見かけたときです。

なんだこれは・・・もしかしてこれは・・・芸術なのでは・・・！？！？

日本発祥の「絵文字」、人類初の世界の共通語になったと言っても過言ではない「Emoji」を、実に巧みに組み合わせた、今までに見たことのない新しい表現手法・・・。指先の繊細なタッチが織りなす、緻密に調整された美しい配置は、まさに職人技・・・。テキストとの融合で表現された独特の世界観・・・。日々の投稿に対するフォロワーの反応が作品にさらなる変化をもたらしている・・・。これは、2020年代のソーシャル・ネットワークが成熟しつつある今の時代に生まれるべくして生まれた、新しいデジタルアートに違いない・・・。

僕は思いました、『この素晴らしいフリート芸術が、日本の、いや世界共通の伝統文化として、未来永劫、万劫末代まで受け継がれて欲しい』と。

しかし、フリート機能は終了してしまったため、私たちはもうフリート作品を作ることができません。この職人の方はアプリをアップデートせずに使い続けていたため、フリート創作ができたのだそうです。

スマホひとつで誰もが作品を投稿でき、芸術を身近に感じられる・・・。芸術を通して、生活が、心が豊かになっていく・・・。なんて美しい機能だったんだ、フリートよ・・・。儲けにはならなかったかもしれませんが、人類は大切なツールを失ったかもしれません。

その上、最近になって悲しいツイートを見かけました。

なんと・・・、日本に残された最後のフリート職人のフリート機能が消えてしまったのです。

このままではフリート芸術は歴史に残ることなく人類の記憶から消えてしまう・・・このままフリート芸術の伝統を途絶えさせるわけにはいかない・・・。僕はフリート芸術を復興させるべく、Webアプリを作ろうと心に決めたのでした。

(ちなみに僕が作らずともInstagramのストーリーズ機能を使えば似たような画像が作れたらしい。え・・・)

作ったもの

フリートのような画像を作れるWebアプリ、『Fleets Forever!!』(フリートよ永遠に!!) です。（スマホでもPCでも使えます）

(Marvel 好きにしか分からない話ですが、映画アベンジャーズ/インフィニティ・ウォーの最終決戦の地ワカンダで、国王ティ・チャラ（ブラックパンサー）が戦闘部隊の先頭に立ち、「Wakanda Forever!!」(この地は滅びるかもしれないが、ワカンダの魂は永遠に生き続けるぞ的な意味だと勝手に解釈)と叫ぶシーンがとてもかっこいいのでそこから取りました。オタクか？)

フリート機能は無くなってしまったけど、フリート芸術家たちの熱い想いはまだ消えていません！今こそこのアプリを使ってフリート芸術を復活させましょう！

作った画像を保存して、Twitterに投稿できます。もちろんただの画像投稿なので24時間で消えることはありません。フリートフォーエバー！

※クソアプリにつき、ほとんどの機能が未実装です。白色のテキストと絵文字しか配置できません。背景も変えられませんし、もちろん画像や動画やツイートを挿入することもできません。二本指での拡大縮小などもできず、非常に使いづらいです。Androidに対応してるかわかりません。ご了承ください。（Twitterで反響をもらえたら機能を追加する可能性はあるかもしれません）

全力でネタ記事をかけたので満足しました。ここから技術的なことを書きたいと思います。

使った主な技術

ライブラリなど

• React
• Next.js - React開発におけるフレームワーク。今回のアプリはページ遷移がないので create-react-app でもよかったのですが、諸々の設定が圧倒的に楽なので最近はなんでも Next.js で作り始めることが多いです。好き。
• Tailwind CSS - 近年流行りの utility-first な CSS フレームワーク。UIライブラリを使わない場合でも、CSS設計に悩むことなく爆速開発ができます。React などコンポーネントベースの開発と相性がいいです。好き。
• Konva.js - HTML5 canvas を扱いやすくするライブラリ。初めて使いましたが使いやすい。好きになりそう。

ホスティング

• Vercel - Next.js を開発してるVercelが運営。Next.js アプリをデプロイするのが楽。

Konva.js が便利

Konva.js とは、HTML5 2d canvas を扱いやすくしたライブラリで、React や Vue 用のコンポーネントも用意されています。今回 canvas を React で簡単に扱えるライブラリがないか探してみたところ見つけました。

Canvas API でできることは大体出来そうで、他にも

• ドラッグやタッチ操作での要素の移動や変形
• 要素の zIndex の並び替え
• フィルターやアニメーション
• 画像の挿入
• ペンと消しゴムでお絵描き
• Undo / Redo
• 画像として出力

といった便利な機能も比較的楽に作れます。

今回のWebアプリはテキストの配置と移動と変形と並び替えだけだったので、
↓ここに載ってるドキュメントとデモを組み合わるだけでで特に技術的に書くことがありません。

↓ぜひDEMOページを見て canvas の面白さを感じてください。きっと canvas で何か作りたくなるはず。

今回使ってみて非常に便利だったので、おすすめです。また使いたい。

Web Share API のファイル付き共有を使ってみた

Web Share API とはネイティブの共有メカニズムを呼ぶことのできる機能です。JavaScript で navigator.share() を使うと、例えば iPhone Safari だと下記画像のように、 iOS の共有モーダルを開くことができ、AirDropで送ったり、メールやLINEアプリで送ったり、Twitterアプリのツイート画面に貼り付けたりなど、ネイティブの共有機能を利用することができます。

(後で画像貼る)

以前から Web Share API は使えましたが、 iOS 14 までの Safari ではファイル共有ができず、タイトルやURLしかツイート画面に渡せませんでした。iOS 15 からは Safari でファイル共有が可能になり、ツイート画面に画像を添付させることが可能になったのです。(その他のブラウザーの互換性)

今回の画像作成アプリにはもってこいだと思い、導入してみました。共有先のアプリによっては画像以外のファイルも共有できるのでWebブラウザでできることが広がりそうです。

canvas から出力した画像共有の実装は、こちらの記事がわかりやすかったです。毎年クソアプリを作っている @de_teiu_tkg さんの記事です。とても助かりました。

上記に加えて、navigator.share() が使えるかどうかを boolean で返してくれる navigator.canShare() も iOS 15 から新たに使えるようになったので使用しています。

おわりに

例年は記事を書くのが面倒なのですが、今年は楽しく書けました。クソアプリネタが直近まで思いつかず間に合うかギリギリでしたが、無事に作り終えたので安心して年を越えられそうです。良いお年を。