新年のおよろこびを申し上げます。

以前、ルビや圏点(傍点)を簡単に入力する為のコードをドヤ顔で公開したのですが、その内容が非常に不親切であった為、きっと読んだ人には「そうなんだ! すごいね!」くらいの感想しか抱いてもらえてないだろうなぁ、と思いながらの年越しでした。

そして迎えた2016年、この点を挽回する意味を込めて、前述の記事のコードを改良の上、プラグインとして実際に公開することにしました。

WordPressのプラグインを公開するというのは、他人のWordPressの使用方法に図々しくも介入し、他人のブログ人生ライフに影響を及ぼすことに他ならない――そんなことをこんな吹けば飛ぶ塵芥のようなブログがやっていいのだろうか? プラグインを使用した事により被害を被るブロガーの苦悶を直視し悲嘆の声を聞き留める覚悟はあるのか? とずっと自問自答してきましたが、もう何も考えずに公開しようと思います。何かあった時は全てを棄てて故郷に帰るよ……。

最初におことわり

「傍点」と「圏点」は本来ビミョーに違うものらしいのですが、ここではわかりやすさのために「傍点」で統一します。圏点ファンの人はしばらくご辛抱ください。

このプラグインの機能

  • かんたんな書式で、ルビや傍点をマークアップできます。
  • ショートコードで囲んだ部分のみに適用するか、ショートコードを使用せずに本文全体に適用するか選べます。
  • 正規表現で、書式のルールを追加できます。

どういう書式なのか

テキストで一定の書式を入力して、記事の表示時にHTMLマークアップに変換します。
デフォルトで対応してるのは、ルビ傍点の2種類。

|雑煮(ぞうに)→雑煮ぞうに
*重箱の隅*→

エスケープする場合は、<<<と>>>で囲みます。つまり以下の通り。

<<<*百人一首*>>>→*百人一首*

記号はすべて全角で、かつ簡単に入力できる範囲を使っているというのがミソです。よくあるマークアップはだいたい半角記号を使っていたり、キーボード上には並んでいない記号を使っていたりしますが、Simple Rubyは直接(Shiftキーは押しますが)入力できる記号だけを使っています。
なお現時点では、ルビの|は省略できません。各小説投稿サイトのマークアップは|を省略できますが、私は|を書いた方がルビの存在と設定箇所が分かりやすいのでいいと思うんですけどね……。

ダウンロード

Simple Ruby (version 2.0.0)

※WordPressの公式プラグインディレクトリには登録していないので、管理画面の新規追加ページで検索しても出てきません。なぜ登録していないかというと、やり方調べてみたら何だか面倒っぽかったからです。ごめんなさい。

インストールと設定

1.インストール

インストールは普通にやればOKです。

ダウンロードしたzipファイルを展開すると「simple-ruby」というフォルダーが生成されると思うので(複数ファイルだけ出てきた場合は 「simple-ruby」という名前のフォルダーを作ってそこに入れてください)、それをWordPressのpluginsフォルダーにアップロード。

管理画面のインストール済みプラグインのページにアクセスして、一覧の「Simple Ruby」を有効化したら準備OK。

2.スタイルの設定

line-heightを2.0くらいにしている場合はそのまま使用できますが、それより小さい値(または特に設定していない)場合は、傍点が前の行にめり込んで表示されてしまいます。
こういう場合は、設定画面の「傍点の縦位置」という箇所で、傍点の縦位置を設定してください。だいたい0em-1emで設定すればいいはずです。

文字の上辺を0emとした時の位置なので、フツーに表示させる場合はマイナス値になります
文字の上辺を0emとした時の位置なので、フツーに表示させる場合はマイナス値になります

書き方

1.適用したい場所をショートコード [simpleruby]~[/simpleruby] で囲みます。
2.書式を記述します。上記に書いた通りです。

記述例

[simpleruby]
僕のクラスメイトに|浦木(うらき)|智香(ともか)という女子がいる。
彼女は着の身着のままで*空を飛ぶ*ことができた。
[/simpleruby]

表示例

僕のクラスメイトに浦木うらき智香ともかという女子がいる。
彼女は着の身着のままでことができた。

という感じ。

設定ページ

設定は、管理画面メニューの「設定」→「Simple Ruby」にて。

ショートコードを省略したい(本文全体に適用させたい)

「処理部分」のチェックボックスをオフ。

書式を追加したい

設定ページで、書式(置換ルール)を作成可能です。
PHPの正規表現については、PHP公式サイトのリファレンス等をご参照ください。

具体例として、以下は「{}(全角中カッコ)で囲んだ部分を code タグでマークアップする」ルールです。

変換前: /{(.*?)}/is
変換後: <code>$1</code>

スタイルを追加したい

Simple Rubyに組み込まれているCSSは(管理画面上では)編集できないので、お使いのWordPress テーマにCSSを追加してください。出力されるマークアップがどんな感じかは、この記事の一番最後に掲載しています。

注意点

Simple Rubyは、「太字とかの書式や改行が入っている」箇所では動きません。
HTMLがわかる人向けに言えば、「HTMLタグが入っている」箇所では動きません。

動かない例1

ビジュアルエディター上、以下のようになっていると動きません。
なぜなら、ソースコード上、*と*の間にある「とら」が<strong>タグで囲まれているからです。

エディター上:*ねうしとらうたつみ*
実際の表示:*ねうしとらうたつみ*

動かない例2

上の例は分かりやすいですが、全く同じ理由で、以下も動きません。
*と*の間の「うまひつじさるとりいぬい」が<strong>タグで囲まれているからです。

エディター上:*うまひつじさるとりいぬい
実際の表示:*うまひつじさるとりいぬい

動く例

じゃあどうすればいいか? 例えば以下なら、ちゃんと動きます。

エディター上:なぜなら、今年の干支は*ひのえさる*だからです。
実際の表示:なぜなら、今年の干支はだからです。

上記は、*と*で囲んである部分を含め<strong>タグで囲まれており、*と*の間に<strong>タグが存在するわけではないからです。

なぜこういう仕様になっているのか?

なぜこんなことになっているのかというと、タグを含んでもOKにしてしまうと、出力されるHTMLが文法違反になってしまう可能性が大きいからです。

ここのところは、PHPを一生懸命書けばさかしく回避できるのですが、まあ「Simple」という命名自体、あんまり難しいことはやりたくないですよ、という表明に他ならないので、まあそのなんていうか、ごめんなさい。

(参考)その他の情報

メモ書きのようなものなのであんまり気にしないで。

「SIMPLERUBY_SAMPLE_ESCAPE_START」は「<<<」に、「SIMPLERUBY_SAMPLE_ESCAPE_END」は「>>>」に変換されます。
これは「<<<」「>>>」をエスケープする手段が無いため、念のために設けているものです。

(参考)出力されるマークアップ

変換された後のマークアップは以下のようになります。

ルビ

<ruby data-rt="かな">仮名<rp>(</rp><rt>かな</rt><rp>)</rp></ruby>

傍点(黒丸)

<span class="botenparent kuromaru"><span class="boten">傍</span><span class="boten">点</span></span>

傍点(ゴマ)※上記のkuromaruがgomaに変わってるだけです

<span class="botenparent goma"><span class="boten">傍</span><span class="boten">点</span></span>
Tweet about this on TwitterShare on FacebookShare on Google+Share on TumblrEmail this to someone