アプリ＆拡張機能

Flutterでアプリを作りたい男の調査記録

はち

公開日:2021/02/26

はちです。社内でそろそろアプリが作りたいなと思い立って色々調査したので備忘録がてら記事を投稿しています。

アプリを作りたいと思った理由

・作ったこと無いから
・サーバーエンドはPythonとかちょっと触れるようになったし
・そろそろ新しい技術を使ってみたいし
・Webシステム系の言語（Javaとか）はPHPでお腹いっぱいだし
・社内で需要ありそうだけど体制がないから覚えたいっていうのもある

開発環境構築

・iOSとAndroid、両方対応したいのでFlutterを採用
・OSはとりあえずWindows10（Ubuntu Desktopでも環境構築◯）
・Android Studio入れると端末エミュレーションが出来るようになる
・慣れたエディタが良いのでVS Codeで作る
・VS CodeにFlutter＋Dart用の拡張機能を導入する
・Android SDK、Flutter SDKを導入する
＝全部で2,3時間で環境構築できました（知識なしから）

今回作ったアプリ（っぽいもの）

・DB=MySQLから値を取ってきて、リストに出力するだけのアプリ
・スケジュールとか商品一覧とか作るのを後々想定して。
・リモートDB参照できないと社内アプリの需要満たせ無さそう

設計した上で悩んだこと

・UIの作成はどうするか？
→次に説明
・DBへのアクセスはどうするか？
→次の次に説明
・iOS版のエミュレートとかビルドどうするか
→iOS版のエミュレートは基本的にAndroidと一緒らしいので
エミュレートでデバッグするんじゃなくて実機デバッグが良いらしい
→ビルドはMac本体がないと出来ない

UIの作成はどうするか？その1

・FlutterでUIを構築するのはすべてソースコードで構築が必要
→直感的じゃない、わかりにくい

UIの作成はどうするか？その2

・支援ツールを使うことで多少は解決出来るか
→Adobe XD to Flutter（Adobeが公式に対応している）
→→直感的にUI設計してDartファイルで出力できる
→Hot UI
→→Flutter公式製のUI開発プラグイン(IntelliJ用)
→Flutter Studio
→→2年位更新されてないけどかなり直感的で使いやすかった
・細部はソースで調整必要だと思います

DBへのアクセスはどうするか？その1

・Flutterに一応MySQL接続パッケージがある
→SQLJocky　import ‘package:sqljocky5/sqljocky.dart’;
→mysql1　import ‘package:mysql1/mysql1.dart’;
・そもそもアプリで直接サーバー接続して良いのか？
→考えてみたけど、良くないですね。
→アプリのために口を開けるガバガバなサーバーがあってはならない。
・どうするのがベストなのか？
※パッケージ＝Pythonでいうライブラリみたいなもん

今回のサンプル

動作サンプルイメージ

ソースサンプル

import 'package:flutter/material.dart'; //google提供のUIデザインのやつ
import 'package:http/http.dart' as http; //httpリクエストにつかうやつ
import 'dart:async'; //非同期処理につかうやつ
import 'dart:convert'; //httpレスポンスをJSON形式に変換するやつ

//最初の処理
void main() {
  runApp(MaterialApp(
    home: HomePage(),
  ));
}

//ユーザ操作により動的に変更が起きたり、
//通信データによって状態が変化するウィジェットはステートフルウィジェット
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

//
class _HomePageState extends State<HomePage> {
  Map data; //マップ型定義
  List userData; //リスト型定義

  //外部に設置したPHPからデータを取得する関数
  //async : 非同期関数を定義する関数宣言のこと。
  Future<void> getData() async {
    try {
      // 非同期処理 awaitを宣言すると処理の完了を待つことが出来る
      http.Response response =
          await http.get("https://aaa/get.php");
      print(response);
      data = json.decode(response.body); //json->Mapオブジェクトに格納
    } on Exception catch (error) {
      print(error);
    }

    //状態が変化した場合によばれる
    setState(() {
      userData = data["rs_data"]; //Map->Listに必要な情報だけ格納
    });
  }

