CordovaでAndroidアプリケーションを作るシリーズでこれまでは主に、環境構築やプラグインといったアプリの縁の下部分を紹介してきました。この時点でもjQuery Mobile等を利用すればそれなりのアプリが構築可能です。HTMLとCSSそしてJavaScriptでゴリゴリ書いてコンパイルすれば、Androidアプリが作れます。しかし、いわゆるスマートフォンのアプリらしい様々なアプリの表部分は、どうしてもjQueryだけでは力不足。ましてやネイティブUIは難しいです。

そこで利用するのがネイティブ風UIフレームワークなのですが、主にCordovaではionic2Onsen UIの2つを用いて作られてるみたいです。しかし今回自分は、UI Framework CatalogというUIテスト用アプリでどんなUIが作れるのか?を見て、これら二大巨頭ではなく、Framework7で行ってみようと思いました。ウェブでもUI Framework Catalogが見られるように用意されていますので、これからAndroidネイティブ風のアプリを作りたい人は、一見の価値アリです。

  • showcaseに実際にFramework7を使ったアプリが紹介されています。実際にインストールして使ってみると良いでしょう。
  • 現在も活発に開発が続けられていますが、気になる細かいバグも多いです。

目次

Framework7とは?

概要

ウェブ、iOS、Android向けのネイティブUIフレームワークです。用意されてるコンポーネントの数が非常に多く、今でも積極的に開発が続けられています。用意されているドキュメントやデモ、サンプルコードなども充実しており、また非常にネイティブのUIそっくりのコンポーネントが用意されているので、Cordovaなどで用いるとGoodなフレームワークです。

但し、日本ではメジャーなフレームワークではなく、またドキュメントも殆どが英語なので、どうしても日本語でという人はOnsen UIを、AngularJSが使える人はionic2を使うというのがパターンになってる様子。しかし、実際にデモを触ってみると、個人的にはこれが一番しっくり来たので、今回自分が作るアプリケーションのGUIフレームワークとしてこれを採用してみようと思い、このエントリーにまとめてみます。

図:モーダルダイアログの事例

最も基本的な構成

Framework7を使ったアプリの一番最初のテンプレートとも言える構成は以下のような感じ

  • index.html
  • framework7.js
  • my-app.js
  • framework7.material.css
  • framework7.material.color.css

この5つは必須です。iOS向けのcssも同梱されているので、ビルドするアプリに応じてCSSを読み替えると良いでしょう。また、画面遷移したい場合にはindex.html内でセクションを分けるか?別のhtmlファイルが必要となります(サイドバー等もその一つ)。

index.htmlの中身

これらを踏まえた上での最初のHTMLは以下のような感じになります。framework7のjs類はHTMLの最後のほうに記述するようにします。そうでないとエラーが発生します。ここは要注意ですね。

my-app.jsの中身

次に重要なのが、my-app.jsというファイル。Cordovaのindex.jsと同じく、このファイルはFramework7自体の設定や初期化を記述する為のファイルです。

Framework7はjQueryっぽい$$で指定するDOM7と呼ばれるセレクターエンジンで色々操作するようで、その初期化が記述されています。よって、jQueryのような感じで操作する時には以下のような感じで記述する。$$でエレメント指定して後はほぼ同じような書き方となっています。jQuery同様いろいろなメソッドが用意されているので、1つ1つ覚えてゆきましょう。

QUO.jsなどを併用する場合は、QUO.jsのほうが$$をセレクターエンジンとして使ってるので、$7 = DOM7とでもして、Framework7の場合には$7を使うようにすると同居させる事が可能です。

テスト実行

JSFiddleにてテストで実行出来るようにしてみました。今回は極めて基本的な構成のみで作成してるテンプレートみたいなものです。外部JSとCSSを読み込むのに少し時間が掛かるのでresultの表示が遅いですが、実際の実機では非常に高速に表示されます。

アプリの基本設定オプション

my-app.jsに於いて、アプリの挙動の基本設定をnew Framework7()内に記述します。ここに記述するオプションがとても重要で、物凄く豊富に用意されています。ここではよく使いそうなものをピックアップしてみました。iOSのみやAndroidのみの設定もあります(例えば、swipeBackPageはiOSのみの挙動)。

