若手エンジニアがFirebase(FireStore + Cloud Functions + FireStorage) + Vue.jsでシンプルなWebアプリをつくってみた

Yoki(@enyyokii)と申します。

渋谷のIT企業でアプリエンジニアしている25才です。
仕事では iOS、Android、Webフロントエンドなど色々しており、週末は勉強を兼ねて個人開発したりしています。

今回は大好きなFirebaseを使ってWebアプリを作成してみました。

なに作ったの？

Skill App

自分のスキルセットを画像化してTweetできるWebアプリです🙂

• 自分のできることをアピールしたいときに
• Twitter転職の際のスキルセット一覧に

みたいな時に使っていただけると幸いです😆

こんなツイートが作成できます👇

なぜ作ったの？

• スキルアップのため 普段はモバイルアプリの開発をしているので、Webアプリの開発はあまり慣れていませんでした。なので、Vue.jsで１からWebアプリを開発できるようになりたかったのと、WebでもFirebaseを使えるようになりたかったので開発してみました🤗
• Twitter転職をみていて・・・ もう１つの理由は、Twitter転職でのスキルアピールに使えるアプリあったらおもしろいかも、と思ったからです。 エンジニア界隈ではTwitter上で希望年収や、勤務地、経歴、スキルを呟いて転職に繋げる「Twitter転職」が流行っています。 Tweet内容でスキルの項目は文字数とるし、画像化した方が目についていいかもと思い開発してみました🎧

どんな技術をつかったの？

使った技術としては「Vue.js」と「Firebase」だけです💡

Vue.js

• vue-router

  • Vue Router は Vue.js 公式のルータです。使わない手はないです！

• vuetify

  • 最高のUIを提供してくれます。80種類以上の素敵なコンポーネントがあります！

• Free and Premium themes

  • Vuetifyで作成されている、無料 or 有料なテーマがあります。 これがなかなかイケてます😳（現在は有料のものが１つ、無料のものが２つあります。）特に「Parallax」という無料テーマはあらゆるサイトのトップページとして使用できるナイスなテーマになっています。

• html2canvas

  • ライブラリです。Tweetする際のコンテンツの画像化する際にhtml2canvasを使用しました。ページ内のDOMに基づいて画像を生成してくれます。

• jimp

  • ライブラリです。JavaScriptの画像加工ライブラリです。Tweetする際にTwitterの規定に合うようなサイズに画像をリサイズするために使用しました。

Firebase

• Firestore

  • ユーザーが入力したスキル情報をFireSoreに格納するようにしています。 現在はこれを利用した機能はありませんが、どんなスキルを入力した人が多いかなどの分析ができると面白いなと思っています。

• Cloud Functions

  • Twitterカードを作成するために動的にタグを生成しています。 パスの最後についているidを取得し、それに該当する画像をStorageから取得、そのファイルパスをOGPとして設定し、htmlを返しています。

  exports.returnWithOGP = functions.https.onRequest((req, res) => {
      res.set('Cache-Control', 'public, max-age=300, s-maxage=600')
  
      const path = req.params[0].split('/')
      const id = path[path.length -1]
  
      fs.readFile('index.html', 'utf8', (error, templateHtml) => {
          if (error) { res.status(500).send(error) }
          const filePath = `skillImages/${id}.jpg`
          const bucket = admin.storage().bucket()
          const file = bucket.file(filePath)
          const config = {
              action: 'read',
              expires: '03-01-2500',
          }
  
          file.getSignedUrl(config).then(urls => {
              const signedUrl = urls[0]
              const responseHtml = templateHtml.replace(/(<meta property=og:image content=)(.*?)>/, "$1" + signedUrl + '>')
              return res.status(200).send(responseHtml)
          }).catch(error => {
              console.log(error)
              return res.status(404).send(templateHtml)
          })
      })
  });
  
  

• Firebaseでデプロイ

  • firebase deploy ですぐデプロイできます。
    Vue.js によるアプリを Firebase で Hosting する最短の道

Others

• Font Awesome

  • みんな大好きFont Awesome。個人開発ではお世話になることが多いです。

• ファビコン favicon.icoを作ろう!

  • ファビコン作成には👆を使用しました。

作ってみてどうだった？

Firebaseいいですね！
バックエンドやインフラを意識することなく、アプリケーションの開発に注力できます👍

ただ、開発は思ったより時間がかかってしまった感があります。

• 個人開発する上でのやる気の問題
• フィードバックを早くもらってブラッシュアップしていくべき（PDCAを早く回す）

を考慮すると、「ある程度のもの」ができる段階をいかに早く作れるかが大事だと思っています。

そのために、

• リリース可能段階のアプリの仕様、デザイン

これをできるだけ明確に決めておく必要があると思っています。
今回の場合、雰囲気レベルでしか決まっていなかったのでずるずると伸びてしまって気がします。

あと、目標設定やモチベーションの維持のための工夫は大事ですね。
そこら辺は科学的に効果的なものがあるのでそれらを実践していきたいです。
👇👇👇
開発を支える科学的な目標設定の仕方とモチベーションの持続について

ここまで読んでくれた方へ

「若手エンジニアがFirebase(FireStore + Cloud Functions + FireStorage) + Vue.jsでシンプルなWebアプリをつくってみた」を作った話でした。
ここまで読んでくださりありがとうございます🙇‍♂️

Twitterカードをタップ時の個別詳細ページを作ったり、ランキングをだしたり
とかできればいいなあ、なんて思っています。

Skill App、少しでも興味を持たれましたらアクセスしていただけると幸いです。