カスタムアクションボタンを実装する

Markdownで表示 GitHubで表示

LINEミニアプリでは、現在開いているページを友だちと共有できるアクションボタンが、（A）ヘッダーに用意されています。このアクションボタンはLINEによって実装されていてデフォルトで表示されますが、ボタンの動作やメッセージの内容は、カスタマイズできません。

一方、（B）ボディにカスタムアクションボタンを実装すると、メッセージの内容をカスタマイズしてLINEミニアプリをシェアできます。

ガイドライン

カスタムアクションボタンを実装してカスタムシェアメッセージを送信する場合は、ユーザーがメッセージの内容を早くかつ正確に把握できるように、以下のガイドラインに従ってください。

注意

提供するサービスの特性上、このドキュメントのガイドラインのとおりにカスタムシェアメッセージを実装できない場合は、mini_request@linecorp.comまでご連絡ください。

LINEミニアプリのLIFF URLが変更されました

2023年12月13日より、LINEミニアプリのLIFF URLがhttps://miniapp.line.me/{liffId}に変更されました。

従来のhttps://liff.line.me/{liffId}にアクセスした場合も、引き続き当該のLINEミニアプリが開きます。そのため、発行済みのQRコードも引き続き利用可能です。

シェアターゲットピッカーの利用

ボディにカスタムアクションボタンを配置し、ボタンがタップされたときに、ターゲットピッカー（グループまたは友だちを選択する画面）を表示するように実装してください。ターゲットピッカーでユーザーが送信相手を選択すると、Flex Messageなど、開発者が作成したメッセージを送信できます。

シェアターゲットピッカーを利用する方法について詳しくは、「ユーザーの友だちにメッセージを送信する（シェアターゲットピッカー）」を参照してください。

カスタムシェアメッセージのフォーマット

カスタムシェアメッセージは、Flex Messageのバブルコンテナを使用して作成します。 Flex Messageのカルーセルコンテナは使用しないでください。

また、カスタムシェアメッセージには、標準タイプと画像リストタイプがあり、それぞれ以下のA～Fのセクションに分かれています。

ラベルセクション必須説明
A画像任意全体をスクロールせずに表示できる大きさの画像を設定してください。
Bタイトル必須メッセージの内容を要約してください。
Cサブタイトル※メッセージの副題です。
D詳細※ラベルと説明を含めた項目を挿入してください。標準タイプと画像リストタイプで挿入できる項目の最大数が異なります。
  • 標準タイプ：最大10件
  • 画像リストタイプ：最大5件
Eボタン必須
  • ボタンを3個まで挿入できます。
  • 最低1つのボタンは、シェアする内容を詳しく説明するページ（詳細ページ）を表示するように設定してください。
Fフッター必須LINEミニアプリのアイコン、LINEミニアプリの名前、および画像（ ）を挿入してください。この画像は変更しないでください。この画像をタップしたときに、LINEミニアプリのトップページ（https://miniapp.line.me/{your-liffId}）を表示するようにURIアクションを指定してください。

※サブタイトル（C）または詳細（D）のいずれか一方を挿入する必要があります。両方を挿入することもできます。

標準タイプのガイドライン

標準タイプのFlex Messageは、以下のガイドラインに従ってください。

JSONファイルの例は、「ガイドラインに従ったJSONファイルの例」を参照してください。

注意
  • アクションは、ボタン（E）およびフッター（F）の指定されたコンポーネントにのみ設定できます。
  • ここで説明されていないプロパティは変更してはいけません。

標準タイプ - 画像（A）

画像（A）は、ヒーローブロックに入れてください。

ラベルセクション要素説明
A画像ヒーローブロック > 画像
  • "url": "{画像のURL}"
  • "size": "full"
  • "aspectRatio": "{width}:{height}"
    ただし、{height}には、{width} * 2以下の値を設定してください。
  • "aspectMode": "cover"
json
{
    "type": "bubble",
    "hero": { // ヒーローブロック
        // 画像（A）
        "type": "image",
        "url": "https://example.com/hero-image.png",
        "size": "full",
        "aspectRatio": "20:13",
        "aspectMode": "cover"
    },
    "body": {. . .}
}
標準タイプ - ボディ

タイトル（B）、サブタイトル（C）、詳細（D）、ボタン（E）を入れるボディブロックは、以下のように指定してください。

ラベルセクション要素説明
--ボディブロック > ボックス
  • "layout": "vertical"
  • "spacing": "md"
json
{
    "type": "bubble",
    "hero": { ... },
    "body": { // ボディブロック
        // ボックス
        "type": "box",
        "layout": "vertical",
        "contents": [ ... ],
        "spacing": "md"
    }
}
標準タイプ - タイトル（B）
ラベルセクション要素説明
Bタイトルボックス
  • "layout": "vertical"
  • "spacing": "none"
Bタイトルテキスト
  • "text": "{タイトル}"
    最大行数：2行
  • "size": "lg"
  • "color": "#000000"
  • "weight": "bold"
  • "wrap": true
json
{
    "type": "bubble",
    "hero": { ... },
    "body": {
        "type": "box",
        "layout": "vertical",
        "contents": [
            {   // タイトル（B） - ボックス
                "type": "box",
                "layout": "vertical",
                "contents": [
                    {   // テキスト
                        "type": "text",
                        "text": "Main title",
                        "size": "lg",
                        "color": "#000000",
                        "weight": "bold",
                        "wrap": true
                    }
                ],
                "spacing": "none"
            }
        ],
        "spacing": "md"
    }
}
標準タイプ - サブタイトル（C）
ラベルセクション要素説明
Cサブタイトルボックス
  • "layout": "vertical"
  • "spacing": "none"
Cサブタイトルテキスト
  • "text": "{サブタイトル}"
    最大行数：2行
  • "size": "sm"
  • "color": "#999999"
  • "wrap": true
json
{
    "type": "bubble",
    "hero": { ... },
    "body": {
        "type": "box",
        "layout": "vertical",
        "contents": [
            {   // タイトル（B） - ボックス
                ...
            },
            {   // サブタイトル（C） - ボックス
                "type": "box",
                "layout": "vertical",
                "contents": [
                    {   // テキスト
                        "type": "text",
                        "text": "Sub-title",
                        "size": "sm",
                        "color": "#999999",
                        "wrap": true
                    }
                ],
                "spacing": "none"
            }
        ],
        "spacing": "md"
    }
}
標準タイプ - 詳細（D）
ラベルセクション要素説明
D詳細ボックス
  • "layout": "vertical"
  • "spacing": "sm"
  • "margin": "lg"
  • "flex": 1
D詳細 - アイテムボックスD-1～D-2を1組だけ入れるボックスです。
  • "layout": "horizontal"
  • "spacing": "sm"
  • "flex": 1
D-1詳細 - ラベルテキスト
  • "text": "{ラベル}"
    最大行数：1行
  • "size": "sm"
  • "color": "#555555"
  • "wrap": false
  • "flex": 20
D-2詳細 - 説明テキスト
  • "text": "{説明}"
    最大行数：1行
  • "size": "sm"
  • "color": "#111111"
  • "wrap": false
  • "flex": 55
json
{
    "type": "bubble",
    "hero": { ... },
    "body": {
        "type": "box",
        "layout": "vertical",
        "contents": [
            {   // タイトル（B） - ボックス
                ...
            },
            {   // サブタイトル（C） - ボックス
                ...
            },
            {   // 詳細（D） - ボックス
                "type": "box",
                "layout": "vertical",
                "contents": [
                    {   // ラベル（D-1） - ボックス
                        "type": "box",
                        "layout": "horizontal",
                        "contents": [
                            {   // テキスト
                                "type": "text",
                                "text": "Label 1",
                                "size": "sm",
                                "color": "#555555",
                                "wrap": false,
                                "flex": 20
                            },
                            {   // 説明
                                "type": "text",
                                "text": "Description 1",
                                "size": "sm",
                                "color": "#111111",
                                "wrap": false,
                                "flex": 55
                            }
                        ],
                        "flex": 1,
                        "spacing": "sm"
                    },
                    {   // 説明（D-2） - ボックス
                        "type": "box",
                        "layout": "horizontal",
                        "contents": [
                            {   // テキスト
                                "type": "text",
                                "text": "Label 2",
                                "size": "sm",
                                "color": "#555555",
                                "wrap": false,
                                "flex": 20
                            },
                            {   // テキスト
                                "type": "text",
                                "text": "Description 2",
                                "size": "sm",
                                "color": "#111111",
                                "wrap": false,
                                "flex": 55
                            }
                        ],
                        "flex": 1,
                        "spacing": "sm"
                    }
                ],
                "spacing": "sm",
                "margin": "lg",
                "flex": 1
            }
        ],
        "spacing": "md"
    }
}
標準タイプ - ボタン (E)
ラベルセクション要素説明
EボタンボックスE-1～E-2を入れるボックスです。
  • "layout": "vertical"
  • "spacing": "xs"
  • "margin": "lg"
