• 地域貢献
  • 総合窓口
    • 寄稿者申請
  • プライバシーポリシー
    • クッキーポリシー
2025/05/24 土曜日
  • ログイン
  • 登録
beKOUE
  • English
  • 中文 (中国)
  • Español
  • 地域をつなぐ
  • 神戸
  • 明石
  • テクノロジーオリジナル
結果なし
すべての結果を見る
beKOUE
  • 地域をつなぐ
  • 神戸
  • 明石
  • テクノロジーオリジナル
結果なし
すべての結果を見る
beKOUE
結果なし
すべての結果を見る
オンラインショップ|オーダーメイド

ホーム » 【2023年版】LIFF 量産 継承 よって フロント再利用

【2023年版】LIFF 量産 継承 よって フロント再利用

LIFF 第一章

管理者 by 管理者
2023年2月15日
in ワードプレス
0 0
A A
0
0
シェア
198
VIEWS
シェアツイートスキャン

目次

  • 1. LIFFとは
  • 2. 同じフロントで複数のLIFF ID
  • 3. LIFFアプリ設定
  • 4. まとめ

1 LIFFとは

WordPress&WoocommerceはLine連携(Messaging API、Botモード…)など多くの機能を取り入れています。Lineを入口(鍵)として、最終的にsafari・chromeなど多様なブラウザでwebページを表示させることができます。著者はブラウザ主義を貫いていますが、Lineからwebページを表示する際も必ず外部ブラウザへ遷移※1します。

サッカー|フィジカル|六甲アイランド|キッズ|幼児体操

外部ブラウザへ遷移する度に、著者は思うところがありました:「アプリの切替機能を無くす事でユーザーの困惑は減るのではないか?」と…

幸い、Line社も世の中のブラウザに対抗する措置を取っています。ここでLIFF(LINE Front-end Framework)の登場。Line社はミニアプリと言っていますが、一般人から見るとLineに依存するミニブラウザといったらわかりやすいでしょうか。

今回、著者はオリジナル機能として「回数制(チケット)管理機能」も実現しました。その為に初めてLIFFの開発で直面した困難、そして解決するに至るまでの道のりを一部紹介します。基礎は省き上級者向けの内容のみ共有したいと思います。

※1 Line Labsの機能 iOS限定「リンクをデフォルトのブラウザで」を有効にする。

2 同じフロントで複数のLIFF ID

LIFFでは安全対策をたくさん施しています。その一つとしてLIFF URLは唯一であること(LIFF URLとミニアプリは一対一)!即ち、制作した一つのフロント(エンドポイントURL)は唯一のLIFF URLでしか呼び出せないこと。多様性を無くすことでセキュリティは向上するが、開発は量産に適さないという仕組みです。

ここで著者はLIFF URLスキーム のURLパラメータに関する記載を見て思いました:「一つのフロントはエンドポイントURLだが、URLパラメータにて正しいLiffidを引き渡すことができれば安全対策の縛りを回避できるだろう。」

上記の2つ機能は初期表示のフロントは同じですが、異なるリッチメニュー(LIFF URL)から起動されています。

3 LIFFアプリ設定

LIFF URLとリンクするエンドポイントURLは唯一無二ですが、URLパラメータは可変でいいので、liffIDをURLパラメータに搭載させます。

フロント側でURLパラメータのliffIDを利用し、正しいLIFFアプリを初期化します。

オンラインショップ|ダンス|スポーツ|専門店
jQuery(function ($) {
    // URLSearchParamsオブジェクトを取得
    // http://var.blog.jp/archives/72768336.html
    var params = url.searchParams;
    if (params.get('liffId')) {
        liffId = params.get('liffId');
    }

    $(document).ready(function () {
        let myLiffId = liffId;
        initializeLiffOrDie(myLiffId);
    });

    function initializeLiff(myLiffId) {
        liff
            .init({
                liffId: myLiffId,
                //外部ブラウザでのLIFFアプリ初期化時にliff.login()メソッドを自動で実行する
                withLoginOnExternalBrowser: true, 
            })
            .then(() => {
                initializeApp();
            })
            .catch((err) => {
                console.error(err);
                document.getElementById("liffAppContent").classList.add("hidden");
                document
                    .getElementById("liffInitErrorMessage")
                    .classList.remove("hidden");
            });
    }
    function initializeApp() {
        if (!liff.isLoggedIn()) {
            liff.login({ redirectUri: location.href });
        } else {
            document.getElementById("liffAppContent").classList.remove("hidden");
        }

        idToken = liff.getAccessToken();
        getUserData(idToken);
    }
}

Liff でidTokenを取得し、サーバー側へ送信する。そして サーバー側でLineUserIdを認証。idTokenの解析はフロント側で行わないことは義務付けられています。ここは今までのLine連携と同じ手法でidTokenを解析しましょう。

protected function get_line_userid()
{
	$ch = curl_init();
	curl_setopt($ch, CURLOPT_HTTPHEADER, array("Authorization: Bearer {$this->json_obj['id_token']}"));
	curl_setopt($ch, CURLOPT_URL, 'https://api.line.me/v2/profile');
	curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'GET');
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	$line_profile = curl_exec($ch);
	curl_close($ch);
	// Line情報を取得
	$line_profile = json_decode($line_profile, true);

	if (!$line_profile || !isset($line_profile['userId'])) {
		return false;
	}

	return $line_profile['userId'];
}

