Flutterメモ 1. 開発環境の構築(iOS)
flutterの環境構築
Android版の記事もあります。
この記事を読んでできること
- 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からインストールしましょう)
ターミナル上で qを押すと、終了します。
SPA・サーバレスハンズオン part1 React/Firebase Hostingで初めてのwebサイト公開
シリーズ
- part2: SPA・サーバレスハンズオン part2 一般的なwebページとReactアプリの構成を知る - ヨシオ個人開発ブログ
- part3: SPA・サーバレスハンズオン part3 React/Firebase Cloud Firestoreでチャットアプリを作る - ヨシオ個人開発ブログ
part3までやるとできるもの
このようなチャットアプリが作れます。
デモページ: https://huit-tetsufe-0506.firebaseapp.com/ ソースコード: https://github.com/TetsuFe/huit_react_handson_20190506
事前準備
- gmailアカウントを一つ作っておくこと
大事なこと(講習会用)
- ついていけなくなったら周りの人にすぐ相談しよう
- それで解決しないときには発表者に相談する
- 参加者同士の交流を促すためで、発表者に質問をしないでほしいというわけではないです
1. 環境構築
参考 サーバーサイドエンジニアも知っておくべきフロントエンドの今
1.1. エディタインストール(VSCode)
ファイルを編集するためのエディタをインストールします。すでになんらかのエディタをインストールしている人は、改めてインストールする必要はありません。
今回はVSCodeを使います。VSCodeはMicrosoft社製の軽量なエディタで、stackoverflowのランキングでもSublime TextやAtomなどの類似エディタを抑えて一位にランクインしています。
Stack Overflow Developer Survey 2018
どれくらい便利かは使ってみればわかります。以下からダウンロードしましょう。
やらなくていいです:興味のある人向け
コードのフォーマットなどを気をつけたい場合は以下リンク等を参考にESLint・Pretitterなどを導入すると良いらしいです。
Prettier 入門 ~ESLintとの違いを理解して併用する~ - Qiita
1.2. Vscodeの統合ターミナルを開く(ターミナル・コマンドプロンプト・端末などでも良い)
インストールしたVS Codeを開きましょう。
そして、ctrl + shift + @ または Terminal > New Terminal からターミナルを起動します。
起動したら以下のように出てきます。(緑色の部分がターミナル)
1.3. homebrewインストール(mac)
windowsやlinux系OSを使っている人は飛ばしてください。
macOSの人は、homebrewというツールをインストールします。これは、後にnode.jsをインストールするために使います。https://brew.sh/index_ja に書いてあるコマンドをターミナル上にコピー&ペーストして、実行します。以下のような感じです。
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
以下、$ から始まるものはターミナル上で実行してください。
1.4. node.jsのインストール
$ brew install node
windowの人は、このリンクからインストールしてください。 Node.js
node.jsとnpmというパッケージ管理ツールがインストールされます。
- node.js
- javascript実行環境。
- 実行環境とは、簡単に言うとプログラムを解釈し、実行してくれるプログラム。
- この環境で動く便利ツールが多いから使うという印象。
- Node.js - Node.jsはなぜインストールする必要があるの?|teratail
- npm
- node.jsで使えるパッケージを管理するためのツール。今回使うreactなど、便利なツールをインストールしたりアンインストールしたりするために必要。
- npm (パッケージ管理ツール) - Wikipedia
- npmはpipなどに似たパッケージ管理機能だけでなく、スクリプトのエイリアスとしても使えます。その例が以下に出てくる
$ npm start
や$ npm build
です。これらの定義はpackage.jsonに書かれています
要は、reactやその他jsライブラリを使った開発を快適に使うための環境をセットアップしたと思ってください。
1.5. chromeのインストール(開発用ツール)
人によって動作しないということをなくすために、Chromeをインストールしてください。本当はバージョンも合わせるべきですが面倒なのでそこまではやりません。
2. 初めてのReactサイト作成
2.1. とりあえずhello, world
まずはとりあえずサンプルプログラムを動かしてみましょう!
今回は公式インストールガイド Create a New React App – React にしたがって、create-react-appを使います。
ターミナルを開いて、以下を実行します。
$ npm -v 6.7.0 $ node -v v8.11.4 $ npx create-react-app huit_handson_20190506
出力
We suggest that you begin by typing: cd huit_handson_20190506 yarn start Happy hacking!
こんな感じに出たら、以下のようにターミナル上でコマンドを実行します。
$ cd huit_handson_20190506 $ npm start
これでReactアプリケーションが実行できました! $ npm start
というコマンドを打つと、Reactアプリケーションのサーバーが起動します。これにwebブラウザからアクセスすれば、webページとして見ることができます。
Chromeを開いて、localhost:3000 と入力しましょう。(自動的に開く場合はしなくてもよいです)
localhost:3000 はlocalhostが自分のサーバーの名前で、3000はポート番号のことです。後に説明しますが、localhost:3000 とURLバーに入力することで、ブラウザは僕らが実行しているReactアプリケーションを見つけ出すことができます。
うまくいけば、ブラウザ上に以下のような画面が表示されているはずです。$ npx create-react-app huit_handson_20190506
というスクリプトによってデフォルトのアプリケーションコードが生成されたので、今はこんな表示になっています。
まとめ
- create-react-appというツールを使って、reactアプリケーションを作った。
- npm start というコマンドを打つとreactアプリケーションサーバーが起動する。
- ChromeのURLバーにlocalhost:3000と入力するとwebページとして表示できる。
2.2 公開しよう
デフォルトのままですが、いきなり全世界公開してしまいましょう!
いきなり公開までやってしまうのには以下のような理由があります。
- コードが複雑でない方が、公開が簡単・失敗した時の原因が特定しやすい
- 先に公開までやっておけばローカル(自分のPC)で完成した時にすぐ公開できて、他の人に見てもらえる
2.2.1 webサイト公開の仕組み
今現在の方法は、自分のPCだけで完結しています。
後述するFirebase Hostingのようなサービスを使って外部のサーバーを使ってサイトをweb上に公開する場合、以下のようになります。
さらに詳しくするとこんな感じです。
以上の図から、webサイトを公開するためには、だいたい以下のような手順が必要になります。
- 1.サーバーを起動する
- 2.webサイトの要素をサーバーに置く
- 3.ブラウザが見つけ出せるようにする
2.2.2 Firebase Hostingを使う
今回は、公開のためにFirebase Hostingというサービスを使います。
firebase.google.com からアカウント登録しましょう。アカウント登録が終わったら、一旦ターミナルに戻ります。
まずは、reactアプリケーションを公開用のコンパクトなhtml・css・jsファイルに変換します。
ターミナルを見ると、以下のように表示されていて、何もキー入力を受け付けない状態かもしれません。これはサーバーが起動しているためです。
ctrl + c を押して一旦サーバーを停止すると、入力できるようになります。
入力できるようになったら、以下のコマンドを入力します。
$ npm run build
なんか色々出てきますが最後に以下のように出てくればOKです。
The build folder is ready to be deployed. You may serve it with a static server: yarn global add serve serve -s build Find out more about deployment here: https://bit.ly/CRA-deploy
次に、Firebaseのサーバーのセットアップをします。
コンソールに移動します。
「プロジェクトを追加」をクリックします
こんな感じに入力します。
プロジェクト名は自分の好きな名前にすればOKです。
「プロジェクトの作成」を押すと、プロジェクトが作成されます。
続いて、Firebase Hostingの初期設定をします。
このポップアップにしたがってターミナルに以下を実行します
$ npm install -g firebase-tools
終わったら、「次へ」をクリックします
このポップアップにしたがってターミナルに以下を実行します
$ firebase login
ログインできたら、
$ firebase init
今度は、処理の途中で入力することがあります。
Hostingを選択しましょう。(カーソルキーで切り替え、「半角」スペースで選択、エンターで入力を完了)
紐づけるプロジェクトを選択しましょう。これはカーソルキーで選択してエンターを押せばOKです。
最後に2つ聞かれますが、一つ目の質問には「build」、二つ目の質問には「y」を入力しましょう。(5/8修正:画像にはpublicとありますが、buildと入力してください)
ここでpublicと表示されていたとき、index.htmlが書き変わってしまうことがあるようです。なのでその際はindex.htmlの中に<div id="root"></div>
を追記してみてください。
これでfirebase hostingの初期セットアップは完了です!さっそくwebページを公開(デプロイ、deploy)しましょう!
$ firebase deploy --only hosting
以下のように出力が出ます。
=== Deploying to 'huit-tetsufe-0506'... i deploying hosting i hosting[huit-tetsufe-0506]: beginning deploy... i hosting[huit-tetsufe-0506]: found 1 files in public ✔ hosting[huit-tetsufe-0506]: file upload complete i hosting[huit-tetsufe-0506]: finalizing version... ✔ hosting[huit-tetsufe-0506]: version finalized i hosting[huit-tetsufe-0506]: releasing new version... ✔ hosting[huit-tetsufe-0506]: release complete ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/huit-tetsufe-0506/overview Hosting URL: https://huit-tetsufe-0506.firebaseapp.com
最後の Hosting URL: https://huit-tetsufe-0506.firebaseapp.com
を見てください。ここにアクセスすると、、、
あれ・・?
どうやら公開するディレクトリの設定が間違っていたようです。
この設定を変更するには、reactアプリフォルダ内に作られた設定ファイル「firebase.json」を編集すればOKです。
VS Codeでreactアプリのフォルダを開いて、編集できるようにしましょう。
Open Folderから、reactアプリのフォルダを選択しましょう。
ターミナルを開き直しましょう。(ctrl + shift + @ または Terminal > New Terminal)
左の部分を左クリックして、New Fileから、firebase.jsonを作成
以下のように書いて保存します。
{ "hosting": { "public": "build" } }
ここにbuildとするのは、先ほど $ npm run build
で生成されたコンパクトなhtml・css・jsファイル群のフォルダ名がbuildだからです。
VS Codeのフォルダツリー(左側に出ているやつ)をみれば、buildフォルダがあることがわかると思います。
参考:(初心者向け)Firebase HostingへReactプロジェクトを公開する手順 - Qiita
次に、以下のようにしてこのターミナル上で設定をもう一度行います。(ここの説明は割愛します)
$ firebase use --add
その後、もう一度公開してみましょう。
$ firebase deploy --only hosting
終わったら、https://<自分の設定した名前>.firebaseapp.com/ にアクセスすると、今度こそ作成したReactページが表示されるはず!
2019/06/15 追記:これでうまくいかない場合は、firebase initをした時などにindex.htmlがfirebaseによって書き換えられていることが原因かもしれません。$ npm run build
をもう一度行い、index.htmlを最新の状態にしましょう。
Firebase hostingは自動でURLを発行してくれる(自動DNS設定)
Firebase hostingは自動でURLを発行してくれる ことがわかったと思います。
これは、先に説明したDNSの設定を自動で行ってくれていると言い換えられます。
実際にはあるIPアドレスを持ったサーバー上にreactアプリのファイルがあるという状態になっています。
これによって、IPアドレスという覚えにくい名前ではなく、ドメイン名というわかりやすい名前でユーザからアクセスしてもらえることができるようになっています。
また、ターミナルでnslookupコマンドを実行すると、ドメイン名とIPアドレスの対応を調べることができます。
$ nslookup huit-tetsufe-0506.firebaseapp.com
出力
Server: 192.168.0.254 Address: 192.168.0.254#53 Non-authoritative answer: Name: huit-tetsufe-0506.firebaseapp.com Address: 151.101.1.195 Name: huit-tetsufe-0506.firebaseapp.com Address: 151.101.65.195
Addressという項目がIPアドレスです。ちなみに、IPアドレスが複数あるのは、サーバーの数を複数台にしてアクセスの際にどちらにもアクセスできるようにすることで、負荷を分散させるためらしいです。
やってみよう:IPアドレスを直接ブラウザに打ち込んだらどうなる?
繋がるか繋がらないか自分の頭の中で一度考えてから、やってみてください。
まとめ
- firebase hostingを使えばサイトをwebに公開できる
- firebase hostingは主にターミナルでコマンドを実行して設定する
- firebase hostingは自分のHTMLファイルなどを公開サーバーにおくことができる
- firebase hostingは勝手にそのサーバのIPアドレスとドメイン名をDNSに登録してくれる
- わかりやすい名前でクライアントから見つけてもらえるように設定してくれる
参考
- Deploy React.js app on Firebase. QUICK GUIDE: React.js + Firebase 🔥 | by Julien Rioux | Medium
- https://firebase.google.com/docs/hosting/quickstart?hl=ja
- (初心者向け)Firebase HostingへReactプロジェクトを公開する手順 - Qiita
シリーズ
Flutterメモ 始めます
Flutterメモ始めます。
バイトで溜まってきたメモをもとに個人開発のアプリを作りながら、それを例に説明していけたらいいなあ、と思ってます。
以下のような感じで進めていきたい
- Flutter導入・開発環境のセットアップ
- Flutterの基本UIパーツ(Widget)
- Flutterの状態管理(setState・BLoC)
- Flutterでアニメーション
- Flutterのレイアウト・レスポンシブ
- 使ったライブラリ紹介
- その他ハマりどころ等
今回は以下のガイドライン(後でまたちゃんと更新します)に沿って書いていく予定です
- コードだけを載せない。
- 動作の様子をgifなどの動画で説明
- 図を用いた説明が可能であれば図を用いる
- 参考文献を載せる
- 無理に自分の言葉で説明をしない(よりわかりやすい資料があればそれを紹介するだけの方が良い)
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 なのだから。
アジャイルソフトウェア開発の奥義のメモ 14章
14章 継承と委譲 template method と strategy の違い
http://yusuke-ujitoko.hatenablog.com/entry/2009/12/29/000000
https://www.slideshare.net/mobile/gaaupp/ss-36273759
これらの記事でも述べられているが、
Strategyの方は,細かいパーツをinterfaceとして用意し、それを使って全く異なるアルゴリズムにごっそり差し替えられるようにしておくためのパターン。
Templateメソッドパターンはあるアルゴリズムを使う前提で、アルゴリズムの大きな流れのテンプレートを継承して拡張できるようにするためのパターン。
Strategyパターンでは、ソートの方法(実装)とソートに使う基本的な計算のパーツとに分けておき、そのパーツだけをinterfaceに切り出しておく。つまりパーツは使いまわせるが、必ずしもバブルソートという具体的なソートの方法のために使う必要はない状態になっている。
Template methodパターンでは、抽象クラスがソートの方法と計算のパーツの両方を知っているということになってしまっている。これではこの二つは分けられず、計算のパーツだけを使いまわして別の新しいアルゴリズムに切り替えるということがやりにくい。
書籍では継承と委譲という対比で書かれているが、責務の切り出しの大小の違いと考えた方が良さそう。 Strategyパターンが優れていると書かれているが、実際にはおそらく場合によって責務の切り出しが必要でないような場合にはTemplate methodを使った方が単純で見通しが良い場合もあるはず。
学生エンジニアによるtry! Swift Tokyo 2019感想
初めてのプログラミング系カンファレンス参加
僕はSwift歴2年程度(趣味なのでレベルは低めですが)ですが、初めてのカンファレンス参加でした。
try! Swift Tokyo 2019というSwiftというプログラミング言語関連のカンファレンス(講演会)に参加してきたのでその感想です。
注:発表はしてません。
Swiftのマニアックで深い議論
発表の内容としては、普段あまり聞いたことのないような話が多かったです。
正直ほとんどついていけませんでしたが、ライブラリの開発者の方など最先端の技術動向が知れる内容で、レベルの高そうな方でもあまり知らないという感じの内容も多かったので、ある意味レベルに関係なく楽しめる内容だったのではないかと思います。
割と業務向けの話というよりはかなり限定的な用途で使えるような話も2、3割くらいありました。
「ARKitのアプリを作ろう」 speakerdeck.com
ラズパイでSwiftを動かす話
www.slideshare.net
SwiftのType Metadataを活用する話(全然理解がおいつきませんでした)
「アセンブリ、君ならできる!」
あまり使っていなかったアセンブリを使ったデバッグ方法を知れたので立ち往生した時の解決方法の引き出しが増えた気になりました
https://www.andrewmadsen.com/AssemblySlides.pdf
デザイン(UI・アプリケーション設計)の話も多い
Human Interface Guidelineをちゃんと読みたくなりました。
ネイティブアプリっぽいアプリとはどんなもの?デザインの本質に踏み込んだ話
パーツ同士の色のコントラストについて深く考える話
https://raw.githubusercontent.com/emarley/ColorContrast/master/ColorContrast.pdf
デザインシステムの話(マテリアルデザインみたいなの)
開発者としての価値観やマインドについての話も
以下の二つの発表では、開発者としてのマインドの持ち方や人種に対する偏見や環境の違い(お金がなくてmacが買えない人が意外と多いなど)の話もあって、こういう発表もありなんだと思うと同時に、結構評判が良い印象を受けました。
文字起こし資料
文字起こし資料
休憩時間やパーティーでお話ししたり
休憩時間やパーティで、他の参加者の方とコミュニケーションを取ることもtry! Swiftでは推奨されてました。 僕は結構こういう場で話すのが苦手で技術的なコンプレックスもあってあまり話せなかったのが残念でした。 結構先輩の社会人の方から色々とお話を聞かせていただくだけになってしまったので、次回は自分にしかない経験をたっぷりと用意して行きたいですね。
ワークショップは手厚くサポートしてくれる
ワークショップもありました。僕はServer Side Swiftのハンズオンコースだったんですが、いい感じにハンズオンを区切ってくれて質問がしやすい環境で、そのテーマに詳しくない人でも問題なくついていけるようになっていました。
ハンズオン資料
意外とガチ勢ばかりではない
意外とSwift歴1年程度(僕があった人はほぼ業務で触ってましたが)の方も多く、雑談の際の話が合わないというレベルではなかったように思います。(そもそも技術的な話というよりは、作っているものの内容やどんな開発体制をとっているか(何言語か、どんなチームかなど)という話が多かったです)
みなさんもぜひtry!してみては
はじめてのカンファレンスで結構反省すべきところも多かったですが、参加して良かったと思える素晴らしいカンファレンスでした!
少しでも興味のある方はぜひ参加してみてはいかがでしょうか。