E-1ボタン
（linkスタイルのみを使用する場合）		ボタン
  • "style": "link"
  • "height": "sm"
  • "color": "{文字の色}"
  • "action" : { ... }
    このボタンをタップしたときに、LINEミニアプリのページを表示するようにURIアクションを指定してください。LINEミニアプリのトップページ以外のページを表示する場合は、パーマネントリンクを指定してください。
E-2ボタン
（primaryスタイルを使用する場合)		ボタン
  • 一番上のボタンに"style": "primary"、それ以外のボタンに"style": "link"を指定してください。"secondary"は使用できません。
  • "height": "md"
  • "color": "{文字の色または背景色}"
  • "action" : { ... }
    このボタンをタップしたときに、LINEミニアプリのページを表示するようにURIアクションを指定してください。LINEミニアプリのトップページ以外のページを表示する場合は、パーマネントリンクを指定してください。

primaryスタイルを使用する場合：

json
{
    "type": "bubble",
    "hero": { ... }
    },
    "body": {
        "type": "box",
        "layout": "vertical",
        "contents": [
            {   // タイトル（B） - ボックス
                ...
            },
            {   // サブタイトル（C） - ボックス
                ...
            },
            {   // 詳細（D） - ボックス
                ...
            },
            {   // ボタン（E） - ボックス
                "type": "box",
                "layout": "vertical",
                "contents": [
                    {   // ボタン（primary）
                        "type": "button",
                        "action": {
                            "type": "uri",
                            "label": "View details",
                            "uri": "https://miniapp.line.me/123456-abcedfg"
                        },
                        "style": "primary",
                        "height": "md",
                        "color": "#17c950"
                    },
                    {   // ボタン（link）
                        "type": "button",
                        "action": {
                            "type": "uri",
                            "label": "Share",
                            "uri": "https://miniapp.line.me/123456-abcedfg/share"
                        },
                        "style": "link",
                        "height": "md",
                        "color": "#469fd6"
                    }
                ],
                "spacing": "xs",
                "margin": "lg"
            }
        ],
        "spacing": "md"
    }
}
標準タイプ - フッター（F）

フッター（F）は、フッターブロックに入れてください。

ラベルセクション要素説明
--フッターブロック > ボックス
  • "layout": "vertical"
--セパレータ
  • "color": "#f0f0f0"
FフッターボックスF-1～F-3を入れるボックスです。
  • "layout": "horizontal"
  • "flex": 1
  • "spacing": "md"
  • "margin": "md"
F-1LINEミニアプリのアイコン画像
  • "url": "{画像のURL}"
  • "flex": 1
  • "gravity": "center"
F-2LINEミニアプリの名前テキスト
  • "text": "{LINEミニアプリの名前}"
    最大行数：1行
  • "flex": 19
  • "size": "xs"
  • "color": "#999999"
  • "weight": "bold"
  • "gravity": "center"
  • "wrap": false
F-3画像
  • "url": "https://vos.line-scdn.net/service-notifier/footer_go_btn.png"
  • "flex": 1
  • "gravity": "center"
  • "size": "xxs"
  • "action" : { ... }
    この画像をタップしたときに、LINEミニアプリのトップページ（https://miniapp.line.me/{your-liffId}）を表示するようにURIアクションを指定してください。
