Windowsストア アプリ 縦書きビューワー Vol.1 ～アプリのテンプレート～
マイクロソフトの田中達彦です。
本連載では、過去の名作や自分の著書などをWindowsストア アプリ化するための縦書きビューワーについて説明します。
[注意事項] テンプレートを使用される前に、必ずお読みください
このテンプレートファイルまたはプロジェクトファイルはサンプルとして公開され、使用条件は以下のMicrosoft Limited Public Licenseに準拠します。
https://msdn.microsoft.com/ja-jp/gg415737.aspx#P
ただし、以下の条件下での使用のみを許諾します。
- Windows ストア アプリ、またはWindows Phone用のアプリを作成するために使用すること。
- 作成するアプリは1作品ごとに作成し、複数の作品をまとめたアプリを作成しないこと。(判定基準としては、1つのテキストファイルの内容のみを表示させるアプリであること)
- 本テンプレートまたはプロジェクト ファイルを使用または応用、または改変し、汎用的なビューワーを作成しないこと。すなわち、ユーザーが任意のファイルを選択し、表示させることができる機能を実装しないこと。
- 上記の条件に合致していれば、本テンプレートまたはプロジェクトファイルを使用または応用、または改変してアプリを作成し、無償、有償を問わず公開できます。
- アプリを公開した際に、公開した旨を作成者である田中達彦、またはマイクロソフトに報告しなくても構いません。
- アプリを公開したことで何らかの被害が生じた場合、田中達彦、またはマイクロソフトは責めを負いません。自己責任にてアプリを公開するようお願いいたします。
[2013/4/18 変更]============================
テンプレートを一部修正しました。
最新の場所は1.64です。
修正点は、テキストファイルを読み込む場所です。
場合によってはアプリが起動しないことがありました。この現象を回避しています。
なお1.63のテンプレートを使用していてアプリが起動しない場合は、アプリを強制終了(アプリの上端をつかんで、下までおろす)して、再起動してください。
=========================================
[縦書きビューワーとは]
やはり名作などは横書きではなく、縦書きで読みたいですね。
WinRT APIには縦書きの機能がないため、テキストファイルの内容を縦書きで表示するためのアプリのテンプレートを作成しました。
このテンプレートを使用すると、以下のように縦書きで読めるアプリを作成できます。
このテンプレートには、文字の大きさや行間の広さを変えたり、ふりがなの表示/非表示を切り替える機能や、フォントを変える機能を実装しています。
白地に黒い文字だけではなく、黒字に白い文字で表示させることもできます。
自分の好みの設定を保存することもできます。
[使用方法]
アプリを作成するためには、Windows 8の環境と、Visual Studio 2012が必要です。
アプリの作成方法は、以下のとおりです。
1. 本ブログ記事に添付している.zipファイルをダウンロードします。
2. .zipファイルを解凍せずに、ドキュメント フォルダーの下の
Visual Studio 2012\Templates\ProjectTemplates\Visual C#
にコピーします。
3. Visual Studio 2012を起動し、メニューの[ファイル]-[新規作成]-[プロジェクト]を選択します。
Visual Studio Expressを使用している場合は、[ファイル]-[新しいプロジェクト]を選択します。
4. [新しいプロジェクト]ダイアログが表示されたら、左側のテンプレートでVisual C#を選択し、中央に表示されているプロジェクトの中から、[AozoraReader1.63]を選択します。
5. [名前]の部分に作成したいプロジェクト名を入力して、[OK]をクリックします。
6. そのままアプリを実行すると、芥川龍之介の芋粥が表示されます。
7. アプリ化したいテキストファイルを用意し、メモ帳で開きます。そして、text.txtという名前で保存します。保存するときは、[ファイル]-[名前を付けて保存]を選択し、以下の文字コードの部分を必ずUTF-8に変更して保存してください。
メモ帳以外のテキストエディターを使用すると、改行コードの扱いが異なる場合があるため、アプリが正常に動かない可能性がでてきます。
8. Package.appxmanifest を開き、[アプリケーションUI]タブにある表示名、説明を変更します。また、ロゴ、ワイド ロゴ、小さいロゴ、ストア ロゴ、スプラッシュ スクリーンの情報や画像データを変更します。
9. [パッケージ]タブにある[証明書の選択]をクリックし、使用する証明書を選択します。
証明書を持っていない場合は、Visual Studioで新規のWindowsストア アプリのプロジェクトを作成し、そこで自動的に作成された証明書を流用してください。その場合は、[証明書の構成]ボタンをクリックし、[ファイルから選択]を選び、新しく作成したプロジェクトで使用している証明書を選択します。
以下は、アプリ完成後の流れです。
10. Windowsストア アプリの開発者ダッシュボードを開き、新しいアプリとして登録します。
11. [プロジェクト]-[ストア]-[アプリ パッケージの作成]で、ストア用のアプリパッケージを作成します。Package.appxmanifestの発行者表示名などは、ストアに登録していた情報に置き換わります。
12. 開発者ダッシュボードに必要事項を入力し、アプリの公開の申請を行います。
[青空文庫で提供されている原稿を使う方法]
青空文庫とは、利用に対価を求めない、インターネット電子図書館です。
https://www.aozora.gr.jp/
青空文庫に収録されている作品をアプリ化するときは、必ず事前に下記の「青空文庫収録ファイルの取り扱い基準」を熟読し、基準を順守してください。
https://www.aozora.gr.jp/guide/kijyunn.html
青空文庫には、著作権が消滅してしまった作品と、「自由に読んでもらってかまわない」とされている原稿があります。
著作権の切れていない作品の再配布はできませんので、そのような原稿を使用したアプリは絶対に作成しないでください。
青空文庫で提供されるファイルを使用するときは、以下の方法でご使用ください。
1. アプリ化したい作品の図書カードを開きます。
2. [ファイルのダウンロード]を選択し、テキストファイル(ルビあり)のファイルをダウンロードします。
3. ダウンロードしたファイルを展開し、メモ帳で開きます。
4. テキストファイルの最初のほうにある、以下のような説明の部分をまるまる削除します。この部分が残っていると、アプリが正常に動きません。
-------------------------------------------------------
【テキスト中に現れる記号について】
《》：ルビ
（例）御代《みよ》
｜：ルビの付く文字列の始まりを特定する記号
（例）深い御｜愛寵《あいちょう》
［＃］：入力者注 主に外字の説明や、傍点の位置の指定
（例）［＃地から３字上げ］
-------------------------------------------------------
5. 必要に応じてテキストファイルを修正します。
編集が必要な部分と、不必要な部分は以下のとおりです。
変更がいらない部分
- ルビは、そのまま残してください。手を入れる必要はありません。ルビの付く文字列の始まりを示す｜という記号にも対応しています。
変更が必要な部分
- JIS第3水準、JIS第4水準などの漢字を使っている原稿には、
※［＃「虫＋廷」、第4水準2-87-52］
というような表記があります。この※と［ ］で括られた箇所をまるまる削除し、代わりに該当する漢字を入力します。
例えば、原稿中に以下の文章があった場合、
(変更前) 蜿※［＃「虫＋廷」、第4水準2-87-52］《えんえん》たる流れが
以下のように第4水準の漢字を打ち込んで、変更します。
(変更後) 蜿蜒《えんえん》たる流れが
この場合は「えんえん」と入力して変換すると漢字に変換されますが、単純に変換できないときはIMEパッドを使用して入力してください。
- 傍点は、以下のように原稿を変更してください。傍点を打つ文字に、1文字ずつ《●》を入れます。
(変更前) それからまた、びいどろ［＃「びいどろ」に傍点］という
(変更後) それからまた、び《●》い《●》ど《●》ろ《●》という
これら以外に、文字下げ、文字上げ、太字などにも対応しています。
それらの処理については、次回の記事で紹介します。
6. ファイルをtext.txtという名前で保存します。そのときに、文字コードをUTF-8にしておきます。
[関連記事]
Windows ストア への道
エイッと作ろう! Windows ストア アプリ選手権
今回公開するテンプレートを使用して作成したアプリも、上記のコンテストに応募できます。
このコンテストは、アプリの登録数の多い順に賞金が支払われます。
締め切りは2013年5月8日です。この日までに公開されたアプリが対象です。
ぜひご応募ください。
[連載記事一覧]
第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
独自に特殊処理を追加する方法を説明します。
マイクロソフト
田中達彦
Comments
- Anonymous
January 08, 2014
The comment has been removed - Anonymous
January 08, 2014
Windows 8.1/VS2013で試してみましたが、同じ現象は出ませんでした。 環境等をお聞きしたいので、右上にある[ブログ作成者に電子メールを送信]を使用して、私宛にメールをいただけないでしょうか。 違う現象としては、「マウス」という文字が入ったファイルでエラーが出ていますので、その現象については「マウス」と書かれたところを「Mouse」に変更するとエラーが出なくなります。 よろしくお願いいたします。