くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

2020-01-01から1ヶ月間の記事一覧

クリックやタップしたときの青い枠や四角を消すCSS

css

クリックやタップするとなぞの青い枠や四角が。。 いろいろ調べたら、消せるらしいので、その時の備忘録。 クリックしたときの青い枠線 buttonやinputをクリック・フォーカスしたときに、 なぞの青い枠線が出てきたけど、色があってなくて、消したい。。 そ…

スマホでダブルタップしたときに拡大しないようにするCSS

css

ボタンを連打できるようにしたいなと思ったら、 ズームされて連打しにくかったので、調べてみたときの備忘録。 touch-actionで制御できるみたい。 touch-actionを設定する html { touch-action: manipulation; } 以上!! 参考にしたサイト様 touch-action - C…

Cloud Functionでサブコレクションまで再帰的に削除する(firebase-tools)

Firebaseの公式ドキュメントを見ていたら、こんな記事を見つけた。 試してみたので、そのときの備忘録。 コレクションとサブコレクションを削除する | Firebase Functionのソースはこんな感じ // index.ts import * as functions from "firebase-functions";…

Cloud Functionsの高速化をTypeScriptで試してみた

以下の記事を読んで、実行される関数ごとにファイルを分けて、 呼び出されたときに関数名から必要なファイルだけを読み込むのがいいらしい。 JavaScriptの記事だったので、TypeScriptで試してみた。 ディレクトリ構成 ディレクトリ構成はこんな感じ。 fireba…

Heroku+CloudflareなNuxtでSSRしてみる

GAEでNuxtのSSRを試してみたけど、メモリが足りずに落ちる。。 Herokuは無料で512M使えるので、こっちも試してみる。 ただ、無料版だとHTTPS化できないのでCloudflareも一緒に。 Herokuでデプロイできるようにする まずは、NuxtアプリをHerokuにデプロイでき…

SVGでOGP用のPNG画像を生成してみる(折り返し文字、画像埋め込み、PNG化)

SVGでOGP画像を作りたいなと思い、いろいろ調べたときの備忘録。 SVGはまるのも多いけど、いろいろできるので、 SVGからOGP画像をつくるのいいかもしれない。 とりあえず、SVGを書いてみる ちょろっとなるなら、HTMLでベタ書きしてみるのもいい。 動作確認と…

Firebase UIで匿名認証を使ってみる

匿名認証を使えるといいなと思ったので、いろいろ調べてみたときの備忘録。 Firebase UIを使うと簡単にできた。 匿名アカウントでログインする こんな感じ。signInAnonymously()を呼べばOK。 // 初期化済みのfirebaseインスタンス。詳細は略 import firebase…

中央に寄せつつ、中身を左揃えしたいときは、FlexboxじゃなくてGrid Layoutを使うとできた

css

こんな感じで、中央に寄せつつ、左揃えにしたいときに調べた備忘録。 HTMLはこんな感じ <section> <h1>Flexbox</h1> <hr/> <div class="flex"> <div class="box is-1" ></div> <div class="box is-2" ></div> <div class="box is-3" ></div> </div> </section> <section> <h1>Grid Layout</h1> <hr/> <div class="grid"> <div class="box is-1" ></div> </div></hr/></section>

DotEnv+Nuxt.jsでsrcDirを設定するとうまくうごかないときは、dotenv.pathを設定する

Nuxt.jsで環境変数の設定にdotenvを使ってたときの備忘録。 起こった現象 ソースディレクトリの場所を変えようと、 nuxt.config.tsにsrcDirを設定したら、うまく動かず。。 ディレクトリはこんな感じ。 / app/ .env nuxt.config.ts nuxt.config.ts内では、pr…

【小ネタ】ローカルにある画像ファイルをBase64エンコードするJavaScript

画像ファイルをData URL形式に変換したいなと思ったときの備忘録。 こんな感じ 読み込み時にbase64を指定できるらしい const fs = require("fs"); // 変換するファイルパス const filePath = "./photo.png"; // 対象のファイルをbase64形式で読み込み const …

SPAなNuxtアプリでFirebase Authのredirectでも、認証後に来たベージに戻りたい(Firebase UI)

開発している積読ハウマッチで、Googleアカウントでのログインに対応した際、 Firebase Authの認証フローをポップアップからリダイレクトに変えてみた。 ポップアップだと、どこでもログインできたけど、 ログイン画面だと元のページに戻りたく、いろいろ考…

Express+TypeScriptをはじめるときにやったこと

Expressでサーバ立てたいなと思ったので、 TypeScriptではじめるときにやったことの備忘録。 TypeScriptの設定 まずは、package.jsonから。 # package.jsonの生成 $ npm init # typescriptのインストール $ npm i -D typescript @types/node # バージョン確…

SPAなNuxtアプリをFirebase HostingからNetlifyに移行してみた

Netlifyがいいと聞いて、Firebase Hostingから移行してみたときの備忘録。 NetfilyのプレレンダリングがあるのでOGP芸が楽。 昔、こんな記事を書いたけど、Functionsで頑張らなくてもよくなった。 使ってみてよかったので、移行したときにやったことをまとめ…

個人開発報告: 月例振り返り&開発予定 (2019年12月)

前回同様、11月を振り返りと実績値の公開、今月の開発予定です(´ω`) www.memory-lovers.blog 積読ハウマッチ: 2回アップデート アップデートは2回。今月は少なめ。。 2019/12/02 週間/月間ランキング✨ 2019/12/09 トップページを変更✨ 本業が忙しかったのと…