[LINE] Share Traget Pickerの実力を知ってほしい

Share Target Pickerいいぞ

先日リリースされた、LINE APIのShare Target Picker。
ちょこちょこQiitaで見かけたりするんですが、真の実力をまだ理解されていないのでは？？と思ったので、
LINE API Expertの端くれとして布教してみます。
まずは見て下さい。こんなメッセージをボタン1つでシェアできます。

キレイなフォーマットですよね。

さらに、JSを使って動的に生成できるので、たとえば1つ目のメッセージで言うと、
コンプリートした人がシェアするとこんな風に%が全部100%になって☑が全部つく！
みたいなことができるわけですねぇ

なので、データに応じていろんなシェアをかんたんに綺麗にできる、というのが魅力です。

いいですよね。

こんなのを友達にサクッとシェアー！をできるように、以下では細かい仕組みを説明していきます。

そもそもLINE API、LIFFについて

LINEはボットのイメージが強いですが、
実際コミュニケーションのやり取りだけで完結するキラーアプリをみなさんが普段使っているかというと、
使っていないと思うんですが、
それもそのはずでメッセージの単発のやりとりだけだとフォーマットの制約から、中々リッチにしづらい面があります。

なので、LINEとシームレスに繋がりながら、Web(HTML/CSS/JavaScript)を利用できる機能があります。
こんなのですね。

それを、LIFF(Line Frontend Framework)といいます。

これは要はホスティングされているWebページを呼び出しているだけです。
ただし、LINEにLIFFとして登録し、WebページにLINEのLIFF SDKを組み込むことで、
リッチな独自機能(代わりにメッセージ送信したり、ログインしたり)をJavaScriptから呼び出せるようになっています！

Share Target Pickerについて

これは先程説明した、LIFFによる機能の1つです。

かんたんにいうと、「LINEでの情報シェアを、かんたんに、リッチにできる」ものです。

かんたんは今までもかんたんで、今回強調したいのは、そのリッチさです。

では最初にも出したのですが、こちらについて詳しく説明していきます。
説明がわかりやすいようにTwitterを使い始めた人が最初にやるステップの進行状況を表してます。
これを人にシェアするのはすごい自己主張ですね..

仕組み

LINEにはメッセージの種類がいくつかあります。

• テキストメッセージ
• 画像メッセージ
• 動画メッセージ
• 音声メッセージ
• 位置情報メッセージ
• テンプレートメッセージ
• Flex Message

これらを送れるのですが、特に自由なフォーマットを提供してくれるのがFlex Messageです。
冒頭で紹介した画像はすべてFlex Messageです。

Flex MessageはJSONでお約束に沿って組み立てると表示してくれるので、
高度な技術は必要ありません。

JSONのお約束を守ればデザイナーでなくてもリッチな表現をつくれますし、
以下のシミュレーターを使うことで、よりかんたんに生成することができます。

このFlex Message Simulatorでは、

• サンプルがたくさん
• リアルタイムにプレビュー表示
• どの部分を修正しているかわかる
• 入力アシスト(セレクトボックスなど)

をやってくれるので、なんとなくイジイジしているときれいなフォーマットができちゃいます。

それでは、そのお約束を少しずつ紹介してみます。

JSONの中身

まず、全体はこんなイメージでカルーセルが組まれています。

contentsの中に配列で中身の構成を入れていくんですね。
contentsの中の1つ1つが、カルーセルの1つ1つの項目になっていますね。

HTMLのように全体の要素からブレイクダウンしていくイメージです。

{
  "type": "carousel",
  "contents": [
    ${ユーザー作成},
    ${ツイート},
    ${その他機能},
  ]
}

その中で、特に「ユーザー作成」のところを見ていきましょう。
こいつです。

ざっくりと、headerとbodyがありますね。
お察しの通り、背景が青い部分がheader、背景の白い部分がbodyです。
かんたんです。
sizeを変えるともちろんこの枠の大きさが変わります。

{
  "type": "bubble",
  "size": "nano",
  "header": {
    // object
  },
  "body": {
    // object
  },
  "styles": {
    "footer": {
      "separator": false
    }
  }
}

ではheaderの中身から行きましょう。

  "header": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      // objects
    ],
    "backgroundColor": "#27ACB2",
    "paddingTop": "19px",
    "paddingAll": "12px",
    "paddingBottom": "16px"
  },

また出てきましたね、contents。
まだここは文字など出てこずに、背景の色や、周囲のスペースのこと、中身のものの並べ方などスタイルに関することが入っています。
CSSに馴染みのある人だと、単語もイメージが湧くのではないでしょうか。
次にcontentsの中身を見ましょう。

    "contents": [
      {
        "type": "text",
        "text": "ユーザー作成",
        "color": "#ffffff",
        "align": "start",
        "size": "xs",
        "gravity": "center"
      },
      {
        "type": "text",
        "text": "66%",
        "color": "#ffffff",
        "align": "start",
        "size": "xs",
        "gravity": "center",
        "margin": "lg"
      },
      {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "box",
            "layout": "vertical",
            "contents": [
              {
                "type": "filler"
              }
            ],
            "width": "66%",
            "backgroundColor": "#0D8186",
            "height": "6px"
          }
        ],
        "backgroundColor": "#9FD8E36E",
        "height": "6px",
        "margin": "sm"
      }
    ],

やっと文字がでてきましたね。

ユーザー作成、とあります。
66%、という文字もあります。
先程、header直下の項目で、layout: verticalという項目が設定されたので、
この配列は縦に要素が並んでいます(cssっぽいお話)。

そして順番に上から、

• テキスト: ユーザー作成
• テキスト: 66%
• ボックス: プログレスバー

というようになっています。

全部を何も見ずに書くのは大変ですが、simulatorがあると、このぐらいの概念理解をすれば組み立てていくことはできるかと思います。

なんとなくわかってきましたね。

headerの中でスタイルやテキストなどを設定し、更にcontentsの中で、また小さい要素のスタイルやテキストなどを設定し、contentsを持っていたら更に小さい要素のスタイルやテキストを設定し、contentsを持っていたら....
というように作っていきます。

では、bodyの方も見てみましょう。

  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "box",
        "layout": "horizontal",
        "contents": [
          {
            "type": "text",
            "text": "☑名前\n☑メール\n□メール認証",
            "color": "#8C8C8C",
            "size": "sm",
            "wrap": true
          }
        ],
        "flex": 1
      }
    ],
    "spacing": "md",
    "paddingAll": "12px"
  },

同じですね。bodyの中にスタイルがあり、contentsの中にまたスタイルとcontentsがあり、その中にスタイルとテキストがあります。

このあたりの概念がわかると、あとはFlex Message Simulatorでサンプルを見つつ、入力アシストを受けつつ、プレビューを見て、
できるのではないか、と思います！

おわりに

なんか書いてたらめっちゃ長くなったのでおしまい。

実際にJSを用いて動的に送るサンプルとかも載せたかったけど、リアクションがあったらまた今度にやるということにします。

おやすみなさい！！