Windowsストア アプリ 縦書きビューワー Vol.5 (最終回) ～特殊処理の追加～
マイクロソフトの田中達彦です。
本連載では、過去の名作や自分の著書などをWindowsストア アプリ化するための縦書きビューワーについて説明します。
[特殊処理とは?]
この縦書きビューワーには、ふりがなの表示や文字下げ、傍点などの機能があります。
しかし、作品によってはこれらの機能だけでは作品を表現できないことがあります。
例えば、宮沢賢治の風の又三郎では、以下のように黒板に板書している場面があります。
(1366x768の画面の場合、全38ページ中の11ページめ)
ここでは、17x4という計算式を黒板に書いています。
縦書きビューワーが挿絵に対応していれば、挿絵である程度カバーできるところです。
しかし、縦書きビューワーには挿絵の機能はありません。
表示する挿絵を何らかの画像データで用意し、その画像データを表示する機能を付けたとしても、文字の明るさや紙面の明るさの変更に対応させるのはちょっと難しいです。
風の又三郎の例では、以下のコードを用意することにより、板書の形式を実現しています。
// 風の又三郎 スペシャルコード
string special11 = "25\n-12\n￣";
string special12 = "17\n×4\n￣";
// 風の又三郎 スペシャルコード
if (s == "①" || s == "②")
{
if (s == "①")
s = special11;
else
s = special12;
HonbunChar[x, y].Width = HonbunFontWidth * 1.3;
HonbunChar[x, y].FontSize = HonbunFontSize / 1.5;
HonbunChar[x, y].TextAlignment = TextAlignment.Right;
HonbunChar[x, y].TextWrapping = TextWrapping.Wrap;
}
else
{
HonbunChar[x, y].Width = HonbunFontWidth;
HonbunChar[x, y].FontSize = HonbunFontSize;
HonbunChar[x, y].TextAlignment = TextAlignment.Center;
HonbunChar[x, y].TextWrapping = TextWrapping.NoWrap;
}
原稿中に特殊処理をする文字を用意しておき (この場合は①と②)、その文字があったときにTextBlockを変化させて複数の改行入り文字を表示させています。
板書の文字をTextBlockで表示していますので、文字の明るさの変更にも対応します。
風の又三郎の特殊処理では、TextBlockの大きさを大きめにして、その中で表示させる文字の大きさを小さくし、さらに改行をさせることにより、板書を実現させています。
[特殊処理を入れる場所]
特殊な処理は、SetTextメソッドの以下のコードの直前に入れるのがよいでしょう。
// ここで文字を描画
HonbunChar[x, y].Text = s;
textindex++;
先ほどの風の又三郎の特殊処理も、この場所に入れています。
上記の部分は、画面上に貼りつけているTextBlockに文字を代入しているところです。
代入する直前に、文字やTextBlockに細工をします。
[特殊処理の例 : 特別な漢字の表示]
以下は、坂口安吾の堕落論のコードの一部です。
これは、蜒という文字を表示させるためのコードです。
// 堕落論 スペシャルコード
if (s == "虫")
{
s = "虫延";
ct.ScaleX = 0.5;
HonbunChar[x, y].RenderTransform = ct;
HonbunChar[x, y].Width = HonbunFontWidth * 2;
}
else
{
HonbunChar[x, y].Width = HonbunFontWidth;
}
// ここで文字を描画
HonbunChar[x, y].Text = s;
textindex++;
堕落論をアプリ化していた当時、青空文庫の原稿の注意書きにあるような、JIS第3水準や第4水準の漢字をWindows 8で表示できると知りませんでした。
蜒という文字は、「えんえん」と入力して変換すると「蜿蜒」になり、普通に入力できます。
すなわち、原稿中に「蜒」という文字を入れておけば、上記のような特殊コードを入れなくてすみます。
この特殊処理では、「蜒」という漢字を「虫延」をいう2文字の文字を横半分に潰すことによって実現しています。
本文中に「虫」という漢字が出てこないため、「虫」を特殊コード代わりに使用し、「虫」という漢字が出てきたら「虫延」に変更します。
そして、横方向の縮尺を半分にし、横幅を2倍(2倍されたものが半分に縮小されるため、最初の大きさと同じになります)に変更しています。
2つの文字を組み合わせた文字であれば、この方法で表示させることができます。
なお、特殊コードとして「①」のような文字でなく、「虫」という文字を使用している理由は、「蜿蜒」にかかるふりがなである「えんえん」の表示位置の調整のためです。
「①」のようなコードを使うと、「えんえん」のふり先の判定時に漢字ではない「①」の後にふりがなを打とうとしてしまうため、漢字である「虫」を特殊コードとして使用しています。
[特殊処理の例 : 返り点]
源氏物語の乙女では、本文中に以下のような返り点があります。
左側に小さくなっている「一」と「二」が返り点です。
この返り点も、以下の特別なコードを用意して実現しています。
// 源氏物語 乙女 スペシャルコード
if (s == "壱" || s == "煮")
{
if (s == "壱")
s = "一";
else
s = "二";
HonbunChar[x, y].FontSize = HonbunFontWidth / 2;
HonbunChar[x, y].TextAlignment = TextAlignment.Left;
ct.TranslateY += HonbunFontHeight / 6;
HonbunChar[x, y].RenderTransform = ct;
lineAdjust -= HonbunFontHeight / 2.5;
}
else
{
HonbunChar[x, y].FontSize = HonbunFontWidth;
HonbunChar[x, y].TextAlignment = TextAlignment.Center;
}
// ここで文字を描画
HonbunChar[x, y].Text = s;
textindex++;
ここでも、ふりがなの関係で「①」や「②」の文字を使わずに、「壱」、「煮」(「弐」は本文中で使用されているため)という本文で使用されていない文字を特殊コードとして使用しています。
TextBlockの文字の大きさを小さくし、左詰めにすることで、返り点を表現します。
さらに文字の位置を少し上にずらしています。
lineAdjustというフィールドは、縦方向の座標の補正用に使われます。
例えば句読点などの縦方向の高さを他の文字と同じにすると少し間延びして見えるので、このlineAdjustフィールドを使用して少し高さを縮めて読みやすくしています。
返り点も他の文字と同じ高さにしてしまうと間延びするので、高さを縮めています。
このように、特殊処理を施すことにより、テンプレートに用意してある機能だけでは表現できない文字を表示させることができます。
[連載記事一覧]
第1回 : アプリのテンプレート
https://blogs.msdn.com/b/ttanaka/archive/2013/04/11/windows-vol-1.aspx
アプリのテンプレートを提供するとともに、使用するときの注意事項、使用方法を説明しています。
第2回 : 青空文庫のアプリ化
https://blogs.msdn.com/b/ttanaka/archive/2013/04/12/windows-vol-2.aspx
文字下げ、文字上げなどの特殊処理を行う方法を説明しています。
第3回 : タイルの作成
https://blogs.msdn.com/b/ttanaka/archive/2013/04/12/windows-vol-3.aspx
アプリを公開する際に必ず用意しないといけないタイルの作成方法を説明します。
第4回 : プログラムの説明
https://blogs.msdn.com/b/ttanaka/archive/2013/04/15/windows-vol-4.aspx
どのような方法で縦書きを実現させているのかを説明します。
第5回 : 特殊処理の追加
https://blogs.msdn.com/b/ttanaka/archive/2013/04/17/windows-vol-5.aspx
独自に特殊処理を追加する方法を説明します。
マイクロソフト
田中達彦