C# VSTO Add-inでWordのルビをHTMLのタグに変換する

HTMLの<ruby>タグを漢字のふりがなを表示するために時々使っていますが、結構便利です。
ただ、いちいちHTMLコードを書くのが面倒で、何か良い方法がないかと考えたときに、Wordが目に入りました。
Wordにもルビを振る機能があって、しかも半自動的にふりがなをつけてくれます。Wordでルビを振った文章をHTMLコードに変換する簡単なWord Add-inを作りました。

目次

完成形と使い方

画面イメージ

完成形はWordにMy Toolsというリボンタブが追加されて、中にExport<Ruby>ボタンがあります。 

WordのルビをHTMLのrubyタグに出力する


使用手順

  1. Wordでルビを振る文章を用意し、Wordのルビ機能を使ってルビを振ります。
  2. 出力したい部分を選択してExport<Ruby>を押します。
  3. これでHTMLコードがクリップボードにコピーされます。

出力されたHTMLコード

<ruby>今日<rp>(</rp><rt>きょう</rt><rp>)</rp></ruby>は<ruby>良<rp>(</rp><rt>よ</rt><rp>)</rp></ruby>い<ruby>天気<rp>(</rp><rt>てんき</rt><rp>)</rp></ruby>です。
<ruby>百舌鳥<rp>(</rp><rt>もず</rt><rp>)</rp></ruby>が<ruby>飛<rp>(</rp><rt>と</rt><rp>)</rp></ruby>んでいました。
<ruby>青空<rp>(</rp><rt>そら</rt><rp>)</rp></ruby>は<ruby>綺麗<rp>(</rp><rt>きれい</rt><rp>)</rp></ruby>でした。

ブラウザーでの表示効果

今日(きょう)は良(よ)い天気(てんき)です。 百舌鳥(もず)が飛(と)んでいました。 青空(そら)は綺麗(きれい)でした。

まずHTMLの<ruby>タグの使い方を知る

互換性を考慮した使い方(今回これを使う)

<ruby>今日<rp>(</rp><rt>きょう</rt><rp>)</rp></ruby>

本来は<ruby>タグは<rt>とペアで、<rp>は<ruby>をサポートしない古いブラウザーのためのフォールバックです。古いブラウザーでは、ふりがなが括弧の中に表示されます。

互換性を考慮せずシンプルな使い方

<ruby>今日<rt>きょう</rt></ruby>

HTMLの<ruby>タグの使い方が分かったら、Wordの形式をその通りに変換すればOKです。

そしてWordの文書構造を理解する

Characterを理解する

VSTOアドインでは、Word文書はSentence,Word,Character単位に分けられます。
これらの単位は全部Microsoft.Office.Interop.Word.Range型(Interface)として扱えます。
改行を入れたり文書の構造に合わせて出力のフォーマットを変えるのであれば、Sentence毎に処理すれば良いと思いますが、今回はシンプルに改行なしのHTMLコードを出力するだけなので、Character毎に処理します。
このCharacterは、文字通りの1文字ではなく、Rubyがある状態とない状態により区切り方が違いますので、要注意です。 

ルビがない場合のCharacterの区切り方

ルビがある場合のCharacterの区切り方


ルビのある漢字をひとかたまりにまとめてくれるので、ちょうど好都合です。

ルビと漢字のデータ構造を知る

  • ルビのあるCharacterかどうかを調べる方法
    if (cht.Fields.Count > 0)
{
  //ルビがある場合はCharacterのFieldは1になる
  //同時にTextプロパティは一律 "\u0015"（否定応答）になる
}
  • ルビのあるCharacterの漢字とルビの保存場所
    CharacterのFields[1].Code.Textにあります。
    cht.Fields[1].Code.Text
    形式はこんな感じです:
    //"EQ \\* jc2 \\* \"Font:游明朝\" \\* hps10 \\o\\ad(\\s\\up 9(きょう),今日)"
  • ルビのないCharacterのTextを取得する方法
    Textプロパティからとるだけでシンプルです:
    cht.Text

Wordの漢字とルビデータを元データから分離する

//"EQ \\* jc2 \\* \"Font:游明朝\" \\* hps10 \\o\\ad(\\s\\up 9(きょう),今日)" からそれぞれ漢字の今日とルビのきょうをとるには、正規表現を使います。

 const string PTN_RUBY_IN_CODE = @"(?<=\()\w+(?=\))";
 const string PTN_KANJI_IN_CODE = @"(?<=,)\w+(?=\)$)";

