Show AppとonLoadについて(ご利用は計画的に・・・)


こんにちは。fujiです。

新年になってから時間がたってしまいました・・・

皆様、今年の初夢はなんでしたか?

私の今年の初夢は、何かすごく面白い夢を見て大爆笑していたのは覚えているのですが、その内容を一切覚えていないという・・・
何を見て笑っていたんだ俺は・・・というものでした。

さて、たまには技術的な記事を一つ。

Pepperのタブレットには、「画像」、「動画」、「アプリ」を表示することができますが、
この表示するデータは「html」フォルダに格納する必要があります。これは、以前yanagiが書いた記事にもあるとおりです。

で、「アプリ」については、「html」フォルダの直下にある「index.html」ファイルを表示するしくみになっています。
つまり、「アプリ」ってローカルにあるwebページを表示する仕組みなんですね。
ちょっと「アプリ」を表示する「Show App」の中身を見てみましょうか。

showApp

「self.packageUid()」でこのアプリの「html」までのパスを取得し、表示する仕組みになってますね。
表示するものは「index.html」なので、ファイル名は記載せずとも自動で呼び出されています。
さてさて、「Show App」を使って呼び出すアプリについて、トップページは別に「index.html」でもいいんですが、

『いや、そこはやっぱり別の名前を使いたい!例えば「topPage.html」とか!』

ということもあるかと思います。そういう時は、シンプルにこうやれば指定のページを開くことができます。

code2

仕組みさえわかってしまえば簡単ですよね?
ちなみに、今回ご紹介した通り、「Show App」で表示するものはWebページですので、当然リンクを貼ったり
画面要素の表示 / 非表示を切り替えたり動かしたりできるわけです。
つまり、画面遷移もリンクで行ったり、CSSで切り替えたりすることができます。

で、今回の本題。

このShow Appを使うと、「html」フォルダ内のhtmlファイルを表示することができるのですが、
この時、htmlファイルを使って画面いっぱいに画像を表示させようとすると画像が「カクカクッ」と
出てくる時があります。これ、ちょっとみっともないですね。

nonePreload

やはり一発で表示してほしいものです。
で、一発で表示する方法は、簡単に言うと、htmlファイル読み込み時にプレロードかけてしまえばいいわけです。
やり方は色々あるかと思いますが、フロントエンジニア的に一番わかりやすいのは
タブレットがhtmlファイルを読み込んだら要素を生成、その要素にonloadイベントをつけて
トップ画面用画像を読み込ませ、onloadイベントが発火したらトップ画面を表示させる方法かと思います。
ちょうどこんな感じですね。

preload

で、これを実際にやってみると・・・

title

うん、できました。画像が一発で表示されるようになりました。
さて、この方法を使えばアプリで使用する画像を一括で読み込みできるんじゃないか?
という発想ができます。

ですので、ちょっとやってみましょうか。
イメージとしては、写真をたくさん表示するアプリ・・・という感じで。
使う画像はいったん、自分のiPhoneから写真を取ってきます。
いったん、10枚でいきましょうか。

photo10
(随分かたよった写真だなぁ・・・)

じゃあ早速読み込みます。imgフォルダの中にさらに「photos」フォルダを作り、そこに読み込んだ画像を「1.jpg」〜「10.jpg」と名前をつけて保存します。コード的には、こんな感じになりますね。

preloadCode
まずはテストとして、PCのブラウザで。読み込んだらアラートが出るようにして・・・

firefoxImg

うん。問題なく出ます。10枚の写真をプレロードしています。
じゃあ続いて、Pepperでやってみましょう。

title

!!!!!????アラートが出ない!?

「もしかして・・・」と思った方、たぶんその通り。
画像の容量がブラウザのメモリを超えてしまうと、これ以上ロードができなくなるという状況なのかなと思います。

じゃあ、「どれくらいならいけるのよ!?」という疑問も湧いてきますが、
ちょっとその点はまた今度・・・・

というわけで、プレロードは計画的に、というお話でした。
皆様のアプリ開発のご参考になれば幸いです。

以上、fujiでした!


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です