アンドロイド6.0のChromeのバグ？

Fabric.jsを使っています。
パソコンのChromeや、iPhoneでは、正常に動くのに、アンドロイドのブラウザ（Chrome）でのみ、期待通りに動かずに悩んでいます。
動かないのは、nexus7のandroid6.0。
タブレットのandroid4.4では動きます。

input要素で、画像ファイル、または、カメラの映像を取り込むようにしていますが、カメラの映像のみ表示されません。
データは取り込まれていますから、他のタブを見て、再度、対象のタブに戻してやれば表示されます。
カメラの映像ではなく、画像ファイルの指定では問題なく動作します。

以前の日記

それなら、アプリにしてしまえ！
と、アプリにしましたが、これに苦労しました。
写真の場合、メモリ不足になるのか、WebViewにデータを受け渡す前に、縮小しなければ動きませんでした。
デバッグ時には期待通りに動いたものの、リリース版を作ると、ブラウザと同じように、データはあるのに表示されない状態になりました。

nexus7のChromeでは動かないため、firefoxを試してみると、期待通りに動きました。
Chromeのバグのように思いますが、何か、設定ミスをしているのでしょうか。

ひと文字の大切さを知る

ようやく、今日の仕事が終わりました。
今週は、１文字の有無に気づかずに苦労しました。

"func('" + str + "')" の、「'」。
httpsの、「s」。

この１つの文字を見落としたために、数時間のロス。
ありがちですが、痛かった。

１文字の大切さを知りました。

Androidアプリ 権限に悩む

Androidアプリに挑戦しています。

サイトがあり、それを、そのままアプリにすれば簡単！
と思いましたが、悪戦苦闘しています。

基本的に、WebViewを置いて、サイトを表示すれば良いのですが、デフォルトでは、Javascriptが動きません。
これは、すぐに解決できました。

次に悩んだのが、WebViewでは、カメラの撮影や、ファイルのアップロードができません。
様々な情報を元に、プログラムを組みましたが、今も、できていません。

ひとつ、解決したことは、権限関係です。
カメラでの撮影や、ファイルのアップロードには、権限が必要です。
AndroidManifest.xmlに、権限情報を書き込んだのに、セキュリティエラーが発生し、動きませんでした。

原因は、アプリに権限を与えていなかったこと。
これに気づくのに、相当な時間を費やしました。

考えてみれば、アプリに必要な権限は、アプリに書き込みました。
しかし、それを許可した覚えはありませんでした。


おかげで、Android6.0で、権限関係の仕様が変わったことに気づいたのは良かったです。
経緯としては、仕様が変わったことを知り、許可していないことに気づいたので、順序が逆ですが。

さて、このあたりの最新の情報は、こちら。

Fabric.js アンドロイドで、写真が表示されない

Fabric.jsを使っています。
パソコンのChromeや、iPhoneでは、正常に動くのに、アンドロイドのブラウザ（Chrome）でのみ、期待通りに動かずに悩んでいます。

input要素で、画像ファイル、または、カメラの映像を取り込むようにしていますが、カメラの映像のみ表示されません。
データは取り込まれていますから、他のタブを見て、再度、対象のタブに戻してやれば表示されます。
カメラの映像ではなく、画像ファイルの指定では問題なく動作します。

html

<input type="file" id="cb-file" style="display:none;" accept="image/*">

js

var reader = new FileReader();
reader.addEventListener("load", (function (evt) {
  fabric.Image.fromURL(evt.target.result, function (oImg) {
    canvas.add(oImg);
  });
}).bind(f[i]));


nexus7では、先に述べた状態で、AQUOS PHONEでは、メモリ不足エラーとなります。

Fabric.js アンドロイドで、オブジェクトが表示されない

Fabric.jsを使っています。
パソコンのChromeや、iPhoneでは、正常に動くのに、アンドロイドのブラウザ（Chrome）でのみ、期待通りに動かずに悩みました。

var text = new fabric.IText("foo");
canvas.add(text);

と記述しましたが、テキスト（text）が表示されませんでした。
canvas部分に触れると表示されました。
つまり、データは、存在するにもかかわらず、なんらかの理由で、隠れている状態でした。

canvasの再作画のコマンドがあるのかと調べましたが、canvasにそのようなものはなく、Fabric.jsのrenderAllでも表示されませんでした。

setTimeoutを使うと表示されました。
スレッドの問題か、タイミングの問題か、根本原因は分かりませんが、とりあえず、これで解決しました。

setTimeout((function(){
    var text = new fabric.IText("foo");
    canvas.add(text);
  }).bind(this),10);

AndroidのWebViewでは、html,boyに100%を指定すると0になる

先日から悩んでいましたが、解決しました。

AndroidのWebViewで、要素のclientheightの値が０


firefox、chromeなど、ブラウザで見ると問題がないサイトを、AndroidのWebViewで見ると、レイアウトが崩れてしまいました。

原因は、cssに、このような記述をしていたためのようです。
html{
  width: 100vw;
  height: 100vh;
}

body{
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

WebViewでは、heightの100vhや100%を指定すると、0pxになるようです。
バグではないかと思いますが、私の使い方に問題があるのかも知れません。

この影響で、body内の、divなどに、height:100%と指定すると、高さが０になり、表示されません。

対策として、jsに、次の記述を書きました。

アンドロイドの場合、スタイルの高さをpxで指定する。
var ua = window.navigator.userAgent.toLowerCase();
if (ua.search(/android/) !== -1) {
      var html = document.querySelector("html");
      html.style.height = html.clientHeight + "px";
      var body = document.querySelector("body");
      body.style.height = html.clientHeight + "px";
}

サイト側に改良を加えるという点が、いまひとつのため、もう少し調べます。

アプリのレイアウトにおいて、
WebViewの記述をwrap_contentから、match_parentに変えることで、解決しました。

android:layout_height="match_parent"

jsの記述は不要でした。

結局、バグではなく、私の設定ミスでした。

AndroidのWebViewで、要素のclientheightの値が０

AndroidのWebViewで、要素のclientheightの値が０になり、悩んでいます。

javascriptで、値を取得していますが、firefox、chromeなどでは、有効な値が取得できるのに、AndroidのWebViewだけ、０になります。

この値は、CSS要素のcalcで計算してる値のためと推測して、調査中です。