質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Cordova

Cordovaは様々なデバイスで使うことができるオープンソースなモバイル用開発プラットフォームです。開発者に各デバイスの元のプラットフォームで開発する必要をなくし、HTML・JavaScript・CSSなどの一般的なウェブのテクノロジーを使ってすべてのデバイスで展開することができるモバイルのアプリケーションを生成することを可能にします。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

278閲覧

ハイブリッドアプリ タブ切り替え時の動作

hossi-kun

総合スコア7

Cordova

Cordovaは様々なデバイスで使うことができるオープンソースなモバイル用開発プラットフォームです。開発者に各デバイスの元のプラットフォームで開発する必要をなくし、HTML・JavaScript・CSSなどの一般的なウェブのテクノロジーを使ってすべてのデバイスで展開することができるモバイルのアプリケーションを生成することを可能にします。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/08/20 23:31

編集2017/08/20 23:36

###前提・実現したいこと
学習のためCordovaでスマホのハイブリッドアプリを作っています。
フレームワークはAngularJSを用いています。
デザインはAngularJS Material。
Xwalkプラグイン使用。

###発生している問題・エラーメッセージ

現在レイアウトでタブを採用していて、
タブ切り替え時に画像を含むリストを順に表示しています。
リストの項目が増えると、描画の処理?に時間がかかっているのか、タブ切り替え時に多少かくつきがあります。
起動時、追加時にファイルを読み込んでいるためそこで時間がかかるのは分かるのですが…
質問としては、
・タブ切り替え時にも再びng-repeatしているから遅くなっているのか
・Lineのようにタブ切り替えを軽快に動作させるのはどうやってやっているのか

最悪ページネーションを使い表示件数を固定にしようと思っています。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

「かくつく理由」について推測が必要です。
私の個人的な推測として、タブ切り替え時にかくつくということは、タブ切り替え→ファイル読み込み→ファイル表示、と順に処理して欲しいところ、タブ切り替えとファイル読み込みが同時に行われたりしているためにかくつくのではないかと推測します。
LINEなども、とりあえずタブが切り替わってから、新規ページの読み込みを開始しているはずです。
自作アプリでも、「まずタブを切り替える」→「切り替わり終わったら画像を読み込み始める」というような動きになるように制御するコードを入れてみてはいかがでしょうか。

投稿2017/08/20 23:45

akabee

総合スコア1947

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hossi-kun

2017/08/21 11:11

「タブ切り替えとファイル読み込みが同時に行われたりしているためにかくつくのではないか」 私もそう思って、ファイルを読み込むのは起動時にしてみて、取得したリストのデータをng-repeatで使う変数に入れてやってみました。 しかしあまり変化なかったです。
akabee

2017/08/21 11:49

hossi-kunさんの仰るファイル読み込みということが何を指しているかが分からないのですが(起動時にサーバからファイルを読み込んでバイナリ化して変数に格納したりされているのですか?)、タブ切り替え時にそれを表示するために処理する時間は意図的に制御しない限り必ずかかります。(そういう意味では「タブ切り替え時にも再びng-repeatしているから遅くなっているのか」というご質問についてはYesということになると思います) つまり「タブ切り替え→ファイル読み込み→ファイル表示」という処理のうち、「ファイル読み込み」を事前に済ませていたとしても、「ファイル表示」も遅いためにかくついているということになると思います。 ng-repeatが無ければタブ切り替えは速いのではないでしょうか? 上記の通りであればタブ切り替えした瞬間に「ファイル表示」の処理が始まってしまっているために遅くなっているはずですので、そのタイミングをずらせば良いと思います。 「タブ切り替え→ファイル表示」ではなく「タブ切り替え→タブ切り替え完了→ファイル表示」となるようにコードを書けば良いかと思います。 ここでポイントになるのはタブ切り替えをどう実現しているかで、「タブ切り替え完了」ということがイベントなどで取得できれば良いですが、取得できなければタブ切り替えに平均的にかかる時間(例えば1秒など)を固定でディレイさせたりするだけでも効果が得られる可能性はあります。 具体的には、現象の起こるコードがあれば私でもコーディングしてみますが。。
hossi-kun

2017/08/21 13:42

コメントありがとうございます。 今回はサーバーは使っておらず、cordovaのデータベースを使っています。 保存したテキストや、保存した画像のURLを取得してます。 リストを動的に変化させたいので、ng-repeatはあまり消したくないです。 AngularJS Materialのタブを使用してますが、多分切り替え完了イベントないですね(日本語記述少ない・・・ とりあえず、akabeeさんの仰るとおりに切り替え時に固定でディレイをさせると、一応かくつかずにいけるのでこれでいきたいと思います。 ありがとうございました。
akabee

2017/08/21 23:36

まずは一応解決に向かいそうで良かったです。 >保存したテキストや、保存した画像のURLを取得してます。 そういうことであれば、表示時に同時にURLから実体を読み込む処理も行われていると思いますのでng-repeat実行時の負荷は高そうですね。 ng-repeat内での画像の読み込み&表示処理を非同期にするなど、更なる工夫は考えられると思います。
hossi-kun

2017/08/22 09:34

>ng-repeat内での画像の読み込み&表示処理を非同期にするなど ng-repeatの処理を非同期にすることができるんですか?
akabee

2017/08/22 10:03

やったことは無いですが、ng-repeatを非同期にするのではなく、画像の表示処理を関数化して、それを非同期にするなどの対応はできないものかなと思います。 ng-repeatが実行され、枠だけがまず表示されて、画像の読み込みは非同期で実行されるようなイメージなのですが。(伝わりますでしょうか・・) 例えば、ng-repeatで枠だけを表示させて、枠の中にボタンがあって、そのボタンが押されると枠内に画像を表示する、というような処理に変更すれば、初期の画面表示は速いのではないでしょうか?つまり初期表示時には画像を読み込んでいないからですが。 そういった状態まで持っていければ、次に、枠だけが表示された状態で、ボタンを押さなくても自動的に画像を読み込んでいくような処理に作り変えれば、初期表示は速く、画像が読み込まれた段階で非同期に枠内に画像が表示されると思います。 あくまで、私はそういった処理を実装したことはありませんので、できないものかなと予想で記載しています。ご了承下さい。
hossi-kun

2017/08/22 11:22

ありがとうございます。 なるほどです。それなら速そうですね。 後で試してみたいと思います。 今回はとりあえず切り替え時固定ディレイでいきたいと思います。ローディングもつけてそれっぽくはなりました。 あとついでに質問なのですが、ハイブリッドアプリで長押しを検知する時には、自前で$timeout等を使用するしかないのですか?
akabee

2017/08/22 12:38

そうですね、固定ディレイでも十分それっぽいとは思います。実際にロードしているかどうかなんて利用者には分かりませんしね。 長押しは、そのとおり自作するしかないですね。 ただAngularJSでディレクティブを作って公開されている方がいます。私はこれを流用しました。 https://gist.github.com/BobNisco/9885852 英語なんで読むのはちょっと時間がかかりますが、コメントにイベントを受け取れるような改善版も載っていたりします。 ディレクティブ自体が難しい機能なので、利用されるかどうかは自己判断下さい。
hossi-kun

2017/08/22 13:12

早速使ってみましたが、これとても便利ですね。 akabeeさん今回はありがとうございました。 とても為になりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問