json
{
    "type": "bubble",
    "hero": { ... },
    "body": { ... },
    "footer": { // フッターブロック
        // ボックス
        "type": "box",
        "layout": "vertical",
        "contents": [
            {   // セパレータ
                "type": "separator",
                "color": "#f0f0f0"
            },
            {   // フッター（F） - ボックス
                "type": "box",
                "layout": "horizontal",
                "contents": [
                    {   // LINEミニアプリのアイコン（F-1）
                        "type": "image",
                        "url": "https://example.com/line-mini-app-icon.png",
                        "flex": 1,
                        "gravity": "center"
                    },
                    {   // LINEミニアプリの名前（F-2）
                        "type": "text",
                        "text": "Service name",
                        "flex": 19,
                        "size": "xs",
                        "color": "#999999",
                        "weight": "bold",
                        "gravity": "center",
                        "wrap": false
                    },
                    {   // >（F-3）
                        "type": "image",
                        "url": "https://vos.line-scdn.net/service-notifier/footer_go_btn.png",
                        "flex": 1,
                        "gravity": "center",
                        "size": "xxs",
                        "action": {
                            "type": "uri",
                            "label": "action",
                            "uri": "https://miniapp.line.me/123456-abcedfg"
                        }
                    }
                ],
                "flex": 1,
                "spacing": "md",
                "margin": "md"
            }
        ]
    }
}

画像リストタイプのガイドライン

画像リストタイプのFlex Messageは、以下のガイドラインに従ってください。

JSONファイルの例は、「ガイドラインに従ったJSONファイルの例」を参照してください。

注意
  • アクションは、ボタン（E）およびフッター（F）の指定されたコンポーネントにのみ設定できます。
  • ここで説明されていないプロパティは変更してはいけません。

画像リストタイプ - 画像（A）

画像（A）は、ヒーローブロックに入れてください。

ラベルセクション要素説明
A画像ヒーローブロック > 画像
  • "url": "{画像のURL}"
  • "size": "full"
  • "aspectRatio": "{width}:{height}"
    ただし、{height}には、{width} * 2以下の値を設定してください。
  • "aspectMode": "cover"
json
{
    "type": "bubble",
    "hero": { // ヒーローブロック
        // 画像（A）
        "type": "image",
        "url": "https://example.com/hero-image.png",
        "size": "full",
        "aspectRatio": "20:13",
        "aspectMode": "cover"
    },
    "body": {. . .}
}
画像リストタイプ - ボディ

タイトル（B）、サブタイトル（C）、詳細（D）、ボタン（E）を入れるボディブロックは以下のように指定してください。

ラベルセクション要素説明
--ボディブロック > ボックス
  • "layout": "vertical"
  • "spacing": "md"
json
{
    "type": "bubble",
    "hero": { ... },
    "body": { // ボディブロック
        // ボックス
        "type": "box",
        "layout": "vertical",
        "contents": [ ... ],
        "spacing": "md"
    }
}
画像リストタイプ - タイトル（B）
ラベルセクション要素説明
Bタイトルボックス
  • "layout": "vertical"
  • "spacing": "none"
Bタイトルテキスト
  • "text": "{タイトル}"
    最大行数：2行
  • "size": "lg"
  • "color": "#000000"
  • "weight": "bold"
  • "wrap": true
json
{
    "type": "bubble",
    "hero": { ... },
    "body": {
        "type": "box",
        "layout": "vertical",
        "contents": [
            {   // タイトル（B） - ボックス
                "type": "box",
                "layout": "vertical",
                "contents": [
                    {   // テキスト
                        "type": "text",
                        "text": "Main title",
                        "size": "lg",
                        "color": "#000000",
                        "weight": "bold",
                        "wrap": true
                    }
                ],
                "spacing": "none"
            }
        ],
        "spacing": "md"
    }
}
画像リストタイプ - サブタイトル（C）
ラベルセクション要素説明
Cサブタイトルボックス
  • "layout": "vertical"
  • "spacing": "none"
Cサブタイトルテキスト
  • "text": "{サブタイトル}"
    最大行数：2行
  • "size": "sm"
  • "color": "#999999"
  • "wrap": true
json
{
    "type": "bubble",
    "hero": { ... },
    "body": {
        "type": "box",
        "layout": "vertical",
        "contents": [
            {   // タイトル（B） - ボックス
                ...
            },
            {   // サブタイトル（C） - ボックス
                "type": "box",
                "layout": "vertical",
                "contents": [
                    {   // テキスト
                        "type": "text",
                        "text": "Sub-title",
                        "size": "sm",
                        "color": "#999999",
                        "wrap": true
                    }
                ],
                "spacing": "none"
            }
        ],
        "spacing": "md"
    }
}
画像リストタイプ - 詳細（D）
ラベルセクション要素説明
D詳細ボックス
  • "layout": "vertical"
  • "spacing": "xl"
  • "margin": "lg"
