Navigation

    Monaca & Onsen UI
    • Register
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. imanishik
    I
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups
    Save
    Saving

    imanishik

    @imanishik

    0
    Reputation
    7
    Posts
    1487
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    imanishik Follow

    Posts made by imanishik

    • RE: OnsenUIをIE11で動かしたい

      引き続き確認したところ、IE11にて以下の問題が発生しました。

      ons-rangeを表示し操作したところ、スライダーボタンの移動がレンジの線に正常に反映されませんでした。
      確認時のソースはリファレンスの物をそのまま使用しています。
      原因を調べたところ、OnsenUI側で操作による画面更新(RangeElementの_update)が呼び出されていませんでした。
      具体的には以下のイベント登録によるユーザー側の操作イベント(input)が発生しないようです。

      var RangeElement = function (_BaseInputElement) {
          key: 'connectedCallback',
          value: function connectedCallback() {
            this.addEventListener('input', this._boundOnInput);// not working on IE11
      

      この問題はIE11でのみ発生し、他のモダンブラウザ(ChromeやEdge)では発生しません。
      対策として動作環境がIE11の場合は、changeイベントをリスナー登録する必要があるようです。

      var RangeElement = function (_BaseInputElement) {
          key: 'connectedCallback',
          value: function connectedCallback() {
            this.addEventListener('input', this._boundOnInput);
      
            // for IE11
            if (ons.platform.isIE()){
              this.addEventListener('change', this._boundOnInput);
            }
      

      これにより、レンジのスライダー操作のイベントを取得する事が出来、現在のスライダーの位置に正常にレンジの線が表示されました。

      posted in Onsen UI
      I
      imanishik
    • RE: OnsenUIをIE11で動かしたい

      引き続きIE11にて確認したところ、ons-carouselやons-tabでの横スライドの遷移にて画面が正常に表示されない問題が発生しました。
      スライドの1ページ目は表示されるのですが、スライドさせても2ページ目以降の項目が表示されません。
      ons-carousel内に生成されるdivに、縦スライドのスタイル「ons-swiper-target–vertical」が追加されている事が原因となります。
      横スライド設定にも関わらず、縦スライド向けスタイルシートが適用されているのは以下の箇所(onsenui.js(2.8.3)の15221行目)が原因となります。

          key: '_updateLayout',
          value: function _updateLayout() {
            this.target.classList.toggle('ons-swiper-target--vertical', this.isVertical()); 
      

      IE11ではelement.classList.toggleの第二引数に対応していない事が原因のようです。
      https://caniuse.com/#feat=classlist
      そのため、上記処理のclassList.toggleにて第二引数が無視されons-swiper-target–verticalクラスが追加されているようです。

      OnsenUI側のonsen.jsに以下のように手を加える事で対策する事が出来ました。

          key: '_updateLayout',
          value: function _updateLayout() {
            //this.target.classList.toggle('ons-swiper-target--vertical', this.isVertical());// Comment out
            if (this.isVertical()) {
              this.target.classList.add("ons-swiper-target--vertical");
            } else {
              this.target.classList.remove("ons-swiper-target--vertical");
            }
      

      もし可能であれば上述の「this._backButtonHandlerのnullチェック」と合わせて「classList.toggleのadd/remove化」を次回のOnsenUIリリースに混ぜていただけると幸いです。

      posted in Onsen UI
      I
      imanishik
    • RE: OnsenUIをIE11で動かしたい

      引き続き確認したところ、前出のPolyfillでは不十分のようです。
      画面遷移(pushPage、popPage)等が正常に動作しませんでした。

      対策として、以下のPolyfillを登録する事で動作する事が確認できました。
      ・OnsenUI 2.3.0で削除されたPolyfill(=2.2.6まで登録されていたPolyfill)
      ・webcomponentsjs
      https://github.com/webcomponents/webcomponentsjs

      しかし上記Polyfillを導入しても、ダイアログ(ons.notification.alert)や、トースト(ons.notification.toast)を閉じる際に以下のエラーが表示され、以降のダイアログ表示などが行えなくなります。

      Unhandled promise rejection TypeError: 未定義または NULL 参照のプロパティ 'destroy' は取得できません
      

      onsen.jsの以下の処理で、this._backButtonHandlerがnullとなっている事が原因のようです。

          key: 'disconnectedCallback',
          value: function disconnectedCallback() {
            this._backButtonHandler.destroy();
      

      そのため、OnsenUI側のonsen.jsに手を加え、this._backButtonHandlerのnullチェックを追加する事でダイアログ系が正常に動作する事が確認できました。

      引き続き調査してみたいと思います。

      posted in Onsen UI
      I
      imanishik
    • RE: OnsenUIをIE11で動かしたい

      @asial-matagawa

      動作確認が取れているPolyfillは無いと言う事で了解しました。
      いろいろ試したところ、Cordova+OnsenUI+IE11環境で、Cordova、OnsenUIの初期化でエラーが発生せずアプリ起動する事が出来たため後継のために記載しておきます。

      具体的には以下の二つのPolyfillを導入しました。
      ・webcomponentsjs
      https://github.com/webcomponents/webcomponentsjs
      ・remove
      https://developer.mozilla.org/ja/docs/Web/API/ChildNode/remove

      簡単な動作確認のソースは以下となります。

      • index.html (www/index.html) (使用するPolyfillを変更)
      <!DOCTYPE html>
      <html lang="ja">
      <head>
      
          <meta charset="utf-8" />
          <meta http-equiv="content-type" content="text/html; charset=utf-8" />
          <meta http-equiv="content-language" content="ja">
      
          <meta name="apple-mobile-web-app-capable" content="yes" />
          <meta name="mobile-web-app-capable" content="yes" />
      
          <!-- Poliyfill -->
          <script src="lib/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
          <script src="scripts/polyfill_remove.js"></script>
      
          <!-- JS dependencies (order matters!) -->
          <script src="scripts/platformOverrides.js"></script>
          <script src="lib/onsen/js/onsenui.js"></script>
      
          <!-- CSS dependencies -->
          <link rel="stylesheet" href="lib/onsen/css/onsenui.css" />
          <link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css" />
      
      </head>
      
      <body>
          <script src="cordova.js"></script>
          <script src="scripts/index.js"></script>
      
          <ons-navigator id="myNavigator"></ons-navigator>
      </body>
      </html>
      
      • index.js (www/scripts/index.js) (Promiseの実験処理を追加)
      
      (function () {
          "use strict";
      
          document.addEventListener("deviceready", function () {
              ons.ready(onOnsenUIReady);
          });
      
          window.onerror = function (msg, url, line, col, error) {
              //alert("Error 1:" + msg);
              return false;
          };
      
          window.addEventListener("error", function (e) {
              //alert("Error 2:" + e.error.message);
          });
      
      })();
      
      function onOnsenUIReady(event) {
      
          document.addEventListener("init", onInit);
      
          var myNavigator = document.getElementById("myNavigator");
          myNavigator.pushPage("html/page1.html");
      }
      
      function onInit(event) {
      
          if (event.target.id === "Page1") {
              console.debug("Page1 Init!");
      
              // Promise Test
              testPromise().then(function (message) {
                  console.debug("testPromise then:" + message);
      
              }).catch(function (err) {
                  console.debug("testPromise catch:" + err);
              });
          }
      }
      
      function testPromise() {
          return new Promise(function (resolve, reject) {
              setTimeout(function () {
                  console.debug("testPromise!");
                  resolve("ABC");
              }, 1000);
          });
      }
      
      • page1.html (www/html/page1.html)
      <ons-page id="Page1">
          This is Page1.
      </ons-page>
      

      引き続き、もう少しES6的な処理で動作するか検証してみたいと思います。

      posted in Onsen UI
      I
      imanishik
    • OnsenUIをIE11で動かしたい

      OnsenUIを使用したCordovaアプリをInternet Explorer 11(以下IE11)で実行した場合、ブラウザは起動するのですが真っ白い画面のままHTML画面が表示されません。
      IE11の開発者ツールからJavaScriptコンソールを確認してもエラーなどは表示されていませんでした。
      IE11で起動する際には以下のコマンドで実行しています。
      cordova run browser
      ※デフォルトブラウザをIE11に変更後にコマンドを実行。

      念のためWindowsアプリとして実行させたところ、以下のエラーが表示されました。

      SCRIPT16386: ハンドルされない例外 下記ソースコードの行 9519、列 5 で発生しました。ms-appx://io.onsen.sampleapp/www/lib/onsen/js/onsenui.js
      0x80004002 - JavaScript 実行時エラー: インターフェイスがサポートされていません
      onsenui.js (9519,5)
      

      Windowsアプリとして実行させる際には以下のコマンドを実行しています
      cordova run windows
      ※config.xmlには「<preference name=“windows-target-version” value=“8.1” />」を指定。

      • プロジェクト環境
        OnsenUI 2.8.2
        cordova-cli 7.0.0
        cordova-browser 5.0.1
        cordova-windows 5.0.0
      • 実行環境
        Windows 10(64bit)
        Internet Explorer 11 11.64.16299.0

      問題再現を行った最小限のソースは以下になります。

      • index.html (www/index.html)
      <!DOCTYPE html>
      <html lang="ja">
      <head>
      
          <meta charset="utf-8" />
          <meta http-equiv="content-type" content="text/html; charset=utf-8" />
          <meta http-equiv="content-language" content="ja">
      
          <meta name="apple-mobile-web-app-capable" content="yes" />
          <meta name="mobile-web-app-capable" content="yes" />
      
          <!-- Poliyfill -->
          <script src="lib/promise-polyfill/promise.js"></script>
          <script src="scripts/polyfill_CustomEvent.js"></script>
          <script src="scripts/polyfill_remove.js"></script>
      
          <!-- Unused Poliyfill? -->
          <!--<script src="scripts/polyfill_classList.js"></script>-->
          <!--<script src="scripts/polyfill_Set_Map_WeakMap.js"></script>-->
          <!--<script src="scripts/polyfill_MutationObserver.js"></script>-->
      
          <script src="scripts/platformOverrides.js"></script>
          <script src="lib/onsen/js/onsenui.js"></script>
      
          <link rel="stylesheet" href="lib/onsen/css/onsenui.css" />
          <link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css" />
      
      </head>
      
      <body>
          <script src="cordova.js"></script>
          <script src="scripts/index.js"></script>
      
          <ons-navigator id="myNavigator"></ons-navigator>
      </body>
      </html>
      
      • index.js (www/scripts/index.js)
      (function () {
          "use strict";
      
          document.addEventListener("deviceready", function () {
              ons.ready(onOnsenUIReady);
          });
      
          window.onerror = function (msg, url, line, col, error) {
              alert("Error 1:" + msg);
              return false;
          };
      
          window.addEventListener("error", function (e) {
              alert("Error 2:" + e.error.message);
          });
      
      })();
      
      function onOnsenUIReady(event) {
      
          document.addEventListener("init", onInit);
      
          var myNavigator = document.getElementById("myNavigator");
          myNavigator.pushPage("html/page1.html");
      }
      
      function onInit(event) {
      
          if (event.target.id === "Page1") {
              console.debug("Page1 Init!");
              alert("Page1 Init!");
          }
      }
      
      • page1.html (www/html/page1.html)
      <ons-page id="Page1">
          This is Page1.
      </ons-page>
      
      • Polyfill
        ・Promise
        https://github.com/taylorhakes/promise-polyfill
        ・CustomEvent
        https://developer.mozilla.org/ja/docs/Web/API/CustomEvent/CustomEvent
        ・remove
        https://developer.mozilla.org/ja/docs/Web/API/ChildNode/remove

      今回のアプリはIE11で動作させる必要があるため、Polyfillを導入する必要があります。
      OnsenUIをIE11で使用するために導入すべきPolyfillが以下に記載されています。
      https://ja.onsen.io/v2/guide/faq.html#furuiburauznosapto
      今回追加したPolyfillは外部から導入した物のため、OnsenUIに適合しているのか不安があります。
      OnsenUIで動作確認の取れているPolyfill実装があったら教えてください。
      また、記載されているPolyfill追加以外に、エラー対応などのために必要な処理があるのでしょうか?

      • English digest
        An error occurred when IE 11 executed it.
        I would like to know Polyfill which was confirmed to work on OnsenUI.
        Also, I would like to know other measures if necessary.
      posted in Onsen UI
      I
      imanishik
    • RE: Microsoft Edgeでons-navigatorのpushPageが動作しない

      @Fran-Diox 2.7.0-build.5335に差し替えて確認したところ、Microsoft Edgeにて動作する事を確認しました。
      素早いレスポンスありがとうございます。

      posted in Onsen UI
      I
      imanishik
    • Microsoft Edgeでons-navigatorのpushPageが動作しない

      OnsenUIを使用したCordovaアプリをMicrosoft Edgeで実行した場合、ons-navigatorのpushPageで画面遷移を行おうとすると、Edge標準の「このページを読み込めません」画面が表示されてしまいます。
      Edgeの開発者ツールからJavaScriptコンソールを確認しようとしても、「このページを読み込めません」画面表示の際にコンソールがクリアされるためエラーなどは確認出来ません。
      なお、他ブラウザ(Chrome)やAndroid端末等で実行させた場合は同様の問題は発生しない事を確認しています。
      Edgeで動作させるには何かアプリ側の対応等が必要でしょうか?

      Edgeで起動する際には以下のコマンドで実行しています。
      cordova run browser --target=edge

      環境は以下になります。

      • プロジェクト環境
        OnsenUI 2.7.0
        cordova-cli 7.0.0
        cordova-browser 5.0.1
      • 実行環境
        Windows 10(64bit)
        Microsoft Edge 40.15063.674.0
        Microsoft EdgeHTML 15.15063

      問題再現を行った最小限のソースは以下になります。

      • index.html (www/index.html)
      <!DOCTYPE html>
      <html lang="ja">
      <head>
          <meta charset="utf-8" />
          <meta http-equiv="content-type" content="text/html; charset=utf-8" />
          <meta http-equiv="content-language" content="ja">
          <meta name="apple-mobile-web-app-capable" content="yes" />
          <meta name="mobile-web-app-capable" content="yes" />
      
          <script src="scripts/platformOverrides.js"></script>
          <script src="lib/onsen/js/onsenui.js"></script>
      
          <link rel="stylesheet" href="lib/onsen/css/onsenui.css" />
          <link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css" />
      </head>
      <body>
          <script src="cordova.js"></script>
          <script src="scripts/index.js"></script>
      
          <ons-navigator id="myNavigator"></ons-navigator>
      </body>
      </html>
      
      • index.js (www/scripts/index.js)
      (function () {
          "use strict";
          document.addEventListener("deviceready", function () {
              ons.ready(onOnsenUIReady);
          });
      })();
      
      function onOnsenUIReady(event) {
          document.addEventListener("init", onInit);
      
          var myNavigator = document.getElementById("myNavigator");
          myNavigator.pushPage("html/page1.html");
      }
      
      function onInit(event) {
          // It does not come here for Microsoft Edge
          if (event.target.id === "Page1") {
              console.debug("Page1 Init!");
              alert("Page1 Init!");
          }
      }
      
      • page1.html (www/html/page1.html)
      <ons-page id="Page1">
          This is Page1.
      </ons-page>
      
      • 補足
        OnsenUIのライブラリ「lib/onsen/js/onsenui.js」の32240行目で処理が止まり、次の処理に進まないように見えます。
        具体的には以下の処理です。
        internal.doc.write(’<template id="’ + page + ‘">’ + html + ‘</template>’);

      • English digest
        OnsenUI’s pushPage(ons-navigator) does not work on Microsoft Edge.
        Chrome and Android devices have no problem.
        Does the application need measures?

      posted in Onsen UI
      I
      imanishik