画面サイズごとのLIFF間遷移の挙動の違いについてまとめてみた
2025.02.06LIFF間遷移とは
公式ドキュメントによると、
LIFFブラウザでLIFFアプリを開いているときに、別のLIFFアプリへのリンクをクリックすると、LIFFブラウザを開いたまま別のアプリを表示することができます。これを「LIFF間遷移」と呼びます。LIFF間遷移ではLIFFブラウザが閉じないため、LIFFブラウザの戻るボタンで遷移元のLIFFアプリに戻ることができます。
つまり、LIFFブラウザを閉じることなく、別のLIFFアプリを表示することができる技術のことを言います。ブラウザの戻るボタンで遷移元に戻ることが可能です。
LIFF間遷移の条件
LIFF間遷移を実現するためには、以下の3つの条件を満たす必要があります：
- LIFF SDKのバージョンが2.4.1以上であること
- 遷移元のLIFFアプリの画面サイズがFull表示に設定されていること
- 遷移先のLIFFアプリがliff.init()で正しく初期化されていること
LIFF間遷移やってみた
では、早速LIFF間遷移を試してみたいと思います。実際に遷移元と遷移先のLIFFアプリをReactで作成して動作を確認してみました。
遷移元のLIFFアプリ
import { useEffect, useState } from "react";
import liff from "@line/liff";
import "./App.css";
function App() {
const [message, setMessage] = useState("");
const [error, setError] = useState("");
useEffect(() => {
liff
.init({
liffId: import.meta.env.VITE_LIFF_ID,
})
.then(() => {
setMessage("LIFF init succeeded.");
})
.catch((e: Error) => {
setMessage("LIFF init failed.");
setError(`${e}`);
});
});
return (
<div className="App">
<h1>遷移元</h1>
{error && (
<p>
<code>{error}</code>
</p>
)}
<a
href="https://liff.line.me/xxxxxxxxxxxx" //遷移先のurl
target="_blank"
rel="noreferrer"
>
LIFF間遷移！
</a>
</div>
);
}
export default App;
遷移先のLIFFアプリ
import { useEffect, useState } from "react";
import liff from "@line/liff";
import "./App.css";
function App() {
const [message, setMessage] = useState("");
const [error, setError] = useState("");
useEffect(() => {
liff
.init({
liffId: import.meta.env.VITE_LIFF_ID, // 遷移先でもliff.initをする必要あり
})
.then(() => {
setMessage("LIFF init succeeded.");
})
.catch((e: Error) => {
setMessage("LIFF init failed.");
setError(`${e}`);
});
});
return (
<div className="App">
<h1>遷移先</h1>
{error && (
<p>
<code>{error}</code>
</p>
)}
<p>LIFF間遷移成功！</p>
</div>
);
}
export default App;
これらをデプロイして、LINE Developers ConsoleからLIFFアプリを画面サイズFullとして追加しました。
遷移元の画面サイズがFullの場合は、条件を満たしているのでLIFF間遷移が機能します。その際には、ドキュメントにあるようにブラウザは閉じずにそのまま遷移先のLIFFアプリに遷移することが確認できました。また、戻るボタンを押してもその画面のまま、遷移元のLIFFアプリに戻ることができました。
ここまでがLIFF間遷移の基本的な動作です。
しかし、LIFFアプリの遷移元の画面サイズによってはLIFF間遷移が機能せず、異なる動作をする場合があります。
LIFFアプリの画面サイズによる動作
LIFFアプリ間の遷移は、遷移元のLIFFアプリの画面サイズによって動作が変わります。
以下ドキュメントの内容をそのまま記載します。
①：遷移元のLIFFアプリの画面サイズがTallもしくはCompactの場合は、遷移先の画面サイズにかかわらず一度ブラウザが閉じてから、遷移先のLIFFアプリが表示されます。
②：遷移元のLIFFアプリの画面サイズがFullの場合、遷移後のLIFFアプリは画面サイズの指定にかかわらずFullで表示されます。
③：遷移元のLIFFアプリの画面サイズがFullで、遷移先のLIFFアプリの画面サイズの指定がTallもしくはCompactだった場合、遷移後のLIFFアプリでは、アクションボタンは表示されません。
これによると、
遷移元のLIFFアプリは必ず画面サイズがFullに設定されていないと、LIFF間遷移は行われないです。
遷移元のLIFFアプリの画面サイズがFull以外のTallやCompactの場合は、一度ブラウザが閉じてから遷移先のLIFFアプリが開かれます。（これはLIFF間遷移とは呼ばない）
LIFF間遷移の際には、遷移先のサイズ設定は実質的に無視されFullで表示されるようです。
実際に試してみた
ドキュメントを読むだけではイメージしづらかったので実際に試してみました。
①：遷移元のLIFFアプリの画面サイズがTallもしくはCompactの場合は、遷移先の画面サイズにかかわらず一度ブラウザが閉じてから、遷移先のLIFFアプリが表示されます。
まずはこちらから。
遷移元のLIFFアプリをTallに設定。遷移先のLIFFアプリは一旦Fullに設定しておきます。
この状態でLINE上のLIFFブラウザで遷移元のLIFFアプリから遷移先のLIFFアプリに遷移してみたいと思います。
すると、遷移元のLIFFブラウザが一度閉じてから、次に遷移先のLIFFブラウザが出現しているのがわかると思います。
気になったので、遷移先をFull以外（今回はTall）にしてみたらどうなるかも確認してみます。
この場合でも一度ブラウザが閉じたのち、設定した画面サイズ（Tall）で遷移先のLIFFアプリが表示されました。
つまり、遷移元のLIFFアプリの画面サイズがTallもしくはCompactの場合は、一度LIFFブラウザが閉じてから、遷移先のLIFFアプリが設定されたサイズで表示されるようです。
②：遷移元のLIFFアプリの画面サイズがFullの場合、遷移後のLIFFアプリは画面サイズの指定にかかわらずFullで表示されます。
次にこちらを試してみます。こちらは遷移元がFullサイズなので、LIFF間遷移になります。
遷移元をFull、遷移先をTallにして試してみたいと思います。
遷移元がFullの場合は、条件を満たしているのでLIFF間遷移が機能します。また、その際は遷移先の画面サイズはTallに設定していたにもかかわらず、それは無視されてFullサイズで表示されていることがわかります。
③：遷移元のLIFFアプリの画面サイズがFullで、遷移先のLIFFアプリの画面サイズの指定がTallもしくはCompactだった場合、遷移後のLIFFアプリでは、アクションボタンは表示されません。
こちらの条件は②と全く同じです。
この場合は、画面サイズに関係なく遷移先LIFFアプリがFullで表示されますが、違いとしてアクションボタンが表示されるかどうかが変わります。
アクションボタンとは、以下の画像のボタンのことです。
遷移先がFullのLIFF間遷移：Fullで表示され、アクションボタンが表示される
遷移先がFull以外のLIFF間遷移：Fullで表示されアクションボタンが表示されない
遷移先がFull以外の場合はアクションボタンが表示されていないことがわかると思います。
おわりに
今回はドキュメントを読んでいて気になったLIFF間遷移についてまとめてみました。
なかなかややこしかったですが、画面サイズによって各遷移の動作に違いがあるのがわかりました。よっぽどTallやCompactにしたい理由がない限りは画面サイズはFullにしておけば、LIFF間遷移が発生した際にもユーザーにシームレスな遷移体験をしてもらえるのではないかと感じました。
以上、どなたかの参考になれば幸いです。
参考
