Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Commit 827cc88a authored by David Friedman's avatar David Friedman
Browse files

Android TV initial (time-sensitive) localization release for Japanese partners. 

Bug: 18527238
Change-Id: Id933695738a07aa0a1c02783e022dd8b98bbf98e
parent 713cd74e

docs/html-intl/intl/ja/training/tv/playback/browse.jd

0 → 100755
+194 −0
Original line number Diff line number Diff line 
page.title=カタログ ブラウザを作成する

page.tags=tv, browsefragment, presenter, backgroundmanager



trainingnavtop=true



@jd:body



<div id="tb-wrapper">

<div id="tb">

  <h2>学習の目的</h2>

  <ol>

    <li><a href="#layout">メディア ブラウズ レイアウトを作成する</a></li>

    <li><a href="#lists">メディア リストを表示する</a></li>

    <li><a href="#background">背景をアップデートする</a></li>

  </ol>



</div>

</div>



<p>

  TV で使用するメディア アプリでは、ユーザーがコンテンツ内容をブラウズして選び、再生を開始できるようにする必要があります。このタイプのアプリのコンテンツ ブラウジングに関するユーザー エクスペリエンスは、シンプルで直感的、そして目を楽しませる魅力的なものである必要があります。

</p>



<p>

  このレッスンでは、<a href="{@docRoot}tools/support-library/features.html#v17-leanback">v17 leanback サポート ライブラリ</a> が提供するクラスを使用して、アプリのメディア カタログから音楽やビデオを閲覧するためのユーザー インターフェースを実装する方法を説明します。

</p>





<h2 id="layout">メディア ブラウズ レイアウトを作成する</h2>



<p>

  leanback サポート ライブラリの {@link android.support.v17.leanback.app.BrowseFragment} クラスを使用すると、最小限のコードでブラウジング カテゴリのプライマリ レイアウトとメディア アイテムの行を作成できます。次の例では、{@link android.support.v17.leanback.app.BrowseFragment} を含むレイアウトの作成方法を示します。

</p>



<pre>

&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

  android:layout_width="match_parent"

  android:layout_height="match_parent"

  android:orientation="vertical"

  &gt;



  &lt;fragment

      <strong>android:name="android.support.v17.leanback.app.BrowseFragment"</strong>

      android:id="@+id/browse_fragment"

      android:layout_width="match_parent"

      android:layout_height="match_parent"

      /&gt;

&lt;/LinearLayout&gt;

</pre>



<p>

  アクティビティ内でこのレイアウトを使用して作業するには、レイアウトから{@link android.support.v17.leanback.app.BrowseFragment} エレメントを取得します。このクラスのメソッドを使用して、アイコン、タイトル、カテゴリ ヘッダーが有効になっているかどうかなどの表示パラメータを設定します。次のコード サンプルでは、レイアウト内で {@link android.support.v17.leanback.app.BrowseFragment} のレイアウト パラメータの設定方法を示します。

</p>



<pre>

public class BrowseMediaActivity extends Activity {



    public static final String TAG ="BrowseActivity";



    protected BrowseFragment mBrowseFragment;



    &#64;Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.browse_fragment);



        final FragmentManager fragmentManager = getFragmentManager();

        <strong>mBrowseFragment = (BrowseFragment) fragmentManager.findFragmentById(

                R.id.browse_fragment);</strong>



        // Set display parameters for the BrowseFragment

        mBrowseFragment.setHeadersState(BrowseFragment.HEADERS_ENABLED);

        mBrowseFragment.setTitle(getString(R.string.app_name));

        mBrowseFragment.setBadgeDrawable(getResources().getDrawable(

                R.drawable.ic_launcher));

        mBrowseFragment.setBrowseParams(params);



    }

}

</pre>





<h2 id="lists">メディア リストを表示する</h2>



<p>

  {@link android.support.v17.leanback.app.BrowseFragment} ではアダプタとプレゼンターを使用して、ブラウズ可能なメディア コンテンツのカテゴリや、メディア カタログのメディア アイテムを定義したり、表示したりできます。アダプタを使用すると、メディア カタログ情報が含まれているローカルやオンラインのデータ ソースに接続できます。プレゼンターは、メディア アイテムに関するデータを保持し、スクリーンにアイテムを表示する際のレイアウト情報を提供します。

</p>



