かとのぼのマイコード・マイライフ

プログラミング初心者とアプリの個人開発者向けのブログ。たまに銭湯

プログラミングTip集

【Flutter】Androidアプリのストアリリース手順

Flutterで、アプリが完成した後、Androidアプリをストアにリリースするまでの手順をまとめておきます。 基本的なAndroidアプリのストアリリースの参考記事 アイコンの作成 keyの作成とAPKのビルド ①keyの生成場所 ②key.properties作成 もしかしたら必要かも…

【Flutter】AdmobのAppIDをAndroidとiOSで分ける処理

Admob表示させる時にAndoroidとiOSでAppIDが違うので、それぞれ分けたい場合の処理のメモ。 「Admob Flutter」でヒットする記事だとこの処理がわからない AndroidとiOSで分ける処理 「Admob Flutter」でヒットする記事だとこの処理がわからない Google検索で…

firebase_admobをFlutterのAndroidで導入しようとするとエミュレータがクラッシュするエラー【Flutter】

firebase_admobがうまく導入できない 解決策:バージョンとAndroidManifest.xmlのmeta-dataを適切に設定する firebase_admobがうまく導入できない Flutterでfirebase_admobを導入しようとしたが、コンソールで Built build/app/outputs/apk/debug/app-debug.…

FlutterでMaterial Designのアイコンやカラーを調べるのに便利なサイト

FlutterでMaterial Designを使うときに、色とかアイコンを探すときに使うサイトの紹介です。 material design palette material design palette Material Design Color Palette Generator - Material Palette このサイトがカラーとアイコンが一覧になってい…

Android Studioのエディタのフォントサイズを変更

FileにSettingがなくなっている Android Studioのバージョンが3.5何ですが、エディタのフォントサイズを変更しようとしたのですが、変更方法が見つからない。 Google検索して調べると「File→Setting」で変更とあるが、肝心のSettingが無くなっている。 フォ…

エラー対処:Could not find an option named "androidx"【Flutter】【Android Studio】

Flutterのプロジェクトが作れない Flutterのプロジェクトが作れない Android StudioでFlutterの新しいプロジェクトを作成しようとすると、以下のようなエラーが表示されプロジェクトが正しく作成されない問題が起きた。 Could not find an option named "and…

ロード画面の実装にmodal_progress_hud【Flutter】【Loading】

Flutterでローディング画面の実装 modal_progress_hudの導入方法 ステップ1:pubspec.yamlファイルに依存関係の追加 ステップ2:インストール ステップ3:インポート modal_progress_hudの使用方法 Flutterでローディング画面の実装 Flutterのパッケージ…

エラー対処:error:' NSData *data = [NSKeyedArchiver archivedDataWithRootObject:self【Flutter】【Firebase】【iOS】

