未熟学生エンジニアのブログ

プログラミング・Web開発をする大学院生のブログ

Flutterメモ 番外編 GitHubとCIツールの連携(Codemagic)

今回やること

  • CodemagicとGitHubを連携させてFlutterアプリをビルド
  • slack通知連携
  • iOSアプリAdHoc配信
  • Readmeにバッジをつける

Codemagicを選んだ理由

CIツールを使ってみたかったんですが、調べてみるとCodemagicというCIツールが評判がいいらしい。どうやらFlutterに特化しているらしく、競合(Flutterにおいては後発っぽい)のBitriseよりもいろいろ充実してるっぽい。

ただ、ビルドが若干遅いらしく、対応中とのことらしいです。

今回はこのCodemagicの方を試してみることにしました。

GitHubリポジトリを用意

今回はこのリポジトリを用意しました。今回はPublicリポジトリですが、CodemagicはPrivateでも使えるっぽいです。

github.com

Codemagicへの登録

以下のリンクから登録します。

codemagic.io

GitHub連携認証を使ったのですが、登録が完了すると同時に以下のような画面に。

f:id:swiftfe:20190423061550p:plain

CIを導入したいリポジトリに対して「Start your first build」ボタンを押すと、なんといきなりビルドが始まりました!

f:id:swiftfe:20190423061618p:plain

簡単すぎる・・(他のCIツールもそうだったかも?)

トリガー

このままでは手動でCIを回さないといけないので、トリガーを設定します。

App Settingsから、Build Triggerを展開します。

以下のように設定できます。

  • ブランチ名
  • タイミング
    • push時
    • pull requestのupdate時
      • artifacts(appの生成)はなし

f:id:swiftfe:20190424014144p:plain

また、説明は割愛しますが、走らせる処理をブランチごとに分岐させたい時は、workflow自体を複数作ることで可能らしいです。

参考:CodemagicでFlutterアプリのビルド・配信をする — iOS編 – Flutter 🇯🇵 – Medium

この記事の「トリガー」を参照してください。

slack連携

設定画面(App Settings?)を開いて、publishの項目を展開すると、以下の様にslack連携の項目が現れます。

f:id:swiftfe:20190423070320p:plain

連携に成功すると、以下の様にチャンネルと通知のトリガーを選択します。

f:id:swiftfe:20190423070427p:plain

次回のビルドから、以下のようにslack通知が来るようになります!ビルドは結構時間がかかるので、通知を設定しておくと便利そうです。

f:id:swiftfe:20190423070432p:plain:w500

Adhoc配信

Adhoc配信自体が正直よくわかっていませんが、とりあえずやってみます。

App Settingsから、publishの項目を展開し、さらに「iOS code signing」を展開します。ここのフォームにアカウント情報を登録します。今回はAutomaticを選択します。

f:id:swiftfe:20190423071327p:plain

もう一度「Start new build」してみます。

slackの通知にipaファイルが追加されています!

f:id:swiftfe:20190423072222p:plain

iPhoneからリンクをクリックしてみると・・(slackからsafariへ移動しましょう)

インストール確認ダイアログが!

ホーム画面にインストールされました!

ちゃんと起動しました!!簡単すぎる…

このリンクを配布すればいろんな人にダウンロードしてもらえるのでかなり便利です。

GitHubのReadmeにバッジをつける

f:id:swiftfe:20190423070612p:plain

README.mdにここにあるmarkdown用のスニペットを追加してコミットするだけです。

いい感じです!

f:id:swiftfe:20190424012813p:plain

参考

Flutterメモ 2. 開発環境の構築(Android)

Flutter環境構築、今回はAndroid編です。

Flutter sdkがインストール済みであることが前提です。よろしければこの記事をご参照ください。

swiftfe0.hatenablog.com

Android Studioのインストール

以下からインストールしましょう。

android用の build tool, ライセンスをインストールする

$ flutter doctor --android-licenses

Android StudioからFlutterプロジェクトを作ってみる

Android Studioを起動して、まずは Android Studio > Preference > Plugin と進み、以下の2つのプラグインをインストールしましょう。

f:id:swiftfe:20190422124832p:plain

成功したら、Android Studioを再起動しましょう。

再起動後は、Start a new Flutter project から、Flutter プロジェクトが作成できるようになっています。

f:id:swiftfe:20190422124804p:plain