いよいよ実装する

Visual Studioでプロジェクトを作成する

  • Visual Studioを起動し、新しいプロジェクト作成を選びます。
  • テンプレートの中からWord VSTO Add-inを選びます。
    このタイプのプロジェクトが見つからない場合は、Visual StudioのインストーラーからOffice/SharePoint開発のワークロードをインストールする必要があります。
  • プロジェクト名等を決めて、.Net Framework 4.8を選択してプロジェクトを作成します。

プロジェクトにRibbonを追加する

  • ProjectメニューからAdd New Itemを選び、リストから**Ribbon(Visual Designer)**を選び追加します。
  • UIデザイナーでRibbonのNameとLabelプロパティを指定します。
    この例では、My ToolsというLabelにしています。
  • リボンに一つのButtonを追加し、NameとLabelプロパティを指定します。
    この例ではExport<ruby>というLabelとbtnExportRubyTagとうNameにしています。

Ribbonのcsソースファイルでの準備

  • namespace usingの追加
using System.Text.RegularExpressions;
using Microsoft.Office.Interop.Word;
  • 正規表現パターンの定義
  //漢字とルビを取得するために正規表現
const string PTN_RUBY_IN_CODE = @"(?<=\()\w+(?=\))";
const string PTN_KANJI_IN_CODE = @"(?<=,)\w+(?=\)$)";

ボタンのClickイベントを実装する

private void btnExportRubyTag_Click(object sender, RibbonControlEventArgs e)
{
    Range rangeSelected = Globals.ThisAddIn.Application.Selection.Range;
    //現在選択されている文章のRangeオブジェクトを取得する
    if (rangeSelected.Characters.Count == 0)
    {//選択されていなかったら終了
        return;
    }
    StringBuilder sbRuby = new StringBuilder();
    foreach (Range cht in rangeSelected.Characters)
    {//Characterをひとつずつみていく
        if (cht.Fields.Count > 0)
        {//ルビがある場合               
            sbRuby.Append("<ruby>");
            //正規表現で漢字とルビをそれぞれ取得する
            string txtKanji = Regex.Match(cht.Fields[1].Code.Text, PTN_KANJI_IN_CODE).Value;
            string txtRuby = Regex.Match(cht.Fields[1].Code.Text, PTN_RUBY_IN_CODE).Value;
            sbRuby.Append($"{txtKanji}<rp>(</rp><rt>{txtRuby}</rt><rp>)</rp>");

            sbRuby.Append("</ruby>");

        }
        else
        {//ルビがない場合は文字だけ取得する
            sbRuby.Append(cht.Text);
        }

    }
    //結果をクリップボードにコピーする
    Clipboard.SetText(sbRuby.ToString());
}

F5を押してDebugする、問題がなければ完了

F5を押すと、Wordが起動します。先ほど作成したリボンも表示されます。

その他

Wordのルビ機能では自動的にルビを振ることができるのですが、ひらがなの部分にもルビがついてしまうようです。
例えば飛んででは、飛の上にとだけではなく、飛んでの上にとんでが振られます。調べたらこれは仕様みたいです。
使う頻度が低いので今のところ大きな問題ではないと思いますが、よく使うようになったら何か自動的に処理できる方法を考えなければですね。

コメント

コメントを投稿

個人情報を記入しないようご注意ください

このブログの人気の投稿

C# WebView2.ExecuteScriptAsync()のいくつかの使い方とDebug方法

