省エネ

Flutter、vue3修行中。

【Flutter】freezedではまった話

先日、freezedでハマって小一時間を無駄に過ごしてしまったのでここに書いて供養したいと思います。 今やってるお仕事ではriverpodを使っていて、screenに対してview_modelを作成し、state管理を行っています。 view_modelの持っているstateをfreezedで作っ…

flutter Geminiで簡単にai chatが作れた話

こんにちは。 Geminiを使った簡単なアプリを作ってみたので、ここにコードを残したいと思います。 環境 Flutter: 3.19.1 Dart: 3.3.0 pub.dev こちらのライブラリを使いました。 Api Kyeはここで作成します。 aistudio.google.com 実装 pubspec.yml name: ge…

【Flutter】【Flame】初めてのゲーム開発

こんにちは。 本日はFlutter Flameで作るゲーム開発について書きたいと思います。 FlameとはFlutterで使えるゲームエンジンです。 pub.dev これをいつも通りpubspec.ymlに追加するだけでゲームエンジンが使えてしまいます。 簡単ですね。 普段Flutterを使っ…

【Flutterやろうよ!】初級編 その3〜スクロール〜

こんにちは。 前回、前々回と縦並び、横並びについて書いてきました。 qkuronekop.hatenablog.jp ↑Column()について。 qkuronekop.hatenablog.jp ↑Row()について。 本日はスクロールについて書いていきたいと思います。 はみだし 上の画像のように横に沢山要…

【Flutterやろうよ!】初級編 その2〜横並び〜

こんにちは。 Flutter普及記事続きを書いていきたいと思います。 前回はこちら qkuronekop.hatenablog.jp 本日は要素を横に並べていく方法について書きたいと思います。 基本的にはColumn()と一緒です。 横に並べるにはRow()を使います。 Row( children: [ C…

【Flutterやろうよ!】初級編 その1〜縦に並べる〜

こんにちは。 最近、Flutter流行ってきてるなぁと思う今日この頃です。 私自身はそろそろFlutterのお仕事を始めて3年くらいになります。 最近はブログなんかのドキュメントも充実し始めているかと思いますが、日本語のFlutter記事の普及に貢献したいと思いま…

supabase+Flutterでアプリを作りました

こんにちは。 久々の更新です。 更新がなさすぎて広告が出ちゃったので最近作ったアプリについて書きたいと思います。 成果物 play.google.com 植物の観察日記をつけるアプリ「PlantPal」。 まだ全然DLされていないのでよかったら使ってください。 Supabase…

2022年のまとめと2023年にやりたいこと

あけましておめでとうございます(遅) 今年もゆるーくブログを書いていこうかと思っています。 2022年の年末にまとめとかを書かなかったので、ここで書いておこうかと思います。 2022年個人開発事情 実は2つアプリを公開しています。 アプリのリンクはこち…

ViteでVue3+TypeScript+TailwindCSS+axiosでお天気予報アプリを作ってみる

掲題の通りなのですが、Vue3とTypescriptの練習がてらお天気予報アプリを作ってみました。 Versionとか $ node --version v19.2.0 $ npm -v 8.19.3 プロジェクト作成 qiita.com こちらのQiitaの記事を参考にさせていただきました。 Open Weather openweather…

【flutter】【go_router】flutter webでgo routerを使った時にurlの#を消す方法

こんにちは。 本日はgo routerを使った時にブラウザに表示される#を消す方法について書きたいと思います。 go routerについてはこちらを参考にしてみてください。 zenn.dev ここにリンクされているページを一通り読むとgo routerについて理解できるかと思い…

【Docker】【Vue3】Docker+Vue3開発環境を作る

こんにちは。 Webアプリが作りたい今日この頃なんですが、フロントエンドにはVue3を使いたいと思い、自分のローカルに開発環境を作った話をしようと思います。 参考 qiita.com こちらのqiitaの記事を参考にさせていただきました。 実行環境 MacOS Moterey 12…

【Flutter】【dart】コード自動生成mason使ってみた

こんにちは。 本日はdartのコードを自動生成できるプラグインmasonを使ってみたいと思います。 早速インストールしてみましょう。 私の実行環境はこちら。 flutter: 3.3.5 dart: 2.18.2 (stable) インストール $ dart pub global activate mason_cli + archi…

【Python勉強中】Windonws環境で日本語を含むjsonを読み込む

現在python勉強中です。 最終目標は機械学習がやりたい訳なのですが、機械学習系のスクリプトってpythonが使われる事が圧倒的に多いですよね。 なので、この機会にpython書けるようになりたいなと思い、簡単なプログラムを書いてみる活動を始めました。 使わ…

Flutterで作った個人開発アプリが公開されました

城Navi公開 play.google.com アプリの概要は日本のお城を検索できるアプリです。 選定技術 Flutter まずアプリを作成するのにはFlutterを使いました。 これは最近、私がFlutterばかり使っていてすぐに作れると思ったからです。 iOSやWebにもできますし、いい…

Flutterで作った個人開発アプリを公開しようとしている話

はじめに 遅くなりましたが、あけましておめでとうございます。 昨年はあまりブログも書けなかった気がしています。 今年はもっとアウトプット頑張っていきたいと思います。 個人開発のアプリを作った話 昨年、11月頃から個人開発のアプリを作成しておりまし…

ChromeBookでAndroidStudioを使う

ChromeBookを手に入れたので、AndroidStduioのインストールをしてみようと思います。 ChromeBook: Asus Chrombook Flip CM5 Ryzen5 メモリ8G まず、ここからChromeBook用のAndroidStudioをダウンロードしてきます。 developer.android.com インストーラーを…

【Flutter】あとからwebを追加する

普段通りにAndroidStudioでプロジェクト作っちゃった後にやっぱりwebも欲しいってなった時の対処方法です。 flutter config --enable-web webを有効にするコマンドです。 プロジェクトのルートで打ちます。 flutter create . ってするとwebに必要なファイル…

何もしてないのにpod initできなくなった

何もしていないは言い過ぎました。 正しくはOSとXcodeのバージョンを上げたら動かなくなりました。 バージョンアップ後の環境 OS:MacOS Big Sur 11.4 Xcode: 12.5.1 パソコン自体久しぶりに起動し、何気なくXcodeのアップデートをしてしまいました。 ついで…

Error connecting to the service protcol: failed to connect to http://127.0.0~ でFlutterアプリがホットリロードできない

こんにちは。 久々の投稿です。 1年ぶりにお仕事を再開しまして、とあるFlutetr案件に携わっています。 そのプロジェクトはしっかり環境分けがしてあって、ビルドに難航したのでせっかくなのでブログに残そうと思います。 環境 IDE:AndroidStudio OS :mac…

【Flutter】クラウド上でFlutterアプリが開発できるFlutterHub使ってみた

flutterhub.io こんにちは。 クラウド上でFlutterアプリが開発できると聞いてさっそく使ってみました。 まずはアカウントの作成をします。 アカウントはGoogleやGithubアカウントでも作れるみたいです。 便利ですね。 アカウントを作るとこんな画面になりま…

【Flutter】VSCodeで開発環境を作る

qkuronekop.hatenablog.jp 以前、AndroidStudioでの開発環境の作り方を書いたのですが、VSCodeでも作ってみようと思います。 まずはここからFlutterSDKをダウンロードします。 DLしたらzipを展開して適当な場所に置きます。 flutter.dev flutter/binにパスを…

【Vue】【Quasar】カレンダーをポップアップさせる

こんにちは。 前回、前々回はfirebaseを使って認証機能を実装していきました。 qkuronekop.hatenablog.jp qkuronekop.hatenablog.jp 今回はUIを作ってる途中で、カレンダーをポップアップさせるのにちょっと詰まったのでご紹介しようと思います。 カレンダー…

【Vue】【Quasar】Google認証

こんにちは。 今回はGoogle認証を作っていこうと思います。 Googleプラグインはすでに入っている前提で書いていきますので、そちらのインストールがお済みでない場合はこちらを参考にしてみてください! qkuronekop.hatenablog.jp Google認証はメールリンク…

【Vue】【Quasar】quasarアプリにfirebase auth のメールリンクを追加する

qkuronekop.hatenablog.jp 先日からvue.jsでアプリを作っているのですが、ユーザーを特定したいので認証機能を入れてみようと思います。 認証方法は今の所2種類を考えています。 MailLink Google認証 これらの認証方法をFirebase Authenticationを使ってい…

【Vue】【Quasar】Quasarでアプリを作る

qkuronekop.hatenablog.jp 前回、firebaseにhostingしたアプリをデフォルト状態からちょっとづつ修正して行こうと思います。 デフォルト状態だと、MyLayout.vueの内容が最初の画面として表示されています。 これを別のファイルに差し替えてみようと思います…

【Vue】Quasarで作ったアプリをfirebase hostingにデプロイする

近頃、Vue.jsが気になっていて少しいじってみたので記録。 目標 Quasarでアプリを作る firebase にhostingする Vueのインストール Noade.jsをインストールします (https://nodejs.org/en/) vue-cli をインストールします npm i vue-cli -g ## quasarのインス…

【Flutter】Androidで以前作ったViewをflutterで実現する

こんにちは。 以前お仕事で下記のようなデザインをAndroidで作ったのですが、それをFlutterでどう実現できるかやってみました。 ランキングを色と番号で表現しています。 Androidで作った時もどう実現しようか悩んで最初は、Canvasに描くという方法をとりま…

【iOS】SwiftUIチュートリアルやってみた

iOS

WWDC 2019 で SwiftUI が発表されましたね。 とりあえず使ってみたいですよね。 Xcode11 SwiftUIを使うにはXcode11 が必要みたいです。 ダウンロードはこちら。beta版をダウンロードできます。 https://developer.apple.com/download/ チュートリアルページ…

【Web】PWAにしてみた

Web

こんにちは。 先日、Flutter for webでwebアプリをリリースしたのですが、そのページをPWAにしてみました。 qkuronekop.hatenablog.jp やり方は簡単。 manifest.jsonというファイルを作成します。 { "name": "qkuronekop.dev", "short_name": "qkuronekop", …

【Flutter】Flutter for Web使ってみた

こんにちは。 Google IO 2019にて発表されたFlutetr for webが発表されましたね。 どんなもんかと思ってさっそく使ってみました。 github.com 私が試した方法です。 上のリポジトリをCloneします。 hello_woldをディレクトリをコピーしてディレクトリ名を変…