設定項目 内容
fastClicks 既定値:true。いわゆるfastclick.jsと同じ機能。タッチしたら即反応するようになります。
tapHold 既定値:false。trueでタップホールドイベントを有効にします。長押しイベントですね。tapHoldPreventClicksをfalseにしないと発火しません。
pushState 既定値:false。戻るボタンでページ遷移を戻れるようにします。falseだとアプリが閉じてしまいます。
swipePanel 既定値:false。左右スワイプでサイドバーを開けるようにします。
modalButtonOk モーダルダイアログのOKボタンのテキストを設定。他にもCancelボタンに関する設定等があります。
modalCloseByOutside 既定値:false。モーダルダイアログ外をクリックしてダイアログを閉じるようにします。
hideNavbarOnPageScroll 既定値:false。一番上のナビバーがスクロールすると消えるようになり、戻ると現れるようになります。Toolbarにも同じ設定があります。
imagesLazyLoadThreshold 既定値:0。画像を遅延ロードさせます。50で設定すれば、画像まで50pxの付近で画像をロードするようになります。
Template7 既定値:false。Template7を使う場合にはtrueにします。またその場合、template7.jsも読み込ませておく必要があります。

赤字のものは入れておいて良いんじゃないかなぁと思う項目です。

インラインページ遷移

概要

Cordovaでアプリを作る時の壁の一つがページ遷移だと思います。index.htmlの中身で紹介したものは普通のウェブページでも見られるような、それぞれ別々のhtmlを用意して、リンクを張り、クリックすると移動するというものです。このケースでは、

というタグでabout.htmlへのリンクを張ってあり、Framework7はこれだけでアニメーション付きでページの移動を実現してくれます。しかし、プログラムを組む場合ページ遷移を行うと変数の参照であったり、テキストボックスの値の参照でグローバル変数を駆使したりなど、苦労も発生します。そこで使うのがインラインページ遷移で、1枚のindex.html内に各ページのビューを用意し、表示・非表示で切り替えるというものです。シングルページアプリケーションならではのテクニックですね。

インラインページ遷移を使う為には以下のようにmy-app.jsに於いて、domCacheをtrueにしなければなりません。

また、インラインページ遷移でのリンクタグにおける飛び先の指定は、用意したセクションへのアンカーのようなリンクになります。またその場合のセクションも以下のような記述に変更しなければなりません。

セクションはclassをpage cachedに変更し、data-pageという項目にセクション名を入れます。このセクション名をアンカーとしてhrefには#aboutと入れると、aboutというセクションが開くという仕組みです。また、各セクション用にナビバーやツールバーを別々に定義も可能です。またリンクではなく、JavaScriptのメソッドを利用してページの移動をする事も可能です。

これでaboutページへ移動する事が可能。前のページに戻る時には、

で戻る事が可能です。ユーザに入力をさせた結果や処理終了に応じて自動でページを戻る場合に必須ですね。また、戻る時の遷移アニメーションに於いて、左や右に移動するものがありますが、これらはリンクタグの中で以下のように設定する事で指定が可能です。但しこれはrouter.backやrouter.loadで使用し、そのためのタグ設定も事前に必要です。

data-view=に.left-viewが指定されていますが、これで左に動くイメージでページが表示されます。.right-viewならば右に動くイメージになります。

バグ回避

Inlineページ遷移では、あるシーンに於いてページが真っ白になるバグがあります。例えば以下のようなシーンです。ここでは、aboutページに飛ぶことを想定しています。また、トップページはindexです。

  1. 遷移先のページが割りと縦長でコンテンツ量が多い
  2. 遷移時に遷移先ページの内容を一部、innerHTMLで書き換えてる。また、それを実行するコマンドをonclickで割り当ててる。
  3. pushStateをtrueにしてある
  4. キャンセルボタンには、mainView.router.back()をイベントとして割り当ててる

