プログラミングメカブログ

Adults cling to the past, Children want to escape to the future

プログラミングメカブログ

Adults cling to the past, Children want to escape to the future

9月

24

LINEで送るボタン

  • POSTED BY 小谷松 丈樹 IN 調査
  • No Comments

背景

line
LINEの普及率が高まり、ビジネスにおいても利用されるケースが増えてきています。
そこで、サイトに「LINEで送る」というボタンなどが実装されているのを見るようになったので、
「LINEで送る」ボタンについて、詳しい実装方法を調べてみました。

設置方法

まずは、設置方法を見ていきましょう。公式に載ってますね。
送るボタン設置方法
ポチポチして出来たHTMLをそのまま貼り付ければいいですよ、というタイプですね。
下記が出来たコードです。

いかにも<span>内にボタンを作りそうなJavaScriptですね。
パラメータのv=20140411はjsファイルの最終更新日?キャッシュ削除用と考えても良さそうですね。

仕様の確認

では、実際に何をしているか、line-button.jsを見てみましょう。

<span>タグ内に、指定オプションに基づいてボタンを生成していますね。
深く見て行くと、createTag() が実際に出力するタグを作っています。

こんな感じ。
ソースのコメントに書いてある通り、ただのアンカータグにただのイメージタグが入っているだけです。
ソースを追っていって結論を出すと、アンカーのURLを下記にすれば実装可能。
//line.me/R/msg/text/?{URLエンコードされた共有したい文字列の”\”を”%20″に置換}

つまりは、HTMLメールなどのJavaScriptが動かない環境であっても、
URLの指定さえ間違ってなければ「LINEで送る」ボタンは実装可能ということのようですね。

公式の技術仕様にも書いてあるとおり、まずはブラウザが開かれて、プロトコル指定でLINEアプリを起動。
(※プロトコルではなく、「カスタムURLスキーマ」というらしいです。)
  line://msg/<CONTENT TYPE>/<CONTENT KEY>
アプリ側ではパラメータを受け取って、送る相手を選択する画面を開けるようになっている感じですね。

最後に

色々見てきましたが、ガイドラインを確認し忘れてましたね。
利用条件の項の(2)が分かりやすいかな。

(2) 設置者は、LINEで送るボタンを外部サイトに設置する場合、専用アイコンを使用しなければなりません。但し、設置者は、専用アイコンの代わりに「LINEで送る」又は「LINE」というテキスト文字を使用することができます。

設置時は必ずLINEで送れますと明示しろって感じですね。
ガイドラインは必ず守りましょう!

Tags :

コメントを残す

Please type the characters of this captcha image in the input box

Please type the characters of this captcha image in the input box