【DroidScript】スマホでスマホアプリを作る シリーズまとめ

##概要
DroidScriptというアプリを使うと、スマホからjavascriptベースの記述でスマホアプリを作れてしまうらしい。

DroidScriptでググっても日本語のサイトはあまりヒットしないし、Qiitaの記事もゼロ・・・面白そうなアプリなのに(´･ω･`)

以前にWEBアプリ導入の練習で「電子レンジワット数で加熱時間を換算するアプリ」を作り、今回も同じお題で練習してみたので、まとめてみた。

参照：[【GAS】電子レンジワット数で加熱時間を換算するwebアプリを作ってみた](https://qiita.com/YasumiYasumi/items/f618fcbbe8beed2db8a9)

##これまでのまとめ
[スマホでスマホアプリを作る① Hello World!](https://qiita.com/YasumiYasumi/items/10796071033a9cefc0b4)
DroidScriptの紹介と、サンプルアプリの実行。

[スマホでスマホアプリを作る② 背景やテキストの追加](https://qiita.com/YasumiYasumi/items/1569dcc891217a2c92d7)
オリジナルアプリ作成開始。背景画像やテキストの追加。

[スマホでスマホアプリを作る③ スピンボタンとシークバー](https://qiita.com/YasumiYasumi/items/867000c0f6f188551fb7)
各種数値入力用のボタン設置。

[スマホでスマホアプリを作る④ 実行ボタン](https://qiita.com/YasumiYasumi/items/2ae76ac5ec49e0bdb9e8)
取得した数値を元に計算実行。アプリ完成！

##自作アプリの動作
アプリの画面がこちら。
![Screenshot_20201121-154732.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/708687/6180e3ab-2600-5b09-5507-f02545b6ce5f.png)
実際に動かしてみたところ。
![20201121_181900.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/708687/d4e9fe01-cf8b-d6e7-410f-d275890c03bd.gif)
自分のレンジのワット数を設定。温める対象のラベルに記載されたワット数と加熱時間を設定。計算ボタンをタップすると、自分のレンジで温める場合の加熱時間を教えてくれる。

GIFには出てこないけど、ドロイド君をタップするとアプリの情報がポップアップする。

##コード全文
```javascript
function OnStart() 
{ 
  lay = app.CreateLayout( "linear", "VCenter,FillXY" ); 
  lay.SetBackground( "/Sys/Img/BlueBack.jpg" ); 

  txt = app.CreateText( "HOW MANY MIN" ); 
  txt.SetTextSize( 22 ); 
  lay.AddChild( txt ); 
 
  img = app.CreateImage( "/Sys/Img/Icon.png", 0.1 ); 
  img.SetMargins( 0, 0.02, 0, 0 ); 
  img.SetOnTouchDown( img_OnTouchDown ); 
  lay.AddChild( img ); 
 
  txt = app.CreateText( "Your Microwave" ); 
  txt.SetMargins( 0,0.02,0,0 ); 
  txt.SetTextSize( 20 ); 
  lay.AddChild( txt ); 

  my = app.CreateSpinner( "730,700,680", 0.3 ); 
  my.SetOnTouch( spin_my ); 
  lay.AddChild( my ); 
 
  txt = app.CreateText( "Label Microwave" ); 
  txt.SetMargins( 0,0.02,0,0 ); 
  txt.SetTextSize( 20 ); 
  lay.AddChild( txt ); 

  label = app.CreateSpinner( "500,1500", 0.3 ); 
  label.SetOnTouch( spin_label ); 
  lay.AddChild( label ); 
 
  txt = app.CreateText( "Label heating time" ); 
  txt.SetMargins( 0,0.02,0,0 ); 
  txt.SetTextSize( 20 ); 
  lay.AddChild( txt ); 
 
  skb = app.CreateSeekBar( 0.8 ); 
  skb.SetOnTouch( skb_OnTouch ); 
  skb.SetRange( 600 ); 
  skb.SetValue( 180 ); 
  lay.AddChild( skb ); 
 
  btn = app.CreateButton( "EXECUTE", 0.4 ); 
  btn.SetMargins( 0, 0.05, 0, 0 ); 
  btn.SetOnTouch( btn_OnTouch ); 
  lay.AddChild( btn ); 
 
  app.AddLayout( lay ); 
} 

function img_OnTouchDown( ev ) 
{ 
    app.ShowPopup( "I will calculate the heating time!" ); 
    app.Vibrate( "0,100,30,100,50,300" ); 
} 

function spin_my( item ) 
{ 
  app.ShowPopup( "Set " + item + "W" ); 
  app.Vibrate( "0,30" ); 
} 

function spin_label( item ) 
{ 
  app.ShowPopup( "Set " + item + "W" ); 
  app.Vibrate( "0,30" ); 
} 

function skb_OnTouch( value ) 
{ 
  value = Math.round( value / 5 ) * 5; 
  var min = Math.floor( value / 60 ); 
  var sec = Math.floor( value % 60 ); 
  sec = ( "0" + sec ).slice( -2 ); 
 
  var settime = min + ":" + sec; 
  app.ShowPopup( "Set Time = " + settime ); 
  app.Vibrate( "0,10" ); 
} 

function btn_OnTouch() 
{ 
  var my_wave = my.GetText(); 
  var label_wave = label.GetText(); 
  var time = skb.GetValue(); 
 
  time = Math.round( time * 0.2 ) / 0.2; 
 
  var ratio = ( label_wave / my_wave ); 
  var after = time * ratio; 

  var remain = after % 60; 
  var newmin = ( after - remain ) / 60; 
  var newsec = Math.round( remain ); 
  newsec = ( "0" + newsec ).slice( -2 ); 
 
  var ans = newmin + ":" + newsec; 
 
  app.ShowPopup( "Heat for " + ans ); 
  app.Vibrate( "0,100,30,100,50,300" ); 
}
```

##DroidScriptの操作Tips
###PCでコード編集
左上のWiFiマークをタップすると、画面のような表示が表れる。
![Screenshot_20201121-183559.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/708687/143f1f92-9e57-502e-3b53-82653d216315.png)
http://androidscript.org/ide
からアクセスして、伏字のIPアドレスとパスワードを入力すればPCからコードを編集できる。
![DroidScript.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/708687/51528cf4-4e4e-db87-7fe0-7cf34cd7cf0b.jpeg)

###スマホでコード編集
感覚的には、スマホでコピペしようと思ったらカーソル長押しなんだけど、こちらのアプリだと操作が異なるのが最初分からなくて苦労した・・・。

カーソルを操作する丸いアイコンをダブルタップすると、コピペなどのメニューが開く。これでサンプルコードから必要な部分をコピーすることができる。
![Screenshot_20201121-183622.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/708687/023280a2-d332-c01a-69fa-3a573b9b1f87.png)

以上！

###おしまい

##シリーズ
DroidScript電子レンジアプリ作成
[スマホでスマホアプリを作る① Hello World!](https://qiita.com/YasumiYasumi/items/10796071033a9cefc0b4)
[スマホでスマホアプリを作る② 背景やテキストの追加](https://qiita.com/YasumiYasumi/items/1569dcc891217a2c92d7)
[スマホでスマホアプリを作る③ スピンボタンとシークバー](https://qiita.com/YasumiYasumi/items/867000c0f6f188551fb7)
[スマホでスマホアプリを作る④ 実行ボタン](https://qiita.com/YasumiYasumi/items/2ae76ac5ec49e0bdb9e8)
[スマホでスマホアプリを作る シリーズまとめ](https://qiita.com/YasumiYasumi/items/832ec009681310ecdd1c)

外伝
[【GAS】電子レンジワット数で加熱時間を換算するwebアプリを作ってみた](https://qiita.com/YasumiYasumi/items/f618fcbbe8beed2db8a9)