7
Help us understand the problem. What are the problem?

posted at

updated at

もしも美術館に自分の作品があったらを体験するクソアプリ

クソアプリアドベントカレンダー13日目担当、初参加の @umiremix です。
普段は主にフリーランスでUIデザインをしています。

いやほんとプロ化が進んでクソアプリなのにハードル上がるという謎の現象が起きてますね…?

作ったクソアプリ

unsplash_hQ3WZnY3yZ0.png

あなたの作品が"もしも美術館にあったら"を体験できるWebアプリ「もしも美術館」 です。
クソアプリか否かですが、

今年も役に立たない、世の中に貢献しないアプリとかサービス

の部分が当てはまるので胸を張ってクソアプリだと言えますが、ネタ系ではないので面白さは求めないでください🥺
面白路線も考えはしたものの、自分が作りたいものを優先しました。
命名は私が一番好きなドラえもんのひみつ道具、「もしもボックス」を参考にさせてもらいました。
オードリー・タン氏も、もしもボックスが一番好きらしいです。

作った経緯

美術館が好きという理由ももちろんあるんですが、昔絵画や写真を入れる額縁を制作する仕事(額装師・フレーマー)の存在を知り、素敵な職業だな〜と感動したことを思い出して作成しました。
主役の作品をいっそう美しく見せるために、作品をよく理解し、リスペクトして縁取る作業って尊いですね。
もともとは主催したプチハッカソンで作りかけだったアプリなのですが、アドベントカレンダーでなんとか完成させることができました。

アプリ内容

画像をアップロードするだけで額縁をつけて、勝手に作品名をつけ、自由に展示することができます。

museum.umiremix.com_works_G4aXwjcj4UvmRKvF9aqN.png

アンバーってなに…?⛩
と思ったら土壌由来の顔料アンバーを由緒とする色名のことらしいです。
こういうヘンテコな変換とかも意外と楽しめるポイントかなと思ってます。

主に使った技術

  • Nuxt
  • TypeScript
  • Vuetify…ローディング・アイコンなど
  • Firebase
    • Hosting
    • Storage…画像の保管
    • Firestore…アップロードした日付・画像サイズなど保持
    • Functions…OGP画像の作成・HTMLを返す
  • Pixi.js…額縁をつける(この程度なら普通のcanvasでも十分ですが今後アップデートで機能追加できるように)
  • Google App Script…英→日翻訳
  • Cloud Vision API…画像認識

上記の技術は全員に推しているというわけではなく、今回は短期での開発だったので個人的に慣れている技術に偏っています。
NuxtもFirebaseもわけわからないエラー出るときあるので意外なところで苦戦しましたね…。
Composition APIとか使ってみたかったんですけど開発スピード落ちそうなのでやめました。
次なにか作るときは名前が似ていて親近感湧くのでRemix使ってみたいなーと思ってます。

最後に

ここから作品アップロードできるのでぜひ使ってみてくださいね。
ではよいお年を〜〜〜🎅

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
7
Help us understand the problem. What are the problem?