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

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

ただいまの
回答率

90.51%

  • jQuery

    8155questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Monaca

    1112questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

  • Onsen UI

    354questions

    HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Onsen UI のpushpage遷移先のページでCSSの書き換えができない。

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,489

t0kura-5

score 43

前提・実現したいこと

Onsen UI V2 でピンチイン/ピンチアウトによる画像の拡大/縮小する機能を作成中です。
pushpageで遷移した先で、画像の拡大/縮小を行いたいのですがうまく動作しません。
遷移前のページでは拡大/縮小が動作しています。
動作するのであればAngularJSでも構いません。
解決方法がわかる方がおりましたらアドバイスください。

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

pushpageで遷移した先で、画像の拡大/縮小を行うためにCSSの書き換えを行っているが、反映されません。
<ons-gesture-detector>によるジェスチャーの検知は出来ています。
pushpage前のページであれば、問題なく拡大/縮小が出来ています。

該当のソースコード

var target = $("img.photo-zoom_jq");
var prevScale = 1;
var scale = 1;

$(document).on('transform', 'img.photo-zoom_jq', function(event) {
    console.log('transform is detected.');
    scale = Math.max(0.5, Math.min(prevScale * event.originalEvent.gesture.scale, 3));
    target.css({transform : 'translate(50px, 200px) scale(' + scale + ',' + scale +')'});
});
$(document).on('release', 'img.photo-zoom_jq', function(event) {
    console.log('release is detected.');
    prevScale = scale;
});
$(document).on('touchmove', 'img.photo-zoom_jq', function(event) {
    console.log('touchmove is detected.');
    event.preventDefault();
});
<ons-navigator var="navi" page="page.html">
  </ons-navigator>

  <ons-template id="page.html">
    <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-back-button>Back</ons-back-button>
        </div>
        <div class="center">Navigation</div>
      </ons-toolbar>

      <section style="padding: 10px">
        <ons-button ng-click="navi.pushPage('page2.html')">
          Push Page
        </ons-button>
        <ons-gesture-detector>
        ↓push前(検知:OK|動作:OK)<br>
        <img class="photo-zoom_jq" src="http://placekitten.com/g/240/240">
        </ons-gesture-detector>

      </section>
    </ons-page>
  </ons-template>

  <ons-template id="page2.html">
    <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-back-button>Back</ons-back-button>
        </div>
        <div class="center">Navigation</div>
      </ons-toolbar>

      <section style="padding: 10px">
        <ons-button ng-click="navi.popPage()">
          Pop Page<br>
        </ons-button>
        <ons-gesture-detector>
        ↓push後(検知:OK|動作:NG)<br>
        <img class="photo-zoom_jq" src="http://placekitten.com/g/240/240">
        </ons-gesture-detector>

      </section>
    </ons-page>
  </ons-template>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

angularjsのcontrollerを使うともっときれいになると思いますが
現状を修正する場合こんな感じでしょうか。

サンプルリンク

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
    <script src="onsenui.min.js"></script>
    <script src="angular-onsenui.min.js"></script>
    <link rel="stylesheet" href="onsenui.css"/>
    <link rel="stylesheet" href="onsen-css-components.css"/>
    <link rel="stylesheet" href="my.css"/>

    <script>
        var app = ons.bootstrap('app', []);
        document.addEventListener('init', function(event) {
            if(event.target.id !== 'page2') return;

            var target = $("#page2 img.photo-zoom_jq");
            console.log(target);
            var prevScale = 1;
            var scale = 1;
            $(document).on('transform', '#page2 img.photo-zoom_jq', function(event) {
                console.log('transform is detected.');
                scale = Math.max(0.5, Math.min(prevScale * event.originalEvent.gesture.scale, 3));
                target.css({transform : 'translate(50px, 200px) scale(' + scale + ',' + scale +')'});
            });
            $(document).on('release', '#page2 img.photo-zoom_jq', function(event) {
                console.log('release is detected.');
                scale = Math.max(0.5, Math.min(prevScale * event.originalEvent.gesture.scale, 3));
                console.log('scale:' + scale);
                target.css({transform : 'translate(50px, 200px) scale(' + scale + ',' + scale +')'});
                console.log('css end.');
            });
            $(document).on('touchmove', '#page2 img.photo-zoom_jq', function(event) {
                event.preventDefault();
            });
        });
        document.addEventListener('destroy', function(event) {
            $(document).off('transform release touchmove');
        });
    </script>
</head>

<body>
<ons-navigator var="navi" page="page.html"></ons-navigator>

