前にもブログの裏話を書きましたが、その近況版です。JavascriptやCSSのような技術ネタが少し入っていますが、初歩的な話ばかりです。

たいして難しい話をしているわけではありませんし、ブログ運用（特に「はてなブログ」をお使いの方）を始めたばかりの人には、何か参考になることがあるかもしれません。

とにかく自分はどこで何を設定したのかよく忘れてしまうので、備忘録としても、最近の設定をまとめておきます。

まずは、近況報告です。

近況報告

今まで、段落を字下げするというようなスタイルの指定を外出しせずに、タグの中に直接、書き込んでいました。

これはpタグ（段落制御用のタグ）の例ですが、段落の最初の文字を一文字分、字下げしています（ハイライトの部分）。

前のブログで説明しましたが、文章自体はWordで書いていて、Wordのマクロを使ってWord文書の内容をHTML形式で吐き出すという方法を採っています。何でこんな面倒くさいことをしているのかというと、文章の内容をデータベースと連携させているからです。後で説明します。

吐き出したHTMLをブログの編集画面に貼り付ければ、記事一丁できあがりっていう方法です。

で、いちいち手でタグを書くのがばからしいので、吐き出すときに書式情報を与えるようにしています。

たとえば、Wordの段落はpタグに、箇条書きの項目はliタグに、というように、文書の属性に応じて所定のタグに変換するのですが、そのときに、書式（スタイル）の情報も与えています。

それが、たとえば、pタグのインデント（字下げ）指定だったりします。

ただ、この方式だとスタイルが固定になってしまい、あとでスタイルを変えたくなったときに、ブログの記事に直接、手を入れなければならないですね。

だから、スタイル情報は、タグの中に直接書き込むのではなく、外出ししておいた方が、後で変えたくなったときに圧倒的に便利です。

去年の暮くらいまでは、あまり見栄えを気にしていなかったので、放置していたんですが、ブログを書くことに慣れてくると、さすがに見栄えが貧相なので、そろそろ見栄えも気にしようかと考えが変わってきました。

中身がなくて、デザインだけやたら凝っているなんていうのも問題ですが、中身が濃くて充実しているのにデザインが貧相というのも何だかなという感じですよね。

ま、自分のブログの内容がそれほど濃いとも思いませんが、さすがに貧相なので手を入れねばならぬと思うようになったというわけです。

そこで、ちょくちょくデザインを変えたくなるような要素を外出しして管理するようにしました。具体的には「_common.css」という名前のファイルに、pタグなどのスタイルの指定を一元化しました。

自分が使っている「はてなブログ」では、ユーザー自前のCSSファイルを参照するように設定することができます。

はてなブログの場合は、「ダッシュボード」→「設定」→「詳細設定」の順番で選択し、画面を下にスクロールすると「<head>要素にメタデータを追加」というメニューがあり、そこに設定します。自分の設定画面はこうなっています。

そのファイルの中に、pタグのスタイルに関する指定が入っています。

まあ、段落なのであまり見栄えを変えることもないでしょうが、頻出するタグなので管理しておいた方がよいという判断で、このファイルの中に突っ込んでいます。

それで、ブログの記事本体のpタグの記述は現在、こんな風になっています。

「blog」という名前のクラスを使っています。そして、「_common.css」というファイルの中に「blog」というクラスの実態を定義しています。つまり字下げしろ、という定義が入っているわけですね。

そもそもクラスなんぞ定義せずに、pタグそのもののスタイルを決め打ちしてしまうという方法もあります。この方法だと、クラスの指定なしで、pタグを使っている箇所には漏れなく、このスタイルが適用されることになるのですが、決め打ちしてしまうとあとで首が回らなく可能性もあるので、少し危険な香りが漂います。

繰り返しになりますが、こうしてスタイルを外出しすることのメリットって、後々レイアウトを変えたくなったときに、スタイル情報を一元的に管理しているCSSファイルに手を加えれば、全体に適用されるので楽、つまり、いちいち各ブログの記事を変更しなくて済む、ということですね。

