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

Qiitaの記事をメンション付きで<br>共有できるPWA<br>thanks-mention...

watsuyo_2
November 09, 2019

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

watsuyo_2

November 09, 2019
Tweet

More Decks by watsuyo_2

Other Decks in Programming

Transcript

  1. Web Share target API nuxt.config.ts pwa: { manifest: { ~~~~~~~~~~~~~~~~~~~~~

    share_target: { // ブラウザの共有メニューに表⽰される action: "/share", // action に指定したURL へクエリを付けて遷移 params: { title: "name", text: "description", url: "link" } } } } 8
  2. 実際にシェアされると /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
  3. 肝⼼な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
  4. 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