共通プロフィールのクイック入力の概要

認証済ミニアプリでのみ利用できます

共通プロフィールのクイック入力を利用するには、LINEミニアプリが認証済みであり、かつ利用申請が完了している必要があります。

共通プロフィールのクイック入力とは

クイック入力とは、LINEミニアプリ上で[自動入力]をタップすることで、必要なプロフィール情報が自動で入力される機能です。ユーザーがアカウントセンターで設定した共通プロフィールの情報が、LINEミニアプリで簡単に利用できます。

LINEミニアプリにクイック入力を導入すると、住所や電話番号の登録が必要な場面で、ボタンをタップするだけで必要な情報が自動で入力されます。これにより、たとえばお店の予約やオンラインストアでの注文時に、ユーザーは面倒な手入力の手間を省くことができます。

このページでは、LINEミニアプリでクイック入力を組み込む方法を紹介します。

ユーザーがLINEミニアプリ上でクイック入力を利用する方法については、『LINEみんなの使い方ガイド』の「共通プロフィールを設定してクイック入力を利用する」を参照してください。

クイック入力を利用できる言語

クイック入力の機能は、現時点では日本語のみをサポートしています。そのためLINEアプリの言語設定に関わらず、クイック入力の画面は日本語で表示されます。

LINEミニアプリにクイック入力を組み込むには

LINEミニアプリにクイック入力を組み込むには、以下の手順に従ってください。

  1. クイック入力の利用申請をする
  2. LINE Developersコンソールでクイック入力のスコープを指定する
  3. LINEミニアプリの審査を依頼する
  4. LINEミニアプリの開発を行う

1. クイック入力の利用申請をする

認証済ミニアプリでのみ利用できます

共通プロフィールのクイック入力は、認証済ミニアプリでのみ利用できます。利用申請の前に、対象となるアプリが認証済ミニアプリであることを確認してください。

共通プロフィールのクイック入力を利用するには、利用申請書に記入の上、申請フォームより申請してください。同一のサービス事業主が複数のLINEミニアプリを一括で申請する場合は、複数申請用の利用申請書を使用できます。

利用申請書に記入したら、以下のフォームより申請してください。申請の受領確認や、審査結果はメールでご連絡します。

申請フォーム

2. LINE Developersコンソールでクイック入力のスコープを指定する

利用申請を行い、承認された後は、利用したい情報のスコープを指定します。LINE Developersコンソールで対象のLINEミニアプリチャネルを選択し、[ウェブアプリ設定]タブの[Scope]セクションで使用したいスコープにチェックを入れます。

クイック入力で利用できるスコープの種類について詳しくは、「LINE Developersコンソールで選択できるスコープの種類」を参照してください。

クイック入力とチャネル同意の簡略化を同時に有効にした場合の挙動について

クイック入力とチャネル同意の簡略化を同時に有効にした場合、「アクセス許可要求画面」においてユーザーが共通プロフィールのトグルボタンをオフにすることができなくなります。この挙動については、今後修正が予定されています。「アクセス許可要求画面」について詳しくは、「「チャネル同意の簡略化」を有効化した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プラグインが有効化されます。

javascript
liff.use(new LiffCommonProfilePlugin());
await liff.init({ liffId: "xxx" });

const { data, error } = await liff.$commonProfile.get();
liff.$commonProfile.fill(data);

これによりliffオブジェクトへ$commonProfileというプロパティが追加され、以下のようなクイック入力のクライアントAPIが使えるようになります。

CDNパスを指定してクイック入力を組み込む

CDNパスを指定する場合、scriptタグを使用してパッケージを読み込むと、windowオブジェクトへliffCommonProfileというプロパティが追加されます。liffCommonProfileの内部に存在するLiffCommonProfilePluginというクラスのインスタンスをliff.use()の引数に渡します。

html
<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/1.0.0/index.umd.cjs"></script>
    <title>LIFF App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/index.js"></script>
  </body>
</html>
js
liff.use(new liffCommonProfile.LiffCommonProfilePlugin());

const { data, error } = await liff.$commonProfile.get();
liff.$commonProfile.fill(data);

詳しくは、『LIFFドキュメント』の「CDNパスを指定する」を参照してください。

npmパッケージを利用してクイック入力を組み込む

npmパッケージを利用する場合、パッケージからLiffCommonProfilePluginクラスをインポートして、そのインスタンスをliff.use()の引数に渡します。

sh
$ npm install @line/liff-common-profile-plugin
js
import liff from "@line/liff";
import { LiffCommonProfilePlugin } from "@line/liff-common-profile-plugin";
liff.use(new LiffCommonProfilePlugin());

const { data, error } = await liff.$commonProfile.get();
liff.$commonProfile.fill(data);

詳しくは、『LIFFドキュメント』の「npmパッケージを利用する」を参照してください。

クイック入力の動作環境

クイック入力は、ユーザーがiOS版LINEまたはAndroid版LINEを使用している場合のみ動作します。

システム側におけるクイック入力の動作環境は、以下のとおりです。

なおLINEミニアプリは、LINE Front-end Framework(LIFF)の仕組みを利用しています。クイック入力の推奨環境については、『LIFFドキュメント』の「推奨環境」も併せて参照してください。

LIFFアプリの動作が保証されるエンドポイントURLの遷移先

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説明データ型戻り値の最大文字数
(半角英数字の場合)
戻り値の最大文字数
(ひらがな漢字の場合)
戻り値の説明
1family-name氏名(姓)string10050
2given-name氏名(名)string10050
3family-name-kanaフリガナ氏名(姓)string10050
4given-name-kanaフリガナ氏名(名)string10050
5sex-enum性別number1(固定長)N/A
  • 0:男性
  • 1:女性
  • 2:その他
  • 3:無回答
6bday-day誕生日number2N/A
7bday-month誕生月number2N/A
8bday-year誕生年number4N/A
9tel電話番号string200N/A
10emailメールアドレスstring200N/A
11postal-code郵便番号string47N/A
12address-level1住所第一string5353
13address-level2住所第二string5353
14address-level3住所第三string10069
15address-level4住所第四string10069

なおアカウントセンターの共通プロフィールは、LINEやYahoo! JAPANで登録されているプロフィールを組み合わせて設定されます。ユーザーがアカウントセンターを利用していない場合は、LINEのプロフィール情報が共通プロフィールとして自動入力されます。

取得できる共通プロフィールのダミーデータ

liff.$commonProfile.getDummy()を使うと、共通プロフィールのダミーデータを取得できます。用意されている10種類の中から、caseIdで取得するダミーデータを指定できます。

caseIdfamily-namegiven-namefamily-name-kanagiven-name-kanasex-enumbday-daybday-monthbday-yeartelemailpostal-codeaddress-level1address-level2address-level3
address-level4
1見本田見本夫ダミータダミーオ0123199809001234567dummy_39@yahoo.co.jp1020094東京都千代田区紀尾井町1-2東京ガーデンテラス紀尾井町
21123199809001234567dummy_39@yahoo.co.jpN5X 1N7東京都紀尾井町1-2東京ガーデンテラス紀尾井町
3見本田ダミータ209001234567dummy_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.jp102-0094東京都千代田区東京ガーデンテラス紀尾井町
4見本夫ダミーオ312319980901234567dummy_39@yahoo.co.jp1077 AA2 15000N5X 1N7107715000X 1077 AA2 15000N5X 1N71東京都千代田区紀尾井町1-2
5DaimtaDamioダミータダミーオ01231998090012345671020094TokyoChiyoda-kuKioi-cho,1-2Tokyo Garden terrace Kioi-cho,
612344321ダミータダミーオ11998090-1234-5678dummy_39@yahoo.co.jpトウキョウトチヨダクキオイチョウ1-2トウキョウガーデンテラスキオイチョウ
7ダミータダミオダミータダミーオ2309001234567090012345670900123456709001234567090012345670900123456709001234567090012345670900123456709001234567090012345670900123456709001234567090012345670900123456709001234567090012345670900123456709dummy_39@yahoo.co.jp1020094
8ダミ!?ダミ夫@ダミータダミーオ312199809001234567dummy_39@yahoo.co.jp1020094🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀
9🐶🐶🐶ダミ💚ダミータダミーオ01231998dummy_39@yahoo.co.jp102-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ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオ1123199809001234567dummy_39@yahoo.co.jpN5X 1N7千代田区紀尾井町1-2東京ガーデンテラス紀尾井町

共通プロフィールの情報を取得するときのオプション

liff.$commonProfile.get()で共通プロフィールの情報を取得するとき、各スコープに対して以下のオプションを指定できます。これらのオプションはデフォルトではすべてtrueになっているため、オプションを無効にしたい場合はfalseを指定してください。

プロパティデフォルト値内容指定可能なスコープ
excludeEmojistrue文字列内の絵文字を削除するかどうか。
  • given-name
  • family-name
excludeNonJptrue12桁以上の電話番号を排除するかどうか。trueの場合、電話番号が12桁以上のときは、空文字とエラー情報を返します。
  • tel
digitsOnlytrue数字以外の郵便番号を排除するかどうか。trueの場合、郵便番号に数字以外が含まれているときは、空文字とエラー情報を返します。
  • postal-code

APIリファレンス

クイック入力で使用するクライアントAPIについて詳しくは、『LINEミニアプリAPIリファレンス』の「共通プロフィールのクイック入力」を参照してください。