思い出の写真をカクテルにできるサービスをリリースしました!

起業
スポンサーリンク

※おもいでカクテルは、2019年をもちましてクローズしたため、現在は利用することができません。ご了承ください。

 

こんにちは。むらってぃー(@canon1ky)です!

先日起業仲間と一緒に、思い出の写真をカクテルにできるサービス「おもいでカクテル」をリリースしたので、サービスのおすすめポイントと開発に使った技術をまとめようと思います!

おもいでカクテルとは?

ページに好きな写真を入力すると、その写真を表すカクテルを教えてくれるサービスです。
思い出の写真をカクテルに変え、その場で嗜む。

そんな新しいお酒の楽しみ方をモチーフにしました!

https://cocktail.edgenium.com/

 

例えば、僕のプロフィール写真である下記の画像、

こちらをカクテルに変えてみましょう。

 

おもいでカクテルはページを開くと、まずこんな感じの画面になっています。

ここに画像を入れます。

 

画像を入れると、

こんな感じで、解析ボタンが登場するので、解析します!

 

すると、数秒後に解析結果が登場。
僕のプロフィール画像は「ジンパック」というカクテルに変換されました!

写真の雰囲気にあっていてなんだか良い感じですね。

 

 

ちなみにこちらの解析結果はツイッターにシェアとかもできちゃいます!

 

こんな人たちにオススメ!

おもいでカクテルは、例えば以下のようなシーンでオススメです。

  • 気になる子とお酒を飲みに行って、話のきっかけ作りに
  • 友達との飲み会での話題作りに
  • 行きつけのバーで、いつもと違ったお酒の嗜み方をしたい
  • カクテルは好きだけど、何を飲むかがなかなか決められない

 

その日の気分に合わせた思い出の写真をぜひお酒に変えてみてください!

きっと「今日はこのお酒の気分だったかも」となるでしょう。

 

使用した技術

実装を行うにあたって、以下の技術を使用しました。

  • javascript
  • Vue.js
  • Vibrant.js

写真の解析から出力まで、全てjavascriptとそのライブラリを使用して行なっており、フロントエンドのみで完結しています。

 

Vibrant.jsって何?

javascript、Vue.jsは知っている人も多いでしょう!

ところで、Vibrant.jsってあまり聞かないですよね。

 

 

こちらは、「写真または画像から、目立った色を抽出する」ライブラリです。

Vibrant
Extract prominent colors from an image.

 

 

例えば、以下の画像では赤色が抽出されます。(公式サイトより引用)

確かにこの写真ですと、赤色が特徴的ですね!

少ないコードで色を抽出でき、非常に簡単に実装できます。

 

中はどんな処理になってるの?

以下の流れで入力から出力までを行なっています!

  1. 画面から入力される画像を受け取る
  2. 受け取った画像にVibrant.jsを使い、特徴的な色を抜き出す
  3. あらかじめ用意しておいたそれぞれのカクテルデータの色と、Vibrant.jsをかけた色の類似度を算出する
  4. 最も類似度が近い色のカクテルを決定する
  5. カクテルの写真、名前、説明文を出力

 

全てのカクテルのRGB値と、画像の特徴色のRGB値を比べて最も近い色のカクテルを出すという処理をメインで行なっています。

このようにして、思い出の写真をカクテルに変えるシステムを実現しました!

 

まとめ

リリースした「おもいでカクテル」のおすすめポイントと技術をまとめました。
僕も友達と飲みに行った時に、話のネタに困ったら使おうかなと思います!(お酒は飲めないですが…笑)

 

気になった方はぜひ使ってみてください!

https://cocktail.edgenium.com/

 

タイトルとURLをコピーしました