Framework7 カスタムビルド

カスタムビルド

Framework7にはGulpビルダーが搭載されており、必要なコンポーネントやモジュールのみを含むカスタムライブラリバージョンを構築することができます。以下のものが必要です。

1. Framework7 GitHub repositoryをローカルフォルダにダウンロードして解凍します。

2. Node.jsをインストールする（インストールされていない場合

3. ターミナルで以下のコマンドを実行し、Gulpをインストールします（インストールされていない場合）。

   $ npm install --global gulp

4. 次に、必要な依存関係をインストールする必要があります。ダウンロードして解凍したFramework7のリポジトリがあるフォルダに移動し、ターミナルで実行します。

   $ npm install

5. scripts/build-config.jsをダウンロードしたフォルダのどこかにコピーし、名前をscripts/my-config.js`とします。
6. このファイルを開いて、不要なコンポーネントを削除したり、カラーテーマや含まれている色を変更します。

   /* my-config.js */
   const config = {
     rtl: false, // change to true to generate RTL styles
   
     // 必要のないコンポーネントを削除
     components: [
       // アプリバー
       'appbar',
   
       // モーダル
       'dialog',
       'popup',
       'login-screen',
       'popover',
       'actions',
       'sheet',
       'toast',
   
       // ローダー
       'preloader',
       'progressbar',
   
       // リストコンポーネント
       'sortable',
       'swipeout',
       'accordion',
       'contacts-list',
       'virtual-list',
       'list-index',
   
       // タイムライン
       'timeline',
   
       // タブ
       'tabs',
   
       // パネル
       'panel',
   
       // カード
       'card',
   
       // チップ
       'chip',
   
       // フォームコンポーネント
       'form',
       'input',
       'checkbox',
       'radio',
       'toggle',
       'range',
       'stepper',
       'smart-select',
   
       // グリッド
       'grid',
   
       // ピッカー
       'calendar',
       'picker',
   
       // ページコンポーネント
       'infinite-scroll',
       'pull-to-refresh',
       'lazy',
   
       // データテーブル
       'data-table',
   
       // FAB
       'fab',
   
       // サーチバー
       'searchbar',
   
       // メッセージ
       'messages',
       'messagebar',
   
       // スワイパー
       'swiper',
   
       // フォトブラウザ
       'photo-browser',
   
       // 通知機能
       'notification',
   
       // オートコンプリート
       'autocomplete',
   
       // ツールチップ
       'tooltip',
   
       // ゲージ
       'gauge',
   
       // スケルトン
       'skeleton',
   
       // メニュー
       'menu',
   
       // カラーピッカー
       'color-picker',
   
       // ツリービュー
       'treeview',
   
       // WYSIWYGエディター
       'text-editor',
   
       // 円グラフ
       'pie-chart',
   
       // エリアチャート
       'area-chart',
   
       // エレベーション
       'elevation',
   
       // タイポグラフィ
       'typography',
     ],
     // ダークテーマのスタイルを含む／含まない
     darkTheme: true,
     // ライトテーマのスタイルを含む／含まない
     lightTheme: true,
     // テーマを含む／含まない
     themes: [
       'ios',
       'md',
       'aurora',
     ],
     // 色の変更
     themeColor: '#007aff',
     colors: {
       red: '#ff3b30',
       green: '#4cd964',
       blue: '#2196f3',
       pink: '#ff2d55',
       yellow: '#ffcc00',
       orange: '#ff9500',
       purple: '#9c27b0',
       deeppurple: '#673ab7',
       lightblue: '#5ac8fa',
       teal: '#009688',
       lime: '#cddc39',
       deeporange: '#ff6b22',
       gray: '#8e8e93',
       white: '#ffffff',
       black: '#000000',
     },
   };
   
   module.exports = config;
   

7. これで、Framework7のカスタムバージョンをビルドする準備が整いました。あとは実行するだけです。

   $ npm run build-core:prod -- --config scripts/my-config.js --output path/to/output/folder

8. 以上で完了です。これで、指定した出力フォルダに新しく生成されたjsとcssのファイルが表示されるはずです。

ESモジュール

WebpackやRollupのようなbundlerを使用している場合、必要なコンポーネントだけをインポートすることで、ビルドプロセスを行わずに必要なFramework7 JSコンポーネントだけを使用することができます。

// コアフレームワークのインポート
import Framework7 from 'framework7';

// 追加コンポーネントのインポート
import Searchbar from 'framework7/components/searchbar';
import Calendar from 'framework7/components/calendar';
import Popup from 'framework7/components/popup';

// Framework7クラスの.use()メソッドを使ってF7コンポーネントをインストールします。
Framework7.use([Searchbar, Calendar, Popup]);

// アプリの初期化
var app = new Framework7({/*...*/});

以下のコンポーネントがインポート可能です（その他のコンポーネントはコアの一部です）。

Less.js

Framework7のスタイルは、Less.jsで構築されています。もし、あなたのアプリ/プロジェクトで Less と NPM を使っているなら、必要なコンポーネントだけを使ったカスタムの Framework7 スタイルシートを簡単に作ることができます。

独自の framework7.less ファイルを作成してください。

// コア
@import url('path/to/node_modules/framework7/framework7.less');

// 必要なコンポーネントだけをインポートする
@import url('path/to/node_modules/framework7/components/searchbar/searchbar.less');
@import url('path/to/node_modules/framework7/components/calendar/calendar.less');
@import url('path/to/node_modules/framework7/components/popup/popup.less');

さらに進んで、カスタムの framework7.less ファイルで、Framework7 のメインのカラーテーマと必要な色を指定することもできます。

// コア
@import url('path/to/node_modules/framework7/framework7.less');

// 必要なコンポーネントのみをインポートする
@import url('path/to/node_modules/framework7/components/searchbar/searchbar.less');
@import url('path/to/node_modules/framework7/components/calendar/calendar.less');
@import url('path/to/node_modules/framework7/components/popup/popup.less');

// テーマを含める/除外する
@includeIosTheme: true;
@includeMdTheme: true;
@includeAuroraTheme: true;

// ダークテーマを含む/含まない
@includeDarkTheme: true;
// ライトテーマを含む/含まない
@includeLightTheme: true;

// テーマカラー
@themeColor: #007aff;

// 追加の色
@colors: {
  red: #ff3b30;
  green: #4cd964;
  blue: #2196f3;
  pink: #ff2d55;
  yellow: #ffcc00;
  orange: #ff9500;
  purple: #9c27b0;
  deeppurple: #673ab7;
  lightblue: #5ac8fa;
  teal: #009688;
  lime: #cddc39;
  deeporange: #ff6b22;
  gray: #8e8e93;
  white: #ffffff;
  black: #000000;
};

// RTLスタイルを生成するにはtrueに変更します。
@rtl: false;