平衡点

2015/03/16

_ tDiary に bootstrap >= 3 を使う

tDiary のパッケージも更新できてちゃんと動いてるっぽいので、ついでに bootstrap >= 3 対応を試みてみた。 bootstrap(<= 2.x) 用のプラグインとして、既に tdiary-contrib/bootstrap-navi.rb at master · tdiary/tdiary-contrib があるわけで、これを元に幾つか修正を試みたり。

DOCTYPE を html5 に

必須ではなさそうだけれど、とりあえず試してみたり。とはいえ、全然検証していないので単に DOCTYPE 宣言等をちまちまと弄っただけであったりする。

#!/usr/bin/env ruby
# -*- mode: ruby; coding: utf-8 -*-
#
# doctype_html5.rb: update DOCTYPE as html5
#
# Copyright (c) 2015 Youhei SASAKI <uwabami@gfd-dennou.org>
# License: WTFPL
#
@conf.html_lang = 'ja'
def doctype
%Q[<!DOCTYPE html>]
end

既存のプラグインのアレコレがちゃんと期待通りに動作するのか、は定かではない。

bootstrap >= 3 対応

やることは以下の二つ

jquery を 1.9.1 に上げる
js の読み込み
bootstrap_navi の修正

このうち jquery を 1.9.1 にした事によって生ずる副作用に関しては、全然検証していないことにご注意。

#!/usr/bin/env ruby
# -*- coding: utf-8 -*-
# Show navi for twitter-bootstrap theme >= 3.x
#
# Copyright (c) KAOD Masanori <kdmsnr at gmail.com>
#               2015 Youhei SASAKI <uwabami@gfd-dennou.org>
# You can redistribute it and/or modify it under GPL.

def jquery_tag
    %Q[<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>]
end

def bootstrap3_init
  @conf['bootstrap3.navbar_class'] ||= "navbar-default"
  @conf['bootstrap3.show_site_name'] ||= false
  @conf['bootstrap3.show_nav_admin'] ||= false
  @conf['bootstrap3.show_search_form'] ||= false
end

def bootstrap3_navi(options = {})
  bootstrap3_init

  brand = ""
  if @conf['bootstrap3.show_site_name']
    brand += <<-EOS
      <a class="navbar-brand" href="#{h @conf.base_url}">#{h @conf.html_title}</a>
    EOS
  end

  menu = ""
  if @conf['bootstrap3.show_nav_admin']
    menu += <<-EOS
    #{navi_user.gsub(/span/, "li")}
    #{navi_admin.gsub(/span/, "li")}
  EOS
  else
    menu += <<-EOS
    #{navi_user.gsub(/span/, "li")}
  EOS
  end
  search = ""
  if @conf['bootstrap3.show_search_form']
    search += <<-EOS
      <form class="navbar-form" role="search"
        method="get" action="http://www.google.co.jp/search"
        onsubmit="$('#sitesearch').val($(location).attr('host'))">
        <input type="hidden" name="ie" value="UTF8">
        <input type="hidden" name="oe" value="UTF8">
        <input type="hidden" name="sitesearch" id="sitesearch">
        <input type="text" class="form-control" placeholder="検索" name="q">
      </form>
    EOS
  end

  <<-EOS
<nav class="navbar #{@conf['bootstrap3.navbar_class']} ">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      #{brand}
    </div> <!--/.navbar-header -->
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
       #{menu}
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>
          #{search}
        </li>
      </ul>
    </div><!--/.nav-collapse -->
  </div><!--/.container -->
</nav><!--/.navbar -->
EOS
end

add_header_proc do
  header = " "
  header +=<<-EOS
   <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"  type="text/css" media="all">
    <link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css"  type="text/css" media="all">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- [if lt IE 9]>
    <script src="extra_js/html5shiv.min.js" type="text/javascript"></script>
    <script src="extra_js/respond.min.js" type="text/javascript"></script>
   <![endif]-->
   <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
   <script src="extra_js/ie10-viewport-bug-workaround.js" type="text/javascript"></script>
  EOS
  if @conf['bootstrap3.navbar_class'] =~/fixed-top/
    header +=<<-EOS
<style type="text/css">
<!--
body{
    min-height: 2000px;
    padding-top: 70px;
}
-->
</style>
EOS
  else
    header +=<<-EOS
<style type="text/css">
<!--
body{
  padding-top: 20px;
  padding-bottom: 20px;
}
.navbar {
  margin-bottom: 20px;
}
-->
</style>
EOS
  end
  header
end

というわけで。日記を置いた所に bootstrap を展開して、上記プラグインを有効にすると bootstrap >= 3 が有効になる。ついでに、 html5shiv.js 、 respond.min.js 、 ie10-viewport-bug-workaround.js を日記ディレクトリの extra_js フォルダに放り込んでおく。そろそろコイツラいらないのかもしれないけれど、どうなんだろう。

あとは、ヘッダ・フッタを適宜変える。

ヘッダ:

<%= bootstrap3_navi %>
<div class="container">
  <h1>日記のタイトル、とか</h1>
</div>
<div class="container">
  <div class="main col-md-8 col-sm-12 col-xs-12">

フッタ:

</div><!-- /.main -->
  <div class="sidebar col-md-4 hidden-sm hidden-xs">
  …
  </div><!--/.sidebar -->
</div><!-- container -->

…とか?

tdiary.conf の設定項目は

@options['bootstrap3.navbar_class'] ||= "navbar-default"  # navbar の class 指定
@options['bootstrap3.show_site_name'] ||= false    # brand として @conf.html_title を表示する
@options['bootstrap3.show_nav_admin'] ||= false    # 「update.rb 」へのリンクを表示するか?
@options['bootstrap3.show_search_form'] = true     # Google のサイト内検索 を使うか?

としてある。