この記事はIonic Advent Calendar 2017の17日目です。
ピンチやパンと言ったジェスチャーで画像をズームする方法がわからなかったところ、調べたらIonic Forumに欲しい機能に合致する回答がありました。Ioni Forumに深く感謝して記事を書きます。
Ionic Forum - Zoom on image in Ionic?
やりたいこと & デモ
こんかんじのズーム。
なぜデフォルトだとできないのか？
そもそもこの操作はSafariやChromeといったブラウザならできるのにWebViewを使用しているIonicではできません。
それはviewportの設定で動作しないように設定されているからです。
<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">
たとえば、これを以下のように変更すれば、ピンチ操作はできるようになりますが、ページ全体が拡大されるので、なんだかなーといった感じです。
<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とかで色々やればできるようになります。その方法はいずれ書く・・・。