ビジュアルプログラミングで Androidアプリ開発ができる #Kodular を試す

## はじめに
以前、ビジュアルプログラミングを使ったスマホアプリ開発について調べていた時に見かけていた [Kodular](https://www.kodular.io/)。
![Kodular.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/dadd4ff4-e441-926c-e026-bc406ceefe7b.jpeg)
　
Qiita内でも、以下の記事を見かけてたりしました。
　●無料ノンプログラミングAndroid開発：App Inventor から派生した AppyBuilder と Kodular 統合の行方・・・ - Qiita
　　https://qiita.com/mnoda/items/ff8bc55831528010ac39

以前少し使って、最近またいろいろ試し始めた「MIT App Inventor」に関する調べものをしていたところ、この Kodular 関連の情報をまたいくつか見かけたりしたのがあり、Kodular も試しておこうと思ってやったのが今回の記事の内容です。

試す内容については、最近記事を書いていた以下の内容と合わせてみました。

●ビジュアルプログラミングで Androidアプリ開発ができる「MIT App Inventor」を試す（ボタンを押したら音声でしゃべるアプリを作る） - Qiita
　https://qiita.com/youtoy/items/93f7c786ff9d664d3032

## 作り方の概要など
App Inventor から派生しているとのことで、App Inventor と同じように、Web上で開発ができて、アプリを動かす時もコンパニオンアプリを使うパターンと APKファイルを作ってインストールする形がありました。

そして、Web上で開発する際には、アカウントを作ってログインして利用する形です。

また、Android用のコンパニオンアプリがこちらになります。
　●Kodular Companion - Google Play のアプリ
　　https://play.google.com/store/apps/details?id=io.makeroid.companion
![Kodular_Companion.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/d5426c34-27ba-2956-8711-247fb2447589.jpeg)

日本語の記事も、わりと最近書かれたものがいくつか見つかったりします（例えば、以下のものなど）。

●Kodularを使ってみよう – TECH4ALL
　https://tech.opst.co.jp/2021/01/22/kodular%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86/

●Androidアプリが作れる「Kodular」を使ってみた | こーぷくんねっと
　https://corpskun.net/blog/kodular-use/

## 実際に作ってみた時の様子
App Inventor でアプリを作った時と同様、画面のデザイン用のページとブロックプログラミング用のページを切り替えて使う形です。

以下が、それぞれの画面です。
![Kodular_Creator_デザイン.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/0c09ce50-dd30-8466-dc96-d153ce6acaf9.jpeg)

![Kodular_Creator_コード.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/3e6f9b58-a91b-2810-d29f-6ba550687356.jpeg)

ボタンと音声合成用のコンポーネントを画面に配置し、ブロックのプログラムのほうでボタン押下時に音声合成でしゃべるようなプログラムを作りました。

アプリが動作している時の様子は以下となります。

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/Kodular?src=hash&amp;ref_src=twsrc%5Etfw">#Kodular</a> で作ったアプリを実機で動かしてみた時の動画。 <a href="https://t.co/4avRjQkqQA">pic.twitter.com/4avRjQkqQA</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1371146241141207040?ref_src=twsrc%5Etfw">March 14, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## おわりに
App Inventor と同じような使い勝手でアプリ開発が行えました。
デフォルトのデザインは、Kodular のほうが今風なマテリアルデザインで、良い感じだと思います。

最後に App Inventor と比べて Kodular のほうにしかなかったコンポーネントを 1つだけ紹介してみます。

### Kodular のコンポーネント（App Inventor にはないもの）
例えば、レイアウトの中のナビゲーションというカテゴリの中には、以下のようなものもありました。

![コンポーネントの例.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/b718cc74-1f3d-c6bc-5500-b602b0615dfd.jpeg)

記事の冒頭に書いていた「App Inventor に関する調べもの」というのが、上記の中にあるボトムナビゲーションの実装に関わる部分でした。そこで情報を見ていくなかで、 Kodular にはデフォルトで用意されたコンポーネントに含まれていそう、というのを見かけて今回のお試しをする流れとなりました。

そのボトムナビゲーションを画面に配置するとこんな感じです（位置の設定を少しいじらないと、最下部には移動しなそうな状態）。
![ボトムナビゲーションを配置.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/dd5ff5bc-b8cb-51e8-7c18-f5c52eba1e30.jpeg)

そして、対応するブロックは、以下のようなものが出てきたりします。
![ボトムナビゲーションのブロック.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ebbcd94e-20d8-79d2-0c3d-f2f1301a7014.jpeg)