【gulp】jsonファイルを扱う方法をメモメモ①～require編

gulp

2016.04.25

みなさま、こんにちは。最近VRがものすごく気になり始めて、どうやって作るのか・・・を少し勉強しようと思っている kouraku です。でも、年が年なので物覚えが悪くなっているから、習得は無理でしょうね・・・（苦笑）。

さて、今回は使い方次第で色んなことができる・・・であろう jsonファイルを扱う方法についてメモしたいと思います。HTMLの大量生成や、ワード集などを作る時に重宝します。

まずは構成から

今回の構成は以下のとおりです。今回もHTMLのテンプレートエンジンは、まだまだ不安定さが残るpugではなくjadeを使いたいと思います。
よって、前回までの構成をそのまま使用します。
（詳細はGitの内容をご覧ください）。

┬ [gulptasks] ─── タスク用ディレクトリ
｜ 　 ├ beautify-html.coffee
｜ 　 ├ browser-sync.coffee
｜ 　 ├ compile-html.coffee
｜ 　 ├ htmlhint.coffee
｜ 　 ├ jade.coffee
｜ 　 ├ taskload.coffee ─── gulptasks内のタスクを読み込む
｜ 　 └ watch.coffee ─── ファイル監視
├ [htdocs]
├ [node_modules] ─── plugins
├ [src] ─── テンプレートエンジン用
｜ ├ [data] ─── jsonデータ保管場所
｜ └ [jade] ─── jade用
｜ 　 ├ [_common] ─── レイアウト用
｜ 　 ├ [_modules] ─── 個別パーツ用
｜ 　 └ [pages] ─── ページ（実体）用
├ .gulpconfig.json
├ .htmlhintrc.json
├ gulpfile.coffee
└ package.json

jsonファイルを格納する dataディレクトリだけ、src に追加しています。

requireでjsonファイルを読み込ませる

jsonファイルを手っ取り早く扱う方法として、まず思い当るのが require を使うことです。
例えば下記の様な感じで読み込みます。

dataJson = require './hogehoge.json'

サンプルデータの中でも、gulpfile.coffee の中で gulpconfig.json を読み込む際に使っています。

[gulpfile.coffee]

  :
# gulp設定情報読込
config = require './.gulpconfig.json'

# global設定
global.prop =
    plugins: plugins
    config: config
  :

上記にある通り、ここでは jsonファイルの内容をグローバル変数に設定して、色々なタスクファイルの中で設定情報を利用しています。

jade で jsonファイルを使用する

続いて、jadaで jsonファイルを使用する方法をメモします。
まずは jsonファイルを適当に用意します。

[src/data/sample.json]

{
  "info": {
    "siteName": "gulp sample - jsonファイルを扱う方法をメモメモ",
    "title": "requireを使う方法",
    "content": "requireでjsonファイルを読み込む。更新しても表示される情報は変わりません。requireの場合は、gulpの再起動が必要になります。"
  }
}

jade.coffee に jsonファイルを読み込ませる記述を追記します。

[gulptasks/jade.coffee]

    :
  # jade
  module.exports = do ->
    gulp.task 'jade', ->
      console.log 'start COMPILE-JADE!!!'
      gulp
      .src config.paths.src+'/jade/pages/**/*.jade'
      .pipe plugins.plumber
        errorHandler: plugins.notify.onError 'Error: <%= error.message %>'
      .pipe plugins.data (file) ->
        return require '../'+config.paths.src+'/data/sample.json'
      .pipe plugins.jade
        basedir: config.paths.src+'/jade'
      .pipe gulp.dest config.paths.pub

前回のソースに2行だけ、jadeの処理の前に追加しています。

  :
      .pipe plugins.data (file) ->
        return require '../'+config.paths.src+'/data/sample.json'
  :

ここで、jsonファイルの内容をテンプレートエンジンで使用できるように、データをオブジェクト化してくれるプラグイン「gulp-data」を新たに追加しています。

ということで、このプラグインをインストールします。

$ npm i gulp-data -D

はい、これで jade で jsonファイルを利用する準備が整いました。

では、jadeファイルでデータを使ってみます。
index.jade を以下の通り、少し書き換えてみました。

extends /_common/_layout_default

block localVars
  - var pageTitle = info.pageTitle
  - var contHeader = info.contHeader
  - var contBody = info.contBody

block content
  include /_modules/_mod_header
  main
    h1 #{contHeader}
    p #{contBody}
    p
      | Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      br
      | Placeat, vel eveniet nemo repudiandae dolore consequatur similique dicta voluptates accusamus laboriosam earum sed itaque ex aliquam unde minima illo et obcaecati?

まず、localVars 内で jsonファイルから読み込んだデータを各変数に代入しています。

次に、設定した変数をコンテンツ内に差し込みます。
pageTitle は、前回のサンプルデータにて、title や header内で既に指定しているので、ここでは記述していません。contHeader と contBody をそれぞれ h1、pタグ内に差し込みました。

では、今回は gulp コマンドを叩いて表示確認をしてみます。

$ gulp

すると、下図の通り、jsonで指定した内容が反映されていることが分かります。

問題点

無事 jsonファイルを読み込ませることができました・・・が、制作を続けているとある問題が発覚します。

今回のサンプル jsonファイルにも記述していますが、require で jsonファイルを読み込んだ場合、jsonファイルを変更してもその内容は画面上変更されません（実行時のみ処理されるため）。変更するには、gulpを再起動する必要があります。

設定ファイルのように、起動時に1回読み込ませるだけで問題ないデータに関してはこのままで問題ありませんが、一般のWebサイト制作などでこの様な状況だと不便極まりないです。
コンテンツの内容を jsonファイルでまとめて管理・・・とかしていたら、ちょっと面倒ですね。

・・・ということで、次回は、jsonファイルを変更したら、gulpを再起動することなくしっかりと変更内容が反映されるような仕組みを作ってみたいと思います。

まとめ

同じテンプレートを使用してページを量産する、などは jsonファイルなどを用いると効率が上がる場合もあります。まぁ、うまく仕様を固めていないと痛い目を見ることもありますが・・・（苦笑）。これまでの仕事の中で最も役に立ったのは、ワード集を作る時でした。意味の内容に変更が入る・・・などは大したことありませんが、言葉自体が変わる・・・となると話はちょっぴり変わってきます。こんな時は、データを外部に持たせて管理する方法は便利ですね。

そういえば、話を始めに戻しますが、Facebook と Oculusの「ソーシャルVR」の取り組み・・・これはヤバいですね。
仮想空間の中で友達やグループの人たちと対面（と言っても良いですよね）でコミュニケーションできる・・・
なんか、今年は一気に「未来」が押し寄せてくる・・・そんな勢いを感じますね。
この流れにうまく乗っていけるか・・・分岐点が多い一年になりそうです。

VRで生まれる人とのつながり。FacebookとOculusが目指すソーシャル・プレゼンスとは。
（MoguraVR）

今回のサンプルデータ
※サンプルの動作を確認したい場合は、「npm install」してから「gulp」コマンドを叩いてください。