くらげになりたい。

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

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

12月の振り返り、今月の開発予定です(´ω`) もう9日なので、大遅刻(´ω`) 前回はこちら(´ω`) www.memory-lovers.blog やったこと ■SSSAPI - 導入事例・利用事例記事の募集を開始 - 継続時のクーポン適用可能に - 不具合修正 本業もプライベートもバタバタで…

TailwindCSSに入門してみた

ずっとBulmaというかBuefyを使っていたけど、 Bulmaとnuxt/content(の中のPrismJS)の相性が悪い。。 ・BulmaとNuxt/Content(というかPrism.js)の相性が結構辛い - Crieit 今はがんばっているけど、がんばらないでいいように、別のCSSフレームワークを検討中…

Nuxt3をほんのちょっと試してみた

Nuxt3がパブリックベータになったので、ちょっとさわってみたときの備忘録。 雛形プロジェクト作って、ドキュメントを読んだ程度。。 Vue3になったのも含め、結構変わっているけど、 かなりはやくなった感じがする(´ω`) Nuxtのプロジェクトの作成 # プロジ…

Stripeでクーポンを活用してみた

この記事はStripe Advent Calendar 2021の7日目の記事です。 開発しているStripeを使ったWebサービスで、 クーポンをいろいろ使えるようにしたいなと思い、いろいろ調べたときの備忘録。 使い方が特殊なのか、かなりハマった。。 やりたいこと やりたかった…

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

11月の振り返り、今月の開発予定です(´ω`) 実績はあまり進展ないので、やることをメインの記事に。 前回はこちら(´ω`) www.memory-lovers.blog やったこと スプレッドシートのAPI化サービス「SSSAPI」を正式リリース!! \㊗️正式リリース㊗️/#SSSAPI の正…

NexeでNode.jsアプリから実行可能ファイルを作成する

Node.jsで作ったアプリを他の環境で実行したくて、 いろいろ見てたらnexeで実行可能ファイルを作成できるよう。 ちょっと試してみたときの備忘録。 まずはインストール $ npm i nexe -g 実行したいファイル // my-app.js console.log("Hello Nexe!!"); 実行…

Express.js(Node.js)で認証(ハッシュ化/JWT)

Expressで認証周りについて調べたときの備忘録。 Passport.jsという便利なのもあるけど、 パスワードのハッシュ化やJWTトークン周りは自前で用意する必要がある感じ。 (ソーシャルは不要なので、使わない形の例) パスワードのハッシュ化はBcrypt or Crypto J…

AWS SDK for JavaScriptでS3にファイルをアップロードする

AWS SDK for JavaScriptを使って、S3のファイルをあれこれする方法を調べたので、その時の備忘録 以下のGitHubリポジトリに全部まとまってるので、 S3以外が必要なときはここを見るといい感じ。 ・aws-sdk-js-v3/clients/client-s3 使い方 まずはインストー…

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

10月の振り返りと実績値の公開、今月の開発予定です(´ω`) 前回はこちら(´ω`) www.memory-lovers.blog やったこと スプレッドシートのAPI化サービス「SSSAPI」 2021/10/06 一覧画面からの更新に対応等 2021/10/11 掲載メディア欄を追加 2021/10/19 自動更新…

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…