狐好きぷろぐらまー

狐好きプログラマー見習いのブログです。

【LINE】LINEのトーク画面でTwitterを開いてみた【LINEログイン】

おはようございます。

pregum_foxです。

今回は、LINE上でTwitterを開いてみました。

画面の見た目です。

f:id:pregum_fox:20200705064959p:plain
LINE上でTwitterを開いた画面

目次です。

LINE上でTwitterを開く為に必要なもの

  • LINEアカウント

普段LINEで使用されている方はそのアカウントを利用することになります。

ない方は、後述するLINE Developesにログインができないため、できません。

ごめんなさい。

こちらのQ&AでLINEビジネスID(メールアドレスだけで登録可能)でのLINE Developersへのログインは不可能だということが記載されています。

LINE上でTwitterを開く手順

LINE上でTwitterを開く手順について書いていきます。

基本的にはこちらのドキュメントに沿って作成し、4.のチャネルを作成する際に、チャネルの種類を"LINE ログイン"を選択すればOKです。

LINE Front-end Framework(LIFF)を使ってLINEのトーク画面上にTwitterを表示させます。

LIFFは"LINE ログイン"というチャネルで作成することができます。

チャネルはプロバイダーから作成することができます。

といった感じで、今回は順番に作成していきます。

  1. LINE Developersへログイン
  2. プロバイダーの作成
  3. チャネルの作成
  4. LIFFの作成
  5. 動作確認 以上です。

では詳細を書いていきます。

1. LINE Developersへログイン

はじめにLINE Developersへログインします。

https://developers.line.biz/ja/

上記のURLへ移動し、ログインをクリックします。

f:id:pregum_fox:20200705080621p:plain
LINE Developersへのログイン

クリック後、ログインするアカウントの種類を聞かれますが、ここでは、"LINEアカウントでログイン"を選択します。

下の"ビジネスアカウントでログイン"でログインを試してみましたが、私の場合はできませんでした。

f:id:pregum_fox:20200705080753p:plain

その後、ログイン画面が表示されるので、"QRコードログイン"を選択し、スマートフォンのLINEアプリに表示されたQRコードを読み込ませます。

f:id:pregum_fox:20200705081217p:plain
ログイン画面

f:id:pregum_fox:20200705081431p:plain
QRコードでログイン

その後スマートフォン側でログインしますか?と確認されるので、ログインボタンをタップし

PCの画面上に表示される4桁の番号をスマートフォン側で入力します。

f:id:pregum_fox:20200705081810p:plain
4桁の数字を入力

すると、PC上でLINE Developersにログインできています。

f:id:pregum_fox:20200705082010p:plain
ログイン後の画面

2. プロバイダーの作成

以降の作業は1. でログインした画面上で行っていきます。

ログイン後の画面の上のプロバイダーの横にある作成ボタンを押します。

f:id:pregum_fox:20200705082330p:plain
プロバイダー作成開始

プロバイダー名を入力し、その下の作成ボタンをクリックします。

f:id:pregum_fox:20200705082450p:plain
プロバイダー作成

作成に成功するとプロバイダーが作成され、作成したプロバイダーが選択された状態になります。

f:id:pregum_fox:20200705082720p:plain
プロバイダー作成成功

3. チャネルの作成

  1. で作成したプロバイダーの画面でLINEログインをクリックします。

f:id:pregum_fox:20200705085319p:plain
作成するチャネルの選択

クリックすると、作成画面になるので

  • チャネル名
  • チャネル説明
  • アプリタイプ
  • メールアドレス

を入力し、同意チェックボックスにチェックを入れて作成ボタンをクリックします。

※チャネルの種類がLINEログインになっていることも確認してください。

LINEログイン出ないとLIFFが作成できません。

f:id:pregum_fox:20200705085937p:plain
チャネル作成その1

f:id:pregum_fox:20200705090050p:plain
チャネル作成その2

作成に成功すると、作成したチャネルの基本設定画面が表示されます。

f:id:pregum_fox:20200705090324p:plain
チャネル作成成功

LINE Official Account Managerにも今回作成したチャネルに対応するLINE公式アカウントが表示され、設定できるようになります。

ただ、そのままではLINEの公式アカウントの検索には引っかかりません。

id検索には引っかかります。

詳しくはこちらを参照してください。

4. LIFFの作成

次に、先程作成したチャネルにLIFFを追加します。

先程のチャネルの基本設定画面のLIFFタブを選択します。

f:id:pregum_fox:20200705090501p:plain
LIFFの作成その1

その後、LIFFタブの追加ボタンをクリックします。

f:id:pregum_fox:20200705090618p:plain
LIFFの作成その2

追加ボタンをクリックすると、基本設定を入力する画面になるので

  • LIFFアプリ名
  • サイズ
  • エンドポイントURL
  • Scope
  • ボットリンク機能

を設定して、追加ボタンをクリックします。

今回はエンドポイントURLにTwitterのURLを設定しています。

f:id:pregum_fox:20200705091211p:plain
LIFFの作成その3

f:id:pregum_fox:20200705091302p:plain
LIFFの作成その4

各項目の説明はこのあたりを参照してください。

LIFFアプリの作成に成功すると、LIFFアプリのリストに先程作成したLIFFアプリが表示されます。

f:id:pregum_fox:20200705093315p:plain
LIFFアプリ作成成功

5. 動作確認

試しに、自身のスマートフォンのLINEアプリでLINEのトーク画面からTwitterが開けるか確認します。

よく利用しているLINEお天気に先程のLIFF URLを送りつけてそこから開いてみます。

f:id:pregum_fox:20200705094144p:plain

URLをタップすると、認証画面が出てくるので"許可する"をタップします。

f:id:pregum_fox:20200705094346p:plain
認証画面

許可すると、TwitterがLINE上で表示されました!

f:id:pregum_fox:20200705094419p:plain
完了

以上です。

LIFFではLINEのユーザーIDを使っていろいろなことができるみたいですが今回はここまでです。

ここまで読んで頂き、ありがとうございました。