LoginSignup
2
2

More than 5 years have passed since last update.

@yuusuke510(yusuke goto)in株式会社D2C ID

【翻訳】Developing Channel Web Applications

Last updated at Posted at 2016-07-12

必要だったので翻訳してみました。
間違ってたらコメントで教えてくださいm(_ _)m

元ページ：LINE Developers - Developing Channel Web Applications

Developing Channel Web Applications

Channel Web Applicationsの開発

This page explains how to develop Channel Web Applications for the LINE app.

このページではChannel Web Applications for LINE appの開発方法を説明します。

Developing and launching a simple application

シンプルなアプリケーションの開発と立ち上げ

Here we will walk you through the process of creating a simple Channel Web Application that displays the words, “Hello, Channel Web Application!”.

ここではディスプレイ上に“Hello, Channel Web Application!”という文字が表示されるだけのシンプルなChannel Web Applicationsの作成を実地検証します。

Create an HTML file to be loaded by the entry URL registered earlier.

初期に登録したentry URLで呼び出せるHTMLファイルを作成します。

It should look like this:

次のような感じです。

<!DOCTYPE html>
     <html>
          <head></head>
          <body>
               <p>Hello, Channel Web Application!</p>
          </body>
     </html>

Save the above into an appropriately named HTML file and place it on your web server.

Webサーバー上に適切な名前で適切な場所に保存します。

You are now ready to test your application. Run your Channel Web Application from the LINE app using the following URL format.

アプリケーションをテストする準備ができました。次のURLフォーマットを使ってChannel Web ApplicationsをLINE appから起動します。

  • line://ch/ [Channel ID] - Launch the LINE app directly.

    line://ch/ [Channel ID] - 直接LINE appを立ち上げます。

  • https://line.me/R/ch/ [Channel ID] - If the LINE app is not installed, the store page will be opened.

https://line.me/R/ch/ [Channel ID] - LINE appをインストールしていなかったらストアが立ち上がります。

Follow the steps below to get your Channel ID.

次の手順であなたのChannel IDを取得します。

1.Click Channels on the top right and log in to the Channel Console.

右上にある「Channels」をクリックしてChannel Consoleにログインします。

2.Select your Channel from the list on the left to find your Channel ID.

左のリストからChannelを選択して、Channel IDを探します。

Once you have your Channel ID, access the URL shown above.

以前Channel IDを取得していたら、前掲のURLにアクセスします。

The easiest way to do this is to send the URL to yourself by creating a group in which you are the only member.

最も簡単な方法は、自分だけのLINEグループを作って、そこにURLを投稿することです。

Click on the URL to open WebView. If it displays a web page with a message that reads “Hello, Channel Web Application!”, your application is running successfully.

URLをクリックしてWebViewで開きます。画面上で“Hello, Channel Web Application!”が読めたらアプリケーションの立ち上げ成功です。

The title bar (bar displayed at the top of the screen) lets you control your application using the JavaScript SDK. It has an exit button which lets users return to the LINE app from WebView.

タイトルバー（スクリーンの最上部のバー）はJavaScript SDKを使うことでアプリケーションからコントロール可能です。ここにはユーザーがLINE appのWebViewから戻る為のボタンがあります。

Launching applications with parameters

パラメータ付きでアプリケーションを実行する

Your Channel Web Application can be launched with the following line scheme:

Channel Web ApplicationはフォローしているLINEスキーマを利用して実行できます。

  • line://ch/[Channel ID]

To pass parameters to your application via the line scheme above, append the parameters to the line scheme as shown below:

LINEスキーマ経由でパラメータを通すために、LINEスキーマの後ろにパラメータを付与します。

  • line://ch/[Channel ID]/param1/param2?key1=value1&key2=value2

For example, if the entry URL is https://entry.url/page, the passed parameters will be appended as follows:

例えば、entry URLがhttps://entry.url/pageだった場合、有効なパラメータ付与は次の通りです。

Note: When adding parameters to the line scheme, make sure to add a slash (/) after the Channel ID as shown below:

注意：LINEスキーマにパラメータを付与する時、次のようにスラッシュの後にChannel IDが付与されているか確認してください。

  • line://ch/[Channel ID]/?key1=value1

Installing the JavaScript SDK

JavaScript SDKをインストールする

The JavaScript SDK lets you add a social element to your application by integrating it with LINE.

JavaScript SDKはアプリにソーシャルエレメントを追加します。

With the JavaScript SDK, you can retrieve data such as user profiles and friends lists.

JavaScript SDKによって、User ProfileとFriends Listsを取得できます。

To use the JavaScript SDK, import the JavaScript SDK file as a script element in the head of the HTML file that you want.

