どんなアプリケーション？
ひらがなの書き方を練習する紙を印刷するためのアプリケーションです。
なんでつくったの？
社内でアプリデプロイチャレンジというイベントがありました。
このイベントをきっかけに作りました。
特徴
印刷したらA4にぴったり
印刷して使うことを想定しています。
ブラウザの表示内容は印刷するとくずれがちです。
A4用紙にあわせて印刷出来ます。
フォントが教科書体
日本語になれていると気がつきませんが、
書き方の初学者にはOSのデフォルトフォントの書体は難しいです。
読みやすくはあるのですが、クセがあるため学習上は問題になります。
たとえばメイリオの「ふ」はこのような字体です。
字の練習用としてみると次のように不自然な点があります。
- 1画目が水平すぎる
- ハネがない
- 3画目が反っている
教科書体を採用しました。
具体的にはGoogleフォントを使ってKlee Oneを表示しています。
Klee Oneの「ふ」はこのような字体です
どんなところで苦労した？
A4用紙
現代ではスタイルシートでA4が指定出来るのです。
実は簡単でした。
@page {
size: A4 portrait;
}
縦書き
これもスタイルシートで指定出来るので簡単です。
.content {
writing-mode: vertical-rl;
}
色
文字色を灰色に設定すると、黒字で印刷されることがあります。
文字色に透過を設定すると薄く印刷されます。
.content {
color: rgba(238, 238, 238, 0.496);
}
十字の点線
ChatGPTと相談したところ、before/after要素でボーダーを表示すると実現出来ました。
.charactor::before,
.charactor::after {
content: "";
position: absolute;
border: 1px dashed cyan;
z-index: 1;
}
.charactor::before {
width: 0;
height: 100%;
left: 15mm;
}
.charactor::after {
width: 100%;
height: 0;
top: 15mm;
}
動作
一文字ずつ四角で囲ってあります。
四角はdivでレンダリングされています。
<div class="charactor">
<span>
も
</span>
</div>
文字列を分割して、divで囲って、HTMLとしてレンダリングするロジックがあります。
このロジックをRubyで書いています。
ruby.wasmをつかってRubyをブラウザ上で動かしています。
ruby.wasmに合ってたところ
ERB
HTMLのレンダリングにERBが使えるのが便利です。
たとえば前述のdivは次のようにレンダリングできます。
template = ERB.new(<<~'END_HTML')
<div class="charactor">
<span>
<%= charactor %>
</span>
</div>
END_HTML
template.result_with_hash charactor: 'も'
サーバーがない
このアプリケーションはサーバーなど外部と通信をする必要がありません。
ruby.wasmが苦手なところを扱わないですみました。
改善したい点
次の点を改善したいと思っています。
スマートフォンで見たときの初期表示
スマートフォンで開くと、画面の横幅をはみ出して表示されます。
拡大縮小できるので、使えなくはないですが、少し不便です。
クエリストリング
印刷する文章はランダムで表示している初期文章か、input要素で入力した文章です。
クエリストリングで指定できるようにすると、シェアしやすくなって良さそうだと思っています。