Flutter勉強会 7回目

間が空いた

インフルエンザやらなにやらで、少しまた間が空いてしまいましたが再開しました。

今回やったこと。

  1. GoogleMapsプラグインのversion 0.2.0を使う
  2. GoogleMapにマーカーを複数置く

GoogleMapsプラグインのversion 0.2.0を使う

こちらのQiitaの記事を参考にしました。

https://qiita.com/aoinakanishi/items/25f2526fc7c1fe8350c6

この記事を順に進めて行き、マーカーを置くところまで進みました。

ちなみにGoogleMapsApikeyを取得するにはクレジットカードが必要です。

GoogleMapにマーカーを複数置く

単純にaddMarker()を使って増やしていくことができます。

今回は増加用のボタンを作り一度押すたびに座標が少しずれてマーカーが表示していく様子を実装しました。

次回

GoogleMapsを使って自身の座標の取得とその座標をサーバーに投げることを目標とします。

Flutter勉強会 6回目

再開

二ヶ月ぶりとなりましたがFlutter勉強会を再開しました。

今回やったこと。

  1. FlutterSDKのバージョンが1.xになったのでアップグレード
  2. GoogleMapsAPIkeyを取得してサンプルを動かす

Flutter 1.xにupgrade

こちらを参考にしました。
https://flutter.io/docs/development/tools/sdk/upgrading

flutter upgrade

を行うがバージョンが0.9止まりでした。

channelがbetaなので1.0にならないようです。
なのでchangelをstableに変更します。

flutter channel

を行ったところ

beta
dev
master

の三つしか出てきません。

試しにdevに変えてみます

flutter channel dev

エラーがでました。

error: The following untracked working tree files would be overwritten by merge:
examples/catalog/ios/Runner.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings
Please move or remove them before you merge.
Aborting
Updating f37c2

なにやらexamplesで競合がおきているっぽいです。
exmpalesの競合でつまづくのも馬鹿らしいので直接FlutterSDKのフォルダにターミナルで移動してgit操作します。

flluterのSDKがgitで管理しているので直接コマンドを打ちます

git reset –hard FETCH_HEAD

flutter channel stable

これで最新版になります。

GoogleMaps API を使う

こちらを参考にしました。
https://pub.dartlang.org/packages/google_maps_flutter

  1. google_maps_flutter プラグインの追加
  2. GoogleMaps APIKEYを取得(クレジットカードの登録が必要)
  3. API KEYの設定
  4. サンプルソースでの動作確認

次回

GoogleMapsを使って自身の座標の取得とその座標をサーバーに投げることを目標とします。

東ト38a スカゼミ vol7 コミケ新刊出します!

目次です

  1. 統計検定3級を取得したプログラマーが、統計学で利⽤する「 ⽤語・記
    号・式 」について、理解している範囲をプログラムで説明してみた。
    1.1 はじめに
    1.2 代表値
    1.3 続・代表値
    1.4 おわりに
  2. PHPでのフレームワークを使わないシンプルな会員登録認証
    2.1 読者対象
    2.2 注意
    2.3 ⽬的
    2.4 概要
    2.5 認証ライブラリを探す
    2.6 GitHubで会員登録できるシンプル認証ライブラリを探す
    2.7 PHP-Authを使う
    2.8 PHP-Authを使うための環境とプロジェクトを作る
    2.9 データベースにアクセスするための⽤意
    2.10 サイトのURLを設定しておく
    2.11 会員登録完了までの流れ
    2.12 ルーティング
    2.13 会員登録フォームを作る
    2.14 会員登録ロジック
    2.15 メールのURLから認証を実装する
    2.16 ログイン画⾯を作る
    2.17 ログイン認証
    2.18 ログアウト
    2.19 ログイン後のユーザー画⾯を作る
    2.20 会員ページダッシュボードを⽤意する
    2.21 終わりに
    2.22 おまけ
    2.23 メールの認証が不必要な場合
    2.24 もし、まっさらののPHPでミドルウェアを使わないでログインしてい
    るか確認する場合
    2.25 CSRF対策をしたい場合
  3. CSSでゲームを作る その3 神経衰弱編
    3.1 作ったもの
    3.2 環境構築
    3.3 静的ファイル出⼒
    3.4 カードをめくる
    3.5 複数のカードを配置する
    3.6 正誤判定の実装の前に
    3.7 お⼿付きの回数の概念の導⼊
    3.8 お⼿付きダイアログの導⼊
    3.9 お⼿付きの判定
    3.10 成功の判定
    3.11 ランダム性を持たせる
    3.12 おわりに
  4. 著者紹介

Flutter勉強会 5回目

