読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

Heroku:Lightning Design System Getting Startedを試してみました

Heroku Node.js Lightning

Ligtning Design SystemのサイトにHerokuとNode.jsを使ったGetting Startedページが追加されていたので、ちょっと確認してみました。

f:id:tyoshikawa1106:20150916050016p:plain

Lightning Design System

Step 1: Initialize your project

一番最初にターミナルを起動して、作業ディレクトリに移動しておきます。準備ができたら以下のコマンドを実行します。

$ mkdir demo_slds_heroku
$ cd demo_slds_heroku

f:id:tyoshikawa1106:20150916050328p:plain


これで『demo_slds_heroku』ディレクトリが作成され、そのディレクトリに移動できました。続いて次のコマンドを実行します。

$ npm init

nameやdescriptionなどを聞かれますが、基本何も入力せずにEnterを押していきます。entry point: (index.js)のところだけ、[server.js]を入力します。
f:id:tyoshikawa1106:20150916050733p:plain


正常に実行できるとこんな感じです。
f:id:tyoshikawa1106:20150916050820p:plain


この操作ではpackage.jsonが作成されます。最終的にこうなります。
f:id:tyoshikawa1106:20150916051233p:plain

Step 2: Install node dependencies - Express

ここまでできたら次のコマンドを実行します。

$ npm install express --save

f:id:tyoshikawa1106:20150916051836p:plain

※エラーになったときは『sudo』をつけると解決するかも...

Step 3: Create public/index.html

続いて次のコマンドを実行します。

$ mkdir public
$ touch pubilc/index.html

publicフォルダとindex.htmlを用意するコマンドだと思うのですが、自分の環境ではtouchコマンドでエラーが発生しました。
f:id:tyoshikawa1106:20150916052351p:plain


ここは手動で作っちゃっても問題無いと思います。index.htmlを作ったら次のコードを入れておきます。

<!DOCTYPE html>
<html>
  <head>
    <title>Playground</title>
  </head>
  <body>
    Kaixo!
  </body>
</html>

f:id:tyoshikawa1106:20150916052501p:plain

Step 4: Create server.js

次のコマンドを実行してserver.jsを作成します。

$ touch server.js


今回は問題なく実行できました。
f:id:tyoshikawa1106:20150916052848p:plain


作成したservier.jsを次のように編集します。

var express = require('express');
var app = express();
var port = process.env.PORT || 8080;

// Serve static files
app.use(express.static(__dirname + '/public'));

// Serve your app
console.log('Served: http://localhost:' + port);
app.listen(port);

f:id:tyoshikawa1106:20150916052931p:plain


これでNode.jsの実行準備ができました。次のコマンドを実行するとローカルサーバを起動できます。

$ node server.js

f:id:tyoshikawa1106:20150916053104p:plain


これでlocalhost:8080にアクセスすると次の画面が表示されると思います。
f:id:tyoshikawa1106:20150916053201p:plain

Step 5: Download the Lightning Design System

Lightning Design SystemをダウンロードしてNodeアプリのディレクトリに移動します。自分はSLDS091というファイル名にしてpublic/lib/SLDS091/....という感じに置きました。
f:id:tyoshikawa1106:20150916053621p:plain


ここまでできたら、次の方法でCSSの読み込みを行います。

<link rel="stylesheet" type="text/css" href="lib/SLDS091/assets/styles/salesforce-lightning-design-system.css">


これでLigtning Design Systemを利用する準備が完了しました。サイトのサンプルコードでいろいろ確認できると思います。今回のファイルの配置方法の場合、画像の読み込みは次のようになります。

読み込み例
<use xlink:href="lib/SLDS091/assets/icons/standard-sprite/svg/symbols.svg#task"></use>


コードは最後に記載しますが、Getting Startedページの指示通りに進めるとこんな感じの画面を表示できます。
f:id:tyoshikawa1106:20150916055310p:plain

Step 7: Deploy to Heroku

静的ページが作成できたところで、Herokuにデプロイを実行します。まずは次のコマンドを実行してファイルを用意します。

$ touch Procfile

f:id:tyoshikawa1106:20150916055521p:plain


ちょっと自身が無いのですが、多分こうします。
f:id:tyoshikawa1106:20150916055611p:plain

web: node server.js


これでデプロイの準備ができました。次のコマンドを実行していきます。

$ git init
$ git add .
$ git commit -m "Init"
$ heroku create
$ git push heroku master

正常に実行ができたら、heroku openコマンドでアプリにアクセスします。Herokuアプリとして次の画面が表示できると思います。
f:id:tyoshikawa1106:20150916060455p:plain


多少変更を加えましたがHeroku版のLightning Design System Getting Startedの進め方はこんな感じです。今までNode.jsをつかった静的ページの表示方法はイマイチ理解できていなかったのですが、Getting Startedの指示通りに進めるだけで簡単に表示できました。


最後に今回のコードをGitHubにアップしました。記事内では省略したindex.htmlのコードもこちらで確認できます。