LINE で共有するリンク・ディープリンクについて調べた

テキストや URL を LINE で共有するためのリンク・ディープリンクについて調べました。
LINEで送るボタンLINE URLスキームを使う の 2 通りの方法があります。

LINEで送るボタン

LINEで送るボタンカスタムアイコンのリンクを使うことで、URL を LINE で送るリンクを作成できます。 URL を送ることを目的としていて、リンク URL 中の url パラメータに共有する URL を設定します。

以下 URL 中のパラメータとして、共有する URL を {URL}、テキストを {TEXT} として表します。

  • リンク URL: https://social-plugins.line.me/lineit/share?url={URL}
  • パラメータ url: 共有する URL
  • パラメータ text: 共有するテキスト(ドキュメントに記載なし)

例: https://social-plugins.line.me/lineit/share?url=http://example.com

ドキュメントには記載されていませんが、ブラウザで開いた場合のみ text パラメータに設定したテキストがテキストボックスに入力されます。 ディープリンク(アプリで開く)の場合は text パラメータは無視されて、url パラメータに設定された URL がテキストボックスに入力されます。

例: https://social-plugins.line.me/lineit/share?url=http://example.com&text=foobar

LINE URLスキームを使う

LINE URLスキームを使うテキストメッセージを送る機能を使うことで、テキストを LINE で送るリンクを作成できます。

  • リンク URL: https://line.me/R/msg/text/?{TEXT}
  • クエリ文字列: 共有するテキストを URL エンコードしたもの

例: https://line.me/R/msg/text/?foobar

テキストメッセージを送ることを目的としています。 ただしブラウザで開いた場合のみ、HTTP Header の Referer に設定された URL も共有されるようになっているようです。

react-share を使って LINE で共有するボタンを作る

React のソーシャルメディアボタンライブラリである react-share が LINE に対応していなかったので、LINE で共有するボタンを作成してみました。 アイコンの扱いについてガイドラインを守っているか微妙なので、プルリクエストは送っていません。

line-share-icon.js

LINE APP ICON GUIDELINE から Circle type のアイコンを AI 形式ダウンロードして SVG 形式でエクスポート後、svgr を使って React コンポーネントに変換しています。 react-share では動的に SVG アイコンが丸型かどうかを変えられますが、今回は丸型で固定しています。

import React from 'react';
import PropTypes from 'prop-types';

const LineShareIcon = props => (
  <svg
    style={{ isolation: 'isolate' }}
    viewBox="0 0 160 160"
    width={props.size}
    height={props.size}
  >
    <defs>
      <clipPath id="a">
        <path d="M0 0h160v160H0z" />
      </clipPath>
    </defs>
    <g clipPath="url(#a)">
      <path
        d="M160 80c0 44.183-35.817 80-80 80S0 124.183 0 80 35.817 0 80 0s80 35.817 80 80z"
        fill="#00B900"
      />
      <path
        d="M133.213 75.196c0-23.811-23.87-43.183-53.213-43.183-29.339 0-53.212 19.372-53.212 43.183 0 21.347 18.93 39.224 44.502 42.604 1.732.373 4.091 1.143 4.688 2.624.538 1.345.351 3.453.172 4.812 0 0-.624 3.755-.76 4.555-.232 1.345-1.068 5.262 4.61 2.869 5.68-2.393 30.645-18.045 41.809-30.895h-.002c7.712-8.457 11.406-17.04 11.406-26.569z"
        fill="#FFF"
      />
      <path
        d="M69.188 63.69h-3.733c-.572 0-1.036.464-1.036 1.035v23.186c0 .571.464 1.034 1.036 1.034h3.733c.572 0 1.036-.463 1.036-1.034V64.725c0-.571-.464-1.035-1.036-1.035zM94.88 63.69h-3.732c-.574 0-1.038.464-1.038 1.035v13.774L79.485 64.15a1.024 1.024 0 0 0-.087-.112c-.02-.023-.042-.043-.062-.064l-.02-.017c-.018-.016-.036-.032-.055-.046l-.027-.021-.054-.037-.031-.019a1.561 1.561 0 0 0-.088-.047l-.06-.025-.033-.012-.062-.02-.036-.009-.06-.014a.682.682 0 0 0-.042-.005c-.019-.004-.038-.005-.055-.007l-.055-.004-.036-.001H74.89c-.572 0-1.037.464-1.037 1.035v23.186c0 .571.465 1.034 1.037 1.034h3.732c.574 0 1.038-.463 1.038-1.034V74.139l10.638 14.37a1.073 1.073 0 0 0 .338.301c.01.007.02.011.029.016l.049.025.051.02c.011.004.02.01.031.012.025.01.048.016.07.024.006 0 .011.003.015.003.084.023.173.035.267.035h3.732c.572 0 1.036-.463 1.036-1.034V64.725c0-.571-.464-1.035-1.036-1.035zM60.191 83.14H50.05V64.725c0-.572-.464-1.036-1.036-1.036H45.28c-.572 0-1.036.464-1.036 1.036v23.186c0 .277.111.53.29.714a.11.11 0 0 0 .014.018l.015.014c.187.178.437.288.716.288H60.191c.572 0 1.035-.464 1.035-1.036v-3.733c0-.572-.463-1.036-1.035-1.036zM115.492 69.496c.572 0 1.035-.464 1.035-1.037v-3.732c0-.572-.463-1.036-1.035-1.036H100.58c-.28 0-.532.11-.72.292l-.011.01a1.024 1.024 0 0 0-.304.732V87.911c0 .278.111.529.289.716l.015.016a1.025 1.025 0 0 0 .731.302H115.492c.572 0 1.035-.464 1.035-1.036v-3.733c0-.571-.463-1.036-1.035-1.036h-10.141v-3.92h10.141c.572 0 1.035-.464 1.035-1.036v-3.732c0-.573-.463-1.039-1.035-1.039h-10.141v-3.917h10.141z"
        fill="#00B900"
      />
    </g>
  </svg>
);

LineShareIcon.propTypes = {
  size: PropTypes.number
};

LineShareIcon.defaultProps = {
  size: 160
};

export default LineShareIcon;

line-share-button.js

LINEで送るボタンの共有方法を使っています。

import PropTypes from 'prop-types';
import createShareButton from 'react-share/es/utils/createShareButton';
import objectToGetParams from 'react-share/es/utils/objectToGetParams';

function lineLink(url, { title }) {
  return (
    'https://social-plugins.line.me/lineit/share' +
    objectToGetParams({
      url,
      text: title
    })
  );
}

const LineShareButton = createShareButton(
  'line',
  lineLink,
  props => ({
    title: props.title,
    url: props.url
  }),
  {
    title: PropTypes.string,
    url: PropTypes.string
  },
  {
    windowWidth: 500,
    windowHeight: 500
  }
);

export default LineShareButton;

使い方

<LineShareButton url={'http://example.com'} title={'foobar'}>
  <LineShareIcon size={32} />
</LineShareButton>

まとめ

LINE で共有するためのリンク・ディープリンクについて調べました。
URL を共有するための LINEで送るボタン、テキストを送信するための LINE URLスキーム の 2 通りの方法について紹介しました。
react-share を使って LINE で共有するための React コンポーネントを作成しました。