<p>

  次のコード例では、文字列データを表示する際の{@link android.support.v17.leanback.widget.Presenter} の実装について示します。

</p>



<pre>

public class StringPresenter extends Presenter {

    private static final String TAG = "StringPresenter";



    public ViewHolder onCreateViewHolder(ViewGroup parent) {

        TextView textView = new TextView(parent.getContext());

        textView.setFocusable(true);

        textView.setFocusableInTouchMode(true);

        textView.setBackground(

                parent.getContext().getResources().getDrawable(R.drawable.text_bg));

        return new ViewHolder(textView);

    }



    public void onBindViewHolder(ViewHolder viewHolder, Object item) {

        ((TextView) viewHolder.view).setText(item.toString());

    }



    public void onUnbindViewHolder(ViewHolder viewHolder) {

        // no op

    }

}

</pre>



<p>

  メディア アイテムのプレゼンター クラスを構築したら、アダプタをビルドしたり、{@link android.support.v17.leanback.app.BrowseFragment} にアタッチしたりして、ユーザーのブラウジング用にスクリーン上にそれらのアイテムを表示させることができます。次のコード例では、1 つ前のコード例に示したように、{@code StringPresenter} クラスを使用して、カテゴリ内にカテゴリとアイテムを表示するためのアダプタの構築方法を示します。

</p>



<pre>

private ArrayObjectAdapter mRowsAdapter;

private static final int NUM_ROWS = 4;



&#64;Override

protected void onCreate(Bundle savedInstanceState) {

    ...



    buildRowsAdapter();

}



private void buildRowsAdapter() {

    mRowsAdapter = new ArrayObjectAdapter(new ListRowPresenter());



    for (int i = 0; i &lt; NUM_ROWS; ++i) {

        ArrayObjectAdapter listRowAdapter = new ArrayObjectAdapter(

                new StringPresenter());

        listRowAdapter.add("Media Item 1");

        listRowAdapter.add("Media Item 2");

        listRowAdapter.add("Media Item 3");

        HeaderItem header = new HeaderItem(i, "Category " + i, null);

        mRowsAdapter.add(new ListRow(header, listRowAdapter));

    }



    mBrowseFragment.setAdapter(mRowsAdapter);

}

</pre>



<p>

  この例では、アダプタの静的実装を示します。一般的なメディア ブラウジング アプリは、オンライン データベースやウェブ サービスのデータを使用します。ウェブから取得したデータを使用したブラウジング アプリの例については、<a href="http://github.com/googlesamples/androidtv-leanback">Android TV</a> のサンプル アプリを参照してください。

</p>



<h2 id="background">背景をアップデートする</h2>



<p>

  TV で使用されるメディア ブラウジング アプリを目立たせるために、ユーザーがコンテンツをブラウジングしている間の背景イメージをアップデートできます。これにより、アプリの使用がユーザーにとって、より動きのある楽しいものになります。

</p>



<p>

  Leanback サポート ライブラリは、TV アプリのアクティビティの背景を変更するための {@link android.support.v17.leanback.app.BackgroundManager} クラスを提供しています。次の例では、TV アプリのアクティビティ内の背景をアップデートする簡単なメソッドの作成方法を示します。

</p>



<pre>

protected void updateBackground(Drawable drawable) {

    BackgroundManager.getInstance(this).setDrawable(drawable);

}

</pre>



<p>

  ほとんどの既存のメディア ブラウズ アプリでは、ユーザーがメディア リストをスクロールするのに合わせて自動的に背景がアップデートされます。これを行うには選択リスナを設定して、ユーザーの現在の選択に基づいて自動的に背景をアップデートできるようにします。次の例では、{@link android.support.v17.leanback.widget.OnItemViewSelectedListener} クラスをセットアップして、選択イベントの判別後に背景をアップデートする方法を示します。

</p>



<pre>

protected void clearBackground() {

    BackgroundManager.getInstance(this).setDrawable(mDefaultBackground);

}



protected OnItemViewSelectedListener getDefaultItemViewSelectedListener() {

    return new OnItemViewSelectedListener() {

        &#64;Override

        public void onItemSelected(Object item, Row row) {

            if (item instanceof Movie ) {

                URI uri = ((Movie)item).getBackdropURI();

                updateBackground(uri);

            } else {

                clearBackground();

            }

        }

    };

}

</pre>



