使用したもの(環境)
- cordova
- visualStudioCode
- windows10
- Android
チュートリアルを訳しながらやってみる
チュートリアルのページは下記。
Module 7: Setting Up a Single-Page Application
前回のチュートリアル。
環境構築については別途まとめてあるので下記参照。
cordova&VSCodeで環境を構築するまでの右往左往メモ。
Module 7: Setting Up a Single-Page Application
単一ページアプリケーションを設定する
A "Single-Page Application" is a web application that lives within a single HTML page.
「単一ページアプリケーション」は一つのHTMLページから成るウェブアプリケーションです。
The "views" of the application are injected into and removed from the DOM as needed as the user navigates through the app.
ユーザーがアプリケーション内を通過するときに、アプリケーションの「ビュー」はDOMから必要に応じて挿入されたり取り除かれたりします。
A single-page application architecture is particularly well suited for mobile apps:
「単一ページアプリケーション」のアーキテクチャは、特にモバイルアプリに適しています。
具体的な単一ページアプリケーションの解説については、下記ページを参照ください。
SPA(Single Page Application)の基本
The absence of page refreshes provides a more fluid and closer to native experience.
ページのリフレッシュがないと、より流動的で、ネイティブの体験に近くなります。
The UI is entirely created at the client-side with no dependency on a server to create the UI, making it an ideal architecture for applications that work offline.
UIを作成するサーバーに依存せず、完全にクライアントサイドでUIが作成されることで、最適なアーキテクチャになりオフラインで動作します。
→ちょっと訳の日本語がうまくないですが、要するにサーバーに依存しないことで独立性が高まり、オフラインでも動作可能ってことです。
In this module, we set up the basic infrastructure to turn Employee Directory into a single-page application.
このモジュールでは、Employee Directoryをシングルページアプリケーションに変える基本的なインフラストラクチャを設定します。
1. index.html：bodyタグ内のHTMLマークアップを削除します。(ただし、スクリプトタグを除きます。)
2. app.jsのimmediate関数の中で、renderHomeView（）という関数をfindByName関数の直後に定義します。
プログラムでホームビューのマークアップをbody要素に追加する関数を実装します。
下記のコードを見ればわかりますが、要するに1.で削除した部分を加えるコードをそのまま書くってことです。
function renderHomeView() {
var html =
"<h1>Directory</h1>" +
"<input class='search-key' type='search' placeholder='Enter name'/>" +
"<ul class='employee-list'></ul>";
$('body').html(html);
$('.search-key').on('keyup', findByName);
}
3. データサービスの初期化ロジックを変更します。
サービスが正常に初期化されたら、renderHomeView（）関数を呼び出してプログラムでホームビューを表示します。
app.js の Local Variablesブロックに下記変更を加える。
var service = new EmployeeService();
service.initialize().done(function () {
renderHomeView();
});
4. renderHomeView（）関数内でkeyupイベントの登録を移動したので、Event Registrationセクションで元のkeyupイベント登録を削除してください。
5. ヘルプボタンが表示されなくなったので、Event Registrationセクションのヘルプボタンのクリックイベントハンドラを削除します。
6. アプリケーションをテストします。
実際の画面表示はこんな感じです。
参考URL
Module 7: Setting Up a Single-Page Application