buto > /dev/null

だいたい急に挑戦してゴールにたどり着かずに飽きる日々です

Flutter インストールからメニュー表示まで

久しぶりにモバイルアプリを作ってみたくなったのでflutter始めました

iOSAndroidを同じコードで開発できるので効率的です

Flutterインストール

まずはhomebrewでFlutterをインストールしてdoctorコマンドでFlutterの利用開始チェックをする

XcodeとAndroidStudioが入っていればチェックOKなはず)

brew install flutter
flutter doctor

Flutterプロジェクト作成

インストール完了したらFlutterプロジェクトを作成します

--org オプションでパッケージ名を指定できます(指定なしだと com.example となる)

flutter create --org package project_name

プロジェクトが作成できたら標準出力に従ってアプリを起動!

cd project_name
flutter run

プロジェクト作成直後の画面 カウントアップボタンのみがあるシンプルアプリ

f:id:butorisa:20220327165430p:plain

画面をカスタマイズ

↑画面コードは project_name/lib/main.dart に書かれているのでこちらを修正していく

まずはこんな感じで画面を修正しました

  • アプリタイトルを変更
  • AppBarの表示文字・カラーを変更
  • サイドメニュー(Drawer)を追加
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'framboise nail', // ブラウザタブ表示名
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(title: 'my page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        backgroundColor: Colors.pinkAccent.shade700,
      ),
      drawer: Drawer( // サイドメニュー
        child: ListView(
          children: <Widget>[
            DrawerHeader(
              child: const Text(
                'risa',
                style: TextStyle(
                  fontSize: 24,
                  color: Colors.white
                ),
              ),
              decoration: BoxDecoration(color: Colors.pinkAccent.shade700),
            ),
            const ListTile(
              title: Text('カタチから探す'),
            ),
            const ListTile(
              title: Text('スクエア'),
              trailing: Icon(Icons.square),
            ),
            const ListTile(
              title: Text('ラウンド'),
              trailing: Icon(Icons.circle),
            ),
            const ListTile(
              title: Text('オーバル'),
              trailing: Icon(Icons.egg),
            ),
            const ListTile(
              title: Text('ポイント'),
              trailing: Icon(Icons.water_drop),
            )
          ],
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
          ],
        ),
      ),
    );
  }
}

このようにプロジェクト作成直後から画面をカスタマイズできました!

サイドメニューは利用頻度が高そうなのでサラッとコード書けるようにしておきたい

f:id:butorisa:20220327215000p:plain

f:id:butorisa:20220327215027p:plain

ちょっとしたカスタマイズですが、何時間も掛かってしまいました…

webpack フロントエンドでも環境変数を扱う

React+SpringBootアプリでローカル、ステージング、本番環境用に環境変数ファイルがあって、それぞれに接続するAPIアドレスなどが定義されているのはよくあるケース

SpringBootで環境変数を読み込むのは何度も行ってきましたが、Reactで環境変数にアクセスしたことなかった!

今回フロントエンドはwebpack+Reactだったのでwebpackを使って環境変数を読み込む

そもそもwebpackの話

web資材(js、css、画像などのファイル)をpacking(まとめる)するツール

この記事のようにindex.jsなどのエントリポイントから参照される各モジュール(画面コンポーネントなど)をひとまとめにできる!

まとめる設定をwebpack.config.jsファイルに記述する

goworkship.com

DefinePluginで環境変数を読み込む

あらかじめlocal.envなどの環境変数ファイルをサーバ内に環境変数として読み込まれるようにしておく

今回はdockerだったのでdocker-compose.ymlにビルド実行するコンテナのenv-filesにlocal.envを指定した

webpack.config.jsにDefinePluginを記述して環境変数をフロントエンドのグローバル変数に置き換える

local.envに定義したAPI_GATEWAYはprocess.env.でアクセスしグローバル変数API_HOSTに格納

const webpack = require('webpack');

module.exports = {
  mode: 'development',
  plugins: [
    new webpack.DefinePlugin({
      'API_HOST': JSON.stringify(process.env.API_GATEWAY || "")
    }),
  ]
};

実際にAPI接続するモジュールで declear const API_HOST: string; と記述すると環境変数の値が利用できる

webpack.js.org

環境変数を扱う方法にはdotenv、dotenv-webpackもあるがライブラリを追加したくない場合はこの方法が使える

AWSメッセージキュー SQS

昨日はSNSがモバイル通知、分析用Firehorseなど複数の宛先へデータを流すことができると学んだので

今日はSQSの特徴を学んでいく!!(SESはEメール通知専用っていうのは知ってるからスキップ)

Amazon SQS

f:id:butorisa:20220215202733p:plain

SNSのアイコンと比べると宛先は1つになる?中央の四角がキューを表している??

ya6mablog.com

