Markup.js の使用方法 その2

前回のブログで Markup.js の説明をしましたが、今回はさらに詳細に説明しようと思います。

コー ヒーやビールのニュースを読み込むアプリ news-reader を作成します。ニュースのデータをフィードとして登録し、フィードに合わせたテンプレートを Markup.js で作成します。アプリの構成としては、ニュースに関するフィードをリスト化して、初期画面に表示し、画面上の各々のニュースをタップすると、そのニュース の詳細画面に遷移し、「⬅」ボタンを押下すると初期画面に戻る単純なアプリです。

まず、ビールのフィードを下記のサイトを利用してコンテンツ・フィードとして登録します。

http://brewery.ac-app.brightcove.jp/?feed=rss2

コーヒーのフィードを登録したい場合は、下記のサイトをご利用下さい。

http://coffee.ac-app.brightcove.jp/?feed=rss2

App Cloud は上記のフィードを最適化し、フィードの要素を下記のように教えてくれます。


上記の画像で表示されている通り、フィードの要素を下記のコードのように {{要素名}} と指定していきます。

===== index-template
<ul class="articles">
    {{articles}}
        <li data-guid="{{guid}}">
            {{if enclosure_url}}
                <img class="thumbnail" src="{{enclosure_url}}" width="75" height="75"/>
            {{else}}
                <img class="thumbnail" src="../images/default.png" width="75" height="75"/>
            {{/if}}

            <div class="teaser">
                <h3 class="article-index-title">{{title}}</h3>
                <p>{{content_encoded|clean|tease>50}}</p>
                <div class="date">
                    <small>{{pubDate|moment>`dateFormat`}}</small>
                </div>
            </div>
        </li>
    {{/articles}}
</ul>

===== detail-template
<h2 class="article-detail-title">{{article.title}}</h2>
<small>{{article.pubDate|moment>`dateFormat`}}</small>
{{if article.enclosure_url}}
    <div class="image-area">
        <img src="{{article.enclosure_url|image>250}}" width="250"/>
    </div>
{{/if}}

<div class="text">
    {{article.content_encoded|clean|grafs}}
</div>



===== をテンプレート名を記載する目印として、右側にテンプレート名を記載します。上記の場合、フィード情報をリスト化する初期画面のテンプレート名を index-template とし、各々のニュースの詳細画面のテンプレート名を detail-tempate としています。

index-template 内の説明としては、各々のニュースの ID である {{guid}} に対して、もし {{enclosure_url}} で指定される画像が存在するならば、サムネイルとして画像を表示し、存在しなければデフォルトの画像を指定します。次に、タイトルを {{title}} として指定し、ニュースの詳細を{{content_encoded}}で指定し、そのコンテンツをclean 関数とtease 関数でパイプしています。clean 関数は コンテンツから HTML/XML タグを取り除き、tease 関数で50文字以内に制限しています。その後、公開された日付を {{pubDate}} として指定し、日付をフォーマットする moment と呼ばれるライブラリを使用してパイプしています。

また、詳細画面の detail-tempate に関しても同様にテンプレートを作成してみて下さい。

index-template をテンプレートとする初期画面から、detail-template をテンプレートとする詳細画面へとタップすることで画面遷移させるには、

    var renderArticleDetail = function (article) {
        // "detail-template"は blog.txt で定義されています
        var template = bc.templates["detail-template"];
        var context = { "article": article };
        var markup = Mark.up(template, context);

       // "article-detail"は blog.html に記載されています
       // "article-detail"の div タグ内に情報を生成します
       // document.getElementById("article-detail").innerHTML = markup; を下記のように変更
       $("#article-detail").html(markup);
       
       // ページ遷移のコード部分
       // "detail-page"という名のページへ遷移します。(blog.htmlに定義されています)

        var page = document.getElementById("detail-page");
        bc.ui.forwardPage(page);
        bc.ui.refreshScrollers();
    };

のような一部コードを実装し、App Cloud の API である bc.ui.forwardPage を使用して、detail-pageという名前の ID を持つ詳細画面へ遷移させます。
サンプルコードは下記からダウンロードして下さい。


https://github.com/brightcovekk/news-reader

それでは、これからも App Cloud のブログをお楽しみに!