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を使って自身の座標の取得とその座標をサーバーに投げることを目標とします。

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勉強会 一回目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日(月)予定です。

コミケC91 西み22a スカゼミ同人本

コミケお疲れ様でした。
12月29日スカゼミ本無事に出品できました。電子書籍として販売。

内容は以下の3点になります。

・コードかけなくてもイラレわかればできる!

・Adobe Muse でサイト制作はじめてみませんか?

・ブラウザ操作なんて人間のする仕事じゃない(Chrome Extension話)

・マルウェアのあったChrome ExtensionのLive Http Headersがつかえなくなったので代わりのExtensionを作ってみた

購入していただいた方々、関係者各位ありがとうございました m(_ _)m

次回は技術書典2に当選すれば参加します。

表紙はスカゼミのマスコットキャラのスカゼミちゃんです。

Windows7でChainerをインストールしてGPUで動かすまで

かなり手こずったのでうまく動いた方法をメモっておきます
cuDNNは使ってませんのでCUDAが動くまで。

まずこちら
Windows上にChainer v1.5+CUDA+cuDNNを一番簡単に入れれる方法

ポイントはAnacondaのPython2.7の64bit版 を使うこと
機械学習を使うための便利なライブラリが元から入っています。
Microsoft Visual C++ Compiler for Python 2.7をインストール

CUDA Toolkitをインストールする

pip install chainer

はい、chainerのインストールでコケました。
簡単に入らないじゃん!!って四苦八苦。

以下のサイトに書いてあることを試してみる
セットアップ (Anacondaで自分だけ使う場合。参考サイト:windowsで開発環境を整える)

配布サイトから64bitインストーラを持ってきて実行。Advancedのところで、PATHと標準の両方のチェックを外す。これでAnaconda Promptからしか使えない。

私はWindowsのプロンプトで実行したかったのでチェックつけてままインストール完了させました。

下記を書いてあるまま実行

conda update conda
conda update anaconda
set LIB=%LIB%;C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v7.5\lib\x64
set INCLUDE=%INCLUDE%;C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v7.5\include
"C:\Program Files (x86)\Microsoft Visual Studio 12.0\VC\vcvarsall.bat"
pip install chainer

通常のプロンプトで動かすならset LIBとset INCLUDEのところはユーザー環境変数に直接書いたほうがよいかもしれないです。ユーザー環境変数にLIBとINCLUDEを作り値を入力。
システムのプロパティ→詳細設定→環境変数から可能。

パスの設定した後は謎のバッチファイルを起動。何をしているか調べる気力が無かったのでとりあえず叩いただけ。
そうしたらchainerが無事インストールできました。

後は出来た環境でサンプルを実行

通常
python ..\examples\mnist\train_mnist.py
実行時間 約10分

GPU
python ..\examples\mnist\train_mnist.py –gpu 0
実行時間 約3分

3倍以上の差が出ました。やったね!

GPUで注意すべき点はビデオカードが対応しているかどうか
対応していないとCUDAをインストールするときに英文でGPU applicationは動かないよ!って警告文が出ます。

環境
GeForce GT 640
CUDA 7.5
Windows7 64bit
python 2.7 (Anaconda)
chainer 1.7.2