kintoneをLINEと連携してみた

TGIF！トッティです。

最近やっと涼しくなってきましたね、良いことです。

さて、先週空いてしまって悲しんだ方も多かったと思います、すいません。そうです、「それ、JavaScriptでやってみよう」のことです。

今回は、日本を代表するメッセージアプリ「LINE」と連携します。ご存じですか？LINE、そう、そのLINEです。

ご存知だと思いますが、これがLINE

 LINEと連携とは

LINEと連携する、すなわち「LINEで送る」ボタンを設置したいのです。様々なサイトに設置され、目にする機会が増えてきたと思いますが下記画像の様なボタンです。

こんなおしゃれなサイトの名前やURL等を友達と簡単に共有できる「LINEで送る」ボタン

そう、この「LINEで送る」ボタンをkintone内に設置したいのです。

「LINEで送る」はどうやるか

ありがたいことに設置方法を説明する公式サイトがありました。

twitterと同様にボタン設置方法が丁寧に説明されている

使いまわせるものは使いまわす

さて、早速kintoneと連携をしたいのですが、前回twitterと連携したJavaScriptの大部分が使い回し出来そうです。下記におさらいします。

[code language=”javascript”]
(function () {
"use strict";
kintone.events.on('app.record.detail.show', function (event) {
if (document.getElementById ('my_index_button') != null) {
return;
}

var tweet = event.record.tweet.value;

var myIndexButton = document.createElement('button');
myIndexButton.id = 'my_index_button';
myIndexButton.innerHTML ='<a target="_blank" href="https://twitter.com/intent/tweet?text='+tweet+'@cybozu_startups" class="twitter-mention-button" data-lang="ja"">Cstapに向かって呟く</a>';

kintone.app.record.getHeaderMenuSpaceElement().appendChild(myIndexButton);

});
})();
[/code]

前回のkintoneアプリを使いまわすので、LINEで送りたい内容のフィールドコードは”tweet”のままです。ですので、変更点は12行目のみ、ということになります。

これを使う

 使った結果

[code language=”javascript”]
(function () {
"use strict";
kintone.events.on('app.record.detail.show', function (event) {
if (document.getElementById ('my_index_button') != null) {
return;
}

var tweet = event.record.tweet.value;

var myIndexButton = document.createElement('button');
myIndexButton.id = 'my_index_button';
myIndexButton.innerHTML ='<a href="http://line.me/R/msg/text/?'+tweet+'">LINE</a>';

kintone.app.record.getHeaderMenuSpaceElement().appendChild(myIndexButton);

});
})();
[/code]

12行目の

<a target="_blank"  href="https://twitter.com/intent/tweet?text='+tweet+'@cybozu_startups" class="twitter-mention-button" data-lang="ja"">Cstapに向かって呟く</a>

を

<a href="http://line.me/R/msg/text/?'+tweet+'">LINE</a>

に変更しました。どうでしょうか。動くでしょうか。

す
る
と

表示は、できたLINEボタン

LINEボタン現る

ですが、押すと。。。

なんで？

PC版には対応していないらしい

調べてみると、PCにインストールしたLINEアプリには対応していない様子。とはいえ、スマートフォンのkintoneにはJavaScriptでボタンを表示させることはできないし。。。

もしかしたら、タブレットでできるかも！

完全にひらめきですよね。モバイルにしか対応していないLINEアプリの起動、ボタン設置はPCビューにしか対応していないkintone、法の抜け穴ってこういうことかな、って。私はiPadを手にしました。

結論を言うと、タブレットで問題無くLINEアプリは起動、kintone内のデータを引用したメッセージが送れました！以下iPadでの操作画面のキャプチャです。

どんなメッセージを送ろうか

いざ、押す！

LINEが立ち上がった！

とってぃとのトークで送りましょう

LINEはかなり慎重

kintone内のテキスト情報を持ってこれた！

画像だけだと分かりにくいと思いますので、下記にvine動画を貼っておきます。イメージ湧きますか。

kintoneから情報を引っ張ってLINEで送ることがこんなに大変(対応機種的な意味で)だとは思いませんでした！もし、自分のもとにiTunesカードを買ってくれとの依頼が来たら快諾しよう、そう思えた金曜日でした。

皆さん、良い週末を。

それではまた。