スマートフォンアプリに特化した、多彩なコンポーネントを持つUIフレームワーク「Framework7」の紹介

ハイブリッドアプリ開発においてUIフレームワークの選定はとても大事です。画面遷移などのアニメーションをサポートしているかどうか、JavaScriptライブラリとの組み合わせが可能か、iOS/Androidのサポート具合、コンポーネントの種類、など考えるべきポイントはたくさんあります。

MonacaにはUIフレームワーク「Onsen UI」が標準搭載されていますが、その他にもさまざまな選択肢はあります。今回はその中の一つ、Framework7を紹介します。

Framework7の特徴

Framework7はOnsen UIと同じくiOS/Androidを対象としたUIフレームワークです。ReactとVueをサポートしています。OSに合わせてUIを自動的に変えられるのはOnsen UIと同じです。画面遷移や各種アニメーションもサポートされています。ライセンスはMIT Licenseとなっていますので、商用でも利用できます。

以下はAndroidでの表示です。UIが変更されているのが分かるでしょうか。

Framework7の主なコンポーネントについて

ではここからFramework7のコンポーネントを紹介します。ハイブリッドアプリとしてはアニメーションも大事なので、アニメーションGIFを多用しています。

アコーディオン

情報が長い場合に彼ゴリー化して、タップして詳細を表示する時に使えます。

アクションシート

アニメーションがないのが残念ですが、アイコン画像を指定できるのは便利そうです。

入力補完

一部の文字を入れると候補を表示します。

ボタン

ボタンは角丸や四角、グルーピング、枠無しなど多彩な表現ができます。

カラーパターンも用意されています。

カレンダー

アプリで利用する機会の多い、カレンダーも用意されています。

カード

Facebook風のカードです。カードごとにアクションが設定されています。

チェックボックス

チェックボックスの表示は以下のようになります。

チップ

アイコンやプロフィールの画像付きのチップなどは色々と使い道がありそうです。

コンタクトリスト

アドレス帳やデータ量が多いリストを表示するために使えるコンタクトリストです。

通知

通知を上から表示します。

別バージョンとしてトーストもあります。

カテゴリ付きリスト

カテゴリを選択すると選択候補が変わるドロップダウンリストです。

カルーセル

アニメーション付きのカルーセルです。写真をまとめて表示する際などに便利でしょう。

プログレスバー

プログレスバーはさまざまなカラーリングで利用できます。

シートモーダル

アクションシート風に下から表示されるモーダルです。こちらはアニメーションします。

ステッパー

数値の入力などに便利です。

サブナビゲーション

ボタンをグルーピングした、サブナビゲーションバーです。

スワイプアクション

iOSアプリによくある、スワイプして次のアクションを表示するコンポーネントです。

スワイパー

横だけでなく、縦にもスワイプできます。以下のGIF画像では滑らかではありませんが、実際にはスムーズに操作できます。

タブバー

アイコンを使った、一般的なタブバーです。

スワイプできるタブバーもあります。

カラーテーマ

8種類のカラーテーマが用意されています。

データリスト

ここからはAndroid用のUIで紹介します。テーブル表示ができるデータリストです。

モーダル

ログイン画面と組み合わせています。

フローティングメニュー

フローティングさせたボタンをタップしてメニューを表示させます。さまざまなパターンが用意されています。

メニューを出したり、タブバーを表示したりもできます。

フォーム

入力する情報に応じて、様々な種類が用意されています。

アイコン

アイコンはFramework7独自のものと、Material Iconが利用できます。

グリッド

デザインを細かく制御するためのグリッドです。

チャット

メッセージやチャットで使えるUIです。

Monacaでの使い方

続いて、Monacaで利用する方法を紹介します。今回は素のHTML/JavaScriptと組み合わせて使います。

プロジェクトを作る

最小限のテンプレートではじめます。

Framework7を追加する

［JS/CSSコンポーネントの追加と削除］画面にて「framework7」を追加します。そして、以下の2つのファイルにチェックを入れて読み込みます。

components/framework7/packages/core/js/framework7.min.js
components/framework7/packages/core/css/framework7.min.css

HTMLを作成する

以下のようなHTMLをindex.htmlのbodyタグ内に記述します。

<div id="app">
  <div class="statusbar"></div>
  <div class="view view-main">
    <div data-name="home" class="page">
      <div class="navbar">
        <div class="navbar-inner">
          <div class="title">Framework7デモ</div>
        </div>
      </div>
      <div class="toolbar">
        <div class="toolbar-inner">
          <a href="#" class="link">リンク 1</a>
          <a href="#" class="link">リンク 2</a>
        </div>
      </div>

      <div class="page-content">
        <p>ページコンテンツをここに記述します</p>
        <a href="/about/">アバウト</a>
      </div>
    </div>
  </div>
</div>
<script src="app.js"></script>

app.jsを作成する

www/app.jsとしてJavaScriptファイルを作成します。

document.addEventListener('DOMContentLoaded', (e) => {
  var app = new Framework7({
    root: '#app',
    name: 'アプリ',
    id: 'com.example.test',
    panel: {
      swipe: 'left',
    },
    routes: [
      {
        path: '/about/',
        url: 'about.html',
      },
    ],
  });
});

そうするとUIにFramework7が適用されます。