くらげになりたい。

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

TypeScript ORM「Prisma」のはじめかた

Node.js/TypeScript ORMのPrisma。 高機能なので理解することがたくさんあるので、はじめ方をまとめてみた。 既存のDBがすでにあって、あとからPrismaを導入するときのイメージ。 全体の流れ Prismaを使った開発の流れはこんな感じ。 事前準備 初期設定 ... …

SendGridでトランザクションメールを送る(Node.js)

SendGridを使ったメール配信を使ってみたので、 そのとき調べたときの備忘録。 マーケティングメールもあるけど、 とりあえず、トランザクションメールの送り方。 メールを送るためにやること 手順はこんな感じ。 APIキーの発行 独自ドメインの設定 テンプレ…

BigQueryでGA/Firestore/CloudRunアクセスログを分析する

開発しているWebサービスでいろいろ分析するために、 BigQueryの設定をしたときの備忘録。 全部BigQueryに連動しておけば、SQLでいろいろ分析できるね(´ω`) 構成としてはこんな感じ。 GoogleAnalitics -> BigQuery GoogleAnaliticsはFirebaseのものを利用し…

VSCodeのSnippets機能で開発速度を上げる

VSCodeで定型文を登録できるSnippets機能)。 以前から使ってたけど、Easy Snippetという拡張機能を使ったら、 かなり楽に追加/編集ができるようになったので、いろいろ調べてみたときの備忘録 Nuxt+Firebaseで開発することが多いので、 ページやコンポーネン…

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

9月の振り返りと実績値の公開、今月の開発予定です(´ω`) 前回はこちら(´ω`) www.memory-lovers.blog やったこと スプレッドシートのAPI化サービス「SSSAPI」 2021/09/10 不具合修正 2021/09/11 フィードバック送信 2021/09/17 自動更新オプションに対応 20…

VSCode+TypeScriptでcatchのerrorがunknownになったときの対処法

VSCodeをアップデートしたら急にこんなエラーが出るようになった。。 TypeScript4.4からcatchの変数はunknownにするオプションが デフォルトでtrueになったららしい。。 TypeScript: TSConfig Reference - Docs on every TSConfig option Announcing TypeScr…

CloudinaryでOGP画像を設定する

開発中のSSSAPI、ヘルプとかは@nuxt/contentで作ってるけど、 やっぱOGP画像もつけたいな〜と思ったので、いろいろ調べてみたときの備忘録。 www.memory-lovers.blog Cloudinaryが速いし、文字入れれるし、キャッシュしてくれるらしいので採用。 cloudinary.…

VeeValidateで開始日/終了日のバリデーションをチェックする

NuxtアプリのバリデーションにはVeeValidateを使っているけど、 開始日/終了日みたいな相関チェックをしたいなと思ったときの備忘録。 v2だとあるようだけど、v3だとなくなってしまったぽい。。(´・ω・`) HTML HTMLだとこんな感じ。 追加するルールはafter:…

curlで時間計測

開発中のSSSAPIのレスポンスタイムを計測したときに調べた備忘録。 計測した結果の記事はこちら。 ・SSSAPIと他のサービスをいろいろ比較してみた(GAS/SheetDB/sheety/Stein/sheetsu) 以下の記事がわかりやすく、こちらを参考にした ・curlでパフォーマンス…

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

7月の振り返りと実績値の公開、今月の開発予定です(´ω`) 前回はこちら(´ω`) www.memory-lovers.blog やったこと スプレッドシートのAPI化サービス「SSSAPI」のβ版公開 積読ハウマッチのプチアップデート SSSAPI 新サービス(SSSAPI)の開発が継続中。オープ…

おしゃれなコードの画像を作れるCarbonのCLIを試してみた

ソースコードをおしゃれな画像にしてくれる「carbon」 便利なんだけど、ぽちぽちGUIで入力するのはめんどうだなぁ と思ったら、CUIがあったので試してみたときの備忘録(´ω`) ・mixn/carbon-now-cli [SSSAPI]のトップページは、これで一括生成してる。 バー…

@nuxt/contentでヘルプや使い方のページをサクッと作る

「Nuxt Contentでブログを作ろう」など、 Nuxt公式ドキュメントとかでも紹介されてて気になってたNuxt Content。 ブログ作らないから使う時ないな〜っと思ってたけど、 マークダウンでページを作れるんだったらヘルプページとか簡単にできるのでは? と思い…

カラーピッカーにVue Swatchesを使ってみた

Buefyを使って開発してるGoogleスプレッドシートをAPI化するサービスで、 フォルダ機能を追加するときにカラーピッカーにいいのないかな〜と思ったら、 Vue Swatchesがとても便利だった(´ω`) アップデートフォルダ機能を追加しました‼️アプリごとで分類でき…

GitHub Actionsで差分があるときだけ実行する(Get Diff Action)

以前の記事書いたとおり、Firebase HostingとCloud Functions for Firebaseのデプロイを GitHub Actionsでやっているけど、Cloud Functionsを毎回デプロイしているのでビルドに時間がかかる。。 www.memory-lovers.blog 差分がないときは、実行しなくていい…

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

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

Django+Cloud Run+Cloud SQL(MySQL)+Cloud Build

最近、CloudRunとCloudBuildをよく使うので、 Django+CloudSQLも簡単とできるだろ〜と思ったら、 大ハマリしたときの備忘録。 CloudSQL(MySQL)だとライブラリが対応してなくてハマるっぽい。。(´・ω・`) 基本的な流れは公式ドキュメントを参照。 ・Cloud Ru…

Nuxtでgenerate後になにか処理をする(Generator hooks)

Nuxtでビルドするときに、ビルド時のコミットIDとかをファイルに書き出したいなと思ったときの備忘録。 hooksプロパティなんてのがあるらしい。 ・The hooks Property - NuxtJS hooksプロパティ Nuxtのモジュールとかで使うNuxtのイベントのhookがnuxt.confi…

Cloud Buildの結果をCloud FunctionでSlackに通知する

最近、Cloud RunのデプロイをCloud Buildでやっているけど、 ビルドの完了とか失敗をSlackで通知したいなと思って、いろいろ調べたときの備忘録。 ソースコードは、GitHubで公開してます。 ・https://github.com/memory-lovers/cloudbuild-slack Cloud Build…

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の情報…