無料通話・メールアプリ LINE(ライン)

kintoneをLINEと連携してみた

無料通話・メールアプリ LINE(ライン)

TGIF!トッティです。

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

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

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

無料通話・メールアプリ LINE(ライン)
ご存知だと思いますが、これがLINE
 LINEと連携とは

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

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

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

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

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

LINEで送るの設置方法
twitterと同様にボタン設置方法が丁寧に説明されている
使いまわせるものは使いまわす

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

 

<br />
(function () {<br />
&quot;use strict&quot;;<br />
kintone.events.on(&#039;app.record.detail.show&#039;, function (event) {<br />
if (document.getElementById (&#039;my_index_button&#039;) != null) {<br />
return;<br />
}</p>
<p>var tweet = event.record.tweet.value;</p>
<p>var myIndexButton = document.createElement(&#039;button&#039;);<br />
myIndexButton.id = &#039;my_index_button&#039;;<br />
myIndexButton.innerHTML =&#039;&amp;lt;a target=&quot;_blank&quot;  href=&quot;https://twitter.com/intent/tweet?text=&#039;+tweet+&#039;@cybozu_startups&quot; class=&quot;twitter-mention-button&quot; data-lang=&quot;ja&quot;&quot;&amp;gt;Cstapに向かって呟く&amp;lt;/a&amp;gt;&#039;;</p>
<p>kintone.app.record.getHeaderMenuSpaceElement().appendChild(myIndexButton);</p>
<p>});<br />
})();<br />

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

設置方法|LINEで送るボタン-1
これを使う
 使った結果

<br />
(function () {<br />
&quot;use strict&quot;;<br />
kintone.events.on(&#039;app.record.detail.show&#039;, function (event) {<br />
if (document.getElementById (&#039;my_index_button&#039;) != null) {<br />
return;<br />
}</p>
<p>var tweet = event.record.tweet.value;</p>
<p>var myIndexButton = document.createElement(&#039;button&#039;);<br />
myIndexButton.id = &#039;my_index_button&#039;;<br />
myIndexButton.innerHTML =&#039;&amp;lt;a href=&quot;http://line.me/R/msg/text/?&#039;+tweet+&#039;&quot;&amp;gt;LINE&amp;lt;/a&amp;gt;&#039;;</p>
<p>kintone.app.record.getHeaderMenuSpaceElement().appendChild(myIndexButton);</p>
<p>});<br />
})();<br />

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投稿 - 2 - レコードの詳細
LINEボタン現る

ですが、押すと。。。

無料通話・メールアプリ LINE(ライン)-1
なんで?
PC版には対応していないらしい

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

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

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

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

レコード一覧
どんなメッセージを送ろうか
レコード詳細にボタンは表示されている
いざ、押す!
LINEホーム画面
LINEが立ち上がった!
とってぃとのトーク
とってぃとのトークで送りましょう
LINE、用心深いな
LINEはかなり慎重
kintone内のテキスト情報を引用
kintone内のテキスト情報を持ってこれた!

 

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


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

 

皆さん、良い週末を。

 

それではまた。

 


⭐️トヨクモ kintone連携サービスのおすすめポイント⭐️
・kintone標準機能ではできない業務改善を実現
・カンタン・低コストで運用可能
・kintone1ドメインにつき1契約でOK
・10,000契約以上の実績・信頼
・30日間の無料お試しは何度でも可能