4 まとめ

LIFFのエンドポイントにLIFF IDを埋め込みます。サーバー側への送受信をajaxに頑張ってもらえば、同じフロント(エンドポイントURL)でも量産することが実現できると考えています。

次章は、回数制を導入する前、woocommerce注文履歴をLIFF ミニアプリで表示するポイントを紹介します。

そして、さらに詳しいソースコードを求めている方・LIFF開発に興味がありLIFEに関する意見を交換したい方は是非ログインしてコメントを残してください。

タグ: javascriptLIFFLinePHP上級者
シェアツイートスキャン
MeIN|明石|二見|キッズ|ダンス|Since 2016
前の記事

【2023年版】Woocommerce 注文 受け Lineへ電子レシートを送信

次の記事

【2023年版】Line内で woocommerce注文履歴

管理者

管理者

著者は1985年中国生まれ。2008年大学を卒業後、中国国内の日系企業に就職。2011年ヘッドハンティングで東京本社へ移籍した後、日本大手からの下請けを中心にシステムエンジニア・プログラマーとして企業に貢献。その傍ら日本語・各種プログラミング・言語力に磨きをかける。2016年20代最後の転機として世界一周の旅へ。多種多様な文化にたっぷりと触れた後、全てをゼロからリスタートする覚悟で未開の地関西へと拠点を移す。神戸の一大都市を世界中に発信する為、ITで培った全ての技術を搭載したbekoue.comを開設。世界中に関西・神戸の魅力を毎日発信中。

関連 投稿

ワードプレス

Line Woocommerce 回数制のオンライン化

2023年4月13日
0
141

回数制について スーパー銭湯の入浴券・バスの乗車券・イベント参加券など、世の中には回数券の利用場面が数多くあります。 今回はスポーツ教室Gooall様協力の下(以下Gooall...

続きを読む
【2023年版】LIFF 量産 継承 よって フロント再利用

【2023年版】Line内で woocommerce注文履歴

2023年2月15日
329
【2023年版】Woocommerce 注文 受け Lineへ電子レシートを送信

【2023年版】Woocommerce 注文 受け Lineへ電子レシートを送信

2023年2月15日
185
次の記事
【2023年版】LIFF 量産 継承 よって フロント再利用

【2023年版】Line内で woocommerce注文履歴

“白い大吉”の2号店が東灘区に! 1月26日オープン『やきとり大吉

“白い大吉”の2号店が東灘区に! 1月26日オープン『やきとり大吉

ログイン してコメントを残しましょう

人気

  • 週末のお楽しみが今年も始まる!「神戸港ウィークエンド花火」2月

    週末のお楽しみが今年も始まる!「神戸港ウィークエンド花火」2月

    0 共有
    シェア 0 ツイート 0
  • 総勢32基の豪華絢爛なだんじりが街を巡行 東灘区の各地域で「令和

    0 共有
    シェア 0 ツイート 0
  • 兵庫県立美術館での開催は10年ぶり!「パウル・クレー展――創造

    0 共有
    シェア 0 ツイート 0
  • 昭和の懐かしいキャラも!神戸ゆかりの美術館で「サンリオ展

    0 共有
    シェア 0 ツイート 0
  • 神戸市:「神戸市暮らし支援臨時特別給付金」のお知らせ

    0 共有
    シェア 0 ツイート 0

最新

『六甲アイランドの歌姫』板垣望ソプラノコンサート 202505

2025年5月22日
0

明石市役所本庁2階ロビーで「あかし動物センターの犬猫たち パネル

2025年5月22日
0

【イベント中止情報】5/21のR.I.C Party -CENTRAL- 六甲アイランド

2025年5月22日
0

強みと魅力発見!セルフブランディング講座 – 六甲アイランド

2025年5月22日
0
「自然×街」のコントラストが魅力!六甲山上駅からすぐの『天覧台

「自然×街」のコントラストが魅力!六甲山上駅からすぐの『天覧台

2025年5月19日
1
オンラインショップ|オーダーメイド
beKOUE

  • 地域をつなぐ
  • 神戸
  • 明石
  • テクノロジー
  • MeINPartner
  • GooallPartner
  • shAopEC Site
  • GlobalFactory
  • Booking
  • 地域貢献
  • 総合窓口
  • プライバシーポリシー

Copyright 2025 by be Co., Ltd.

結果なし
すべての結果を見る
  • English
  • 中文 (中国)
  • Español
  • 地域をつなぐ
  • 神戸
  • 明石
  • テクノロジー
  • ログイン
  • 登録
  • 地域貢献
  • 総合窓口
  • プライバシーポリシー

Copyright 2025 by be Co., Ltd.

おかえりなさい!

Facebookからログイン
Googleからログイン
Lineからログイン
または

下記よりログインしてください

パスワードをお忘れた? 登録

新規アカウント登録!

Facebookから登録
Googleから登録
Lineから登録
または

以下のフォームにご記入の上、アカウントを新規してください

*当サイトに登録することにより、お客様は利用規約およびプライバシーポリシーに同意したものとみなされます.
すべての項目が必須です. ログイン

パスワードの再発行

パスワードをリセットするには、ユーザー名またはEmailアドレスを入力してください.

ログイン
当サイトはクッキーを使用しています。引き続き使用することにより、クッキーの使用に同意すると見なします。 クッキーのポリシーをご覧ください.
error: Alert: コンテンツは保護されています !!!