project nameに適当な名前を入れます。

f:id:swiftfe:20190422124817p:plain

company domainには一意なドメインを入れます。特に公開を考えていない場合はexample.comなどで大丈夫だと思います

f:id:swiftfe:20190422124819p:plain

f:id:swiftfe:20190422124820p:plain

実行

Android Studioから、エミュレータを切り替えることができます。iOSバイスも選択することができます。

f:id:swiftfe:20190422125340p:plain

f:id:swiftfe:20190422125602p:plain

f:id:swiftfe:20190422125345p:plain

Android上でサンプルアプリが起動しました!(デフォルトでカウンターアプリが実装されています)

f:id:swiftfe:20190422130033p:plain

iOSも実行できます。

f:id:swiftfe:20190422124931p:plain

参考

Flutterメモ 1. 開発環境の構築(iOS)

flutterの環境構築

この記事を読んでできること

  • flutter sdkをインストールできる
  • flutter コマンドが使える様になる
  • Xcodeツールのインストール
  • コマンドからのflutterアプリの作成
  • flutterアプリをiOS Simulatorで動かす

環境

flutter sdkのインストール

https://flutter.io/setup-macos/ これに従ってインストールしました。

現在は少し変わっている様なので、こちらを参照した方が良いかもしれません。 MacOS install - Flutter

まずは上のサイトから、sdkをダウンロードしましょう。Downloads以下にダウンロードされるはず。

/Users/xxx/development に移動させます。ターミナルを開きましょう。

$ mkdir /Users/xxx/development
$ cd /Users/xxx/development
$ mv /Users/xxx/Downloads/flutter .

flutter コマンドを使える様に、パスを通します。

~/.bash_profile

#flutter
export PATH=/Users/xxx/development/flutter/bin:$PATH
$ source ~/.bash_profile

flutter docker

flutter doctorというコマンドで、うまくインストールできているか確認することができます。

$ flutter doctor

こんな感じならOKです。

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel dev, v1.2.1, on Mac OS X 10.14.4 18E194d, locale ja-JP)

xcode用ツールのインストール

$ brew install --HEAD libimobiledevice
$ brew install ideviceinstaller
$ brew install ios-deploy
$ brew install cocoapods # cocoapodsをインストール済みの場合は、brew upgrade cocoapods
$ pod setup

flutter doctorで確認します。開発環境がちゃんと整っているか確認できるのは嬉しいですね。

$ flutter doctor

こんな感じならOKです。

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel dev, v1.2.1, on Mac OS X 10.14.4 18E194d, locale ja-JP)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.2.1)

プロジェクト(アプリ)の作成・起動

$ flutter create first_sample

出力

(前略)

All done! In order to run your application, type:

  $ cd first_sample
  $ flutter run

Your main program file is lib/main.dart in the first_sample directory.

上のガイドにしたがって、以下のようにしてFlutterアプリを起動します。

$ cd first_sample
$ flutter run
Launching lib/main.dart on iPhone 8 in debug mode...
Starting Xcode build...                                          
 ├─Assembling Flutter resources...                    2.0s
 
 └─Compiling, linking and signing...                 13.2s
 
Xcode build done.                                           18.0s
Syncing files to device iPhone 8...                          6.4s

🔥  To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".
An Observatory debugger and profiler on iPhone 8 is available at: http://127.0.0.1:58361/
For a more detailed help message, press "h". To quit, press "q".

ここまできたら、勝手にiOSシミュレータが起動して、サンプルアプリが起動します!(iOSシミュレータをインストールしていない人は、Xcodeからインストールしましょう)

f:id:swiftfe:20190422130201p:plain

ターミナル上で qを押すと、終了します。

HUITWeb勉強会 予定(下書き)

事前準備

  • gmailアカウントを一つ作っておくこと
  • Githubアカウント作成
  • TravisCIアカウント作成(github連携)

環境構築

参考 サーバーサイドエンジニアも知っておくべきフロントエンドの今

エディタインストール(VSCode) https://code.visualstudio.com

homebrewインストール(mac) https://brew.sh/index_ja

Vscodeの統合ターミナルを開く

node.jsのインストール $ brew install nodejs

chromeのインストール(開発用ツール) https://www.google.co.jp/chrome/

とりあえずhello, world

$ npx create-react-app typescript

Chromeを開く localhost:3000 と入力