この時、Androidの戻るボタンを押し、再度対象のリンクをクリックして、移動。これを2回行うと、ボタンを除いてコンテンツが真っ白になる事があります。これを回避するためには以下の処置を行います。

  1. 2.のコマンドに本来は不要なmainView.router.load({pageName: ‘about’});を追加しておきます。
  2. 該当のinlineページコンテンツのaリンクにも#aboutをhrefのパラメータに入れておきます。
  3. キャンセルボタンにはmailView.router.load({pageName: ‘index’});に置き換えます。

これで、キャンセルボタンを押しても、戻るボタンを押して、その後リンクをクリックして遷移しても、真っ白になる現象を回避することが可能です。

プラグイン

Framework7にはプラグイン機能があり、Framework7で用意されていない機能を拡張する事が可能になっています。テンキー表示やウェルカムページなど色々なプラグインが作られています。これらはjsファイルなので、導入するには他のjsファイル同様に<script>タグでURLを指定して導入します。初期化やパラメータ等は各プラグインのページに記述の仕方が書いてありますし、ソースコードも公開されているので、確認しながら導入すると良いでしょう。keypadプラグインを事例にすると以下の記述でロードできます。

記述はframework7のjsを読み込む箇所の下に記載しましょう。

初期化はmy-app.jsに記述しましょう。

他、CSSの記述などが必要ですが、demoのコードにサンプルがあるので、これを参考に実装しましょう。

図:これで素敵な電卓が作れます

UIコンポーネント

Framework7は非常に多くのUIコンポーネントが用意されているので、これだけあればiOSやAndroid向けの様々なUIを実現出来ます。あまりにも多くのコンポーネントがあるので紹介しきれないので、ここではよく使うコンポーネントとその使い方を記述します。また、UIコンポーネントの全サンプルは、配布されてるjsのZIPファイルの中にkitchen-sink-materialというフォルダ内に入っています。(公式サイトのdocsは、どちらかというとiOSテーマに主軸を於いて説明されてるので注意)。

基本パーツ

ボタンやテキストボックスといった極めて基本的なGUIを構成するパーツ類です。GUIの操作の基本を担うパーツです。基本スタイルはclass指定の仕方でパーツ表現が変化し、外側の<p>タグに設定するclassでセット化するといった感じです。

ボタン

ボタンは<button>ではなく<a>タグを使う点に注意。class指定をするだけで素敵なボタンが実現できます。ノーマルなボタンだと縁取りが無いので、risedbuttonを使うようにしています。

チェックボックスとラジオボタン

ノーマルなチェックボックス・ラジオボタンの他にスマートセレクトというタイプの選択方法が用意されています。後者は特に設定関係等で利用できそうです。取得した値は変数かLocalStrorageにでも格納しておくと良いでしょう。いずれもinputタグを使うのですが、選択項目はclass指定された<div>で作成するので、少々とっつきにくいなと感じました。しかし、とてもクールなデザインになります。

その他のパーツ

その他のフォームパーツ類を入れてみました。特別なものはあまりなく、HTML5で規定されてる様々なパーツ類を入れる事が可能です。また、他のframework7パーツを組み合わせればより充実したフォームになるでしょう。もちろん、各フォーム内でチェックボックスなども利用が可能ですが、ここはスマートセレクトを組み合わせたい所ですね。検索窓とリストを組み合わせた豪華な入力用のページに遷移させて、値を取得なんてあるとスマートフォンでは入力しやすいでしょう。

※これらのパーツは基本、OSのネイティブ機能が呼び出されるので、iOSやAndroid、PCとで違った表示になります。

レイアウト・デザイン

リスト

スマートフォンの場合、PC用のUIコンポーネントと違って例えばレコードを表現する場合に、グリッドなどは使いにくいです。その為通常はリストビューを使ってずら~っとレコードを並べ、各レコードの詳細を別のページで表現するといったテクニックが使われています。冗長ではあるもののタッチパネルで操作する上ではこちらのほうがストレスなく操作できます。

