くらげになりたい。

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

Vue/Nuxtのアニメーションするときに参考にしたところ

VueとNuxtでアニメーションをするときに調べたところのまとめ。 公式サイトを読みながら、関連するとこをまとめた感じの備忘録。 トランジションクラスってのがあるらしい 参考: Enter/Leave とトランジション一覧 — Vue.js <transition>で囲むと、いくつかのクラスを生</transition>…

Nuxt.jsで編集中に、ページ移動やページを閉じるときに警告を出すやつ

よくある編集中に、ページを離れると、 「編集中のデータが消えちゃうよ」 と教えてしてくれるやつを調べたときの備忘録。 ページを閉じるときに出るこんなのや 戻るや別のページに移動しようとするときに出るこんなの ソースコード 中身はこんな感じ。Mixin…

Retrofit2で自己証明書のサーバへのアクセスできるようにする

Retrofit2でオレオレ証明書なサーバにアクセスすると、 こんなエラーが出る。その時の対処方法の備忘録。 java.security.cert.CertPathValidatorException: Trust anchor for certification path not found. javax.net.ssl.SSLHandshakeException: java.secu…

Cloud FunctionとSVGでOGP画像生成を試行錯誤したまとめ

Nuxt+Firebaseで開発してるサービスのOGP画像を改善しようと、 いろいろ試してみたときの備忘録。 OGP画像の生成はクライアント側とサーバ側かがあるが、 Firestoreの変更に合わせて生成したいので、 Cloud Function上で利用できる方法を考えてた。 結果的に…

Node.jsライブラリのsharpで画像処理をいろいろしてみた

開発しているWebサービスでOGP画像を良くしたいなと思い、 Node.jsライブラリのsharpが良さそうだったので、いろいろ調べてみたときの備忘録。 ImageMagickの4〜5倍、高速らしい... できたのはこんなかんじ(´ω`) 積読金額や読了金額のシェア画像も改善お札…

フリーランス二年目の振り返りと今年のほーふというやつ

2018年にフリーランスになってから無事2年経ったので、振り返ってみようおもう。 1年をとおして思ったこと / 考えていたこと / 2020年やりたいことをまとめてみました。 ざっとまとめると、 2年目突入: 2月 法人化しました: 1月 お仕事 受託メインでアプリ+W…

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

前回同様、1月を振り返りと実績値の公開、今月の開発予定です(´ω`) www.memory-lovers.blog 積読ハウマッチ: 4回アップデート アップデートは4回。今月は少なめ。。 2020/01/02 UIや書籍のリンク先を変更✨ 2020/01/06 不具合修正&ライブラリアップデート✨ …

クリックやタップしたときの青い枠や四角を消す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 トップページを変更✨ 本業が忙しかったのと…

アイデアのつくり方を読んだら、アイデアの正体がなんとなく分かった気がする。。

「アイデアのつくり方」の感想文。というか、気になった言葉のクリップ集。 アイデアのつくり方作者:ジェームス W.ヤング出版社/メーカー: CCCメディアハウス発売日: 1988/04/08メディア: 単行本 読んだ感想 「 60分でよめるけど、一生はあなたを離さない本…

天才はあきらめたを読んだら、努力の仕方と嫉妬への向き合い方のノウハウがいっぱいだった

南海キャンディーズ・山ちゃんの「天才はあきらめた」の感想文。というか、気になった言葉のクリップ集。 天才はあきらめた (朝日文庫)作者:山里亮太出版社/メーカー: 朝日新聞出版発売日: 2018/07/06メディア: 文庫 読んだ感想 おもしろい。。しくじり先生…

個人開発のためのWebサービス公開マニュアルを読んだら、デプロイ・リリース・運用の手順だけじゃなく、運営者の心得がたくさん詰まってた

個人開発のためのWebサービス公開マニュアルの感想文。というか、気になった言葉のクリップ集。 個人開発のための Webサービス公開マニュアル作者:難波 聖一出版社/メーカー: 秀和システム発売日: 2019/12/25メディア: 単行本 読んだ感想 Git操作からデプロ…

Nuxt+Firebaseでセッション管理: PWA(Service Worker)編

FirebaseとSSRなNuxt.jsでアプリを作っていて、 クライアント側で認証チェックするとFirebaseの初期化などでラグが... サーバ側で認証情報とかを取得してもう少しなんとかできないかなと。 まだベータっぽい?けど、公式の以下の内容を試してみたときの備忘録…

NuxtでserverMiddlewareを使ってAPIをつくってみる

Nuxt.js、SSRで実行すると外部サーバなしでAPIを簡単に追加できるらしい。 serverMiddlewareを使ってルートを追加するとAPIが作れたので、その時の備忘録。 つかってみる APIをつくる // ~/server/echo.ts import { IncomingMessage, ServerResponse } from …

Node.jsで画像/動画つきツイートをTwitterに投稿すると大変だった...

JavaScriotでツイートしたいなと思って、いろいろ試していたら、 30秒以上動画つきツイートが結構めんどくさかったので、その時の備忘録。 Node.jsでTwitter APIを使う Node.jsでTwitter APIを使うときは、desmondmorris/node-twitterを使うのが良さそう イ…

NuxtでFirebase AuthのトークンをCookieに入れたり出したりする

NuxtのSSRで認証したいなと思ったら、こんな記事を見つけたので、試してみたときの備忘録。 SSRモードのNuxtでのFirebase認証 - Qiita 結果、UIDは取得できるけど、firebase-adminで検証が必要っぽい... インストール cookieを扱うライブラリはいろいろある…

vuex-module-decoratorsでnuxtServerInitするときは、store/index.tsにactionsを追加する

公式ガイドのストアのページで紹介されていたvuex-module-decorators。 nuxtServerInitをどこに書けばいいか迷ったので、いろいろ調べたときの備忘録。 こんな感じでstore/index.tsに追加するっぽい import { ActionTree, Store } from "vuex"; import { Act…

Twitterでツイートできる文字数を正確に数える(絵文字もURLも)

Nuxt.jsでツイートするアプリを作りたいなと思い、 文字数ってどうやって計算するんだろ?って思ったら、 公式でライブラリ(twitter-text)が用意されているらしいので、使ってみたときの備忘録 Java版/Ruby版/JavaScript版/Objective-C版などいろいろあるら…