くらげになりたい。

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

Cloud StorageとCloudflareを使って画像配信サーバを構築する

開発しているウマ育ノートという育成支援サイト、 SSSAPIでソース変更せず、データを更新できるようになったけど、 画像はサーバから配信してたので、画像も配信する形式にしたいなと思って、 いろいろ調べてみたときの備忘録。 公式ドキュメントだとこのあ…

GitHub ActionsでSHORT_SHAを環境変数に設定する

前書いたのの別バージョン。開発中はタグ名じゃなくて、SHORT_SHAにしたい。 www.memory-lovers.blog "on": push: branches: - develop jobs: build_and_deploy: runs-on: ubuntu-latest timeout-minutes: 5 steps: - name: Checuout uses: actions/checkout…

Vueのテンプレートで使うタグをPropで指定する(`is`)

Nuxt(Vue)を使ってて、中身が同じだけど一部のタグを変えたいなと思ってたら、 Vueにちゃんと用意されてた(´ω`) <component v-bind:is="currentView"></component> <table> <tr is="my-row"></tr> </table> Buefyとかのtagはこうやってるのか(´ω`) 以上!! 参考にしたサイト様 API — Vue.j…

Firebase AuthのGoogle認証でカスタムドメインを利用する

とっても便利なFirebase Authentication。 そのままだと、認証時のドメインがこんな感じになる。。 Cloudflareと一緒に使うといい感じに設定できたので、 そのときの備忘録。 公式ドキュメントだとこのあたり。 ・Google ログインのリダイレクト ドメインの…

validator.jsとVee-ValidateでURL形式チェック

Nuxt(Vue)のバリデーションにVeeValidateを使っているけど、 用意されているルールにURLの形式チェックが無かったので、対応したときの備忘録。 validator.jsを使ってカスタムルールを作成する感じ。 作成したルール /plugins/vue-validate.tsはこんな感じ。…

VSCodeのMarkdownで日本語をいい感じに整形する

VSCodeでMarkdownを書いていると、 GoogleアカウントがGoogle アカウント みたいに、空白が入ってフォーマットされてしまう。。 いろいろ見ていると、中国語とかの兼ね合いで対応されるのに時間がかかりそう。 回避策を見つけたので試してみたときの備忘録。…

GitHub ActionsでCloudflareのキャッシュをパージする

GitHub ActionsとCloudflareを使っているけど、 デプロイ時にキャッシュをパージしたいなと思ってたら、すでにあった(´ω`) ・Cloudflare Purge Cache · Actions · GitHub Marketplace Cloudflare Purge Cacheを試してみたときの備忘録 手動のときはCaching…

背景画像に透過した色を重ねる

css

おしゃれなアイキャッチにしたくて、 背景画像に透過した色を重ねる方法を探してたら、 linear-gradient()で簡単にできた(´ω`) できたのはこんな感じ。 色を重ねる前はこれ。 使い方 url()の前に、linear-gradient()を設定すればOK background-image: linea…

nuxt/imageで画像を最適化を試してみる

Nuxtの公式ツイッターをみてたら良さそうなライブラリが。 画像最適化ライブラリNuxt Imageを試してみたときの備忘録(´ω`) まとめ 用意されてるコンポーネントを使うと、サイズや形式の変更を自動でしてくれる sizesにも対応していて、画面サイズによって適…

GoogleスプレッドシートのURLからspreadsheetIdとsheetIdを取得する

Google Sheets APIのドキュメントを見ると、こんな感じらしい https://docs.google.com/spreadsheets/d/<spreadsheetId>/edit#gid=<sheetId> 使える文字は、それぞれ spreadsheetId ... アルファベット、数字、ハイフン、アンダースコア sheetId ... 数字 正規表現で取得する JavaScr</sheetid></spreadsheetid>…

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

6月の振り返りと実績値の公開、今月の開発予定です(´ω`) 前回はこちら(´ω`) www.memory-lovers.blog やったこと スプレッドシートのAPI化サービス開発中 スプレッドシートのAPI化サービスを少しずつ 新しいサービスを開発中。 ちょっとしたサービスを作り…

Firebase Hostingで複数サイトをデプロイする

1つのFirebaseプロジェクトで複数のサイトをデプロイできるようなので、 試してみたときの備忘録。 公式ドキュメントではこのあたり。 ・複数のサイトでプロジェクトのリソースを共有する | Firebase 同じFirebaseプロジェクトなので、AuthやFirestoreの情報…

NuxtでLottieを組み込む方法

アニメーションライブラリのLottieを使ってみたときの備忘録。 フリーで使えるアニメーションはLottieFilesで公開されてる。 インストール $ npm i lottie-web 表示用のコンポーネントの準備 表示するコンポーネント(LottieView)の用意。 マウントされたらlo…

JPEGをWebPに変換できるcwebp

WebPの公式ページにあるとおり、変換ツールが公開されているらしい。 使い方 # インストール $ brew install webp # jgpからwebpへの変換: エンコード $ cwebp example.jpg -o example.webp # webpからjpgへの変換: デコード $ dwebp example.webp -o exampl…

Node.jsで時間/メモリ/CPU使用率の計測

Node.jsで動かしてるコードの高速化/軽量化をしたいなと思ったけど、 どうやって計測すればいいんだろ?と思ったので、調べたときの備忘録。 時間計測 console.time()かperformance.now()で計測するのが良さそう Console.time() - Web API | MDN performance…

GitHub Actionsでデプロイの成功/失敗をSlackに通知する

GitHub Actions、便利で最近自動でプロイするのに使ってるけど、 失敗時のみメール通知なので、デプロイ成功したかを見にいかないといけない。。 Slackでうまくできないかなと思ってたら、便利なライブラリがあるらしい。 ・rtCamp/action-slack-notify: Git…

StripeのFirebase Extensionsを使ってみた - その5 運用前に読んだほうが良いドキュメント編 -

前回の続き。いよいよ最終回。 www.memory-lovers.blog とりあえず、使えるようになってきたので、 公開前に読んだほうがいいドキュメントをまとめてみた。 Stripeの製品 と、その前に、 なんとなく使っていたけど、Stripeの各製品をおさらい。 ・Stripeのす…

ストリーミング動画形式(HLS/m3u8)をMacでさくっと開く方法

HLS

Macでm3u8ファイルをサクッと開く方法がないかなと調べてみたら、 openコマンドとQuickTime Playerを使えばよいらしい。 open -a 'QuickTime Player' 'https://example.com/file.m3u8' 便利(´ω`) 以上!! 参考にしたサイト様 mac で手っ取り早くm3u8を再生す…

