コーディングメソドロジー

第94回 EJSとCSVを使って効率の良い量産をしよう

中規模以上のサイト制作では、ページごとにレイアウトが異なるものだけでなく、ある程度レイアウトが決まったテンプレートページを量産していくケースが多くなってきます。制作に携わる人数を増やして手作業で1ページずつ制作していく方法もありますが、今回はテンプレートエンジンのEJSとCSVファイルを用いてページを一括でHTML 書き出しをする方法をご紹介します。

図1:ディレクトリ構造

図1:ディレクトリ構造

■手法の概要・手順

今回は、コーディングに関する様々な作業を自動化してくれるタスクランナーのGulpをベースにするので、gulpfile.jsが実行できる環境を用意します。ディレクトリ構成は図1のようにします。/_frontend/ディレクトリがEJSなどの処理を行う実行環境で、/public/が書き出されるHTMLを格納する場所です。

① CSVファイルの用意

表形式で記述ができ、スプレッドシートやExcelでの管理がしやすいのでCSVとしてファイルを作成します。(※ExcelではShift-JIS形式のみの出力となり文字化けしてしまうので、出力形式をUTF-8で出力できるGoogleのスプレッドシートがおすすめです。)1行目の各列にidやcategory、colorなど量産時のファイル名やHTML内に出力する値の見出しを記入し(図2のCSVファイルのオレンジ色部分)、2行目以降には値を入れます(図2のCSVファイルの白色部分)。作成したCSVファイルは/csv/ディレクトリに格納します。(図1の/csv/ディレクトリ参照)

図2:CSVファイルと書き出されるHTML内の値の関係

図2:CSVファイルと書き出されるHTML内の値の関係

② CSVファイルをJSONファイルに変換する

CSVファイルを作成したら、EJSと連携を行うために、JavaScriptとの親和性が高いJSON形式に変換して読み込む必要があります。gulp-convertを通して、/csv/ディレクトリにあるCSVファイルをJSONファイルに変換します(図3のA)。変換したファイルは/json/ディレクトリに出力されます。(図1の/json/ディレクトリ参照)

図3:gulp実行中の処理の流れ

図3:gulp実行中の処理の流れ

③ JSONファイルを読み込んで、HTMLを出力するGulpとEJSの記述をする

テンプレートエンジンのEJSは、「文字列や配列を読み込んだり、HTMLにJavaScriptでループや条件分岐を書いて出力制限が出来る」という特徴があります。その特徴を利用して、JSONファイルのデータを読み込んで、それぞれの行のデータごとにHTMLに値を出力して、HTMLを書き出しています。各データの出力のイメージは図2のCSVファイルの赤枠とHTML内のオレンジ色の値のような感じです。指定したHTMLの該当箇所にJSONの値が出力される仕組みです。

EJSの細かい記述については、EJS公式(http://www.embeddedjs.com/) または npmのEJSページ(https://www.npmjs.com/package/ejs)をご覧ください。

■まとめ

今回の手法のメリットは、テキストや値の変更をHTMLファイルで行うのでなく、CSVファイル上で修正するだけでHTMLに反映できるという点です。これにより制作や運用時の工数をかなり削減できます。

制作のスピード向上や運用の効率化で困っている場合は、EJSとCSVを使用した制作を考えてみてはいかがでしょうか。

サンプルのソースコードをGithubで公開していますので、ご活用ください。
https://github.com/monosus/cf-csv-ejs-set

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム