アプリカンブログ

HTML5でiOS/Androidアプリが開発できるプラットフォーム、アプリカンのブログです。

ブログをアプリ化してみよう(その2 記事詳細を表示する)

今回は前回のフィードを一覧表示するに続いて記事をタップしたら記事詳細を表示するようにしてみたいと思います。今回はなるべく手軽、かつアプリカンの機能を使って表示できるようにします。

js/app.jsを編集する

前回記事一覧を表示したところで、タイトルをクリッカブルにします。

$(".entries").append($("<tr><td>"+this.title+"</td></tr>"));
  ↓   
$(".entries").append($("<tr><td><a href='"+this.url+"?launch_webview=yes'>"+this.title+"</a></td></tr>"));

ここで重要なのはリンク先に ?launch_webview=yes をつけていることです。これにより、アプリカン内部のWebViewを使ってリンク先を表示するようになります。

アプリをアップロードする

編集したコードをアプリカンにアップロードしてみたいと思います。まず作業していたwebディレクトリをZipで圧縮します。そして圧縮したファイルをアップロードします。

f:id:moongift:20150623092848p:plain

アップロードしたら、コンテンツの公開を選択し、公開します。

f:id:moongift:20150623092906p:plain

このようにアップロード履歴にデータが表示されればOKです。

f:id:moongift:20150623092922p:plain

アプリカンシミュレータで実行する

次に行うのはアプリカンシミュレータを使って実機での動作確認になります。iOS版Android版がありますので、必要な方をダウンロード&インストールしてください。

そしてアプリカンシミュレータを起動して、予め登録してあるユーザID/パスワードでログインします。そうすると作成したプロジェクトが一覧表示されますので、今回作ったブログアプリを実行してみましょう。

f:id:moongift:20150817165842p:plain

このように記事のタイトルがリンク表示になっていればOKです。次にこのリンクをクリックしてみましょう。

f:id:moongift:20150817165853p:plain

このようにモーダルのウィンドウが下からスライドして表示されます。右下に閉じるボタンがありますので、それをクリックすると閉じる仕組みです。

実際の操作は以下のようになります。

f:id:moongift:20150817165903g:plain

WebView表示について

もう少し細かくWebView表示について紹介します。今回は?launch_webview=yesを指定しましたが、他にも ?launch_webview=yes_without_toolbar も指定できます。こちらを指定した場合、先ほど画面下部に出ていた閉じるボタンが表示されなくなります。

その場合、元々のリスト画面に戻れなくなりますので、遷移先の画面にて以下の2つの方法を指定する必要があります。

<!-- HTMLの場合 -->
<a href="?close_webview=yes">閉じる</a>

// JavaScriptの場合
location.href = "?close_webview=yes";

この記述ができるのは自分たちで管理しているWebサイトに限られると思います。そのため任意のWebサイトへアクセスする場合はツールバーを忘れずに表示するようにしてください。

この他、iOSの場合は画面表示の際のアニメーションをtransition_styleというパラメータで指定できます。例えば次のようになります。

<a href="page2.html?launch_webview=yes&transition_style=flip">回転して開く</a>

アニメーションは以下の4パターンがあります。

パラメータ 説明
cover 下から上にスライドします。デフォルトです。
flip 回転して表示します。
curl ページをめくり上げるように表示します。
cross フェードインフェードアウトで表示します。

WebView表示を使うことで手軽にアニメーションする画面を実現できるでしょう。

次回はよりアプリらしくするためにツールバーを使ってみたいと思います。