【Flutter】クラウド上でFlutterアプリが開発できるFlutterHub使ってみた
こんにちは。
クラウド上でFlutterアプリが開発できると聞いてさっそく使ってみました。
まずはアカウントの作成をします。
アカウントはGoogleやGithubアカウントでも作れるみたいです。
便利ですね。
アカウントを作るとこんな画面になります。
右下の+ボタンを押すと、プロジェクト名を入れて的な画面になりますので言われるがままに入れてみます。
プロジェクト名を入れるとこんな画面になります。
左にファイルツリーが見えてますね。
おなじみのサンプルアプリが最初に作られるみたいです。
ターミナルとエディタの間はドラッグで動かせそうですが、13インチのノートPCで作業するにはちょっと狭い感じがしますね。
どうやらHotReloadは効かないようです。
無料版だからかしら……。
右に見えているシュミレーターは上の再生ボタンを押すと変更できますが毎回ビルドが走るので時間がかかります。
あと、補完が効かないかも。。。
Android、iOSのシミュレーターは課金しないと使えないみたいです。
(iOSシミュレーターは現段階でcoming soonとなっています。)
月約$20課金でAndroid/iOSシミュレーターと5プロジェクト作れる権利が与えられるみたいですね。
ちょっと割高感ありますが、なにやらiPadでも作業できるらしいとのことで、パソコンなしで開発できるのは便利かなと思いました。
もうちょっと使ってみたらまた感想書きます。
【Flutter】VSCodeで開発環境を作る
以前、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.
Android
ライセンスに同意する。
$ flutter doctor --android-licenses
iOS
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]
【Vue】【Quasar】カレンダーをポップアップさせる
こんにちは。
前回、前々回は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を使っているので気にしてなかったのですが、これも必要です。
これでカレンダーが無事完成しました!
【Vue】【Quasar】Google認証
こんにちは。
今回は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】【Quasar】quasarアプリにfirebase auth のメールリンクを追加する
先日からvue.jsでアプリを作っているのですが、ユーザーを特定したいので認証機能を入れてみようと思います。
認証方法は今の所2種類を考えています。
- MailLink
- Google認証
これらの認証方法をFirebase Authenticationを使っていれてみようと思います。
Firebase を導入
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認証を作っていきたいと思います。
【Vue】【Quasar】Quasarでアプリを作る
前回、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
とりあえず上3つだけ変えてみました。
ツールバーの色は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;
これで、最初に開くページが差し代わりました。
次は認証機能を作ろうと思います。
【Vue】Quasarで作ったアプリをfirebase hostingにデプロイする
近頃、Vue.jsが気になっていて少しいじってみたので記録。
目標
- Quasarでアプリを作る
- firebase にhostingする
Vueのインストール
- Noade.jsをインストールします (https://nodejs.org/en/)
- vue-cli をインストールします
npm i vue-cli -g
## quasarのインストール
npm install -g @quasar/cli
プロジェクトを作成します
$ quasar create <folder_name> ? Project name (internal usage for dev) <praise> ? Project product name (official name; must start with a letter if you will build mobile apps) <Quasar App> ? Project description <A Quasar Framework app> ? Author <qkuronekop> ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)<ESLint, Vuex, Axios, Vue -i18n, IE11 support> ? Pick an ESLint preset <Airbnb> ? Cordova id (disregard if not building mobile apps) <dev.qkuronekop.praise> ? Should we run `npm install` for you after the project has been created? (recommended) <NPM>
プロジェクトを作ると色々聞かれますので答えていってください。
<>内は私の場合なので適宜変更してください。
動かす
では、早速出来立てのアプリを動かしてみましょう。
$ cd <folder_name> $ quasar dev
http://localhost:8080/でアプリが立ち上がります。
なにもいじってない状態だとこんな感じ。
ビルドする
quasar build
buildするとdistというフォルダが作られますのでdeployする前に一度buildしておきます。
Firebaseにhostingする
- 先にfirebase consoleでプロジェクトを作成しておいてください。
$ firebase init hosting
↑のコマンドを実行すると、プロジェクトを選択するように促されますので、ホスティングしたいプロジェクトを選択します。
? What do you want to use as your public directory? dist/spa ? Configure as a single-page app (rewrite all urls to /index.html)? No
- 何か聞かれるので、↑のように答えます。
上手くdeployができればfirebase consoleのHostingの項目を開くとデフォルトのURLが発行されていますので、そこから先ほどdeployしたページを見ることができます。
次はUIをいじってみます。