【Android】NetworkInfo.StateとNetworkInfo.DetailedStateとSupplicantStateの関係

AndroidでWifiの状態を知りたいなーと思ったら、いろいろなStateがあるらしい。。 対応関係がわからないな...と思ったので調べてみたときの備忘録。 対応関係はこんな感じ。SupplicantStateだと、 NetworkInfo.StateのCONNECTEDとSUSPENDEDに当たるものがな…

StripeのFirebase Extensionsを使ってみた - その4 Nuxtアプリで試してみる編 -

前回の続き。 www.memory-lovers.blog とりあえず、なんとなくの動きがわかったので、 もう少しコードを書いて試してみる。 試してみたサンプルのソースコードはこちら。 ・memory-lovers/example-stripe-extensions サンプルでできること 簡単なサンプルな…

StripeのFirebase Extensionsを使ってみた - その3 拡張機能のソース読んでみた編 -

前回の続き。 www.memory-lovers.blog ドキュメントを読み進めて、使い方はわかったけど、 Stripe側でどんな処理しているのかもやもや。 とりあえず、拡張機能インストール時に追加された 関数の中身を見てWebhookまわりとかを理解していく。 拡張機能のソー…

StripeのFirebase Extensionsを使ってみた - その2 拡張機能の使い方を見てみる -

前回の続き。 www.memory-lovers.blog インストールしてサンプルが動かせたけど、 どうなってるかわからないので、もうすこしドキュメント見てみる。 とりあえず、FirebaseコンソールのExtensionsにある 「この拡張機能の動作」を見ていく。 前回までで「Con…

各言語でGoogle Playストアの表示を確認する(hl/glパラメタ)

ストアの掲載情報を多言語対応したときに、 各言語での表示確認をする方法を調べたときの備忘録。 PCで確認すると、ストアのURLはこんな感じになってるはず。 https://play.google.com/store/apps/details?id=<applicationId>&hl=ja&gl=jp URL末尾のhl=ja&gl=jpが言語と国を</applicationid>…

StripeのFirebase Extensionsを使ってみた -その1 サンプルを試す編-

Firebase ExtensionsにStripeでのサブスク支払い機能が登場! ずっと便利そうだなぁと思ってたけど、やっとさわれたのでその時の備忘録。 Run Subscription Payments with Stripeの拡張機能は、有料プラン(Blaze plan)じゃないと使えないので注意。 公式のデ…

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

5月の振り返りと実績値の公開、今月の開発予定です(´ω`) 前回はこちら(´ω`) www.memory-lovers.blog やったこと ウマ育ノートリリース スプレッドシートのAPI化サービス着手 積読ハウマッチ: アップデート0回... ウマ娘の攻略お助けアプリ、ついにリリース…

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

4月を振り返りと実績値の公開、今月の開発予定です(´ω`) 前回はこちら(´ω`) www.memory-lovers.blog やったこと 積読ハウマッチ: アップデート0回... アップデートは0回!! 新作作っててるので少しお休み中(´ω`) ウマ娘の攻略お助けアプリ、はじめました …

AndroidでGIFアニメを表示する(Glide)

Android向け画像読み込みライブラリ「Glide」 いつもお世話になってるけど、GIFアニメもOKだった(´ω`) でも、ループしてほしくないな〜とおもったら、 issueに対応方法があったので、調べたときの備忘録。 build.gradle dependencies { implementation 'com…

Cropper.jsで画像切り抜きWebアプリを作ってみる

画像の一部を簡単に切り抜きたいなと思って、いろいろ調べてみたら、 Cropper.jsという便利なライブラリがあったのでお試し(´ω`) こんなのを作りました(´ω`) いろいろ遊んでたらなんかできた(*´ω`*)https://t.co/FPc1ylaVqH pic.twitter.com/KdDLeXiY1q— …

Cloud Build+Cloud Runでタグ名を環境変数に設定する

前にGitHub ActionsでやっていたやつのCloud Build+Cloud Run版。 www.memory-lovers.blog Cloud RunだとDockerが絡むので、ちょっと面倒。。 全体の流れ Cloud Buildだと、環境変数($TAG_NAME)からタグ名を取得できる Cloud Runだとdocker buildしないとい…

GitHub Actionsでyaml側で実行されないようにする(branches-ignore/tags-ignore)

とても便利なGitHub Actions。 やっぱやめたいなと思ったとき、yamlでdiasbledできないかなと思って、調べたときの備忘録。 branches-ignoreやtags-ignoreで全指定すればよいっぽい(´ω`) こんな感じ "on": push: # タグ指定で無視 tags-ignore: - "v*.*.*" …