ホーム画面に LIFF のショートカット作成機能が追加されたので試してみた

LINEヤフー社から LINE ミニアプリ起動の利便性を上げる仕組みが提供されました。ミニアプリを一から構築する方法も記載したため、主題がぼやけてしまったのは反省点です。

#LINE

#LIFF

#TypeScript

#Amazon CloudFront

高崎渉

2024.02.02

こんにちは、高崎＠アノテーションです。

はじめに

LINEヤフー社より下記の情報が 2/1 にリリースされました。

ユーザー端末のホーム画面にLINEミニアプリへのショートカットを追加できるようになりました

LINE ミニアプリは以前ですとホームタブに固定登録出来る機能がありましたが、そこから使用履歴として残るように変更されました（下記参照）。

LINEミニアプリとは#ホームタブ

今回のリリースで LINE ミニアプリの操作によりスマートフォンのホーム画面にショートカットとして登録できるようになり、より LINE ミニアプリの利便性が上がる機能追加となります。

そこで、ミニアプリを用意してこの機能を実装してみました。

LINE ミニアプリの準備

骨組みの作成

LINE ミニアプリの作成は LINE Developers コンソールより行います。
※LINE 公式アカウントを作成しておく必要があります。

新規チャネル作成を選択
LINEミニアプリを選択
項目を入力して LINE ミニアプリを作成する

各項目についての必須/任意とその内容については開発を始めよう#LINEミニアプリチャネルを作成するを参照ください。

作成すると、ミニアプリの基本画面へアクセスが出来ますので、LIFF を選択して LIFF の設定画面へ行ってください。

下記のように3つのステージのミニアプリ基盤が作成されます。
今回は開発環境を用いることにしますのでその LIFF ID を控えておいてください。

LIFF の実装を用意する

LINE Developers にて提供されているサンプルがありますので、それを使います。

npx @line/create-liff-app

使い方については Create LIFF AppでLIFFアプリの開発環境を構築するを参照ください。

なお、筆者は以下の設定にしました。

? Enter your project name: -> LiffTest
? Which template do you want to use? (Use arrow keys) -> react
? JavaScript or TypeScript? (Use arrow keys) -> TypeScript
? Please enter your LIFF ID: -> 先程控えていた LIFF ID
? Which package manager do you want to use? (Use arrow keys) -> npm

コンテンツを置くための仕掛け

今回は AWS の CloudFront と S3 のサービスを使ってコンテンツを配置するようにします。

実装は下記の記事を参考にしました。

cdk init等のセッティングについては省略します。

スタック定義の実装は下記です。

import * as cdk from 'aws-cdk-lib';
import { Construct } from 'constructs';
import * as s3 from 'aws-cdk-lib/aws-s3';
import * as cloudfront from 'aws-cdk-lib/aws-cloudfront';
import * as iam from 'aws-cdk-lib/aws-iam';
import * as s3deploy from 'aws-cdk-lib/aws-s3-deployment';

export class LiffCdkTestStack extends cdk.Stack {
  constructor(scope: Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

    const liffTestBucket = new s3.Bucket(this, 'LiffTestBucket', {
      websiteErrorDocument: 'index.html',
      websiteIndexDocument: 'index.html',
    });

    const liffTestIdentity = new cloudfront.OriginAccessIdentity(this, 'LiffTestIdentity');

    const liffTestBucketPolicyStatement = new iam.PolicyStatement({
      actions: ['s3:GetObject'],
      effect: iam.Effect.ALLOW,
      principals: [
        liffTestIdentity.grantPrincipal,
      ],
      resources: [`${liffTestBucket.bucketArn}/*`],
    });

    const liffTestDistribution = new cloudfront.CloudFrontWebDistribution(
      this, 'LiffTestDistribution', {
        errorConfigurations: [
          {
            errorCachingMinTtl: 300,
            errorCode: 403,
            responseCode: 200,
            responsePagePath: '/index.html',
          },
          {
            errorCachingMinTtl: 300,
            errorCode: 404,
            responseCode: 200,
            responsePagePath: '/index.html',
          },
        ],
        originConfigs: [
          {
            s3OriginSource: {
              s3BucketSource: liffTestBucket,
              originAccessIdentity: liffTestIdentity,
            },
            behaviors: [
              {
                isDefaultBehavior: true,
              },
            ],
          },
        ],
        priceClass: cloudfront.PriceClass.PRICE_CLASS_ALL,
      },
    );

    new s3deploy.BucketDeployment(this, 'LiffTestDeploy', {
      sources: [s3deploy.Source.asset('./LiffTest/dist')],
      destinationBucket: liffTestBucket,
      distribution: liffTestDistribution,
      distributionPaths: ['/*'],
    });
  }
}