-詳細 - アイテムボックスD-1～D-4を1組だけ入れるボックスです。
  • "layout": "horizontal"
  • "flex": 1
D-1詳細 - 画像画像
  • "url": "{画像のURL}"
  • "flex": 3
  • "size": "sm"
  • "aspectRatio": "1:1"
  • "aspectMode": "cover"
-詳細 - テキストエリアボックスD-2～D-4を入れるボックスです。
  • "layout": "vertical"
  • "flex": 8
  • "spacing": "xs"
  • "margin": "md"
D-2詳細 - 標準テキストテキスト
  • "text": "{標準テキスト}"
  • "size": "md"
  • "color": "#111111"
D-3詳細 - 強調テキストテキスト
  • "text": "{強調テキスト}"
  • "size": "md"
  • "color": "#111111"
D-4詳細 - 画像＋テキストボックスD-4の画像とテキストを入れるボックス：
  • "layout": "horizontal"
  • "flex": 1
D-4の画像：
  • "flex": 8
  • "url": "{画像のURL}"
  • "gravity": "center"
  • "size": "xxs"
  • "aspectRatio": "1:1"
D-4のテキスト：
  • "flex": 85
  • "margin": "xs"
  • "text": "{テキスト}"
  • "size": "sm"
  • "color": "{色}"
  • "gravity": "center"
json
{
    "type": "bubble",
    "hero": { ... },
    "body": {
        "type": "box",
        "layout": "vertical",
        "contents": [
            {   // タイトル（B） - ボックス
                ...
            },
            {   // サブタイトル（C） - ボックス
                ...
            },
            {   // 詳細（D） - ボックス
                "type": "box",
                "layout": "vertical",
                "contents": [
                    {   // アイテム
                        "type": "box",
                        "layout": "horizontal",
                        "contents": [
                            {   // 画像
                                "type": "image",
                                "url": "https://example.com/item-image01.png",
                                "flex": 3,
                                "size": "sm",
                                "aspectRatio": "1:1",
                                "aspectMode": "cover"
                            },
                            {   // テキストエリア
                                "type": "box",
                                "layout": "vertical",
                                "contents": [
                                    {   // 標準テキスト（D-2）
                                        "type": "text",
                                        "text": "General text",
                                        "size": "md",
                                        "color": "#111111"
                                    },
                                    {   // 強調テキスト（D-3）
                                        "type": "text",
                                        "text": "Text to emphasize",
                                        "size": "md",
                                        "color": "#111111"
                                    },
                                    {   // 画像＋テキスト（D-4）
                                        "type": "box",
                                        "layout": "horizontal",
                                        "contents": [
                                            {   // 画像
                                                "type": "image",
                                                "url": "https://example.com/item-image02.png",
                                                "flex": 8,
                                                "gravity": "center",
                                                "size": "xxs",
                                                "aspectRatio": "1:1"
                                            },
                                            {   // テキスト
                                                "type": "text",
                                                "text": "Image + text",
                                                "flex": 85,
                                                "gravity": "center",
                                                "size": "sm",
                                                "color": "#17c950",
                                                "margin": "xs"
                                            }
                                        ],
                                        "flex": 1
                                    }
                                ],
                                "flex": 8,
                                "spacing": "xs",
                                "margin": "md"
                            }
                        ],
                        "flex": 1
                    }
                ],
                "spacing": "xl",
                "margin": "lg"
            }
        ],
        "spacing": "md"
    }
}
画像リストタイプ - ボタン (E)
ラベルセクション要素説明
EボタンボックスE-1～E-2を入れるボックスです。
  • "layout": "vertical"
  • "spacing": "xs"
E-1ボタン
（linkのみを使用する場合）		ボタン
  • "style": "link"
  • "height": "sm"
  • "color": "{文字の色}"
  • "action" : { ... }
    このボタンをタップしたときに、LINEミニアプリのページを表示するようにURIアクションを指定してください。LINEミニアプリのトップページ以外のページを表示する場合は、パーマネントリンクを指定してください。