イメージ
先日はHTMLページのスクリプトとWebView2の間の通信について触れました。 WebView2を通じてWebサーバーなしでJavaScriptからローカルファイルを読み書き HTMLページそのものは自分が作成したもので、よってスクリプトも自分の好きなようにHTMLファイルで指定できました。 しかし、もしページが自分のサイトでない場合、最初からページスクリプトの指定ができないため、拡張機能のようにContent Scriptをinjectしなければなりません。 WebView2は ExecuteScriptAsync メソッドを提供していますので、いくつかの基本的な使い方を試したいと思います。 目次 WebView2.ExecuteScriptAsyncメソッドの定義 テスト環境の準備 WebView2.ExecuteScriptAsyncメソッドの使い方 1. Script文字列をそのまま実行、戻り値なし。例： <body> 背景色を変更 2. Script文字列をそのまま実行、戻り値あり。例:HTML取得 3. JavaScriptファイルを読み込んで実行、戻り値あり。例: <img> の src を取得 4. JavaScriptファイルを読み込んで実行、戻り値あり、JS側パラメーターあり。例:C#で背景色を指定してJS側で変更 ExecuteScriptAsync を使うときのDebug方法 感想 WebView2.ExecuteScriptAsyncメソッドの定義 Task< string > ExecuteScriptAsync ( string javaScript ) ; 現在WebView2に表示されているページに string javaScript をinjectして実行する。 実行の結果を await すればJSONエンコードされた string が返される。 テスト環境の準備 Visual Studio Community 2022 WinForms プロジェクト@.Net 5 WebView2を初期化する async void InitWebViewAsync ( ) { //WebView2を初期化する await wv
Read more »

C# 外部ライブラリを使わずに半角→全角カタカナ変換

イメージ
C#で半角カタカナを全角に変換する必要が出てきて、ネットで調べてみたらVB.NETの関数や他のライブラリを使って変換する方法が多いようです。 なんとなくしたくないから、試行錯誤しながらなんとかできるようになりました。 TL;DR 簡単に言えば、半角と全角の辞書を作って正規表現でマッチするだけですが、正規表現を使うときに罠があって試行錯誤しました。 辞書を作るといえば、力仕事のように聞こえますが、Excelで簡単に作れますし、一回作っておけばずっと使えるから別に手間だと思いませんでした。 目次 半角→全角カタカナの辞書を作る Excelで辞書の本体を簡単に作る ExcelからC#ソースにコピペして辞書完成 変換関数を作る 試行錯誤 間違い修正して完成 半角→全角カタカナの辞書を作る Excelで辞書の本体を簡単に作る Excelで全角の ア だけ入力して、その他は全部数式で自動生成します。    こんな感じになります: ExcelからC#ソースにコピペして辞書完成 長いので折りたたんでおきます。 コードはこちらです。 Dictionary< string , string > dictKatakana = new Dictionary< string , string >　() { { "ｱ" , "ア" }, { "ｨ" , "ィ" }, { "ｲ" , "イ" }, { "ｩ" , "ゥ" }, { "ｳ" , "ウ" }, { "ｪ" , "ェ" }, { "ｴ" , "エ" }, { "ｫ" , "ォ" }, { "ｵ" , "
Read more »

C# WebView2を通じてWebサーバーなしでJavaScriptからローカルファイルを読み書き

イメージ
TL;DR Webサーバーを使用せずに、 file:/// でブラウザーで開かれたhtmlファイルは、JavaScriptからPCのファイルシステムにアクセスできない。 WebView2コントロールにhtmlファイルを読み込み、JavaScriptがメッセージでWebView2に指示すれば、.Netの System.IO を利用してPCファイルの読み書きが可能になる。 目次 完成イメージ わざわざC#とJavaScriptを組ませた理由 WebView2とは Step 1. プロジェクト作成 Step 2. page.htmlを作成 step 3. page.jsを作成 step 4. C#アプリ側を実装 NuGetでWebView2をインストール FormにWebView2コントロールを追加 MessageのクラスをJavaScript側と一致するように定義 MessageのStringをMessageクラス型に変換する関数を定義 FileをSaveとOpenする関数を定義 WebViewを初期化する関数を作成 最後はWebView2を初期化し、メッセージに対する挙動を指定 参考：Debug方法 C#側のDebug方法 JavaScript側のDebug方法 後書き 完成イメージ このアプリ例は以下の３つの部分に構成されている： C#で書いたWinFormsアプリ → Formに含まれるControlは WebView2 のみ Page.html →　上記WebView2のソースに指定 Page.js →　上記htmlファイルの script タグの src に指定 わざわざC#とJavaScriptを組ませた理由 確かにC#のアプリを作ればファイルシステムへのアクセスはし放題で、わざわざJavaScriptと組んでやる必要がないと思います。 自分も個人用のアプリはほとんどC#だけで作れたのですが、この前ひとつ不便を感じたので、この方法にたどり着きました。それは、 HTMLコードを生成させる機能 を実装するときでした。 C#で絶対できないわけではないのですが、やはりJavaScriptからHTMLコードを生成したほうが楽だと感じました。 ただ、自分はWebサーバーを立ち上げる
Read more »