« 縦書き表示導入記(2) 迷走篇 | トップページ | 縦書き表示導入記(4) 半角英数問題 »

2011年6月 3日 (金)

縦書き表示導入記(3) 竹取JS

3・1 あまりよくなかった第一印象


 次に筆者が目をつけたのは、「竹取JS」という縦書き化ツールである(以下、「竹S」と略す)。実はこのスクリプトについては、「涅槃」の導入を試みる以前から見知ってはいた。縦書きブログについてググっていたときに、たまたまヒットしていたからである。


 ただ最初の印象はあまりよくなかった(苦笑)。動作(スクロール)が重いし、縦書きの表示も読みやすいとは言いがたい(これについては後述)。またこの時点では、(一覧性のことを考えて)段/ページが下へ連なる形式が望ましいと思っていたので、スクロールボックス表示になってしまう「竹S」には、どうも食指が動かなかったのである。


3・2 採用の理由


 しかし「涅槃」の挫折後、ものは試しにと「竹S」を試してみると、このツールが意外にも筆者のニーズにうまくマッチすることがわかった。


 まず、操作性がシンプル。たとえばレイアウトに関して言うと、「竹S」の場合、最初に基本的な設定項目(マニュアルにメニューが書いてある)を指定してやれば、後は元の横書きの設定(行間やマージン・見出しのデザインなど)がそのまま引き継がれる仕組みになっている。初級者にはこれが実にありがたい。面倒な作業は少しでも御免被りたいからだ(笑)。


 また、ブログのテンプレートに「竹S」へアクセスするスクリプトを直接埋め込んでやれば、過去の記事も自動的に縦書き表示をさせることが可能となる。これも面倒くさがり屋の筆者にとってはありがたかった(他のスクリプトの場合、縦書き表示をさせたい記事には、いちいちタグを打ち込んでやらねばならない)。


 そして、ダブルクリックで表示を切り替えられるのも大きい。1章のラストでも書いたように、(他の多くの縦書きブロガーとは異なり)筆者自身は縦書きにそれほどのこだわりがあるわけではない。「時々、縦書きで表示できればいいな♪」程度の、軟弱な思想の持ち主である(笑)。そんな筆者にとって、気分によって縦書きと横書きを切り替えられる「竹S」はまさに最適なツールというわけだ。


 もちろん、上で述べたような問題点(動作が重いことやスクロールボックスによる一覧性の悪さなど)も気にはなったが、筆者のようなものぐさの気分屋にとってはこのあたりが相場だろうということで、「竹取JS」の採択に踏み切った次第である(なんかイメージが悪くてゴメンナサイ、作者さま)。


3・3 導入の手順(ココログ初級者用)


 「竹取JS」の基本的な説明や設定方法についてはこちらをあたっていただきたいが、筆者のようにHTMLやCSSは苦手だという初級ユーザーのために、導入にあたっての注意事項を補足的にまとめておくことにする。


 なお、テンプレートにスクリプトを埋め込むためには上級テンプレートが必要なので、ココログ・ユーザーの方はプランを有料の「プロ」か「オプションパックアドバンス」に切り替えておく必要がある(こちらを参照)。初級者というのはえてして余分なお金がかかってしまうものです(苦笑)。


(1)「竹取JS」のページからzipファイルをダウンロード

 圧縮ファイルの中身は、"taketori.js","taketori.css","ReadMe.html","README.md"のファイルが入ったフォルダを圧縮したもの。前二者が後で必要になってくるので、ダウンロードを忘れないように。


(2)ファイルのアップロード

 "taketori.js"と"taketori.css"をココログのサーバの同じ階層にアップロードする。その手順は以下の通り。

  1. ココログの管理ページにログインして、「コントロールパネル」→「ファイル」タブをクリック

  2. 「ファイルを選択」ボタンを押し、上の2つのファイルを選択して、それぞれを同じ階層にアップロード

  3. 「現在のフォルダ」に2つのファイル名があったら、アップロードの成功

  4. "taketori.js"ファイルを右クリックしてリンクアドレスをコピーしておく