ちなみに、さっき説明したように、pタグにインデント、つまり字下げの指定をしていますが、全体で見ると字下げしているブログの方が少ないみたいですね。

ブログを始めようとしたときに、字下げが必要かどうか調べたんですが、先達のブロガーに言わせると「必要なし」という意見が大勢を占めているようですね。

その理由は、ちゃんと改行を入れれば、段落の変わり目はわかるから要らないんじゃない、という主旨だったと思います。

でも、個人的には、小学生の作文以来、字下げの文化に慣れ親しんできた以上、それを守った方がいんじゃないかという、あまり深くない理由で字下げしています。

大袈裟かもしませんが、字下げをしないと、何だか西欧の文化に魂を売り渡したように見える、ということです。性分なんですかね。なんとなくここは譲ってはいけないような気がするので、字下げをしています。

今は外部のCSSファイルを参照するようになっていますが、それよりも前に作った記事は、デザインを変えようとすると、記事本体に手を入れる必要が出てきます。それは、面倒くさいのでやらないと思います。内容的に誤字脱字があれば、直すでしょうけど、デザインはそのまま放置する予定です。

前述したように、デザインにも少しずつ力を入れるようになってきたのですが、だからと言って急激に向上したりしません。昔、少しだけスタイルの勉強をしたこともあったのですが、だいぶ昔でほぼほぼ忘却の彼方です。ということなので長い道のりだと思います。

自分が定義しているスタイルは、サンプルを無料公開しているサイトに掲載されているコードをコピーして、ちょこっと手を入れた程度のものです。

まあ、だんだんテクニックが付いてきたら、少しずつ改善（変わるだけ？）されていくんじゃないでしょうか。

さて、近況はこんなところですが、次の話は少しディープになります。

2系統に分岐する面倒くさい運用

前のブログにも書きましたが、ブログの記事と自前のデータベースを紐づけるという特殊な運用をしています。

具体的に言うと、乃木坂関係の記事は、自前の乃木坂データベースと紐づいています。

記事の中に乃木坂のメンバーの名前があれば、その名前にハイパーリンクを付けます。そのリンクをクリックすると、そのメンバーのプロフィールを説明するページ（データベース）に飛ぶというようになっています。

ハイパーリンクを付ける処理を手作業でやるとすごく面倒くさいので、Wordのマクロを使ってハイパーリンクを自動生成しています。

データベース側で「このキーワード（たとえばメンバーの氏名）に関する情報を参照したければ、データベースのここのデータを取り出せ」という情報を管理しています。その情報をマクロで拾って、ハイパーリンクを付けるということをしています。

こういうイレギュラーなことをやっているため、ブログの記事をWordで書いているというわけです。

しかし、この方式にはめちゃめちゃ大きなデメリットがあります。

Wordの文書とブログの記事の系統が2つできあがり、どちらかを更新したときに、互いをどう同期するのかが課題になります。

いや、そもそも管理を別々にするというか、同期なんて取らない、という方法もあります。ただ、そうしてしまうと、手元に取っておくWord文書の質が落ちることになります。

どういうことかと言うと、単純な誤字脱字であれば、わざわざ同期を取る必要もないんですが、説明のロジックに抜けがあったり、間違えがあったりすると、文書の質が悪いままになります。そこで、そういうところに重点的に手を入れています。

手元に置いているWord文書を将来的には活用したいと思っているので、そこそこの質のものにしたきたいと思っています。というわけで、スマホで記事を編集したら、その内容を元のWord文書に反映させたいということです。

基本に立ち返れば、そもそもWordの文書からHTMLを派生させているわけですから、基本的にはWordの文書をマスターにすべきなのですが、実は、外で何となくスマホで自分の記事を見ているときに、文章のバグを発見することが圧倒的に多いんです。そうすると、必然的に、スマホからブログの編集画面に入り、そこで直したくなるわけです。

しかし、その場合、ブログの記事の変更内容を元のWordの文書にどう反映させるかが課題になります。

