iOS/Android向けのハイブリッドアプリ開発に利用されるフレームワークであるFramework7が、11月25日に9.0.0をリリースしました。今回の目玉機能は、何と言ってもiOS 26スタイルへの対応です。
この記事では、Framework7 v9の新機能や変更点について詳しく解説していきます。
Framework7とは
Framework7は、iOSおよびAndroid向けのハイブリッドアプリケーションを開発するためのオープンソースフレームワークです。HTML、CSS、JavaScriptを使用して、ネイティブアプリのようなUI/UXを提供します。
素のJavaScriptだけでなく、React、Vue、Svelteなどの人気のあるフロントエンドフレームワークとも統合できるため、幅広い開発者に利用されています。Webサイトはもちろんのこと、CordovaやCapacitor、Electronなどの技術と組み合わせて、モバイルアプリやデスクトップアプリの開発にも利用可能です。
iOS 26スタイルの対応
今回のアップデートでは、iOS 26スタイルの対応としてすべてのコンポーネントに変更が行われています。大げさに聞こえるかもしれませんが、本当にすべてのコンポーネントが変更されたと言っても過言ではないくらい変更が行われています。
たとえば最初の表示だけでも若干違います。リストの角丸が前バージョン（v8）よりも大きくなり、全体的により丸みを帯びたデザインになっています。
また、メニューや検索がリキッドグラス風になっています。これは「風」であって、背景のコンテンツが透けて見える訳ではないようです。実際、この透けて見える表示をCSSで実現しようとすると、パフォーマンスに悪影響があります。そのため、あくまで「風」という表現に留めているようです。
アコーディオン
以前は画面幅いっぱいにリストが広がっていましたが、v9（iOS 26スタイル）ではリストの幅が狭くなり、より洗練されたデザインになっています。
アクションシート
アクションシートは角の丸みが大きくなっています。ボタンなども全体的に丸みが増しています。
エリアグラフ
グラフは大きくは変わっていません。ただ、スクロールした際にヘッダーの背景に透けて見える度合いが強くなっています。
オートコンプリート
オートコンプリートについては、フォーム入力で使う際には大きく変わっていません。ヘッダーなどのフローティング要素がリキッドグラス風になっています。
バッジ
バッジのUIで特に変わったのはフッターでの表示でしょう。また、ヘッダーにあるアイコンのバッジ表示も変わっています。
ボタン
ボタンのデザインは若干縦長になった印象です。角丸具合は変わっていないように見えます。
カレンダー
カレンダーのデザインはリキッドグラス風になり、大幅に変わっています。
時間の選択では、矢印がなくなっています。
カラーピッカー
カラーピッカーのUIは、矢印が消えた点が特徴です。また、表示される際のアニメーションに変更があります。
ダイアログ
ダイアログは若干、背景が透けて見えます。
フローティングアクションボタン
フローティングアクションボタンは、各ボタンに若干の影が追加されました。
フォーム
フォームは幅が狭くなっているくらいで、大きな変更はなさそうです。
レンジ入力だけ、リキッドグラス風になっています。カレンダー入力はそのままだったので、今後変更される可能性はありそうです。
メッセージ
チャット風UIのメッセージコンポーネントは、入力欄がリキッドグラス風になっています。スクロールすると、メッセージが背景に透けて見えるようになっています。
通知
通知はリキッドグラス風ですが、背景は透けていません。閉じる際などに、一瞬拡大するアニメーションが入るようになっています。
パネル
パネルはリキッドグラス風に、背景が透けて見えるようになっています。
フォトブラウザ
サムネイルの写真が以前より大きく表示されています。また、サムネイルの写真が角丸です。
ピッカー
ピッカーの背景は透けていません。ただ、デザイン上の変更が細かく行われているようです。
ポップオーバー
ポップオーバーは、表示される際にアニメーションが追加されています。逆に矢印はなくなったので、複数の表示場所がある場合に、どの場所に表示されているのか分かりづらくなる可能性があります。
レンジスライダー
前述の通り、レンジスライダーはリキッドグラス風になっています。
検索バー・検索拡張バー
検索バーはリキッドグラス風になり、フォーカスした際に検索コンポーネント以外のグレーアウトが強くなっています。これは検索アイコンをタップして検索フィールドが表示される「検索拡張バー」でも同様です。
シートモーダル
シートモーダルはリキッドグラス風になっています。上から出した場合、長いコンテンツがあるとテキストが薄くなって表示されるので、続きのコンテンツがあるのが分かりやすいです。
スワイプアウト
スワイプで削除できるリストです。以前は四角く表示されていましたが、v9では角丸のボタンが表示される形式になっています。
タブ
タブはリキッドグラス風になっています。背景が透けて見えるようになっていますが、かなり薄く透けている程度です。
タイムライン
v8にはあった水平方向のタイムラインとカレンダータイムラインが消えており、縦方向のタイムラインのみになっています。水平方向は削除とのことですが、カレンダータイムラインは今後復活する可能性があります。
トースト
背景が黒から白になっています。また、リキッドグラス風になっており、少し背景が透けて見えるようになっています。
トグル
トグルはスライダーと同じく、ドラッグすると背景が透けます。また、ドラッグすると以前は行全体がハイライトしていましたが、v9ではトグル部分のみがハイライトされるようになっています。
タブバー
タブバーはリキッドグラス風デザインを強く感じるコンポーネントでしょう。背景が透けて、浮いているように見えます。
大きな変更のないコンポーネント
以下は、大きな変更のないコンポーネントです。
- パンくずリスト
- カード
- 拡張できるカード
- チェックボックス
- チップ・タグ
- コンタクトリスト
- コンテンツブロック
- データテーブル
- フローティングアクションモーション
- ゲージ
- グリッド・レイアウト
- アイコン
- 無限スクロール
- フォーム入力
- リストボタン
- リストビュー
- リストインデックス
- ログイン画面
- メニューリスト
- ナビゲーションバー
- 円グラフ
- ポップアップ
- ローダー
- プログレスバー
- Pull to refresh
- ラジオ
- セグメントコントロール
- スケルトンエレメント
- スマートセレクト
- ソートできるリスト
- ステッパー
- サブナビゲーションバー
- スワイパー
- テキストエディタ
- ツールチップ
- ツリービュー
- 仮想リスト
ただし、iOS26スタイルでは全体的に幅が狭くなっているので、以前は1行で表示できていた情報が2行になってしまうことがあります。デザイン上、注意が必要です。
以下はその例ですが、行数が変わってしまっているのがわかります。
マテリアルテーマへの対応
Material Youに合わせたカラーテーマに変更されています。
v9になって、若干暗くなった印象です。
なお、カラーテーマにモノクロ、鮮やかの設定オンオフが追加されています。
レンジスライダー
レンジスライダーのデザインが大幅に変更されています。
プログレスバー
プログレスバーも大幅に変更されています。以前は四角いデザインでしたが、v9では小さな角丸になっています。
その他のコンポーネント周りの変更
デザイン以外でもコンポーネント周りで修正が行われています。
- ナビゲーションバー
dynamicNavbarが削除されました。デフォルトのBackがなくなりました。 - フォトブラウザ
ライト・ダークモードが選択できなくなりました。アプリと共通したモードが利用されます。 - オートコンプリート
デフォルトのキャンセル用テキストが削除され、アイコンのみになります。 - スマートセレクト
デフォルトのキャンセル用テキストが削除され、アイコンのみになります。 - 検索バー
デフォルトのキャンセル用テキストが削除され、アイコンのみになります。 - タイムライン
水平タイムラインが削除されました。
その他
Svelte v5 APIに更新され、Reactは React 19 APIに更新されています。
まとめ
リキッドグラスUIへの対応は難しいと目されていましたが、v9で見事に対応しました。しかもMaterial You向けにも更新されており、今後のモバイルハイブリッドアプリ向けのUIフレームワークとして、Framework7はますます注目されることでしょう。
今後の新規開発では、ぜひFramework7 v9を検討してみてはいかがでしょうか。
Framework7 - Full Featured Framework For Building iOS, Android & Desktop Apps