Word

Hi, I detected your main language is not Japanese. I have an english version of about me, so please try it!

この投稿は6年半前の記事です。 情報が古くなっている可能性があるので、その点ご了承ください。
2010 年 8 月 20 日 2,548日前)
1,248文字 (読了時間3分)

SPONSORED LINK

というわけで、WordPressでrubyタグを挿入できるプラグインを作りました。

WP-Yomiganaのダウンロード

たぶん動くんじゃないかと思います。名前はWP-Yomiganaです。

WP-Yomiganaの見栄え
WP-Yomiganaの見栄え

見てくれはこんな感じ。TinyMCE Advancedとかと一緒に使っても多分大丈夫です。

動かなかったら教えて下さい。

rubyタグ挿入プラグインを作った理由

現在WordPressベースでワンソース・マルチユースを実現すべく、コンテンツを色んなフォーマットで書き出すものを作っています。これはその一環です。

なぜWordPressベースかというと、僕が使い慣れているために拡張が楽なのと、管理画面がついているからです。

自分でWebアプリ作ったりすると、管理画面を作るだけでものすごい工数がかかるので、あり物を使った方が楽だったりするんですね。

とはいえ、WordPressが採用しているwysiwygエディタTinyMCEっていうのは、やっぱり外国の人が作っているわけで、ルビとか心の底から興味なかったりします。

そこで、プラグインとして作った訳ですね。

今後の予定

いまのところ、rubyタグだけですが、今後は圏点とか縦中横とかもサポートしていきたいですね。

追記@2010-08-21

GithubにWP-Yomiganaのリポジトリを作っておきました。Git便利ですね!

現状のRubyタグサポート状況 追記@2011-07-08

現状、こんな感じの認識でRubyタグサポートのCSSを作っています。主要ブラウザはサポートできるようなので、もう使ってってもいいかもですね。

ブラウザ バージョン・OS ネイティブでrubyをサポート CSSでrubyっぽくできる
Internet Explorer ver.6 〜
Chrome ver.12 〜
Safari ver.5 〜
iPad iOS 4.3〜
iPhone, iPod Touch iOS 4.2〜 △(ブロック要素になる)
Firefox ver. 4〜
Opera ver. 11.50 △(vertical-alignが効かない)

CSSでサポートというのは、CSS3から採用されたinline-tableなどの手法を使って実現できるか否かというものです。詳しくはgistに挙げてありますので御覧ください。FirefoxやMobile Safariなどはこれで対応出来ました。Androidは未検証ですが、CSSでイケるかもしれません。
間違いなどありましたら、報告お願いいたします。

追記@2012-01-27

公式リポジトリにアップしておきました。

http://wordpress.org/extend/plugins/wp-yomigana/

 

SPONSORED LINK

この記事について

この記事はが2010 年 8 月 20 日にプログラミングの記事として公開しました。

フォローしてください

