今や「スマホで使えるアプリを作りたーい！」と思ったらいろいろな選択肢がある時代。
という事で今回は、色々な開発環境を使って同じような動作をするアプリを作成してみました。
どの様な開発環境ではじめようか迷ってる人は必見(?)です！
最終更新日：20/05/31
今回作るアプリ
今回試しに作ってみるのはツール系です。
ツール系といってもボタンを押すとカウントが増えていくだけなカウンターです。
※要望があればゲーム、APIを使ったようなもう少し凝ったツールとかでもやります◎
※当方Mac等iphoneの開発環境が整ってないためandroid寄りの紹介になってます。
Android Studio
まずはオーソドックス、Android Studioでの開発です。
iphoneアプリ開発におけるXcodeにあたる存在です。
言語は Java または Kotlin を用います。
public class MainActivity extends AppCompatActivity {
TextView textView;
int count = 0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
LinearLayout layout = new LinearLayout(this);
layout.setOrientation(LinearLayout.VERTICAL);
layout.setGravity(Gravity.CENTER);
textView = new TextView(this);
textView.setGravity(Gravity.CENTER);
setCount(count);
layout.addView(textView);
final Button btn = new Button(this);
btn.setText("Push");
btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
count++;
setCount(count);
}
});
btn.setWidth(300);
layout.addView(btn);
setContentView(layout);
}
private void setCount(int n){
if(textView!=null) textView.setText("Count:"+n);
}
}
通常これで開発するときはUI構築にはソースコードとは別にXMLファイルで作成します。
上記ソースコードはコードだけでUIを構築するとこんな感じといった紹介です。
Xamarin.Form
クロスプラットフォーム開発といえば出てくるXamarin.Form
iosアプリとandroidアプリを同時開発できるのはかなりのメリットです。
またカスタムレンダラー等、プラットフォーム別に細かい調節ができるのも◎です。
プログラミング言語はC#を用います。
// App.cs
public partial class App : Application
{
public App ()
{
InitializeComponent();
var page = new MainPage();
var navigationPage = new NavigationPage(page);
this.MainPage = navigationPage;
}
}// MainPage.cs
public partial class MainPage : ContentPage
{
Label label;
public MainPage()
{
InitializeComponent();
this.Title = "Sample Project";
label = new Label();
var stack = new StackLayout();
stack.Children.Add(label);
var btn = new Button();
btn.Text = "Push";
int count = 0;
SetCount(count);
btn.Clicked += (o, e) =>
{
count++;
SetCount(count);
};
stack.Children.Add(btn);
stack.HorizontalOptions = LayoutOptions.CenterAndExpand;
stack.VerticalOptions = LayoutOptions.CenterAndExpand;
this.Content = stack;
}
private void SetCount(int n)
{
if (!(label is null)) label.Text = "Count : " + n;
}
}こちらも先ほどと同じく通常はUI構成にXAMLといった形式を利用しますが、上記サンプルはコードのみで構築しています。
React Native
React Nativeは、Facebookが作成したオープンソースのモバイルアプリケーションフレームワークです。
言語はJavaScriptを用い、こちらもクロスプラットフォーム開発が可能です。
// App.js
import Main from "./Main";
const navi = createStackNavigator({
Top : {
screen : Main,
navigationOptions :{
title : "Sample Project"
}
},
},{
mode: 'card',
initialRouteName: 'Top'
});
const Root = createAppContainer(navi);
export default class App extends React.Component{
render(){
return <Root />
}
}
// Main.js
export default class Main extends React.Component{
constructor(prop){
super(prop);
this.state = {
count : 0
}
}
render(){
return (
<View style={{height:"100%",justifyContent:"center",alignItems:"center"}}>
<Text style={{fontSize:18}}>{"Count : "+this.state.count}</Text>
<Button title="Push" onPress={()=>{
var c = this.state.count;
c++;
this.setState({count:c});
}} />
</View>);
}
}このReact NativeはXML形式をベースに中にプログラムを埋め込むといった感じのプログラミングをします。
Reactを使ったことがあったりWebエンジニアにはピッタリだそうです。
確かになれれば使いやすそうな感じはします。
Unity
みんな大好きUnityです。かなり広いクロス開発ができます。
アプリ開発はとりあえずこれから入れば楽と言えるでしょう。（今じゃ小中学生の教育に使ってるところもあるそうな）
ただゲームに強い開発環境な為、このようなツールにはあまり(というか全然)向いてはいないでしょう。
ゲーム開発をしたいのならもはやこれしかないでしょう(言い過ぎ)
public class main : MonoBehaviour
{
int count = 0;
public Button button;
public Text text;
public void Start()
{
this.button.onClick.AddListener(() => OnPush());
OnPush();
}
public void OnPush()
{
text.text = "Count:" + count;
count++;
}
}Unityは今まで上記で紹介したのとはかなり違った環境です。
「プログラミングがメインではない」というとわかりやすい(?)と思います。
上記スクリプトはオブジェクトにアタッチするといった形で使います。
MonoGame
一応クロスプラットフォームなMonoGame。
言語はC＃です。手間をかけて作りたい方にお勧めです()
using Microsoft.Xna.Framework;
using YPMono;
using YPMono.YPGUI;
namespace SampleProject
{
public class Main : YPScene
{
public override void Start()
{
Text text = new Text();
text.transform.Position = new Vector2(340, 300);
text.text = "Count : 0";
int count = 0;
TextButton btn = new TextButton();
btn.transform.Position = new Vector2(340, 400);
btn.onClick = () =>
{
count++;
text.text = "Count : " + count;
};
btn.Text.text = "Push";
Instantiate(text);
Instantiate(btn);
}
}
}この開発環境での開発はおそらく通常考えられないでしょう。
しかーし謎のこだわり、プライドがある方はぜひ使ってみてください👼
上記ソースコードでは過去に謎のこだわりで作った(作りかけ)なライブラリ「YPMono」を使っています。
なぜこれがめんどくさいか詳しく知りたい方はいないと思いますが
この過去の記事見ればわかるかもしれませんしわからないかもしれません☕
HTML(JavaScript)
ブラウザ上で動かすアプリです。
これまでのようなアプリではないですが一応手段としてあるよ、という事で載せてみました。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=360,initial-scale=1">
</head>
<body>
<div style="width: 100px;height: 100px;margin: 200px auto;">
<p id="count">Count : 0</p>
<input style="width:100%" type="button" value="Push" onclick="onPush()"></input>
</div>
<script>
var n = 0;
function onPush(){
n++;
document.getElementById("count").innerHTML = ("Count : "+n);
}
</script>
</body>
</hmtl>PWA (HTML)
上で紹介したWeb形式で作りブラウザ上で動かるものですが、実は今「PWA」という形でアプリにすることもできるのです。
// upgrade to pwa
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=360,initial-scale=1">
<!-- PWA -->
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#EEEEEE">
<!-- PWA on IOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#FF99FF">
<meta name="apple-mobile-web-app-title" content="bagelee">
<link rel="apple-touch-icon" href="icon.png" sizes="192x192">
</head>
<body>
<script>
if ('serviceWorker' in navigator)
navigator.serviceWorker.register('./sw.js').then((reg)=>console.log("sw active.")).catch((e)=>console.warn(e));
</script>
<div style="width: 100px;height: 100px;margin: 200px auto;">
<p id="count">Count : 0</p>
<input style="width:100%" type="button" value="Push" onclick="onPush()"></input>
</div>
<script>
var n = 0;
function onPush(){
n++;
document.getElementById("count").innerHTML = ("Count : "+n);
}
</script>
</body>
</hmtl>まとめ
たくさんあって悩みますね！^q^
個人的におすすめはXamarin.Formです！
React Native 最強でした！＾＾
おしまい！