localhost:3000 については後で説明。

早速デプロイ

firebase.google.com からアカウント登録

firebase hostingを使う

講義開始

  • What: 概要を知るだけでなく、ブラックボックスを解き明かす
  • Why: なぜそれが必要か理解する
  • HowTo: 使いこなせるようになる

基本的なポイント

  • いっぱい要素があるけど、なぜ分けるのか。一つのファイル・一つのシステムに全て押し込めばいいのでは?

  • 分けることで再利用が可能になる。

  • 部分部分で使いまわせる。
  • 役割が分かりやすくなる。見つけやすくなる。

例えば5教科の教科書が10000ページの一冊にまとまっていたらどうだろうか?1教科しか授業がないのに教科書が重すぎる。どこにメモを書いたか思い出せない。複数のノートに分けておけば、そのノートさえあれば色んな問題を解くときに参照(参考にすること)できる。

北海道から沖縄まで一本道だったらどうだろうか?凄まじく遠回りになってしまうor道が多すぎてものすごい運任せになってしまう

ブラウザからのリクエストに応じてページを表示するには?

サーバーを用意する。

サーバーとは何?

ネットワークにつながれているコンピュータ。

なぜネットワークにつながれている?

ブラウザからのリクエストを受け取るため。

なぜコンピュータ?

複雑な処理を行うため。

ネットワークとは何?

物理的にケーブルで繋がれている機器やケーブル等のこと。機器内部で論理的に繋がれているもののことを指す場合もある。

まとめ: ブラウザからのリクエストに応じてページを表示するには?

ネットワークに繋がれた(物理的なケーブルによって通信内容を受け取ることが可能な)コンピュータが必要。

そして、受け取った通信内容を処理するプログラムが動くようにしておくことも必要。

細かい話

具体的にネットワークの処理をすると上の説明では分からないところがたくさんある。 例えば、ケーブルで繋がれているといっても、一本のケーブルで繋がれているわけではなく、一本のケーブルから何本ものケーブルへと分岐している。分岐点でどちらを選ぶか?それには標識(ルーター)を使う。 でも標識があっても行き先がわかっていないとどっちに行けばいいかは分からない。 行き先を示すのがURLである。でもURLではなく実際にはIPアドレスを使う。

なぜIPアドレス

URLとIPアドレスの変換のために使われるのがDNS

Webサービスの公開にはDNSの登録が必要になる。

さて、DNSを使ってURLからIPアドレスを手に入れると、ルーターの示す標識をたどってIPアドレスを持つコンピュータにたどりつける。

コンピュータにたどりついたら、通信内容を処理するプログラムが待ち受けている。

通信内容に応じてクライアントにwebページ情報を返すためには、このプログラムを書く必要がある。

このプログラムはFirebase上に書くことになるが、今回はほとんど書かなくていい。Firebaseが用意してくれていて、そこは勝手にやってくれる。こちらが適切な内容を送れば勝手に返してくれる。

実際にはプログラムといってもいろんなシステムに分かれており、webサーバ、アプリケーションサーバ、DBサーバなどに分かれる。

(ここではDBの話を少しする。DBはデータを適切な形式で保存しておくサーバである。ここでは普通のテキストファイル(iPhoneのメモ帳のようなもの)ではなく、表のような形式でデータを保存するようになっている。この方がデータを効率よくかつ正確に管理できるからDBシステムを使うのである。)

そして帰ってきた情報を元にブラウザ上でjavascript プログラムの続きが実行され、domが書き換えられ、ブラウザ上のページの見た目が更新される。

今回はjavascriptのプログラムを一時中断し、必要な情報をサーバーから受け取ってからjavascriptがdomを書き換え、ページ更新となったが、もう一つメジャーな方法がある。 それは、javascriptを起点としたページ更新ではなく、リソースの再取得によるページ更新である。

リソースとは、html・css・jsのこと。サーバーからhtmlをまるまる受け取り、domを一から構築する方法である。今回はjavascriptプログラムを使って一部のdomのみの書き換えを行なったが、実は最初のアクセスの際はhtml・css・jsをまるまる受け取っていた。 これはなぜまるまる受け取る必要があったと思う? 答えは単純。javascriptのファイルがそもそもないし、一部だけ更新するためには最初がゼロでは何も生まれないから。