他にもフォームなどで使うデータの入力用窓口としてもリストを使ったりしますが、検索窓オートコンプリートと組み合わせて使う事で表現力がアップします。地味な部品ではあるのですが、物凄くデータ表現をする上で重要なパーツです。CardsSmart Selectアコーディオンなどもこのリストを使ったもので、他に併用するコンポーネントとして、インフィニットスクロールプルトゥリフレッシュがあります。如何に組み合わせるか?で悩むパーツですね。

  • ※キノコアイコンはCSSファイルに加えています。
  • ※Visualization APIで作った円グラフを入れてみました。

カード

FacebookやGoogle Playなどで見かける四角形のタイルを作る為のコンポーネントがこのカード。ヘッダー、コンテンツ、フッターの3種類で構成されており、他のコンポーネントと組み合わせて使うと素晴らしいものになります。画像などはスライダーを併用したり、リンク部分はアクションボタンを装備したりなどなど。今回、スライダーと一部の共有ボタンにアクションボタンを設置しました。

複雑なデザインは、追加のCSSで実現し、他のコンポーネントとの連携はclass指定などで行う仕組みになっています。ヘッダーやフッターを外して、さらにグリッドなどを使ってならべると、クールなタイルインターフェースになります。カード自体をスライダーのコンテンツとして使えば、Google Play風のデザインが実現出来ます。

カード内でのレイアウトはそのままではitem-textのクラスは高さ固定だったりするので、長文をいれると文字が収まらないことがありますので、以下のようなCSSを追加しておくといいかもしれません。line clampの問題については、こちらのスレッドを参考にしてみてください。

ナビゲーション

ナビゲーションバー

ナビゲーションバーとは、アプリの上部にある部品で通常は固定化されており、iOSならば前のページに戻るボタンがついていたり、またサイドメニュー等を出す為のハンバーガーメニュー(って呼ぶらしいです)のアイコンなどが配置されてるものです。この他、ページのケースによっては検索窓が表示されたり、個別のタイトルを表示したりとアプリの基幹をなすパーツです。

通常は固定化して使いますが、スクロールと共に移動させる事や、遷移先のページ毎に異なったナビゲーションバーにしたりすることも可能です。以下注意点です。

  1. navbarは通常、view-mainのすぐ下に配置します。さらにサブナビバーも設置できます。
  2. navbarを固定化する場合は、ページのコンテナの最初の部分であるclass=”pages”の部分にnavbar-fixedを追加します。
  3. myApp.hideNavbar(navbar, isAnimated)といったメソッドからも操作が可能です。
  4. Androidの場合、インライン遷移ではナビゲーションバーをページ毎に切り替えが出来ません。iOSの場合は可能です。Androidで行う場合は各個別のhtmlファイルを用意して、ナビゲーションバーを設定する事で実現します。
  5. ナビゲーションバーのアイコン類は<a>にclass指定で表示が出来ます。アイコン一覧はこちらになります。設定関係のページはこちらになります。
  6. class指定時にlink icon-onlyとすると文字を表示しないようにする事ができます。

但しこのナビゲーションバーなのですが、Androidテーマの場合CSSにバグがあるのか、3つ指定した時のleft, center, rightの3つのセクションのうち、CenterはなぜかCSSが働きません。なので、Centerになってるのに、タイトル文字が右に寄ってしまいます。ということで、今回は以下のCSSを追加し、該当の箇所は独自に実装します。

該当のセンタリングする場所のHTMLは<div class=”center”>ではなく、以下のようなコードに置き換えました。

widthを150px(実機では100pxほど)にしてるので、文字が長い場合には広げてあげると良いでしょう。このエントリー上部にあるテスト実行の結果はこれを反映したものになっています。尚、iOSテーマでは普通にCenterが効きますので、このような処理は必要ありません。

サイドパネル

最近のアプリケーションでは当たり前のように搭載されてる両サイドに隠れてるサイドバーことサイドパネルです。主にセッティング関係であったり、サブメニュー項目などを格納しておき、ナビゲーションをする為に使われてるものです。パネルのHTMLはインラインでも単体のHTMLでも使えるようで、通常の画面遷移と基本動作は同じです。また、パネルオープン時やクローズ時のメソッドも用意されています。

  • 今回はclose-panelに対してmyApp.closePanel()メソッドをmy-app.jsでイベントリスナーを追加しています。
  • panel-revealでメインページがずれる形で表示され、panel-coverでメインパネルの上に重なって表示されます。
  • スワイプアクションを付け加えることも可能です。その場合、framework7の初期化時にswipePanel: ‘left’をオプションに追加が必要です。