<ons-template id="page.html">
  <ons-page id="page1">
    <ons-toolbar>
      <div class="left">
        <ons-back-button>Back</ons-back-button>
      </div>
      <div class="center">Navigation</div>
    </ons-toolbar>
    <section style="padding: 10px">
      <ons-button ng-click="navi.pushPage('page2.html')">
        Push Page
      </ons-button>
      <ons-gesture-detector>
        ↓push前(検知:OK|動作:OK)<br>
        <img class="photo-zoom_jq" src="http://placekitten.com/g/240/240">
      </ons-gesture-detector>
    </section>
  </ons-page>
</ons-template>

<ons-template id="page2.html">
  <ons-page id="page2">
    <ons-toolbar>
      <div class="left">
        <ons-back-button>Back</ons-back-button>
      </div>
      <div class="center">Navigation</div>
    </ons-toolbar>
    <section style="padding: 10px">
      <ons-button ng-click="navi.popPage()">
        Pop Page<br>
      </ons-button>
      <ons-gesture-detector>
        ↓push後(検知:OK|動作:NG)<br>
        <img class="photo-zoom_jq" src="http://placekitten.com/g/240/240">
      </ons-gesture-detector>
    </section>
  </ons-page>
</ons-template>
</body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/11/10 22:32

    レビューありがとうございます。
    このJS部分は、monacaの教則本のサンプルアプリから借用しています。
    「event.preventDefault();」は、touchイベント全体でスクロールを無効にするためのようです。

    作成いただいたページをPC、モバイルで試しましたが、おっしゃるとおり動きませんでした。
    ソースに大きな違いは無いのですが、質問の本質とは違う問題のようなので、PC上で再現できるように<script></script>部分を以下のように変更しました。
    <script>
    var app = ons.bootstrap('app', []);

    ons.ready(function() {
    var target = $("img.photo-zoom_jq");
    var prevScale = 1;
    var scale = 1;

    $(document).on('transform', 'img.photo-zoom_jq', function(event) {
    console.log('transform is detected.');
    scale = Math.max(0.5, Math.min(prevScale * event.originalEvent.gesture.scale, 3));
    target.css({transform : 'translate(50px, 200px) scale(' + scale + ',' + scale +')'});
    });
    $(document).on('release', 'img.photo-zoom_jq', function(event) {
    console.log('release is detected.');
    scale = Math.max(0.5, Math.min(prevScale * event.originalEvent.gesture.scale, 3));
    console.log('scale:' + scale);
    target.css({transform : 'translate(50px, 200px) scale(' + scale + ',' + scale +')'});
    console.log('css end.');
    });
    $(document).on('touchmove', 'img.photo-zoom_jq', function(event) {
    event.preventDefault();
    });
    });
    </script>

    ons.ready(function() {~})を追加したのと、PCで取得できる「release」イベントで画像の位置を動かすようにしました。(iPhoneのsafariでは動きませんでしたのでPCのchromeで試してください。)

    再現方法ですが、ページを開いて最初に出た「page.html」では何もせずに、「Push Page」ボタンを押します。
    表示された「page2.html」の画像の上でクリックすると「release」イベントが発生し、CSSの書き換えが行われます。「Pop Page」ボタンを押して「page.html」に戻ると画像の位置が変わっているのがわかります。
    このとき、「page.html」のCSSのみ書き換えられ、「page2.html」のCSSが書き換わりません。
    「page2.html」のCSSを書き換えたい、というのがやりたいことになります。
    「page.html」の画像は、CSSが書き換わっているのを確認するために入れているだけですので、本来はなくてよいものです。「page2.html」の画像をクリックして、「page2.html」の画像の位置が動けばOKです。

    話がややこしくなり申し訳ございません。
    よろしくお願いします。

    キャンセル

  • 2016/11/10 23:20

    var target = $("img.photo-zoom_jq");
    の時点でtargetが1ページ目の画像しか取得していないので2ページ目の画像が更新されません。

    例えばonsen-uiのinitイベントを使用してページが読み込まれたタイミングで
    var target = $("img.photo-zoom_jq");以降の処理をしてみてはいかがでしょうか

    initのリンク
    https://ja.onsen.io/v2/docs/guide/js/

    キャンセル

  • 2016/11/10 23:56

    回答も更新しておきました

    キャンセル

  • 2016/11/11 00:03

    ありがとうございます。
    解決しました。
    Onsen UIの仕組みへの理解が少し深まりました。
    助かりました。

    キャンセル

同じタグがついた質問を見る

  • jQuery

    8155questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Monaca

    1112questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

  • Onsen UI

    354questions

    HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。