kivyMDチュートリアル其の陸 Themes - Font Definitions篇

10709 ワード
kivymd MaterialDesign Python Python テキストリンク

みなさん、おはこんばんは。いかがお過ごしでしょうか。
花粉の影響でまたまた体調がダウン気味ですが、みなさんはどうでしょうか。
意外と街中繰り出すとくしゃみしている人がいなく肩身がせまい思いをしています。
# も、も、もちろん急を要する用事ですよ

とうとう、Themes章も最後になりました。今日はFontについてになります。
知らねーよと言われそうですが、kivyMDでうまく動かせていると気分がウキウキしてきます。
理由については今日のサンプルコードですが、それについてはこの後で。

Font Definitions

冒頭からこれを見てよね、という案内になります。
ここまでリンクがあると、最初からMaterialDesignのサイトを見たほうがいいかもですね。
これだけデザインの知識が必要となると、エンジニアもそんなの知りませんね！と言うことが
今後出来なくなるかもしれません。知らないけど。

See also
Material Design spec, The type system

https://material.io/design/typography/the-type-system.html#type-scale

斜め読みして、実際に作るってなったときは参考にした方がいいかもですね。
現時点ではサンプルを動かすくらいなので、軽く読むくらいで。

API - kivymd.font_definitions

kivymd.font_definitions.fonts

kivymd.font_definitions.theme_font_styles = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'Subtitle1', 'Subtitle2', 'Body1', 'Body2', 'Button', 'Caption', 'Overline', 'Icon']

使いかたというと、先週のIconみたくkivymd.font_definitionsをインポートすることで
fontをいろいろいじくれるようです。はい、サンプルコードもないので本日はこれで以上です。
ありがとうございましたー！



って終わってもいいのですが、これだけだと何も面白みがないので少しサンプルコードを
自分の方で作っていろいろいじくり回したいと思います。ただし、APIを把握して自由自在に
いじろうというのは無茶があるのでどうしようっていう感じなのですが、良いコードを思い出し
ました。Themes章Theming篇の最初のときにfontを紹介されていたサンプルコードになります。
えぇ、どこぅって言われそうなので場所を再掲しておきます。

kivyMDチュートリアル其の弐 Themes - Theming篇(コード載せてないけど)

[Themes - Theming - font_styles]
https://kivymd.readthedocs.io/en/latest/themes/theming/#kivymd.theming.ThemeManager.font_styles

こちらを完全に忘れていました。飛ばしたところを再度触ることができてよかったです。
今回はこちらのコードをベースに、色々いじくり回したいと思います。なので、サンプル
コードと少し異なっていますのでそのあたりを見てもらえればなぁと。

vi/icon.py
KV = '''
Screen:
    MDLabel:
        text: "JetBrainsMono"
        #text: "昔々あるところにおじいさんとおばあさんがいました。\\n\\n\\n\\n\\n\\nおしまい。"
        halign: "center"
        font_style: "JetBrainsMono"
        #font_style: "gomarice_mukasi_mukasi"
'''

from kivy.core.text import LabelBase
from kivy.lang import Builder
from kivymd.app import MDApp
from kivymd.font_definitions import theme_font_styles

class MainApp(MDApp):
    def build(self):
        LabelBase.register(name="JetBrainsMono",fn_regular="JetBrainsMono-Regular.ttf")
        #LabelBase.register(name="gomarice_mukasi_mukasi",fn_regular="gomarice_mukasi_mukasi.ttf")

        theme_font_styles.append('JetBrainsMono')
        #theme_font_styles.append('gomarice_mukasi_mukasi')

        #print(type(theme_font_styles)) # ->  <class 'list'>
        #print(theme_font_styles) # -> ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'Subtitle1', 'Subtitle2', 'Body1', 'Body2', 'Button', 'Caption', 'Overline', 'Icon', 'JetBrainsMono']

        self.theme_cls.font_styles["JetBrainsMono"] = [
                                       "JetBrainsMono",
        #self.theme_cls.font_styles["gomarice_mukasi_mukasi"] = [
        #                               "gomarice_mukasi_mukasi",
                                       32,
                                       False,
                                       0.15,
                                  ]
        return Builder.load_string(KV)

MainApp().run()

一旦、コード全体の触れ込みは入れずfontの周辺を踏み込んでいきたいと思います。
まずkv側のMDLabelですが、この辺りは良いですかねぇ(急な省エネ)。

まぁおそらく良くないとは思われるので簡単な触れ込みですが、ここでは表示文字列とそれを
センター配置させフォントの定義をしています。このフォントの定義はStandard font以外で
フォントをカスタマイズさせたい場合、クラスを宣言する方にフォントを登録する必要があります。
theme_font_style.appendってところがそうなりますね。フォントファイルを読み込むところが
LabelBase.registerなのでこの後に追加する流れとなっています。

