Read Article

kintoneをLINEと連携してみた

kintoneをLINEと連携してみた

TGIF!トッティです。

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

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

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

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

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

 LINEと連携とは

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

LINEで送る

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

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

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

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

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行目のみ、ということになります。

設置方法|LINEで送るボタン-1

これを使う

 使った結果

[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行目の

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

 

 

 

 

 

表示は、できた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を使い倒したい!」そんなあなた、奇遇ですね、僕もです。非開発者としての高みを目指しつつ、その道程を共有致します。

今日も張り切って行きましょう。
URL :
TRACKBACK URL :

COMMENTS & TRACKBACKS

  • Comments ( 0 )
  • Trackbacks ( 1 )

No commented yet.

  1. […] GoogleDriveに進んだら、いつもkintoneをカスタマイズしているファイルをアップロードしましょう。図の部分から該当のファイルを選択すればOKです。今回は先日作成したLINEアプリへの投稿JavaScriptをアップロードします。 […]

LEAVE A REPLY

*
*
* (公開されません)

Return Top