タブバー

サイドパネル同様、最近のアプリの基本ナビゲーションパーツになってるのがタブバー。いわゆるタブを実現するものですが、Framework7のタブバーは大きく分けて三種類のタブバーを実現出来ます。タブバーではインライン遷移でのページキャッシュではなく、class指定したtab表示用の<div>内にコンテンツを記述します。

※スマートフォンだとタッチしてスライドさせればスクロールするタブバーですが、PCからだと掴めないので、キーボードの方向キーで操作します。

  1. 通常の上部に固定化されたタブでページ切り替えの基本
  2. 下部に固定化されたタブで同じくページ切り替えが基本ですが、バッジやアイコン類などを用いた豪華なタブ
  3. SmartNewsなどで採用されてるようなスクローラブルなタブバー。通常は上部に設置する(Androidのみの機能)

スライダー

スマートフォンの場合、タブでページナビゲーションするよりは、スライダーでページナビゲーションをしたほうが利便性は高いです上部のタブですと指が届きにくいという欠点があるのと、スライダーの場合、スライド部分を左右に移動させるだけでコンテンツの表示を切り替えられるので非常に便利です。また、スライダーはポップアップ等の中でも利用する事が出来るので、組み合わせて使いたいパーツです。

この部品は初期化が必要なので、jsに以下のコードとオプションを設定する必要があります。この部品はSwiperというものを利用したものなので、ドキュメントやオプション類はそちらのページを参考にしたほうが良いです。

但し、公式ドキュメントに記載がないのですが、ポップアップ内で利用する場合には、以下のコードを追加してあげる必要があります。popup-insertというclassが設定されたポップアップパネルを表示した時に発動するコードをjsに追加してあります。

ダイアログ

モーダルダイアログ

アプリの基本機能の一つである通知機能としてポップアップダイアログはよく用いられます。使わないアプリは殆どないでしょう。通常のalert()でも良いのですが、framework7にも各種ポップアップが装備されています。また選択内容や入力内容を受け取って処理を渡すメソッドも用意されています。基本はalert()と同じですので、javascriptでイベントリスナーで追加してあげるだけです。

※また、他のUIコンポーネントを組み合わせたカスタムポップアップを作成する事も可能です。他にもポップオーバーなんて機能もあります。iOS向けではアクションシートというものもあります。

ポップアップ

概要

ダイアログではちょっと物足りない、様々な機能や説明文などを付けたものを表示したいという場合に使用するのがポップアップ。例えばワークフローの申請が上がってきた時に、対象のレコードをクリックすると、申請内容と承認・却下ボタンを表示するみたいな凝った内容を表示する時等に使います。レコードIDなどを生成時にタグに格納しておいて、クリック時に引数に取り、内容をダイレクトに書き換えるようにすると、いよいよワークフローシステムのようになります。

戻るボタンで閉じられるようにする

ポップアップパネルは、ブラウザの履歴に残らないのでそのまま、ポップアップを開いて戻るボタンを押してしまうと、ブラウザが閉じられてしまいます。ポップアップだけを閉じたい場合にはこれでは困ります。この時、ポップアップで開く前のページを履歴に登録してしまえば、戻るボタンを押して結果的にポップアップパネルを閉じて、前のページに戻る事が可能になります。

myApp.popup()する前に以下のコードを呼び出すようにしておくと、良いと思います。

これで、はじめのページ(index)にて、例えばレコードをクリックしてポップアップした後、戻るボタンを押しても、ブラウザが閉じられる事なく、indexに戻れるようになるので、ポップアップを閉じる事が可能になります。

バグ回避