なんかいつの間にやら、コード側も触れ込んでいますが気にしない気にしない。一旦整理し直して、
フォントの追加方法をおさらいしておくと以下のようになります。これはkivyとかpythonでもそう
なのかな、って感じですがそれほど方法は変わりないかと思われます。

  1. kivymd.font_definitionsパッケージからtheme_font_stylesをインポート
    ※LabelBaseも同タイミングでインポート
  2. フォントファイルの登録(LabelBase.register)
  3. theme_font_stylesに読み込んだフォントを追加(theme_font_styles.append)
  4. 文字の大きさとかを定義するためにtheme_clsプロパティのfont_styles
    ディクショナリーを変更する(self.theme_cls.font_styles)

3番目のtheme_font_stylesですがこちらはリスト形式になっています。printで読み取っている
ので丸わかりとは思いますが。んで、このリスト形式のフォントスタイルに入れ込みたいフォントを
追加しているのですねー。まぁこれも見たまんまですが。。今回は2つフォントを用意していますが、
まずは1つめのフォントを入れただけを表示しています。まぁ1つ入れただけで様子が分かるしで。

4番目のfont_styleディクショナリーですが、文字の大きさとかを定義するために値を入れ込んだリストを
これまたフォントキーに対するリストとして入れ込みます。リストの1番目は言うまでもなくフォント名ですが、
2番目にフォントサイズで3番目にこれは何かなと思ってましたが触ってみると大文字表記のフラグでした。
Trueにすると全ての英字が大文字になります。もちろん、英字フォントのときでしか有効ではありません。
4番目は読み解くのが苦労しましたが、マニュアルのtheme_font_stylesの記載と冒頭の案内であったよう
におそらくLetter Spacingに当たると思われます(マニュアルちゃんと見ろよってツッコまれそう)。
分からない方はググってみてください。おそらく字間や文字間ということが結果として表れると思います。

とまぁ、ほぼコード全体を触れ込んで見たわけですが、結果はどうなってんのよと思われるかもしれ
ません(すでに思われているか)。結果の方を先に載せても良いのですが、お察しの通りそれかお察さ
ないかもで現状これだけでは動きません。ですよね、フォントファイルがありません。んで動かす為に
どうしたらいいのよってところで、動かし方を説明しておきます。同じフォントがネットに転がっている
ので適当に取ってきてくださいねー、と言いたいところですがこれでは不親切というもの。なので、2つ
のフォントのありかを以下にリンクしておきます。

JetBrainsMono

JetBrains Mono: A free and open source typeface for developers |
JetBrains: Developer Tools for Professionals and Teams
https://www.jetbrains.com/ja-jp/lp/mono/#intro

昔々フォント

http://gomaricefont.web.fc2.com/font_page_mukasi_mukasi.html

これらをダウンロードしてきて、展開すると該当ttfファイルがありますのでそれを取ってもらえると！
JetBrainsMonoに関しては開発者向けのフォントになっているんですね。知らなかった。。
あとは昔々フォントですが、これも実際に動かしたものを見てもらった方がわかりやすいかもです。
# もうkv上で書かれているのでどんなことするか丸わかりですが。
両方とも商用利用可能なので、githubに載せてもいいのですがライセンス関係が面倒なのでgithub
上にはファイルがありません。なので悪しからず。

とまぁなくてもいいような説明をしたところで、実際に動かしてみましょう。
動かした様子が以下になります。

JetBrainsMono

とまぁ、マニュアルに書かれている通りですがJetBrainsMonoがこちらのようになります。

んー、これだけだとなかなか面白みがありません。というわけで日本語フォントになるとどうなるのか
試してみました。ちゃんと日本語フォントうつせんの？という疑り深い人も次の様子をみてもらえると
納得！ってなるかもしれません。んで、ただただ「こんにちは世界」とかだともっとつまらない結果に
なります。そこで、このフォントに出会えたということで日本昔話に出てきそうな表示をしてみましょう。
ただし、現時点では1画面しか分からないしで表示できる量も限られるしで全てを紹介できるほどではあり
ません。あと著作権も引っかかったら嫌だし。なので、最速で物語を終わらせましょう。我々には時間も
シビアです。

昔々フォント

どうでしょうか。この物語感を！！！
はい、そんなに出ていませんね。ただし、雰囲気が少しは感じられるかもしれません。
改行とかも出来んのかなと思っていましたが、そのあたりも問題はなさそうです。ただし方法はちょっと
汚いかもですが。というわけで、良い時間になってきたので店じまいをしたいと思います。

まとめ

さぁ、無事に今日も紹介出来ましたが、いかがでしたでしょうか。ウキウキしている様子が少しでも
分かられていればそれで満足です。というわけでThemes章も今週で終わりになります。来週からはよう
やくComponentsに入っていきます。やっと画面という画面を作っていけるわけなのですが、今からワク
ワクしています。でも量がものすっごく多いんですよね。。数えてみると40個くらいある。。続くかな。。
週1でやっていくと、大方1年間くらい掛かりますw。

なので来週からはAPIとかは少し触れるもしくは全く触らないという方向に転換しようかと思います。
動作である程度は分かってくるかと思いますし、見れば書いてあることなのでこの辺りはバシッと省略
していきます。現状週1で継続できているのでこのペースをなるべく守っていきたいですね。ということで
また長くなりそうなので、まずはこれにて。

それでは、ごきげんよう。

参照

[Font Definitions]
https://kivymd.readthedocs.io/en/latest/themes/font-definitions/