Kodularを使ってみよう
はじめに
DX推進室の野上です。
「ノーコードでAndroidアプリを作った」という記事 を読んで興味が沸いたので触ってみました。
Kodularとは
Androidアプリのノーコード開発ツール。
利用は完全無料だそうです。
ScrachのようなGUIで処理を記述することができます。
ゴール
よくあるログイン処理を作ってみます。
アカウントとパスワードを入れてボタンを押すとAPIをCallして結果を受け取るやつです。
準備
- Kodular にSignInしておいてください。
新しいプロジェクトを作る
SignInすると以下のような画面になります。
左の「Create project」から新しいプロジェクトを作成します。
プロジェクト名を入力して「Next」を押下します。
Package名を入力して「Finish」を押下します。
プロジェクトが作成されると、Creator画面に遷移します。
左側のPaletteからComponentを選択して
真ん中のViewer画面のスマートフォンにドラッグ＆ドロップすると画面が作成できます。
最初の画面を作る
最初の画面には以下の要素を追加しましょう
- アカウント入力欄
- パスワード入力欄
- ログインボタン
入力欄を追加する
Paletteの「User Interface」-> 「Text Box」をドラッグ＆ドロップします。
アカウントとパスワードの二つ必要なので二つ追加します。
右側のCommon propertiesからText_Box1のWidthを「Fill parent」にします。
Text_Box2も同様に設定しておきます。
ボタンを追加する
Paletteの「User Interface」-> 「Button」をドラッグ＆ドロップします。
Common propertiesからButton1のWidthを「Fill parent」にします。
Button1のText Propertiesを変更してボタンのテキストを「Login」に変更します。
ここまでで最初の画面のUI要素は大体できました。
POSTメソッドを呼ぶ
ログインするAPIを呼び出す処理を追加します。
Paletteの「Connectivity」-> 「Web」をドラッグ＆ドロップします。
WebコンポーネントはNon-visible Componentのため画面上には見えません。
Web1のURL Propertiesにログイン用のAPIのURLを入力します。
ここからBlocksで処理を追加していきます。
Creatorの右上にある「Blocks」を押下して画面を切り替えます。
以下のような画面に切り替わります。
まずLoginButtonが押された場合の処理を追加します。
左側のBlocksより「Built-in」->「Button1」と選択して、ボタンが押下された場合のBlockをドラッグ＆ドロップします。
次はPOSTメソッドを追加します。
左側のBlocksより「Built-in」->「Web1」と選択して、call Web1.Post.Textをドラッグ＆ドロップします。
今回は
{ "username": "アカウント名", "password": "パスワード文字列" }
をPostします。
使用するAPIによって適宜読み替えてください。
アカウント名とパスワード文字列は「Text Box1」と「Text Box2」に入力された値を使用するようにします。
PostするJsonを作成するために「Built-in」->「Text」からJoinブロックを追加します。
Joinブロックは文字列結合してくれます。
{ "username": "
と
アカウント名
と
", "password": "
と
パスワード文字列
と
" }
の5つのTextを結合する必要がありますので、Joinブロックの歯車アイコンをクリックしてStringを5まで増やしてください。
Joinブロックに「Built-in」->「Text」からTextブロックを追加します
追加したTextブロックに
{ "username": "
と入力します。
つぎに「アカウント名」を結合します。
「アカウント名」は「Text_Box1」の中にある「Text_Box1.XXXX」を使用します。
「.」前後はリストから選択できるのでどれでも構いません。
同じように残りも結合していきます。
なお、同じ要素を使う場合は、右クリックして「Duplicate」でコピーすることができます。
すべてを結合すると以下のようになります。
これでButton1が押されると、POSTメソッドが呼ばれるようになりました。
次はPOSTメソッドの戻りを受け取りましょう。
「Built-in」->「Web1」の中の「when Web1.Got Text」を使用します。
POSTメソッドはここに戻ってきます。
Responseを受け取ったら別の画面に遷移するようにしたいので、まずは二つ目の画面を作りましょう。
二つ目の画面を作成する
Designer画面に戻って、「Add Screen」から二画面目を追加します。
名前は「Screen2」にしましょう。
Screen2に遷移してきたらToastを表示したいので、「User Interface」->「Notifier」をドラッグ＆ドロップしておきます。
NotifierコンポーネントもNon-visible Componentのため画面上には見えません。
さて、再びBlocks画面に戻って、Screen2が初期化された際に、Screen1から渡されたデータをToast表示するようにロジックを設定します。
- 「Screen2」の「when Screen2.Initialize」
- 「Notifier1」の「call Notifier1.Show Alert」
- 「Control」の「get start value」
を使用します。
これでScreen2が表示された時にToastが表示されるようになります。
二つの画面をつなげる
この状態だと、start valueに何も渡されていませんし、Screen1から遷移する処理も追加されていません。
その部分を追加しましょう。
Screen1のBlocks画面に戻り、Responseを受け取ったらresponse Contentを渡してScreen2に遷移するようにしましょう。
- 「Control」の「open another screen with start value」
- 「Text」の「Text」ブロック
- 「get response Content」
を使用します。
「get response Content」はwhenブロックの「response Content」にカーソルを当てると表示されます。
これでデータ送信と画面遷移が完成しました。
実端末で動かしてみる
それでは実端末で動かしてみましょう。
Kodularはそのままapkファイルをビルドすることができます。
「Export」->「Android App(.apk)」を選択することでビルドされます。
ビルドが終了すると以下のような画面になります。
kodular companionというAndroidアプリでQRコードを読み取るか
apkファイルをダウンロードして手動でインストールする方法があります。
起動すると以下のような画面になります。
Text_Box1にアカウント
Text_Box2にパスワードを入力して、Loginボタンを押しましょう。
ちゃんとScreen2に遷移して、response ContentがToast表示されました。
終わりに
使用し始めて数時間程度でここまで作成することができました。
もっと使っていくといろいろできるかもしれません。
iOSのビルドもできるようになると夢が広がりますね。