Tag JavaScript

JavaScript: gulpfile.js の autoprefixer 設定を package.json へ変更する

突然上記のようなエラーが出たので、解決方法をメモしておきます。 目次 gulpfile.js の autoprefixer 設定を package.json へ変更する まとめ gulpfile.js の autoprefixer 設定を package.json へ変更する gulpfile.js にある以下のコードをコメントアウトし、package.json の最後尾へ記述します。 gulpfile.js package.json まとめ autoprefixer の設定を行なっている gulpfile.js があれば、上記の変更を行う必要があります。 sass コンパイルに gulp を利用している方にとって、autoprefixer は欠かせない存在だと思うので、しっかり対応しておいてください。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

JavaScript: Gulp4 + EJS のインクルードファイルの相対パスを変数化する

EJS を使用し、header や footer 等の共通部分を外部から呼び出す場合、インクルード元のファイルの階層が違うと、相対パスのリンクが切れてしまいます。 今回は、あらゆる階層から呼び出されても階層にあわせて相対パスが変わるように、EJS ファイルに変数を割り当てる方法を説明したいと思います。 目次 Gulp4 + EJS のインクルードファイルの相対パスを変数化する まとめ Gulp4 + EJS のインクルードファイルの相対パスを変数化する 以下のような階層構造で、index.ejs と page.ejs がともに header.ejs をインクルードした場合のサンプルコードとなります。 ファイルツリー gulpfile.js site.json サイト全体で使用するデータです。主に head タグ内で利用するものを記述しています。 (例) で “Your Sitename” が出力 header.ejs index.ejs page.ejs まとめ EJS を導入する以上、目的は静的ファイルの大量生成となるはずなので、相対パスの変数化は必須です。 gulpfile.js さえコーディングしてしまえば次回以降使い回しがきくので、今回説明した作業はしっかりとおさえておきたいところです。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

JavaScript: Gulp で SCSS コンパイル後に FTP アップロードする

今回は非常にプロジェクトや、使いどころを選びますが、ウォッチしている SCSS に変更があった場合、コンパイルを行い、生成された CSS ファイルを FTP アップロードする方法をメモしておきます。 目次 Gulp で SCSS コンパイル後に FTP アップロードする まとめ Gulp で SCSS コンパイル後に FTP アップロードする 下記のパッケージをインストールし、gulpfile でタスクを設定します。 path.src に対象となる scss ファイルがあるフォルダを、path.dest に css ファイル出力先のフォルダを指定します。 ※下記 gulpfile では、CSS の minify は行ってますが、css ファイルのみアップロードするタスクとなっています。 npm install gulpfile.js まとめ 今回の説明は FTP アップロードという利用用途が限定されてしまう方法です。 利用例としては、WordPress のテーマファイルに SCSS を利用し、本番環境で確認しながら スタイル修正行い、頻繁に CSS アップロードを行うような場合、非常に有効な方法かと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

JavaScript: Gulp, EJS, SASS, browser-sync の gulpfile サンプル(Gulp4.0対応)

Web アプリの HTML フロントモック開発プロジェクトを Gulp4.0 対応にし、gulpfile.js を書き換えました。 EJS(HTML)/SCSS でのアプリ UI 作成等にご利用ください。 目次 Gulp, EJS, SASS, browser-sync の gulpfile サンプル(Gulp4.0対応) まとめ Gulp, EJS, SASS, browser-sync の gulpfile サンプル(Gulp4.0対応) プロジェクトフォルダ構成 public フォルダに静的ファイルが出力されます。 package リスト autoprefixer -> CSS ベンタープリフィックス自動付与 browser-sync -> ファイル更新時にホットリロード cssnano -> CSS を Minify する del -> ファイル削除に使用 gulp -> タスクランナー gulp-ejs -> EJS コンパイル gulp-notify -> 通知 gulp-plumber -> エラー時の処理停止を回避する gulp-postcss -> CSSパーサー(autoprefixer,cssnano) gulp-rename -> 出力ファイル名変更 gulp-replace -> HTML head の CSS にタイムスタンプを追加し書き換える gulp-sass -> SASS コンパイル npm install package.json scripts 追加 gulpfile.js 実行 public フォルダのクリーン&ファイルコピー EJS SASS ウォッチ まとめ Gulp4.0 アップデートにより gulpfile の更新が必要となりましたが、3.9 と比べ直列・並列処理が実装され、コード全体の見通しもよくなりました。 ちょっとしたフロント開発なら、このプロジェクトでサクサクと進められるので、必要なモジュールを追加しご利用いただければと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

HTML: よく使う EJS のサンプルコード

必要に迫られ、今さらですが Node.js で HTML テンプレートエンジンの EJS を導入しました。 今回は EJS のよく使うサンプルコードをメモしておきます。 目次 よく使う EJS のサンプルコード まとめ よく使う EJS のサンプルコード 基本 の中で JavaScript コードを実行することができます。 コメント EJS コメントです。コンパイル時 HTML には出力されません。 インクルード 静的 HTML 出力として EJS を使う場合、主な用途はインクルードだと思います。 以下は index.ejs から _include フォルダ内の head.ejs (ejs 拡張子は省略可)をインクルードし headValue の値を渡すサンプルです。 index.ejs head.ejs 出力 文字列を出力する場合と、HTML 要素を出力する場合で2つの記法に分かれます。 (文字列を出力したい場合) (html 要素を出力したい場合) ループ おもにリスト等で利用する機会が多いかと思います。 まとめ ウェブサイトやウェブアプリの仕様等を HTML でプレゼンしたい場合、EJS のような HTML テンプレートエンジンが役に立ちます。 あらかじめ EJS で再利用性の高い要素をコンポーネント化しておけば、少ないコーディングで HTML 出力ができ、作業効率アップ、コストダウンにつながるかと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

JavaScript: Bootstrap で「印刷する」ボタンを設置する

Web ブラウザで印刷を行う場合、JavaScript で簡単に実現することができます。 今回は Bootstrap ボタンで「印刷」ボタンを設置する方法をメモしておきます。 目次 Bootstrap で「印刷する」ボタンを設置する まとめ Bootstrap で「印刷する」ボタンを設置する JavaScript の print() を実行するだけでブラウザの「印刷」プレビューを呼び出すことができます。 まとめ ペーパーレスの時代ですので、印刷ボタンがある Web サービスはあまり見かけませんが、メディアクエリの print と併用することで、業務管理系のサービス等に活用できるかと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

JavaScript: イベントバブリングによる親要素のイベント実行を停止する

親要素に設定されているクリックイベントにより、リンクやボタン等のクリックイベントが実行されない、先に親要素のイベントが発火してしまう、という問題があります。 今回は、イベントが設定されているネストされた要素の、親要素に設定されているイベントを停止する方法を説明します。 目次 イベントバブリングで親要素のイベント実行を停止する まとめ イベントバブリングで親要素のイベント実行を停止する 通常、イベント発生時には DOM ツリーのルート (Window) からイベント発生要素を探索(キャプチャ)し、発生要素を特定(ターゲット)後、再びルート (Window) まで遡り(バブリング)ます。 以下のサンプルでは、外側 div (#wrapper)、内側 div (#content) 両方にクリックイベントが設定されています。 サンプル HTML function divClick 内の e.stopPropagation() により、内側要素 (div#content) クリック時、そこでイベントバブリングが停止し、親要素 (div#wrapper) のクリックイベントは無効となります。 まとめ このように、JavaScript のイベントバブリングをコントロールすることで、ネストされた要素(外側)のイベントを停止したり、優先順位を思いどおりに設定が可能です。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Node.js: シェルコマンドを実行する

前回は Node.js を使ってファイルを操作する一覧をご紹介しました。 ファイルの操作ができると、それだけで色々と出来ることが増えていきます。簡単に色々とやれてしまうのが Node.js のいいところです。 今回は Node.js を使ってシェルコマンドを実行する方法を説明したいと思います。 目次 Node.js でシェルコマンドを実行する まとめ Node.js でシェルコマンドを実行する サンプル shellHelper.js shellHelper.js を使用すれば複数行のシェルコマンドも簡単に実行できます。 まとめ Node.js は非同期型のイベント駆動モデルを使用したサーバサイド環境ですので、同期的にシェルコマンドを実行する場合には、ある程度の工夫が必要です。 とは言っても、ちょっとファイル操作して、その後コマンドを叩く程度であればそこまで頑張る必要もありません。 ES6 も浸透してきたので、今後は JavaScript に関しても記事を投稿していこうと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Node.js: よく使うファイル操作の一覧

Node.js はローカルでのちょっとした作業も、シンプルな記述で実行できるのでとても便利です。 ファイルの操作も簡単に実行できてしまうので、うまく利用すれば日々のルーチンワークを半自動化することも可能です。 今回は Node.js でよく使用するファイル操作をまとめて一覧にしました。 目次 ファイルを読み込む ファイルを保存する ファイルをコピーする ファイルを削除する まとめ ファイルを読み込む readFile() readFileSync() ファイルを保存する writeFile() ファイルをコピーする createReadStream().pipe() ファイルを削除する unlink() フォルダ削除 フォルダを内包するフォルダ・ファイルごとに削除するためには、パッケージ管理ツール npm から rmdir をインストールします。 rmdir インストール 使用例 まとめ Node.js を使って自分専用のユニークなツールを作っていると、いつの間にかアプリに近いものになってしまっている楽しさがあります。 今のところ、面倒なローカルでの処理をワンライナーで実行する目的で使用していますが、そのうちがっつりとアプリを作ってみたいと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

JavaScript: エスケープシーケンス一覧

本日は手短に JavaScript エスケープシーケンスの自分用メモです。 JavaScript エスケープシーケンス一覧 エスケープシーケンス意味 ¥bバックスペース ¥t水平タブ ¥v垂直タブ ¥n改行 ¥r復帰 ¥f改ページ ¥’シングルクオーテーション ¥”ダブルクオーテーション ¥¥¥文字 ¥0NULL文字 ¥xXX2桁のXX(16進数)が表すLatin-1文字 ¥uXXXX4桁のXXXX(16進数)が表すUnicode文字 ¥ は \(バックスラッシュ)でも大丈夫です。 まとめ Swift ばかり書いていると、エスケープシーケンスのような基本的なことをよく忘れてしまいます。 最近 Node.js の JavaScript を書いていたとき、つい行末にセミコロンを入れ忘れてしまい、間違いに気づくのに数分無駄にしてしまいました(笑) ・・・笑い事じゃありませんね。。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。