Youtubeの共有を便利にするWeb Appを作った

2020-03-29

Youtube Share Hub を作った

https://pishiko.github.io/youtube-share-hub/


どんなの?

こんなの

Youtube の共有メニューから選択してツイートのリンクに遷移する web アプリケーション
そのまま共有しても URL しか共有できないし Twitter カードも表示されないから不便だったので作りました.

どんな技術使った?

  • PWA
    • Web Share Target API
  • vue.js
  • bootstrap
  • Github Pages



PWA について

最低構成は以下.


index.html

メインのアプリ


serviceworker.js

ServiceWorker が動くことでオフラインでもキャッシュで動作したりすることが可能,特にやりたいことが無ければ関数は空でもいい


manifest.json

これがキモ.アプリの名前,アイコンから,共有メニューからの動作まで設定できる. 楽ちんジェネレーターもある.アイコンもリサイズしてくれる.https://app-manifest.firebaseapp.com/



Web Share Target API

apk のアプリみたいに共有機能が使える.ただし,「なんちゃってホームに追加 Web アプリ」とかじゃこの機能は使えない.
Chrome から PWA アプリと認められる条件は以下

  • アイコンが png であること.jpg はだめ
  • ServiceWorker を用意する
  • manifest.json が正しく記述されている

それから,Web Share API は今のところ Android でないと使えない.たのむよ Apple.



そのほか

メインは vue.js で実装.丁寧にエラー処理なども書いた. デザインは bootstrap.楽. Github Pages はこのブログ立ち上げた時と一緒.
Github Pages なので,ソースコードはここにあります. https://github.com/pishiko/youtube-share-hub
おわり