åºç« ïŒLIFF (LINE Front-end Framework)ã®çŽ¹ä»
ãã¯ãããžãŒã®é²æ©ã¯é©ãã¹ãã¹ããŒãã§é²ãã§ããŸããããã«äŒŽããæ°ãããã¬ãŒã ã¯ãŒã¯ãããŒã«ãçãŸããããããç§ãã¡ã®ç掻ãããžãã¹ãè±ãã«ãã圹å²ãæãããŠããŸããããã§ã¯ããããªæ°ãããã¬ãŒã ã¯ãŒã¯ã®1ã€ããLIFFãã«ã€ããŠè§£èª¬ããŸãã
LIFFãšã¯äœãïŒ
LIFF㯔LINE Front-end Framework”ã®ç¥ã§ãLINEã®æäŸããããã³ããšã³ãéçºãã¬ãŒã ã¯ãŒã¯ã§ããããã¯ãLINEã®ã¢ããªå ã§åäœãããŠã§ãã¢ããªã±ãŒã·ã§ã³ãç°¡åã«äœæããããã®ãã®ã§ãã
å ·äœçã«ã¯ãLIFFãå©çšããããšã§LINEã®åçš®æ©èœããŠã§ãã¢ããªã±ãŒã·ã§ã³ããå©çšã§ããŸãããŠãŒã¶ãŒã®LINEãããã£ãŒã«æ å ±ã®ååŸããã¡ãã»ãŒãžã®éä¿¡ãLINE Payã®æ±ºæžãªã©ãLINEã®æ©èœããã«ã«æŽ»çšã§ããŸãã
ãŸããLIFFã¯LINEããã¢ããªãšããŠæäŸãããLINEã¢ããªããçŽæ¥ã¢ã¯ã»ã¹ã§ãããšããå©ç¹ããããŸããããã«ããããŠãŒã¶ãŒã¯æ°ãã«ã¢ããªãããŠã³ããŒãããããšãªããLINEã¢ããªå ã§æ§ã ãªãµãŒãã¹ãå©çšã§ããŸãã
ãã®ã¬ã€ãã®ç®çãšèªè ã®å¯Ÿè±¡
ãã®ã¬ã€ãã¯ãLIFFãšãã®å¯èœæ§ã«ã€ããŠåºæ¬çãªç解ãæ·±ããããšãç®çãšããŠããŸããããã«ãããèªè ã®æ¹ã ã¯ãèªèº«ã®ããžãã¹ããããžã§ã¯ãã«LIFFãã©ã®ããã«é©çšã§ããããå ·äœçãªã¢ã€ãã¢ãåŸãããšãã§ããã§ãããã
察象èªè ã¯ãLIFFã«ã€ããŠåããŠåŠã¶æ¹ããããã§ã«äžéšã®ç¥èãæã£ãŠãããæŽã«æ·±ãç解ãããæ¹ãŸã§å¹ åºãèšå®ããŠããŸãããã®ã¬ã€ããéããŠãLIFFãšã¯äœããã©ã®ããã«å©çšããã®ããããã«ããã©ã®ãããªäŸ¡å€ãçã¿åºããã®ãã«ã€ããŠç解ãæ·±ããŠããã ããã°å¹žãã§ãã
第1éšïŒLIFFã®åºç€
ããŠãLIFFãšããæ°ããªãã¬ãŒã ã¯ãŒã¯ãããããšãç解ãããšããã§ããã®æ©èœãšç¹æ§ããããŠå ·äœçãªéçºç°å¢ã«ã€ããŠè©³ããèŠãŠãããŸãããã
LIFFã®æ©èœãšç¹æ§
LIFFã¯ãã®ç¹æ§ãããå€ãã®å¯èœæ§ãæäŸããŠããŸãã以äžã«ãLIFFã®äž»ãªæ©èœãšç¹æ§ã玹ä»ããŸãã
æ©èœã»ç¹æ§ | 説æ |
---|---|
LINEã®æ©èœã®å©çš | LIFFãéããŠãLINEã®åçš®æ©èœïŒã¡ãã»ãŒãžéä¿¡ããããã£ãŒã«ååŸã決æžãªã©ïŒããŠã§ãã¢ããªã±ãŒã·ã§ã³ããå©çšã§ããŸãã |
ããã¢ããªãšããŠã®å©çš | LIFFã¢ããªã¯LINEã¢ããªå ã§çŽæ¥å©çšå¯èœãæ°ããªã¢ããªã®ããŠã³ããŒããèŠæ±ããããŠãŒã¶ãŒäœéšãåäžãããŸãã |
è€æ°ãã©ãããã©ãŒã å¯Ÿå¿ | LIFFã¯LINEã¢ããªïŒiOS/AndroidïŒã ãã§ãªãããã©ãŠã¶ïŒDesktopïŒãããã¢ã¯ã»ã¹å¯èœãåºç¯ãªãŠãŒã¶ãŒã«ãªãŒãå¯èœã§ãã |
ãããã®ç¹æ§ãããLIFFã¯ãŠãŒã¶ãŒãã¬ã³ããªãŒãªãŠã§ãã¢ããªã±ãŒã·ã§ã³éçºãå®çŸããŸãã
LIFFã䜿ã£ãLINEããã¢ããªã®éçºç°å¢
ããã§ã¯ãLIFFã䜿ã£ãŠLINEããã¢ããªãéçºããããã®ç°å¢ã«ã€ããŠèª¬æããŸããåºæ¬çã«ã¯ããŠã§ãã¢ããªã±ãŒã·ã§ã³ã®éçºãšåæ§ã®ç°å¢ãå¿ èŠã§ãã
å ·äœçã«ã¯ãHTML, CSS, JavaScriptã®åºæ¬çãªç¥èãå¿ èŠã§ããããã«ããµãŒããŒãµã€ãã®å®è£ ãå¿ èŠãªå Žåã¯ãNode.jsãPythonãªã©ã®ãµãŒããŒãµã€ãèšèªã®ç¥èãå¿ èŠãšãªããŸãã
ãŸããLIFFã¢ããªã®éçºã»ç®¡çã¯LINE Developers Consoleããè¡ããŸããããã§æ°èŠLIFFã¢ããªã®äœæãèšå®ã®å€æŽãå ¬éç¶æ ã®ç®¡çãªã©ãè¡ãããšãã§ããŸãã
éçºããŒã«ãšããŠã¯ãèªèº«ãæ £ããŠãããã®ã䜿ãã°è¯ãã§ããããäžè¬çãªããã¹ããšãã£ã¿ïŒVisual Studio Code, Atomãªã©ïŒããGitãªã©ã®ããŒãžã§ã³ç®¡çããŒã«ã圹ç«ã€ã§ãããã
ãããã®ç°å¢ãæŽããããšã§ãLIFFã掻çšããLINEããã¢ããªã®éçºãå¯èœã«ãªããŸãã
第2éšïŒLIFFã®è©³çŽ°
次ã«ãããå ·äœçãªLIFFã®äœ¿çšæ¹æ³ãšãã©ã®ãããªå Žé¢ã§å©çšãå¯èœãªã®ãã詳ããèŠãŠãããŸãããã
LIFFã§å©çšå¯èœãªAPI
LIFFã§ã¯ãæ§ã ãªLINEã®APIã掻çšããŠã¢ããªã±ãŒã·ã§ã³ãéçºããããšãã§ããŸãã以äžã«äž»ãªAPIãããã€ã玹ä»ããŸãã
API | 説æ |
---|---|
getProfile() | ãŠãŒã¶ãŒã®ãããã£ãŒã«æ å ±ïŒååããããã£ãŒã«ç»åãã¹ããŒã¿ã¹ã¡ãã»ãŒãžïŒãååŸããŸãã |
sendMessage() | æå®ããã¡ãã»ãŒãžãLINEã®ããŒã¯ã«ãŒã ã«éä¿¡ããŸãã |
getAccessToken() | LIFFã¢ããªãLINE Login v2.1ã䜿çšããŠãã°ã€ã³ããã¢ã¯ã»ã¹ããŒã¯ã³ãååŸããéã«ããã®ããŒã¯ã³ãååŸããŸãã |
openWindow() | æå®ããURLãæ°ããªãŠã£ã³ããŠã§éããŸããLINEã¢ããªå ã§ã®ããŒãžé·ç§»ãå¶åŸ¡ããŸãã |
ãããã¯äžéšã®APIã«éããŸãããå šãŠã®APIã«ã€ããŠç¥ãããå Žåã¯ãLINEã®å ¬åŒããã¥ã¡ã³ããã芧ãã ããã
LIFFã®å©çšã·ãŒã³ãšãã®äŸ
ããã§ã¯ãLIFFãã©ã®ãããªã·ãŒã³ã§å©çšãããã®ãå ·äœçãªäŸã玹ä»ããŸãã
1. Eã³ããŒã¹ãµã€ãã®æ±ºæžãããŒ
LIFFãå©çšããããšã§ããŠãŒã¶ãŒã¯LINE Payã䜿ã£ãŠååãçŽæ¥è³Œå
¥ã§ããŸããããã«ããããŠãŒã¶ãŒãã¢ããªå€ã«ç§»åããããšãªãã¹ã ãŒãºãªæ±ºæžäœéšãæäŸããããšãå¯èœã§ãã
2. ã€ãã³ãåå ç³ã蟌ã¿
ãŠãŒã¶ãŒã¯LIFFã䜿ã£ãŠã€ãã³ãã«ç³ã蟌ã¿ããã®åŸã®æ
å ±å
±æãLINEäžã§å®çµããããšãã§ããŸãã
3. ãŠãŒã¶ãŒèªèšŒ
LIFFã䜿çšããã°ãLINEã®ãŠãŒã¶ãŒæ
å ±ãå©çšããå®å
šãªèªèšŒãå®çŸã§ããŸããããã«ããããŠãŒã¶ãŒã¯æ°ãã«IDããã¹ã¯ãŒããèšå®ããå¿
èŠããããŸããã
ãããã¯äžéšã®äŸã«éããŸããããLIFFã®å¯èœæ§ã¯ç¡é倧ã§ããã¢ã€ãã¢æ¬¡ç¬¬ã§ãããŸããŸãªãµãŒãã¹ãLINEäžã§æäŸããããšãå¯èœã«ãªããŸãã
第3éšïŒLIFFã䜿ã£ãéçºã®æµã
ããã§ã¯ãå ·äœçãªéçºã®æµãã«ã€ããŠèŠãŠãããŸãããããŸãã¯LIFFã¢ããªã®äœæãšèšå®ããå§ããŸãã
LIFFã¢ããªã®äœæãšèšå®
ãŸãåãã«ãLINE Developersã®ã³ã³ãœãŒã«ã§æ°ãããããã€ããŒãšãã£ã³ãã«ãäœæããŸããããã§ããã£ã³ãã«ãã¯ãLIFFã¢ããªã±ãŒã·ã§ã³ãšLINEãã©ãããã©ãŒã ãšã®éã®ã³ãã¥ãã±ãŒã·ã§ã³ãã¹ãšãªããã®ã§ãã
ãã®åŸããLIFFã¿ãããéãããAddããã¿ã³ãæŒãããšã§æ°ããLIFFã¢ããªãäœæã§ããŸãããã®ãšããã¢ããªã±ãŒã·ã§ã³ã¿ã€ãïŒãµã€ãºïŒããšã³ããã€ã³ãURLãªã©ã®èšå®ãè¡ããŸãããããã®èšå®ã¯åŸããã§ãå€æŽå¯èœã§ãã
ãããã®æé ãèžãããšã§ãåºæ¬çãªLIFFã¢ããªã®èšå®ãå®äºããŸãã
LIFFã䜿ã£ãLINEããã¢ããªã®éçºæé
LIFFã¢ããªã®èšå®ãå®äºãããã次ã¯ã³ãŒãã£ã³ã°ã«ç§»ããŸãã以äžã«åºæ¬çãªæé ã瀺ããŸãã
1. ããã³ããšã³ãã®æºå
ãŸãã¯ãHTMLãCSSãJavaScriptãçšããŠãã¢ããªã±ãŒã·ã§ã³ã®ããã³ããšã³ããäœæããŸããããã§ã¯ãLINEã®å
¬åŒLIFF SDKãçšããŠãLINEç¹æã®æ©èœãå®è£
ããŸãã
2. ããã¯ãšã³ãã®æºå
å¿
èŠã«å¿ããŠãããã¯ãšã³ãã®æºåãè¡ããŸããããã§ã¯ãããŒã¿ããŒã¹ã®èšå®ããAPIã®æºåãªã©ãè¡ããŸãã
3. ãã¹ããšãããã°
éçºãäžéãçµãã£ãããäœæããã¢ããªã±ãŒã·ã§ã³ããã¹ãããŸããããã§ã¯ãLINEã®ãŠãŒã¶ãŒãšããŠã¢ããªã±ãŒã·ã§ã³ãäœéšããäžå
·åãèŠã€ãåºãããšãç®çã§ãã
ãããã®æé ãèžãããšã§ãLIFFã䜿ã£ãLINEããã¢ããªã®éçºãå¯èœã«ãªããŸãã
第4éšïŒLIFFã䜿ã£ãããã¢ããªã®æåäŸ
ãããŸã§ã§ãLIFFã®æŠèŠãšåºæ¬çãªéçºã®æµãã«ã€ããŠèŠãŠããŸããããã®ç« ã§ã¯ãå ·äœçãªæåäºäŸãéããŠãLIFFãã©ã®ããã«æŽ»çšããã°è¯ãã®ããæ¢ã£ãŠã¿ãŸãããã
äºäŸçŽ¹ä»ïŒLIFFãæåè£ã«å©çšããLINEããã¢ããª
LIFFã¯æ§ã ãªãµãŒãã¹ã«å©çšãããŠããŸãããã®äžã€ã«ã”ABC Store”ã®ããã¢ããªããããŸãã”ABC Store”ã¯ãã¹ããããã§ãç°¡åã«ååãè³Œå ¥ã§ããLINEããã¢ããªãéçºããŸããã
ãã®ããã¢ããªã¯ãLINEå ã§çŽæ¥ååã®é²èŠ§ããè³Œå ¥ãŸã§ãå®çµã§ãããšããç¹åŸŽãæã£ãŠããŸããããã«ãããŠãŒã¶ãŒã¯LINEãé¢ããããšãªããã¹ã ãŒãºã«ååè³Œå ¥ãè¡ãããšãã§ãã”ABC Store”ã¯å£²äžã®å€§å¹ ãªåäžãéæããŸããã
ãããã®äºäŸããåŠã¹ãããš
äžèšã®äºäŸããåŠã¹ãæ倧ã®æèšã¯ã”ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæåªå ã«èããããš”ã§ããABC Storeã®ããã¢ããªã§ã¯ããŠãŒã¶ãŒãLINEãé¢ããã«è³Œå ¥ãå®çµã§ãããšããç¹ãè©äŸ¡ãããŸããã
ãŸããããã¢ããªã®éçºã«åœãã£ãŠã¯ããµãŒãã¹æäŸè ã®ããžãã¹ç®æšãšãŠãŒã¶ãŒã®å©äŸ¿æ§ãäž¡ç«ãããããšãéèŠã§ãããšããç¹ãå¿ããŠã¯ãªããŸãããå ·äœçã«ã¯ããŠãŒã¶ãŒã«ãšã£ãŠäŸ¡å€ãããµãŒãã¹ãæäŸãã€ã€ãããžãã¹ãšããŠãæç«ããä»çµã¿ãèããããšãæ±ããããŸãã
ä»åŸLIFFãå©çšããŠããã¢ããªãéçºããéã¯ããããã®ãã€ã³ãããã²åèã«ããŠãã ããã
第5éšïŒLIFFéçºã®ã³ããšæ³šæç¹
ãããŸã§ã«LIFFã®åºç€ããéçºã®æµããæåäŸãŸã§ã解説ããŠããŸãããæåŸã«ãLIFFéçºã§ã®ãã¹ããã©ã¯ãã£ã¹ãšãããããåé¡ç¹ãšãã®è§£æ±ºçã«ã€ããŠèŠãŠãããŸãããã
LIFFéçºã§ã®ãã¹ããã©ã¯ãã£ã¹
LIFFéçºã§å€§åãªããšã¯ããŠãŒã¶ãŒãã¹ã ãŒãºã«ã¢ããªã䜿ããããã«ããããšã§ãããã®ããã«ã¯æ¬¡ã®ãããªãã€ã³ããæèãããšè¯ãã§ãããã
- ã·ã³ãã«ãªUIïŒãŠãŒã¶ãŒãæ··ä¹±ããªããããªã·ã³ãã«ãªUIãå¿æããŸããããäžç»é¢ã«æ å ±ãè©°ã蟌ã¿ããããå¿ èŠæäœéã®æäœã§ç®çã®æ©èœãå©çšã§ããããã«ããŸãã
- å¿«é©ãªUXïŒLINEã¢ããªããçŽæ¥ã¢ã¯ã»ã¹ã§ããLIFFã¢ããªã¯ãéåžžã®ãŠã§ãã¢ããªãããå¿«é©ãªUXãæ±ããããŸããé 延ãã©ã°ã極åæžããããµã¯ãµã¯ãšåãã¢ããªãç®æããŸãããã
- å ·äœçãªãœãªã¥ãŒã·ã§ã³ïŒãŠãŒã¶ãŒãLIFFã¢ããªã䜿ãç®çã¯ãåé¡è§£æ±ºãŸãã¯äœããåŸãããšã§ããå ·äœçãªãœãªã¥ãŒã·ã§ã³ãæäŸããããšã§ããŠãŒã¶ãŒã«ãšã£ãŠã®äŸ¡å€ãé«ããŸãã
LIFFéçºã§ã®ããããåé¡ãšãã®è§£æ±ºç
LIFFéçºã§ããèŠãããåé¡ã®äžã€ã¯ããAPIã®å©çšå¶éãã§ããäŸãã°ãäžå®æéå ã«APIã倧éã«åŒã³åºããšããã®åŸäžæçã«APIãå©çšã§ããªããªããšããåé¡ããããŸããããã«å¯Ÿãã解決çã¯ãAPIã®åŒã³åºããæå°éã«æããããšããå¿ èŠãªããŒã¿ã¯äžåºŠã«å€ãã«ååŸããŠãããªã©ãAPIã®å©çšãèšç»çã«è¡ãããšã§ãã
ãŸããããŠãŒã¶ãŒèªèšŒã®æ±ããã倧ããªèª²é¡ã§ããLIFFã§ã¯ãéåžžã®ãŠã§ãã¢ããªãšç°ãªãããŠãŒã¶ãŒã®LINEã¢ã«ãŠã³ãæ å ±ãå©çšããŠèªèšŒãè¡ãããšãå¯èœã§ãããããããã®åããŠãŒã¶ãŒããŒã¿ã®å®å šæ§ã確ä¿ããããã®å¯Ÿçãå¿ èŠãšãªããŸãããã¡ãã«ã€ããŠã¯ãLINEã®å ¬åŒã¬ã€ãã©ã€ã³ãã»ãã¥ãªãã£å¯Ÿçã®ãã¹ããã©ã¯ãã£ã¹ãéµå®ããããšãæ±ããããŸãã
ãããã®ã³ããšæ³šæç¹ãç解ããLIFFã®éçºã«çããããšã§ãããé«å質ãªLINEããã¢ããªãéçºããããšãã§ããã§ãããã
çµè«ïŒLIFFãšãšãã«æªæ¥ãž
ãããŸã§ã®ã»ã¯ã·ã§ã³ãéããŠãLIFFã®åºç€ãã詳现ãªéçºæ¹æ³ããã¹ããã©ã¯ãã£ã¹ãŸã§å¹ åºã解説ããŠããŸãããæåŸã«ãLIFFã®æªæ¥ã®å±æãšãããªãã次ã«è¡ãã¹ãããšã«ã€ããŠèããŠã¿ãŸãããã
LIFFã®æªæ¥ã®å±æ
LIFFã¯ãLINEãæäŸããããã³ããšã³ããã¬ãŒã ã¯ãŒã¯ãšããŠãä»åŸãLINEã®ãšã³ã·ã¹ãã å ã§ã®åœ¹å²ããŸããŸãéèŠã«ãªã£ãŠãããšèããããŸãããŸããŸãå€æ©èœåããã¹ããŒããã©ã³ã®äžã§ããŠãŒã¶ãŒã®äžéšã¯è€æ°ã®ã¢ããªãã€ã³ã¹ããŒã«ãã䜿ãåããããšã«ç²ããŠããŸãããã®ãããªç¶æ³äžã§ãLINEããã¢ããªã¯äžã€ã®ã¢ããªå ã§å€åœ©ãªãµãŒãã¹ãæäŸããããããŠãŒã¶ãŒã«ãšã£ãŠäŸ¿å©ãªååšãšãªãã§ãããã
å ããŠãLINEã®å©çšè æ°ã¯æ¥æ¬ã ãã§ã8600äžäººä»¥äžãšå ±åãããŠããããããã®ãŠãŒã¶ãŒã«çŽæ¥ãµãŒãã¹ãæäŸãããã£ã³ã¹ãLIFFã«ã¯ãããŸãããã®å€§ããªå¯èœæ§ãèãããšãLIFFã掻çšããéçºã®éèŠæ§ã¯ä»åŸãå¢ããŠãããšäºæ³ãããŸãã
ããªãã次ã«è¡ãã¹ãããš
æ¬ã¬ã€ããèªãã§ãLIFFã«ã€ããŠåºæ¬çãªç解ãæ·±ããããªãã¯ããã§ã«LIFFéçºã®ç¬¬äžæ©ãèžã¿åºããŠããŸãããããããããããæ¬åœã®ã¹ã¿ãŒãã§ããä»åŸããªããè¡ãã¹ãããšã¯ãå®éã«æãåãããèªåã®ã¢ã€ãã¢ã圢ã«ããããšã§ãã
ãŸãã¯ãå°ããªLINEããã¢ããªãäœã£ãŠã¿ãŸãããããããäœãã解決ãããã®ã§ããå¿ èŠã¯ãããŸãããéèŠãªã®ã¯ãèªåãæãæãããã®ã圢ã«ããããã»ã¹ãäœéšããLIFFãšããããŒã«ã䜿ãããªãããšã§ãããããŠãäžåºŠã¢ããªãå®æããããããŠãŒã¶ãŒãã£ãŒãããã¯ãå ã«æ¹åãç¹°ãè¿ããŸãããããŠãŒã¶ãŒã®å£°ãå ã«æ¹åãç¶ããããšã§ãããè¯ããµãŒãã¹ãæäŸããèœåã身ã«ã€ãã§ãããã
æåŸã«ãLIFFéçºã«åãçµããã¹ãŠã®æ¹ã«åããŠãããªãã®æåãå¿ããé¡ã£ãŠããŸãããã®èšäºãããã®äžå©ãšãªãã°å¹žãã§ããLIFFãšãšãã«ãçŽ æŽãããæªæ¥ãžã®äžæ©ãèžã¿åºããŸãããïŒ