環境構築

GitPodの拡張の導入

Google Chromeにて、gitpod の拡張を追加します。

GitPodの追加

https://github.com/4geru/liff-vote-project にアクセスし、GitPodに追加します

Githubからログインし、プロジェクトを作成します。

ログインが成功すると、下記のようなページが開きます。Terminal からコマンドを実行してサーバーを起動します。

# npm のバージョンを上げます
npm install -g npm
# 今回の開発に必要なパッケージをインストールします
npm install
npm run start

サーバーの起動が完了したら、左のタブから公開設定を public にし、ブラウザを開きます。

開いたページのURLをコピーして、 LINE の LIFF URL に登録します。

LINE の設定

LINE Developers からLINEの設定をしていきます

初回利用の方は新規プロバイダーの登録をしてください

LIFF の作成

LINE Loginのアカウントを作成したら、 LIFF > ログイン を選択し、LIFFの情報を記述していきます。

LIFFアプリ名: アンケートアプリ
サイズ: Full
エンドポイントURL: gitpod で起動した Web アプリの URL
Scope: ✅ profile ✅ すべてを表示 > chat_message.write
ボットリンク機能: Off

の設定で、LIFFアプリを作成します。

作成した LIFF ID を public/index.html の LIFF_ID に登録します。
LIFF URL は LINE のチャットに貼り付けます。

    <script>
      // 定数を定義する
      const LIFF_ID = 'LIFF_ID' // <- ここに貼り付ける
      const REQUEST_URL = 'REQUEST_URL'
    </script>

LIFF を活用するために、以下の2つの設定が必要になる

• LIFF App を公開する。公開すると他の人もアンケートに答えられる。お試しの場合は開発モードでもテスト可能。
• シェアターゲットピッカーを有効にする

spreadsheetの作成

spread sheet からシートをコピーします

ツール > スクリプトエディタ でスクリプトエディタを開きます。

スクリプトエディタを開いたら、コピーしたGoogle Spread SheetのURLを SHEET_URL に貼り付けます。

初回アクセスの場合は、アプリを承認する必要があるので、承認をします。

アクセス承認 を押すと 安全ではないページ にリンクが飛びますが、アクセスし許可をします。

コピーで作成したシートのURLを REQUEST_URL に貼り付け、デプロイをします。

コピーした REQUEST_URL は Gitpod の ./public/index.html の 15行目に貼り付けます。

    <script>
      // 定数を定義する
      const LIFF_ID = 'LIFF_ID'
      const REQUEST_URL = 'REQUEST_URL' // <- ここに貼り付ける
    </script>

サンプルプログラムが動くかを確認

LIFF URL を LINE にコピーし、モバイルから起動します。モバイルのLINEブラウザでのみ動くコードがあるので、気をつけてください。

一度アンケートの登録 → 回答 → シェア まで動くか確かめてみましょう

アンケート途中の画面に戻る方法

アンケート解答後に、解答メッセージとアンケートの URL がアクセス元の LINE 画面に表示されます。
Google Spread Sheet の FormSelecteds の情報を消すことで、アンケート結果を消すことができます。

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

シェアボタンを押すとツイートボタンがあるので、ツイートしましょう！！