サポート

ルビの処理について

Meifea (2014/11/25 07:49)

設置URL : http://nijikana.net

お世話になっております。

以前、ページ本文を作成中にエディターでルビタグを付ける手段を作っていただきました。
しばらく運用していましたが、発想の転換というかなんというか、本文作成時じゃなくて作成したページをブラウザで表示するときにルビタグ変換すれば良いのでは?
という考えが浮かびました。

|文字列《もじれつ》

というパターンが現れた場合、"|"を<ruby>に置き換え、"《"を<rp>(</rp><rt>に置き換え、"》"を</rt><rp>)</rp></ruby>に置き換える。
このような処理をSmartyかjQueryで実現できないでしょうか。

言葉に書くことはできましたが、それをコード化するには私の知識が足りないためにできませんでした。
この辺りに詳しい方がおりましたらヒントや解決方法などご教授いただければと思います。

ちなみに、上記のパターンはなろうなどで使われている手段を参考にしています。
対象の記号は半角全角どちらも使えること、
"|"が現れてから全角10文字または20バイト以内に"《"が現れなかったときは処理キャンセル、
"《"が現れてから全角20文字または40バイト以内に"》"が現れなかったときはキャンセル、
という条件を付けると処理が閉じない等のトラブルが防げるかと。

是非お願い致します。

南方かおり (2014/11/25 16:37)

URL : http://holydragoon.jp/

Meifea様

こんにちは。
SmartyかjQueryを利用して|文字列《もじれつ》を<ruby><rb>文字列</rb><rp>(</rp><rt>もじれつ</rt><rp>)</rp></ruby>に変換できないかということですが。
当方はJQueryやJavaScriptにはあまり詳しくないので、Smartyのプラグインの機能を使って実現できないか試行錯誤してみました。

結果。以下のスクリプトで実現できました。

	if (preg_match_all("/[\||].+《.+》/um", $string, $matches)) {
		foreach ($matches as $match) {
			$str_ruby = preg_replace("/\|||/", "<ruby>", $match);
			$str_ruby = preg_replace("/《/", "<rp>(</rp><rt>", $str_ruby);
			$str_ruby = preg_replace("/》/", "</rt><rp>)</rp></ruby>", $str_ruby);
		}
		
		$count = count($str_ruby);
		for ($i = 0; $i < $count; $i++) {
			$matches[0][$i] = preg_quote($matches[0][$i], '/');
			if (preg_match('/' . $matches[0][$i] . '/u', $string)) {
				$string = preg_replace('/' . $matches[0][$i] . '/um', $str_ruby[$i], $string);
			}
		}
	}

(ちょっと力技のような気もしますが・・・。もっとスマートな書き方がありましたら、どなたかご教授ください)

ただし、上記スクリプトではMeifea様がおっしゃっていた文字数を超えたり文字列のバイト数が多かったりしたら動作をキャンセルという機能はつけていませんし、
(1行目のpreg_match_allでルビタグに変換するための文字列のセットが一通りそろっているか判定しているため)
ルビタグの開始位置に挿入する|に関しては半角全角両方とも使えるようにしてありますが、
二重山括弧(《》)に関しましては、全角のみしか変換しないようにしてあります。
(理由は半角だと通常のhtmlタグ(<>)が二重に書かれているとブラウザに誤認されるためです)

上記スクリプトをSmartyのmodifierプラグインとして仕立て、変換表示のテストページを当方のサイトに掲載してありますので、ご参考までにご覧いただければ幸いです。
http://holydragoon.jp/freotips/php/ruby_replace
freoTIPS ~ Smarty用プラグイン『ルビタグ変換プラグイン』のテスト ~ | 龍の棲む場所

Meifea (2014/11/25 21:06)

URL : http://nijikana.net

南方さおり様
このたびはありがとうございます。

早速、コードを利用させていただき、サイトの方に実装してみました。
テストではうまくルビ振りしてくれて、複数でも問題なく変換してくれました。
この後しばらくはサイトを利用してくれている作者の皆様に運用してもらいながら様子を見てみたいと思います。

返信

  • この記事に返信します。
  • 返信の際は、設置URL以外の項目は入力必須です。
投稿フォーム
名前
設置URL
本文(本文の装飾について
編集キー(投稿した記事を編集する際に使用します。)
投稿キー(スパム対策に、投稿キー を半角で入力してください。)