error:' NSData *data = [NSKeyedArchiver archivedDataWithRootObject:selfというエラーメッセージ error:' NSData *data = [NSKeyedArchiver archivedDataWithRootObject:selfというエラーメッセージ Flutterで、Firebaseのパッケージを入れてpodをセット…

resolving dependenciesが終わらない【Flutter】【Firebase】

Resolving dependencies...から進まない状態 Android Studioで、Firebaseのパッケージを入れて実行したら Resolving dependencies... という状態から進まない。 その場合は、まずは待つ。 自分の場合はだいたい10分くらい待ったら進んでエラーが表示された。…

チャットアプリの会話のように、テキスト内にURLが貼られた場合にアンカーリンクをつける方法と手順メモ【Vue.js】

チャットアプリを作る時のメッセージ部分のテキストにアンカーリンクをつけたい時の手順メモです。

Vue.jsで、ツイッターのURLシェアを実装したら「Refused to execute inline script because it violates the following Content Security Policy directive」というエラーが出た。

Vue.jsで、ツイッターのURLシェアを実装したら「Refused to execute inline script because it violates the following Content Security Policy directive」というエラーが出た。 理由 このエラーは、多くはグーグルの「コンテンツ・セキュリティー・ポリシ…

Buefyのタブで画面を変えてもタブの位置を記録させておきたい時【Buefy】【Tabs】【Vuex】

Buefyを使えばv-modelとの組み合わせによって、簡単にタブが実装できます。 buefy.org タブを変更した時にアクティブな場所を表示させる機能の実装は面倒なので大変助かります。 ただ、この方法だとrouter-linkで画面を遷移されたりするとタブが最初に設定し…

Vue.jsでページを移動した時に画面をトップに戻しておきたい場合

Vue routerを使ってトップにスクロールさせる方法 Vue.jsはSPA(シングルページアプリケーション)なので、もしページの下までスクロールした後にルーターを使って、別のページに遷移しても自動ではトップに戻ってくれません。一般的なサイトではトップになる…

JavaScriptで今日の0時を取得し、FireStoreのTimestampでその時間以降のデータを取得する

javascriptで当日の0時を取得してfirebaseのfirestoreのタイムスタンプでそれ以降の時間を取得する方法のメモです。

Vue.jsでCloud Firestoreのリアルタイムアップデートはコンポーネントのどこに設定するか?

以前、Cloud Firestoreを使ってリアルタイムアップデートを実装するのに参考になるサイトを紹介した記事を書きました。 www.katonobo.com 多くのサンプルではmain.jsに記述する方法が紹介されていますが、Vue.jsなら同じコンポーネントに書いておきたいとこ…

Cloud Firestoreのデータ追加で、データがない場合は新規に作成、ある場合は更新させる方法

Cloud Firestoreのデータの追加と変更 データがすでにあるかわからない場合は? set()メソッドにオプション「merge: true」を利用する Cloud Firestoreのデータの追加と変更 Cloud Firestoreで、データを作成、追加するときは「set()メソッド」を使います。 …

Cloud Firestoreでリアルタイムアップデートを使う時に参考になる記事とサイト【Firebase】

FirebaseとVue.jsのチャットアプリのサンプルは多くありますが、結構採用しているデータベースがリアルタイムデータベース(Realtime Database)のことが多いです。これはFirestoreが少し前までベータ版だったからでしょうか。 QiitaではFirestoreのリアルタイ…

BulmaでVue.jsのv-forを使って複数行に跨るカラムを配置したい場合【Vue.js】【Bulma】【Buefy】

BulmaとVueの組み合わせで複数行のカラムをうまく設置したい場合の手順メモです。

Cloud Firestoreの配列の検索・追加・削除は「array-contains」「arrayUnion 」「arrayRemove」が便利

FirebaseのFirestoreで、配列の扱いが便利になっていたのでメモ。 従来では、配列の検索が面倒だった Version 5.3.0から一般的な配列のデータの入れ方で対応できるようになった 従来では、配列の検索が面倒だった 今まで、FirebaseのFirestoreは配列の扱いが…

複数のトークルームが存在するチャットアプリのデータ構成【Firebase firestore】

Firebaseを使ったチャットアプリで、それぞれ別のトークルームを作成したい場合のデータ構成についての記事

Vue.js+Vuex +firebaseでログイン機能を実装する場合はルートガードが便利

vue.js、Vuex、firebaseで認証機能を使っている場合、以下の二つの記事を組み合わせるとfirebaseのログイン認証機能を使って簡単にルートガードできる。 Vue vuexでfirebaseのログイン保持 - Qiita Vue.js でログイン機能を実装する - kz’s blog ポイント 実…

Vue.jsのUIコンポーネントはBuefyが便利

Vue.jsでSPAを作っているときに、レイアウトも楽をしたかったので良いUIフレームワークを探してたんですが、BuefyというUIフレームワークが導入が楽で扱いやすかったのでその感想と紹介です。 Buefyとは Buefyのサイトに簡潔に説明されています。 Lightweigh…

DateオブジェクトのtoLocale​Time​Stringで秒を表示しないようにする【JavaScript】

toLocaleTimeStringで秒は表示したくない場合の方法

Vue.jsでBootstrap-vueの画像をデータバインディングする方法

Bootstrap-vueで画像をデータバインディングする方法が少し難しかったのでメモです。

ファイルをFirebase Storageにアップするメソッド【Vue.jsのメソッド部分】

Vue.jsでFirebase Storageにファイルをアップするコード Vue.jsでFirebase Storageにファイルをアップするコード Vue.jsで、Firebaseのstorageにファイルをアップする時のコード。 methods内に以下のコードを記述する。 uploadFile: function(event){ this.f…

Firebase Cloud StorageとCloud Functionの設定の基礎

Firebaseの機能、Cloud storageとCloud Functionを使う必要がが出てきたので設定の基礎の基礎のメモです。 Firestoreの情報は多いですが、Cloud storageとCloud Functionは結構情報が少ないです。 Cloud Storegeは基本的にFirestoreが使ったことがあれば問題…

ログイン認証後にもともとの閲覧したかったページにリダイレクトする方法【Vue.js】【ログイン認証】

Vue.jsで、Vue Routerを使っている場合の話です。 ログインが必要な画面で、ログイン認証のページで一旦ログインしてもらった後に、もともと行きたかったページにリダイレクトして表示する方法のメモです。 router.beforeEachにクエリーを持たせておく 結論…

サーバーから取得したテキストの改行の表示はCSSで処理【Vue.js】【CSS】

Firebaseに入れたテキストデータの改行などを行う処置で少し迷ったんですが、CSSを使うと楽だったのでメモです。 Firestoreから取得した文字の改行などはどの方法でブラウザに表示させるか悩みどころ qiita.com firestoreに保存したデータをそのまま表示させ…

imgを動的にバインディングする方法【Vue.js】

Vue.jsで、ツイッター認証などで取得した画像を表示させる方法が少しハマったのでメモです。 Vue.jsで動的に画像を設定させるには「v-bind:src」 結論は、動的に画像を設定するためには template要素の中に <img v-bind:src="ここにdataや画像のURLを入れる"> 「v-bind:src」で設定する。 二重括弧( {{ }} )…

Solidityのindexedとは?

ソリディティのindexedについて調べた記事です。