(3)設置用HTMLの編集

 ホームページの「縦書き指定の概略」ボックスに書かれているスクリプトをテンプレートに貼り付けるわけだが、何点か手を加える必要がある。


 まず、1行目の"taketori.js"の括弧内を、先ほどアップロードしたファイルのリンクアドレスに置き換える。これを忘れると「竹取JS」は作動しない。


 次に「設定項目」と「要素」を指定するわけだが、詳しくはホームページの記述に当たってほしい。以下は筆者(このブログ)の指定例である。


<script type="text/javascript" src="http://dohenkutsu.cocolog-nifty.com/taketori.js" charset="UTF-8"></script>
<script type="text/javascript">
//<![CDATA[
(new Taketori()).set({lang:'ja-jp',fontFamily:'sans-serif',height:'40em',togglable:true}).element('=auto').toVertical(false);
//]]>
</script>

 「要素」の指定について補足。"element('=auto')"というのは、「日本語文章を自動検出して縦書きにする」という意味。どの部分を指定したらいいか筆者自身もよく分からなかったので、これで逃げることにした(苦笑)。


 また、"toVertical"は画面の読み込み待ちをするかどうかを設定する記号だが、初期値は"true"、つまりそのままでは自動的に縦書き表示にされてしまう。それを避けるために、"false"指定にしておいた。


(4)CSSの編集

 上記の設定項目でフォントファミリーは、4つのファミリー(明朝系、ゴシック系、行書体系、楷書体系)を指定できるわけだが、それぞれのファミリーの字体はさらにCSSの中で優先順位が指定されている。


 たとえばゴシック系の場合、デフォルトではCSSで以下のように記述されている。


.taketori-sans-serif-ja-jp {
font-family: 'Lucida Grande','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','HiraKakuProN-W3',Verdana,'メイリオ','Meiryo','MS ゴシック','MS Gothic',Osaka,arial,helvetica,sans-serif !important;
}

 これは表示される字体の優先順位を示すもので、ウィンドウズ・ユーザーの場合、最初に指定されるのは"Verdana"ということになる。筆者の場合、横書きでは「メイリオ」を指定フォントにしているので、このままでは表示のたびにフォントが変わってしまう。それを避けるために、Verdanaの順番を'Meiryo'の次に下げることにした。


 CSSの修正のしかたは、"taketori.css"をメモ帳などで開いて、修正箇所を書き換えて保存する。後はこのファイルをもう一度、ココログのサーバにアップし直せば、変更が反映されるはずである。(注)


(注)最初の設定の段階でフォントファミリーを指定しなければ、横書きの設定がそのまま反映される。面倒だという人は、height(行の高さ)とtogglable(ダブルクリックで表示を切り替えるかどうか)だけを指定すればいいのかもしれない。


(5)テンプレートの編集

 設置用HTMLの編集が済んだら、テンプレートにスクリプトを貼り付ける作業に入る。まず、管理ページトップから「デザイン」をクリック。すると、テンプレート一覧が表示される。


 次にバックナンバー・テンプレートから"Individual Archives"を選択してクリック。すると、スクロールボックスの中にテンプレートの内容が表示される。ここに上記のスクリプトを貼り付けてやればいいわけだ。


 参考のために筆者のケースを挙げておくことにする。タイトル以降を縦書きにしたかったので、日付とタイトルのあいだにスクリプトを貼り付けることにした。


Taketori_template_2

 貼り付けたら「保存」ボタンを押す。すると「テンプレートへの修正が保存されました。ブログを更新するには、テンプレートの再構築をおこなってください。」という表示が現れるので、「反映」ボタンを押す。


 別枠の小さいウィンドウが開き、「反映したいファイルを選択してください」という表示が現れるので、「すべてのファイル」を選択して「反映」ボタンをクリック。


 これで一応、縦書き表示が可能となったはずである(反映まで少し時間がかかる可能性あり)。


3・4 現時点での問題点


 「竹取JS」の動作の不具合(とその解決策)については、ホームページにも記載されている(末尾の「よくある質問」を参照)。以下、個人的に感じている問題点について書いておくことにしよう。


