【TypeScript】ReactとCRXJS Vite Pluginで作るChrome拡張機能サンプルアプリについて 今回サンプルとして Zenn の閲覧履歴を管理できる Chrome 拡張機能を作成しました。 メッセージパッシングやストレージなど基本的な Chrome 拡張 API を使用しているので学習の補助などにご活用ください。 ソースコードは MIT ライセンスで公開しています。
ReactでChrome拡張機能を作るメモ
はじめに Chrome拡張機能を作る機会があったのでその時のメモです。 ライブラリ選定 以下のライブラリを使用する。 React TypeScript Vite Material-UI prettier 選定基準は新しすぎず古すぎない。 プロジェクトの作成 プロジェクト作成は以下のサイトを参考に行う。 vite3がbeta版なので、vite2を使用する。 プロジェクトの設定 MUIは以下のサイトを参考にインストールする。 prettierは以下のコマンドでインストールする。 . ├── manifest.json ├── package-lock.json ├── package.json ├── src │ ├── background.ts │ ├── content.ts │ └── popup │ ├── App.tsx │ ├── index.css │ ├── index.ht
Chrome ExtensionsをVite + TypeScriptで開発する - ひよこまめ
最近、Vite + TypeScriptの構成でマニフェストV3のChrome拡張を作った。 今後もChrome拡張を作る機会は何度もありそうなので、未来の自分のために、この記事では次のことが参照できるようにする。 Vite + TypeScriptで作る場合のファイル構成Chrome拡張でよくある処理をどう実現するか以前Chrome拡張をwebpackで開発する話を書いたことがあるが、この記事は、その記事のVite版である。 Chrome Extensions を wepback + TypeScript で開発する 動作を確認した環境 Typescript v4.6.4Vite v3.2.3@crxjs/vite-plugin v2.0.0-beta.17CRXJS Vite Plugin 今回は、CRXJS Vite PluginというChrome拡張を作るためのViteのプラグイン
WebSocket（Node.js）でサーバーからマインクラフト統合版にコマンドを発行する【概要編】 - マイクラの泉
マイクラ統合版に機能を追加する仕組みとして「アドオン」が存在しますが、実はアドオン以外にもWebSocketを利用すればマイクラ統合版の「外部」からマイクラを操作できます。この記事ではWebSocketサーバーの作り方と、実際に接続してマイクラを遠隔で操作する方法を紹介します。 マイクラ統合版はWebSocketでサーバーと通信できる みなさんはマイクラ統合版の「wsserver」または「connect」コマンドをご存じでしょうか。普通にプレイしていたらまず使わないコマンドだと断言できるぐらい利用頻度の低いコマンドだと思います。コマンドの説明は「指定したURLのwebsocketサーバーへの接続を試行する。」となっています。 connectコマンドの説明文（wsserverコマンドも同様の説明） 実はこのコマンド、マイクロソフトが教育用に提供している「Code Connection for
JavaScriptランタイムのBun、インストール不要の実行ファイル生成が可能に。Webpackより200倍以上高速とするバンドラがβ版、Puppeteerにも対応
JavaScriptランタイムのBun、インストール不要の実行ファイル生成が可能に。Webpackより200倍以上高速とするバンドラがβ版、Puppeteerにも対応 サーバサイドで実行可能なJavaScriptランタイム「Bun」は、5月に登場したバージョン0.6で、Bunをインストールすることなく、配置することでアプリケーションを実行できる単独の実行ファイルを生成できる「bun build」機能が搭載されました。 同じくバージョン0.6で高速なバンドラ「Bun Bundler」もβ版となり、6月に登場したバージョン0.6.7ではDiscordのボットを操作するDiscord.jsやWebブラウザを操作するPuppeteerなどの動作も確認されています。 下記はBunの開発者であるJarred Summer氏のツイート。 Standalone executables are coming
Node.js 14から18へアップデートする方法について
Corepackを使ってNode.jsをアップデートする ⬆️⬆️というタイトルで、Node.js 14からNode.js 18へのアップデートする方法について話した。 Node.js 14は4月末でEOLで、Node.js 18までアップデートする必要があるけど、npmの変更が混ざって大変です。 Corepackを使うことで、Node.jsとnpmのアップデートを同時にやらなくても良くなり、問題を分割して対応できます！ Corepackを使ってNode.jsをアップデートする ⬆️⬆️https://t.co/mRHsBcYbpn pic.twitter.com/HiiCe7c5YE — azu (@azu_re) April 28, 2023 スライド: Corepackを使ってNode.jsをアップデートする ⬆️⬆️ Note: Node.js 14は2023-04-30でEOLで
Plaiceholder
plaiceholder@3.0: Final Release The plaiceholder project is feature complete and will now be kept in maintenance mode. Read the migration guide for further information. If this project has been useful to you, please consider sponsoring my work (opens in a new tab). Overview "Plaiceholder" is a suite of server-side functions for creating low quality image placeholders (LQIP). There is no "one-size-
Convert curl commands to code
curl from Google Chrome Open the Network tab in the DevTools Right click (or Ctrl-click) a request Click "Copy" → "Copy as cURL""Copy as cURL (bash)" Paste it in the curl command box above This also works in Safari and Firefox. Warning: the copied command may contain cookies or other sensitive data. Be careful if you're sharing the command with other people, sending someone your cookie for a websi
Simple colored logging for your JavaScript CLI output
I love writing CLI scripts using JavaScript (mostly with deno, zx, or plain node.js). Here's something I add to almost all my scripts: a tiny copy-pasteable way to color the output of success and failure messages without adding external libraries. With a green ✔ and a red ｘ character: console.success = (...args) => console.log("\x1b[32m✔\x1b[0m", ...args); console.failure = (...args) => console.er
ARMv6のRaspberry Pi(Gen1, Zero)でも最新版のNode.jsが使いたい! ~nを使って入れてみる~
Raspberry Pi Zeroは安価にコンパクトなRaspberry Piの環境を手に入れることができ、大変重宝します。しかし、最新のRaspberry Pi(Raspberry Pi 3から、ARMv8/arm64です)と比べてアーキテクチャのバージョンがARMv6と古く、Node.jsのメインサポートから外れてしまっています。 ARMv7までしかダウンロードページに存在しない ARMv6で最も新しくダウンロードできるのは、2021/04/25現在v10.24.1のようです。ちゃんとセキュリティパッチは当たっているようですが、v10のEOLは今月で終わりですし、機能面の意味を考えても、極力新しいバージョンを使っていきたいですよね。 「メインサポート」とわざわざ明記したのは...そうです。非公式で実験的なプロジェクトとしてビルドされた成果物が https://unofficial-bu
学童の入退室メールを Google Home に読み上げさせる
子供が通っている学童では、入退室時に保護者にメールが送られてくるシステムが導入されています。ざっと調べた限りでは、そういうシステムを導入している学童・塾などは結構あるようです。 在宅で仕事をしているのですが、携帯をずっと見ているわけではないので、メール Google Homeが通知してくれたら便利そうと思ったので作ってみることにしました。 ( Google Home ではなく最近は Google Nest と呼ぶらしいですが、今回は分かりやすさのためにこの記事では Google Home と記述します) Google Home には任意のテキストを喋らせるような API は無いのですが、 Google Cast プロトコルで音声データを Google Home にしゃべらせることができるようです。また、クラウド等外部のサーバーから直接 Cast プロトコルで喋らせることはできません。そこで
Node.js Stream の初歩 - 30歳からのプログラミング
Node.js には Stream というインターフェイスが用意されており、これを使うことでデータをストリーミングできる。 Stream を使うことで、データの全てをメモリに保持するのではなく、少しずつ順番にデータを処理していくことが可能になる。 この記事では、Stream の基本的な使い方について説明していく。 WHATWG で定義している Stream はまた別の概念なので、注意する。この記事で扱っている Stream は、それとは別に以前から Node.js に実装されている Stream である。 以下の環境で動作確認している。 Node.js のバージョン 16.15.1 使っている npm ライブラリ @types/node@16.11.43 ts-node-dev@2.0.0 typescript@4.7.4 環境構築 まず最初に、手元で実際にコードを動かすための環境を構築す
Node.jsを過去の物にする最速の肉まん - Qiita
その名はBun ﾃﾞﾃﾞﾝ BunはNode.jsやDenoのようなJavascriptランタイムです。(2022/7/8現在ベータ版) ちなみにロゴが本当に肉まんなのかはわかりません。（赤ちゃんの頭にも見えるけど名前がBun/パンだしなぁ...) この記事ではNode.jsやDenoと比較をしつつ、bunの解説させていただきます。 割となんでもできる Bunはただのランタイムではありません。下のように、開発に必須の多くな機能を最初から有しています。 TypescriptからJavascriptへのトランスパイル jsxからJavascriptへのトランスパイル npmのようなパッケージのインストール&管理 webpackのようなプロジェクトのバンドル化 もちろんランタイムなのでNode.jsのようにサーバーでJavascriptを実行することも可能です。 これらに加えてBunには様々な機
Temporal で JavaScript の次世代の日時処理に触れてみる - Qiita
この記事は Recruit Advent Calendar 2021 の 7 日目の記事です。 イントロダクション Web アプリケーションの新規開発をしていて、先日、日時処理のライブラリ選定をする機会がありました。直近のプロジェクトで date-fns を使っていたので、今回もそれでいいかと考えていたのですが、Temporal が TC39 プロポーザルではあるが stage 3 になっているから試してみてもいいんじゃないかという話になりました。stage 3 であれば API 変更のハードルは非常に高いそうです。stage 3 になるまでの提案はこちらの記事が参考になります。少し見ただけでも大きく変わっていることがわかります。 プロジェクトはまだ開発段階ですが、実際に Temporal をプロジェクトに導入しながら、検証兼開発を進めていいます。しかし、Temporal を実際に使って
Node.jsでCSVの読み込みや保存をする
Node.jsでCSVファイルを読み込んだり、保存したりする方法です。自前で文字列を操作しなくてもライブラリを使うことで自動でオブジェクトとの変換を行ってくれます。 また、Expressで直接ダウンロードさせるサンプルも載せています。 2022.09.09 サンプルを各モジュールの新しいバージョンに修正しました。 本記事のサンプル動作バージョン csv-parse - 5.3.0 csv-stringify - 6.2.0 iconv-lite - 0.6.3 CSVファイルを読み込む csv-parseを使うことで、CSVをオブジェクトの配列や配列の配列に読み込みことができます。 csv-parseのインストール npm install csv-parse Excelなどで作成したShift-JISのCSVファイルを開くためにはiconv-liteもインストールします。 npm inst
ブラウザ上からNode.jsやPythonでバックエンドを無料で開発可能な「Napkin」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、ブラウザ上からNode.jsやPythonをプログラミング可能なクラウドエディタを提供する無料のWebサービスをご紹介します。 サーバレスでバックエンドを開発できるうえ、シンプルなエディタから即座にエンドポイントを作って公開もできる便利なサービスとなっています。 手軽にサーバ側の処理を構築したい場合やFaaSのように使いたい方にも最適なのでぜひ参考にしてみてください！ 【 Napkin 】 ■「Napkin」の使い方 それでは、「Napkin」をどのように使えばいいのか詳しく見ていきましょう。 まず最初にサイトのトップページから【Sign Up】ボタンをクリックして無料のユーザー登録を済ませておきます。 登録方法はいくつかありますが、今回はもっとも簡単なGitHubアカウントを利用してみます。 確認用のウィンドウが表示されるので承認をし
Typescriptでタイムゾーンを扱う - Qiita
はじめに Typescriptのバックエンドでタイムゾーンを扱った時のメモです。 タイムゾーンを扱う場面 バックエンドでタイムゾーンを扱う場合、サーバーのタイムゾーン設定に依存しない実装が必要です。日本のタイムゾーンにおける特定の時間でDateオブジェクトを作る場合は、ライブラリに頼らなくてもISO8601形式で以下のように対応ができます。 では以下のような場合はどうでしょうか？ ファイル生成時に現在の日本時間をファイル名に入れたい 現在の日本時間から見た、その月の末日をサーバから返却したい これらを自前の関数でやろうとすると結構面倒だったりします。そこで今回はタイムゾーンを簡単に扱うことができるdayjsの機能をご紹介します。 dayjsをインストール・初期化 dayjsは軽量の日付操作用ライブラリです。以下のようにインストールして対象のファイルからimportします。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - joenas/node-docker-raspberry-zero: Sample Dockerfile for running Node on a Raspberry Pi Zero/1 (armv6)
フロントエンドのデザインパターン
What TypeScript configuration produces output closest to Node.js 16 capabilities?