GrimoireGL / tutorial3

プラグインとは？

Grimoire.jsのほとんどの機能は、ノード・コンポーネント として実装されています。
ノードやコンポーネントは、普通にjavascriptで追加することもできますが、複雑なものを作るときは、 プラグイン としてまとめるのがオススメです。
プラグインにすることで、 scriptタグで読み込むだけで利用できる ようになります。 プラグインをゼロから作るのは大変なので、プラグイン作成のためのツールを用意してます。 cauldronコマンドでプラグインプロジェクトや、コンポーネントのテンプレートを生成してくれます。

テンプレートは Typescript です！ Typescript 書きましょう！ (javascriptのサポートは手が回ってない)

grimoirejs-cauldron

インストール

npm install -g grimoirejs-cauldron で一発。

よく使うコマンド

• cauldron init
  • プロジェクトのテンプレートをカレントディレクトリに作成する。
  • 空のディレクトリをつくってからそこで実行。
    • mkdir hoge && cd hoge && cauldron init
  • 引数は --name (-n)が必須。プロジェクト名です。
• cauldron scaffold
  • コンポーネントや、コンバータのテンプレートを作成する。
  • プロジェクトルートで実行
  • 引数は、 --type (-t), --name(-n)が必須。
    • --typeはcomponentか、converterを指定。
    • --nameは名前。なんでもいい。

プラグイン作成ことはじめ

• html, gomlを用意します。
• プラグインを作る

  • cauldron init -n grimoirejs-dena

    • プロジェクト名は、 grimoirejs-で始まる文字列を推奨
    • そのあと、 npm installしておきましょう。(依存がインストールされる)
    • npm run serverで簡易Webサーバが立ちます(macのみ？)

  • コンポーネントを作る

    • cauldron scaffold -t component -n Rotateで、テンプレート生成。
    • src/Componentsにできる

  • コンポーネントの中身を書く！詳細は＠＠＠＠＠＠＠

    • 先頭に$がついた関数は、 メッセージレシーバ と呼ばれ、自動的に呼ばれます。
    • attributes にはタグの属性を定義できる。

  • main.tsに、登録処理を書く！

    • gr.registerComponent()

  • ビルドする

    • npm run build -- --env.browser
    • registerフォルダの中にある、[プロジェクト名].js をブラウザで読み込む！

  • GOMLに書いて、表示してみる

    • npm run server