kivyMDチュートリアル其の什壱 Components - Carousel篇

はい、今週も始まりました。kivyMDのお時間です。
今日もニコニコOSS活動。なんて言ってますけど。

今週は特にこれと言ってニュースとかはないような気はしますが、個人的なことを言うと
最近MacOSのアップデートをしました。BigSurに上げたのですが、なんと言ってもこれが
また遅い。。調べた中の1つに視覚効果がデフォで遅くなるような設定があるということが
分かったのですが、これをアプリなどを早くするように設定すればなんとか上げる前くらい
の速さになりました。

「BigSur 視覚効果 速くする」とかで調べると、いくらでも情報が出てくるので少しでも
速くしたいなと思っている方は試されると良いかもです。ただし、日本語入力とかも若干
前から遅いのですが、これは直らないと思われます。こんな方法あるよ！とかありましたら
コメント貰えると嬉しいですというか教えろください！
\# 日本語入力速くするのってどうやるんだろ...

はい、少し前置きが長くなりましたが今日はCarouselになります。カルーセルってどんな
意味なんだろうって調べたところ回転木馬とかメリーゴーランドという意味があるらしいです。
確かに挙動とか見るとそんな感じだなと思います。カルーセルというとカルーセル○紀さんが
思い起こされますが、全然関係ないそうです。興味のある方は調べてもらえれば。多分、
いないと思うけど。

## Carousel

はい、前置きが長くなりすぎましたが早速コードに入っていきます。

なぜコードからという話なのですが、今回のCarousel、なんとパッケージがkivyMD側に入って
いません！理由としては簡単でパッケージ(MDCarousel)をインポート出来なかったことと、
マニュアルに記載されているプロパティなどが使用が出来なかったことによります。これは今後の
リリースに組み込んでくるのかなと勝手に思っているのですが、現状このパッケージはkivyMDで
使うことが出来ません。なのでこれも断定出来ていませんが、おそらくkivy側でのCarouselを
使用していると私は見ています。

はい、あまりコードに触れないでいると睨みつけられそう(治安が悪い)なので、早速コードに入ります。

```python:xi/carousel.py
from kivymd.app import MDApp
from kivy.lang import Builder

### import font package
from kivy.core.text import LabelBase
from kivymd.font_definitions import theme_font_styles


KV = '''
Screen:

   MDToolbar:
      title: "Example Carousel"
      pos_hint: {"top": 1}
   
   Carousel:
      MDLabel:
         text: "いま今、あるところにおじいさんと\\nおばあさんがいました。"
         halign: "center"
         font_style: "gomarice_mukasi_mukasi"
      MDLabel:
         text: "おじいさんは山でゴルフに、\\nおばあさんは近所の\\nコインランドリーへ。"
         halign: "center"
         font_style: "gomarice_mukasi_mukasi"
      MDLabel:
         text: "おじいさんはスコアが\\nやっと110に届き。"
         halign: "center"
         font_style: "gomarice_mukasi_mukasi"
      MDLabel:
         text: "おばあさんは、\\nお札を入れる向きが\\n分からずイライラしてしまい。"
         halign: "center"
         font_style: "gomarice_mukasi_mukasi"
      MDLabel:
         text: "おしまい。"
         halign: "center"
         font_style: "gomarice_mukasi_mukasi"
'''


class CarouselApp(MDApp):
    def build(self):
       ### font setting
       LabelBase.register(name="gomarice_mukasi_mukasi",fn_regular="gomarice_mukasi_mukasi.ttf")
       theme_font_styles.append('gomarice_mukasi_mukasi')
       self.theme_cls.font_styles["gomarice_mukasi_mukasi"] = ["gomarice_mukasi_mukasi", 32, 0.15]
       
       return Builder.load_string(KV)


CarouselApp().run()
```

はい、Bottom Navigationを見ている方は分かるかもですが、目新しいものはあまり
ありません。というかほぼないといっても過言ではありません。コンテンツもいつもの
kivy今々物語です。

全くなくて良いかと言われるとそれもそれでなので、少しだけ触れておきます。

```python
Screen:
(略)
   Carousel:
      MDLabel:
         text: "いま今、あるところにおじいさんと\\nおばあさんがいました。"
         halign: "center"
         font_style: "gomarice_mukasi_mukasi"
```

今日のメインディッシュになります。
こちらはkivyでのcarouselと同じ用法を使用しています。詳細の方は以下をご覧ください。
> Carousel
> https://kivy.org/doc/stable/api-kivy.uix.carousel.html

使い方も至ってシンプルですね。
Bottom Navigationのようにルートウィジェットを決めて、その配下にcarouselを置いている
だけになります。carouselの中は各自配置したいコンテンツを流し込めるようになっています。
kivyのマニュアルとかでは画像を埋め込んでいますね。

## 結果

早速、というかスピードが尋常じゃないですが動作結果に移ります。

![34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82826/fa329403-65c2-7ae5-17a3-625f971e8480.png)

![35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82826/787151ea-a32f-25af-fe6d-d5546399c076.png)

![36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82826/d486f704-6590-a1b0-fb1e-aea5354295fe.png)

![37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82826/21005905-c5d9-6329-45c8-f8069ae0c5d3.png)

![38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82826/ad3b7e9f-8e59-00fd-ecd5-3432c5fdf3a9.png)

おじいさんはそれほどゴルフは上手くないようです。おばあさんはストレスを抱えているのかな。
少々なことでイライラしてしまっています。

## まとめ

はい、今日は1番早かったのではないかというほどあっさり終わっていますがお開きにしたい
と思います。だってMDCarousel動かないんだもん。なので今回はkivyMD側でもCarouselは
ちゃんと動くよーという回でした。これ自体は面白いものなので、ほか組み合わせやすいものが
あれば取り込んでも面白そうですね。サンプルアプリが出来てくるかも。

というわけで、今週はこのくらいで。眠いざんす。。

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

## 参照(一応念のため)

> Components » Carousel
> https://kivymd.readthedocs.io/en/latest/components/carousel/