はてなブックマーク

前回の続き。Drizzle ORMをちょっと触ってみたときに、 いろいろ調べてみたときの備忘録(*´ω｀*) Drizzle ORMに入門してみた with Turso - くらげになりたい。 SQLiteにはdate/time型がない Date And Time Functions 残念なことに、SQLiteにはDate/Time/DateTimeの形がなく、 以下の形式の文字列(text)か数値(integer)で保存する ISO-8601 ... text Unix timestamp ... intager いくつか便利な関数が用意されていて、それを利用する形になる date() ... YYYY-MM-DD形式のtext time() ... HH:MM:SSやHH:MM:SS.SSS形式のtext datetime() ... YYYY-MM-DD HH:MM:SSなどのtex

mixi2がFlutter製だと聞いて、使いはじめてみたけど、 さわり心地とか含めて、いろいろ素敵だなと思い、 ライセンスページの利用ライブラリを見てみたときの備忘録(*´ω｀*) 見てみると、知らないすてきなパッケージがたくさんあったので、 ちょっと整理してみた(2024年12月18日時点) ライセンスページは以下からみれる 設定 > mixi2について > ライセンス 注意事項 ライセンスページに書かれているものをまとめただけなので、 実際には使っていないものや間接的につかっているものも含まれている可能性があります 公式情報ではないので、あくまで参考程度で！ ベース部分 土台部分はこんな感じっぽい。馴染みある構成 状態管理など: riverpod + flutter_hooks + freezed ルーティング: go_router フォント: google_fonts(Noto Se

pnpm workspace+TypeScriptなmonorepoで、 Cloud Functions for Firebaseを開発していたときに、 unjs/unbuildでビルドしてみたときの備忘録(*´ω｀*) 少ない設定でビルドができて便利(*´ω｀*) unbuildとは unjs/unbuild: 📦 A unified JavaScript build system 「A unified JavaScript build system」らしい。 Viteがフロントエンド用のビルドに対し、 unbuildはライブラリなどによさそうな印象 少ない設定でESM/commonjs+型定義を生成できる package.jsonからビルド設定を自動で取得 package.jsonの設定やdependenciesの過不足を自動チェック ビルドする方法は2つあり、rollupとmkdi

day.jsを使ってたけど、サイズも小さく軽量とのことで、 ちょっと試してみたときの備忘録(*´ω｀*) tempo.formkit.com FormKitのチームが開発したらしい formkit.com Tempoとは nativeのDateを操作するユーティリティなライブラリ。 day.jsとは違い、Date自体を直接操作する感じ。 import { format, parse } from "@formkit/tempo" // Dateのformat const readable = format(new Date(), "full") // Dateへのparse parse(readable, "full") タイムゾーンのサポートも手厚い。 import { tzDate, format, applyOffset, offset } from "@formkit/tempo"

最近なんとなく、考えていることの雑記(*´ω｀*) 本業が少しだけ落ち着き、時間が取れるようになったので、 個人開発の熱が戻ってきた。 年々個人開発に使える時間が減ってきたので、 もうすこしうまくできないかをいろいろ考えている途中。。 やりたいこと 最近はこのあたりをよく思ったりする。 作りたいものを素早くつくりたい 多くの人に使ってフィードバックをもらいたい 開発部分の以外はなるべく最小に 個人開発だけで生活できるように 大きくは変わっていないけど、より強く思うようになったかも。 考えている施策 利用技術を固定する いままでは割りと新技術を試す事が多かったけど、 ある程度、使う技術を固定して、習熟/開発の速度を上げる 今のところ、技術スタックはこんなイメージ WebApp ... Nuxt3/TypeScript/TaiwlindCSS/ElementPlus DocSite ... D

GitHub Actionsを試すときに、いちいちコミットしないといけないのがめんどくさいので、 ローカルで確認できればな〜と思い、色々調べたときの備忘録。 Dockerを立ち上げてローカルで実行できるのがあった...(*´ω｀*) ・nektos/act: Run your GitHub Actions locally 🚀 使ったサンプルはこれ(*´ω｀*) # ./github/workflows/build.yml # ./github/workflows/test.yml name: Act Sample on: release: types: [created] jobs: build: runs-on: ubuntu-latest steps: - run: | echo "MY_ENV_VAR = ${{ env.MY_ENV_VAR }}" echo "MY_2ND_EN

BuefyからTailwind CSSに移行してるけど、 通知を自前で作る必要があるので、いろいろ試してみたときの備忘録。 通知関連のVueコンポーネントはいくつかあるけど、 Vue3対応でメンテナンスされているvue3-notificationを利用 使い方 まずはインストール $ npm install --save @kyvg/vue3-notification プラグインの作成 vueプラグインを使うので、~/pluginsディレクトリに、 ファイル(vue-notification.client.ts)を追加する。 client側のみで利用するので、.clientサフィックスで作成 // ~/plugins/vue-notification.client.ts import Notifications, { notify } from "@kyvg/vue3-notificati

Nuxt.jsを使って開発してるけど、 よく使う処理やUIコンポーネントをライブラリ化したい。。 とはいえ、公開できるレベルまで作り込む感じでもないので、 npmjs.comに公開するのは気が引ける。。 GitHub Packagesを使えば、非公開パッケージを用意できるっぽいので、 試してみたときの備忘録(*´ω｀*) github.co.jp パッケージを公開する package.jsonの設定 { "name": "@<OWNER>/<REPO>", "version": "0.0.1", "description": "private npm package sample", "main": "dist/index.js", "types": "dist/index.d.js", "publishConfig": { "access": "restricted", "registr

Node.js/TypeScript ORMのPrisma。 高機能なので理解することがたくさんあるので、はじめ方をまとめてみた。 既存のDBがすでにあって、あとからPrismaを導入するときのイメージ。 全体の流れ Prismaを使った開発の流れはこんな感じ。 事前準備 初期設定 ... npx prisma init 既存DBのスキーマ取得 ... npx prisma db pull 初期マイグレーションSQL生成 ... npx prisma migrate dev 開発時 DBスキーマの同期 ... npx prisma db push マイグレーションSQL生成 ... npx prisma migrate dev Prisma Clientの生成 ... npx prisma generate 本番 マイグレーション履歴の設定 ... npx prisma migrate r

Nuxt3をいろいろ試していたときの備忘録。 Vuexが含まれなくなり、ComposablesやuseStateの登場で、 大きく変わっている印象。 composablesディレクトリとは？ auto-importしてくれるディレクトリのひとつ Nuxt 3 - Composables directory Composablesな関数を配置するディレクトリ vuexがなくなり、useStateを使った状態管理が推奨 Nuxt 3 - State Management Nuxt 3 - useState Composablesとは？ Vue3のドキュメントだとこのあたり。 ・Composables | Vue.js In the context of Vue applications, a "composable" is a function that leverages Vue Compo

CDNを使ってキャッシュを活用したいなと思い、 いろいろ調べたときの備忘録。 調べたのは、Cloudflare/Cloud CDN/Fastlyの3種類。 まとめ Cloudflare 無料でも利用できる 単一URLのパージのみ 柔軟なパージはEnterpriseプランのみ Cloud CDN 価格が安く、前方一致でのパージも可能 キャッシュ削除が遅く、1分につき1回まで $0.09/GB、$0.0075/1万req Fastly 柔軟なパージができ、キャッシュ削除もはやい 最低月額料金$50が必要 $0.19/GB、$0.0090/1万req(アジア) 費用がかかるほど柔軟なパージができるけど、 月50ドルは悩ましい。。(´・ω・｀) 調べた内容 Cloudflare パージできる種類 URL指定 Cache-Tags指定(Enterpriseプランのみ) URLのprefix指定(En

markdownからhtmlに変換したいなーと思い、 micromarkを使おうとしたら、 ES Modulesでかなりハマったので、その時の備忘録。 はじまり 今まで使っていたらちょっとしたツールのプロジェクトに、 micromarkをインストールしたら、こんなエラーが。。 $ npx ts-node sample.ts ./node_modules/ts-node/dist/index.js:842 return old(m, filename); ^ Error [ERR_REQUIRE_ESM]: require() of ES Module ./src/node_modules/micromark/index.js from ./src/sample.ts not supported. Instead change the require of index.js in src/s

Node.jsで作ったアプリを他の環境で実行したくて、 いろいろ見てたらnexeで実行可能ファイルを作成できるよう。 ちょっと試してみたときの備忘録。 まずはインストール $ npm i nexe -g 実行したいファイル // my-app.js console.log("Hello Nexe!!"); 実行ファイルの作成 # 実行ファイルの作成 $ nexe my-app.js # basenameで作成 $ ls my-app my-app # 作成したmy-appを実行 $ ./my-app Hello Nexe!! 簡単!! オプション # --output: 出力ファイルを設定 $ nexe my-app.js --output my-app-exe # --target: 出力対象のプラットフォームの指定 $ nexe my-app.js --target mac-x64-1

個人開発界隈、 毎月報告ししていて、おもしろそうだなと。。 あたかさんとかnabettuさんとかTAKASHIさんとかTAKUYAさんとか。。 受託以外でもたべていけるようになりたい。。 なので、今月からやってみようかなと(´ω｀) 9月の振り返り 積読ハウマッチ 7月末にリリースした読書管理サービス。 積読を読まなきゃ！を促進したいと思って、 登録した本の総額を計算するサービスを作ってみましたヽ(=´▽`=)ﾉ だいぶユーザも登録書籍も増えてきて、 自分では見つけられない本と出会えるようになってきた♪ tsundoku.site やったこと: 11回アップデート🚀 振り返ってみると、11回もアップデートしてた(´ω｀) 2019/09/02 読書メモ機能を追加 ✨ 2019/09/08 読書メモを改善 ✨ 2019/09/09 洋書検索に対応 ✨ 2019/09/10 FAQ と更新情

OGP画像を生成したいな〜と思い、ImageMagickが使えるようなので、いろいろ調べたときの備忘録。 ImageMagickとは 画像を操作したり表示するためのソフトウェアスイート。 コマンドラインでも使えて、バッチ処理とかで一括処理するときに使ったりするやつ。 Cloud Functionsでも使えるらしい。。 やりたかったこと やりたかったことは、以下の2点 ベースの画像に文字を入れたい 文字を入れた画像をCloud Storageにアップロードしたい OGP画像の動的生成で調べると、 HTMLからCanvasを生成してPNG化したり Canvas自体を動的に作ってPNG化したり する記事が多いけど、 ベースの画像が複雑なので、SVGにしにくかったり、 OPG画像としてしか使わず、クライアント側で処理させたくない ので、Cloud Storageだけで完結したかったため、この感じに

どうもきらぷかです。 最近、積んでる本の総額がわかる読書管理サービスをリリースしました!! リリース後のプロモーションはいつも困っているんですが、 いろいろ試していることをまとめてみました。 これから何かを作ろう、リリースしようとしている人の一助になれば。 やったこと/やっていることまとめ ざっくりとリリースしてからこんなことをしています! 登録サイトに投稿/依頼 いろんなとこで記事書く 進捗をつぶやく / 使い方とかTipsをつぶやく 1. 登録サイトに投稿/依頼 まずは、いろいろあるWebサービスを登録できるサイトに投稿!! このあたりに投稿や掲載依頼をしています♪ 全部で21サイト...大変なので、すこしずつ... サイト名 URL 開発会議 https://devtalk.jp/ Service Safari http://www.service-safari.com/ NewAp

積読ハウマッチをNuxt.jsのSPAで作ってみたけど、 静的ページじゃないので、NuxtのSitemap Moduleだと微妙... なので、CloudFunction for Firebaseを使って、 サイトマップを自動生成するようにしてみたときの備忘録。 sitemap.xmlのサンプル sitemapの形式はこんな感じ。必須なのは<loc>だけなので、 とりあえず、そこだけあればいい感じ。 <?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url> <!-- 必須: URL --> <loc>http://www.example.com/</loc> <!-- 任意: 最終更新日 --> <lastmod>2005-01-01</

Google Tag Manager+Google AnalyticsをNuxtで使うときに、 ちょっとめんどうだったので、その備忘録。 タグマネージャで拾ってこれるのは、aタグとかのリンクとかHTMLベースだけ。。 なので、JavaScript側で行っているページ遷移とかは取れないのでよしなにやる必要がある。 タグマネージャのモジュールの導入 @nuxtjs/google-tag-managerというモジュールがあるのでそれを使う。 インストール $ npm i --save @nuxtjs/google-tag-manager nuxt.config.jsの設定 modules: [ ['@nuxtjs/google-tag-manager', { id: 'GTM-XXXXXXX', pageTracking: true, }] ], pageTrackingをtrueにするとPag

ライブビューイングできる勉強会があるようなので、初勉強会だけど参加してみた(´ω｀) いつもスライドだけ見てたけど、ライブ感すごい。。次は現地にいきたい。。 roppongi-vue.connpass.com www.youtube.com Roppongi.vueのふんいき はじまってます〜 #roppongi_vue pic.twitter.com/rT4NXg6cer— める (@c5meru) May 27, 2019 登壇者からはこんな感じに見えます #roppongi_vue pic.twitter.com/VnWilcv4S9— める (@c5meru) May 27, 2019 Roppongi.vueのロゴとビジュアルのデザインをしました！テック感よりおしゃれ感を強めにしました。なぜなら六本木はおしゃれな人がおおいし、おしゃれなものがおおいからです。（浅い）イベントに参加

Spring BootでHTTPセッションを使う方法は3通りあるらしい。その時の備忘録φ(..)メモメモ セッション属性(@SessionAttribute)をつかう セッションスコープBeanをつかう Http Sessionを直接つかう セッション属性(@SessionAttribute)をつかう 同一Controller内で完結する場合は、セッション属性をつかう セッション属性で指定したクラスのオブジェクトをHTTPセッション内で管理してくれる @Controller @RequestMapping(value = "/user/") @SessionAttributes(types = UserForm.class) public class UserAddController { @ModelAttribute("userForm") public UserForm setupF