Xamarin.Formsで縦書きアプリ

1. 「Xamarin.Formsで縦組みアプリを作る」
JXUGC#17 お前の(開発中の)Xamarinアプリを見せてみろ！
2016.10.15
株式会社ケイ・ジェイ・システムズ
藤森 智

2. 自己紹介
名前：藤森 智（ふじもり さとる）
所属：株式会社ケイ・ジェイ・システムズ
仕事：古典データの検索サービス、辞書・辞典や電子書籍の
データ製作・WEB製作など
Xamarin歴：2年ほど(ライセンス歴)。スマホ開発未経験。Xamarinを始めてみて
己のC#のレベルの低さを痛感する日々。LINQ,async,XAML,MVVM,NuGet,github
等々まったく知らないところから開始。
趣味：料理、おでんづくり
Twitter：@masatoru
Blog：http://masatoru.hatenadiary.jp/

3. Xamarin.Formsで縦組みアプリ
SkiaSharpを使って縦組みを実現
CustomRendererの実装
Viewと各コントロールの関係（MVVM,Binding）

4. SkiaSharp
Cross-Platform 2D Graphics Library
Xamarinが推奨
日本語情報が少ない
https://skia.org/

5. SkiaSharpを使って縦組みで書く
1文字ずつX,Yを指定して文字を描画する
ルビ、半角数字の縦中横、禁則、上付、下付等
SkiaSharp.SKCanvas.DrawTextメソッド
public void DrawText(string text, float x, float y, SKPaint paint);
public void DrawText(IntPtr buffer, int length, SKPoint[] points,
SKPaint paint); //GlyphID用
縦組みの文字を描画する（括弧、句読点、用促音など）
TypeLoader(https://github.com/espresso3389/TypeLoader)
→TategumiViewを作った

6. TategumiViewとRendererの関係
NativeView
Draw()
NativeView
OnDraw()
NativeView
UpdateBitmap()
ネイティブ側
TategumiVie
w
Draw()
iOS Android UWP
Forms側
Renderer RendererRenderer
BindableProperty
→PageIndex（ページ番号）
CurrentPage（組版ページ）
Width,Height
（VisualElement）
Touch(Android)
UITapGestureRecognizer(iO
S)
→タップしたらページ移動
NextPage,PreviousPage
OnElementPropertyChange
d
→組版ページが来たら描画
Invalidate(Android)
SetNeedsDisplay(iOS)

7. TategumiViewとその他のコント
ロールの関係(Binding)
・タグ(XML)の読み込み
・デバイスのサイズ
に合わせて組版
・ページを描画する
ユーザーの操作
例）目次を選択→本文を表示
ページを切り替え 等々
Model(BookManage
r)
ViewMode
l
View(TategumiView
）
Event
PageLis
t
ParagraphList
組版
1ページ分
Compos
e
Read
View
・目次の読み込み
・フォントサイズ、行間

8. XAML
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage SizeChanged="HonbunPage_OnSizeChanged" …>
<StackLayout …>
<local:TategumiView VerticalOptions="FillAndExpand"
CurrentPage="Binding CurrentPage.Value}" ←組版ページ
PageIndex="{Binding Path=PageIndex.Value,Mode=TwoWay}" ←ページ情
報
Width="{Binding TateViewWidth.Value} " ←View高さ
Height="{Binding TateViewHeight.Value}"> ←View幅
</local:TategumiView>
<StackLayout Orientation="Horizontal" VerticalOptions="End">
<Slider VerticalOptions="Center" HorizontalOptions="FillAndExpand"
Minimum="0" Value="{Binding
Path=PageIndex.Value,Mode=TwoWay}"/>
<Label Text="{Binding PageIndex.Value}"/><Label Text="/"/>
<Label Text="{Binding PageNum.Value}"/>
</StackLayout>
</StackLayout>
</ContentPage>

9. ユーザーの操作からBindingして
Viewに表示するまで
目次を選択して本文を表示する
Viewをタップしたらページを移動する
環境設定で文字サイズを大きくしたらViewの文字を大きくする
回転したらデバイスの高さに合わせて再描画する

10. 最後に
#Xamarinはいいぞ
ReSharperがあればなおgood
#JXUGはすばらしくいいぞ

11. ご清聴ありがとうございました。