アプリの初期化

これで、必要なCSSやJavaScriptファイルがリンクされたHTMLレイアウトが完成しました。ここで、アプリを初期化する必要があります（例：my-app.js）。

var app = new Framework7();

上の例では、Framework7の初期化されたインスタンスを保存するために、変数 app を使用しています。名前は必ずしも app である必要はなく、好きな名前にすることができます。

とてもシンプルですね。しかし、Framework7はパラメータでオブジェクトを渡すことで、初期化をよりカスタマイズすることができます。

var app = new Framework7({
  // アプリのルート要素
  el: '#app',
  // アプリ名
  name: 'My App',
  // アプリID
  id: 'com.myapp.test',
  // スワイプパネルの有効化
  panel: {
    swipe: true,
  },
  // デフォルトルートの追加
  routes: [
    {
      path: '/about/',
      url: 'about.html',
    },
  ],
  // ... その他のパラメータ
});

利用可能なアプリのパラメータの一覧は、App / Coreセクションを確認してください。

アプリを初期化した後は、ビュー（アプリのレイアウトでは <div class="view view-main">）を初期化する必要があります。Viewは基本的にアプリのルーターで、ナビゲーションを担当します。

var mainView = app.views.create('.view-main');

したがって、my-app.jsの最終的な初期化コードは次のようになります。

var app = new Framework7({
  // アプリのルート要素
  el: '#app',
  // アプリ名
  name: 'My App',
  // アプリID
  id: 'com.myapp.test',
  // スワイプパネルの有効化
  panel: {
    swipe: true,
  },
  // デフォルトルートの追加
  routes: [
    {
      path: '/about/',
      url: 'about.html',
    },
  ],
  // ... その他のパラメータ
});

var mainView = app.views.create('.view-main');

次のステップ

さて、これでアプリを足場にして初期化する方法がわかりました。次は、App / Coreコンポーネントのパラメータやメソッド、Routerの仕組み、Views、Pages、その他のコンポーネントの詳細を確認しましょう。