LoginSignup
0

More than 3 years have passed since last update.

【DroidScript】スマホでスマホアプリを作る② 背景やテキストの追加

Last updated at Posted at 2020-11-21

あらすじ

DroidScriptというアプリを使うと、javascriptベースの記述でスマホアプリが作れるらしいので、練習として「電子レンジワット数で加熱時間を換算するアプリ」を作る。

前回のおさらい

ボタンをタップすると「Hollo World!」と表示されるサンプルアプリのコードを見た。
スマホでスマホアプリを作る① Hello World!

どうやらlayにパーツを放り込むことでアプリの画面をレイアウトできそう。

function OnStart()
{   
  lay = app.CreateLayout( "linear", "VCenter,FillXY" ); 
  app.AddLayout( lay );
}

と言うわけで、自作アプリに向けてレイアウトを作成していく。

まずは完成画面

絶望的な英語力や配置センスは気にしないでいただきたい(ToT)
Screenshot_20201121-154732.png
上から
・タイトル
・ドロイド君
・自分のレンジのワット数
・温める対象のラベルに記載されたワット数
・温める対象のラベルに記載された加熱時間
・計算ボタン
となっている。

背景とタイトル

lay = app.CreateLayout( "linear", "VCenter,FillXY" );
lay.SetBackground( "/Sys/Img/BlueBack.jpg" );

txt = app.CreateText( "HOW MANY MIN" );
txt.SetTextSize( 22 );
lay.AddChild( txt );

1行目でlayの基本設定。括弧内の記述はサンプルコードのコピペなのでよくわからん^^;

lay.SetBackgroudで背景を設定。最初から用意されているBlueBack.jpgを使用。

タイトルの「HOW MANY MIN」というテキストを作りAddChildした。

ドロイド君

img = app.CreateImage( "/Sys/Img/Icon.png", 0.1 );
img.SetMargins( 0, 0.02, 0, 0 );
img.SetOnTouchDown( img_OnTouchDown );
lay.AddChild( img );

こちらも最初から用意されているドロイド君のアイコンIcon.pngをAddChild。.SetMarginsで、その前にAddChildしたパーツとの間に間隔を設ける。.SetOnTouchDownで、パーツをタップした時に呼び出す関数img_OnTouchDownを設定した。

ドロイド君をタップしたら呼び出される関数がこちら

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

何のアプリか簡単な説明をポップアップさせ、app.Vibrateでスマホを振動させる。

app.Vibrateの括弧内は、("休止,振動,休止,振動,・・・")で、数字はミリ秒となっているみたい。

次回

ワット数や加熱時間を入力する部分を作成する。
スマホでスマホアプリを作る③ スピンボタンとシークバー

つづく

シリーズ

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0