Chienomi

サイトの大幅手直し

ウェブサイト開発

ウェブサイトに直すべき点が大量にあったためにかなり手をいれることになった。

CSSグラデーション、デザインの修正

まずベンダープレフィクスを用いたCSS3のグラデーションを入れた。

/* headline level2 decoration */ h2 { width: 100%; background: -moz-linear-gradient(left -65deg, #fff, #acf); background: -webkit-gradient(linear, left top, right bottom, from(#fff), to(#acf)); }

これはAki SI&Eのほうのもの。これを使い、サイトロゴは透過画像として（新規に作成した）、背景にグラデーションを入れた。画像はフォアグラウンドのイメージ

/* Header container (Top position of Main container) */ #Header { background: #fff; padding: 0 1.3em; max-height: 125px; } #SITE_REASONSET #Header img.sitebanner { margin-right : 40%; width: 50%; } #SITE_REASONSET #Header { background: -moz-linear-gradient(left -65deg, #f0f8ff, #acf); background: -webkit-gradient(linear, left top, right bottom, from(#f0f8ff), to(#acf)); }

SI&Eのほうはメインコンテナが950pxとっているのに切り替えを750pxにしていたのでこれも修正。

Aki SI&Eのほうはキャプチャのスタイルを変更。

h1 { border-top : double 5px; border-bottom: double 5px; color: #39f; margin-left: -1em; margin-right: -1em; margin-top: -0.8em; text-align: center; }

マイナスのmarginはあまり見ない気がする。このようなデザインはほとんど見ることはないが、なかなかパッとみてすっきりと見えて目を引く良いデザインだと思う。このために、テキストインデントのマイナスは消した。テキストインデントのマイナスは一行目にのみ適用されるらしい（brで改行すればその都度適用されるのだろうが、折り返しには適用されない）。

サイトバーウィジットの変更

AKi SI&Eが先行で変更され、それがReasonSetに反映され、さらにReasonSetで追加された機能がAki SI&Eのほうに入った。

<!-- Sub column -->

<!-- Menu -->
-*- Menu -*-
<%= ENV["SUBCOLUMN_CONTENT"] || "" %>
<!-- Notes if any --> % unless DOC.notes.empty?
-*- Notes -*-
  1. <%= note %>
% end <!-- Navigation links with PureDoc and PureBuilder template --> % if DOC.meta["link"] && ( DOC.meta["link"]["next"] || DOC.meta["link"]["content"] || DOC.meta["link"]["prev"] || DOC.meta["link"]["start"] )|| ENV["reasonset_link_content"] || ENV["reasonset_link_start"]
-*- Referrances -*-
  • <a href="<%= ENV["baseuri"] + "/" + ( ENV["reasonset_link_start"] || DOC.meta["link"]["start"] ).sub(/.pdoc$/, ".html") %>">First article
  • <a href="<%= ENV["baseuri"] + "/" + ( ENV["reasonset_link_contents"] || DOC.meta["link"]["content"] ) %>">TOC of articles
  • <a href="<%= ENV["baseuri"] + "/" + ( DOC.meta["link"]["prev"].sub(/.pdoc$/, ".html") ) %>">Prev
  • <a href="<%= ENV["baseuri"] + "/" + DOC.meta["link"]["next"].sub(/.pdoc$/, ".html") %>">Next
% end

<!-- / Sub column -->

このために、これまでSubCloumnコンテナ直下にメニューがあったが、それとcontent_boxクラスを分離して、同クラスのdiv要素を追加している。

/* White background */ .content_box { background-color: #fff; } /* Padding for continuous content box. */ .content_box + .content_box { margin-top: 11px; }

Aki SI&Eのほうはもう少し手の込んだものになっている。

#SideBar .container { padding : 1.28em; } #SideBar .container:last-child { margin: 0; }

CSS3の:last-child擬似プロパティを使うことで最後が間延びしてしまうことを防ぎながら、要素を分離してチェックをみせるようにしている。

注釈をサイドバー内にも表示するようにした他、内容的にはこれまでコンテンツ側にあったACCSのserial articleのreferranceをサイドバーに表示するように変更した。

レイアウト方法の変更

これでサイドバーが長くなったのだが、なぜかこれではメインコンテナが短縮されてしまう。あくまでメインカラムの高さに合わせるのだ。構造としては

なのでこの挙動は謎だが、MozillaでもBlinkでも同様の挙動を示す。

floatすると一見うまくいくようだが、逆にサイドカラムの高さに合わせてしまい、メインカラムが突き抜けてしまう。また、幅もきちんと規定しなくてはいけない。

結局、3者全てinline-blockにしてしまえば高さは正しく確保される。ただし、これでは2つのカラムはmarginがとられないためぴったりくっついてしまう。

そこでこれをmargin, padding, border-widthが全て0のコンテナとし、paddingは別のブロックで確保する。paddingは設定してもよかったのかもしれないが、このほうが管理しやすい。

エッセイ用のほうが先行して開発されたので、構造が甘かった。ReasonSetはもう少し安定しているが、やはり作りなおしたほうが良いと思われる。ちなみに、ReasonSetが安定しているのは、高さが規定されているためでもある。

ここまでしたのだが、inline-blockで幅を%指定だとGeckoでは見られるが、Blinkでは上下にレイアウトされてしまう。ピクセル指定にすれば大丈夫だが、relativeにした上でレイアウトし、さらにfloatすれば%指定でもBlinkで正常に表示される。

ACCSの修正

まず、TOC機能がエラーになるようになっていた。以前はRuby2.0でやっていたが、2.1になったからだろうか？どうも、クラスが違うオブジェクトを持つArrayを比較しようとしている、ということらしい。文字列しか格納しないように思うのだが、一応to_s

essaies.push [ sortitem.to_s, fp.to_s, meta["title"] ]

TOCに戻るリンクが間違っていた。これは、設定ファイルがreasonset_link_contentsとしているのに、テンプレートはreasonset_link_contentとしているという単純な理由だった。これは、HTMLのlink要素に対応するのでcontentsが正しい。ちなみに、Essayにはその機能がそもそも含まれていなかった。

そして、ACCS記事間のリンクが機能しない。Talkin' About(Aki's Palace)との違いが見つからず、一体…と思ったのだが、grepしてみるとその設定はrbutilに含まれており、chienomiが専用で使っている。chienomiのリンクが機能していたので、当然Talkin' Aboutでも機能しているものと思い込んでいたが、実際はTalkin' Aboutでは機能しないわけだ。単に記事がひとつしかないので気づかなかっただけだ。

基本的にはACCS記事内でそのスクリプトをロードすれば機能するのだが、ロードすべきスクリプトが存在しない。chienomiのものはパスがハードコーディングされている。そのため、それを修正したバージョンを用意した。

また、「最初の記事」だが、

export reasonset_link_start="si/$wd_element/${artdir:+${$(print $artdir/*.pdoc):r}.html}"

となっていた。Talkin' Aboutでは機能していたが、これは記事がひとつしかないからだ。つまり、複数のファイルがあると、それが連なった文字列（スペース区切り）の最後だけpdocをhtmlに変えることになってしまう。

当然、先頭のファイル名のみをとり出さなくてはいけない。(#q[1])で機能しなかったので、

export reasonset_link_start="si/$wd_element/${artdir:+${$(print -l $artdir/*.pdoc | head -n 1):r}.html}"

と変更した。単純な方法だが、そこまで繰り返し呼び出すわけではないので、head(1)を呼び出す程度どうということはないだろう。

ノートインデックスの作成

ノートのインデックスを作るため、まずPureDoc側を修正。その機能をスーパークラスに追加。

### Notes ### # Add note text to an array def addnote(note) @notes.push note end attr :notes

サブクラスで呼び出し

# Note def n(text, &note) puredoc_element(:n) do note = note.call addnote note '%s</pure:note>' % [esc!(note), esc(text) ] end end

ちなみに、HTMLクラスタイプだけノートとテキストが逆になっていた。どちらが正しいのかよくわからなくなっている。仕様を規定すべきだろう。

そして今修正した。

def n(note, &text) puredoc_element(:n) do addnote esc!(note) '%s</pure:note>' % [esc!(note), esc(text.call) ] end end

これでノートインデックスの作成が可能になった。だが、これに対応した表示が本文に必要だ。これはCSSに任せる。

body { counter-reset : notes; } /* Note element */ .puredoc_note:after /*, puredoc|note:after */ { vertical-align: super; font-size: 80%; content : "\002020" counter(notes); counter-increment: notes; text-decoration: none; }

content中の文字参照はどうするのだろう、と思ったら、16進数にした上でクォート内で