0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【DroidScript】スマホでスマホアプリを作る① Hello World!

Last updated at Posted at 2020-11-21

##概要
DroidScriptと言うスマホアプリがある。

javascriptを記述して、オリジナルアプリを開発できるらしい。しかもスマホで!そりゃあスマホアプリなんだからそうなんだろうけど何か衝撃。

GASを覚えたことで、javascriptなら行けんじゃね?と、ちょっと触ってみることにした。

##DroidScript
Playストアから入手可能。

サンプルコードが大量にあるためヒントは多いけど、ググっても日本語のサイトはあまりヒットしないし、Qiitaの記事もゼロ・・・操作は手探りになりそう(´・ω・`)

サンプルコードを見ると、横スクロールのゲームやらメディアプレイヤーやらある他、カメラ、メール、USBなどなど、出来ることはかなり多い。

アプリの画面をPCに表示させる方法もあって、スマホでチマチマやらなくてもキーボードでコード入力できるみたい(ちな、今回は全てスマホから操作)。

基本操作は全て無料!プラグインが豊富で、APKファイルへのビルドやブルートゥース対応など、一部のプラグインが有料になっている。

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

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

##Hello World!
何事もハローワールド!から。

アプリをインストールしたところ、最初にサンプルアプリが用意されていたので起動してみた。
Screenshot_20201121-123800.png
画面にはドロイド君と「Press Me」と書かれたボタンが1つ(左画像)。ボタンをタップすると「Hello World!」と画面に表示された(右画像)。

コードを表示させたところこんな感じ。

//Called when application is started.
function OnStart()
{	
  //Create a layout with objects vertically centered.
  lay = app.CreateLayout( "linear", "VCenter,FillXY" );	
	
  //Create image 1/5 of screen width and correct aspect ratio.
  img = app.CreateImage( "Img/Hello World.png", 0.2, -1 );
  lay.AddChild( img );		

  //Create a button 1/3 of screen width and 1/10 screen height.
  btn = app.CreateButton( "Press Me", 0.3, 0.1 );
  btn.SetMargins( 0, 0.05, 0, 0 );
  lay.AddChild( btn );

  //Set function to call when button pressed.
  btn.SetOnTouch( btn_OnTouch );

  //Add layout to app.
  app.AddLayout( lay );
}

//Called when user touches our button.
function btn_OnTouch()
{	
  //Show a popup message.
  app.ShowPopup( "Hello World!" );
}

英語は読めないけど、どうやらOnStart()がアプリを開いたときに呼び出される関数みたい。

app.CreateLayoutで宣言したlay.AddChildで表示させたいアイテムを放り込み、app.AddLayoutでアプリに渡してるんだなぁ・・・とか、

btn.SetOnTouch( btn_OnTouch )でボタンがタップされた時の関数を呼び出してるみたいだなぁ・・・とか、

function btn_OnTouch()では、app.ShowPopupでメッセージがポップアップするんだろうなぁ・・・など、

何とか分かりそう。

##次回
次回から自作アプリの作成。
スマホでスマホアプリを作る② 背景やテキストの追加

###つづく

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

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

0
1
0

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
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?