🌟

Ionic Angularで簡単に写真スライダーモーダルを実装しよう

2024/11/28に公開

写真スライダーは、モバイルアプリにおいて、写真を見せる際によく使われるUIパターンです。画面サイズが限られるので、写真を拡大して全画面表示に近い形で見せるのに頻用されます。XやFacebookでも見かけますよね。 実際にアプリ開発で「写真の拡大表示とスライダー」という機能はとても重宝します。しかし、重宝するからこそ、複数アプリを管理してると「どのアプリでも同じコードを書いて導入」することになりがちです。私が管理してるアプリの中で同一コードの写真スライダー、当時いくつあったっけ。4つかな。
で、そうするとコートのメンテナンス性も悪くなりますし、ちょっと更新を停止してたアプリなんかあると「あれ、どこまで機能のマイグレーションかけたっけ」となりがちです。そこでライブラリに切り分けて、すべてのプロジェクトでライブラリを呼び出すだけで写真スライダーのモーダルを使えるようにしました。似たような経験して、似たような苦労をしてる方、ぜひご利用ください。

 デモhttps://rdlabo-ionic-angular-library.netlify.app/main/photo-editor
エディターもついてますが、「Launch Photo Viewer」をご確認ください。みたらわかります。みんな実装してるやつです。笑

ちなみにデモでは右上に「Delete」が表示されますが、非表示のハンドリングもできますし、何なら表示されてるテキスト自体も差し替えれるようにしています。

 使い方Ionic Angularのプロジェクトでまずインストールしてください。
% npm install @rdlabo/ionic-angular-photo-editor 
そして、グローバルスタイルに以下を当ててください。
:root {
  --ion-photo-editor-background: #2a2a2a;
  --ion-photo-editor-background-tint: #414141;

  --ion-photo-editor-color: #f0f0f0;
  --ion-photo-editor-color-tint: #dbdbdb;

  --ion-photo-editor-primary: #4d8dff;
  --ion-photo-editor-danger: #f24c58;
  --ion-photo-editor-success: #2dd55b;
}
現在のスタイルはCSS変数なので、これを変更することで、デザインを変更できます。使い方はとても簡単で、IonicのModalを立ち上げる時に、 ComponentProps で写真情報や表示する番号を渡すだけです。 enableDelete を false にすると削除ボタンは表示されません。
import { PhotoViewerPage, IPhotoViewerDismiss } from '@rdlabo/ionic-angular-photo-editor';

(async () => {
  const modal = await this.modalCtrl.create({
    component: PhotoViewerPage,
    componentProps: {
      imageUrls: [
        'https://picsum.photos/200/300',
        'https://picsum.photos/200/300',
      ],
      index: 0,
      isCircle: false,
      enableDelete: true
    },
  });
  await modal.present();
  const { data } = await modal.onWillDismiss<IPhotoViewerDismiss>();
  if (data?.delete) {
    // User delete image
  }
})();
詳しくは https://github.com/rdlabo-team/ionic-angular-library/tree/main/projects/photo-editor をご覧ください。

 まとめこのライブラリ自体は、私がリリースしているアプリで採用しており、安定的に動いてるものです。ぜひお試しください。
それではまた。

デモ

使い方

まとめ

Discussion