Skip to content

Nunjucks + gulp で静的 HTML をモジュール化する

Nunjucks + gulp で静的 HTML をモジュール化する published on Nunjucks + gulp で静的 HTML をモジュール化する へのコメントはまだありません

やりたいこと

概要

静的 HTML を複数ページ作成するときに、共通部分(ヘッダーとかフッターとか)をコピペしたくない。

「PHP とか使って include とかすればいいじゃん」

ていう意見もあるんだけど、動作確認に web サーバー立てるの面倒だし、単なる HTML で済むなら HTMLで 完結させたい。

細かい背景

gulp-ect を使って、やりたいことは大体実現出来ていたんだけど、以下の2つの理由により、別の方法に切り替えたいと思った。

  • ECTgulp-ect も最終更新日が3年前
  • ファイルのパスを埋め込む(後述)、というののやり方が分からなかったし出来なさそう

やったこと(TL;DR)

さきに結論だけ書いておくと、

  • Nunjucks というテンプレートエンジンの記法で、ファイルを作成
  • gulp-nunjucks-render という gulp のプラグインを使って、HTML を出力
    • gulp-data という微妙な名前のも併用

という方法で実現した。

Continue reading Nunjucks + gulp で静的 HTML をモジュール化する

jQueryでtooltip

jQueryでtooltip published on jQueryでtooltip へのコメントはまだありません

自分用メモ。とりあえず手軽にtooltipを使いたくてちょっと調べてみた。

(念のため書くけど、tooltipって対象となるテキスト(別に画像でも何でも良いけど)の上にマウスを置くと、説明文とかがちょこっと出てくる奴。)

jQuery + tooltip で検索すると、「jQueryで使えるtooltipのプラグイン30」みたいなサイトが結構出てくるんだけど、正直どれを選んで良いかよく分からない。しかし、このサイト(英語)はコードサンプルやデモなども載っていてかなり分かりやすい。

自分はSimpletipというのにした。

 

 

IE8にはJavaScriptデバッグ機能が標準で・・・

IE8にはJavaScriptデバッグ機能が標準で・・・ published on IE8にはJavaScriptデバッグ機能が標準で・・・ へのコメントはまだありません

Firefoxの場合はFirebugという高機能なJavaScriptデバッガがあるので困らないけど、Internet Explorerの場合は昔懐かしのMicrosoft Script Debugger位しか無いのかなぁと思ってたら、IE8からは標準でツールが付いていて、F12キーでいつでも呼び出せる事に気づいた。

これは便利。

evalと構文エラー

evalと構文エラー published on evalと構文エラー へのコメントはまだありません

AJAXでは、以下のようにサーバーから返されたJSONをevalで元に戻すみたいな事を良くやると思う。

var result = eval("(" + responseText + ")");

サーバー側で何らかのエラーが発生して、responseTextにエラーメッセージが書かれてたりすると以下のようなエラーが発生する。

エラー: 構文エラーです。

最初は「構文的には何もおかしくないんだけどなぁ…」と結構悩んだけど、そこに書かれているJavaScriptの構文ではなくて、evalしている文字列がJavaScriptの構文じゃないって事だって分かった時は少し感動。

$(‘foo’).get is not a function

$(‘foo’).get is not a function published on $(‘foo’).get is not a function へのコメントはまだありません

引き続きJoomla!のコンポーネント作成中。

MooToolsのリファレンスを見つつ、以下のようなJavaScriptを書いた。

var foovalue = $('footextbox').get('value')

そしたら $(‘foo’).get is not a function ってエラーが出た。(FirefoxのプラグインFirebugを使ってるのでIEだと違うエラーかもしれないけど。)

$(‘foo’)で取得できるのはgetElementByIdで取得するのと同じくDOMオブジェクトなので、以下のように普通にDOMのエレメントを使えばいいらしい。

var foovalue = $('footextbox').value

getやその他のMooToolsのメソッドを使うにはそのDOMオブジェクトへの参照を取得すればいいっぽい。

MooTools

MooTools published on MooTools へのコメントはまだありません

Joomla!ではMooToolsというJavaScriptのフレームワークを使っているらしい。
コンポーネント作成しててビューをいじってる時にJHTMLのコードを見てて気づいた。$(‘element’)とかの記法はprototype.jsと同じだし取っつきやすい。
他のフレームワークとの比較とかはよく分からないけど、Joomlaのコンポーネントを作るなら覚える必要がありそう。とはいえ、それ程多機能でもないし、リファレンスを見ながらやれば問題無さそう。

久々にAJAX

久々にAJAX published on 久々にAJAX へのコメントはまだありません

最近、とあるプロジェクトにヘルプで関わる事になった。一言で言うとPHPのWebシステム。

前職ではWeb系のシステムの開発をメインでやっていたけど、ここ1年半くらいはインフラ周りがメインで、PHPのシステムにもちょっと関わったけど、symfonyをちょろっと使うくらい。しかし、今回のシステムは結構AJAXがバリバリ使われている今時のWebシステム。

前職ではAJAXも使っていたけど、当時(設計は2年以上前)はprototype.js+自前のライブラリでガリガリやっていて、それでも便利だなぁとは思ってたんだけど、今回のプロジェクトではjQueryなる物を使ってるらしい(日本語ページ)。

ちょっと見たところ結構便利。やっぱり2年も経つと随分色々便利になってるなぁと思った。

使ってみて、何かネタがあったらこのブログにもちょっと書こうかと思う。

Webページ上で吹き出し

Webページ上で吹き出し published on Webページ上で吹き出し へのコメントはまだありません

自分用メモ

1〜2年前、とあるWebシステムのプロジェクトで、オンラインヘルプ機能を付ける事になった。ボタンとか値の入力テキストボックスとかに「?」ボタンを表示して、その上にマウスを乗っけると吹き出しが表示されてヘルプのテキストが表示されるというもの。

その時見つけたのが以下の2つ。今はもっとカッコいいのとか簡単なのとかが色々ありそうだけど。

最近、こういうのはあまり触らなくなったなぁ。

CSS、複数のクラスが指定された要素を扱う

CSS、複数のクラスが指定された要素を扱う published on CSS、複数のクラスが指定された要素を扱う へのコメントはまだありません

以下のようなCSSの複数のクラスが指定されたタグを考える。
<div class=”foo bar” >
あるクラスを指定されたタグを取得するには
prototype.jsのdocument.getElementsByClassName
を使えばいいけど、複数クラスを指定されている場合には上手く行かなかった(最近のバージョンでは違うかもしれないけど)。
なので、このページに書かれていることを参考にした。

JavaScript複数のメニューを連動させる

JavaScript複数のメニューを連動させる published on JavaScript複数のメニューを連動させる へのコメントはまだありません

Webシステムでよくあるのが、2つのプルダウンメニューを連動させるヤツ。1つめのプルダウンが国名で、それで「日本」を選択すると2番目のプルダウンが47都道府県になり、「アメリカ」を選択すると50州になるというもの。
それをJavaScriptで実現する方法が簡単にまとまっていたページ。そしてそれを若干改良したページ
要は、2次元の連想配列を用意して、その値を用いてJavaScriptで動的に2番目のプルダウンの中身を変えるという物。特に難しい事はやってない。

Continue reading JavaScript複数のメニューを連動させる