BikiBikiBobで運用するサイトをカスタマイズする方法について説明します。
サイトの基本設定
運用するサイトのURLは、サイト内の各種リンクの起点となるので、適切に設定する必要があります。各ページにおかれるサイトのバナーをクリックした際にはこのURLに飛びます。
site_url: https://dbmx.net/bikibikibob/myblog/
サイトのディレクトリをURLで指定すると、その中の特定のファイルがトップページとして表示されるようにWebサーバを設定するのが普通でしょう。"index.art" に対応する "index.xhtml" などです。それ以外のファイルをトップページにしても構いません。Webサーバでトップページが指定できない場合、以下のようにトップページのファイルそのものを指定しても構いません。
site_url: https://dbmx.net/bikibikibob/myblog/index.xhtml
サイトのタイトルとサブタイトルは、設定ファイルの中で設定します。タイトルはHTMLのtitle要素およびh1要素として使われるので、必須です。各記事のtitle要素は "サイトタイトル: 記事タイトル" という形式になります。サブタイトルはh1要素の下に控えめに表示されるだけなので、省略しても構いません。
title: 究極超人あ〜る subtitle: 自爆装置は男のロマン
言語の指定も設定ファイルで行います。これはHTMLのhtml要素のlang属性に反映されます。ブラウザが適切なフォントを選択したり、音声読み上げで適切なモデルを選択したりするのに使われますので、適切に設定する必要があります。
language: ja
設定ファイルの中に "extra_meta" という項目がありますが、そこに書いた設定はHTMLのmeta要素になります。主に検索エンジンなどの自動化ユーザエージェントの制御に使われます。Google Search Consoleのサイト所有権確認にも使えます。
extra_meta: author|ゆうきまさみ extra_meta: keywords|写真, 漫画, コメディ, アンドロイド extra_meta: description|私立春風高校を舞台に光画部に属する生徒・OBたちとその周辺で起きるさまざまな珍妙な出来事を描いた学園コメディ漫画。 extra_meta: robots|all extra_meta: google-site-verification|dD_zZjUMXjtRjsnDHZCAsMGutwUWrfm48cVUDJtwFDK
これらのmeta要素は無くても動作に支障はないので、全て省略しても構いません。とはいえ、SEOの観点では適切に設定することが望ましいでしょう。
任意のHTMLコードをページに埋め込みたい場合、"bbb.conf" の以下の設定を使ってください。"extra_head_file" で指定したファイルの内容はhead要素の中に置かれます。"extra_body_header_file" で指定したファイルの内容は <body> の直後に置かれます。"extra_body_footer_file" で指定したファイルの内容は </body> の直前に置かれます。
extra_head_file: bbb-extra-head.html extra_body_header_file: bbb-extra-body-header.html extra_body_footer_file: bbb-extra-body-footer.html
ステップリンク機能
記事の下に「戻る」「進む」のリンクを自動的につける機能をステップリンク機能と呼びます。ステップリンクを有効にするには、設定ファイルで順序の指定を書きます。
step_order: date
デフォルトでは "date" になっていますが、これは@date属性が指定された記事のみを対象にして、日付が古いものから新しいものに順に、あるいは逆に、読んでいけるようにします。ブログ風にサイトを運用する際にはこれが適切でしょう。
順序に "title" を指定した場合、@title属性が指定された記事のみを対象にして、タイトルの辞書順で読んでいけるようにします。タイトルに番号を振れば、任意の順序で記事を並べることができるようになります。紙の本のように前から読んでほしい場合にはこれが適切でしょう。
順序に "filename" を指定した場合、全ての記事を対象にして、ファイル名の辞書順で読んでいけるようにします。タイトルに番号を含めたくない場合にはこちらが便利でしょう。
"step_order" を省略した場合、ステップリンク機能は無効化されます。Wiki風に運用する際にはそれが適切でしょう。
目次機能
記事の中に "@site-toc" で始まる行を書くと、そこにサイト全体の目次が作られます。各記事に飛べるリンクを特定の順序で並べたものです。典型的には、サイトのトップページになるであろう "index.art" などの記事に索引を置きます。
ブログ風に運用したい場合、「最新記事」などと見出しをつけて、日付の逆順で並べた索引を置くと良いでしょう。
* 最新記事 @site-toc [order=date] [reverse=true] [max=10]
紙の本のように前から読んでほしい場合には、「目次」などと見出しをつけて、タイトルの昇順で並べた索引を置くと良いでしょう。その際、タイトルには「001:インストール」などと記述して、記事の所望の順序とタイトルの辞書順が合致するようにします。
* 目次 @site-toc [order=titie]
タイトルに番号を含めたくない場合には、ファイル名に "001-installation.art" などのように番号を振った上で、ファイル名で並べる索引を置くと良いでしょう。
* 目次 @site-toc [order=filename]
目次の中に目次の記事が含まれると格好悪いです。目次から除外したい記事には "notoc" 属性を指定してください。"notoc" の記事はステップリンクの対象からも除外されます。
@misc notoc
実際の目次は以下のように表示されます。
SNSシェア機能
設定ファイルでコメントアウトされているSNSシェア機能を有効にすると、各記事に各種SNSでシェアするためのボタンがつけられます。Twitter(X)とLineとFacebookとはてなブックマークに対応しています。
share_button: twitter share_button: line share_button: facebook share_button: hatena
特定の記事にシェアボタンをつけたくない場合、記事の中に以下の行を書いてください。
@misc noshare
SNSでシェアした記事には、記事のタイトルの他に説明文とアイキャッチ画像がつけられます。説明文は本文の冒頭付近のテキストから自動的に生成されます。アイキャッチ画像は記事の中の最初の画像が自動的に選ばれます。明示的に説明文をつけるには、"@desc" で始まる行を書きます。アイキャッチ画像を明示的に指定するには、画像のパラメータとして "[top]" を指定します。
@title ジムビーム @desc 1795年から七世代に渡って洗練された定番のバーボンです。 @image https://example.com/mediocre.jpg @image https://example.com/superb.jpg [top]
タイトルなどの属性はOGPに準拠してHTMLのメタデータとして表現されます。しかし、現状で、TwiteterはXHTMLのMIMEタイプ(application/xhtml+xml)で配信されたものを処理できません。Twitterに対応するにはWebサーバの設定でXHTMLをHTMLのMIMEタイプ(text/html)として送信する必要があります。全てのUAに対してHTMLとして送信しても問題ありませんが、Twitterbotに対してだけHTMLとして送信するのが良いでしょう。Apache2の場合、以下のような指示を.htaccessに書くと良いでしょう。
<Files ~ "(\.(xhtml)$)|(^$)"> SetEnvIf User-Agent "Twitterbot/" ua_html_only Header set Content-Type "text/html; charset=UTF-8" env=ua_html_only </Files>
さらに、Twitterでシェアされた際に説明文や画像を表示するには、"bbb.conf" に以下の記述をしてください。
extra_meta: twitter:card|summary_large_image extra_meta: twitter:site|@youraccountname extra_meta: twitter:creator|@youraccountname
コメント機能
各記事の内容に関して読者からのコメントを受けつけることもできます。コメント機能を有効にするには、コメント管理用のCGIスクリプトを設置する必要があります。ダウンロードしたリポジトリにある "bbb_comment.cgi" をCGIスクリプトが実行できるディレクトリにコピーしてください。
設置した "bbb_comment.cgi" を編集して、HTMLファイルの置き場所とコメントファイルの置き場所を指定します。コメントファイルの置き場所となるディレクトリは予め作っておいてください。CGIスクリプトの実行ユーザが読み書きできるパーミッションも指定してください。コメントファイルにはクライアントのIPアドレスが記述されるので、Webサーバの設定で公開されないように制御するか、Webサーバによって公開されない場所に置くべきです。
HTML_DIR = "/home/mikio/public/bikibikibob/myblog" COMMENT_DIR = "/home/mikio/myblog/comment"
パスはCGIスクリプトのあるディレクトリからの相対パスとして記述しても良いです。よって、HTMLファイルの置き場所にCGIスクリプトも置くなら、以下のように書くことができます。
HTML_DIR = "." COMMENT_DIR = "/home/mikio/myblog/comment"
設置したスクリプトのURLを "bbb.conf" の中で指定します。その状態でジェネレータを実行すると、各記事にコメント機能がつきます。HTMLファイルと同じ場所に置くなら、相対URLとしてファイル名だけを書けば良いでしょう。
comment_url: bbb_comment.cgi
各記事の下につけられるコメントボタンには、現在のコメント数が併記されます。コメントがない場合には灰色、コメントがある場合には薄緑色、最新コメントが48時間以内につけられている場合には薄桃色になります。
どの記事にコメントが付いているかをいちいち確認して回るのは大変なので、記事を問わず最新のコメントを一覧表示する機能があります。一覧を表示したい記事に、以下のような記述をします。
@comment-history [max=100] [perpage=20]
実際のコメント履歴は以下のように表示されます。
コメントデータは記事毎に分けられて、記事のファイル名の拡張子を ".cmt" に変えた名前で保存されます。各記事のコメントデータの総容量は1MBで、それを超えると書き込みが禁止されます。また、履歴ファイルは "__cmthst__.tsv" という名前で保存されます。このファイルの総容量は256KBで、それを超えると古い履歴から消されます。これらの閾値は "bbb_comment.cgi" の冒頭に書いてあるので、お好みで変更してください。
コメントを編集したり削除したりする必要があれば、適当なエディタでコメントファイルを開いて編集してください。もしも大量のスパムを食らった場合は、"grep -v" などでIPアドレスや著者名を条件にフィルタをかけると良いでしょう。
全文検索機能
各記事の内容(タイトルと日付と本文)を対象に全文検索する機能をつけることもできます。全文検索機能を有効にするには、検索用のCGIスクリプトを設置する必要があります。ダウンロードしたリポジトリにある "bbb_search.cgi" をCGIスクリプトが実行できるディレクトリにコピーしてください。
設置した "bbb_search.cgi" を編集して、HTMLファイルの置き場所を指定します。
HTML_DIR = "/home/mikio/public/bikibikibob/myblog"
パスはCGIスクリプトのあるディレクトリからの相対パスとして記述しても良いです。よって、HTMLファイルの置き場所にCGIスクリプトも置くなら、以下のように書くことができます。
HTML_DIR = "."
設置したスクリプトのURLを "bbb.conf" の中で指定します。HTMLファイルと同じ場所に置くなら、相対URLとしてファイル名だけを書けば良いでしょう。
comment_url: bbb_comment.cgi
検索機能を設置したい記事には以下の行を書いてください。その状態でジェネレータを実行すると、その場所に検索窓が置かれます。
@search [max=100] [perpage=10]
実際の表示は以下のようになります。"ファイル"、"鎌倉" といった検索語を入れてみてください。
特定の記事を検索結果に含めたくない場合、その記事に "nosearch" 属性を指定してください。普通、トップページは検索結果に含めない方が良いでしょう。
@misc nosearch
外部データの貯蔵機能
Google Photosなどの画像管理サービスに置いた画像や動画を記事に埋め込みたいけれど、大抵の商用サービスは管理対象のデータへの永続リンクを提供していないので、そのままだと記事内で参照できません。しかし、Webブラウザで見られる以上、大抵の画像データにはURLがあります。ならば、その一時的なURLを埋め込んで記事を書いてしまってから、埋め込んだ画像を自分のサーバにダウンロードしてURLを書き換えてしまえば良いでしょう。
この方法だと、画像データを手動でダウンロードしてアップロードしなおす手間が省けるので、画像を多く使う記事を書く効率が飛躍的に高まります。また、記事に埋め込む画像だけを自分のサーバに保存するのであれば、日常で撮る全ての写真や動画を自分のサーバで管理する必要はありません。
記事に埋め込んだ外部データの自動貯蔵機能を有効にするには、"bbb.conf" に以下のような内容を記述します。
hoard_target_url: ^https://[^/]*\.googleusercontent\.com/ hoard_target_url: ^https://[^/]*\.st-hatena\.com/ hoard_local_url: https://dbmx.net/bikibikibob/myblog/data/ hoard_data_dir: /home/mikio/myblog/data
"hoard_target_url" は、取得対象となる画像や動画のURLにマッチする正規表現です。複数のサービスを指定する場合、"hoard_target_url" を複数行書くことができます。Google Photosの場合、"googleusercontent.com" というドメインに一致するURLになります。"hoard_local_url" は、自分のサーバに保存したデータを公開する際に接頭辞となる文字列です。そして、"hoard_local_url" は、取得したデータを置くディレクトリのパスを指定します。このディレクトリはWebサーバによって公開されている必要があり、そのURLが "hoad_loca_url" で指定したものになるということです。
外部サービス上のデータのURLを @image や @video の記法で埋め込んだ記事を書いたら、HTMLジェネレータを実行する際に "--hoard" オプションをつけてください。
$ bbb_generate.py --conf /home/mikio/myblog/input/bbb.conf --hoard
そうすると、処理対象の記事の中に対象となる外部URLを見つけた場合、そのデータを取得して保存した上で、記事の中にあるURLを保存したデータのURLで書き換えてくれます。次に同じコマンドを続けて実行しても、既にURLは書き換わっていますので、二重にデータを取得することはありません。つまり、通常の運用で "--hoard" オプションを常につけていて構いません。ただし、記事を執筆している途中で保存したデータをやっぱり使わないということになると無駄ですので、執筆中には "--hoard" はつけないでプレビュー作業を行なって、記事が完成した時に "--hoard" をつけてデータの貯蔵を行うと良うのが効率的です。
なお、Google Photosで画像のURLを得るには、一手間かかります。個々の画像を表示して、そのシェアボタンを押し、"Create link" を選び、そのリンクを辿った先で表示される画像の上で右クリックして、"Copy Image Address" を選択してください。