<p class="note">

  <strong>注意:</strong>上記の実装例はわかりやすく示すため、実際よりも単純化されています。実際にアプリでこの機能を作成する際は、パフォーマンス向上のために、別のスレッドで背景のアップデート アクションを実行するようにしてください。また、ユーザーがアイテムをスクロールする動作に合わせて背景をアップデートする場合には、ユーザーが 1 つのアイテムに落ち着くまで、背景イメージのアップデートを遅らせる時間を追加することも検討してください。これにより、背景イメージのアップデートが過剰にならないようにします。

</p>

docs/html-intl/intl/ja/training/tv/playback/details.jd

0 → 100755
+210 −0
Original line number Diff line number Diff line 
page.title=詳細ビューをビルドする

page.tags=tv, detailsfragment



trainingnavtop=true



@jd:body



<div id="tb-wrapper">

<div id="tb">

  <h2>学習の目的</h2>

  <ol>

    <li><a href="#details-presenter">詳細プレゼンターをビルドする</a></li>

    <li><a href="#details-fragment">詳細フラグメントを拡張する</a>

    <li><a href="#activity">詳細アクティビティを作成する</a></li>

    <li><a href="#item-listener">クリックされたアイテムのリスナを定義する</a></li>

  </ol>

</div>

</div>



<p>

  <a href="{@docRoot}tools/support-library/features.html#v17-leanback">v17 leanback サポート ライブラリ</a> が提供するメディア ブラウジング インターフェース クラスには、説明やレビューなどのメディア アイテムに関する追加情報を表示したり、アイテムの購入やコンテンツの再生など、アイテムに対するアクションを取ったりするためのクラスが含まれます。

</p>



<p>

  このレッスンでは、メディア アイテムの詳細に関するプレゼンター クラスを作成したり、{@link android.support.v17.leanback.app.DetailsFragment} クラスを拡張して、ユーザーがメディア アイテムを選択した場合に表示する詳細ビューを実装したりする方法を説明します。

</p>



<p class="note">

  <strong>注意:</strong>次の実装例では、追加的なアクティビティを使用して {@link android.support.v17.leanback.app.DetailsFragment} を含めています。ただし、フラグメント トランザクションを使用すると、現在の {@link android.support.v17.leanback.app.BrowseFragment} を<em>同じ</em>アクティビティにある {@link android.support.v17.leanback.app.DetailsFragment} で置き換えることにより、2 つ目のアクティビティの作成を回避できます。フラグメント トランザクションの使用については、<a href="{@docRoot}training/basics/fragments/fragment-ui.html#Replace">フラグメントを使用したダイナミックな UI のビルド</a>を参照してください。

</p>





<h2 id="details-presenter">詳細プレゼンターをビルドする</h2>



