1. TOPTOP
  2. Webサービス
  3. PayPal

BraintreeSDKを利用してPayPal ExpressCheckoutを実装する その10(テンプレートエンジン jadeの利用)

|

braintree_payments_1_1

BraintreeSDKを利用してPayPal ExpressCeckoutを実装する その9(新しいタブで開く)では、ルーティングの確認とエラー処理についてご紹介をしました。今回の記事ではテンプレートエンジンであるjadeの利用を紹介します。

テンプレートエンジンを使う意味

app.jsが読み込まれた後にブラウザ上で表示されるファイルが、テンプレートエンジンを利用したファイルが返されるようにします。

単なるファイルを表示させると開発者がそのたびに値を設定しなければなりませんが、テンプレートエンジンで値をまとめて設定することでブラウザ表示のための記述が簡略化することができます。

テンプレートエンジンにはいくつか種類がありますが、今回のデモサイトでは”jade(新しいタブで開く)“というテンプレートエンジンを用います。

jadeのインストールとapp.jsでの記述

jadeのインストールとapp.jsでの記述方法は以下の通りです。

jadeのインストール

$ pwd
/Users/myusername/Braintreetest
$ npm install --save jade

PayPal ExpressCheckoutのプロジェクトがインストールされている先頭のディクレクトリから、テンプレートエンジンである”jade”をインストールします。

paypal_braintree_payments_9_1

インストールが完了すると、上記のような画面になります。またnode_modulesディレクトリの直下にjadeディレクトリが新しく出来上がります。

app.jsでの記述

var app = express(); ←すでに記述済み

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

すでに記述している”var app = express();”の後に、第一引数で設定したい内容名入力し、第二引数でプロジェクト内のどの機能を使用するか、app.setメソッド(新しいタブで開く)で登録します。

3行目

現在のディレクトリ(/home/myusername/Braintreetest)の下に作成したviewsディレクトリを、”views”として名前登録します。

4行目

テンプレートエンジンである”jade”を、”view engine”として名前登録します。

viewsディレクトリの作成

$ pwd
/Users/myusername/Braintreetest 
$ mkdir views

のちの記事で説明しますが、先ほど紹介した3行目のviewsディレクトリをプロジェクトの直下に作成します。なお、今回の記事で作成したコードの記述はGitHubにアップしています。ご興味のある方はぜひ参考にしてください。その11(新しいタブで開く)に続きます。