Fade a Widget in and out (CookBook)

公式のcook bookを試してみました。

ScaffoldにWidgetを入れていく

継承元のStateのジェネリクスにはStateFullWidgetを入れる

内容

CenterのWidgetを利用してBoxを中央に置く。
切り替えの管理はフラグを使う。
表示・非表示はopacityで透明と非透明で行う。
ScaffoldのfloatingActionButtonで切り替える。

まとめ

仕様道理に動かすことは出来たが理解が及ばず。
技術書典5で売っていたFlutter本に頼る?
もしくはDartの勉強をしてみる?
次回はFireBaseを使うかもしれないのでログインができるようにしておく。

メモ

引数にthis.titleとつけておくと自動で
this.title = title
をやってくれる?

スカゼミ週末発表会 2018/11/10

スカゼミ週末発表会 2018/11/10

よろしくおねがいしまあああす

峯岸さんの発表

AWS Dev day がやがや動画

概要

AWSのイベント「AWS Dev day」のハッカソンのようなもので、「がやがや動画」というものを作って優勝しました。
動画をアップロードすると、リアルタイムに動画閲覧ページの一覧に加えられます。

・メインページ
・スマートフォンから動画ファイルを追加するとガヤガヤ動画にうつる

AWS紹介

AWSはAPIを叩いて色々使えて便利。
堅牢性も担保してくれるので便利。
AWSのサービスはGUIが充実していて便利。
EC2はサーバーで便利。
elastic load balancerはロードバランサー

s3はストレージサービス。99.999999999%落ちないサービス
(前に落ちたけどね)

AWS Lambdaというサービスがある。検知機能。例としてはs3にアップロードしたらラムダが検知してプログラムを実行することができる。
Amazon Elastic Transcoderは動画ファイルを他のフォーマットに変換をかけてくれる。ガヤガヤ動画でやったことは動画をgif動画にすること。

がやがや動画でのAWS利用

s3->Lambdaが検知->トランスコーダーで変換->s3に設置

Pub/Sub

Pub/sub とっても簡単にメッセージのやり取りができるサービス。
チャンネルという概念がある。

チャンネルを通してpublish-Subscribeを行える

チャンネルに送信(publish)すると、チャンネルを購読(subscribe)している人に届く

Pub/SubはIoT coreを使っている

MQTTの説明
https://qiita.com/mamatumo/items/e99428775c20064f41ee

Pub/Sub参考

AWS IoT Message BrokerのMQTTでpub/subをやってみた #reinvent

AWS IoT CoreとPUB/SUBする為のツールを試しました

AWS IoT CoreとPUB/SUBする為のツールを試しました

IoT coaは、すごい時接続数に対応している?
自動拡張してくれる。Expander!!.

AWSの資格を取った

ソリューションアーキテクトアソシエイトを取った
https://aws.amazon.com/jp/certification/certified-solutions-architect-associate/

高給取りになれる
https://itjinzai-lab.jp/article/detail/447

ソリューションアーキテクトアソシエイトの勉強方法を知りたい。

まずはAWSをやる。

公式で無料デモの模擬問題(10問)があるのでそれを受ける

AWSソリューションアーキテクトアソシエイトの本がある。2016年だけど役に立つ

お値段:1万5千円

模擬問題:2,000円~3,000円
どこが間違えたかも分からない。酷い
分野ごとには%で教えてくれる。優しい

1問1問を何度も復習。

実際は模擬問題より文章が多く難しい。
問われている内容は同じ
1000点満点 720点が合格ライン
860点取った
60問で一時間半

朝トレのあとに1時間本を読む。模擬問題を解く。
日本語が変
実際のテストは物語調の問題になる

サンプル問題のPDF
https://d1.awsstatic.com/training-and-certification/docs-sa-assoc/AWS%20Certified%20Solutions%20Architect%20-%20Associate_Exam%20Sample_v1.5_FINALJP.pdf

合格対策 AWS認定ソリューションアーキテクト -アソシエイトkindle版

AWSのAPIのQ&Aも参考になる

どのくらいの期間勉強したの?

元々AWS詳しい。それを踏まえて3週間くらい

Double Peace

以前に作ったサービス
https://v-peace-v.com/

AWS IoT Coreがわからない

Pub/Subを簡単に使う魔法

知らない人にとってはAWSのサービスは呪文

試験の範囲まとめ

s3
Dynamo DB
Cloud Search
ec2
RDS
ELB
Amazon ElastiCache
IAM
Route53
Cloud Front
Amazon Redshift(レッドシフト)
VPC
CloudWatch
CloudFormation
Elastic Beanstalk
OpsWorks
cognito
リザーブドインスタンス、スポットインスタンスのEC2の料金体系

