# クイック入力の概要
本ドキュメントに記載のクイック入力は、弊社からご案内している特定の法人ユーザーのみがご利用いただけます。この機能は、認証済ミニアプリでのみ利用できます。
# LINEミニアプリのクイック入力とは
クイック入力とは、LINEミニアプリ上で［自動入力］をタップすることで、必要なプロフィール情報が自動で入力される機能です。ユーザーがアカウントセンターで設定した共通プロフィールの情報が、LINEミニアプリで簡単に利用できます。
LINEミニアプリにクイック入力を導入すると、住所や電話番号の登録が必要な場面で、ボタンをタップするだけで必要な情報が自動で入力されます。これにより、たとえばお店の予約やオンラインストアでの注文時に、ユーザーは面倒な手入力の手間を省くことができます。
このページでは、LINEミニアプリでクイック入力を組み込む方法を紹介します。
ユーザーがLINEミニアプリ上でクイック入力を利用する方法については、『LINEみんなの使い方ガイド』の「共通プロフィールを設定してクイック入力を利用する (opens new window)」を参照してください。
# クイック入力を利用できる言語
クイック入力の機能は、現時点では日本語のみをサポートしています。そのためLINEアプリの言語設定に関わらず、クイック入力の画面は日本語で表示されます。
# LINEミニアプリにクイック入力を組み込むには
LINEミニアプリにクイック入力を組み込むには、以下の手順に従ってください。
# 1. クイック入力の利用申請をする
クイック入力は、弊社からご案内している特定の法人ユーザーのみがご利用いただける機能です。利用の際は、弊社から案内を受けた法人ユーザーが、クイック入力の利用申請を行う必要があります。申請方法の詳細や注意点については、営業担当からご案内差し上げます。
# 2. LINE Developersコンソールでクイック入力のスコープを指定する
利用申請を行い、承認された後は、利用したい情報のスコープを指定します。LINE Developersコンソールで対象のLINEミニアプリチャネルを選択し、［ウェブアプリ設定］タブの［Scope］セクションで使用したいスコープにチェックを入れます。
クイック入力で利用できるスコープの種類について詳しくは、「LINE Developersコンソールで選択できるスコープの種類」を参照してください。
クイック入力とチャネル同意の簡略化を同時に有効にした場合、「アクセス許可要求画面」においてユーザーが共通プロフィールのトグルボタンをオフにすることができなくなります。この挙動については、今後修正が予定されています。「アクセス許可要求画面」について詳しくは、『LINEミニアプリドキュメント』の「「チャネル同意の簡略化」を有効化したLINEミニアプリにアクセスした際の動作」を参照してください。
# 3. LINEミニアプリの審査を依頼する
スコープを指定したら、LINEミニアプリチャネルの［審査申請］タブからLINEミニアプリの審査を依頼してください。LINEミニアプリの審査を通過すると、対象のスコープを使った開発ができるようになります。
# 4. LINEミニアプリの開発を行う
LINEミニアプリにクイック入力を組み込んで開発を行います。開発方法については、「LIFFプラグインでクイック入力を組み込む」を参照してください。
なおクイック入力を組み込んだLINEミニアプリを開発する際は、以下に従ってください。
# LIFFプラグインでクイック入力を組み込む
クイック入力の開発にはLIFF SDKおよびLIFFプラグインを使用します。LIFFプラグインが動作するLIFF SDKのバージョンについては、「LIFF SDKのバージョン」を参照してください。
LINEミニアプリには、以下の2種類の方法でLIFF SDKを組み込めます。
LIFFアプリにLIFF SDKを組み込んだら、以下のようにliff.use()メソッドにクイック入力のLIFFプラグインを渡すことで、LIFFプラグインが有効化されます。
liff.use(new LiffCommonProfilePlugin());
await liff.init({ liffId: "xxx" });
const profile = await liff.$commonProfile.get();
liff.$commonProfile.fill(profile);
これによりliffオブジェクトへ$commonProfileというプロパティが追加され、以下のようなクイック入力のクライアントAPIが使えるようになります。
# CDNパスを指定してクイック入力を組み込む
CDNパスを指定する場合、scriptタグを使用してパッケージを読み込むと、windowオブジェクトへliffCommonProfileというプロパティが追加されます。liffCommonProfileの内部に存在するLiffCommonProfilePluginというクラスのインスタンスをliff.use()の引数に渡します。
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
<script src="https://static.line-scdn.net/5/liff-common-profile/edge/production/0.1.0/index.umd.cjs"></script>
<title>LIFF App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/index.js"></script>
</body>
</html>
liff.use(new liffCommonProfile.LiffCommonProfilePlugin());
const profile = await liff.$commonProfile.get();
liff.$commonProfile.fill(profile);
詳しくは、『LIFFドキュメント』の「CDNパスを指定する」を参照してください。
# npmパッケージを利用してクイック入力を組み込む
npmパッケージを利用する場合、パッケージからLiffCommonProfilePluginクラスをインポートして、そのインスタンスをliff.use()の引数に渡します。
$ npm install @line/liff-common-profile-plugin
import liff from "@line/liff";
import { LiffCommonProfilePlugin } from "@line/liff-common-profile-plugin";
liff.use(new LiffCommonProfilePlugin());
const profile = await liff.$commonProfile.get();
liff.$commonProfile.fill(profile);
詳しくは、『LIFFドキュメント』の「npmパッケージを利用する」を参照してください。
# クイック入力の動作環境
クイック入力は、ユーザーがiOS版LINEまたはAndroid版LINEを使用している場合のみ動作します。
システム側におけるクイック入力の動作環境は、以下のとおりです。
なおLINEミニアプリは、LINE Front-end Framework（LIFF）の仕組みを利用しています。クイック入力の推奨環境については、『LIFFドキュメント』の「推奨環境」も併せて参照してください。
LIFFアプリは、エンドポイントURL（例：https://example.com/path）と完全に一致、もしくはエンドポイントURLよりも下の階層（例：https://example.com/path/to/lower?key1=value1#URL-fragment）においてのみ動作します。それ以外へ遷移した場合の動作は保証されません。
# LIFF SDKのバージョン
クイック入力の開発にはLIFFプラグインを使用するため、LIFF SDKはv2.19.0以上を使用してください。LIFFプラグインについて詳しくは、『LIFFドキュメント』の「LIFFプラグイン」を参照してください。
# Node.jsのバージョン
npmを利用してLIFF SDKをインストールする場合、Node.jsのバージョンは18.15.0以上を使用してください。なおCDNパスを指定してLIFF SDKを使用する場合は、Node.jsは不要です。
LIFFアプリにLIFF SDKを組み込む方法について詳しくは、『LIFFドキュメント』の「LIFFアプリにLIFF SDKを組み込む」を参照してください。
# LINE Developersコンソールで選択できるスコープの種類
LINE Developersコンソールで選択できる、クイック入力のスコープの種類は以下のとおりです。
| スコープ | 説明 |
|---|---|
commonprofile.name | ユーザーが登録した「氏名」を取得する権限 |
commonprofile.email | ユーザーが登録した「メールアドレス」を取得する権限 |
commonprofile.address | ユーザーが登録した「住所」を取得する権限 |
commonprofile.gender | ユーザーが登録した「性別」を取得する権限 |
commonprofile.birthday | ユーザーが登録した「誕生日」を取得する権限 |
commonprofile.phone | ユーザーが登録した「電話番号」を取得する権限 |
上記のスコープがLINE Developersコンソールに表示されない場合は、「1. クイック入力の利用申請をする」を参照してください。
なおユーザーが「チャネル同意画面」で同意する際は、一部のスコープだけを選択して許可することはできません。「アカウントセンターでの管理情報（共通プロフィール）」として対象のスコープを一括で許可するか、あるいは許可しない形になります。
# 取得できる共通プロフィールのスコープと戻り値
liff.$commonProfile.get()およびliff.$commonProfile.getDummy()で取得できる共通プロフィールのスコープと、それぞれの戻り値は以下のとおりです。
| 番号 | scopes | 説明 | データ型 | 戻り値の最大文字数 （半角英数字の場合） | 戻り値の最大文字数 （ひらがな漢字の場合） | 戻り値の説明 |
|---|---|---|---|---|---|---|
| 1 | family-name | 氏名（姓） | string | 100 | 50 | |
| 2 | given-name | 氏名（名） | string | 100 | 50 | |
| 3 | family-name-kana | フリガナ氏名（姓） | string | 100 | 50 | |
| 4 | given-name-kana | フリガナ氏名（名） | string | 100 | 50 | |
| 5 | sex-enum | 性別 | number | 1（固定長） | N/A |
|
| 6 | bday-day | 誕生日 | number | 2 | N/A | |
| 7 | bday-month | 誕生月 | number | 2 | N/A | |
| 8 | bday-year | 誕生年 | number | 4 | N/A | |
| 9 | tel | 電話番号 | string | 200 | N/A | |
| 10 | email | メールアドレス | string | 200 | N/A | |
| 11 | postal-code | 郵便番号 | string | 47 | N/A | |
| 12 | address-level1 | 住所第一 | string | 53 | 53 | |
| 13 | address-level2 | 住所第二 | string | 53 | 53 | |
| 14 | address-level3 | 住所第三 | string | 100 | 69 | |
| 15 | address-level4 | 住所第四 | string | 100 | 69 |
なおアカウントセンターの共通プロフィールは、LINEやYahoo! JAPANで登録されているプロフィールを組み合わせて設定されます。ユーザーがアカウントセンターを利用していない場合は、LINEのプロフィール情報が共通プロフィールとして自動入力されます。
# 取得できる共通プロフィールのダミーデータ
liff.$commonProfile.getDummy()を使うと、共通プロフィールのダミーデータを取得できます。用意されている10種類の中から、caseIdで取得するダミーデータを指定できます。
caseId | family-name | given-name | family-name-kana | given-name-kana | sex-enum | bday-day | bday-month | bday-year | tel | email | postal-code | address-level1 | address-level2 | address-level3 | address-level4 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | 見本田 | 見本夫 | ダミータ | ダミーオ | 0 | 12 | 3 | 1998 | 09001234567 | dummy_39@yahoo.co.jp | 1020094 | 東京都 | 千代田区 | 紀尾井町1-2 | 東京ガーデンテラス紀尾井町 |
| 2 | 1 | 12 | 3 | 1998 | 09001234567 | dummy_39@yahoo.co.jp | N5X 1N7 | 東京都 | 紀尾井町1-2 | 東京ガーデンテラス紀尾井町 | |||||
| 3 | 見本田 | ダミータ | 2 | 09001234567 | dummy_39dummy_39dummy_39dummy_39dummy_39dummy_39dummy_39dummy_39dummy_39dummy_39dummy_39dummy_39dummy_39dummy_39dummy_39dummy_39dummy_39dummy_39dummy_39dummy_39dummy_39dummy_39dummy_39dumm@yahoo.co.jp | 102-0094 | 東京都 | 千代田区 | 東京ガーデンテラス紀尾井町 | ||||||
| 4 | 見本夫 | ダミーオ | 3 | 12 | 3 | 1998 | 0901234567 | dummy_39@yahoo.co.jp | 1077 AA2 15000N5X 1N7107715000X 1077 AA2 15000N5X 1N71 | 東京都 | 千代田区 | 紀尾井町1-2 | |||
| 5 | Daimta | Damio | ダミータ | ダミーオ | 0 | 12 | 3 | 1998 | 09001234567 | 1020094 | Tokyo | Chiyoda-ku | Kioi-cho,1-2 | Tokyo Garden terrace Kioi-cho, | |
| 6 | 1234 | 4321 | ダミータ | ダミーオ | 1 | 1998 | 090-1234-5678 | dummy_39@yahoo.co.jp | ﾄｳｷｮｳﾄ | ﾁﾖﾀﾞｸ | ｷｵｲﾁｮｳ1-2 | ﾄｳｷｮｳｶﾞｰﾃﾞﾝﾃﾗｽｷｵｲﾁｮｳ | |||
| 7 | ﾀﾞﾐｰﾀ | ﾀﾞﾐｵ | ダミータ | ダミーオ | 2 | 3 | 09001234567090012345670900123456709001234567090012345670900123456709001234567090012345670900123456709001234567090012345670900123456709001234567090012345670900123456709001234567090012345670900123456709 | dummy_39@yahoo.co.jp | 1020094 | ||||||
| 8 | ダミ！？ | ダミ夫@ | ダミータ | ダミーオ | 3 | 12 | 1998 | 09001234567 | dummy_39@yahoo.co.jp | 1020094 | 🍀 | 🍀🍀 | 🍀🍀🍀 | 🍀🍀🍀🍀 | |
| 9 | 🐶🐶🐶 | ダミ💚 | ダミータ | ダミーオ | 0 | 12 | 3 | 1998 | dummy_39@yahoo.co.jp | 102-0094 | 東京都東京都東京都東京都東京都東京都東京都東京都東京都東京都東京都東京都東京都東京都東京都東京都東京都東京都東京都東京都東京都東京都東京都東京都東京都東京都 | 千代田区千代田区千代田区千代田区千代田区千代田区千代田区千代田区千代田区千代田区千代田区千代田区千代田区千 | 紀尾井町1-2紀尾井町1-2紀尾井町1-2紀尾井町1-2紀尾井町1-2紀尾井町1-2紀尾井町1-2紀尾井町1-2紀尾井町1-2紀尾井町1-2紀尾井町1-2紀尾井町1-2紀尾井町1-2紀尾井町1-2紀尾井町1-2紀尾井町1-2紀尾井町1-2紀尾井町1-2紀尾井町1-2紀尾井町1-2 | 東京ガーデンテラス紀尾井町東京ガーデンテラス紀尾井町東京ガーデンテラス紀尾井町東京ガーデンテラス紀尾井町東京ガーデンテラス紀尾井町東京ガーデンテラス紀尾井町東京ガーデンテラス紀尾井町 | |
| 10 | ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田 | ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫 | ダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータ | ダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオ | 1 | 12 | 3 | 1998 | 09001234567 | dummy_39@yahoo.co.jp | N5X 1N7 | 千代田区 | 紀尾井町1-2 | 東京ガーデンテラス紀尾井町 |
# APIリファレンス
クイック入力で使用するクライアントAPIについて詳しくは、『法人ユーザー向けオプションAPIリファレンス』の「クイック入力」を参照してください。