このリポジトリはFlutter Handsonに利用します。 今回はAndroidでいきます
[TOC]
自動翻訳機能付きの単語帳アプリ作成のための雛形です。 とりあえずこいつが起動できるように準備してくださいm(._.)m
AndroidStudio…プログラムを書くために必要
flutter…今回の主役。モバイルアプリ作成のために必要。
firebase…ミドルウェアに採択。DBと自動翻訳のAPIのために必要。
※flutterでAndroidのシミュレーターが確認できる方はflutterの項目を飛ばしてください※
- Flutter SDKのダウンロード
- flutterを起動する
- AndroidStudioのインストール
- OS共通の作業へ
①以下より任意の場所にダウンロード
※リンク切れならこちらの指示に従ってSDKをダウンロードしてください。
※以下の作業をC:\Program Filesのようなアクセス許可が必要な場所で行うと失敗しますので注意してください※
①C直下に[src]フォルダ作成
②1でダウンロードしたC:\src直下に解凍
①以下より任意の場所に.exeをダウンロード
https://developer.android.com/studio/?hl=ja
②インストールウィザードの指示に従ってインストール
※初回起動時にSDKのインストールウィザードが出るがStandardを選択肢デフォルトの設定でインストール
※HAXMのインストールでエラーが出る場合以下参照※
①コマンドプロンプトを管理者権限で開く ②以下コマンドを叩いて再起動 bcdedit/set hypervisorlaunchtype off
③BIOSを起動してVT-xを有効化
④configureからsdk managerを起動しSDK ToolsからHAXMにチェックを入れokを押下。
※HAXMにチェックがすでに入っていたら一旦外してApplyする
①下部「macの方」項目を飛ばして「OS共通」項目の作業へ。
- Flutter SDKのダウンロード＆解凍
- パスを通す
- AndroidStudioのインストール
- OS共通の作業へ
①以下より「Downloads」にダウンロード＆解凍
※リンク切れならこちらの指示に従ってSDKをダウンロードしてください。
②以下コマンドを叩く
mkdir ~/development
先程のzipを解答してdevelopmentフォルダに移動
①bash_profileをviで開く
以下コマンドを叩く
vi ~/.bash_profile
②以下を追加
export PATH="$PATH:/Users/[User名に置き換えて[]を削除]/development/flutter/bin"
③pathを更新
以下コマンドを叩く
source ~/.bash_profile
①以下より任意の場所にインストールファイルをダウンロード
https://developer.android.com/studio/?hl=ja
②インストールウィザードの指示に従ってインストール
※初回起動時にSDKのインストールウィザードが出るがStandardを選択肢デフォルトの設定でインストール
①「OS共通」項目の作業へ。
- flutter doctor --android-licenses
- Flutterプラグインのインストール
- エミュレータの作成
①以下コマンドを叩く
※Windowsの方はC:\src\flutterflutter_console.batを起動しそちらで叩く
flutter doctor --android-licenses
※flutterプラグインのインストールの際、Dartプラグインもインストールするか尋ねられるので合わせてインストールする※
①AndroidStudioを起動する
※初回起動時にSDKのインストールウィザードが出るがStandardを選択肢デフォルトの設定でインストール
②configureを押下。メニュー一覧が表示されるはずなのでPluginを選択する。
③検索ボックスからflutterと検索し、公式のflutter.ioが提供するflutterプラグインを選択しインストールを押してFlutterプラグインとDartプラグインをインストールする。
①configureを押下し、AVD Managerを起動 ②create virtual deviceを押下 ③Pixel2を選択しnextを押下 ④システムイメージのAPIレベルを求められるので29(Q)を選択しnextを押下。 ※この際、SystemImageが未ダウンロードであればReleaseNameにDownloadと表示されているはずなのでダウンロードする。 ⑤finishを押下
※前提…グーグルアカウントを取得していること
- firebaseの登録
- データベースの作成
- firebase extentionsの登録
- アプリ登録
①以下のURLにアクセスし「使ってみる」を押下 https://firebase.google.com/?hl=ja
②プロジェクトの作成（手順 1/3）「プロジェクトに名前を付けましょう」
「氏名(ローマ字)-dictionary-hands-on」と名前をつけて続行を押下。 ※プロジェクト名は任意なのでなんでもいい※
③プロジェクトの作成（手順 2/3）「Google アナリティクス」
Googleアナリティクスを有効にするにチェックを入れ続行を押下。
④プロジェクトの作成（手順 3/3）「Google アナリティクスの構成」
全てチェックしてプロジェクト作成を押下。
①作成したプロジェクトページを開いてサイドメニューの「開発」を押下。
②「Database」を押下。
③「データベースの作成」を押下。
④テストモードで開始にチェックを入れ「次へ」を押下。
⑤Cloud Firestore のロケーション をasia-northeast1にして「完了」を押下。
⑥「インデックス」を押下
⑦「インデックスを追加」を押下し
⑧以下の設定を行いインデックスを作成。
コレクションID→dictionary
フィールドのパス1→type,Ascending
フィールドのパス2→created_at,Descending
クエリのスコープ→コレクション
※お支払い情報を入力する作業がありますが個人で普通に使っている分だと無料枠を超えることはありません※
①作成したプロジェクトページを開いてサイドメニューの「Extentions」を押下。
②Translate Textの「インストール」を押下。
③「次へ」を押下
④「プロジェクトをアップグレード」を押下。
⑤指示に従ってお支払い情報を入力する。
①Project Overviewの「Android」を押下し、Androidを選択。
※次回以降はProject Overview上部の「アプリ追加」を押下し、Androidを選択。
②Androidパッケージ名に「com.example.dictionary」と入力し「登録」を押下。
③google.service.jsonをダウンロードする。
※以下2020/2/3追記※
①作成したプロジェクトページを開いてサイドメニューの「extentions」を押下。
②Translate Textを探してインストール。
③translation language for～の設定を「en,ja」に設定。（frやesなどをプラスしても問題ありません）
④collection pathを「dictionary」と設定。
⑤input fieldnameを「word」と設定。
⑥output fieldnameを「translated」と設定。
- git clone
- Get dependencies
- gradle sync
- エミュレータ起動
- アプリ起動
①以下リポジトリをクローン https://github.com/sk-welldan/dictionary_hands_on_hinagata.git
①AndroidStudioで「dictionary_hands_on_hinagata」フォルダを開く
②「dictionary_hands_on_hinagata/lib/main.dart」を開くと上部にGet dependencyと表示されているはずなので押下。
①firebaseの設定項目でダウンロードしたgoogle.service.jsonを「dictionary_hands_on_hinagata/android/app」に移動。
②AndroidStudioで「dictionary_hands_on_hinagata/android」フォルダを開くと自動でgradle syncが始まる
①AndroidStudioで「dictionary_hands_on_hinagata」フォルダを開く
②AVDマネージャーから作成したエミュレータを起動する
①上部の再生ボタンを押下しアプリを起動。 ※結構時間がかかります※
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent