こんにちは。 久々の投稿です。
１年ぶりにお仕事を再開しまして、とあるFlutetr案件に携わっています。 そのプロジェクトはしっかり環境分けがしてあって、ビルドに難航したのでせっかくなのでブログに残そうと思います。
IDE：AndroidStudio
OS ：mac OS Catalina 10.15.7
Devide：Pixel3
色々ぐぐった結果、環境変数に
export NO_PROXY=localhost,127.0.0.1
を追加で私の場合はいけました。
コマンドラインからのrunはできたのですが、まだAndroidStudioからのホットリロードができず。。。
AndroidStudioからビルドするとapkが作られた場所を見失ってしまうみたいで、端末にインストールをしてくれないみたいです。
こちらも解決しましたらまたブログに書きたいと思います。
こんにちは。
クラウド上でFlutterアプリが開発できると聞いてさっそく使ってみました。
まずはアカウントの作成をします。
アカウントはGoogleやGithubアカウントでも作れるみたいです。
便利ですね。
アカウントを作るとこんな画面になります。
右下の+ボタンを押すと、プロジェクト名を入れて的な画面になりますので言われるがままに入れてみます。
プロジェクト名を入れるとこんな画面になります。
左にファイルツリーが見えてますね。
おなじみのサンプルアプリが最初に作られるみたいです。
ターミナルとエディタの間はドラッグで動かせそうですが、13インチのノートPCで作業するにはちょっと狭い感じがしますね。
どうやらHotReloadは効かないようです。
無料版だからかしら……。
右に見えているシュミレーターは上の再生ボタンを押すと変更できますが毎回ビルドが走るので時間がかかります。
あと、補完が効かないかも。。。
Android、iOSのシミュレーターは課金しないと使えないみたいです。
(iOSシミュレーターは現段階でcoming soonとなっています。)
月約$20課金でAndroid/iOSシミュレーターと５プロジェクト作れる権利が与えられるみたいですね。
ちょっと割高感ありますが、なにやらiPadでも作業できるらしいとのことで、パソコンなしで開発できるのは便利かなと思いました。
もうちょっと使ってみたらまた感想書きます。
以前、AndroidStudioでの開発環境の作り方を書いたのですが、VSCodeでも作ってみようと思います。
まずはここからFlutterSDKをダウンロードします。
DLしたらzipを展開して適当な場所に置きます。
flutter.dev
flutter/binにパスを通します。
パスが通ったか確認。
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.7.8+hotfix.4, on Mac OS X 10.14.6 18G87, locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
[!] Xcode - develop for iOS and macOS (Xcode 10.3)
✗ CocoaPods not installed.
CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
Without CocoaPods, plugins will not work on iOS or macOS.
For more info, see https://flutter.dev/platform-plugins
To install:
brew install cocoapods
pod setup
! Brew can be used to install CocoaPods.
Download brew at https://brew.sh/.
[✗] iOS tools - develop for iOS devices
✗ libimobiledevice and ideviceinstaller are not installed. To install with Brew, run:
brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller
✗ ios-deploy not installed. To install:
brew install ios-deploy
! Brew can be used to install tools for iOS device development.
Download brew at https://brew.sh/.
[!] Android Studio (version 3.5)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.36.1)
✗ Flutter extension not installed; install from
https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[✓] Connected device (1 available)
! Doctor found issues in 5 categories.
ライセンスに同意する。
$ flutter doctor --android-licenses
brew update brew install --HEAD usbmuxd brew link usbmuxd brew install --HEAD libimobiledevice brew install ideviceinstaller
XCodeがインストールされていない場合には、XCodeをインストルして、
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
コマンドを打てばOKです。
cocoa podがインストールされていない場合には、
brew install cocoapods pod setup
brew install ios-deploy
VSCodeからFlutterプラグインとDartをインストールします。
ここまでチェックがつけばOKだと思います。
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.7.8+hotfix.4, on Mac OS X 10.14.6 18G87, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 10.3)
[✓] iOS tools - develop for iOS devices
[!] Android Studio (version 3.5)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] VS Code (version 1.36.1)
[✓] Connected device (1 available)
ここまでできたらコマンドパレットからFlutter: New Projectを実行してください。
FlutterSDKの場所を聞かれたら「LocateSDK」ボタンを押して、flutterフォルダを選択してVSCodeを再起動してください。
次にプロジェクト名とどこにプロジェクトを作るか聞かれるので任意の名前と場所を入れてください。
はい、完成。
[
:320]
こんにちは。
前回、前々回はfirebaseを使って認証機能を実装していきました。
今回はUIを作ってる途中で、カレンダーをポップアップさせるのにちょっと詰まったのでご紹介しようと思います。
カレンダーのUIはこちらにあります。
https://quasar.dev/vue-components/date
使いたいDatePickerを選んでコピーしてくれば、画面に貼り付けることができるのですが、
私が今回使いたかったのはこれ。
カレンダーのアイコンをクリックするとピッカーがポップアップするもの。
サンプルのコードをコピーするだけこんな感じで、最初からピッカーが表示されるし、ピッカーの様子もおかしい。
足りなかったのはここ。
// quasar.conf.js
return {
framework: {
components: [
'QDate',
'QInput',
'QPopupProxy',
],
directives: [
'ClosePopup'
],
}
}
QDataだけでなくPopup Proxyも必要でした。
https://quasar.dev/vue-components/popup-proxy
QInputに関しては別なところですでにinputを使っているので気にしてなかったのですが、これも必要です。
これでカレンダーが無事完成しました！
こんにちは。
今回はGoogle認証を作っていこうと思います。
Googleプラグインはすでに入っている前提で書いていきますので、そちらのインストールがお済みでない場合はこちらを参考にしてみてください！
Google認証はメールリンクに比べると手間が少ないですね。
scriptのところだけ書いておきます。
<script>
import firebase from 'firebase/app';
import 'firebase/auth';
export default {
name: 'PageIndex',
methods: {
toGoogle() {
const provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(provider)
.then((result) => {
console.log('success');
console.log(result);
})
.catch((error) => {
console.log('error');
console.log(error);
});
},
},
};
</script>
このtoGoogleをボタンイベントにつけておきます。
ボタンをクリックするとポップアップが立ち上がり、どのGoogleアカウント使うかの選択画面になります。
アカウントを選択すると（私の場合すでにログインしているので）認証完了です。
ログインしていない場合にはログインに進むと思います。
Google認証を使うと、メールアドレスやユーザー名も取得できます。
次は、カレンダーを使ってみようと思います。
先日からvue.jsでアプリを作っているのですが、ユーザーを特定したいので認証機能を入れてみようと思います。
認証方法は今の所２種類を考えています。
これらの認証方法をFirebase Authenticationを使っていれてみようと思います。
firebaseを使ったことがある方ならお分かりかと思いますが、firebase consoleのAuthenticationメニューを開き、「ログイン方法」タブから「メール/パスワード」をONにします。
私の場合には、Google認証もいずれ追加したいと思っているのでこちらもONにしています。
今回はパスワードなしにしたいと思いますので、「パスワードなしでログインする」もONにしています。
src/router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import firebase from 'firebase';
import routes from './routes';
Vue.use(VueRouter);
const firebaseConfig = {
apiKey: '<自分のやつ>',
authDomain: '<自分のやつ>',
databaseURL: '<自分のやつ>',
projectId: '<自分のやつ>',
storageBucket: '',
messagingSenderId: '<自分のやつ>',
appId: '<自分のやつ>',
};
firebase.initializeApp(firebaseConfig);
/*
* If not building with SSR mode, you can
* directly export the Router instantiation
*/
export default function (/* { store, ssrContext } */) {
const Router = new VueRouter({
scrollBehavior: () => ({ x: 0, y: 0 }),
routes,
// Leave these as is and change from quasar.conf.js instead!
// quasar.conf.js -> build -> vueRouterMode
// quasar.conf.js -> build -> publicPath
mode: process.env.VUE_ROUTER_MODE,
base: process.env.VUE_ROUTER_BASE,
});
return Router;
}
firebaseConfigの内容はfirebase consoleのsettingを開き、「全般」タブにあるFirebase SDK snippetから確認できます。
ラジオボタンの「構成」をチェックすると上のと同じものをコピーできます。
ただし、コピーしたままだとLintにひっかかるので、上のコードのように修正する必要があります。
メールアドレスを入力してもらうための新しい画面を作成しました。
MailLink.vue
<template>
<q-page>
<p class="q-ma-md">メールアドレスを送信してください。</p>
<q-input class="q-ma-md" v-model="email" type="email" label="メールアドレス" />
<q-btn color="primary" class="float-right q-ma-md" @click="toMail">送信</q-btn>
</q-page>
</template>
<script>
import firebase from 'firebase/app';
import 'firebase/auth';
export default {
name: 'MailLink',
data() {
},
methods: {
toMail() {
const actionCodeSettings = {
// URL you want to redirect back to. The domain (www.example.com) for this
// URL must be whitelisted in the Firebase Console.
url: '<自分のアドレス>',
// This must be true.
handleCodeInApp: true,
};
firebase.auth().sendSignInLinkToEmail(this.email, actionCodeSettings)
.then(() => {
alert('Send mail.');
// ここでローカルストレージにメールアドレスを保存しておく
this.$q.localStorage.set('emailForSignIn', this.email);
})
.catch((error) => {
alert(error.message);
});
},
},
};
</script>
urlにはリダイレクト先のURLをいれます。
firebaseのAuthenticationで承認済みドメインに登録されているドメイン以外はエラーになります。
実際にこの画面からメールを送信すると、firebaseからメールが飛んできます。(メールの文章はfirebase consoleから編集できます)
メールに添付されているリンクをクリックすると、URLに書いておいたURLにキー付きでリダイレクトされます。
リダイレクト先モジュールはこんな感じにしました。
SignIn.vue
<template>
<q-page>
<p class="flex flex-center">認証中です。</p>
</q-page>
</template>
<script>
import firebase from 'firebase/app';
import 'firebase/auth';
export default {
name: 'SignIn',
created() {
if (firebase.auth().isSignInWithEmailLink(window.location.href)) {
const mailaddress = this.$q.localStorage.getItem('emailForSignIn');
firebase.auth().signInWithEmailLink(mailaddress, window.location.href)
.then((result) => {
console.log(result);
window.location.href = './#/main';
})
.catch((error) => {
alert(error.message);
});
}
},
};
</script>
保存しておいたメールドレスと、キー付きのURLをsignInWithEmailLink()に渡します。
成功したら、メインの画面へ遷移するという風にしました。
次はGoogle認証を作っていきたいと思います。
前回、firebaseにhostingしたアプリをデフォルト状態からちょっとづつ修正して行こうと思います。
デフォルト状態だと、MyLayout.vueの内容が最初の画面として表示されています。
これを別のファイルに差し替えてみようと思います。
src/layouts/TopPage.vue
ここに新しいファイルを作ります。(名前は任意)
MyLayout.vueを参考に、ツールバーを作ってみます。
TopPage.vue
<template>
<q-layout view="lHh Lpr lFf">
<q-header elevated>
<q-toolbar-title>
タイトル
</q-toolbar-title>
</q-header>>
</q-layout>
</template>
ツールバーの色もデフォルトから変更したいので、ここのファイルを変えます。
src/css/quasar.variables.styl
$primary = #ff6f00 $secondary = #ffe57f $accent = #c43e00 $positive = #21BA45 $negative = #C10015 $info = #31CCEC $warning = #F2C037
とりあえず上３つだけ変えてみました。
ツールバーの色はprimaryを変更します。
src/router/routes.js
このファイルを開いて、ルートのコンポーネントを変更します。
const routes = [
{
path: '/',
component: () => import('layouts/TopPage.vue'),
children: [
{ path: '', component: () => import('pages/Index.vue') },
],
},
];
// Always leave this as last one
if (process.env.MODE !== 'ssr') {
routes.push({
path: '*',
component: () => import('pages/Error404.vue'),
});
}
export default routes;
これで、最初に開くページが差し代わりました。
次は認証機能を作ろうと思います。