# LINEミニアプリ APIリファレンス

## サービスメッセージ 

<!-- tip start -->

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

この機能は、認証済ミニアプリでのみ利用できます。未認証ミニアプリの場合、開発用の内部チャネルではテストできますが、公開用の内部チャネルでは利用できません。

<!-- tip end -->

サービスメッセージAPIを使用すると、サービスからLINEミニアプリのユーザーに、サービスメッセージを送信できます。

サービスメッセージを送信するには、サービス通知トークンと[テンプレート](https://developers.line.biz/ja/docs/line-mini-app/develop/service-messages/#service-message-templates)が必要です。

- [サービス通知トークンを発行する](https://developers.line.biz/ja/reference/line-mini-app/#issue-notification-token)
- [サービスメッセージを送信する](https://developers.line.biz/ja/reference/line-mini-app/#send-service-message)

### サービス通知トークンを発行する 

サービス通知トークンを発行します。サービス通知トークンを使用すると、紐づけられたユーザーに対してサービスメッセージを送信できます。

サービス通知トークンの特徴は以下のとおりです。

- サービス通知トークンは、発行から1年間（31,536,000秒間）有効です。有効期限が切れるまでに、最大5回サービスメッセージを送信できます。
- サービス通知トークンを使用すると、有効期限が切れておらず、残りの送信可能回数が0でない場合は、サービス通知トークンの値が更新されます。ユーザーに対して、後続のサービスメッセージを送信する場合は、更新後のサービス通知トークンを保存してください。

<!-- warning start -->

**1つのアクセストークンで複数のサービス通知トークンを発行しないでください**

[`liff.getAccessToken()`](https://developers.line.biz/ja/reference/liff/#get-access-token)で取得したアクセストークン（LIFFのアクセストークン）を再利用して、複数のサービス通知トークンを発行することは許可されていません。

LIFFのアクセストークン1つにつき、発行できるサービス通知トークンは1つだけです。

<!-- warning end -->

<!-- note start -->

**注意**

サービス通知トークンは、一人のユーザーに紐づいています。あるユーザーに紐づいたサービス通知トークンを利用して、ほかのユーザーにサービスメッセージを送信することはできません。

<!-- note end -->

_リクエストの例_

<code-tabs>

<!-- tab start `shell` -->

```sh
curl -X POST https://api.line.me/message/v3/notifier/token \
-H 'Content-Type: application/json' \
-H 'Authorization: Bearer W1TeHCgfH2Liwa...' \
-d '{
    "liffAccessToken": "eyJhbGciOiJIUzI1NiJ9..."
}'
```

<!-- tab end -->

</code-tabs>

#### HTTPリクエスト 

`POST https://api.line.me/message/v3/notifier/token`

#### リクエストヘッダー 

<!-- parameter start (props: required) -->

Content-Type

application/json

<!-- parameter end -->
<!-- parameter start (props: required) -->

Authorization

Bearer `{channel access token}`\
詳しくは、「[チャネルアクセストークン](https://developers.line.biz/ja/docs/basics/channel-access-token/)」を参照してください。

<!-- parameter end -->

<!-- note start -->

**ステートレスチャネルアクセストークンの使用を推奨します**

LINEミニアプリチャネルでは、[長期のチャネルアクセストークン](https://developers.line.biz/ja/docs/basics/channel-access-token/#long-lived-channel-access-token)および、[任意の有効期間を指定できるチャネルアクセストークン（チャネルアクセストークンv2.1）](https://developers.line.biz/ja/docs/basics/channel-access-token/#user-specified-expiration)は使用できません。

LINEミニアプリの開発では、[ステートレスチャネルアクセストークン](https://developers.line.biz/ja/docs/basics/channel-access-token/#stateless-channel-access-token)または[短期のチャネルアクセストークン](https://developers.line.biz/ja/docs/basics/channel-access-token/#short-lived-channel-access-token)を使用できます。このうち、ステートレスチャネルアクセストークンの使用を推奨します。ステートレスチャネルアクセストークンは、発行数に制限がないため、アプリケーション側でトークンのライフサイクルを管理する必要がありません。

<!-- note end -->

#### リクエストボディ 

<!-- parameter start (props: required) -->

liffAccessToken

String

[`liff.getAccessToken()`](https://developers.line.biz/ja/reference/liff/#get-access-token)で取得したアクセストークン（LIFFのアクセストークン）

<!-- parameter end -->

#### レスポンス 

ステータスコード`200`と以下の情報を含むJSONオブジェクトを返します。

<!-- parameter start -->

notificationToken

String

サービス通知トークン

<!-- parameter end -->
<!-- parameter start -->

expiresIn

Number

サービス通知トークンの有効期限が切れるまでの秒数。サービス通知トークンは、発行から1年間（31,536,000秒間）有効です。

<!-- parameter end -->
<!-- parameter start -->

remainingCount

Number

発行されたサービス通知トークンで、サービスメッセージを送信できる回数

<!-- parameter end -->
<!-- parameter start -->

sessionId

String

セッションID。詳しくは、「[サービスメッセージを送信する](https://developers.line.biz/ja/docs/line-mini-app/develop/service-messages/)」を参照してください。

<!-- parameter end -->

_レスポンスの例_

<code-tabs>

<!-- tab start `json` -->

```json
{
  "notificationToken": "34c11a03-b726-49e3-8ce0-949387a9..",
  "expiresIn": 31536000,
  "remainingCount": 5,
  "sessionId": "xD06...."
}
```

<!-- tab end -->

</code-tabs>

#### エラーレスポンス 

以下のいずれかのステータスコードとエラーメッセージを返します。

| ステータスコード | 説明 |
| --- | --- |
| 400 Bad request | 以下のいずれかです。<ul><li>リクエストボディに問題があります。</li><li>`liffAccessToken`プロパティに指定したLIFFのアクセストークンを使用して、サービス通知トークンの発行が短時間に連続してリクエストされました。</li></ul> |
| 401 Unauthorized | 以下のいずれか、または両方です。<ul><li>有効なチャネルアクセストークンが指定されていません。</li><li>有効なLIFFのアクセストークンが指定されていません。</li><ul><li>ユーザーが[LIFFアプリを閉じる](https://developers.line.biz/ja/docs/liff/developing-liff-apps/#behavior-when-closing-liff-app)と、有効期限が切れていなくてもアクセストークンは無効化されます。</li></ul></ul> |
| 403 Forbidden | このチャネルには、サービス通知トークンを発行する許可が与えられていません。 |
| 500 Internal Server Error | 内部サーバーのエラーです。 |

_エラーレスポンスの例_

<code-tabs>

<!-- tab start `json` -->

```json
{
  "message": "[liffAccessToken] must not be blank"
}
```

<!-- tab end -->

</code-tabs>

### サービスメッセージを送る 

サービス通知トークンで指定されたユーザーに、サービスメッセージを送信します。

サービスメッセージを送信すると、有効期限が切れておらず、残りの送信可能回数が0でない場合は、サービス通知トークンの値が更新されます。ユーザーに対して、後続のサービスメッセージを送信する予定がある場合は、更新後のサービス通知トークンを保存してください。

_リクエストの例_

<code-tabs>

<!-- tab start `shell` -->

```sh
curl -X POST https://api.line.me/message/v3/notifier/send?target=service \
-H 'Authorization: Bearer W1TeHCgfH2Liwa...' \
-H 'Content-Type: application/json' \
-d '{
    "templateName": "thankyou_msg_en",
    "params": {
        "date": "2020-04-23",
        "username": "Brown & Cony"
    },
    "notificationToken": "34c11a03-b726-49e3-8ce0-949387a9.."
}'
```

<!-- tab end -->

</code-tabs>

#### HTTPリクエスト 

`POST https://api.line.me/message/v3/notifier/send`

#### リクエストヘッダー 

<!-- parameter start (props: required) -->

Content-Type

application/json

<!-- parameter end -->
<!-- parameter start (props: required) -->

Authorization

Bearer `{channel access token}`\
詳しくは、『LINEプラットフォームの基礎知識』の「[チャネルアクセストークン](https://developers.line.biz/ja/docs/basics/channel-access-token/)」を参照してください。

<!-- parameter end -->

<!-- note start -->

**ステートレスチャネルアクセストークンの使用を推奨します**

LINEミニアプリチャネルでは、[長期のチャネルアクセストークン](https://developers.line.biz/ja/docs/basics/channel-access-token/#long-lived-channel-access-token)および、[任意の有効期間を指定できるチャネルアクセストークン（チャネルアクセストークンv2.1）](https://developers.line.biz/ja/docs/basics/channel-access-token/#user-specified-expiration)は使用できません。

LINEミニアプリの開発では、[ステートレスチャネルアクセストークン](https://developers.line.biz/ja/docs/basics/channel-access-token/#stateless-channel-access-token)または[短期のチャネルアクセストークン](https://developers.line.biz/ja/docs/basics/channel-access-token/#short-lived-channel-access-token)を使用できます。このうち、ステートレスチャネルアクセストークンの使用を推奨します。ステートレスチャネルアクセストークンは、発行数に制限がないため、アプリケーション側でトークンのライフサイクルを管理する必要がありません。

<!-- note end -->

#### クエリパラメータ 

<!-- parameter start (props: required) -->

target

`service`

<!-- parameter end -->

#### リクエストボディ 

<!-- parameter start (props: required) -->

templateName

String

サービスメッセージに使用する、事前登録済みテンプレートの名前。BCP 47言語タグを末尾に追加してください。\
フォーマット：`{template name}_{BCP 47 language tag}`\
最大文字数：30

<!-- note start -->

**注意**

サービスメッセージでサポートしている言語と言語タグは、以下のとおりです。

- アラビア語：`ar`
- 中国語（簡体字）：`zh-CN`
- 中国語（繁体字）：`zh-TW`
- 英語：`en`
- フランス語：`fr`
- ドイツ語：`de`
- インドネシア語：`id`
- イタリア語：`it`
- 日本語：`ja`
- 韓国語：`ko`
- マレー語：`ms`
- ポルトガル語（ブラジル）：`pt-BR`
- ポルトガル語（ポルトガル）：`pt-PT`
- ロシア語：`ru`
- スペイン語（スペイン）：`es-ES`
- タイ語：`th`
- トルコ語：`tr`
- ベトナム語：`vi`

<!-- note end -->

<!-- parameter end -->
<!-- parameter start (props: required) -->

params

object

テンプレート変数と値のペアを指定するJSONオブジェクト。\
テンプレートにテンプレート変数がない場合は、空のJSONオブジェクト（`{ }`）を指定します。\
テンプレート変数は、テンプレートごとに定義されています。必須の要素にテンプレート変数が含まれる場合は、必ずテンプレート変数と値のペアを指定してください。\
詳しくは、「[サービスメッセージのテンプレートを追加する](https://developers.line.biz/ja/docs/line-mini-app/develop/service-messages/#service-message-templates)」を参照してください。

<!-- parameter end -->
<!-- parameter start (props: required) -->

notificationToken

String

サービス通知トークン

<!-- parameter end -->

#### レスポンス 

ステータスコード`200`と以下の情報を含むJSONオブジェクトを返します。

<!-- parameter start -->

notificationToken

String

更新後のサービス通知トークン。このサービス通知トークンを使用して、後続のサービスメッセージを送信します。

<!-- parameter end -->
<!-- parameter start -->

expiresIn

Number

更新後のサービス通知トークンの有効期限が切れるまでの秒数

<!-- parameter end -->
<!-- parameter start -->

remainingCount

Number

更新後のサービス通知トークンで、後続のサービスメッセージを送信できる回数

<!-- parameter end -->
<!-- parameter start -->

sessionId

String

セッションID。詳しくは、「[サービスメッセージを送信する](https://developers.line.biz/ja/docs/line-mini-app/develop/service-messages/)」を参照してください。

<!-- parameter end -->

<!-- note start -->

**注意**

`expiresIn`および`remainingCount`の値が`0`の場合は、サービスメッセージは送信されたが、サービス通知トークンが更新できなかったことを示します。

<!-- note end -->

_レスポンスの例_

<code-tabs>

<!-- tab start `json` -->

```json
// リクエストは成功し、
// 新しいサービス通知トークンが
// 発行されました。
{
  "notificationToken": "c9884874-bf6a-4241-8999-2767241c...",
  "expiresIn": 31535906,
  "remainingCount": 3,
  "sessionId": "xD06...."
}

// リクエストは成功し、
// サービスメッセージは送信されたが、
// LINEプラットフォームがサービス
// 通知トークンを更新できない場合
{
  "expiresIn": 0,
  "remaningCount": 0
}
```

<!-- tab end -->

</code-tabs>

#### エラーレスポンス 

以下のいずれかのステータスコードとエラーメッセージを返します。

| ステータスコード | 説明 |
| --- | --- |
| 400 Bad request | 以下のいずれかです。<ul><li>リクエストボディに問題があります。</li><li>サービスメッセージ送信対象のユーザーが存在しません。</li></ul> |
| 401 Unauthorized | 以下のいずれか、または両方です。<ul><li>有効なチャネルアクセストークンが指定されていません。</li><li>有効なサービス通知トークンが指定されていません。</li></ul> |
| 403 Forbidden | 以下のいずれかです。<ul><li>このチャネルには、サービスメッセージを送信する許可が与えられていません。</li><li>指定されたテンプレートが見つかりません。</li></ul> |
| 500 Internal Server Error | 内部サーバーのエラーです。 |

_エラーレスポンスの例_

<code-tabs>

<!-- tab start `json` -->

```json
{
  "message": "Invalid notifier token"
}
```

<!-- tab end -->

</code-tabs>

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

<!-- tip start -->

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

共通プロフィールのクイック入力を利用するには、LINEミニアプリが認証済みであり、かつクイック入力の利用申請を行う必要があります。詳しくは、「[クイック入力の利用手順](https://developers.line.biz/ja/docs/line-mini-app/quick-fill/overview/#process)」を参照してください。

<!-- tip end -->

クイック入力とは、LINEミニアプリ上で［**自動入力**］をタップすることで、必要なプロフィール情報が自動で入力される機能です。ユーザーがアカウントセンターで設定した共通プロフィールの情報が、LINEミニアプリで簡単に利用できます。詳しくは、「[共通プロフィールのクイック入力の概要](https://developers.line.biz/ja/docs/line-mini-app/quick-fill/overview/)」を参照してください。

### liff.$commonProfile.get() 

ユーザーがアカウントセンターで設定している共通プロフィールの情報を取得します。

`liff.$commonProfile.get()`メソッドを実行すると、ユーザーがプロフィールの情報を確認するためのモーダルが表示されます。表示されたモーダルでプロフィールを確認後、ユーザーが［**自動で入力する**］をタップすると、共通プロフィールの情報を取得できます。

モーダルの表示例：

![](https://developers.line.biz/media/line-mini-app/quick-fill/quick-fill-modal-screen.png)

_例_

<code-tabs>

<!-- tab start `javascript` -->

```javascript
const { data, error } = await liff.$commonProfile.get(
  ["family-name", "given-name", "email", "tel", "postal-code"],
  {
    formatOptions: {
      givenName: {
        excludeEmojis: false,
      },
      tel: {
        excludeNonJp: false,
      },
      postalCode: {
        digitsOnly: false,
      },
    },
  },
);
console.log(data);
console.log(error);
```

<!-- tab end -->

</code-tabs>

#### 構文 

```javascript
liff.$commonProfile.get(scopes, options);
```

#### 引数 

<!-- parameter start (props: required) -->

scopes

Array of strings

取得したい共通プロフィールのスコープを指定します。

`scopes`に指定できる値については、「[取得できる共通プロフィールのスコープと戻り値](https://developers.line.biz/ja/docs/line-mini-app/quick-fill/overview/#common-profile-scope)」を参照してください。

<!-- parameter end -->
<!-- parameter start (props: optional) -->

options

Object

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

<!-- parameter end -->
<!-- parameter start (props: optional) -->

options.formatOptions

Object

情報の形式に関するオプション。`scopes`プロパティで指定した各スコープに対して、[`formatOptions`オブジェクト](https://developers.line.biz/ja/reference/line-mini-app/#get-common-profile-format-options)を指定します。

キーには、オプションを設定したいスコープをキャメルケース形式で指定します。たとえば、スコープが`given-name`のとき、キーは`givenName`になります。

<!-- parameter end -->

#### `formatOptions`オブジェクト 

<!-- parameter start (props: optional) -->

excludeEmojis

Boolean

文字列内の絵文字を削除するかどうか。デフォルトは`true`です。以下のスコープにのみ指定できます。

- givenName
- familyName

<!-- parameter end -->
<!-- parameter start (props: optional) -->

excludeNonJp

Boolean

12桁以上の電話番号を排除するかどうか。デフォルトは`true`です。`true`の場合、電話番号が12桁以上のときは、空文字とエラー情報を返します。以下のスコープにのみ指定できます。

- tel

<!-- parameter end -->
<!-- parameter start (props: optional) -->

digitsOnly

Boolean

数字以外の郵便番号を排除するかどうか。デフォルトは`true`です。`true`の場合、郵便番号に数字以外が含まれているときは、空文字とエラー情報を返します。以下のスコープにのみ指定できます。

- postalCode

<!-- parameter end -->

_例_

<code-tabs>

<!-- tab start `javascript` -->

```javascript
{
  givenName: {
    excludeEmojis: false,
  },
  tel: {
    excludeNonJp: false,
  },
  postalCode: {
    digitsOnly: false,
  },
}
```

<!-- tab end -->

</code-tabs>

#### 戻り値 

`{ data: Partial<CommonProfile>, error: Partial<CommonProfileError>}`型の`Promise`オブジェクトが返されます。

`Promise`がresolveされると、`data`プロパティにユーザーの共通プロフィール情報を含む`Partial<CommonProfile>`型、`error`プロパティにエラー情報を含む`Partial<CommonProfileError>`型のオブジェクトが渡されます。

次のような場合、`data`が持つプロパティは`undefined`もしくは`null`になります。

- `undefined`になるケース
  - 引数の`scopes`で対象の項目を指定していない場合
  - 引数の`scopes`で対象の項目を指定したが、ユーザーがその項目の権限を許可していない場合
- `null`になるケース
  - ユーザーが共通プロフィールで対象の項目に値を設定していない場合
  - 共通プロフィールで対象の項目を取得する時にエラーが発生した場合

指定したスコープに応じて取得できるプロパティの値については、「[取得できる共通プロフィールのスコープと戻り値](https://developers.line.biz/ja/docs/line-mini-app/quick-fill/overview/#common-profile-scope)」を参照してください。

_`Partial<CommonProfile>`型のオブジェクトの例_

<code-tabs>

<!-- tab start `json` -->

```javascript
{
  "family-name": "山田",
  "given-name": "太郎",
  "email": "sample@example.com",
  "tel": "09001234567",
  "postal-code": "1020094"
}
```

<!-- tab end -->

</code-tabs>

_`Partial<CommonProfileError>`型のオブジェクトの例_

<code-tabs>

<!-- tab start `json` -->

```javascript
{
  "tel": ["Phone number has 12 or more digits"],
  "postal-code": ["Postal code contains non-numeric characters"]
}
```

<!-- tab end -->

</code-tabs>

#### エラーレスポンス 

`Promise`がrejectされたときは、[`LiffError`](https://developers.line.biz/ja/reference/liff/#liff-errors)が渡されます。

_プラグインを正しくインストールせずにAPIを呼んだ場合の例_

<code-tabs>

<!-- tab start `javascript` -->

```javascript
new Error(
  "LiffCommonProfilePlugin isn't installed properly. Did you call liff.use(new LiffCommonProfilePlugin()) before using it?"
);
```

<!-- tab end -->

</code-tabs>

_LIFFブラウザ以外でAPIが呼ばれた場合の例_

<code-tabs>

<!-- tab start `javascript` -->

```javascript
new Error("liff.$commonProfile API is available only in LIFF browser.");
```

<!-- tab end -->

</code-tabs>

### liff.$commonProfile.getDummy() 

共通プロフィールのダミーデータを取得します。10種類のダミーデータが用意されており、`caseId`によって取得するダミーデータを指定できます。

`liff.$commonProfile.getDummy()`メソッドを実行すると、プロフィールの情報を確認するためのモーダルが表示されます。［**自動で入力する**］をタップすると、共通プロフィールのダミーデータを取得できます。

モーダルの表示例：

![](https://developers.line.biz/media/line-mini-app/quick-fill/quick-fill-dummy-modal-screen.png)

_例_

<code-tabs>

<!-- tab start `javascript` -->

```javascript
const { data, error } = await liff.$commonProfile.getDummy(
  ["family-name", "given-name", "email", "tel", "postal-code"],
  {
    formatOptions: {
      givenName: {
        excludeEmojis: false,
      },
      tel: {
        excludeNonJp: false,
      },
      postalCode: {
        digitsOnly: false,
      },
    },
  },
  1
);
console.log(data);
console.log(error);
```

<!-- tab end -->

</code-tabs>

#### 構文 

```javascript
liff.$commonProfile.getDummy(scopes, options, caseId);
```

#### 引数 

<!-- parameter start (props: required) -->

scopes

Array of strings

取得したい共通プロフィールのスコープを指定します。

`scopes`に指定できる値については、「[取得できる共通プロフィールのスコープと戻り値](https://developers.line.biz/ja/docs/line-mini-app/quick-fill/overview/#common-profile-scope)」を参照してください。

<!-- parameter end -->
<!-- parameter start (props: optional) -->

options

Object

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

<!-- parameter end -->
<!-- parameter start (props: optional) -->

options.formatOptions

Object

情報の形式に関するオプション。`scopes`プロパティで指定した各スコープに対して、[`formatOptions`オブジェクト](https://developers.line.biz/ja/reference/line-mini-app/#get-common-profile-format-options)を指定します。

キーには、オプションを設定したいスコープをキャメルケース形式で指定します。たとえば、スコープが`given-name`のとき、キーは`givenName`になります。

<!-- parameter end -->
<!-- parameter start (props: required) -->

caseId

number

取得したいダミーデータのIDを指定します。IDが`1`から`10`までのダミーデータが用意されています。

`caseId`ごとのダミーデータについては、「[取得できる共通プロフィールのダミーデータ](https://developers.line.biz/ja/docs/line-mini-app/quick-fill/overview/#get-dummy-common-profile)」を参照してください。

<!-- parameter end -->

#### 戻り値 

`{ data: Partial<CommonProfile>, error: Partial<CommonProfileError>}`型の`Promise`オブジェクトが返されます。

`Promise`がresolveされると、`data`プロパティにダミーデータを含む`Partial<CommonProfile>`型、`error`プロパティにエラー情報を含む`Partial<CommonProfileError>`型のオブジェクトが渡されます。

次のような場合、`data`が持つプロパティは`undefined`もしくは`null`になります。

- `undefined`になるケース
  - 引数の`scopes`で対象の項目を指定していない場合
- `null`になるケース
  - ダミーデータで対象の項目に値が設定されていない場合

指定したIDに応じて取得できるダミーデータについては、「[取得できる共通プロフィールのダミーデータ](https://developers.line.biz/ja/docs/line-mini-app/quick-fill/overview/#get-dummy-common-profile)」を参照してください。

_`Partial<CommonProfile>`型のオブジェクトの例_

<code-tabs>

<!-- tab start `json` -->

```javascript
{
  "family-name": "見本田",
  "given-name": "見本夫",
  "family-name-kana": "ダミータ",
  "given-name-kana": "ダミーオ",
  "sex-enum": 0,
  "bday-day": 12,
  "bday-month": 3,
  "bday-year": 1998,
  "tel": "09001234567",
  "email": "dummy_39@yahoo.co.jp",
  "postal-code": "1020094",
  "address-level1": "東京都",
  "address-level2": "千代田区",
  "address-level3": "紀尾井町1-2",
  "address-level4": "東京ガーデンテラス紀尾井町"
}
```

<!-- tab end -->

</code-tabs>

_`Partial<CommonProfileError>`型のオブジェクトの例_

<code-tabs>

<!-- tab start `json` -->

```javascript
{
  "tel": ["Phone number has 12 or more digits"],
  "postal-code": ["Postal code contains non-numeric characters"]
}
```

<!-- tab end -->

</code-tabs>

##### エラーレスポンス 

`Promise`がrejectされたときは、[`LiffError`](https://developers.line.biz/ja/reference/liff/#liff-errors)が渡されます。

_プラグインを正しくインストールせずにAPIを呼んだ場合の例_

<code-tabs>

<!-- tab start `javascript` -->

```javascript
new Error(
  "LiffCommonProfilePlugin isn't installed properly. Did you call liff.use(new LiffCommonProfilePlugin()) before using it?"
);
```

<!-- tab end -->

</code-tabs>

_LIFFブラウザ以外でAPIが呼ばれた場合の例_

<code-tabs>

<!-- tab start `javascript` -->

```javascript
new Error("liff.$commonProfile API is available only in LIFF browser.");
```

<!-- tab end -->

</code-tabs>

### liff.$commonProfile.fill() 

取得した共通プロフィールの情報をフォームに自動入力します。それぞれのプロフィール情報とフォームの紐づけには、`data-liff-autocomplete`属性を用います。

<!-- tip start -->

**スコープと一致しないフォームへの自動入力**

`liff.$commonProfile.fill()`による自動入力は、フォームの`data-liff-autocomplete`属性を用いて行います。このとき、フォームの`data-liff-autocomplete`属性に指定する値は、取得したプロフィール情報のスコープ（`family-name`、`tel`、`bday-year`など）と一致している必要があります。

たとえば、誕生年（`bday-year`）、誕生月（`bday-month`）、誕生日（`bday-day`）の情報をそれぞれ取得した後、`20110623`のような形式に加工した上でフォームに自動入力させたい場合は、`liff.$commonProfile.fill()`の代わりに、`document.getElementById().value`や`document.querySelector().value`を用いることができます。

<!-- tip end -->

_取得した姓、電話番号、性別をそのまま自動入力する例_

<code-tabs>

<!-- tab start `javascript` -->

```javascript
// HTML
<input type="text" data-liff-autocomplete="family-name" />
<input type="tel" data-liff-autocomplete="tel" />
<select data-liff-autocomplete="sex-enum">
  <option value="0">男性</option>
  <option value="1">女性</option>
  <option value="2">その他</option>
  <option value="3">無回答</option>
</select>

// JavaScript
const { data, error } = await liff.$commonProfile.get([
  "family-name",
  "tel",
  "sex-enum",
]);

liff.$commonProfile.fill(data);
```

<!-- tab end -->

</code-tabs>

_取得した共通プロフィール情報の形式を一部変更して自動入力する場合_

<code-tabs>

<!-- tab start `javascript` -->

```javascript
// HTML
<input type="text" data-liff-autocomplete="bday-year" />
<input type="text" data-liff-autocomplete="bday-month" />
<input type="text" data-liff-autocomplete="bday-day" />

// JavaScript
const { data, error } = await liff.$commonProfile.get([
  "bday-year",
  "bday-month",
  "bday-day",
]);

const year = data["bday-year"];
const month = data["bday-month"];
const day = data["bday-day"];

// 月と日が1桁の場合、2桁になるように0埋めする
const formattedMonth = month.toString().padStart(2, '0');
const formattedDay = day.toString().padStart(2, '0');

// 加工後の値を自動入力
liff.$commonProfile.fill({
  "bday-year": year,
  "bday-month": formattedMonth,
  "bday-day": formattedDay,
});
```

<!-- tab end -->

</code-tabs>

#### 構文 

```javascript
liff.$commonProfile.fill(profile);
```

#### 引数 

<!-- parameter start (props: required) -->

profile

Partial&lt;CommonProfile&gt;

フォームに自動入力させるプロフィール情報を、`Partial<CommonProfile>`型で指定します。

指定できるスコープについては、「[取得できる共通プロフィールのスコープと戻り値](https://developers.line.biz/ja/docs/line-mini-app/quick-fill/overview/#common-profile-scope)」を参照してください。

<!-- parameter end -->

#### 戻り値 

なし