・Operaでの表示の不具合

 これは上記の「よくある質問」にも書かれていることだが、Operaでの縦書き表示が著しく不安定である。急に空白行が空いたり、文字列が消えたりするのだ。解決策は一応、ホームページに記載されてはいるのだが、初級者の筆者にはよく分からなかった(苦笑)。


 結局、Operaユーザーは横書きのままで閲覧いただくか、(縦書き表示で見たい場合は)他のブラウザを使用していただくしかないようである(ゴメンナサイ)。


・ブラウザによる表記のブレ

 上記のOperaは極端な例にしても、縦書きに変換したときの表示状態がブラウザによってはかなり乱れるようだ。たとえばインターネット・エクスプローラの場合、半角英数の縦書きが極端に左に寄ってしまう一方、縦中横の半角英数は逆に極端な右寄せとなり、リーダビリティを著しく落としている。


 また、どのブラウザでも全角括弧()の表記が若干右寄せになる。割とよく使う記号なので、ちょっとしたズレであっても、それが累積することで違和感が高まる結果となっている。


 それ以外にも、全体的な表示の印象がブラウザによって微妙に異なっている気がする(横書きでもそう)。フォントや行間などは基本的にこちらが指定しているので、ブラウザの仕様に何らかの原因があるのかもしれない(詳細は不明)。結局、複数のブラウザを表示させてみて、お気に入りのものを自分で選択していただくしかなさそうである。


・見出し一覧との連携

 縦書き表示にすると、(前回導入した)「見出し一覧スクリプト」の作動が不安定になることがある。特にクロームではしばらく放置しておくと、見出しへのジャンプが全く効かなくなるケースが多かった(この件では、IEの動作が比較的安定している)。


 おそらくスクリプトどうしで干渉している部分があるのだろうが、これも筆者のような初級者には手の負えない問題である。横書きに戻せば「見出し一覧」の作動も回復するので、症状が起きたらそうしていただくほかない。


・その他の問題

 ブラウザによっては、禁則処理がうまく反映されないことがある。特にクロームではその傾向が強いようだ。ただ、その原因が「竹S」の仕様にあるのか、ブラウザの方に問題があるのかは分からない。まあ、2、3箇所で禁則処理が為されなかったからといって目くじらを立てるほどのものでもないのだろうけれど(事実、大して気にはならない)、一応、報告だけはしておく。


 次に、縦書き表示を印刷しようとしても、スクロールボックスに表示されている部分しか印刷されない。全部を印刷しようと思ったら、順次、手動で表示位置を変えて印刷し直す必要がある(まあ、横書きで印刷すればいいわけだし、そもそもこのブログを印刷してまで読みたいという奇特な人もいないとは思うが、これも老婆心からのご報告である)。


 第三に、スクロールの動作が重いことについては既に述べたが、字が大きくなるとその傾向が強くなる。スクロールボックスの幅が狭く一覧性が限られてくることと、指定されている書体がメイリオであることを考えると、ブラウザのフォントサイズを通常よりもやや小さめに変更した方が、リーダビリティが(少しは)アップするかもしれない。


3・5 暫定的な結論(あるいはフォロー)


 とまあ、いろいろ不満を書いてきたけれど、なにか表示に問題が起きたり縦書きがいまいちフィットしないと感じたりしたら、横書きに戻せばいいだけの話だから気楽なものである(他のスクリプトだとこうはいかない)。


 縦書きスクリプトでありながら縦書きに特化していないというある種の「中途半端さ」こそが、実は「竹取JS」の最大の魅力であり、また長所なのではないか?そんな思いを深めている昨今である(一応、これでも誉めているということをどうかご了承ください、作者さま)。

|

« 縦書き表示導入記(2) 迷走篇 | トップページ | 縦書き表示導入記(4) 半角英数問題 »

コメント

この記事へのコメントは終了しました。

トラックバック


この記事へのトラックバック一覧です: 縦書き表示導入記(3) 竹取JS:

« 縦書き表示導入記(2) 迷走篇 | トップページ | 縦書き表示導入記(4) 半角英数問題 »