LoginSignup
4

More than 3 years have passed since last update.

人生を要約するサービス "Digest-of-Life" -5秒でエモい画像を作れるようにするProject-

Last updated at Posted at 2019-12-17

お詫び

アドベントカレンダーの記事と同時にリリースする予定で作成していましたが、
バックエンドで使用するAPIのproduction Licenceが間に合わず、リリースできませんでした...
来月くらいにリリースする予定ですので、もしご興味を持っていただけたならば、ストックをお願いします。
(記事の更新で通知させていただきます。:bow_tone1:

作ったもの(というか作っているもの)

d-o-life6.gif

"Digest-of-Life"

人生を要約するサービスを作ってます。
提供するものは、大切にしたい言葉を、きれいな画像とともに保存するサービスです。
こっそり記録していってもいいし、その場で画像に合成して共有してもいい

文字を画像にしたいとき、きれいな画像で言葉をドーンと伝えたいとき等にご利用ください。

動機(なぜ作ろうと思ったか)

digest-of-life.003.jpeg.jpg

伊坂幸太郎著「モダンタイムス」の作中のセリフですが、昔読んでからずーっと頭の片隅に残ってまして、、、
でも、個人的には哲学は人生の要約だと信じているので、それを形にできたらなと思い、
今回、個人の哲学を記録するサービスを作るに至りました。

アプリケーション構成

digest-of-life.008.jpeg

ほぼすべてFirebaseで作成しました。
APIデータベースログイン機能javascriptちょこっと書くだけで実装できるFirebase先生素晴らしい!

ホスティングサービス: Firebase Hosting

  • これがないとWebサービスが動かない。
  • ローカルのエミュレータで動作確認したあと、コマンド1つでデプロイできる。

API: Firebase Functions

  • 面倒なサーバーサイドのAPIをjavascriptで数行書いてデプロイするだけで動く。
  • 今回は、Unsplush apiapi keyを秘匿するために使用。

データベース: Firebase Realtime Database

  • メソッド1つ書くだけで、clientからDBにCRUDできる。すごい。。。
  • 今回は、ユーザーが保存した言葉や写真のデータを永続化するために使用。

ユーザー管理: Google アカウント

  • Firebase側にGoogle ログインをアプリに統合する機能が用意されていたので。
  • ユーザーを管理せずに、ユーザーを識別できるって素晴らしい。

画像サービス: Unsplush api

  • 今回の目玉、めちゃきれいな画像が大量にあるサイトのAPI
  • APIを利用すると、細かい検索機能が使える。
  • 普通のdevelopアカウントだと50requests/hour、ガイドラインに沿ってることを示せれば、Production版api keyがもらえる

Unsplash_CaseStudy.png

要素技術

使用した技術要素と検証に使ったサンプルコードを書きます。

vuetify なるべくCSS書かないマン

20180730160701.jpg
- https://vuetifyjs.com/ja/
- <v-XXXX>のような独自のコンポーネントを使用して、独自のクラスでflex margin padding等を適用します。
- 今回の見た目はほぼvuetifyのコンポーネントの見た目そのままになってます。
- モーダルページングトースト等がすごく楽になります。

html2canvas Webページの一部を画像にする

image.png
- https://html2canvas.hertzen.com/
- 「WebページをレンダリングしてCanvas上に描画する」処理を行います。

  • 2種類のやり方のうち後者を採用しています。

①読み込んだ要素をtoDataURLにして<img>srcに埋め込むタイプ
(こちらの記事より: [JavaScript] JSだけでスクリーンショットを撮ってダウンロードもする方法(Qiita))

html
<div id="target">
<!-- ここがキャプチャされる -->
</div>
<!-- 下に生成した画像が出る -->
<img src="" id="result" />
javascript

html2canvas(document.getElementById("target"),{
  onrendered: function(canvas){
  //imgタグのsrcの中に、html2canvasがレンダリングした画像を指定する。
  var imgData = canvas.toDataURL();
  document.getElementById("result").src = imgData;
 }
});

②読み込んだ要素を指定した場所の子要素にcanvasを挿入する

html
<div id="target">
<!-- ここがキャプチャされる -->
</div>

<div id="result">
<!-- ここに生成した画像が出る -->
</div>
javascript
html2canvas(document.querySelector("#target"))
  .then(function(canvas) {
    var result = document.querySelector("#result");
    result.innerHTML = "";
    result.appendChild(canvas);
}

ハマったところ

vuetify<v-text-field>vue.jsv-model.lazy が使えない

イベントリスナーを使用して手動で行う必要があります
- https://github.com/vuetifyjs/vuetify/issues/1810

  • 使えないようです。「入力が完了したら自動で検索」を実装したかったのですが、できませんでした。
  • エンターキーで検索に切り替えました。
tmp.vue
<v-text-field v-model="serchWords" @keydown.enter="execSearch(serchWords)"/>

html2canvasで、外部から読み込んだ画像が表示されない

デフォルトだとCORSで引っかかって、描画できないみたいです。

attribute: allowTaint
type: boolean
default: false
description: Whether to allow cross-origin images to taint the canvas

javascript
tml2canvas(document.querySelector("#target"), {
+        letterRendering: 0,
+        useCORS: true,
+        allowTaint: true
      }).then(function(canvas) {
        var result = document.querySelector("#result");
        result.innerHTML = "";
        result.appendChild(canvas);
      });

Firebase Funtionsで外部通信ができない

Billing account not configured. External network is not accessible and quotas are severely limited. Configure billing account to remove these restrictions

firebase emulatorsのAPIの向き先がクラウドになる。

$ firebase emulators:start

上記コマンドで HostingFunctionsを起動した状態で、Hosting上のvue.jsからAPI(Functions)を叩くと、クラウドのFunctionsを見に行ってしまい、CROSエラーになる。(404とかではなくて)

  • emulatorではHostingだけを上げて、Functionsはデプロイしてテストするようにしました。(functions.https.onCall()の方を使ってます。)
  • 見逃してるだけできっと設定があると思います。

今後の展望

  • UnsplushからProduction api keyがいただけたらサービスとしてリリースしようと思います。(1月予定)
  • 欲しい機能とかあれば気軽にコメントください!!喜びます:blush:
v1.0予定機能
- googleでログインでき、「個人の言葉」を美しい画像ともに保存できる
- 画像と言葉の組み合わせで、「5秒でエモい画像が作れる」
- 画像のランダム生成で大喜利
- Twitterでの共有

最後に

ここまで、お読みいいただきありがとうございます!
最後に、開発途中で特に意味もなく作った画像を添えておきます。
image.png

おまけ:宣伝用Key Note

digest-of-life.001.jpeg.jpg
digest-of-life.002.jpeg.jpg
digest-of-life.003.jpeg.jpg
digest-of-life.004.jpeg.jpg
digest-of-life.005.jpeg.jpg
digest-of-life.006.jpeg.jpg

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4