がやがや動画まとめ

s3
lambda
Amazon Elastic Transcoder
Iot Core
cognito

スカゼミの入り方

ツイッターでDMかメンション下さい。

Flutter勉強会を行いました 4回目11月5日(月) 13時~

参加者

今回も前回と同じメンバー、Webエンジニア2人、デザイナー1人、絵師さん一人で行いました。

デザイナー、絵師さんの二人は聞き専でWebエンジニア二人がメインで行いました。

今回は公式サイトの Building layouts in Flutter tutorial を行いました。

https://flutter.io/docs/development/ui/layout

躓いたポイントとして、横向きのレイアウトでケーキの絵を右に左に情報を出す例題があるのですが、勘違いで縦にしたときもキレイに表示されるものだと思い、戸惑いました。

最終的にはgithubのソースを貼り付けて試してみて、もともと横だけのレイアウトに対してのものと気づき先に進みました。

主にRowとColumnを使ってレイアウトの作り方を学びました。

次回は 5回目11月12日(月) です。

Add interactivity tutorialかFlutter cookbookを進める予定です。

 

 

 

 

 

 

Flutter勉強会を行いました 3回目10月29日(月) 15時~

参加者

今回も前回と同じメンバー、Webエンジニア2人、Gameエンジニア一人、デザイナー1人、絵師さん一人で行いました。

初めの小一時間は人数がまだ集まっていなかったので絵師さんとDartの公式サイトでDartの勉強を行っていました。

メンツが揃ってからはudacityの16から開始しました。

躓いたポイントとしてはMaterialPageRouteの挙動がiOSとandroidに沿った動きをするため、それに気づかずサンプル通りを目指して悪戦苦闘しました。udacityはandroidのエミュレータで動かしています。

 

 

udacityのLesson1は24まで全て完了しました。

Navigationによる画面の遷移、ステートレスとステートフルの挙動の違い等々を学びました。

次回は公式サイトに戻って残っているチュートリアルを行っていく予定です。

 

 

Flutter勉強会を行いました 2回目10月22日(月) 13時~

今回はWebエンジニア2人、Gameエンジニア1人、デザイナー1人、絵師さん1人で一部聞き専で行いました。

今回はudacityを教材に利用しました。

タイトルにQuizとついているのが課題で、それ以外は動画による説明が多いサイトですい。Quizは設問で仕様を出されるので、それを満たすようにFlutterのソースを書いていきます。

Lesson15まで行うことができました。

Lesson15ではListViewを作って項目ごとにタッチしたら色が変化するものを実装しました。

 

https://classroom.udacity.com/courses/ud905/lessons/92a39eec-0c04-4d98-b47f-c884b9cd5a3b/concepts/a253cee9-7f83-4fbf-b00f-1b82621a0853

 

 

Flutter開発環境構築でのトラブル

Flutter開発で、iPhone実機テストを行おうと思って、$ flutter doctorで環境を確認したが、以下のエラーが出た。

[!] iOS toolchain - develop for iOS devices (Xcode 9.2)
✗ libimobiledevice and ideviceinstaller are not installed. To install, run:
brew install --HEAD libimobiledevice
brew install ideviceinstaller
! CocoaPods out of date (1.5.0 is recommended).
CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side.
Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
For more info, see https://flutter.io/platform-plugins
To upgrade:
brew upgrade cocoapods
pod setup

エラーメッセージどおり$ brew install --HEAD libimobiledeviceを試すが、以下のエラーが出る。

==> Installing dependencies for libimobiledevice: libplist
==> Installing libimobiledevice dependency: libplist
==> Downloading https://homebrew.bintray.com/bottles/libplist-2.0.0_1.sierra.bottle.tar.gz
######################################################################## 100.0%
==> Pouring libplist-2.0.0_1.sierra.bottle.tar.gz
🍺 /usr/local/Cellar/libplist/2.0.0_1: 29 files, 347.4KB
==> Installing libimobiledevice --HEAD
==> Cloning https://git.libimobiledevice.org/libimobiledevice.git
Cloning into '/Users/deni/Library/Caches/Homebrew/libimobiledevice--git'...
==> Checking out branch master
Already on 'master'
Your branch is up to date with 'origin/master'.
==> ./autogen.sh
Last 15 lines from /Users/deni/Library/Logs/Homebrew/libimobiledevice/01.autogen.sh:
checking dynamic linker characteristics... darwin16.7.0 dyld
checking how to hardcode library paths into programs... immediate
checking for pkg-config... /usr/local/opt/pkg-config/bin/pkg-config
checking pkg-config is at least version 0.9.0... yes
checking for libusbmuxd >= 1.1.0... no
configure: error: Package requirements (libusbmuxd >= 1.1.0) were not met:

Requested 'libusbmuxd >= 1.1.0' but version of libusbmuxd is 1.0.10

Consider adjusting the PKG_CONFIG_PATH environment variable if you
installed software in a non-standard prefix.

Alternatively, you may set the environment variables libusbmuxd_CFLAGS
and libusbmuxd_LIBS to avoid the need to call pkg-config.
See the pkg-config man page for more details.

READ THIS: https://docs.brew.sh/Troubleshooting

libusbmuxdのバージョンが、古いらしいが、アップデート方法が不明だった。
いろいろ調べてみたら、usbmuxdというのでいけるっぽいので、削除して入れ直す。

$ brew uninstall --ignore-dependencies usbmuxd
$ brew install --HEAD usbmuxd
$ brew unlink usbmuxd
$ brew link usbmuxd
$ brew install --HEAD libimobiledevice
$ brew install ideviceinstaller

$ gem update cocoapodsで、cocoapodsのアップデートができなかったので、これも古いのを一旦削除して、入れ直す。

$ gem uninstall cocoapods
$ gen install cocoapods

$ pod setupが失敗するが、以下の手順で成功

$ pod repo remove master
$ pod setup

再度、 $ flutter doctorを試す。

[✓] iOS toolchain - develop for iOS devices (Xcode 9.2)

これで実機テスト出来るようになりました!

Flutter勉強会 一回目10月15日(月) 13時~

Flutter勉強会を行ったのでその感想とFlutterの所感と行ったことの記録をしていきます。

Flutterとはクロスプラットフォームで開発できるGoogleが作ったフレームワークでマテリアルデザインで作成されます。iOS/Android,Webのフロント、サーバーサイドが作れるらしいです。

勉強会はエンジニア2人、デザイナー1人、絵師さん1人の四人が集まりました。

勉強の教材は公式サイトを使いました。

公式サイト
https://flutter.io/

環境は皆Macで共通して行いましたがWindowsでも似たような感じでセットアップできると思います。

時間がかかったポイントとしては環境設定でしょうか。必要なものが多いのでダウンロード、インストールに時間がかかります。パスの設定やコマンドで打ち込みが基本となるのでエンジニアの人には楽に設定できそうですがデザイナーの方や慣れてない人は苦戦するかと思います。flutterのバイナリへのパスをうまく通すことができたら下記のコマンドで開発環境の診断をしてくれます。足りない場合、コマンドも書いてあるのでそれに沿って行えば環境は揃えられます。

flutter doctor

Google先生はIDEとしてVSCodeかAndroidStudioを推奨しています。
我々はVSCodeで行いました。

ざっくり開発できるまでの手順を書きます。

・flutterをダウンロード
・解凍して適当なところにフォルダを移動させます。日本語パスは途中でうまく動作しないのでNGです。半角スペースも気をつけたほうがいいかもしれないです。
・flutter/binにパスを通します。.bash_profileに書いておきましょう。
・homebrew必須です
・cocoapods必須です。
・xcode必須です。xcodeは特に重いので勉強会やら何やらやるときは事前にインストールしておきましょう。
・VSCodeのflutterプラグインをインストール
・実行する前にVSCode右下がno deviceになってるのでiOSエミュレータを選択します。
・デバッグを実行でビルドが始まりエミュレーター内で動作します。

「Write Your First Flutter App」part 1とpart 2まで行いました。
サードパーティの辞書を読み込んで2つのワードを組み合わせてListViewに表示させる、さらにワード毎にお気に入りのチェックが出来てハンバーガーメニュー?から選択したお気に入り画面に遷移するというところまでがpart2ですね。
part3は無いようです。

一言感想を言うならば

hot reload 便利!

ソースを変えてセーブするだけでエミュレーター上の内容が変わります。
わざわざビルドしてアプリの生成しなおしとかしません。

バージョンがまだ0.9.4なのが不安ポイントですがflutter自体は面白いです。

flutterの仕組み自体が結構謎ではありましたがDart自体も良くわかってないので勉強が必要そうです。flutterはwidgetの中にwidgetを入れていくイメージです。今のところのイメージですが。

日本語の記事は少ないので基本公式サイトを見るのがオススメです。
英語力が弱い人はGoogle翻訳使いましょう。私もバンバン使ってます。

受注系の仕事に組み込むのはまだ不安ですが自作アプリだったらflutterメインに使っていってもいいかもしれないですね。

次回勉強会も10月22日(月)予定です。