Chapter 04

ハンズオン

しげる
しげる
2021.10.06に更新
このチャプターの目次
  1. 今回のプロジェクトについて
  2. 01. LINE Login をみてみよう
  3. 02. プロフィールにユーザー名を表示してみよう
  4. 03. 投票後のメッセージを変更してみよう
  5. 04. シェアメッセージを変更してみよう
  6. ☕️ 🍰 ここまでできたらひと休憩 ☕️ 🍰

今回のプロジェクトについて

利用しているLIFFの機能

  • liff.login()
  • liff.sendMessages()
  • liff.shareTargetPicker()
  • liff.isInClient(), liff.isLoggedIn()

ファイル構成

今回は ./public 以下のファイルを触っていきます

  • ./public/index.html → メインのファイル
  • ./public/liff.js → liff 固有の関数達
  • ./public/mode.js → モード切り替え

01. LINE Login をみてみよう

./public/liff.js の、liff.login() で LINE ログインをしています。setLiffClient で、liff.init をオーバーラップすることで、引数の function の中で、 liff が使えるようにしています。

./public/liff.js
window.addEventListener('load', async () => {
  const liffClient = await setLiffClient()

  liffClient(() => { if(!liff.isLoggedIn())liff.login(); })
  getProfile(liffClient)
});

const setLiffClient = () => {
  return (func) => { liff.init({ liffId: LIFF_ID }).then(func) }
}

// * setLiffClient の使い方
// const liffClient = await setLiffClient()
// liffClient(async () => {
//   const profile = await liff.getProfile()
//   ...
// })

02. プロフィールにユーザー名を表示してみよう

コメントアウトされている部分のコメントを外します。

./public/liff.js
const getProfile = async (liffClient) => {
  liffClient(() => {
    liff.getProfile().then((profile) => {
      // 02. プロフィールにユーザー名を表示してみよう
      // document.getElementById('user-name').innerText = profile.displayName
      document.getElementById('icon').src = profile.pictureUrl
      userId = profile.userId
    })
  })
}

ヘッダーにユーザー名が表示されます。

03. 投票後のメッセージを変更してみよう

投票後に、 ユーザーが投票しました とメッセージをしています。sendMessageを拡張してみましょう。

./public/index.js
const submitVoteEvent = async () => {
  ...
  // 投票したことをLINEメッセージで送る
  const liffClient = await setLiffClient()
  liffClient(async () => {
    // LINE の inbrowser でない場合はメッセージが送れない
    if(liff.isInClient()) {
      const profile = await liff.getProfile()
      await sendMessage([
        {
          'type': 'text',
          'text': `${profile.displayName}が投票しました`
        }
      ])
    }
  })
}

03-01. Messageを複数メッセージしてみましょう

現在は、 sendMessage に 1つのメッセージが表示されていますが、もう一つ追加してみましょう。

ヒント

sendMessage が配列になっています。メッセージを追加することで、複数メッセージを送信できます。

await sendMessage([
  {
    'type': 'text',
    'text': `${profile.displayName}が投票しました`
  },
  {
    'type': 'text',
    'text': '投票ありがとうございます'
  }
])

03-02. スタンプを送信してみよう

API ドキュメント / スタンプリスト

ヒント

sticker オブジェクトを追加してみましょう

await sendMessage([
  {
    'type': 'text',
    'text': `${profile.displayName}が投票しました`
  },
  {
    "type": "sticker",
    "packageId": "11537",
    "stickerId": "52002735"
  }
])

04. シェアメッセージを変更してみよう

シェアボタンを押すと、 shareTargetPicker を利用して、友達に LINE Message をシェアすることが可能です。

./public/index.js
const submitShareEvent = () => {
  const liffClient = setLiffClient()
  liffClient(async () => {
    const question = document.getElementById('question').innerText
    liff.shareTargetPicker([
      // ↓ Button Message などのテンプレートメッセージは、PC版では表示されない
      buttonMessage(question),
      // ↓ Flex Message は、PC版でも表示される
      // flexMessage(question)
    ])
  })
}

const buttonMessage = (question) => {
  return {
    "type": "template",
    "altText": "アンケートリクエストが送られました",
    "template": {
      "type": "buttons",
      "imageAspectRatio": "rectangle",
      "imageSize": "cover",
      "imageBackgroundColor": "#FFFFFF",
      "title": "アンケートリクエスト",
      "text": `「${question}」のアンケートリクエストが来ています`,
      "actions": [
        {
          "type": "uri",
          "label": "投票する",
          "uri": liff.permanentLink.createUrl()
        },
        {
          "type": "uri",
          "label": "ツイートする",
          "uri": TWEET_URL
        }
      ]
    }
  }
}

04-01. actionを変えてみよう

buttonMessage では、 uri action を送信しています。uri action 以外にも多様な action があるので、触ってみましょう！
actionについて / LINE URLスキーム

ヒント
./public/index.js
const buttonMessage = (question) => {
  ...
  "actions": [
    {
      "type": "uri",
      "label": "投票する",
      "uri": liff.permanentLink.createUrl()
    },
    {
      "type": "uri",
      "label": "連携アプリ一覧をみる",
      "uri": 'https://line.me/R/nv/connectedApps'
    }
  ]
  ...
}

☕️ 🍰 ここまでできたらひと休憩 ☕️ 🍰

ここまでの感想をツイートしてみましょう！

05. template を Button から FlexMessage に変更してみよう

Button Message では、PC版では、「スマートフォンでのみ確認可能なメッセージです。」と表示されます。
しかし、FlexMessageを使うことで、PC版でも確認することができます。
FlexMessageを使ったほうが良いです。

buttonMessage(question) をコメントにして、 flexMessage(question) をコメントアウトしてみましょう。

./public/index.js
const submitShareEvent = () => {
  ...
  liffClient(async () => {
    const profile = await liff.getProfile()
    const question = document.getElementById('question').innerText
    liff.shareTargetPicker([
      // ↓ Button Message などのテンプレートメッセージは、PC版では表示されない
      buttonMessage(question),
      // ↓ Flex Message は、PC版でも表示される
      // flexMessage(question)
    ])
  })
}

Flex Messageについての記事がを貼っておくので、興味があればどんどん触ってください