2013'05.09 (Thu)
nehan4のリリースに伴い過去記事を修正
3年ぐらい前に書いた「カンタン、縦書きブログの作り方」という記事、未だにアクセスがあって嬉しいのですが、古いバージョンのnehan.jsを使った記事なので、質問されるたびに古いソースを読み返さなくちゃいけない……バージョンを確認しなくちゃいけない……
「1ですか、2ですか、3ですか」
ドラクエじゃあるまいし……
後方互換を切り続けてきた報いとはいえ、そろそろしんどくなってきました。
そこでnehan.js(version4系列)にあわせて過去記事を全面的に書き換えました。
古い記事が必要な人がいるかもしれないので、念のためコメントアウトで残してあります。画面には表示されませんが、ページのソースを表示したら読めます。読む人いるのかな……
あとコメント欄に古いバージョンへの質問が残っていてカオスな感じですが、2013年5月以前のコメントは全てバージョン1~3系列への質問です。
「1ですか、2ですか、3ですか」
ドラクエじゃあるまいし……
後方互換を切り続けてきた報いとはいえ、そろそろしんどくなってきました。
そこでnehan.js(version4系列)にあわせて過去記事を全面的に書き換えました。
・縦書き文庫の開発日誌 カンタン!縦書きブログ(縦書きHTML)の作り方
・縦書き文庫の開発日誌 縦書き、横書き自由自在! あなたのブログをページ送りで表示させる最も簡単な方法
・縦書き文庫の開発日誌 縦書きブログの作り方(FC2ブログ編)
古い記事が必要な人がいるかもしれないので、念のためコメントアウトで残してあります。画面には表示されませんが、ページのソースを表示したら読めます。読む人いるのかな……
あとコメント欄に古いバージョンへの質問が残っていてカオスな感じですが、2013年5月以前のコメントは全てバージョン1~3系列への質問です。
タグ : nehan
2013'05.02 (Thu)
はてなブログをjquery.nehanで縦書きページ送りのブログにする
はてなブログをjquery.nehanでページ送りの縦書きブログにしてみるデモとして「anti scroll」というブログを作ってみました。
jquery.nehanは縦書きだけじゃなく横書きでも使えるし、見開きも段組表示もどちらもOKです。
設定すれば、HTMLのアウトライン構造を目次で表示させることも出来ます。
詳しくはjquery.nehan tutorialを参照してください。
はてなブログは奇麗なHTMLソースを吐き出すので、最新バージョンのnehan.jsと相性が良いです。
そのうち、はてなブログでも記事を書くかもです。
jquery.nehanは縦書きだけじゃなく横書きでも使えるし、見開きも段組表示もどちらもOKです。
設定すれば、HTMLのアウトライン構造を目次で表示させることも出来ます。
詳しくはjquery.nehan tutorialを参照してください。
はてなブログは奇麗なHTMLソースを吐き出すので、最新バージョンのnehan.jsと相性が良いです。
そのうち、はてなブログでも記事を書くかもです。
2013'04.01 (Mon)
ChromeにおけるConsoleオブジェクトを使ったデバッグ覚書
今までオブジェクトのデバッグは単体行で書かなくちゃいけないかと思って、
とか書いてた……けど、なんか違うんだろうなあと思って調べたらこんな風に書けるらしく。
ちなみに「
しかも、
他にも「
やっぱり不精せずに基本的なドキュメントは見ておかないといけないなあと思いました。
参考リンク:
Using the Console - Chrome Developer Tools — Google Developers
var obj = {name:"taro", age:10};
console.log("taro is");
console.log(obj);
とか書いてた……けど、なんか違うんだろうなあと思って調べたらこんな風に書けるらしく。
var obj = {name:"taro", age:10};
console.log("taro is %O", obj);
ちなみに「
%O」だとjavascriptのオブジェクトを表示で「%o」だとDOM Elementが表示できるらしく。
console.log("first child: %o", document.body.firstElementChild);
しかも、
console.dir関数を使ったり、あるいはDOM Elementを「%O」としてキャプチャすると、DOM Elementをjavascriptオブジェクトに変換して表示してもくれちゃうという。
// DOMをJavascriptオブジェクトとして表示
console.dir(document.body.firstElementChild);
// %O で表示することも出来る
console.log("first child: %O", document.body.firstElementChild);
他にも「
console.timeStamp("start A")」みたいにすることで、デバッガのTimelineに特定の処理の実行タイミングをマークさせることが出来たり……やっぱり不精せずに基本的なドキュメントは見ておかないといけないなあと思いました。
参考リンク:
Using the Console - Chrome Developer Tools — Google Developers
2013'03.26 (Tue)
Gruntの覚え書き
最近知ったjs task runnerのGruntですが、なるほど便利。
今までは拙作テンプレートエンジン(jingoo)でスクリプトの断片をrawincludeするテンプレートを作って結合していたのですけど、今後はGruntで統一しようと思いました。
Gruntfile.jsでお仕事を定義した後は、こんな感じでMakefileがシンプルに!
ここから覚書です。
・node.jsのインストールとnpmのインストール、gruntのインストールは省略。
・ホームディレクトリ(後述するが要注意)で、
npm install grunt-contrib-(plugin名) --save-dev
として公式のpluginを入れる。
とりあえず、grunt-contrib-jshint、grunt-contrib-concat、grunt-contrib-uglify あたりがマスト。
・プロジェクトディレクトリをつくり、npm initして、package.jsonを作る。
・プロジェクトディレクトリに、先ほどインストールしたgruntプラグインのディレクトリ(~/node_modules)へのシンボリックリンクを作成。こうすると他のプロジェクトでも同じプラグインが使え、何度もディレクトリごとにインストールする必要がなくなる。
でもこうやって一つの場所にインストールして、グローバルに参照するやり方は、公式では非推奨とされている。それぞれのプロジェクトごとに要求するプラグインのバージョンが異なるかもしれないから、ということ。
でも僕みたいにnode.jsでサーバサイドのコードを書くわけじゃなく、単にクライアントサイドのjsを管理したい人にはあんまり関係ないと思われる。
・Gruntfile.jsをごりごりと書く。
後は、先に示したMakefileで、make normal とすれば、(pkg.name).js、make min とすれば(pkg.name).min.js の出来上がり。
ちなみに、デプロイに関しては grunt-contrib-copy が使えそうだけど、コピー対象のファイルを、親ディレクトリを含めてコピーしちゃうのと、それを回避するやり方がよくわからなかったので保留中。
今までは拙作テンプレートエンジン(jingoo)でスクリプトの断片をrawincludeするテンプレートを作って結合していたのですけど、今後はGruntで統一しようと思いました。
Gruntfile.jsでお仕事を定義した後は、こんな感じでMakefileがシンプルに!
all:normal min
jshint:
grunt jshint:normal
normal:
grunt concat:normal
min:
grunt uglify:normal
grunt concat:min
ここから覚書です。
・node.jsのインストールとnpmのインストール、gruntのインストールは省略。
・ホームディレクトリ(後述するが要注意)で、
npm install grunt-contrib-(plugin名) --save-dev
として公式のpluginを入れる。
とりあえず、grunt-contrib-jshint、grunt-contrib-concat、grunt-contrib-uglify あたりがマスト。
・プロジェクトディレクトリをつくり、npm initして、package.jsonを作る。
・プロジェクトディレクトリに、先ほどインストールしたgruntプラグインのディレクトリ(~/node_modules)へのシンボリックリンクを作成。こうすると他のプロジェクトでも同じプラグインが使え、何度もディレクトリごとにインストールする必要がなくなる。
でもこうやって一つの場所にインストールして、グローバルに参照するやり方は、公式では非推奨とされている。それぞれのプロジェクトごとに要求するプラグインのバージョンが異なるかもしれないから、ということ。
でも僕みたいにnode.jsでサーバサイドのコードを書くわけじゃなく、単にクライアントサイドのjsを管理したい人にはあんまり関係ないと思われる。
・Gruntfile.jsをごりごりと書く。
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// コードチェックするタスク
// grunt jshint:normal で、src以下にあるjsをチェック。
// ただし'snipet'と含まれるものはスキップさせる。
jshint:{
normal:{
src:[
"src/*.js"
],
// snipet.jsは個人的なゴミjsなのでスキップ
filter:function(filepath){
return filepath.indexOf("snipet") < 0;
}
},
options:{
"smarttabs":true // タブ数に関するエラーについては大目に見る
}
},
// コードを結合するタスク
// grunt concat:normal で、(pkg.name).js をbuildディレクトリに出力
// grunt concat:min で、(pkg.name).min.js をbuildディレクトリに出力
concat:{
normal:{
files:{
"build/<%= pkg.name %>.js":[
"COPYING",
"src/aaa.js",
"src/bbb.js"
]
}
},
min:{
files:{
"build/<%= pkg.name %>.min.js":[
"COPYING",
"obj/<%= pkg.name %>.cjs"
]
}
}
},
// コードをminifyするタスク
// grunt uglify:normal で、objディレクトリに (pkg.name).cjs を出力させる
uglify: {
normal: {
src: 'build/<%= pkg.name %>.js', // このファイルを
dest: 'obj/<%= pkg.name %>.cjs' // このようなファイル名でminifyする。
},
options: {
// minify処理をした時刻をヘッダに付け足す
banner: '/*!<%= pkg.name %><%= grunt.template.today("yyyy-mm-dd") %>*/\n'
}
}
});
// 使用するプラグインをロード。もちろん先にnpm installしてないと駄目。
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
// grunt とだけ押されたときに発動するコマンドを指定。
grunt.registerTask('default', ['concat']);
};
後は、先に示したMakefileで、make normal とすれば、(pkg.name).js、make min とすれば(pkg.name).min.js の出来上がり。
ちなみに、デプロイに関しては grunt-contrib-copy が使えそうだけど、コピー対象のファイルを、親ディレクトリを含めてコピーしちゃうのと、それを回避するやり方がよくわからなかったので保留中。


