Qiitaの記事をメンション付きで<br>共有できるPWA<br>thanks-mentionsを作った🎉🎉

Transcript

1. Qiitaの記事をメンション付きで 共有できるPWA thanks-mentionsを作った @watsuyo_2 11/7 (若⼿)エンジニアもくもく会 vol.19 @ビザスク 1
2. About Me Twiiter: @watsuyo_2 Job: Frontend Engineer Skils: Vue.js, Nuxt.js,Firebase,Firestore 2
3. What is the "thanks-mentions"? とてもミニマムなPWA Qiitaの記事をメンション付きでシェアできる Nuxt.js×Firebase Hosting 3
4. Why make the "thanks-mentions"? 作り⼿と受け⼿の新しい関係性を作るWebサービスをつくりたい 4
5. Why make the "thanks-mentions"? 現代のコンテンツへのアクセスするきっかけ 誰が作ったコンテンツなのか 誰がオススメするコンテンツなのか ⾃分との関係性がある⼈がシェアしたコンテンツであるか 5
6. Why make the "thanks-mentions"? アクセスされないコンテンツ 関係性を築けていない⼈が作ったコンテンツ 関係性を築けていない⼈がオススメするコンテンツ 関係性を築けていない⼈がシェアしたコンテンツ 6
7. What technology is "thanks-mentions" using? Nuxt.js×Firebase Hosting 7
8. Web Share target API nuxt.config.ts pwa: { manifest: { ~~~~~~~~~~~~~~~~~~~~~ share_target: { // ブラウザの共有メニューに表⽰される action: "/share", // action に指定したURL へクエリを付けて遷移 params: { title: "name", text: "description", url: "link" } } } } 8
9. 実際にシェアされると /shareへ遷移 pages/share.vue data() { return { shareContent: { text: '' } } }, computed: { shareTitle(): string { return this.$route.query.name.toString() // query からname を取得 }, shareUrl(): string { return this.$route.query.description.toString() // query からlink を取得 } } 9
10. 肝⼼なTwitterIDを取得しツイート内容を整える async mounted() { const qiitaId = (thi s as any).shareUrl.split('/')[3] // url からQiitaID を取得する const res = await (this as any).$axios.$get( // 取得したQiitaID を元にQiitaAPI からTwitterID を取得 `https://qiita.com/api/v2/users/${qiitaId}` ) const twitterId = `@${res.twitter_screen_name}` this.shareContent.text = // ツイート内容を整える this.shareTitle + this.shareUrl + '#thanks_mentions' + twitterId } 10
11. Android版Chrome61以降では、navigator.share()メソッドが 使える <button class="button" @click="share"> 共有する </button> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ methods: { share() { const navigator = window.navigator if (navigator && navigator.share) { navigator // ネイティブ共有機能を呼び出せる！ .share(this.shareContent) // ツイート内容を引数に ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ } } 11
12. Demonstration 12
13. Add In The Future 「ホーム画⾯に追加」ポップアップを半強制的に出したい iOS対応状況がわからないので知りたい Servise Workerも書いてもっとPWA化させたい OGP画像を充実させたい もっと機能を追加させたい? 13
14. Look Forward To Your Feedback!! 14
15. Afterword... スライドをMarpで作りました。 Marp詳しい⽅、懇親会で教えて下さい！ 15