JavaScript SDKを使うために、<head>内にJavaScript SDKファイルをインポートしてください。

  • Note: Ask your LINE representative for the location of the JavaScript SDK file. > 注意：あなたのLINE代理人（管理者？）JavaScript SDKの場所を問い合わせしてください。

The JavaScript SDK includes many APIs which can be used once a deviceready event has been generated inside the web browser.

JavaScript SDKは、DeviceReadyイベントがブラウザ内に生成される多くのAPIを含んでいます。

The following is an example of HTML code with the JavaScript SDK embedded inside.

以下のコードはJavaScript SDKを埋め込んだHTMLコード例です。

<!DOCTYPE html>
<html>
    <head>
        <!-- Loading **JavaScript SDK** file -->
        <script src=LOCATION_OF_JAVASCRIPT_SDK></script>
        <script type="text/javascript">
            window.addEventListener("load", function(evt) {
                document.addEventListener("deviceready", function(evt) {
                    // Can use **JavaScript SDK** APIs from here!
                    document.getElementById("ready").innerHTML = "Hello, Channel Web Application with **JavaScript SDK**!";
                }, false);
            });
        </script>
    </head>
    <body>
        <p id="ready"></p>
    </body>
</html>

You must import the JavaScript SDK and perform deviceready event monitoring on every web page of your Channel Web Application.

JavaScript SDKの埋め込みと、全てのページでのDevice Readyイベントの監視が必要です。

Controlling the title bar

タイトルバーを操作する

The title bar is found at the top of the screen where your application runs. It is not a part of WebView. It is a native UI element in Android and iOS.

アプリケーション起動時、スクリーントップにタイトルバーが見つかると思います。
これはWebViewのパーツではなく、AndroidやiOSのネイティブUIパーツです。

The title bar is used to:

タイトルバーは以下を容易にします。

  • Provide the user with a unified user interface

    統一されたUIの提供

  • Give the user a way to return to the LINE app if the page fails to load

    ページ読み込みに失敗したら、LINE appへ戻れる遷移の提供

At first, the title bar only has an exit button on the right to close your application. It can be modified in the following ways using the JavaScript SDK API:

最初、タイトルバーには右側に閉じるボタンのみ存在しています。
JavaScript SDK APIを使って以下のように変更できます。

  • Change the string displayed for the left button, change the operation performed on click

    左のボタンのテキストの変更と、クリック時の挙動の変更

  • Change the string displayed in the middle, change the operation performed on click

    中央のテキストの変更と、クリック時の挙動の変更

  • Change the string displayed for the right button, change the operation performed on click

    右のボタンのテキストの変更と、クリック時の挙動の変更

A typical setup is to have the left button take you to the previous page and the right button close the application.

一般的な設定としては、左のボタンを前ページヘ戻る挙動に、右のボタンをアプリケーションを閉じるボタンにします。

The following shows you how to use the LCS.Interface.updateTitleBar() function in the JavaScript SDK API to change the string displayed on the left button to Back, the middle string to Sample game, and the right button to Close.

LCS.Interface.updateTitleBar()関数を使って、左のボタンを戻るボタンに、中央のテキストをSample gameに、右のボタンを閉じるにする方法は以下の通りです。

var options = {
  pageKey: "key1",
  titleBar: {
    left: {
      imgId: "btn_default",
      text: "Back",
      visible: true,
      enable: true
    },
    center: {
      text: "Sample game",
      clickable: true
    },
    right: {
      imgId: "btn_default",
      text: "Close",
      visible: true
      enable: true
    }
  }
};
LCS.Interface.updateTitleBar(options);

If you omit the properties for left and right, the back button will be displayed on the left and the exit button on the right.

左と右のプロパティを除外するなあら、戻るボタンは左に表示され、右に閉じるボタンが表示されるでしょう。

Touch events can be handled and processed independently for the left button, right button and center title string.

タッチイベントは左ボタン、右ボタン、中央テキストに対して独立して取得と処理が行えます。

The following shows how to register an event handler using the LCS.Interface.registerTitleBarCallback function.

LCS.Interface.registerTitleBarCallback関数を使ってイベントハンドラを登録する方法は以下の通りです。

The element on the screen that gets tapped behaves according to the properties of the object passed to it by the event handler.

スクリーン上のタップされた要素は設定されたプロパティによってふるまいを変えます。

LCS.Interface.registerTitleBarCallback(function(evt) {
  switch(evt.target) {
  case "LBUTTON":
    // When the left button is tapped
    break;
  case "RBUTTON":
    // When the right button is tapped
    break;
  case "BACK":
    // When the default left button is tapped
    break;
  case "TITLE":
    // When the title area is tapped
    break;
  }
});

Closing applications

アプリケーションを閉じる

Call the LCS.Interface.closeWebView function to close your application.

LCS.Interface.closeWebView関数を呼び出すことでアプリケーションを終了します。

LCS.Interface.closeWebView();
2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
2