E-2ボタン
（primaryを使用する場合)		ボタン
  • 一番上のボタンに"style": "primary"、それ以外のボタンに"style": "link"を指定してください。"secondary"は使用できません。
  • "height": "md"
  • "color": "{文字の色または背景色}"
  • "action" : { ... }
    このボタンをタップしたときに、LINEミニアプリのページを表示するようにURIアクションを指定してください。LINEミニアプリのトップページ以外のページを表示する場合は、パーマネントリンクを指定してください。

primaryを使用する場合：

json
{
    "type": "bubble",
    "hero": { ... }
    },
    "body": {
        "type": "box",
        "layout": "vertical",
        "contents": [
            {   // タイトル（B） - ボックス
                ...
            },
            {   // サブタイトル（C） - ボックス
                ...
            },
            {   // 詳細（D） - ボックス
                ...
            },
            {   // ボタン（E） - ボックス
                "type": "box",
                "layout": "vertical",
                "contents": [
                    {   // ボタン（primary）
                        "type": "button",
                        "action": {
                            "type": "uri",
                            "label": "View details",
                            "uri": "https://miniapp.line.me/123456-abcedfg"
                        },
                        "style": "primary",
                        "height": "md",
                        "color": "#17c950"
                    },
                    {   // ボタン（link）
                        "type": "button",
                        "action": {
                            "type": "uri",
                            "label": "Share",
                            "uri": "https://miniapp.line.me/123456-abcedfg/share"
                        },
                        "style": "link",
                        "height": "md",
                        "color": "#469fd6"
                    }
                ],
                "spacing": "xs"
            }
        ],
        "spacing": "md"
    }
}
画像リストタイプ - フッター（F）
ラベルセクション要素説明
--フッターブロック > ボックス
  • "layout": "vertical"
--セパレータ
  • "color": "#f0f0f0"
FフッターボックスF-1～F-3を入れるボックスです。
  • "layout": "horizontal"
  • "flex": 1
  • "spacing": "md"
  • "margin": "md"
F-1LINEミニアプリのアイコン画像
  • "url": "{画像のURL}"
  • "flex": 1
  • "gravity": "center"
F-2LINEミニアプリの名前テキスト
  • "text": "{LINEミニアプリの名前}"
    最大行数：1行
  • "flex": 19
  • "size": "xs"
  • "color": "#999999"
  • "weight": "bold"
  • "gravity": "center"
  • "wrap": false
F-3画像
  • "url": "https://vos.line-scdn.net/service-notifier/footer_go_btn.png"
  • "flex": 1
  • "gravity": "center"
  • "size": "xxs"
  • "action" : { ... }
    この画像をタップしたときに、LINEミニアプリのトップページ（https://miniapp.line.me/{your-liffId}）を表示するようにURIアクションを指定してください。
json
{
    "type": "bubble",
    "hero": { ... },
    "body": { ... },
    "footer": { // フッターブロック
        // ボックス
        "type": "box",
        "layout": "vertical",
        "contents": [
            {   // セパレータ
                "type": "separator",
                "color": "#f0f0f0"
            },
            {   // フッター（F） - ボックス
                "type": "box",
                "layout": "horizontal",
                "contents": [
                    {   // LINEミニアプリのアイコン（F-1）
                        "type": "image",
                        "url": "https://example.com/line-mini-app-icon.png",
                        "flex": 1,
                        "gravity": "center"
                    },
                    {   // LINEミニアプリの名前（F-2）
                        "type": "text",
                        "text": "Service name",
                        "flex": 19,
                        "size": "xs",
                        "color": "#999999",
                        "weight": "bold",
                        "gravity": "center",
                        "wrap": false
                    },
                    {   // >（F-3）
                        "type": "image",
                        "url": "https://vos.line-scdn.net/service-notifier/footer_go_btn.png",
                        "flex": 1,
                        "gravity": "center",
                        "size": "xxs",
                        "action": {
                            "type": "uri",
                            "label": "action",
                            "uri": "https://miniapp.line.me/123456-abcedfg"
                        }
                    }
                ],
                "flex": 1,
                "spacing": "md",
                "margin": "md"
            }
        ]
    }
}