Ionicフレームワークを使用したアプリ開発中、IonItemSlidingコンポーネント内のIonItemOptionでhref属性を使用した場合、リンクが機能しないという問題に遭遇しました。原因と対策について簡単に紹介します。

IonItemSliding内のコンポーネントに設定したリンクが動かない

発生した問題は、ユーザーがスワイプしてオプションを表示できるようにする<IonItemSliding>コンポーネントでおきました。以下のような、スワイプして「カレンダーに追加」というボタンを表示できるケースを考えましょう。

<IonItemSliding>
  <IonItem>
    <IonLabel>
      <h3>{event.displayName}</h3>
      {/* その他の表示情報 */}
    </IonLabel>
  </IonItem>
  <IonItemOptions side="end">
    <IonItemOption color="success" href={event?.googleCalendarUrl} target="_blank">
      カレンダー追加
    </IonItemOption>
  </IonItemOptions>
</IonItemSliding>

期待する行動としては、スワイプしてボタンを表示させ、ボタンをクリックしたらhrefに設定したカレンダーURLに移動するものです。しかしこの実装ではボタンをクリックしても何も起こりませんでした。

原因の調査

生成 AI を使いながら問題について調査したところ Ionicフレームワーク側の Issue として似たようなものが2つほど見つかりました。

Issue #25578: 「ion-item-sliding does not work if options are asynchronously added」
- リンク: https://github.com/ionic-team/ionic-framework/issues/25578
- IonItemSlidingコンポーネント内に動的に追加されたオプションが正しく機能しない問題

Issue #27258: 「Sliding does not work in an ion-item-sliding component if an *ngIf used on the ion-item-options」
- リンク: https://github.com/ionic-team/ionic-framework/issues/27258
- 条件付きレンダリングを使用した場合にスライディング機能が壊れる問題

これらの問題は、IonItemSlidingの内部実装に関するもので、特にhref属性を使用したリンクの動作にも影響を与えていると考えられます。

onClickハンドラと`window.open`を使う

とりあえずの解決策として、href属性を使用する代わりにonClickハンドラを使用しました。リンクはwindow.openを使用しています。

const handleGoogleCalendarClick = () => {
  if (event?.googleCalendarUrl) {
    window.open(event.googleCalendarUrl, '_blank');
  } else {
    alert('Googleカレンダー用のURLが設定されていません');
  }
};

// コンポーネント内で...
<IonItemOption color="success" onClick={handleGoogleCalendarClick}>
  Googleカレンダー追加
</IonItemOption>

一時的な回避策としての実装ですので、Ionic側のアップデートで解決され次第 href を使いたいと思います。

まとめ

Ionicアプリケーションの開発において、特にIonItemSlidingのような複雑なコンポーネントを使用する場合、標準的なHTML属性（href、target）が期待通りに動作しないことがあります。そのような場合は、JavaScriptベースのアプローチを使用して同等の機能を実装することで問題を回避できます。

Tag: UI実装

IonItemSlidingにおけるhref属性の問題と解決策