ポップアップパネルに於いて、Swiper Sliderを設置して、コンテンツを動的に追加した場合、エラーが出るバグがあります。ポップアップパネルの高さを取得できないのが原因のようです。Swiper Sliderを使う場合には、ポップアップパネルではなく、inlineページ遷移を使うようにしましょう。こちらは問題なく、ページ内でSwiper Sliderを利用する事が可能です。

ログインスクリーン

外部サービスなどにログインする場合に使用するログイン用のスクリーンです。IDとパスワードを入力する為の入力欄が設けられており、パスワード部分は隠されている仕様になっています。多用されるものではないのですが、あると無いとでは、デザイン上のスマートさが異なるので、ログイン系アプリでは必須の機能ですね。ログインIDやパスワードはログイン後に消去したり、また、localstorageに保存して次回以降はそこから呼び出すといった処理、入力内容のvalidationを追加すると、それっぽくなりますね。

特殊機能

フォトブラウザ

個人的に活用したいのがこのフォトブラウザ。写真をスライドで閲覧する機能なのですが、写真だけでなくYoutubeの動画もリスト化してブラウズ出来る。社内向けの研修教材動画類をこれで閲覧出来るようにしたいなぁと考えています。このフォトブラウザは色々とオプション項目が豊富なので、組み合わせて目的のビューを実現します。my-app.jsにオプション項目等を記述します。

  • 単純なiframeでyoutube埋込とは違い、閉じれば再生もストップしてくれるので非常に便利。
  • iframeが使えるので、例えばGoogleスライドも埋め込めて普通に再生できちゃったりします。これは便利。
  • 画像にキャプションが付けられます。
  • コンテンツリストは普通の配列やJSON形式での連想配列で指定します。動的に入れ替える場合は、きちんと組み立てましょう。
  • 下のツールバーや邪魔な場合はキャプションなどは消しておくと良いでしょう。

タイムライン

Framework7の特殊コンポーネントとして面白いなと思ったのがこのタイムライン機能。jQueryプラグインでも様々なタイムラインを実現するものがリリースされていますが、Framework7のソレはいくつかのパターンのタイムライン機能を装備しています。Googleカレンダー連携や送信ログなどをタイムライン化してアプリの機能として実装すると、面白いんじゃないかなと思います。主なパターンは以下の通り。

  1. 上から下へと時間軸を取ったタイムライン
  2. 水平方向へ時間軸を取ったタイムライン
  3. カレンダータイプのタイムライン(水平方向)

今回サンプルでは、2.の水平方向に時間軸を取ったタイムラインを作ってみましたCSSで若干カラーリングをカスタマイズしています。

  • カラーリングはCSSで変えられます。class指定を動的に変更すると面白い
  • 画像はCardsコンポーネントを使うと貼り付けが可能です。
  • タイムラインといっても日付に意味はないので、例えば看板ボードのような使い方も出来る。
  • 各タスクに該当するコンポーネントにリンクを張り、ポップアップで詳細や内容の変更が出来ると面白い。
  • JSFiddleではリンクは開けないのですが、実機ではターゲット指定で_systemなどを指定すれば、外部ブラウザやinappbrowserで開けると思います。

3D Cube

公式ページのドキュメントに記載がないのですが、ダウンロードしたファイルの中のサンプルファイルの中には存在する機能で、画像類を3Dキューブでスライド表示する機能です。ポップアップ等の中で使う事が出来ないのですが、ノーマルなpage内であれば利用可能です。但し、これまでと違い別途kitchen-sink.cssというファイルをロードしておかなければなりません。

他にも3D flipというものもあり、スライダーコンポーネントの一つになっています。画像が多いとロード完了までキューブが有効にならないので、注意が必要です。キューブはクリックで掴んで左右に振れば動きます。

HTML Serviceで使う場合の注意点

概要

