Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

E249db000b3645ef39bcc3dec6478dd3?s=47 watsuyo_2
November 09, 2019

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

E249db000b3645ef39bcc3dec6478dd3?s=128

watsuyo_2

November 09, 2019
Tweet

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