Androidアプリが作れる「Kodular」を使ってみた

どもども。CorpSです

ところで、さぶうぇいさんのアプリ「MarinDeck」について。めっっちゃ使いやすくて最高。各メディアにも取り上げられたりと、話題になってる。

ところで

このMarinDeck、開発はAndrod Studioなどのコードではなくソースブロック方式で作る「Kodular」を使って製作されているらしい。Scratchみたいな感じだ。

私は非常に興味を持った

Kodularを使ったアプリ制作にとても関心を持った私は試しにやってみることにした。

ソフトのインストールは不要,Web上で完結

https://www.kodular.io/ このサイトにアクセスして、会員登録するだけでプログラミングが始められる。

CREATE APPS! をクリックすると会員登録画面になるので、各自で登録してほしい。

会員登録が終わると、このような画面になる。(すでに何個か作ってるのでよけいなの移っててごめんなさい)

先ほどの画面のcreate project をクリックすると上のようなポップアップが表示される。ここではアプリのテーマや最低Androidバージョン、パッケージネーム、アプリの配色などが設定可能。

各自設定をして、作成をするとこのような画面になる。ここでは画面のレイアウトを設定できる

今回はボタンを押すとキーボードが出る、もう一つのボタンを押すと消える。というのを作りたいと思う。

では作ってみる

 -まずは画面デザイン

とりあえずボタンを設置してみる。まず、横に並べて設置ができるように左のパレットからLayout→Generalを選ぶ。

そうするとこんな感じの選択肢が現れるので上から三番目の「Horizontal Arrangement」を画面上のスマホ画面にドラッグして設置。

次はLayoutから「Button」を先ほど設置した枠の中に設置。

こんな感じで二つ置く。

今回は2つにしたが、画面スペースの限りいくつでもおける。

  -次はプログラムを組む

右上のBlocksをクリックし、プログラムページに移動

こんな感じの画面になるはずだ

そうしたら右下にあるButton1をクリック、そうしたら一番上に出てくる when Button1 Clickをドラッグアンドドロップで右のスペースに置く。同じようにButton2も置く。

つぎはScreen1からcall Screen1 .Show Keyboardを見つけて、先ほどと同じように右側に置く。そして Call Screen1 .Hide Keyboardもみつけて、同じように置く。

先ほど置いた黄色いブロックの間に今置いた紫色のブロックを重ね、Button1がShowで、Button2がHideになるようにする

これでプログラム自体は完成。

ただ、まだアプリの見た目が少し悪いので調整していく。右上からDesignerへ。

右側にあるButton1をクリックし、スクロールしていくとTextという項目が見つかるので、そこを「keyboard Open」とかに変更。

Button2のほうは「Keyboard Hide」とかでいいと思われる。

それではエクスポートしよう

上のほうにあるExportからAndroid Appを選択。

こんな感じの画面になるので、少し待つ。

エクスポートが終わるとこの画面になるのでDownload APKをクリックし、Apkをダウンロードする。個人の環境のせいかもしれないが、QRコードはうまくいかなかった。

そうしたらスマホなどにこのファイルを転送。インストール手段はここでは省略させてもらう。

動作確認

Open押すと出る、Hide押すと消える

完 成

Bye.

タイトルとURLをコピーしました