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

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

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

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

# ガイドライン

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

注意

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

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

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

target picker

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

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

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

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

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

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

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

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

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

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

# 標準タイプ - 画像（A）

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

ラベル セクション 要素 説明
A 画像 ヒーローブロック > 画像
  • "url": "{画像のURL}"
  • "size": "full"
  • "aspectRatio": "{width}:{height}"
    ただし、{height}には、{width} * 2以下の値を設定してください。
  • "aspectMode": "cover"
{
    "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"
{
    "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
{
    "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
{
    "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
{
    "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スタイルを使用する場合：

{
    "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://liff.line.me/123456-abcedfg/"
                        },
                        "style": "primary",
                        "height": "md",
                        "color": "#17c950"
                    },
                    {   // ボタン（link）
                        "type": "button",
                        "action": {
                            "type": "uri",
                            "label": "Share",
                            "uri": "https://liff.line.me/123456-abcedfg/share"
                        },
                        "style": "link",
                        "height": "md",
                        "color": "#469fd6"
                    }
                ],
                "spacing": "xs",
                "margin": "lg"
            }
        ],
        "spacing": "md"
    }
}

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

ラベル セクション 要素 説明
- - フッターブロック > ボックス
  • "layout": "vertical"
- - セパレータ
  • "color": "#f0f0f0"
F フッター ボックス F-1～F-3を入れるボックスです。
  • "layout": "horizontal"
  • "flex": 1
  • "spacing": "md"
  • "margin": "md"
F-1 LINEミニアプリのアイコン 画像
  • "url": "{画像のURL}"
  • "flex": 1
  • "gravity": "center"
F-2 LINEミニアプリの名前 テキスト
  • "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://liff.line.me/{your-liff-ID}/）を表示するようにURIアクションを指定してください。
{
    "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://liff.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"
{
    "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"
{
    "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
{
    "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
{
    "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"
{
    "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を使用する場合：

{
    "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://liff.line.me/123456-abcedfg/"
                        },
                        "style": "primary",
                        "height": "md",
                        "color": "#17c950"
                    },
                    {   // ボタン（link）
                        "type": "button",
                        "action": {
                            "type": "uri",
                            "label": "Share",
                            "uri": "https://liff.line.me/123456-abcedfg/share"
                        },
                        "style": "link",
                        "height": "md",
                        "color": "#469fd6"
                    }
                ],
                "spacing": "xs"
            }
        ],
        "spacing": "md"
    }
}
ラベル セクション 要素 説明
- - フッターブロック > ボックス
  • "layout": "vertical"
- - セパレータ
  • "color": "#f0f0f0"
F フッター ボックス F-1～F-3を入れるボックスです。
  • "layout": "horizontal"
  • "flex": 1
  • "spacing": "md"
  • "margin": "md"
F-1 LINEミニアプリのアイコン 画像
  • "url": "{画像のURL}"
  • "flex": 1
  • "gravity": "center"
F-2 LINEミニアプリの名前 テキスト
  • "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://liff.line.me/{your-liff-ID}/）を表示するようにURIアクションを指定してください。
{
    "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://liff.line.me/123456-abcedfg/"
                        }
                    }
                ],
                "flex": 1,
                "spacing": "md",
                "margin": "md"
            }
        ]
    }
}