# LINEミニアプリの構造

LINEミニアプリのページは、(A)ヘッダーおよび(B)ボディで構成されています。

LINEミニアプリのヘッダーは、プラットフォームネイティブのコンポーネントが使用されており、LINEが自動生成します。

ヘッダーは、以下のコンポーネントで構成されています。

番号 コンポーネント 説明
1 サービス名 LINEミニアプリのページで指定した<title>要素が表示されます。フォントは設定できません。
- サブテキスト エンドポイントURLとは異なるドメインのページにアクセスしている場合、「サービス名」の下にコンテンツの元のドメインが表示されます。
2 アクションボタン タップすると、ユーザーがLINEミニアプリのページを友だちとシェアしたり、ユーザーのKeepに保存したり、ページをリロードするためのオプションが表示されます。オプションのテキストは設定できません。
3 閉じるボタン LINEミニアプリを閉じます。
4 戻るボタン
(iOS版LINEのみ)
前のページを表示します。
5 ローディングバー 現在のページの読み込み状況を表示します。

# ヘッダーの背景色をブランドカラーに変更する

ヘッダーでは、標準で以下の色が使用されます。

  • 背景:白
  • テキストおよびボタンのラベル:黒

ヘッダーの背景色をブランドカラーに変更できます。 LINE Developersコンソールの[LIFF]タブで、「ヘッダー背景色」に16進数カラーコード(例:#00c300)を入力してください。

ヒント

テキストおよびボタンのラベルの色は、背景色にあわせて自動的に白または黒に設定されます。

# ボディ

ボディはWebViewが使用されています。HTML5およびLIFFを活用して、サービスごとに開発してください。

LINEミニアプリの開発に関する仕様については、「LINEミニアプリの仕様」を参照してください。