参考にしたサイトのソースから変更したのは変数名とs3deploy.BucketDeploymentの引数である asset をビルドして出来るディレクトリに指定した箇所です。

ビルド/デプロイ/仕上げ

以下のようにしてビルドとデプロイを行います。 ¹

cd LiffTest
npm run build
cd ..
cdk bootstrap（※初回のみ）
cdk deploy

AWS のマネージメントコンソールの CloudFront にてディストリビューションドメインをコピーしておきます（下記）。

LINE Developers コンソールにて、コピーした URL をエンドポイントとして「編集」を押して貼り付けます（下記）。

これで、開発用の URL をスマートフォン上で開けると LINE のミニアプリが立ち上がり基本画面が出ます（画像省略）。

ようやく本題

~~いつものように~~前置きが長くなりましたが、本題です。

今回のliff.createShortcutOnHomeScreen関数は以下が実行されている必要がある認識です。

liff.init
liff.login

そこで、main.tsx と App.tsx を下記のように実装しました。

import React from "react";
import { createRoot } from 'react-dom/client'
import liff from "@line/liff";
import App from "./App";

const liffCreate = async () => {
  if (import.meta.env.VITE_ENV !== "prod") {
    const { default: VConsole } = await import("vconsole");
    new VConsole();
  }

  const container = document.getElementById("root");
  await liff.init({ liffId: import.meta.env.VITE_LIFF_ID });
  await liff.ready;

  if (!liff.isLoggedIn()) {
    liff.login();
    createRoot(container!).render(
      <React.StrictMode>
        <></>
      </React.StrictMode>
    );
  } else {
    createRoot(container!).render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
    );
  }
}

liffCreate();

import { useState } from "react";
import liff from "@line/liff";
import "./App.css";

function App() {
  const [message, setMessage] = useState("");
  const [error, setError] = useState("");

  const handleClick = async () => {
    liff.createShortcutOnHomeScreen({ url: `https://miniapp.line.me/${import.meta.env.VITE_LIFF_ID}`})
      .then(() => {
        setMessage("createShortcutOnHomeScreen succeeded.");
      })
      .catch((e: Error) => {
        console.log(e);
        setMessage("createShortcutOnHomeScreen failed.");
        setError(`${e}`);
      });
    }

  return (
    <div className="App">
      <h1>create-liff-app</h1>
      {message && <p>{message}</p>}
      <p>
        <button onClick={handleClick}>リンクを作成</button>
      </p>
      {error && 
        <p>
          <code>{error}</code>
        </p>
      }
      <a
        href="https://developers.line.biz/ja/docs/liff/"
        target="_blank"
        rel="noreferrer"
      >
        LIFF Documentation
      </a>
    </div>
  );
}

export default App;

実行してみた

実行環境は下記の通りです。

Android バージョン：11
LINE バージョン：14.0.2
LIFF バージョン：2.23.1

ミニアプリの挙動

LINE ミニアプリを起動すると下記のような画面になります。

用意したボタンを押すと下記になります。

ホーム画面追加後は下記になり、ホーム画面にショートカットが作成されました。

以後、このショートカットをタップすると LINE が立ち上がっていなくても LINE から立ち上げ LINE ミニアプリが起動してくれます。

なお iPhone で実行する場合はこちらの動作条件にもあります通り、デフォルトのブラウザを Safari にする必要があります。

おわりに

今回は新たに発表されたliff.createShortcutOnHomeScreenについて動作確認してみました。

LINE ミニアプリは用意された QR コードを読み取るか、リッチメニュー等で起動する方法を構築することで起動出来たのですが、ユーザの操作をいくつか必要としていました。

今回のこのショートカットの機構をアプリ側にて用意することにより、ワンアクションで LINE ミニアプリが立ち上がることになりユーザの利便性がかなり上がると思います。

ご参考までに今回のソースを下記の GitHub に保存しました。

アノテーション株式会社について

アノテーション株式会社はクラスメソッドグループのオペレーション専門特化企業です。
サポート・運用・開発保守・情シス・バックオフィスの専門チームが、最新 IT テクノロジー、高い技術力、蓄積されたノウハウをフル活用し、お客様の課題解決を行っています。
当社は様々な職種でメンバーを募集しています。
「オペレーション・エクセレンス」と「らしく働く、らしく生きる」を共に実現するカルチャー・しくみ・働き方にご興味がある方は、アノテーション株式会社採用サイトをぜひご覧ください。