tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:NG-LIGHTNINGを試してみました

Angular2を使った開発でLightning Design Systemを利用できるNG-LIGHTNINGを試してみました。

f:id:tyoshikawa1106:20160812142151p:plain

ng-lightning - Native Angular 2 components and directives for Lightning Design System


使い方はトップページのGetting startedに記載されています。
f:id:tyoshikawa1106:20160812142425p:plain


ヘッダーメニューのComponentを選択すると、各コンポーネントのサンプルコードが確認できました。
f:id:tyoshikawa1106:20160812142524p:plain


HTML側のコードだけではなく、TypeScript側のコードも確認することができます。
f:id:tyoshikawa1106:20160812142614p:plain


NG-LIGHTNINGはGitHubで公開されています。


リポジトリの中にはdemoフォルダも用意されていました。
f:id:tyoshikawa1106:20160812142906p:plain

demoフォルダについて

demoフォルダをみたとき、NG-LIGHTNINGをちょっと動かすためのデモアプリだと思ったのですが、これはNG-LIGHTNING事態の開発に参加したい開発者向けの動作確認用に用意されたものみたいです。


詳細はng-lightning/DEVELOPER.mdファイルに記載がありました。
f:id:tyoshikawa1106:20160812150249p:plain


まずはgit cloneの実行です。

$ git clone git@github.com:ng-lightning/ng-lightning.git

f:id:tyoshikawa1106:20160812143101p:plain


ng-lightningフォルダに移動します。

$ cd ng-lightning/

f:id:tyoshikawa1106:20160812143203p:plain


npm installを実行します。

$ npm install
$ npm run typings


runコマンドを実行。

$ npm run build
$ npm run demo


別タブでnpm startを実行。

$ npm start


http://localhost:1111にアクセスするとLoadingと表示されるようになりました。ただエラーがでていたのでどこか手順が間違えているっぽいです。
f:id:tyoshikawa1106:20160812151753p:plain


ちなみにテストコマンドの方は正常に実行することができました。

$ npm test

f:id:tyoshikawa1106:20160812151902p:plain


とはいえNG-LIGHTNINGの開発に参加したい人向けなので、普通に利用する場合はここまでチェックする必要はないと思います。NG-LIGHTNINGのサイトで確認できたことはこんな感じです。