tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:Ionic2とNG-LIGHTNINGの組み合わせを試してみました

まずはIonic2の準備から。

$ npm install -g ionic@beta
$ ionic start cutePuppyPics --v2
$ cd cutePuppyPics
$ ionic serve

f:id:tyoshikawa1106:20160812152926p:plain:w300


Ionic2にはTypeScriptを利用する環境も全て整っています。
f:id:tyoshikawa1106:20160812153019p:plain


続いてng-lightningのインストールです。

$ npm install --save ng-lightning

もしかすると次のライブラリも必要かも

$ npm install --save @salesforce-ux/design-system@^2.0.1
$ npm install --save tether@^1.2.0


インストールできたら実際にバッチを表示してみます。まずはtsファイルの変更です。

home.ts
import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {NGL_DIRECTIVES} from 'ng-lightning/ng-lightning';

@Component({
  directives: [NGL_DIRECTIVES],
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {

  constructor(private navCtrl: NavController) {
  
  }

  type = 'inverse';

  private types: string[] = ['default', 'shade', 'inverse'];

  change() {
    this.type = this.types[(this.types.indexOf(this.type) + 1) % 3];
  }
}


続いてhome.htmlの変更です。

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding class="home">
  <h2>Welcome to Ionic!</h2>
  <p>
    This starter project comes with simple tabs-based layout for apps
    that are going to primarily use a Tabbed UI.
  </p>
  <p>
    Take a look at the <code>app/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>

  <ngl-badge>Badge</ngl-badge>
  <ngl-badge type="default">Default</ngl-badge>
  <ngl-badge type="info">Info</ngl-badge>
  <ngl-badge type="success">Success</ngl-badge>
  <ngl-badge type="warning">Warning</ngl-badge>
  <ngl-badge type="error">Error</ngl-badge>

  <div class="slds-m-top--large">
    Type: <code>{{type}}</code>
    <ngl-badge [type]="type" class="slds-m-horizontal--large">Badge</ngl-badge>
    <button type="button" nglButton="neutral" (click)="change()">Change</button>
  </div>
  
</ion-content>


最後にindex.htmlの変更です。(SLDSのCSS読み込みを追加)

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Ionic</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <link rel="stylesheet" href="https://npmcdn.com/@salesforce-ux/design-system@^2.0.2/assets/styles/salesforce-lightning-design-system.min.css">
  <link ios-href="build/css/app.ios.css" rel="stylesheet">
  <link md-href="build/css/app.md.css" rel="stylesheet">
  <link wp-href="build/css/app.wp.css" rel="stylesheet">
</head>
<body>

  <!-- This is Ionic's root component, where the app will load -->
  <ion-app></ion-app>

  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>
  <!-- Polyfill needed for platforms without Promise and Collection support -->
  <script src="build/js/es6-shim.min.js"></script>
  <!-- Zone.js and Reflect-metadata  -->
  <script src="build/js/Reflect.js"></script>
  <script src="build/js/zone.js"></script>
  <!-- The bundle which is built from the app's source code -->
  <script src="build/js/app.bundle.js"></script>
</body>
</html>


これでSLDSのバッチを表示することができました。
f:id:tyoshikawa1106:20160812160051p:plain:w300


その他いろいろ試してみようと思ったのですが、ボタンコンポーネント利用時に次のエラーが発生してしまいました。
f:id:tyoshikawa1106:20160812160944p:plain


解決方法があるかは確認できませんでした。Ionic2とNG-Lightningはもしかすると相性がよくないかもしれません。


とりあえず今回試してみた結果はこんな感じです。Ionic2との組み合わせがうまくいったらいいなと思ったのですが、ちょっと簡単にはできそうにありませんでした。