貯まったメッセージは受信側(Consumer)がキューに問い合わせを行うと、キューからメッセージが配信されて、受信側はメッセージを取得することが出来ます。

SNSはメッセージ発行元(publisher)から一方通行でデータが流れたけど

SQSはpublisherがキューにメッセージを入れて、consumerがポーリングでキューからメッセージを取り出すようだ

SQSを試してみる

f:id:butorisa:20220215204800p:plain

マネジメントコンソールでSQS作成をしてみると、スタンダードとFIFOが選べる

配信順序を気にしなければスタンダードで良さそう(FIFOの方が割高)

f:id:butorisa:20220215205045p:plain

スタンダードキューを作成してみたのでメッセージの送受信をクリックしてみた

メッセージ本文を入力してメッセージ送信をクリック!

f:id:butorisa:20220215205146p:plain

f:id:butorisa:20220215205253p:plain

メッセージがキューに送られたので利用可能なメッセージが1となった

f:id:butorisa:20220215205451p:plain

自動でポーリングされないようだったのでメッセージをポーリングをクリックするとポーリングが開始された

f:id:butorisa:20220215205537p:plain

メッセージが届きました!

SNSと連携

SQSのメニューにSNSサブスクライブとあったので昨日作成したSNSトピックを紐付けてみた

SNSで「わああああああ〜!」とメッセージを発行してみると

f:id:butorisa:20220215210707p:plain

昨日作成したSMS通知がちゃんと届いたのと同時にSQSにもメッセージが渡ってきた!

f:id:butorisa:20220215210931p:plain

f:id:butorisa:20220215211256p:plain

SNSからSQSにメッセージを渡せる機能なのか!

EC2上のアプリからSNSで通知+SQSにデータを流してSQSから他のEC2アプリにデータを連携する時使えそう!

SQSはアプリ間連携に使えるメッセージキューということが分かった

AWSメッセージキュー SNS

AWS資格試験の模擬テストにメッセージキューが頻出するけど違いが分からない、覚えられないのでまとめておく。

AWS複数種類のメッセージキュー(MQ)が提供されているから1つずつ覚えていきます!

メッセージキューってなに??

メールやSMSメッセージ通知をする時にメッセージ作成アプリ→配信アプリに橋渡しをするキュー

メッセージキューって名前だけどメッセージ配信以外のアプリ間データ連携に利用されている

直接アプリ同士で連携してもいいけど、大量データだとアプリサーバに負荷が掛かっちゃうのでMQはよく使われるらしい

キューなので渡されたデータから処理されていく(先入先出)

Amazon SNSとは

f:id:butorisa:20220214232645p:plain

サービスアイコンは左側から入ったデータがフィルタされて複数に流れるような

Amazon Simple Notification Serviceって名前の通り通知(SMS・プッシュ通知)によく使われる

SNSスマホにメッセージ送信

f:id:butorisa:20220214235359p:plain

トピック(後述)のタイプをスタンダードにするとSMS・プッシュ通知などのメッセージ通知ができ

FIFOにするとSQSのみ選択できた(こちらはアプリ間データ連携に使う時に選択するっぽい)

トピックを作成しなくても左メニューSMSを選択して電話番号を登録

ワンタイムパスワードで認証後、テストSMSが送信できる

f:id:butorisa:20220214235047p:plain

今度はスタンダードタイプのトピックから送ってみる

トピックを選択してSMS送信をサブスクリプションに設定すると、こんなメッセージが届いた(一番下)

f:id:butorisa:20220215000402p:plain

トピックから送信するとメッセージの先頭に「トピック名>」って付くみたい

アプリからSMS通知するには

携帯電話に発行する - Amazon Simple Notification Service

公式ドキュメントにコードから電話番号を動的に渡してAmazon SNSからSMS通知できるみたい

あらかじめトピックを作っておかなくてもSMSが送れるように見える

Amazon SNS トピックを作成する - Amazon Simple Notification Service

トピックは配信先のグループなので「メッセージ配信+配信内容を分析するRedshiftにデータ登録」を実現したい時に

トピックのサブスクリプションにSMS通知、kinesisFirehorseを登録してあげればトピックでメッセージ発行をすると

SMS通知が届き、一方ではFirehorse経由でRedshiftにデータが登録されました〜となる

Grid systemを思い出す

今ドキのレスポンシブな画面ではGridsystemが定番!だと思いますが、すぐに忘れちゃうので復習

css-tricks.com

html+bootstrapで簡単な検索フォームを作ってみます

