今日やったこと

やることがどんどん出てくるのでロードマップを作った。

• ストレージのキャッシュ化

普通にストレージにアップロードするだけでは cacheContorolが設定されずにキャッシュが無効になってしまうらしいので対策した。putString()だとアップロードと同時に設定できんかったので、updateする形で設定している。

const sRef = firebase.storage().ref()
  const fileRef = sRef.child(`ogp/${param}.png`)
  var metadata = {
    contentType: 'image/png',
    cacheControl: 'public,max-age=3600'
  };

  await fileRef.putString(data, 'data_url').then((snapshot) => {
    console.log(snapshot)
  }).catch(err => {
    console.error(err)
  })
  
  fileRef.updateMetadata(metadata).then(function(meta) {
    console.log(meta)
  }).catch(function(error) {
    console.log(error)
  });

• UIを整える

フレームワークは Buefy にしました。軽量でシンプルなのが好き。

https://books-card-maker.web.app/

なかなか良い感じにできたんじゃないかと思う。

• redirect を作る

前回作ったOGP画像生成機構にちょっとした問題があった。https://<domain>/id/:id を踏むとOGP画像が生成されるfunctionが走るのですが、遷移先のURLがhttps://<domain>/card/:id となっており、このURLを貼ってもOGP画像が生成されない。

単純に遷移先のURLを https://<domain>/id/:id としても funciton 発動の無限ループに陥ってしまう。どうしたもんかと考えて、redirect用のページを作ってそこへ遷移させた瞬間に vue-router で https://<domain>/id/:id にナビゲーションしてやるようにした。これで無限ループを避けることができた。

• 前後ページを表示させるようにする

各データに serial_number を持たせて前後のデータを取得するようにしてみた。何か他にベストプラクティスがありそう･･･。

今週中にはリリースしたい