閲覧ユーザに、ウェブページを友達にシェアしてもらいたい場合に設置する「LINEで送る」ボタンの話。
なぜこの記事を書いたか
「LINEで送る」ボタンは過去に何度も実装しているのだが、近日実装しているサイトでシェアされた内容がおかしいという連絡があった。
調査してみると、実行環境によって挙動が微妙に異なり、意図せぬ動作もあったので、まとめておくことにした。
何がしたいか
ボタンを押すと、LINEに投稿する画面が開き、送信先を選んで投稿すると、以下のようなメッセージが送られてほしい。
シェアしてほしいURLとテキストが含まれているのがポイントだ。
LINE公式ボタンは要件を満たさない
LINEが公式に提供しているコードスニペットを貼り付けることで、「LINEで送る」ボタンをウェブサイトに実装することができる。
だが、サイトデザインの都合上、このような公式提供ボタンではなく、カスタムボタンで実装したい。
また、シェアするテキストを指定できないことも、公式提供ボタンを使わない理由だ。
実装方法
LINEシェア画面を表示するURLに、シェアしてほしいURLとテキストをパラメータに付けた上で、ユーザーにアクセスさせる。
シェア画面のURLは２つある
- LINE Social Plugins https://social-plugins.line.me/lineit/share
- https://line.me/R/msg/text/
後者はずっと以前から使っていた気がするが、公式サイトを見ると、前者のLINE Social Pluginsが紹介されている。
おそらくSocial Pluginsの方が推奨なのだろう。
後者のURLを開いても、前者のURLにリダイレクトされるようだし、どこかのタイミングで新しい方式としてSocial Pluginsが導入されたのだろう。後者は互換性を維持するために生かされているだけかもしれない。
シェア画面を開く方法
方法は2つ。
- 普通のAタグ
- JavaScriptで
window.openで開く
挙動確認
シェア画面2つと、画面を開く方法2つを組み合わせて、4つの方法を試してみた。
CodePen
- [A] Aタグで LINE Social Plugins
- [B] Aタグで 旧シェア画面
- [C]
window.openで LINE Social Plugins - [D]
window.openで 旧シェア画面
結論から言うと、画面を開く方法、つまりAタグかwindow.openかは違いがなかった。（[A]と[C]、[B]と[D]は同じ）
だが、シェア画面URLには挙動に違いがあった。
さらに重要なことに、PCかモバイル端末かによって違いがあった。
PCブラウザの挙動
macosのChromeとFirefoxで実行。
新規ウインドウでシェア画面が立ち上がる。シェアすると以下のメッセージが投稿される。
[A]と[C]は問題ないが、[B]と[D]では、https://cdpn.io/という意図しないURL文字列が含まれている。
シェア画面を開いた参照元のドメインが追加されてしまうようなのだ。
シェアしたいURLと参照元ドメインが同一であって、同じ結果（つまりURLが二重に記述される）となる。
モバイルブラウザの挙動
iOS Safari, Chromeで実行。
LINEアプリが起動し、送信先の選択を促される。送信先を選ぶと、以下のメッセージが投稿される。
[B]と[D]は問題ないが、[A]と[C]ではシェアテキストが無い。
考察
参照元URLが余計に付加される問題
PCブラウザで旧シェア画面https://line.me/R/msg/text/を使うと発生する。
https://line.me/R/msg/text/にアクセスすると、Social Pluginsつまり新しい方式のURLにリダイレクトされるのだが、その際に参照元ドメインをパラメータに付加するようなのだ。
# 開くURL
https://line.me/R/msg/text/?hello%0Ahttps://example.com
# リダイレクト先
https://social-plugins.line.me/lineit/share?url=https://cdpn.io/&text=hello%0Ahttps://example.com&from=line_scheme
url=https://cdpn.io/がそれだ。
これのせいで、参照元ドメインURLがシェア内容に意図せず追加されてしまう。
LINEの仕様なのでどうしようもない。端的に余計なお世話である。
モバイルではこれが発生しないのは、social-plugins.line.meにリダイレクトすることなく、LINEアプリが起動するからだと思われる。
では、参照元情報を渡すことなく、シェア画面を開くとどうなるのだろうか。Aタグにrel="noreferer"を付加するのだ。
<a href="https://line.me/R/msg/text/?hello%20LINE_B2%0Ahttps://example.com" target="_blank" rel="noreferrer">LINEで送る</a>
そうすると、シェア画面で投稿するためのボタン（「トーク」や「Keepメモ」）が非活性となり、投稿できない。
いやいやいや、何なんだよこの仕様は。
シェアテキストが無視される問題
モバイルブラウザで、Social Pluginshttps://social-plugins.line.me/lineit/shareを開くと発生する。
これは正直なところ何が起こっているのか良くわからない。
憶測でしかないが、iOSのセキュリティ的な制限に引っ掛かっていて、LINEアプリにシェアテキストを渡せていないのかもしれない。だとしたら、LINEアプリのバグであると言えよう。
（かつては問題なかったが、iOSの更新に伴ってどこかのタイミングでこの問題が発生するようになったのかもしれない。そして、）LINEアプリのアップデートで、そのうち解消するかもしれない。
iOSでしか試していないので、Androidでも同じ挙動になるのか、誰か確認してほしい。
確認環境
iPhone 13 mini / iOS 17.5.1
LINEアプリ 13.11.0
結論
指定のテキストをシェアさせることが要件なのであれば、Social Plugins https://social-plugins.line.me/lineit/shareでは問題があるので、
旧来のシェア画面https://line.me/R/msg/text/を使うしかないだろう。
PCでシェアすると、余計なURLが末尾にくっついてしまうが、そこは目をつぶるしかない。
要するに、公式推奨の新しい方式は使えないというわけだ。
やれやれ、何てこった。
余談
シェア画面がhttps://line.me/R/msg/text/から、https://social-plugins.line.me/lineit/shareに変わったことについて、
検索しても、歴史的な経緯はよくわからなかった。
公式サイトは今現在の方法を提示しているだけだし、巷の技術系情報サイトは、記事を執筆したその時に有効な方法を紹介するだけだ。（このQiita記事だって例外ではない）
情報がないのではない、経緯が追えないのだ。
歴史家の仕事が重要だとわかる。そして、ウェブの世界に歴史家はまだ（ほとんど）いない。