albno273 / sukoya-button Goto Github PK

https://www.youtube.com/watch?v=OgO6ghgBSLo

とりあえず最新のものからいきたい

改善について

具体的な改善箇所

ボタン

具体的な修正内容

• 現状: ボタンの描画時(mounted) で audio にソースを付加して load しているので、画面描画時に全部の音声データが読み込まれている(アナライザ見てて気づいた)
• やりたいこと:
  • ボタンクリック時に音声データを読み込むようにする
  • クリックから再生までの間はローディング表示にする
• できるとどうなる: ギガが減らなくなる

その他何かあれば

<その他何かあれば書く>

• Jest でいい感じにする
• どうせ静的ページなのでどこまでやるかは要検討

改善について

具体的な改善箇所

音声データの管理

具体的な修正内容

• 現状: 音声データの Object を読み込んで、それを基にボタンを生成
• やりたいこと: GitHub Tree API で音声用リポジトリの tree を取得し、そこから音声データの Object を生成したい
• できるとどうなるか: 音声追加するたびにいちいち voice.ts を更新しなくてよくなる

その他何かあれば

<その他何かあれば書く>

さなボタンのところが効かない
Profile パネルのアイコンにくっつけた a は効いてるのになにが違うのかよくわからない

• お気に入り機能を実装したい
• Firebase と連携して Google ログインしてアカウント情報とお気に入り情報を紐つける感じ？

• カスタムドメインにする
• お名前.com だと sukoya.live が1年399円だった

• デザインをすこやっぽくする
  • Vuetify のカラーパレットのピンク系使うと手っ取り早そう
  • 背景画像とか貼る？(貼っていいのか？)

バグについて

バグの内容

ボタンに表示されている文字列に ".mp3" と表示されている

発生時の操作

普通にしてたら起きた

環境について

iPhone Xs

発生時の OS

iOS 13.2

発生時のブラウザ

Firefox

その他何かあれば

<その他何かあれば書く>

• JavaScript の部分を TypeScript で書き直す

• ボタンコンポーネントの作成
  • Card の中に台詞(main)と出典(sub)とボタンが置いてあるのがいいかなと思ったけどどうだろう

• アセットに置いた音声ファイルがなんかうまく読めない
• 外部(GitHub Raw とか)参照すればうまくいく
• 音声ファイルばっかり増えてリポジトリが肥大化するのもアレなので別リポジトリにする

改善について

具体的な改善箇所

画面全体

具体的な修正内容

ボタンの表示幅が狭くて長い文章のボタンが大変なことになるので、コンポーネント全体の描画幅を広げる

• ボタンはともかくフロントページの体裁だけでも整える

• GitHub Actions の申請
• GitHub Actions で master に push されたときに gh-pages に deploy されるようにする