今回はテンプレートメッセージを紹介します。
文字だけのメッセージとは違い、完全にコンテンツと呼べるレベルのメッセージが送信できるので
使いこなせばLINEマスターと名乗れるかもしれません。
テンプレートボタンを使う
<!DOCTYPE html> <html lang="jp" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>XP LIFF</title> <script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", () => { liff .init({ liffId: '<LIFF_ID>' }) .then(() => { document.getElementById('go').addEventListener('click', () => { if (!liff.isInClient()) { document.getElementById('log').value += 'ng\n'; } else { liff.sendMessages([{ 'type': 'template', 'altText': document.getElementById('AltText').value, 'template': { 'type': 'buttons', 'thumbnailImageUrl': document.getElementById('ThumbnailImageUrl').value, 'imageAspectRatio': document.getElementById('ImageAspectRatio').value, 'imageSize': document.getElementById('ImageSize').value, 'imageBackgroundColor': document.getElementById('ImageBackgroundColor').value, 'title': document.getElementById('Title').value, 'text': document.getElementById('Text').value, 'defaultAction': { 'type': 'uri', 'label': document.getElementById('Label0').value, 'uri': document.getElementById('Uri0').value }, 'actions': [{ 'type': 'uri', 'label': document.getElementById('Label1').value, 'uri': document.getElementById('Uri1').value },{ 'type': 'uri', 'label': document.getElementById('Label2').value, 'uri': document.getElementById('Uri2').value },{ 'type': 'uri', 'label': document.getElementById('Label3').value, 'uri': document.getElementById('Uri3').value },{ 'type': 'uri', 'label': document.getElementById('Label4').value, 'uri': document.getElementById('Uri4').value }] } }]).then(function() { document.getElementById('log').value += 'completed\n'; }).catch(function(error) { document.getElementById('log').value += error + '\n'; }); } }); }) .catch((err) => { document.getElementById('log').value = 'init ng\n' + err; }); }); </script> </head> <body> <div> <h3>テンプレートボタン</h3> <div>altText<input type="text" id="AltText" value="CrossPower"/></div> <div>thumbnailImageUrl<input type="text" id="ThumbnailImageUrl" value="https://www.x-power.co.jp/images/header/logo.png"/></div> <div>imageAspectRatio <select id="ImageAspectRatio"> <option value="rectangle" selected>rectangle：1.51:1</option> <option value="square">square：1:1</option> </select> </div> <div>imageSize <select id="ImageSize"> <option value="cover">cover</option> <option value="contain" selected>contain</option> </select> </div> <div>imageBackgroundColor<input type="text" id="ImageBackgroundColor" value="#333333"/></div> <div>title<input type="text" id="Title" value="クロスパワー"/></div> <div>text<input type="text" id="Text" value="Solution to your future"/></div> <div>デフォルトラベル<input type="text" id="Label0" value="TOP"/></div> <div>デフォルトURI<input type="text" id="Uri0" value="https://www.x-power.co.jp/"/></div> <div>label1<input type="text" id="Label1" value="事業内容"/></div> <div>uri1<input type="text" id="Uri1" value="https://www.x-power.co.jp/service.html"/></div> <div>label2<input type="text" id="Label2" value="導入事例"/></div> <div>uri2<input type="text" id="Uri2" value="https://www.x-power.co.jp/case.html"/></div> <div>label3<input type="text" id="Label3" value="会社概要"/></div> <div>uri3<input type="text" id="Uri3" value="https://www.x-power.co.jp/about.html#company"/></div> <div>label4<input type="text" id="Label4" value="沿革"/></div> <div>uri4<input type="text" id="Uri4" value="https://www.x-power.co.jp/about.html#history"/></div> <input type="button" id="go" value="実行"/> <textarea id="log" style="width:96%;height:100px;"></textarea> </div> </body> </html>
LINE上にボタンを配置することができ、
ボタンを押した時にWebサイトへジャンプすることができます。
確認ボタンを使う
<!DOCTYPE html> <html lang="jp" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>XP LIFF</title> <script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", () => { liff .init({ liffId: '<LIFF_ID>' }) .then(() => { document.getElementById('go').addEventListener('click', () => { if (!liff.isInClient()) { document.getElementById('log').value += 'ng\n'; } else { liff.sendMessages([{ 'type': 'template', 'altText': document.getElementById('AltText').value, 'template': { 'type': 'confirm', 'text': document.getElementById('Text').value, 'actions': [{ 'type': 'uri', 'label': document.getElementById('Label1').value, 'uri': document.getElementById('Uri1').value },{ 'type': 'uri', 'label': document.getElementById('Label2').value, 'uri': document.getElementById('Uri2').value }] } }]).then(function() { document.getElementById('log').value += 'completed\n'; }).catch(function(error) { document.getElementById('log').value += error + '\n'; }); } }); }) .catch((err) => { document.getElementById('log').value = 'init ng\n' + err; }); }); </script> </head> <body> <div> <h3>確認</h3> <div>altText<input type="text" id="AltText" value="確認"/></div> <div>text<input type="text" id="Text" value="Googleを開きますか？"/></div> <div>label1<input type="text" id="Label1" value="はい"/></div> <div>uri1<input type="text" id="Uri1" value="https://www.google.co.jp"/></div> <div>label2<input type="text" id="Label2" value="いいえ"/></div> <div>uri2<input type="text" id="Uri2" value="https://www.x-power.co.jp/"/></div> <input type="button" id="go" value="実行"/> <textarea id="log" style="width:96%;height:100px;"></textarea> </div> </body> </html>
２つしかボタンの無いシンプルな確認フォームが作れます。
画像が使えないので注意が必要です。
カルーセルを使う
<!DOCTYPE html> <html lang="jp" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>XP LIFF</title> <script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", () => { liff .init({ liffId: '<LIFF_ID>' }) .then(() => { document.getElementById('go').addEventListener('click', () => { if (!liff.isInClient()) { document.getElementById('log').value += 'ng\n'; } else { liff.sendMessages([{ 'type': 'template', 'altText': document.getElementById('AltText').value, 'template': { 'type': 'carousel', 'columns': [{ 'thumbnailImageUrl': document.getElementById('ThumbnailImageUrlA').value, 'imageBackgroundColor': document.getElementById('ImageBackgroundColorA').value, 'title': document.getElementById('TitleA').value, 'text': document.getElementById('TextA').value, 'defaultAction': { 'type': 'uri', 'label': document.getElementById('LabelA').value, 'uri': document.getElementById('UriA').value }, 'actions': [{ 'type': 'uri', 'label': document.getElementById('LabelA1').value, 'uri': document.getElementById('UriA1').value },{ 'type': 'uri', 'label': document.getElementById('LabelA2').value, 'uri': document.getElementById('UriA2').value },{ 'type': 'uri', 'label': document.getElementById('LabelA3').value, 'uri': document.getElementById('UriA3').value }] }, { 'thumbnailImageUrl': document.getElementById('ThumbnailImageUrlB').value, 'imageBackgroundColor': document.getElementById('ImageBackgroundColorB').value, 'title': document.getElementById('TitleB').value, 'text': document.getElementById('TextB').value, 'defaultAction': { 'type': 'uri', 'label': document.getElementById('LabelB').value, 'uri': document.getElementById('UriB').value }, 'actions': [{ 'type': 'uri', 'label': document.getElementById('LabelB1').value, 'uri': document.getElementById('UriB1').value },{ 'type': 'uri', 'label': document.getElementById('LabelB2').value, 'uri': document.getElementById('UriB2').value },{ 'type': 'uri', 'label': document.getElementById('LabelB3').value, 'uri': document.getElementById('UriB3').value }] }, { 'thumbnailImageUrl': document.getElementById('ThumbnailImageUrlC').value, 'imageBackgroundColor': document.getElementById('ImageBackgroundColorC').value, 'title': document.getElementById('TitleC').value, 'text': document.getElementById('TextC').value, 'defaultAction': { 'type': 'uri', 'label': document.getElementById('LabelC').value, 'uri': document.getElementById('UriC').value }, 'actions': [{ 'type': 'uri', 'label': document.getElementById('LabelC1').value, 'uri': document.getElementById('UriC1').value },{ 'type': 'uri', 'label': document.getElementById('LabelC2').value, 'uri': document.getElementById('UriC2').value },{ 'type': 'uri', 'label': document.getElementById('LabelC3').value, 'uri': document.getElementById('UriC3').value }] }], 'imageAspectRatio': document.getElementById('ImageAspectRatio').value, 'imageSize': document.getElementById('ImageSize').value } }]).then(function() { document.getElementById('log').value += 'completed\n'; }).catch(function(error) { document.getElementById('log').value += error + '\n'; }); } }); }) .catch((err) => { document.getElementById('log').value = 'init ng\n' + err; }); }); </script> </head> <body> <div> <h3>カルーセル</h3> <div>altText<input type="text" id="AltText" value="カルーセル"/></div> <h4>1列目</h4> <div>thumbnailImageUrlA<input type="text" id="ThumbnailImageUrlA" value="https://3.bp.blogspot.com/-p41t8kD9ChE/UacVdY0mD4I/AAAAAAAAUZ8/q271mQQTWPo/s320/banner_season.jpg"/></div> <div>imageBackgroundColorA<input type="text" id="ImageBackgroundColorA" value="#880000"/></div> <div>titleA<input type="text" id="TitleA" value="祝日・行事"/></div> <div>textA<input type="text" id="TextA" value="季節ごとのイラスト"/></div> <div>labelA<input type="text" id="LabelA" value="ラベルA"/></div> <div>UriA<input type="text" id="UriA" value="https://www.irasutoya.com/p/seasons.html"/></div> <div>labelA1<input type="text" id="LabelA1" value="コタツでくつろぐぴょこ"/></div> <div>uriA1<input type="text" id="UriA1" value="https://www.irasutoya.com/2020/01/blog-post.html"/></div> <div>labelA2<input type="text" id="LabelA2" value="福男選び"/></div> <div>uriA2<input type="text" id="UriA2" value="https://www.irasutoya.com/2019/06/blog-post_260.html"/></div> <div>labelA3<input type="text" id="LabelA3" value="綺麗に色が出るプリンター"/></div> <div>uriA3<input type="text" id="UriA3" value="https://www.irasutoya.com/2019/12/blog-post_700.html"/></div> <h4>2列目</h4> <div>thumbnailImageUrlB<input type="text" id="ThumbnailImageUrlB" value="https://3.bp.blogspot.com/-Ysg9gD0BSWg/UNrdB2zjPMI/AAAAAAAAJkA/3v15_io6FmQ/s320/banner_food_cooking.jpg"/></div> <div>imageBackgroundColorB<input type="text" id="ImageBackgroundColorB" value="#008800"/></div> <div>titleB<input type="text" id="TitleB" value="食べ物・料理"/></div> <div>textB<input type="text" id="TextB" value="食べ物のイラスト"/></div> <div>labelB<input type="text" id="LabelB" value="ラベルB"/></div> <div>UriB<input type="text" id="UriB" value="https://www.irasutoya.com/p/food.html"/></div> <div>labelB1<input type="text" id="LabelB1" value="円盤餃子"/></div> <div>uriB1<input type="text" id="UriB1" value="https://www.irasutoya.com/2019/11/blog-post_936.html"/></div> <div>labelB2<input type="text" id="LabelB2" value="ラクサラーメン"/></div> <div>uriB2<input type="text" id="UriB2" value="https://www.irasutoya.com/2019/11/blog-post_53.html"/></div> <div>labelB3<input type="text" id="LabelB3" value="カレーライス"/></div> <div>uriB3<input type="text" id="UriB3" value="https://www.irasutoya.com/2019/10/blog-post_725.html"/></div> <h4>3列目</h4> <div>thumbnailImageUrlC<input type="text" id="ThumbnailImageUrlC" value="https://2.bp.blogspot.com/-Q1rLID5m0aA/UOzk8GDG5JI/AAAAAAAAKcs/q9eNBXbELeg/s1600/banner_seikatsu.jpg"/></div> <div>imageBackgroundColorC<input type="text" id="ImageBackgroundColorC" value="#000088"/></div> <div>titleC<input type="text" id="TitleC" value="生活"/></div> <div>textC<input type="text" id="TextC" value="家事のイラスト"/></div> <div>labelC<input type="text" id="LabelC" value="ラベルC"/></div> <div>UriC<input type="text" id="UriC" value="https://www.irasutoya.com/p/life.html"/></div> <div>labelC1<input type="text" id="LabelC1" value="皿洗い"/></div> <div>uriC1<input type="text" id="UriC1" value="https://www.irasutoya.com/2019/12/blog-post_783.html"/></div> <div>labelC2<input type="text" id="LabelC2" value="粘着ローラーがけ"/></div> <div>uriC2<input type="text" id="UriC2" value="https://www.irasutoya.com/2019/12/blog-post_25.html"/></div> <div>labelC3<input type="text" id="LabelC3" value="雑巾を絞る人"/></div> <div>uriC3<input type="text" id="UriC3" value="https://www.irasutoya.com/2019/09/blog-post_641.html"/></div> <h4>全般</h4> <div>imageAspectRatio <select id="ImageAspectRatio"> <option value="rectangle" selected>rectangle：1.51:1</option> <option value="square">square：1:1</option> </select> </div> <div>imageSize <select id="ImageSize"> <option value="cover">cover</option> <option value="contain" selected>contain</option> </select> </div> <input type="button" id="go" value="実行"/> <textarea id="log" style="width:96%;height:100px;"></textarea> </div> </body> </html>
テンプレートボタンを横に並べたような物が作れます。
ボタンや画像の数が多いので、かなりの量のリンクを設定できます。
画像カルーセルを使う
<!DOCTYPE html> <html lang="jp" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>XP LIFF</title> <script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", () => { liff .init({ liffId: '<LIFF_ID>' }) .then(() => { document.getElementById('go').addEventListener('click', () => { if (!liff.isInClient()) { document.getElementById('log').value += 'ng\n'; } else { liff.sendMessages([{ 'type': 'template', 'altText': document.getElementById('AltText').value, 'template': { 'type': 'image_carousel', 'columns': [{ 'imageUrl': document.getElementById('ImageUrl1').value, 'action': { 'type': 'uri', 'label': document.getElementById('Label1').value, 'uri': document.getElementById('Uri1').value } }, { 'imageUrl': document.getElementById('ImageUrl2').value, 'action': { 'type': 'uri', 'label': document.getElementById('Label2').value, 'uri': document.getElementById('Uri2').value } }, { 'imageUrl': document.getElementById('ImageUrl3').value, 'action': { 'type': 'uri', 'label': document.getElementById('Label3').value, 'uri': document.getElementById('Uri3').value } }, { 'imageUrl': document.getElementById('ImageUrl4').value, 'action': { 'type': 'uri', 'label': document.getElementById('Label4').value, 'uri': document.getElementById('Uri4').value } }, { 'imageUrl': document.getElementById('ImageUrl5').value, 'action': { 'type': 'uri', 'label': document.getElementById('Label5').value, 'uri': document.getElementById('Uri5').value } }, { 'imageUrl': document.getElementById('ImageUrl6').value, 'action': { 'type': 'uri', 'label': document.getElementById('Label6').value, 'uri': document.getElementById('Uri6').value } }, { 'imageUrl': document.getElementById('ImageUrl7').value, 'action': { 'type': 'uri', 'label': document.getElementById('Label7').value, 'uri': document.getElementById('Uri7').value } }, { 'imageUrl': document.getElementById('ImageUrl8').value, 'action': { 'type': 'uri', 'label': document.getElementById('Label8').value, 'uri': document.getElementById('Uri8').value } }, { 'imageUrl': document.getElementById('ImageUrl9').value, 'action': { 'type': 'uri', 'label': document.getElementById('Label9').value, 'uri': document.getElementById('Uri9').value } }, { 'imageUrl': document.getElementById('ImageUrl10').value, 'action': { 'type': 'uri', 'label': document.getElementById('Label10').value, 'uri': document.getElementById('Uri10').value } }] } }]).then(function() { document.getElementById('log').value += 'completed\n'; }).catch(function(error) { document.getElementById('log').value += error + '\n'; }); } }); }) .catch((err) => { document.getElementById('log').value = 'init ng\n' + err; }); }); </script> </head> <body> <div> <h3>画像カルーセル</h3> <div>altText<input type="text" id="AltText" value="画像カルーセル"/></div> <h4>1つ目</h4> <div>ImageUrl1<input type="text" id="ImageUrl1" value="https://1.bp.blogspot.com/-bvhr8OjNEMU/XkZdVMKXOBI/AAAAAAABXWc/g_U8e9jfcEYF9KmjqggRzt3uwQbdTtbRQCNcBGAsYHQ/s1600/yuudou_people.png"/></div> <div>label1<input type="text" id="Label1" value="誘導する人のイラスト"/></div> <div>Uri1<input type="text" id="Uri1" value="https://www.irasutoya.com/2020/03/blog-post_67.html"/></div> <h4>2つ目</h4> <div>ImageUrl2<input type="text" id="ImageUrl2" value="https://1.bp.blogspot.com/-g8SvoaWXsu4/WxvKcz2XKGI/AAAAAAABMpQ/bINODvUI3M40fVxhbD8XOHi0fj-R4TI2gCLcBGAs/s800/swimming_life_jacket_boy.png"/></div> <div>label2<input type="text" id="Label2" value="ライフジャケットを着た男"/></div> <div>Uri2<input type="text" id="Uri2" value="https://www.irasutoya.com/2018/07/blog-post_90.html"/></div> <h4>3つ目</h4> <div>ImageUrl3<input type="text" id="ImageUrl3" value="https://3.bp.blogspot.com/-ul85IZ7jhKI/WaPvZiTEkII/AAAAAAABGMY/H69DFdgjGXU5jhiexESg11fJXKMFcWVhQCLcBGAs/s800/bowling_foul.png"/></div> <div>label3<input type="text" id="Label3" value="ファウルラインを超える人"/></div> <div>Uri3<input type="text" id="Uri3" value="https://www.irasutoya.com/2017/09/blog-post_735.html"/></div> <h4>4つ目</h4> <div>ImageUrl4<input type="text" id="ImageUrl4" value="https://2.bp.blogspot.com/-GuJM5cIi3K8/VHbNOnnoEzI/AAAAAAAApU8/VAa2CK1C360/s800/hyousyou_sports_man.png"/></div> <div>label4<input type="text" id="Label4" value="表彰台に乗る選手"/></div> <div>Uri4<input type="text" id="Uri4" value="https://www.irasutoya.com/2014/11/blog-post_364.html"/></div> <h4>5つ目</h4> <div>ImageUrl5<input type="text" id="ImageUrl5" value="https://1.bp.blogspot.com/-de2ZDEAGNh8/VGX8hctsIgI/AAAAAAAApII/s84UVJQkhbs/s800/futago_coodinate.png"/></div> <div>label5<input type="text" id="Label5" value="女性のペアルック"/></div> <div>Uri5<input type="text" id="Uri5" value="https://www.irasutoya.com/2014/11/blog-post_863.html"/></div> <h4>6つ目</h4> <div>ImageUrl6<input type="text" id="ImageUrl6" value="https://4.bp.blogspot.com/-nunrFXJRg90/Ufj1CjzyVuI/AAAAAAAAWk0/vNpna3tGLfY/s800/baikin_komatta.png"/></div> <div>label6<input type="text" id="Label6" value="細菌・ばい菌"/></div> <div>Uri6<input type="text" id="Uri6" value="https://www.irasutoya.com/2013/08/blog-post_5302.html"/></div> <h4>7つ目</h4> <div>ImageUrl7<input type="text" id="ImageUrl7" value="https://1.bp.blogspot.com/-MAhXVeGjWx4/UxbLt9zgQeI/AAAAAAAAeDQ/7WLOXCCYOx4/s800/tsumekiri.png"/></div> <div>label7<input type="text" id="Label7" value="爪切り"/></div> <div>Uri7<input type="text" id="Uri7" value="https://www.irasutoya.com/2014/03/blog-post_4200.html"/></div> <h4>8つ目</h4> <div>ImageUrl8<input type="text" id="ImageUrl8" value="https://1.bp.blogspot.com/-BR1SuUW6Kvg/U8XlRUHfpEI/AAAAAAAAi70/1K7ewvNtssc/s800/music_Ravel.png"/></div> <div>label8<input type="text" id="Label8" value="ラヴェルの似顔絵"/></div> <div>Uri8<input type="text" id="Uri8" value="https://www.irasutoya.com/2014/08/blog-post_151.html"/></div> <h4>9つ目</h4> <div>ImageUrl9<input type="text" id="ImageUrl9" value="https://4.bp.blogspot.com/-nAGQDv5nIUs/V8VE-Ky1QVI/AAAAAAAA9WQ/ovw-efNG6Yc-dYQ3l2oHiK5n954zriaIwCLcB/s800/flower_chinchouge.png"/></div> <div>label9<input type="text" id="Label9" value="沈丁花"/></div> <div>Uri9<input type="text" id="Uri9" value="https://www.irasutoya.com/2016/09/blog-post_34.html"/></div> <h4>10つ目</h4> <div>ImageUrl10<input type="text" id="ImageUrl10" value="https://1.bp.blogspot.com/-70jrzLRUA3c/XjEjSPTvbyI/AAAAAAABXKk/57c9UsmuLA4wu7-DIlIL43eRnOADaBKdQCNcBGAsYHQ/s1600/mark_eye_uruuru.png"/></div> <div>label10<input type="text" id="Label10" value="うるうるした目"/></div> <div>Uri10<input type="text" id="Uri10" value="https://www.irasutoya.com/2020/02/blog-post_83.html"/></div> <input type="button" id="go" value="実行"/> <textarea id="log" style="width:96%;height:100px;"></textarea> </div> </body> </html>
画像だけのカルーセルなのでギャラリーに近いです。 10個も画像を貼れるのが、かなり強力！
