Hono + Cloudflareでもくもく会用のDiscord Botを作ってみた
🔥 作ったもの 茨城県水戸市で毎月もくもく会 を開催してもうすぐ5年になります。今回そのコミュニティのチャットツールをSlackからDiscordに移行するタイミングで、もくもく会の運営を補助するDiscord BotをHonoとCloudflare Workersで作りました。 主要機能は以下です。 📌 チェックイン /checkin コマンドでもくもく会のチェックインを行えます。モーダルが表示され、自己紹介と今日やることを入力して送信すると、フォーマットされた内容がチャンネルに投稿されます。 実際のもくもく会では開始前に、参加者にチェックインを実行してもらい、この投稿内容をもとにはじめの共有を行なっています。これがあることで、主催側としても参加者の顔と名前を覚えやすくて助かっています。 また、Cloudflare の D1 に投稿内容を保存しているので、ほぼ内容が変わらない自己紹介
VanJS で素のDOM操作をリファクタしてみた
VanJSを試してみたら開発体験が良かったので紹介します。 🍦 VanJSとは？ VanJSは、数ヶ月前にメジャーバージョンがリリースされた比較的新しいReactive UIフレームワークです。軽量、非依存、トランスパイル不要、シンプルなAPIという特徴があります。 gzip圧縮後で0.9kbと非常に軽量で、バンドルサイズの肥大化を気にすることなく手軽に導入できます。 他のUIフレームワークと比較しても圧倒的に軽量 UIもJSXを使わず、関数ベースのAPIで宣言的に構築できます。 VanJSの開発秘話はとても考えさせられるものだったので、機会があればぜひ読んでみてください。 🛠️ リファクタリング対象 Sky Follower BridgeというX(Twitter)のFollower一覧からBlueskyのユーザーを検索するChrome拡張を個人開発しています。今回はその拡張機能のco
deno-puppeteerとGitHub ActionsでWEBサイトの外形監視をお手軽に
はるか昔に受託で作って運用管理しているWPサイトが最近たびたび落ちるので、deno-puppeteerとGitHub Actionsでお手軽外形監視をやってみました。 🚨 作ったもの 以下のように毎日指定時刻に指定したURLにアクセスして、HTTPレスポンスの確認とスクショの撮影を実行、結果をSlackに通知してくれるツールです。 サイト画像はdummyです もし、200以外のステータスコードが返ってきた場合は、異常とみなしメンション付きで通知してくれます。 異常があった場合にどんな状態だったか・何日前から異常があったのかもSlackチャネルをみればすぐにわかるので便利です。 🛠️ 仕組み・実装 仕組みはとても単純です。 GitHub Actionsで定期実行するdenoのスクリプトで、指定したURLにアクセスして、HTTPレスポンスの確認とスクリーンショットの撮影を行い結果をSlac
腰痛エンジニアを支える技術
ぎっくり腰（椎間板ヘルニア）からの坐骨神経痛により、ほぼベッドから動けない状況になってしまったので、そのような中でも何とかコードを書くための技術をまとめました。 💻 道具編 最初にベッドの上で快適に PC を使えるようにするための道具を紹介します。 ごろ寝デスク 2 知る人ぞ知る腰痛エンジニアの必須アイテム。 これを使えば、腰を極力刺激せずベッドの上から PC を操作できるようになります。 しかし、一見完璧にみえるこの製品にも問題が。。 使うとわかるのですが、手を上げながらのタイピングは地味にきついです。モデルの方のようなフォームで使うと、腰の代わりに肩・手首・肘を壊すのも時間の問題です 🥲 そこで次のアイテムが必要になります。 ワイヤレスキーボード ごろ寝デスクを使いながら肩・手首・肘を守るためには、ワイヤレスキーボードが必須です。ワイヤレスキーボードがあれば、手をおろした状態でタイ
chezmoi で dotfiles を手軽に柔軟にセキュアに管理する
dotfiles マネージャの chezmoi についてまとめました。 個人的にかなり便利だと思います。 chezmoiとは？ chezmoi は、.vimrc や、.zshrc などの dotfiles の管理を効率的に実現するためのツールです。 シンボリックリンク不要でコマンド 1 つで環境を再現出来る template 構文で変数の展開や処理の分岐を書くことで各環境の差分を 1 ファイルで管理できる 1password などのパスワードマネージャとの併用でセキュアにファイル管理ができる という特徴があります。 特に 2 と 3 は通常のシンボリックリンクでの dotfiles 管理だと Shell Scriptをかなり頑張らないと出来ない部分ですが、chezmoi なら手軽に実現できます。 基本操作 イントール Homebrew でインストール出来ます。 chezmoiプロジェクトの
zx + Datadog + GitHub Actions でフロントエンドのコードベースの健全性を可視化する
フロントエンドのダッシュボードを作ってみたらいい感じだったので紹介です。 作ったもの zx と Datadog、GitHub Actions を使って以下画像のように、フロントエンドのコードベースの各指標を可視化するダッシュボードを作りました。 値はデモ用に書き換えています 現在、計測している指標はこちらです。 Vue SFCファイルにしめるTypeScriptの割合 Vue SFCファイルにしめるComposition APIの割合 strict: trueにした場合のType Errorの数（tsc & vue-tsc） Jestの各種カバレッジ 各指標は毎朝9時に更新していて、時系列での推移も確認できます。 なぜ作った？ 技術的負債解消等コードベースのリファクタリングの活動は、機能追加に比べ進捗を把握しにくい、成果が伝わりにくいという問題があり、それを解消したいと考えたからです。 こ
ライブラリアップデートを継続的に行う文化をチームで作るための取り組み
この記事は LAPRAS アドベントカレンダー 2021 の 1 日目の記事です。 LAPRAS 入社後に行ってきたライブラリアップデート周りの取り組みについてまとめてみました。 経緯 プロダクトが成長して機能が豊富になると、必然的に依存ライブラリが増加し、各ライブラリのアップデートへの追従に苦労しがちですよね。 自分が入社した当時の LAPRAS でもその課題がありました。 当時のライブラリアップデートまわりの環境は、セキュリティアラートに関連する PR のみが定期的に作られ、その PR のレビューも気づいた者がベストエフォートで行うというもので特に何か明文化されたルールはありませんでした。 ライブラリアップデートが遅れると、以下のような問題があります。 セキュリティリスクの増加 新機能が使えないというモチベーションの低下 より大きなライブラリ・FW（例： Vue, Django 等）の
Google App Script 開発 のための Templateリポジトリを作った
GAS を書くたびに開発環境構築を調べている気がするので、GAS 開発用の Template リポジトリを作ってみました。 Templateリポジトリ 機能はこちらです。 claspによる App Script へのデプロイ TypeScript 対応 Webpack5 でのビルド※ ESLint / prettier でのコード整形 husky / lint-stage でのプレコミットフック 使い方 GitHub Template として公開しているので、リポジトリのUse this templateボタンをクリックすれば、コミット履歴が削除された自分のリポジトリとして作成できます。 作成したリポジトリをローカルに clone したら、.clasp.jsonのscriptIdを自身の AppScript の ID で書き換えてください。 ※ AppScript の ID は AppSc
Puppeteer +Lighthouse +GitHubActionsで認証付きWebアプリのWebperfを定期計測
Puppeteer + Lighthouse + GitHub Actions を使って Web アプリのフロントエンドパフォーマンスを定期計測するプロジェクトを作ってみたら良い感じだったので紹介です。 何を作った？ このように GitHub Actions 上で 認証付きの Web アプリに対して Puppeteer 介し Lighthouse を定期実行し、結果を Datadog に送信するプロジェクトを作りました。 実際にそのプロジェクトの計測値を使った Datadog のダッシュボードはこちらです。 Webperf の主要指標をページ別に時系列で表示しています。 サンプルプロジェクトはこちらにあります。 以降で実装について簡単に解説します。 Puppeteer + Lighthouse によるパフォーマンス計測 Puppeteer + Lighthouse によるパフォーマンス計測
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Raspberry Piへの公開鍵認証でのSSH接続 & VSCode Remote Developmentの設定方法
閲覧履歴・ブックマーク・タブを横断的に検索し移動できるChrome拡張を作ってみた