こんにちは、高崎＠アノテーションです。
はじめに
LINEヤフー社より下記の情報が 2/1 にリリースされました。
ユーザー端末のホーム画面に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等のセッティングについては省略します。
スタック定義の実装は下記です。
lib/liff-cdk-test-stack.ts
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 をビルドして出来るディレクトリに指定した箇所です。
ビルド/デプロイ/仕上げ
以下のようにしてビルドとデプロイを行います。 1
cd LiffTest
npm run build
cd ..
cdk bootstrap（※初回のみ）
cdk deployAWS のマネージメントコンソールの CloudFront にてディストリビューションドメインをコピーしておきます（下記）。
LINE Developers コンソールにて、コピーした URL をエンドポイントとして「編集」を押して貼り付けます（下記）。
これで、開発用の URL をスマートフォン上で開けると LINE のミニアプリが立ち上がり基本画面が出ます（画像省略）。
ようやく本題
いつものように前置きが長くなりましたが、本題です。
今回のliff.createShortcutOnHomeScreen関数は以下が実行されている必要がある認識です。
- liff.init
- liff.login
そこで、main.tsx と App.tsx を下記のように実装しました。
main.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();App.tsx
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 テクノロジー、高い技術力、蓄積されたノウハウをフル活用し、お客様の課題解決を行っています。
当社は様々な職種でメンバーを募集しています。
「オペレーション・エクセレンス」と「らしく働く、らしく生きる」を共に実現するカルチャー・しくみ・働き方にご興味がある方は、アノテーション株式会社 採用サイトをぜひご覧ください。
- tsconfig を使って色々と整理したいところですが今回はサンプルということでカットしました。 ↩
18