  @override
  void initState() {
    //ステートフルウィジェットがウィジェットツリーに挿入されたときに一度呼び出されるメソッドです。
    super.initState();
    getData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("PHP→JSON→アプリ"),
          backgroundColor: Colors.orange,
        ),
        body: ListView.builder(
          //スクロール可能な可変リストを作る
          itemCount: userData == null ? 0 : userData.length, //受け取る数の定義
          itemBuilder: (BuildContext context, int index) {
            //ここに表示したい内容をindexに応じて
            return Card(
              //cardデザインを定義:material_design
              child: Row(
                children: <Widget>[
                  CircleAvatar(
                    //ユーザプロフィール画像に使う用のクラス
                    backgroundImage: NetworkImage(
                        'https://aaa.jpg'),
                    //NetworkImage()はHTTPで画像をとってくる。これはプロフィール画像。
                  ),
                  Text(
                      "  ${userData[index]["name"]} ${userData[index]["point"]}")
                ],
              ),
            );
          },
        ));
  }
}

import 'package:flutter/material.dart'; //google提供のUIデザインのやつ

import 'package:http/http.dart' as http; //httpリクエストにつかうやつ

import 'dart:async'; //非同期処理につかうやつ

import 'dart:convert'; //httpレスポンスをJSON形式に変換するやつ

//最初の処理

void main() {

runApp(MaterialApp(

home: HomePage(),

));

}

//ユーザ操作により動的に変更が起きたり、

//通信データによって状態が変化するウィジェットはステートフルウィジェット

class HomePage extends StatefulWidget {

@override

_HomePageState createState() => _HomePageState();

}

class _HomePageState extends State<HomePage> {

Map data; //マップ型定義

List userData; //リスト型定義

//外部に設置したPHPからデータを取得する関数

//async : 非同期関数を定義する関数宣言のこと。

Future<void> getData() async {

try {

// 非同期処理 awaitを宣言すると処理の完了を待つことが出来る

http.Response response =

await http.get("https://aaa/get.php");

print(response);

data = json.decode(response.body); //json->Mapオブジェクトに格納

} on Exception catch (error) {

print(error);

}

//状態が変化した場合によばれる

setState(() {

userData = data["rs_data"]; //Map->Listに必要な情報だけ格納

});

}

@override

void initState() {

//ステートフルウィジェットがウィジェットツリーに挿入されたときに一度呼び出されるメソッドです。

super.initState();

getData();

}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text("PHP→JSON→アプリ"),

backgroundColor: Colors.orange,

body: ListView.builder(

//スクロール可能な可変リストを作る

itemCount: userData == null ? 0 : userData.length, //受け取る数の定義

itemBuilder: (BuildContext context, int index) {

//ここに表示したい内容をindexに応じて

return Card(

//cardデザインを定義:material_design

child: Row(

children: <Widget>[

CircleAvatar(

//ユーザプロフィール画像に使う用のクラス

backgroundImage: NetworkImage(

'https://aaa.jpg'),

//NetworkImage()はHTTPで画像をとってくる。これはプロフィール画像。

Text(

" ${userData[index]["name"]} ${userData[index]["point"]}")

);

));

}

あとがき

今回はざっくりまとめましたが、アプリ開発は今まで経験してきた開発業務より考えることが多そうです。
実現できれば、より色んなことに挑戦していけると思いますが、コストと相談したいですね。

≪PHPの少しマニアックなおすすめライブラリ

UnityでのVR化する方法≫

Flutterでアプリを作りたい男の調査記録

アプリを作りたいと思った理由

開発環境構築

今回作ったアプリ（っぽいもの）

設計した上で悩んだこと

UIの作成はどうするか？その1

UIの作成はどうするか？その2

DBへのアクセスはどうするか？その1

今回のサンプル

動作サンプルイメージ

ソースサンプル

あとがき

関連記事

テキトー入力くん

BookMarkCleaner

【Figma】デザイン作成が苦手なエンジニアにおすすめ拡張機能「html.to.design」

Flutterでアプリを作りたい男の調査記録

アプリを作りたいと思った理由

開発環境構築

今回作ったアプリ（っぽいもの）

設計した上で悩んだこと

UIの作成はどうするか？ その1

UIの作成はどうするか？ その2

DBへのアクセスはどうするか？ その1

今回のサンプル

動作サンプルイメージ

ソースサンプル

あとがき

関連記事

テキトー入力くん

BookMarkCleaner

【Figma】デザイン作成が苦手なエンジニアにおすすめ拡張機能「html.to.design」

UIの作成はどうするか？その1

UIの作成はどうするか？その2

DBへのアクセスはどうするか？その1