Firebase Authentication で ソーシャルログインがまれにエラーになる場合
April 29, 2022
開発しているアプリで Firebase Authentication の Facebook ログインを利用しています。 ただ、挙動に不可思議な点があって、iPhone でごくまれに “Unable to process request” というエラーが出たり ...
開発しているアプリで Firebase Authentication の Facebook ログインを利用しています。 ただ、挙動に不可思議な点があって、iPhone でごくまれに “Unable to process request” というエラーが出たり ...
関数(TypeScript) # TypeScript で記載しています。 /** Sleeps for the specified time (milliseconds). */ function sleep(timeMs: number): Promise<void> { return new Promise((resolve) => { setTimeout(resolve, timeMs); }); } /** Execute function, if it fails, retry after waiting. */ async function tryWithWaiting( callback: () => any, waitTimeMs: number, limitTimeMs: number ): Promise<any> ...
例えばメールアドレス認証を行う際、以下のように一度アプリ画面を離れたのち、再び戻ってくるというフローになる場合が多いです。 ユーザがアプリのフ ...
配列の要素がプリミティブな値の場合、重複を取り除くには Set が便利です。 要素がオブジェクトの場合、Set ではなく Map を利用して重複を排除できます。 ...
(友人にヘルプを求められ、そのとき対応した内容をメモ) 状況整理 # 経緯 # ワードプレスで表示されない画像があるとのこと。 環境 # Amazon Lightsail 上にインストー ...
(友人にヘルプを求められ、そのとき対応した内容をメモ) 状況整理 # 経緯 # ブログのワードプレスで以下の通りいくつかアラートが出たものの、良く分か ...
以下のように書くと、テストなどでモックを使用したい時は外から渡すこともでき、テスト以外のときは呼び出し元のコンポーネントでプロップスを渡す必 ...
自分用メモ。始めて作成した Flutter アプリを App Store 経由でテストフライト配布したときの手順。 事前注意事項 # 組織名がデフォルトの com.example だと、Apple Developer に Bundle ID ...
自分用メモ。始めて作成した Flutter アプリを Google Play 経由で内部テスト配布したときの手順。 事前注意事項 # 組織名がデフォルトの com.example であるか、またはこれからはじ ...
サンプルコードのウィジェットの階層構造 # App └ Layer1 └ Layer2 ├ Layer3A └ Layer3B setState # import 'package:flutter/material.dart'; void main() => runApp(const App()); class App extends StatelessWidget { const App({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return const MaterialApp(home: Layer1()); } } class Layer1 extends StatefulWidget { const Layer1({Key? key}) : super(key: ...
(個人的メモです。) Riverpod # Flutter における状態管理方法の選択肢は公式ページにも記載がある。 List of state management approaches | Flutter https://docs.flutter.dev/development/data-and-backend/state-mgmt/options シンプルに setState を使用する以外では Provider か Riverpod のパッ ...
(Flutter 開発を始めたばかりの時にしがちな setState の誤解の話) flutter create myapp した後、setState に関わるところの記述は以下のようになっています。 ...
本記事は Dart で記載しています。https://dartpad.dev/ DI: Dependency injection # In software engineering, dependency injection is a technique in which an object receives other objects that it depends on, called dependencies. Dependency injection - Wikipedia あるオブジェク ...
Dart で記載しています。https://dartpad.dev/ むかしむかし # あるところに鳥と魚がいました。 void main() { Bird().move(); Fish().move(); } class Bird { void move() { print('move'); print('by fly'); } } class ...
前置き:前回投稿した同内容の記事について # 前回、本記事と同様の環境構築を目的とした記事を投稿しています。その手順は Firebase 公式の以下ページを参考に ...
1. Flutter プロジェクトの作成 # flutter create -i swift -a kotlin my_flutter_app その後、Android エミュレータと iOS シミュレータを立ち上げてカウンターアプリが表示されることを確認す ...
こんなのどうでしょう? # const fallbackImage = '...'; type Props = { src: JSX.IntrinsicElements['img']['src']; alt?: JSX.IntrinsicElements['img']['alt']; srcOnError?: JSX.IntrinsicElements['img']['src']; className?: JSX.IntrinsicElements['img']['className']; }; function Component(props: Props) { const { src, alt, srcOnError, className } = props; const srcFileName = src?.split('/').pop()?.split('.').shift(); return ( <img className={className} src={src} alt={alt || srcFileName} onError={(e) => { e.currentTarget.onerror = null; e.currentTarget.src = srcOnError ?? fallbackImage; }} /> ); } export ...
iOS シミュレータ # シミュレータを起動する # open -a Simulator または open /Applications/Xcode.app/Contents/Developer/Applications/Simulator.app シミュレータからアクセスする # シミュレータ上で Safari を開く。 例えば localhost:5500 で起動しているサーバ ...
本格的なアプリを作成する場合は Sentry などのサービスを使うことが多いと思います。 そこまでは必要ないけれど、エラーログの仕組みをマニュアルで簡易的に ...
こんな配列があるとして、 const items = ['hello', null, 'world']; こうしても、残念ながら型はうまくフィルタリングされません。 const filtered = items.filter((item) => item !== null); // filtered: (string | null)[] ですので、Type Guard ...
なんとなく MDN で JavaScript の式と演算子の一覧を眺めていたら目に入ったのが「カンマ演算子(,)」です。恥ずかしながら今回初めて知りました。 カンマ演算子 (,) ...
例えば Window.alert() のように、ユーザがボタンをクリックするまでの間、処理を止めたい場面があったとします。 このとき、パッと思いつくのは、 ビジーウェイトする ...
Redux はもう使っていないが、ソースコード配置の考え方はどのプロジェクトでも役に立っているのでここにメモ。 Since Redux is just a data store library, it has no direct opinion on how your project should be structured. ...
本記事では React コンポーネントを用いて説明していますが、本記事の内容は通常の HTML / CSS だけで実現可能です。 text-overflow: ellipsis; を機能させるためには以下の CSS をすべて指 ...
this を返すようにするとメソッドチェーンで書けるので便利 # class Calculator { #number; constructor(initial = 0) { this.#number = initial; } print() { console.log(this.#number); } add(num) { this.#number += num; return this; } subtract(num) { this.#number -= num; return this; } multiply(num) { this.#number *= num; return this; } divide(num) { this.#number ...
ジェネリック型を引数にとる関数の戻り値の型を取得すると、結果は以下のようになります。 function foo<T>(arg: T) { return arg; } function bar<T extends object>(arg: T) { return arg; } type FooReturn = ReturnType<typeof foo>; // unknown type BarReturn = ReturnType<typeof bar>; ...
こんな型があるとします。 type Person = { name: string; age: number; isAdult: boolean; siblings: string[]; birthplace?: string; height?: number; hasPartner?: boolean; friends?: string[]; }; こうすれば Optional なプロパティのみを抽出できます。 type OptionalPropertyKeys<T> = { [K in keyof T]-?: undefined extends T[K] ? K : never; ...
試行その1 # import { useState, useEffect } from 'react'; export default function Component() { const [int, setInt] = useState<number>(); useEffect(() => setInt(1), []); useEffect(() => setInt(3), []); useEffect(() => setInt(2), []); console.log(int); return <></>; } 結果その1 # コンソールには以下の順番で出力されます。 undefined 2 初回レ ...
関数の実行結果として別の関数が return されるようなケースがあります。 例えばイベントリスナーに処理を登録して、その結果としてリスナーを解除するための ...
コールバック Ref パターンがあまり使われていない(知られていない?)ように思われたので布教も兼ねて。 1. DOM のアタッチ時だけ処理が必要な場合 # 1-1. useRef + ...