【翻訳】Developing Channel Web Applications

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

元ページ：[LINE Developers - Developing Channel Web Applications](https://developers.line.me/in_app_web/development-application)

***

# 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:
> 次のような感じです。

``` HTML
<!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だった場合、有効なパラメータ付与は次の通りです。

- *https://entry.url/page*/param1/param2?key1=value1&key2=value2

**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コード例です。

``` 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**に、右のボタンを閉じるにする方法は以下の通りです。

``` javascript
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.
>  スクリーン上のタップされた要素は設定されたプロパティによってふるまいを変えます。

``` javascript
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`関数を呼び出すことでアプリケーションを終了します。


``` javascript
LCS.Interface.closeWebView();
```