f:id:butorisa:20220106225926p:plain

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>データ検索</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container m-4">
    <div class="row">
      <div class="col">
        <h4>データ検索</h4>
      </div>
    </div>
  </div>
  <div class="container m-4">
    <div class="row justify-content-start">
      <div class="col-md-2">
        <h6>カテゴリ</h6>
      </div>
      <div class="col-md-2">
        <h6>在庫</h6>
      </div>
    </div>

    <div class="row justify-content-start">
      <div class="col-md-2">
        <select class="form-select" aria-label="">
          <option selected>飲み物</option>
          <option value="1">お菓子</option>
          <option value="2">雑貨</option>
        </select>
      </div>
      <div class="col-md-2 align-self-end">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
          <label class="form-check-label" for="flexCheckDefault">
            在庫ありのみ
          </label>
        </div>
      </div>
    </div>

    <div class="row justify-content-start mt-2">
      <div class="col-md-4">
        <h6>商品名</h6>
        <input type="text" name="" value="" class="form-control">
      </div>
    </div>

    <div class="row justify-content-start mt-2">
      <div class="col-md-3"></div>
      <div class="col-md-1 text-end">
        <button type="button" class="btn btn-outline-primary">検索</button>
      </div>
    </div>

  </div>
</body>

</html>

分かりづらいですが、紫がrow・黄色がcolです

f:id:butorisa:20220106231529p:plain

最上部の項目、カテゴリと在庫をlabelとinputでrowを分けたのはチェックボックスを下寄せにするためです!

(rowを分けないと在庫のラベル表示が左のカテゴリのラベル表示とズレちゃいます)

検索ボタンの右寄せは空の col-md-3 分のdivを定義して無理やりぽいですが実現しています

(もうちょっとスマートな方法ないかな…?)

Webhookってなんだっけ??

先日RDS同士のデータ連携について調べたので打ち合わせで「調べました!」と報告すると「あとWebhookもありだよね」と言われました

あれ?Webhookってなんだったっけ…??

更新情報を他アプリにリアルタイム提供

qiita.com

GitHubにプッシュしたらCodePipelineが動き出す仕組み!JIRA更新した時のslack通知!

そういえば前にRedmine(EC2)でチケット更新したらslack通知する設定した記憶が…

あれがWebhookだったのか

RDS同期への応用方法

dev.classmethod.jp

理想はこうなんだけど

  1. RDSが更新されたらEventBridgeで更新を検知

  2. 更新されたテーブル名、CRUD区分、更新データをlambda引数に渡しもう一方のRDSを更新

EventBridgeでRDS更新は検知できなさそう??(RDSイベントになさそう)

EventBridgeからlambdaに更新したテーブル名とかデータとか渡せるんだろうか??

引数設定を入力トランスフォーマーにしたらいけるかもって思ったけど、入力トランスフォーマーに渡す値はイベントテキスト(定数json)だから無理かも…

時間ある時に苦戦してみるか笑

Goはじめた!!

超今更だけどGo始めてみる!

爆速HelloWorld!

まずはmacにGoをインストール

brew install go

ビルドができるように環境設定を変更(何を変更したのかは今は知らなくていい)

go env -w GO111MODULE=off

ワークスペースにhello.goを作成して以下を書く

package main

import "fmt"

func main() {
    fmt.Printf("hello, world\n")
}

hello.goがあるディレクトリでビルド・実行!

build go
go run hello.go

これで hello, world と表示される!!(いい調子!)

標準モジュールを使ってみる

A Tour of Goの最初の方をざっと読んだので多分書ける!!

AdventCalendar参加者と記事、投稿日を標準出力に表示します

package main

import "fmt"

// 記事struct
type Aritcle struct {
    author   string
    title    string
    postDate string
}

func main() {
    article1 := Aritcle{"buto", "Python 音声ファイルの周波数を取得する", "12/8"}
    article2 := Aritcle{"ys2896", "MySQLのAurora化でMyISAMがなくなって苦戦した話", "12/9"}
    article3 := Aritcle{"yugi0922", "AWSソリューションアーキテクトアソシエイト(SAA) 合格(予定)体験記", "12/12"}
    article4 := Aritcle{"sugiyama_yuta", "DockerでのLaravel×Reactの環境構築について書きます", "12/24"}

    adventCalendar := [4]Aritcle{article1, article2, article3, article4}

    for i, article := range adventCalendar {
        fmt.Printf("AdvendCalendar参加者 %d人目: %s\n", i+1, article.author)
        fmt.Printf("%s %s\n", article.postDate, article.title)
        fmt.Println("******************************")
    }
}

これを go run すると…

AdvendCalendar参加者 1人目: buto
12/8 Python 音声ファイルの周波数を取得する
******************************
AdvendCalendar参加者 2人目: ys2896
12/9 MySQLのAurora化でMyISAMがなくなって苦戦した話
******************************
AdvendCalendar参加者 3人目: yugi0922
12/12 AWSソリューションアーキテクトアソシエイト(SAA) 合格(予定)体験記
******************************
AdvendCalendar参加者 4人目: sugiyama_yuta
12/24 DockerでのLaravel×Reactの環境構築について書きます
******************************

おお〜できました!range を使うと配列のインデックスと要素が簡単に取得できるのでいい!!