縦書き文庫の開発日誌

3年ぐらい前に書いた「カンタン、縦書きブログの作り方」という記事、未だにアクセスがあって嬉しいのですが、古いバージョンのnehan.jsを使った記事なので、質問されるたびに古いソースを読み返さなくちゃいけない……バージョンを確認しなくちゃいけない……

「１ですか、２ですか、３ですか」

ドラクエじゃあるまいし……

後方互換を切り続けてきた報いとはいえ、そろそろしんどくなってきました。

そこでnehan.js(version4系列）にあわせて過去記事を全面的に書き換えました。

・縦書き文庫の開発日誌 カンタン！縦書きブログ（縦書きHTML）の作り方

・縦書き文庫の開発日誌 縦書き、横書き自由自在！ あなたのブログをページ送りで表示させる最も簡単な方法

・縦書き文庫の開発日誌 縦書きブログの作り方（FC2ブログ編）

古い記事が必要な人がいるかもしれないので、念のためコメントアウトで残してあります。画面には表示されませんが、ページのソースを表示したら読めます。読む人いるのかな……

あとコメント欄に古いバージョンへの質問が残っていてカオスな感じですが、2013年5月以前のコメントは全てバージョン1～3系列への質問です。

タグ : nehan

はてなブログをjquery.nehanでページ送りの縦書きブログにしてみるデモとして「anti scroll」というブログを作ってみました。

jquery.nehanは縦書きだけじゃなく横書きでも使えるし、見開きも段組表示もどちらもOKです。

設定すれば、HTMLのアウトライン構造を目次で表示させることも出来ます。

詳しくはjquery.nehan tutorialを参照してください。

はてなブログは奇麗なHTMLソースを吐き出すので、最新バージョンのnehan.jsと相性が良いです。

そのうち、はてなブログでも記事を書くかもです。

雑誌とかでよく見かけるDropCapsという表示が出来るようになりました。

横書きだとこんな感じで……



縦書きだとこんな感じになります。

今までオブジェクトのデバッグは単体行で書かなくちゃいけないかと思って、

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

　最近知ったjs task runnerのGruntですが、なるほど便利。

　今までは拙作テンプレートエンジン（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 が使えそうだけど、コピー対象のファイルを、親ディレクトリを含めてコピーしちゃうのと、それを回避するやり方がよくわからなかったので保留中。

作品画面の「表示設定」からページのレイアウトを設定できるようになりました。

「単一ページ」「見開き」「二段組」「見開き二段組」の中から選択できます。



ちなみに横書きで二段組とかをやると、意味のないレイアウトになるのですが、そういうことも一応できます。