日付や時間などの<option>を量産するjsスニペット(ejsを例に) - Qiita
ejsとかpugでのselect量産をできるだけ楽したい。 ES2015と、ejs等のテンプレートエンジンを前提とした記事です。 キモとなるのは配列の作り方。 やりたいこと こんなHTMLがほしい。<option>全部書くのはやりたくない <select> <option value="2017">2017</option> <option value="2016">2016</option> <option value="2015">2015</option> <!--中略--> <option value="1908">1908</option> </select> <select> <option value="00:00">00:00</option> <option value="00:30">00:30</option> <option value="01:00">01:00<
ejsでjsonを読み込みmeta情報を一括管理 - Qiita
編集ファイル gulpfile.js _head.ejs（パーシャル化） meta.json 各個別ページのejsファイル 先ず、gulpfile.jsに設定を記述する。 jsonファイルを読み込むのに必要な「fs（File System）」を記述。元々あるものなのでコマンドプロンプトなどでインストールする必要はない。 タスクの記述内に変数jsonにmeta.jsonを読み込んだJson.parseを代入し、pipeで変数jsonを読み込む。 // gulp core var gulp = require('gulp'); //fsファイルの読み込み var fs = require( 'fs' ); var ejs = require("gulp-ejs"); var rename = require("gulp-rename"); gulp.task('ejs', function()
テンプレートエンジンejsの使い方まとめ | YE-TECH
ejsのメリット 最初にejsを使うメリットを以下にまとめます。 htmlをパーツ化してヘッダーやフッターなどを別ファイルに作れる変数を設定して、それを反映したhtmlが生成できるhtml内でループ処理を書いて楽に記述できる htmlを大量に量産したり、ちょっと細かいことしてhtmlを生成したい時にejsは便利です。 ejsと他のテンプレートエンジンの比較 pugやslim、Middlemanなどのhtml作る時に使う他のテンプレートエンジンとも比較しました。 htmlの記述の中に、<%= ejs %>のように記述して書くので簡単（phpと同じ感じ）文法がjavascriptなのでejsの学習コストが少ない学習コストが少ない分、他のテンプレートエンジンに比べて機能が少ない ejsは他のテンプレートエンジンよりもシンプルに扱うことができます。 ejsの導入 ejsを使用するには、Nodejs
HTML: よく使う EJS のサンプルコード | siro:chro
[code] <%# ここは EJS コメントです %> [/code] インクルード 静的 HTML 出力として EJS を使う場合、主な用途はインクルードだと思います。 以下は index.ejs から _include フォルダ内の head.ejs （ejs 拡張子は省略可）をインクルードし headValue の値を渡すサンプルです。 index.ejs [code] <% var headValue = { title: 'sirochro', desc: 'This is sirochro page.', author: 'sirochro' }; %> <%- include('_include/head', {value: headValue}) %> [/code] head.ejs [code]
Gulp + EJS + JSONを使用してhtmlファイルを量産する方法 | ブログ | Glatch（グラッチ） - 夫婦で活動するフリーランスWeb制作ユニット
似たようなhtmlを複数ページ制作するような案件があると思いますが、地道に複製して制作するのは非効率で管理も面倒でミスもしやすいです。 そこで今回はGulpとEJSというテンプレートエンジンを使用してJSONファイルに設定した値を読み込み、複数のhtmlファイルを量産する方法を備忘録を兼ねてご紹介します。 今回使用するもの 今回はGulpを使用してEJSを動かします。Gulpの導入方法などは検索するとたくさん記事が出てきますので、そちらをご確認下さい。 テンプレートエンジンであるEJSと、生成したファイルごとに名前を付与するリネーム用のプラグインを導入します。 gulp-ejs gulp-rename pages.json template.ejs gulp.js 各ファイルの設定 pages.json ユニークな値を格納するJSONファイルは下記の通りです。 { "pages": [ {
テンプレートエンジンEJSで使える便利な構文まとめ - Qiita
※gulp-ejsでのビルドを想定しています。 EJSでできること 数や文字列や配列やオブジェクトの宣言と処理(JavaScriptと同じ) HTMLへの値の展開 ループと条件分岐 外部ファイルの読み込みとパラメータの引き渡し <% %>の種類 <% %> このタグの内側はJavaScriptワールドになる。HTMLとしては出力されない
gulp-ejs でHTMLの編集をカンタンにする – Syngram
|^・ω・)/＜ こんにちは、ひらのです！ 今回はHTML関連のお話です。 webページを作成しているとHTMLファイルがたくさん必要になることもあるかと思います。 そんな時に「EJS」を使うと楽に作業ができるようになるかもしれません。 今回は gulp を利用する想定で話を進めます。 gulpの導入・利用方法は賢人達がたくさんの情報を残してくれているので割愛します。 検索エンジンで「Gulp 使い方」って検索するときっとすぐ見つかります。 EJS とは 本家ページは下記からドウゾ EJS 「Effective JavaScript templating」略して「EJS」です。 「テンプレート」を作って、HTMLを効率よく生成しよう! ってものです。 どんな時に役に立つ? 共通のナビゲーションなどを利用する HTMLファイルが5個以上になる（自分の限界） 共通部分の変更をした際に、全ファイ
GulpでテンプレートエンジンのEJSを使ってみた
EJS – JavaScript Templates 最近、静的なテンプレートを生成する方法としていろいろ試行錯誤していたのですが、JavaScriptで静的なhtmlを生成できるEJSというものを知り、使ってみることにしました。 EJSとはEJS(Embedded JavaScript)は「.ejs」という拡張子のファイル内にあるhtmlにJavaScriptを埋め込む形で使用します。EJSを利用するには「Node.js」が必要になります。EJSにはGulp用のEJSがあり、Gulpで使うことができます。 EJSで何ができるかざっくりとですが、EJSは下記のようなことができます。 ループや条件分岐。共通ファイルの読み込み(インクルード)やパラメータの引き渡し。JavaScriptと同様に、数、文字列、配列、オブジェクトなどを扱える。htmlファイルへの出力。gulp-ejsを導入するEJ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://web-and.me/classification/