Help us understand the problem. What is going on with this article?

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

概要

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

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

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

参照:【GAS】電子レンジワット数で加熱時間を換算するwebアプリを作ってみた

これまでのまとめ

スマホでスマホアプリを作る① Hello World!
DroidScriptの紹介と、サンプルアプリの実行。

スマホでスマホアプリを作る② 背景やテキストの追加
オリジナルアプリ作成開始。背景画像やテキストの追加。

スマホでスマホアプリを作る③ スピンボタンとシークバー
各種数値入力用のボタン設置。

スマホでスマホアプリを作る④ 実行ボタン
取得した数値を元に計算実行。アプリ完成!

自作アプリの動作

アプリの画面がこちら。
Screenshot_20201121-154732.png
実際に動かしてみたところ。
20201121_181900.gif
自分のレンジのワット数を設定。温める対象のラベルに記載されたワット数と加熱時間を設定。計算ボタンをタップすると、自分のレンジで温める場合の加熱時間を教えてくれる。

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

コード全文

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
http://androidscript.org/ide
からアクセスして、伏字のIPアドレスとパスワードを入力すればPCからコードを編集できる。
DroidScript.jpg

スマホでコード編集

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

カーソルを操作する丸いアイコンをダブルタップすると、コピペなどのメニューが開く。これでサンプルコードから必要な部分をコピーすることができる。
Screenshot_20201121-183622.png

以上!

おしまい

シリーズ

DroidScript電子レンジアプリ作成
スマホでスマホアプリを作る① Hello World!
スマホでスマホアプリを作る② 背景やテキストの追加
スマホでスマホアプリを作る③ スピンボタンとシークバー
スマホでスマホアプリを作る④ 実行ボタン
スマホでスマホアプリを作る シリーズまとめ

外伝
【GAS】電子レンジワット数で加熱時間を換算するwebアプリを作ってみた

YasumiYasumi
非エンジニアのリーマンが、コロナ禍でGoogleAppsScriptに出会い仕事で楽をするため奮闘中!プログラミングの素養ゼロから、ネット検索だけでどこまでやれるのか・・・。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away