LoginSignup
0
0

More than 5 years have passed since last update.

Polymer App Toolbox(日本語) Using the Toolbox/App templates 〜アプリケーションのテンプレート〜

Last updated at Posted at 2017-04-30

目次へ移動

翻訳ドキュメントの管理ページ

Polymer App Toolboxの利用は、Polymer CLIを使い、ここで紹介される要素やパターンが組み込まれたテンプレートから一つを選んで始めることができます。

テンプレートからプロジェクトを初期化

テンプレートからプロジェクトを初期化するには、Polymer CLIがインストールされていることを確認し、空のプロジェクトフォルダにcdで移動し、次のコマンドを実行するだけです。そうすると現在利用可能なテンプレートから一つ選択するよう促されます。

    $ polymer init

テンプレート

Application

applicationテンプレートは、Polymerで構築されるアプリケーションの最も基本的な出発点です。アプリケーションのルート(root)として配信可能な必要最小限の実装を備えたカスタム要素が一つ用意されています。非常に高い柔軟性を持っており、そこから思うままにアプリケーションを構築していけます。

Starter Kit

Starter Kitのイメージ図

starter-kitapp-layout要素を取り入れ、汎用的なレフトドロワーパネルとツールバーを備えています。テンプレートは、メインコンテンツエリアへ読み込み描画される複数のビュー間にナビゲーションを提供します。

テンプレートは、アプリケーションの効率的かつ進歩的な(progressive)ローディングのためPRPLパターンを用いてセットアップされます。PRPLパターンでは、ビューは必要に応じて読み込まれ、オフライン環境やその後の利用に備えてプリキャッシュされます。

Shopアプリケーションデモ

Shopデモのイメージ図

shopテンプレートは、starter-kit上に構築された本格的なアプリケーションで、PWA仕様の完全なECアプリケーションを構成する要素一式を実装しています。このテンプレートは、「home - list - detail」型の典型的なアプリケーションフローの見本であり、出発点となるイメージや必要な機能一式を備えたアプリケーションの雛形を提供します。

詳細については、Shop case studyを参照してください。

Newsアプケーションデモ

Shopデモのイメージ図

newsテンプレートは、starter-kit上に構築された本格的なアプリケーションで、PWA仕様の完全なNewsアプリケーションを構成する要素一式を実装しています。このテンプレートは、ニュース記事のロードをデモンストレートし、出発点となるイメージや必要な機能一式を備えたアプリケーションの雛形を提供します。

実装の詳細については、News case studyを参照してください。Newsのテンプレートの使用方法やカスタマイズ方法については、News documentation siteを参照してください。

次に進むところ

テンプレートは出発点であり、アプリケーションのニーズに合わせて、Polymer App Toolboxのドキュメント内で紹介されるWebコンポーネントに限らず、WebComponents.orgのような外部のソースからも自由にコンポーネントを追加することができます。

App Toolboxのテンプレートの利用を開始するためのチュートリアルは、Building your first Polymer applicationを参照してください。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0