HTML
angular
ionic
IonicDay 17

[Ionic]画像をピンチ、パンのジェスチャーで拡大、縮小させる

この記事はIonic Advent Calendar 2017の17日目です。


ピンチやパンと言ったジェスチャーで画像をズームする方法がわからなかったところ、調べたらIonic Forumに欲しい機能に合致する回答がありました。Ioni Forumに深く感謝して記事を書きます。
Ionic Forum - Zoom on image in Ionic?

やりたいこと & デモ

こんかんじのズーム。

zoom-pan.gif

Demo
ソースコード

なぜデフォルトだとできないのか?

そもそもこの操作はSafariやChromeといったブラウザならできるのにWebViewを使用しているIonicではできません。
それはviewportの設定で動作しないように設定されているからです。

index.html
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

たとえば、これを以下のように変更すれば、ピンチ操作はできるようになりますが、ページ全体が拡大されるので、なんだかなーといった感じです。

index.html
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=yes">

※Ionic DevAppで確かめたらiOSでしか動作しませんでした。

Forumに乗っていた方法だとズバリ画像のみ拡大・縮小が行えるのでよりアプリっぽい感じがします。

実装

リンク先がソースコードになります(Forumの内容の転載ですが・・・)
ソースコード

Hammer.jsを使ってジェスチャーの内容を監視して、pinchやpanedなどの操作の際に、CSSを書き換えて拡大、縮小、移動を行っている様子。

Hammer.jsなんてどこでインストールしたんだ?と思ったけど、ionic-angularのgestureコンポーネント内のhammer.tsがそれに当たるみたい。これってhammer.jsをTypeScriptで実装したんだろうか?凄い。

ionic-team/ionic/src/gesture/hammer.ts

まとめ

私自身、「ここの画像を拡大したい」と言われた時に「あれ、どうやればいいんだ」と途方にくれた経験があります。
本記事の回答が記載されたのは今年の7月であり、タイムリーな時期に回答があったおかげで何を逃れました。
やはり何か困ったことがあったらIonic Forumを見ることをおすすめします。その時に回答がなくても定期的に覗いてみたほうがよいです。

ちなみに、Direciveなので基本的に拡大・縮小ボタンを作るとか、動的にズーム、ムーブなどの処理をすることはできません。でも、Importに引数を増やしてngOnChangeとかで色々やればできるようになります。その方法はいずれ書く・・・。

他の方法

Ionic2-zoom-areaというcomponentも存在します。参考までに・・・。
DEMO
ソースコード