[{"data":1,"prerenderedAt":803},["ShallowReactive",2],{"h91387182":3,"h3766288323":484,"h951555950":791},{"id":4,"title":5,"body":6,"description":28,"extension":475,"meta":476,"navigation":218,"path":480,"seo":481,"stem":482,"__hash__":483},"docs\u002Fja\u002Ftips\u002F2026\u002F08\u002F06\u002Fbetween-liff-browser-and-external-browser.md","LIFFアプリはどこで動く？実行環境ごとの挙動の違いを整理する",{"type":7,"value":8,"toc":453},"minimark",[9],[10,11,12,20,25,29,32,35,38,41,46,49,59,84,93,102,161,164,170,175,178,188,266,280,322,328,335,344,385,389,398,408,416,420,440,443,447],"Tips",{},[13,14,17],"h1",{"id":15,"class":16},"","!mb-4",[18,19],"page-title",{},[21,22],"display-date",{"date":23,"class":24},"2026\u002F08\u002F06","!mb-20",[26,27,28],"p",{},"こんにちは！テクニカルサポートを担当している岡です。今回のTipsでは、LIFFの実行環境についてご紹介します。",[26,30,31],{},"LIFFアプリを開発していて、「手元のPCのブラウザでは動くのに、LINEアプリ上で開くと挙動が違う」と戸惑ったことはありませんか？",[26,33,34],{},"あるいは逆に、「LINEアプリ上では動くのに、外部ブラウザで開くとボタンが押せない」といった報告を受けたこともあるかもしれません。",[26,36,37],{},"LIFFアプリは複数の実行環境で動作するため、環境ごとの違いを理解しておくことが、安定したLIFFアプリ開発の第一歩です。",[26,39,40],{},"この記事では、実行環境の整理と、実装で必要となる分岐パターンを紹介します。",[42,43,45],"h2",{"id":44},"two-execution-environments-where-liff-apps-run","LIFFアプリが動く2つの実行環境",[26,47,48],{},"LIFFアプリの実行環境は、大きく次の2つに分けられます。",[50,51,52,56],"ul",{},[53,54,55],"li",{},"LIFFブラウザ",[53,57,58],{},"LIFFブラウザ以外：ChromeやSafariなどの外部ブラウザ、またはLINE内ブラウザ",[26,60,61,62,70,71,78,79,83],{},"「LINEアプリの中で開いているから同じ」と思われがちですが、",[63,64,66],"glossary-tooltip",{"glossary-id":65},"liff-browser",[67,68,55],"a",{"href":69},"\u002Fglossary\u002F#liff-browser","と",[63,72,74],{"glossary-id":73},"line-iab",[67,75,77],{"href":76},"\u002Fglossary\u002F#line-iab","LINE内ブラウザ","は別物です。LIFFブラウザとLINE内ブラウザの違いについて、詳しくは「",[67,80,82],{"href":81},"\u002Fdocs\u002Fliff\u002Fdifferences-between-liff-browser-and-line-in-app-browser\u002F","LIFFブラウザとLINE内ブラウザの違い","」をご覧ください。",[42,85,87,88,92],{"id":86},"liff-app-runtime-environment","LIFFアプリがどの環境で動いているかは",[89,90,91],"code",{},"liff.isInClient()","でわかる",[26,94,95,96,101],{},"現在の実行環境がLIFFブラウザかどうかは、",[67,97,99],{"href":98},"\u002Freference\u002Fliff\u002F#is-in-client",[89,100,91],{},"で判定できます。",[103,104,108],"pre",{"className":105,"code":106,"language":107,"meta":15,"style":15},"language-javascript shiki shiki-themes github-dark-default","if (liff.isInClient()) {\n  \u002F\u002F LIFFブラウザで動作している\n} else {\n  \u002F\u002F LIFFブラウザ以外で動作している\n}\n","javascript",[89,109,110,130,137,149,155],{"__ignoreMap":15},[111,112,115,119,123,127],"span",{"class":113,"line":114},"line",1,[111,116,118],{"class":117},"suJrU","if",[111,120,122],{"class":121},"sZEs4"," (liff.",[111,124,126],{"class":125},"sc3cj","isInClient",[111,128,129],{"class":121},"()) {\n",[111,131,133],{"class":113,"line":132},2,[111,134,136],{"class":135},"sH3jZ","  \u002F\u002F LIFFブラウザで動作している\n",[111,138,140,143,146],{"class":113,"line":139},3,[111,141,142],{"class":121},"} ",[111,144,145],{"class":117},"else",[111,147,148],{"class":121}," {\n",[111,150,152],{"class":113,"line":151},4,[111,153,154],{"class":135},"  \u002F\u002F LIFFブラウザ以外で動作している\n",[111,156,158],{"class":113,"line":157},5,[111,159,160],{"class":121},"}\n",[42,162,163],{"id":163},"分岐パターンの考え方",[26,165,166,167,169],{},"上で紹介した",[89,168,91],{},"メソッドを起点にして、ここから分岐パターンを組み立てていきましょう。",[171,172,174],"h3",{"id":173},"login-flow","ログインフローの違い",[26,176,177],{},"LIFFブラウザでは、ユーザーはすでにLINEにログインした状態でLIFFアプリを開くため、明示的なログイン処理は不要です。",[26,179,180,181,187],{},"一方、LIFFブラウザ以外の場合では、",[67,182,184],{"href":183},"\u002Freference\u002Fliff\u002F#login",[89,185,186],{},"liff.login()","によるログイン処理が必要です。",[103,189,191],{"className":105,"code":190,"language":107,"meta":15,"style":15},"await liff.init({ liffId: \"1234567890-abcdefgh\" });\n\nif (!liff.isInClient() && !liff.isLoggedIn()) {\n  liff.login();\n}\n",[89,192,193,214,220,251,262],{"__ignoreMap":15},[111,194,195,198,201,204,207,211],{"class":113,"line":114},[111,196,197],{"class":117},"await",[111,199,200],{"class":121}," liff.",[111,202,203],{"class":125},"init",[111,205,206],{"class":121},"({ liffId: ",[111,208,210],{"class":209},"s9uIt","\"1234567890-abcdefgh\"",[111,212,213],{"class":121}," });\n",[111,215,216],{"class":113,"line":132},[111,217,219],{"emptyLinePlaceholder":218},true,"\n",[111,221,222,224,227,230,233,235,238,241,244,246,249],{"class":113,"line":139},[111,223,118],{"class":117},[111,225,226],{"class":121}," (",[111,228,229],{"class":117},"!",[111,231,232],{"class":121},"liff.",[111,234,126],{"class":125},[111,236,237],{"class":121},"() ",[111,239,240],{"class":117},"&&",[111,242,243],{"class":117}," !",[111,245,232],{"class":121},[111,247,248],{"class":125},"isLoggedIn",[111,250,129],{"class":121},[111,252,253,256,259],{"class":113,"line":151},[111,254,255],{"class":121},"  liff.",[111,257,258],{"class":125},"login",[111,260,261],{"class":121},"();\n",[111,263,264],{"class":113,"line":157},[111,265,160],{"class":121},[26,267,268,269,272,273,276,277,279],{},"なお、",[89,270,271],{},"liff.init()","のオプション",[89,274,275],{},"withLoginOnExternalBrowser: true","を以下のように指定すると、LIFFブラウザ以外の環境での初期化時に",[89,278,186],{},"を自動で実行できます。",[103,281,283],{"className":105,"code":282,"language":107,"meta":15,"style":15},"await liff.init({\n  liffId: \"1234567890-abcdefgh\",\n  withLogintOnExternalBrowser: true,\n});\n",[89,284,285,296,306,317],{"__ignoreMap":15},[111,286,287,289,291,293],{"class":113,"line":114},[111,288,197],{"class":117},[111,290,200],{"class":121},[111,292,203],{"class":125},[111,294,295],{"class":121},"({\n",[111,297,298,301,303],{"class":113,"line":132},[111,299,300],{"class":121},"  liffId: ",[111,302,210],{"class":209},[111,304,305],{"class":121},",\n",[111,307,308,311,315],{"class":113,"line":139},[111,309,310],{"class":121},"  withLogintOnExternalBrowser: ",[111,312,314],{"class":313},"sFSAA","true",[111,316,305],{"class":121},[111,318,319],{"class":113,"line":151},[111,320,321],{"class":121},"});\n",[26,323,324,325,327],{},"また、LIFFブラウザ内で認可リクエストを直接行った場合の動作は保証されません。したがってログイン処理には、LINEログインの認可リクエストを直接実装するのではなく、必ず",[89,326,186],{},"を使用するようにしてください。",[171,329,331,334],{"id":330},"methods-for-which-behavior-is-not-guaranteed-in-external-browsers",[89,332,333],{},"liff.closeWindow()","はLIFFブラウザ以外では挙動が保証されない",[26,336,337,338,343],{},"「閉じる」ボタンでLIFFアプリを閉じる実装は定番ですが、",[67,339,341],{"href":340},"\u002Freference\u002Fliff\u002F#close-window",[89,342,333],{},"は、LIFFブラウザ以外での動作は保証対象外です。LIFFブラウザ以外でも表示される可能性のある画面では、別の動線を確保することを検討しましょう。",[103,345,347],{"className":105,"code":346,"language":107,"meta":15,"style":15},"if (liff.isInClient()) {\n  liff.closeWindow();\n} else {\n  \u002F\u002F LIFFブラウザ以外向けの代替動線（例:トップページへ戻る）\n}\n",[89,348,349,359,368,376,381],{"__ignoreMap":15},[111,350,351,353,355,357],{"class":113,"line":114},[111,352,118],{"class":117},[111,354,122],{"class":121},[111,356,126],{"class":125},[111,358,129],{"class":121},[111,360,361,363,366],{"class":113,"line":132},[111,362,255],{"class":121},[111,364,365],{"class":125},"closeWindow",[111,367,261],{"class":121},[111,369,370,372,374],{"class":113,"line":139},[111,371,142],{"class":121},[111,373,145],{"class":117},[111,375,148],{"class":121},[111,377,378],{"class":113,"line":151},[111,379,380],{"class":135},"  \u002F\u002F LIFFブラウザ以外向けの代替動線（例:トップページへ戻る）\n",[111,382,383],{"class":113,"line":157},[111,384,160],{"class":121},[171,386,388],{"id":387},"features-that-integrate-with-the-chat-room","トークルームと連携する機能",[26,390,391,397],{},[67,392,394],{"href":393},"\u002Freference\u002Fliff\u002F#send-messages",[89,395,396],{},"liff.sendMessages()","のように、LIFFアプリを開いているトークルームを前提とする機能は、LIFFブラウザでのみ利用できます。",[26,399,400,401,407],{},"トークルームの情報は",[67,402,404],{"href":403},"\u002Freference\u002Fliff\u002F#get-context",[89,405,406],{},"liff.getContext()","で取得できるため、コンテキストの有無に応じて機能の表示を切り替えるとよいでしょう。",[26,409,410,411,415],{},"このほかにも、APIごとに利用できる実行環境やOS、必要な権限は細かく異なります。実装前に",[67,412,414],{"href":413},"\u002Freference\u002Fliff\u002F","LIFF APIリファレンス","で対象APIの動作環境を確認する習慣をつけておくと、「この環境では動かない」とリリース後になって気づく事故を防げます。",[42,417,419],{"id":418},"summary","まとめ",[50,421,422,425,431,437],{},[53,423,424],{},"LIFFアプリの実行環境は、大きく分けて「LIFFブラウザ」または「LIFFブラウザ以外（外部ブラウザ、LINE内ブラウザ）」の2つ",[53,426,427,428,430],{},"環境の判定には",[89,429,91],{},"を使用する",[53,432,433,434,436],{},"ログインフロー、",[89,435,333],{},"、トークルーム連携機能は環境ごとの分岐が必要",[53,438,439],{},"迷ったらAPIリファレンスの動作環境欄を確認する",[26,441,442],{},"「検証環境では動くのに実機では動かない」という事象は、実行環境の違いが原因であることが少なくありません。ブラウザごとの特徴を押さえて、どの環境でも快適に動作するLIFFアプリを作りましょう。",[444,445,446],"style",{},"html pre.shiki code .suJrU, html code.shiki .suJrU{--shiki-default:#FF7B72}html pre.shiki code .sZEs4, html code.shiki .sZEs4{--shiki-default:#E6EDF3}html pre.shiki code .sc3cj, html code.shiki .sc3cj{--shiki-default:#D2A8FF}html pre.shiki code .sH3jZ, html code.shiki .sH3jZ{--shiki-default:#8B949E}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s9uIt, html code.shiki .s9uIt{--shiki-default:#A5D6FF}html pre.shiki code .sFSAA, html code.shiki .sFSAA{--shiki-default:#79C0FF}",[448,449],"tags",{"tags":450,"lang":451,"section":452},"liff","en","tips",{"title":15,"searchDepth":151,"depth":157,"links":454},[455,458,461,472],{"id":456,"depth":132,"text":457},"liffアプリが動く2つの実行環境-two-execution-environments-where-liff-apps-run","LIFFアプリが動く2つの実行環境 {#two-execution-environments-where-liff-apps-run}",{"id":459,"depth":132,"text":460},"liffアプリがどの環境で動いているかはliffisinclientでわかる-liff-app-runtime-environment","LIFFアプリがどの環境で動いているかはliff.isInClient()でわかる {#liff-app-runtime-environment}",{"id":163,"depth":132,"text":163,"children":462},[463,466,469],{"id":464,"depth":139,"text":465},"ログインフローの違い-login-flow","ログインフローの違い {#login-flow}",{"id":467,"depth":139,"text":468},"liffclosewindowはliffブラウザ以外では挙動が保証されない-methods-for-which-behavior-is-not-guaranteed-in-external-browsers","liff.closeWindow()はLIFFブラウザ以外では挙動が保証されない {#methods-for-which-behavior-is-not-guaranteed-in-external-browsers}",{"id":470,"depth":139,"text":471},"トークルームと連携する機能-features-that-integrate-with-the-chat-room","トークルームと連携する機能 {#features-that-integrate-with-the-chat-room}",{"id":473,"depth":132,"text":474},"まとめ-summary","まとめ {#summary}","md",{"date":477,"tags":450,"locale":478,"sidebar":479},"2026-08-06 00:00 UTC","ja",false,"\u002Fja\u002Ftips\u002F2026\u002F08\u002F06\u002Fbetween-liff-browser-and-external-browser",{"title":5,"description":28},"ja\u002Ftips\u002F2026\u002F08\u002F06\u002Fbetween-liff-browser-and-external-browser","oywRqqktwyO1qslffzrxjFs_5Ay4beeyxu1YnSmuH6I",{"id":4,"title":5,"body":485,"description":28,"extension":475,"meta":789,"navigation":218,"path":480,"seo":790,"stem":482,"__hash__":483},{"type":7,"value":486,"toc":779},[487],[10,488,489,493,495,497,499,501,503,505,507,509,515,527,531,537,571,573,577,579,581,587,645,653,687,691,695,701,739,741,747,753,757,759,773,775,777],{},[13,490,491],{"id":15,"class":16},[18,492],{},[21,494],{"date":23,"class":24},[26,496,28],{},[26,498,31],{},[26,500,34],{},[26,502,37],{},[26,504,40],{},[42,506,45],{"id":44},[26,508,48],{},[50,510,511,513],{},[53,512,55],{},[53,514,58],{},[26,516,61,517,70,521,78,525,83],{},[63,518,519],{"glossary-id":65},[67,520,55],{"href":69},[63,522,523],{"glossary-id":73},[67,524,77],{"href":76},[67,526,82],{"href":81},[42,528,87,529,92],{"id":86},[89,530,91],{},[26,532,95,533,101],{},[67,534,535],{"href":98},[89,536,91],{},[103,538,539],{"className":105,"code":106,"language":107,"meta":15,"style":15},[89,540,541,551,555,563,567],{"__ignoreMap":15},[111,542,543,545,547,549],{"class":113,"line":114},[111,544,118],{"class":117},[111,546,122],{"class":121},[111,548,126],{"class":125},[111,550,129],{"class":121},[111,552,553],{"class":113,"line":132},[111,554,136],{"class":135},[111,556,557,559,561],{"class":113,"line":139},[111,558,142],{"class":121},[111,560,145],{"class":117},[111,562,148],{"class":121},[111,564,565],{"class":113,"line":151},[111,566,154],{"class":135},[111,568,569],{"class":113,"line":157},[111,570,160],{"class":121},[42,572,163],{"id":163},[26,574,166,575,169],{},[89,576,91],{},[171,578,174],{"id":173},[26,580,177],{},[26,582,180,583,187],{},[67,584,585],{"href":183},[89,586,186],{},[103,588,589],{"className":105,"code":190,"language":107,"meta":15,"style":15},[89,590,591,605,609,633,641],{"__ignoreMap":15},[111,592,593,595,597,599,601,603],{"class":113,"line":114},[111,594,197],{"class":117},[111,596,200],{"class":121},[111,598,203],{"class":125},[111,600,206],{"class":121},[111,602,210],{"class":209},[111,604,213],{"class":121},[111,606,607],{"class":113,"line":132},[111,608,219],{"emptyLinePlaceholder":218},[111,610,611,613,615,617,619,621,623,625,627,629,631],{"class":113,"line":139},[111,612,118],{"class":117},[111,614,226],{"class":121},[111,616,229],{"class":117},[111,618,232],{"class":121},[111,620,126],{"class":125},[111,622,237],{"class":121},[111,624,240],{"class":117},[111,626,243],{"class":117},[111,628,232],{"class":121},[111,630,248],{"class":125},[111,632,129],{"class":121},[111,634,635,637,639],{"class":113,"line":151},[111,636,255],{"class":121},[111,638,258],{"class":125},[111,640,261],{"class":121},[111,642,643],{"class":113,"line":157},[111,644,160],{"class":121},[26,646,268,647,272,649,276,651,279],{},[89,648,271],{},[89,650,275],{},[89,652,186],{},[103,654,655],{"className":105,"code":282,"language":107,"meta":15,"style":15},[89,656,657,667,675,683],{"__ignoreMap":15},[111,658,659,661,663,665],{"class":113,"line":114},[111,660,197],{"class":117},[111,662,200],{"class":121},[111,664,203],{"class":125},[111,666,295],{"class":121},[111,668,669,671,673],{"class":113,"line":132},[111,670,300],{"class":121},[111,672,210],{"class":209},[111,674,305],{"class":121},[111,676,677,679,681],{"class":113,"line":139},[111,678,310],{"class":121},[111,680,314],{"class":313},[111,682,305],{"class":121},[111,684,685],{"class":113,"line":151},[111,686,321],{"class":121},[26,688,324,689,327],{},[89,690,186],{},[171,692,693,334],{"id":330},[89,694,333],{},[26,696,337,697,343],{},[67,698,699],{"href":340},[89,700,333],{},[103,702,703],{"className":105,"code":346,"language":107,"meta":15,"style":15},[89,704,705,715,723,731,735],{"__ignoreMap":15},[111,706,707,709,711,713],{"class":113,"line":114},[111,708,118],{"class":117},[111,710,122],{"class":121},[111,712,126],{"class":125},[111,714,129],{"class":121},[111,716,717,719,721],{"class":113,"line":132},[111,718,255],{"class":121},[111,720,365],{"class":125},[111,722,261],{"class":121},[111,724,725,727,729],{"class":113,"line":139},[111,726,142],{"class":121},[111,728,145],{"class":117},[111,730,148],{"class":121},[111,732,733],{"class":113,"line":151},[111,734,380],{"class":135},[111,736,737],{"class":113,"line":157},[111,738,160],{"class":121},[171,740,388],{"id":387},[26,742,743,397],{},[67,744,745],{"href":393},[89,746,396],{},[26,748,400,749,407],{},[67,750,751],{"href":403},[89,752,406],{},[26,754,410,755,415],{},[67,756,414],{"href":413},[42,758,419],{"id":418},[50,760,761,763,767,771],{},[53,762,424],{},[53,764,427,765,430],{},[89,766,91],{},[53,768,433,769,436],{},[89,770,333],{},[53,772,439],{},[26,774,442],{},[444,776,446],{},[448,778],{"tags":450,"lang":451,"section":452},{"title":15,"searchDepth":151,"depth":157,"links":780},[781,782,783,788],{"id":456,"depth":132,"text":457},{"id":459,"depth":132,"text":460},{"id":163,"depth":132,"text":163,"children":784},[785,786,787],{"id":464,"depth":139,"text":465},{"id":467,"depth":139,"text":468},{"id":470,"depth":139,"text":471},{"id":473,"depth":132,"text":474},{"date":477,"tags":450,"locale":478,"sidebar":479},{"title":5,"description":28},{"toc":792,"fullToc":792},[793,794,796,802],{"id":44,"depth":132,"text":45},{"id":86,"depth":132,"text":795},"LIFFアプリがどの環境で動いているかはliff.isInClient()でわかる",{"id":163,"depth":132,"text":163,"children":797},[798,799,801],{"id":173,"depth":139,"text":174},{"id":330,"depth":139,"text":800},"liff.closeWindow()はLIFFブラウザ以外では挙動が保証されない",{"id":387,"depth":139,"text":388},{"id":418,"depth":132,"text":419},1786497886230]