Ligtning Design SystemのサイトにHerokuとNode.jsを使ったGetting Startedページが追加されていたので、ちょっと確認してみました。
Step 1: Initialize your project
一番最初にターミナルを起動して、作業ディレクトリに移動しておきます。準備ができたら以下のコマンドを実行します。
$ mkdir demo_slds_heroku $ cd demo_slds_heroku
これで『demo_slds_heroku』ディレクトリが作成され、そのディレクトリに移動できました。続いて次のコマンドを実行します。
$ npm init
nameやdescriptionなどを聞かれますが、基本何も入力せずにEnterを押していきます。entry point: (index.js)のところだけ、[server.js]を入力します。
正常に実行できるとこんな感じです。
この操作ではpackage.jsonが作成されます。最終的にこうなります。
Step 2: Install node dependencies - Express
ここまでできたら次のコマンドを実行します。
$ npm install express --save
※エラーになったときは『sudo』をつけると解決するかも...
Step 3: Create public/index.html
続いて次のコマンドを実行します。
$ mkdir public $ touch pubilc/index.html
publicフォルダとindex.htmlを用意するコマンドだと思うのですが、自分の環境ではtouchコマンドでエラーが発生しました。
ここは手動で作っちゃっても問題無いと思います。index.htmlを作ったら次のコードを入れておきます。
<!DOCTYPE html>
<html>
<head>
<title>Playground</title>
</head>
<body>
Kaixo!
</body>
</html>
Step 4: Create server.js
次のコマンドを実行してserver.jsを作成します。
$ touch server.js
今回は問題なく実行できました。
作成した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);
これでNode.jsの実行準備ができました。次のコマンドを実行するとローカルサーバを起動できます。
$ node server.js
これでlocalhost:8080にアクセスすると次の画面が表示されると思います。
Step 5: Download the Lightning Design System
Lightning Design SystemをダウンロードしてNodeアプリのディレクトリに移動します。自分はSLDS091というファイル名にしてpublic/lib/SLDS091/....という感じに置きました。
ここまでできたら、次の方法で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ページの指示通りに進めるとこんな感じの画面を表示できます。
Step 7: Deploy to Heroku
静的ページが作成できたところで、Herokuにデプロイを実行します。まずは次のコマンドを実行してファイルを用意します。
$ touch Procfile
ちょっと自身が無いのですが、多分こうします。
web: node server.js
これでデプロイの準備ができました。次のコマンドを実行していきます。
$ git init $ git add . $ git commit -m "Init" $ heroku create $ git push heroku master
正常に実行ができたら、heroku openコマンドでアプリにアクセスします。Herokuアプリとして次の画面が表示できると思います。
多少変更を加えましたがHeroku版のLightning Design System Getting Startedの進め方はこんな感じです。今までNode.jsをつかった静的ページの表示方法はイマイチ理解できていなかったのですが、Getting Startedの指示通りに進めるだけで簡単に表示できました。
最後に今回のコードをGitHubにアップしました。記事内では省略したindex.htmlのコードもこちらで確認できます。