当初の構想では、変換テーブルを使えばうまくいくかもしれないと思っていました。

変換テーブルはこんな風になっています。

# スタイル名とタグの対応付け。
@PARA=@タイトル  

@PARA=@見出し

これは、Wordの文書のスタイル指定をHTMLに変換する際に参照するテーブルです。文書の内容をHTML形式で吐き出すときに、このテーブルを参照しながらHTML形式に変換しています。

「@タイトル」というWordのスタイルが当たっている箇所は、その後に続く定義のタグで挟んで出力せよ、という定義です。

このテーブルを使えば、理論上、逆方向の変換、つまり「ブログ記事→Word文書」という変換も可能になります。

たとえば、ブログ記事のHTMLに、「 ～ lt;!--%%@タイトル|終了%%-->」という文字で挟まれている箇所があれば、その部分にWordの「@タイトル」というスタイルを当てればよい、ということになります。

しかし、ここで注意しなければならないのは、はてなブログで記事を編集した際に、このタグがちゃんと生きていることが担保されていなければなりません。そうしないと取り込むのが不可能、あるいは困難になりますね。

実は、ブログの記事を編集中にタグが壊れる事件が何回か発生しています。タグが壊れるどころか、記事の内容までごっそり消えてしまうこともありました。

それに新しいタグをブログ側で追加したときにどうするのか、とかいろいろ気にしなければならないことが多いようにも思いました。

つまり、変換するうえで肝となる目印がどういう形で渡されてくるのかよくわからないという不確定さが伴うことになります。

となると、機械的に取り込むのは難しいかな、と思い始めました。

それから、取り込みの処理をWordのマクロにやらせるのは荷が重いかなとも思っていました。実際そこまでしてガリガリ、プログラムを組んでうまくいかなかったら浮かばれないなあ、という思いの方が、頑張って実装するという思いよりも上回っていたため二の足を踏んでいました。

簡単に言うと面倒くさいってことです。いや、白状すると、Wordのマクロが嫌いなんです。できれば、あまり手を染めたくない領域です。Wordのマクロも実は、渋々使っているんです。

とはいえ、放置していくと、このままではスマホで見つけたバグを直せないし、どうしようかなということで苦肉の策を立てました。

スマホの画面で文章のバグを見つけたときに、直接、記事を編集して更新するのではなく、修正内容を特殊なコメントとして書き込み、更新します。そして、閲覧者には、そのコメントは見えないような仕組みにしておきます。

そして、その特殊なコメントに従って、記事とWord文書を手作業で更新するという実にアナログな方法で対処することにしました。

試験的にコメントを「#」で挟むことにして試してみました。この文字で挟まれている部分が特殊なコメントとして扱われます。実際にスマホで記事を編集しているときの画面をお見せします。

それで、このコメントを入れた状態で記事を更新し、編集モードから閲覧モードに切り替えると、こんな風にコメント部分は表示されません。

編集しているときの画面では「世話好きな人」のところにハイライトかかっていませんでしたが、編集後の画面ではハイライトかかっています。ここのところは無視してください。

で、ご覧のように、「#」で囲まれた部分は表示されません。

これ、簡単な話でして、こんな感じで「#」で囲まれた部分をJavascriptで消しているだけです。ただ、この記号は色指定のところとかで、意味のある記号として使われるため、実用的ではありません。なので、変える必要がありますね。それから、コードも冗長ですね。もっと縮めちゃっていいでしょう。

var bd = document.body;
var rep = bd.innerHTML;
rep = rep.replace(/#.+?#/g,"");
bd.innerHTML = rep;

自分としては、もうちょっと気の利いた対策はないかなと思うところですが（たとえば差分解析ツールを活用した方法など）、今のところは、これでよしとして運用していくことにします。

以上、今は、こんな感じで運用しているという話でした。

かわや（旧よろずや）のブログ

好きな乃木坂、映画、漫画などについて語ります。

ちょい技術ネタ〜ブログの裏話

近況報告

2系統に分岐する面倒くさい運用