ブラウザのページ更新をするパターンは基本的に2パターン。 ・javascriptを使って一部更新 ・html・css・jsファイルをまるまる受け取ってページの全体を更新

Webの全体像

ブラウザ、サーバは一つじゃない

ブラックボックスを解き明かす フロントエンド編

フロントエンドとは ブラウザで動くプログラムやシステムのこと

ブラウザでは基本html・css・jsの3種類のファイル形式のみ扱える

Html: ページの構造を決める。ブラウザ処理の起点になり、必要なcssやjsもここに書いておく Css: ページのレイアウト・色などを設定する Js: ページを書き換える、計算や通信などをするプログラムを実行する

Htmlはdomという形式に変換される cssはcssomという形式に変換される 最終的にブラウザがそれらを画面上にレンダリングする

htmlを書いてみる cssを書いてみる jsを書いてみる

ブラックボックスを解き明かす バックエンド編

バックエンドとはブラウザからのリクエストを処理するサーバー側の部分のこと。 ブラウザ以外の全ての部分といっても間違いではない。

DNS ルーター IPアドレスとポート番号とmacアドレス FirebaseのDNS設定 ポート番号の設定は必要ない(内部で勝手に連携してくれる) DBの構造を決める javascript(ブラウザ側)で想定している形式になるよう、勝手に形式を整えて渡してくれる 詳しい説明は省略

React.jsを使ってフロントエンドを書く

  • ディレクトリ構成
  • 基本class
  • ライフサイクル: componentDidMountなど
  • setState

FireStoreでAPIを作る

  • モデル設計
  • URLの確認

APIを叩いてみる

  • CRUD(add, get, update, delete)
  • リアルタイム処理

なぜReactなのか

javascriptを使って動的にページを書き換えることでユーザーが直感的に操作できるようになる。

でも、React.jsというフレームワークが選ばれる理由は?

  • jQueryとの比較と仮想dom
  • 状態管理方法と宣言的記述

デプロイ

  • 最後に公開します

おまけ(やらないかも) CI

  • githubにコードをあげたら勝手にデプロイされるようにする
  • 必要ならテストを回す

Flutterメモ 始めます

Flutterメモ始めます。

バイトで溜まってきたメモをもとに個人開発のアプリを作りながら、それを例に説明していけたらいいなあ、と思ってます。

以下のような感じで進めていきたい

  • Flutter導入・開発環境のセットアップ
  • Flutterの基本UIパーツ(Widget)
  • Flutterの状態管理(setState・BLoC)
  • Flutterでアニメーション
  • Flutterのレイアウト・レスポンシブ
  • 使ったライブラリ紹介
  • その他ハマりどころ等

今回は以下のガイドライン(後でまたちゃんと更新します)に沿って書いていく予定です

  • コードだけを載せない。
  • 動作の様子をgifなどの動画で説明
  • 図を用いた説明が可能であれば図を用いる
  • 参考文献を載せる
  • 無理に自分の言葉で説明をしない(よりわかりやすい資料があればそれを紹介するだけの方が良い)

最近読んでいる本

基本を身に付けたい。自分の考えに根拠を持ちたい。

オブジェクト指向・設計の本 「アジャイルソフトウェア開発の奥義」

webセキュリティ 「安全なwebアプリケーションの作り方」

SQL 「達人に学ぶDB設計徹底指南書」 「達人に学ぶSQL徹底指南書」

自動テスト 「テスト駆動開発

たまに読む 「プログラミングコンテスト攻略のためのアルゴリズムとデータ構造」

iOSアプリ設計パターン入門」

11章 DIP 依存性逆転の原則 アジャイルソフトウェア開発の奥義

  • 抽象(抽象クラス・interface)に依存せよ
  • 再利用や拡張の可能性が低いものはDIPしなくて良い
  • 依存の方向は本来ならA use B なら A -> B。Bを変えるとAに影響が及ぶ。
  • 逆転させると、A use B は変わらないまま、 A <- B とできる。実際は、A -> インターフェース <- B 。抽象化されたインターフェースを介することで、AはBの知らなくていい部分の実装を知らなくてすむようにする。ということは、Bの実装が変わってもAには影響が及ばない。というより、影響が及ばないように実装するのだ
  • A <- B だとしても、Aが変更されたからといってBに影響が及ぶわけではない。その場合おそらく A does not use B なのだから。