Google Apps ScriptのHTML ServiceでFramework7を入れてスマートフォン対応させた場合に注意点があります。

  1. そのままいつも通りのHTML Serviceで生成して表示すると異常に小さなPC向け表示になる。
  2. HTML ServiceではHTML側にViewportの設定を入れても反映されません。
  3. ログインして認証した上で使っていない場合、上部になにやら灰色の帯と文字列が表示されます(仕様です)。
  4. iOSの場合、Google Apps Scriptのバグによりスクロールが出来ません。同じコードで素のHTMLやアプリの場合には問題なくスクロールします。HTML ServiceのSandbox Mode内のiFrameに問題があるようです。こちらでも報告されています。現在回避策がないので、HTML Serviceで出力したスマフォページでは、iOSは使えないという結論なので、アプリにして使いましょう。

3.については、そユーザの権限で認証をさせてから使うようにすれば表示されなくなります。ウェブアプリケーションとして導入した際に、「次のユーザとしてアプリケーションを実行」にて「ウェブアプリケーションにアクセスしているユーザ」や「自分」にしてから、公開しましょう。

1.と2.についてですが、以下のようにHTML Serviceで出力する時にaddMetaTagを付けて上げると、viewportの設定が有効になります。理由はHTML Serviceのウェブアプリケーションはiframe内のサンドボックスで動作してる為、その外側にviewportの設定をしてあげる必要がある為です。

※また、user-scalable=noでピンチで拡大したりしなくなります。これはデフォルトで入れておきましょう。

図:GASでもFramework7を使ってみた

ハマりどころ

Google Apps ScriptでFramework7を使う場合、いくつかハマりどころがあります。

  1. framework7のjsファイルや初期化する為のmy-app.jsはファイルの一番最後に読み込まれるので、読み込まれる前にHTML側の<script>内で、$$を使った操作や、my-app.jsに記述されてるfunctionは順番上、読み出せずエラーになることがあるので、順番に注意。
  2. どうしても、初期化ファイルの内容はHTML側に記述しても、1.の仕様があるので、外部ファイルのmy-app.jsにする必要があるのですが、my-app.jsの中身を書き換えた場合、FTPでアップロードしても、即時に反映しない事があります。
  3. 即時に反映しない場合、リロードをするとPCの場合は、すぐに反映するようになりますが、Android端末の場合、リロードしてもキャッシュされてるmy-app.jsが置き換わらない事があります。コードは正しいのにPCとAndroidで挙動が異なる場合は、このパターンが多いです。
  4. 3.のトラブルに出会ったら、Android側のChromeのキャッシュを捨てましょう。捨てる手順は、右上の︙をクリック⇒プライバシー⇒閲覧履歴データを消去するをクリックします。閲覧履歴、キャッシュされた画像とファイルにチェックを入れて、データを消去を実行しましょう。そして、改めてページをリロードします。

図:外部ファイルだとこの問題が困る原因のひとつ

ポイント

  • スマートフォンアプリだけでなく、ウェブでも利用出来るので、Google Apps ScriptのHTML Serviceで併用するとスマートフォン対応の社内サービスを作れます。
  • Vue.jsが利用出来るようになってるみたい。独自のフレームワークとしては、Template7というものが利用可能です。チュートリアルを見ると、AnglularJSも利用できるみたいです(React.jsやMeteorで実装してる人もいるようです)。
  • iOS向けおよびAndroid向けでそれぞれCSSが用意されてるので、利用環境に合わせて切り替えると良いです。
  • ここで紹介したコンポーネントはほんの一部です。まだまだ他にも色々なコンポーネントが用意されてるので、都度都度リファレンスを見ながら実装すると良いでしょう。
  • カスタマイズが結構しやすいので、個人的にオススメです。もっと日本で使われるといいのに。
  • 基本画面遷移が出来ないGoogle Apps Script等でもHTML Service上で活用の幅が広がりそうですね。
  • framework7は古いAndroid(例えば4.x)のWebViewでは正しく動作しない事があります。その場合は、Crosswalkプラグインを導入すれば対応可能です。
  • framework7内では<a>はページ制御に使われてる特別な存在なので、そのまま外部リンクを入れてもAccess-Control-Allow-Originのエラーが出て、開かれません。外部リンクを設定する場合には、target属性は_blankとし、<a>タグにclass=’external’を必ず指定してください。

関連リンク

Pocket
このエントリーをはてなブックマークに追加
Bookmark this on Yahoo Bookmark
Pocket