W3QはBiztterに生まれ変わりました!
Web制作に関するお悩みはBiztterへどうぞ!

Biztterで質問する

ID:6YHnY5 さんの質問

gulp-ejsについての質問

下記、ブログ記事を読んで、
gulp-ejsを導入してみたのですが、
記事で書かれていること以上のことができずに
困っております。

■参考ブログ
http://liginc.co.jp/web/html-css/html/144170

■やりたいこと
header、footerなど共通で使用するファイルを別ファイルにし、
すべてのページからインクルードして使用したい。
その際に、indexページからfooterを呼び出した場合のみ、
FacebookなどのSNSエリアを表示したい。

上記「やりたいこと」を行うのは可能でしょうか。
もし、可能でしたら方法も教えて頂けますと幸いです。

ご解答よろしくお願いいたします。

みんなの回答 3 件

ID:K/B0.j さんの回答

ejs触ったこと無いので間違ってたらすみませんが、SNSエリア単体のejsを作成して、indexページにだけheader.ejsとかと同じ様にインクルード出来ないでしょうか?

ID:6YHnY5

ご解答ありがとうございます。
ご解答頂いた方法でも可能なのですが、
できるだけ、分割するファイルを少なく済ましたかったので、
footer.ejsだけで振り分けが可能か知りたくご質問させて頂きました。

説明不足で申し訳ございません。

ID:K/B0.j

ectでのやり方で申し訳ないのですが、参考まで…。
もしectでやるなら、_footer.ectのsnsエリアを表示させたい箇所に
<% content ’sns_area’ %>
と入れて、SNSエリアを表示させたいページのectファイルに
<% block ’sns_area’ : %>
SNSエリアの内容
<% end %>
と書くと、そのページにのみ表示されたりするのですが、こんな感じのをejs形式で書けませんでしょうか?
あっ、こういうのが↓のことならごめんなさい。

ID:6YHnY5

情報ありがとうございます。
まさにそのような機能を求めています。
恥ずかしながら「ect」というものも知らなかったので、
ejsでも似たような機能がないか調べてみます。

ID:S2ONzS さんの回答

フラグを使って判断するしかないと思うよ。index.ejs で var sns = true; とかして、footer.ejs でそのフラグを判定して表示する・しないの処理をする。

ID:6YHnY5

ご解答ありがとうございます。

ご解答頂いた通り、index側でフラグを立て、
footer.ejsで判定でできるんじゃないかと思うのですが、
書き方が間違っているのか、gulpがエラーで止まってしまいます。

もしよろしければ、下記、記述方法に間違いがあれがご指摘いただけないでしょうか。
inde.ejs側はsnsフラグを立てたあとでfooter.ejsをインクルード
<% var sns = true; %>
<% include common/_footer %>
footer.ejsでは
<% if (sns) { %>
<p>ここにSNSエリアを表示</p>
<% } %>
のように記述しております。
何卒、よろしくお願いいたします。

ID:S2ONzS

if (sns) は「sns が定義されてない場合はエラー」になる。けどこの場合は大丈夫なハズだがな…はて。var ナシでやってみ?

ID:6YHnY5

ありがとうございます。

var無しでも「sns is not defined」となりダメでしたorz
もし、その他にも思い当たる箇所がございましたら、
よろしくお願いいたします。

ID:S2ONzS

うーん。俺実際いまこれでやってて全然動いてるがなー。わからん。

ID:6YHnY5

やはりわかりませんよねorz

ttp://nantokaworks.com/node-advent2013-day20/

上記、ブログにあるような、
footer.ejs側に
<%- blocks.footer_scripts %>
index.ejs側に
<% block("footer_scripts", "<script src=’fuga.js’></script>") -%>
としてもエラーとなり上手くいきませんでした。

普通にインクルードや変数などの基本的な機能は使えているが、
ifやblockなどは全てエラーとなってしまっているようです。

引き続き、解答は募集しておりますので、
またなにかお気づきの点などございましたら、
よろしくお願いいたします。

ID:S2ONzS

index.ejs 内で var sns = ’test’; <%=sns%> でも出力されない? 出力されるようであれば、include で変数の受け渡しができてない事になる。

ID:6YHnY5

度々ありがとうございます。

試してみましたが、出力されました。
また、header.ejsもインクルードしているのですが、
読み込む側のファイルに
<% var title = "各ページのタイトル"; %>
header.ejsに
<title><%= title %></title>
としている箇所があるのですが、
そちらも問題なく出力されております。
ですので、include での変数の受け渡しもできてるっぽいんですよねm(__)m

ID:6YHnY5

色々試してみたのですが、
<% if (sns) { %>
<p>ここにSNSエリアを表示</p>
<% } %>
としていた場合に、
すべての呼び出し元のファイルに
<% var sns = true; %>
としていた場合はエラーになりませんでした。
ひとつでもsns変数が未定義だとエラーになってしまっているようです。
これだと結局振り分けできておりませんが、
ようやく少し進展した感じがします。

ID:S2ONzS

だから定義してないとエラーになるっつったじゃん…。
あといらない所は sns = false にすれば目的達成なんですけど。

ID:6YHnY5

申し訳ございません!
index.ejs以外をsns = falseにして、目標達成できました。
初心者な私に長々とお供していただき本当にありがとうございます。

ID:S2ONzS

でもなんか上のコメで block っつーのがあるね。使えるのかな。EJS ってドキュメントが整理されてなくてよくわかんないんだよな…。

ID:6YHnY5

今回色々調べてみたのですが、
情報量が少なく感じました。
もしご存知でしたら教えて頂きたいのですが、
gulp-ejsで書き出すと、「.html」で書き出されるのですが、
「.htm」で書き出すことってできますかね?

ID:S2ONzS

gulp-renameでできるんじゃないかな。詳しくはググってくれ。

ID:6YHnY5

gulp-rename調べてみます!
ありがとうございます!

ID:IE/GFt さんの回答

jadeじゃダメなの?

ID:6YHnY5

jadeを使用するか迷ったのですが、
既存コードに取り入れたかったので、
インデントで構造化しない、EJSを選択してみました。

最終更新日:2015-08-03 (1,815 views)

関連するトピックス

ページ上部に戻る