<p>

  Leanback ライブラリが提供するメディア ブラウジングのフレームワークでは、プレゼンター オブジェクトを使用して、メディア アイテムの詳細を含むスクリーン上のデータ表示を制御します。このメディア アイテムの詳細に関するプレゼンターのほぼ完全な実装を目的に、フレームワークでは{@link android.support.v17.leanback.widget.AbstractDetailsDescriptionPresenter} クラスを提供しています。これにより、次のコード サンプルのように、{@link android.support.v17.leanback.widget.AbstractDetailsDescriptionPresenter#onBindDescription onBindDescription()} メソッドを実装して、ビュー フィールドをデータ オブジェクトにバインドするだけでよくなります。

</p>



<pre>

public class DetailsDescriptionPresenter

        extends AbstractDetailsDescriptionPresenter {



    &#64;Override

    protected void onBindDescription(ViewHolder viewHolder, Object itemData) {

        MyMediaItemDetails details = (MyMediaItemDetails) itemData;

        // In a production app, the itemData object contains the information

        // needed to display details for the media item:

        // viewHolder.getTitle().setText(details.getShortTitle());



        // Here we provide static data for testing purposes:

        viewHolder.getTitle().setText(itemData.toString());

        viewHolder.getSubtitle().setText("2014   Drama   TV-14");

        viewHolder.getBody().setText("Lorem ipsum dolor sit amet, consectetur "

                + "adipisicing elit, sed do eiusmod tempor incididunt ut labore "

                + " et dolore magna aliqua. Ut enim ad minim veniam, quis "

                + "nostrud exercitation ullamco laboris nisi ut aliquip ex ea "

                + "commodo consequat.");

    }

}

</pre>





<h2 id="details-fragment">詳細フラグメントを拡張する</h2>



<p>

  メディア アイテムの詳細を表示するために {@link android.support.v17.leanback.app.DetailsFragment} クラスを使用する場合、そのクラスを拡張すると、メディア アイテムのプレビュー画像やアクションなどの追加コンテンツを提供できます。関連するメディア アイテムのリストといった追加コンテンツも提供できます。

</p>



<p>

  次のコード例では、前のセクションで説明したプレゼンター クラスを使用して、表示中のメディア アイテムのプレビュー画像やアクションを追加する方法を示しています。この例では、詳細リストの下に表示される関連するメディア アイテムの行も追加しています。

</p>



<pre>

public class MediaItemDetailsFragment extends DetailsFragment {

    private static final String TAG = "MediaItemDetailsFragment";

    private ArrayObjectAdapter mRowsAdapter;



    &#64;Override

    public void onCreate(Bundle savedInstanceState) {

        Log.i(TAG, "onCreate");

        super.onCreate(savedInstanceState);



        buildDetails();

    }



    private void buildDetails() {

        ClassPresenterSelector selector = new ClassPresenterSelector();

        // Attach your media item details presenter to the row presenter:

        DetailsOverviewRowPresenter rowPresenter =

            new DetailsOverviewRowPresenter(new DetailsDescriptionPresenter());



        selector.addClassPresenter(DetailsOverviewRow.class, rowPresenter);

        selector.addClassPresenter(ListRow.class,

                new ListRowPresenter());

        mRowsAdapter = new ArrayObjectAdapter(selector);



        Resources res = getActivity().getResources();

        DetailsOverviewRow detailsOverview = new DetailsOverviewRow(

                "Media Item Details");



        // Add images and action buttons to the details view

        detailsOverview.setImageDrawable(res.getDrawable(R.drawable.jelly_beans));

        detailsOverview.addAction(new Action(1, "Buy $9.99"));

        detailsOverview.addAction(new Action(2, "Rent $2.99"));

        mRowsAdapter.add(detailsOverview);



        // Add a Related items row

        ArrayObjectAdapter listRowAdapter = new ArrayObjectAdapter(

                new StringPresenter());

        listRowAdapter.add("Media Item 1");

        listRowAdapter.add("Media Item 2");

        listRowAdapter.add("Media Item 3");

        HeaderItem header = new HeaderItem(0, "Related Items", null);

        mRowsAdapter.add(new ListRow(header, listRowAdapter));



        setAdapter(mRowsAdapter);

    }

}

</pre>





<h3 id="activity">詳細アクティビティを作成する</h3>



<p>

  {@link android.support.v17.leanback.app.DetailsFragment} のようなフラグメントを表示に使用するには、これをアクティビティ内に含める必要があります。ブラウズ アクティビティとは別に、詳細ビューのアクティビティを作成すると、{@link android.content.Intent} を使用して詳細ビューを呼び出すことができます。このセクションでは、メディア アイテムの詳細ビューの実装を含んだアクティビティのビルド方法を説明します。

</p>



<p>

  次のように {@link android.support.v17.leanback.app.DetailsFragment} の実装を参照するレイアウトをビルドして、詳細アクティビティの作成を開始します。

</p>



<pre>

&lt;!-- file: res/layout/details.xml --&gt;



&lt;fragment xmlns:android="http://schemas.android.com/apk/res/android"

    <strong>android:name="com.example.android.mediabrowser.MediaItemDetailsFragment"</strong>

    android:id="&#64;+id/details_fragment"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

/&gt;

</pre>



<p>

  次に、前述のコード例のレイアウトを使用して、アクティビティ クラスを作成します。

</p>



<pre>

public class DetailsActivity extends Activity

{

    &#64;Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        <strong>setContentView(R.layout.details);</strong>

    }

}

</pre>



<p>

  最後に、この新しいアクティビティをマニフェストに追加します。次のように、ユーザー インターフェースがメディア ブラウズ アクティビティと一致するように、Leanback テーマを適用します。

</p>



<pre>

&lt;application&gt;

  ...



  &lt;activity android:name=".DetailsActivity"

    android:exported="true"

    <strong>android:theme="@style/Theme.Leanback"/&gt;</strong>



&lt;/application&gt;

</pre>





<h3 id="item-listener">クリックされたアイテムのリスナを定義する</h3>



<p>

  {@link android.support.v17.leanback.app.DetailsFragment} の実装後、メインのメディア ブラウジング ビューを編集して、ユーザーがメディア アイテムをクリックしたときに詳細ビューに移動するようにします。この動作を有効にするには、 {@link android.support.v17.leanback.widget.OnItemViewClickedListener} オブジェクトを、アイテム詳細アクティビティを起動するインテントの起動元の {@link android.support.v17.leanback.app.BrowseFragment} に追加します。

</p>



<p>

  次の例では、ユーザーがメインのメディア ブラウジング アクティビティのメディア アイテムをクリックしたときに、詳細ビューを起動するリスナの実装方法を示しています。

</p>



<pre>

public class BrowseMediaActivity extends Activity {

    ...



    &#64;Override

    protected void onCreate(Bundle savedInstanceState) {

        ...



        // create the media item rows

        buildRowsAdapter();



        // add a listener for selected items

        mBrowseFragment.OnItemViewClickedListener(

            new OnItemViewClickedListener() {

                &#64;Override

                public void onItemClicked(Object item, Row row) {

                    System.out.println("Media Item clicked: " + item.toString());

                    Intent intent = new Intent(BrowseMediaActivity.this,

                            DetailsActivity.class);

                    // pass the item information

                    intent.getExtras().putLong("id", item.getId());

                    startActivity(intent);

                }

            });

    }

}

</pre>

docs/html-intl/intl/ja/training/tv/playback/index.jd

0 → 100755
+42 −0
Original line number Diff line number Diff line 
page.title=TV 再生アプリのビルド

page.tags=tv, leanback



startpage=true



@jd:body



<div id="tb-wrapper">

<div id="tb">

  <h2>依存関係と前提条件</h2>

  <ul>

    <li>Android 5.0（API レベル 21）以降</li>

  </ul>

  <h2>関連コンテンツ</h2>

  <ul>

    <li><a href="{@docRoot}design/tv/index.html">TV 向けデザインとは</a></li>

  </ul>

</div>

</div>



<p>

  メディア ファイルのブラウジングと再生は、TV アプリが提供するユーザー エクスペリエンスによって左右される部分が多くあります。ゼロから開始して、高速でなめらかな魅力あるユーザー エクスペリエンスを確実にビルドすることは、非常に困難な場合があります。アプリの露出するメディア カタログが、小規模か大規模かにかかわらず、ユーザーが簡単にオプションをブラウジングでき、希望のコンテンツに辿りつけるようにすることが重要です。

</p>



<p>

  Android のフレームワークでは、<a href="{@docRoot}tools/support-library/features.html#v17-leanback">v17 leanback サポート ライブラリ</a>を使用して TV アプリのユーザー インターフェースをビルドするためのクラスを提供します。このライブラリは、最小限のコーディングで、メディア ファイルのブラウジングと再生用の効率的で親しみやすいインターフェースを作成するためのクラスのフレームワークを提供します。クラスは拡張やカスタマイズができるように設計されており、アプリ独自のユーザー エクスペリエンスを作成できます。

</p>



<p>このクラスでは、TV 向けの Leanback サポート ライブラリを使用して、メディア コンテンツブをラウジングしたり再生したりする TV アプリのビルド方法を説明します。</p>



<h2>トピック</h2>



<dl>

  <dt><b><a href="browse.html">カタログ ブラウザを作成する</a></b></dt>

    <dd>Leanback サポート ライブラリを使用して、メディア カタログのブラウジング インターフェースをビルドする方法を説明します。</dd>



  <dt><b><a href="details.html">詳細ビューをビルドする</a></b></dt>

    <dd>Leanback サポート ライブラリを使用して、メディア アイテムの詳細ページをビルドする方法を説明します。</dd>



  <dt><b><a href="now-playing.html">再生中カードを表示する</a></b></dt>

    <dd>MediaSession を使用して、「再生中」カードをホーム スクリーンに表示する方法を説明します。</dd>

</dl>

docs/html-intl/intl/ja/training/tv/playback/now-playing.jd

0 → 100755
+134 −0

File added.

Preview size limit exceeded, changes collapsed.

docs/html-intl/intl/ja/training/tv/start/hardware.jd

0 → 100755
+314 −0

File added.

Preview size limit exceeded, changes collapsed.