ここで会ったのもなにかの縁。
高橋文樹.comの最新情報を見逃さないためにもフォローをお願いします。
めったに送らないメルマガもあります。

  • 加藤保久(blugra_oyaji)

    ルビふりプラグインすばらしいです。これからどんどん必要になります。まちがいないです。

    • コメントありがとうございます。
      TinyMCEはうまく調教すれば色々とできそうなので、これからも引き続き開発してきます。乞ご期待!

  • yukkun20

    WordPressの編集ページでrubyタグを使うと、HTMLエディタではうまく行くんですが、ビジュアルエディタに切り替えるとルビが全て飛んでしまうという問題に悩まされ、解決法を探すうちにこのサイトにたどり着きました。
    ルビを大量に使うサイトを営んでいるので、早速プラグインを導入させてもらいました。アップロードまではうまくいき、プラグインを有効化できたのですが、有効にしても、ビジュアルエディタにボタン([る])が表示されません。TinyMCE Advancedも使用しているのですが、設定>TinyMCE Advancedを見てもやはり表示されませんでした。もしかしてTinyMCE Advancedとの相性が良くないのかと思い、TinyMCE Advancedを無効化したり再インストールしたりしてみたのですが、やはりかわりませんでした。
    Wordpressのバージョンは3.1.4、TinyMCE Advancedは3.3.9.2(日本語化はうまくできていません)、ブラウザはIE7です。
    もし解決方法をご存知であればお教え願えないでしょうか。お手数おかけして申し訳ありません。

    • yukkun20さん
      こんにちは。ビジュアルエディタの右側にある展開ボタンを押したら三段目に「る」ボタンが出るのですが、どうでしょうか。
      こちらの環境ではTinyMCE Advancedと一緒に使っても問題ありません。ただ、TMAの設定画面には表示されないです。
      あとはキャッシュですかね。TinyMCEはキャッシュファイルを生成するはずなので、いちどブラウザのキャッシュを削除いただければと思います。
      http://faq.blog.so-net.ne.jp/1101
      ちなみに、プラグインの最新版はこちらです。
      https://github.com/fumikito/WP-Yomigana/zipball/master
      ちょっと放置気味だったので、開発頑張ります。

      • yukkun20

        ありがとうございます。プラグインを最新のものに入れ替え、ビジュアルエディタの展開も確認し、ブラウザのキャッシュも削除してみたのですが、やはりうまく行きませんでした。
        いろいろ実験したところ、
        ・TMAを停止しWP-Yを有効化すると、ビジュアルエディタのメニュー部分が2行(展開時は3行)で表示されるが、一番下の行は空欄になっている
        ・TMAとWP-Yを両方とも有効化し、TMAの3段目になにかのアイコンを置くと、ビジュアルエディタのメニュー部分が2行(展開時は3行)で表示され、一番下の行にはそのアイコンのみが表示される
        ・TMAとWP-Yを両方とも有効化し、TMAの3段目に何のアイコンも置かないと、ビジュアルエディタのメニュー自体が表示されなくなる
        という感じになっています。

        お手数おかけし申し訳ありません。お暇な時で構いませんのでお目通しいただければ幸いです。これからの開発も楽しみにしています。

        • > yukkun20さん
          お返事遅れてすいません。
          ご指摘いただいた内容ですと、「ビジュアル・エディタの3段目になんらかの要素が挿入されている」という状況には鳴っているようですので、以下の方法で問題を絞り込んでみてください。
          ・WP-Yomiganaで3段目が作成されるようにする
          ・FirebugなどのDOMを確認できるツールで、3段目が空っぽなのかそうではないのかを確認する
          もし3段目に何かが出力されているようでしたら、それを教えてください。もしかしたら、画像のパーミッションが変なのかもしれません。

          もう一つ、HTMLエディタでrubyタグを書いてみて、それがビジュアルエディタに移行したときに消えてしまうかどうかを確認してみてください。
          もしビジュアルエディタに移行してもrubyタグが消去されない場合は、プラグインがある程度ただしく動いているということになります。

          あと念の為ですが、お使いのFTPツールとWebサーバも教えてください。

          • yukkun20

            ありがとうございます。

            ・私は普段unDonutというIEコンポーネントブラウザを使用しており,以前に書いた現象は全てこのブラウザによるものです(ちなみにIEでも同じ現象が起こります)
            ・Firefox環境もあるのでそれで試してみたところ,WP-Yomiganaを有効化すると,①ビジュアルエディタのメニュー部分全てが表示されない(空っぽになるという意味ではなく,文字通りメニュー自体がない),②テキスト入力部分のデフォルトの文字色が白になってしまい,反転しないと読めなくなる,という不具合が起きました。プラグインを無効化すると元に戻ります。
            ・一応Firebugを導入してDOMを試してみたのですが,素人の悲しさかどこを見ればいいのかよくわかりませんでした。すいません。
            ・画像やプラグインのパーミッションについては僕も初期から気になっていて,適切に調整したつもりなのですが,やはり変わりませんでした。
            ・HTMLエディタでrubyタグを書くと,WP-Yomiganaを有効化していればビジュアルエディタでもキチンとルビが乗った形で表示されます。ただその際に,rpタグは無視されました。ちなみに再度HTMLエディタに戻ると,やはりrpタグは消えていました(もしかすると仕様でしょうか?)。
            ・FTPツールはFFFTP,WebサーバはExpressweb(下記リンク)です。サーバはWindows系です。またExpresswebはウェブサーバとデータベースサーバを物理的に分けているため,以前も特定のプラグインがうまく動かない事がありました(WP-DBManager)ので,それが原因かも知れません。
            http://www.epw.jp/tabid/77/Default.aspx

            よろしくお願いいたします。

  • Pingback: WordPressの投稿画面とうこうがめんでルビ(ふりがな)を付けるプラグインWP-Yomiganaのご紹介 – Peax()