モバイル端末でのウェブアプリのデバッグ方法、Safari on iOS/Chrome on Android
iOSのSafari、AndroidのChromeはそれぞれPCと連携してウェブアプリケーションをデバッグできます。 PCのSafariのWeb Inspector、ChromeのDevToolsと連携すれば、コンソールログやネットワーク、デバッガーなども利用できます。 スマホと繋いでWebサイトをデバッグする方法をまとめたページが見つけられなかったので、メモです。 ネットワークで繋いでデバッグもできたりするので、結構便利です。 Mobile Safari on iOS iOSのSafariは、macOSのSafariと接続してログやネットワークの通信などを見るデバッグが可能です ドキュメント: Inspecting iOS and iPadOS | Apple Developer Documentation iOSのSafariとmacOSのSafariを接続する 初回は次の設定が必要で
Kagi Searchをメインの検索エンジンとして使っている
最近はGoogleではなくKagi Searchをメインの検索エンジンとして使っています。 Kagi Searchは$108/year($10/month)の有料の検索エンジンです。 広告モデルではない検索エンジンなので、有料のサブスクリプションモデルとなっています。 Plan Types | Kagi’s Docs いくつかプランがあり、検索し放題のProfessionalプランが$10/monthです Ultimate Plan ($25/month)だと外部のOpenAIのGPT 4とかClaude 3との連携とかも入ってきます 月に1-2万回ぐらいは検索することを考えると、 (108 / (10000 * 12)) * 150 で大体1検索が0.1円ぐらいのイメージですが、こちらもKagiのLLM機能は利用できるので、実質もう少しコスパは良いと思います。 検索ソースにはGoogle
npm/yarn/pnpm/bunを同じコマンドで扱える ni のzsh実装を書いた
niという npm/yarn/pnpm/bun を同じコマンドでインストール/アンストールコマンドを実行できるツールがあります。 antfu/ni: 💡 Use the right package manager 仕組み的には、各パッケージのロックファイルやCorepackで決められたpackageManagerフィールドの値から、どのパッケージマネージャを使うかを判断しています。 たとえば、package-lock.jsonがあるプロジェクトなら npm を使ってるので、niコマンドは npm のコマンドを実行します。 また、packageManagerフィールドがyarn@<version>になっている場合は、niコマンドは yarn コマンドを実行します。 なぜこういうツールが必要になるかというと、npm や yarn などのパッケージマネージャは、それぞれのパッケージマネージャの
私のJavaScriptの情報収集法 2024年版
個人的なJavaScriptの情報収集の方法についてまとめてみます。 JSer.infoなどをやっているので、JavaScriptの情報については色々な情報源を見るようにしています。 JSer.infoの範囲の中での情報源については、次の記事でまとめています。 JSer.info 13周年: JavaScriptの情報源を整理する - JSer.info この記事では、少しスコープを広げてJavaScriptの情報収集についてまとめてみます。 かなりスコープが広がってしまうので、万人向けの方法ではなく、個人的な情報収集方法としてまとめています。 この記事では、膨大な情報の中から見つけるというアプローチをとっているので、人によって向き不向きがあると思います。 情報収集の方法 情報の元となる情報源はさまざまなサイトや人になると思います。 しかし、そのサイトや人ごとに見ていくというのはかなり大変
今年のオープンソース活動振り返り @ 2023
2023年のオープンソース活動の振り返り記事です。 2023年のオープンソース活動の振り返り記事を書きました！ - textlint/secretlint: 継続的にアップデート - jsprimer: 第二版の改訂出した、Open Collectiveやっていきたい - Notionに色々集約するツール書いてた "今年のオープンソース活動振り返り @ 2023 | Web Scratch"https://t.co/iwUCQfFWiu pic.twitter.com/7qgDjitpQm — azu (@azu_re) December 31, 2023 今までの振り返りの一覧です。 今年のオープンソース活動振り返り @ 2022 | Web Scratch 今年のオープンソース活動振り返り @ 2021 | Web Scratch 今年のオープンソース活動振り返り @ 2020 | W
投稿専用クライアントのpostemとpost-tweetをBlueskyに対応した
自分用の投稿専用クライアントであるpostemとpost-tweetをそれぞれBlueskyに対応しました。 azu/postem: Cross posting client for twitter, hatebu, and own services. azu/post-tweet: Simple post client for twitter and bluesky. それぞれ紹介記事を書いてありますが、多分自分しか使ってないとは思います。 ただ、投稿の8割ぐらいはこれ経由な気がするので、かなり使っているツールです。 URLスキームで起動できる投稿専用のTwitterクライアントを書いた | Web Scratch Twitterやはてなブックマークにクロスポストできるクライアントアプリを書いた | Web Scratch JSer.infoの更新のためのデータを入れるのは、postem
CommonJSからES Modulesへの移行する方法。トップダウンかボトムアップか
Secretlint v7でCommonJS からES Modulesへの移行を行いました。 Secretlint v7.0.0をリリースしました。Pure ESMへの書き直し この記事では、CommonJS(CJS)からES Modules(ESM)への移行を行った経緯と、移行する方法について紹介します。 CJSからESMへの移行は、率直に言えば単調な作業で、メリットが見えにくい作業です。 しかし、将来的にCJSよりもESMが主流になることは間違いないので、移行することは必要です。 移行の作業は、移行方法が決まれば大部分は機械的な書き換えが可能です。 では、実際にどうやって移行したのかを紹介します。 ESMへの移行の影響は依存元へと連鎖する Secretlintのリポジトリはmonorepoになっていて、だいたい40コぐらいのパッケージが含まれています。 そしてパッケージ間で依存関係があ
Secretlint v7.0.0をリリースしました。Pure ESMへの書き直し
機密情報をLintできるSecretlintのv7.0.0をリリースしました！ Release v7.0.0 · secretlint/secretlint このバージョンでは、SecretlintをESMモジュールとして書き直しました。 どのように移行したかは別の記事で紹介しているので、移行方法について記事を参照してください CommonJSからES Modulesへの移行する方法。トップダウンかボトムアップか Secretlint v7.0.0の変更点 ルールと本体のコードを含めて、全部のパッケージをESMに書き直しました。 その中で、いろいろ整理したりもしたので、変更点はいろいろあります。 ただし、secretlintコマンドや@secretlint/quick-start、Docker Imageとして使う場合は、そこまで目にみえる変化は少ないと思います。 詳細はリリースノートも参
documentationjs + add-text-to-markdownでREADME.mdのAPIリファレンスを自動更新
documentationjs + add-text-to-markdownでREADME.mdのAPIリファレンスを自動更新 documentationjsはJSDocからドキュメントを生成できるツールで、ES2015以降のコードにも対応しています。 (TypeScriptは対応してないようです) 以前はMarkdownへの出力が難しかったのですが、いつのまにかdocumentation build -f mdでMarkdownでのAPIドキュメントが生成できるようになっていました。 これを使うことで、ライブラリを書いてそのJSDocからドキュメントを生成して、READMEのUsageセキュクションを自動的に更新できるようになっています。 以前もできたのですが、かなりトリッキーなテーマを書いたりしないといけませんでした。(後stdoutへの出力がなかった気がします) –theme for
JavaScript Primer 改訂2版の予約が開始されました
https://jsprimer.net/ で公開している「JavaScript Primer(jsprimer)」の改訂2版の予約が開始されました。 jsprimer 改訂2版の発売日は2023年6月9日の予定です。 KADOKAWA: 「JavaScript Primer 改訂2版 迷わないための入門書」azu [ＰＣ・理工科学書] - KADOKAWA Amazon: JavaScript Primer 改訂2版 迷わないための入門書 | azu, Suguru Inatomi |本 | 通販 | Amazon 楽天: 楽天ブックス: JavaScript Primer 改訂2版 迷わないための入門書 - azu - 9784048931106 : 本 ヨドバシ: ヨドバシ.com - JavaScript Primer 改訂2版 迷わないための入門書 [単行本] 通販【全品無料配達
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で
GitHubのリリースノートを自動化する仕組み
GitHub のAutomatically generated release notesを使ってリリースノートの内容を PR に基づいて自動生成するフローを作りました。 今までは、コミットメッセージのルールであるConventional Commitsとconventional-github-releaserを使って、コミットからリリースノートを自動生成していました。 他の人の PR でも、squah merge でコミットメッセージを書き換えることで、リリースノートに反映されるようにしていました。 ただ GitHub に仕組みは違うけどほぼ似たことをするAutomatically generated release notesという機能が実装されているので、これをベースに移行しようと思って、そのワークフローを作っていました。 リリースノート自動生成テクニック - mizdra’s bl
1Passwordを使って、ローカルにファイル(~/.configや.env)として置かれてる生のパスワードなどを削除した
1Passwordを使って、ローカルにファイル(~/.configや.env)として置かれてる生のパスワードなどを削除した 最近、コミットはされないがローカルのディレクトリに置かれている.envのようなファイルから生のパスワードやAPI Tokenを削除しました。 これは、ローカルでマルウェアを実行した場合に、ローカルに置かれている生のパスワードやAPI Tokenを盗まれる可能性があるためです。 最近は、npm install時のpostinstallでのデータを盗むようなマルウェアを仕込んだりするソフトウェアサプライチェーン攻撃が多様化しています。 Compromised PyTorch-nightly dependency chain between December 25th and December 30th, 2022. | PyTorch What’s Really Goin
GitHub Actionsの`permissions`を自動で設定するツールを書いた
GitHub Actionsにはpermissionsというフィールドがあり、それぞれのWorkflow/Jobでのsecrets.GITHUB_TOKENの権限を設定できるようになっています。 secrets.GITHUB_TOKENはGitHub Actionsの実行ごとに発行されるGitHubのTokenで、多くのGitHub Actionsはこのトークンを使ってリポジトリをgit cloneしたり、Issueにコメントを書いたりしています。 GitHub Actions: Control permissions for GITHUB_TOKEN | GitHub Changelog Workflow syntax for GitHub Actions - GitHub Docs このpermissionsをちゃんと設定することでサプライチェーン攻撃などの影響を軽減することができます
買ってよかったもの、使ってよかったもの @ 2022
2022年に買ってよかったもの、使ってよかったもののメモ。 Stilys - SteamOneの置き型衣類スチーマー 服のシワとか伸ばすスチーマー。服の面積はでかいので、スチーマーもでかいのが良いと思って買った。 据え置き型で高さは調整できるけど、2mぐらいにして置いてる。 幅自体は、15cm x 27cmと省スペースなので、意外と圧迫感はない。 1セットだけ配置できるハンガーラックの代わりにもなるので、結構出しっぱなしても便利で、見た目も悪くない。 スチーマーとしての性能はすごくいいので、服のシワに悩まなくなった。 コートとか洗濯が難しいやつもスチーマーで汚れ落としたりとか、ホコリに水分含ませて取ったりするのにも使ってる。 きちんとしたい時はきちんと服着たいタイプなので、服をきちんとできるようになって、外に出やすくなった。 着る服をStilysにかけて、必要ならシワ伸ばして、全身鏡の代わ
今年のオープンソース活動振り返り @ 2022
2022年のオープンソース活動の振り返り記事です。 今までの振り返りの一覧です。 今年のオープンソース活動振り返り @ 2021 | Web Scratch 今年のオープンソース活動振り返り @ 2020 | Web Scratch 今年のOSS活動振り返り @ 2019 | Web Scratch 今年のOSS活動振り返り @ 2018 | Web Scratch 今年のOSS活動振り返り @ 2017 | Web Scratch 今年のOSS活動振り返り @ 2016 | Web Scratch 今年のOSS活動振り返り @ 2015 | Web Scratch 今年のOSS活動振り返り @ 2014 | Web Scratch 2022年のGitHubのPublicなContributionsは7000~8000ぐらいを推移していました。 Privateリポジトリも含めると大体1.5
fz-browse: fzfライクな自由度の高いインタラクティブな検索ツール、ただしブラウザに表示する
fz-browse: fzfライクな自由度の高いインタラクティブな検索ツール、ただしブラウザに表示する fz-browseという、fzfライクなインタラクティブな検索ツールを書きました。 fz-browse自体は検索エンジンを持っているわけではなく、既存のripgrepやripgrep-allなどのツールと組み合わせて、インタラクティブな検索体験を自分で組み立てるツールです。 コマンドを組みあわせたインタラクティブな検索(絞り込み)はpercol、peco、fzfなどが有名ですが、これらは検索の結果や操作もターミナル上で行います。 ターミナルは、書籍や画像などのコンテンツを検索した結果を表示してもあまり楽しくない場合があります。 fz-browserでは既存のコマンドラインツールを組み合わせて検索するのは同じですが、この検索結果の表示や操作をウェブブラウザ上で行います。 ブラウザで表示でき
textlintとGitHubのCode Scanningを組み合わせてリンク切れをチェックする
textlintのルールに文章中のリンク先URLがアクセスできなくなってないかをチェックするtextlint-rule-no-dead-linkというルールがあります。 textlint-rule-no-dead-linkは実際にURLにリクエストを送ることでアクセスできるかをチェックするため、URLの数が多くなるとものすごく時間がかかります。 また、GitHubのように同一IPからのアクセスが連続すると429 too many requestsなどのエラーを返すサイトもあります。 textlint-rule-no-dead-linkはRetry-Afterヘッダを見てリトライにも対応していますが、このリトライの間隔が長いサイトもあるため、リンク切れのチェックはコミット時にやるのには向いてない作業と言えます。 GitHubでは、GitHub Actionsを使ってschedule実行に対応
[JavaScript] URLを文字列結合で組み立てないために、url-cheatsheetを作った
[JavaScript] URLを文字列結合で組み立てないために、url-cheatsheetを作った URLを文字列結合で組み立てると色々問題が起きやすいので、それを避けるためにURL APIやURLSearchParams APIでURLを組み立てるパターンをまとめたチートシートを作りました。 azu/url-cheatsheet: URL manipulation cheatsheet for JavaScript URLにユーザーが入力した文字列を含めるときはencodeURIComponentでエスケープする URLはプレーンな文字列ではなく構造化された文字列(文字の並びに意味がある文字列)として扱わないと、さまざまな問題を抱えやすいです。 たとえば、次のように文字列結合でURLを組み立てるとパストラバーサルの問題があります。 name に ../../adminのような文字列が
パスワード管理/MFA管理の戦略
自分のパスワードやMFA(多要素認証)の管理方法についてまとめた記事です。 パスワード管理とTOTP(Time-based One-time Password)の管理として1Passwordを使い、MFA(多要素認証)の2要素目としてYubiKeyを2枚使っています。 パスワード管理とMFA管理を安全で使いやすくするのはかなり複雑で難しいため、完璧にやるのが難しいです。 そのため、その難しさから二要素認証を設定するべきアカウントも手間などから設定を省いてしまったり、管理方法に一貫性がありませんでした。 この記事では、パスワード管理/MFA管理の戦略を決めることで、どのサイトのどのアカウントのパスワード管理をあまり頭を使わなくてもできるようにするのが目的です。利便性と安全性のバランスを意識はしていますが、この記事のやり方が正解ではないので、各自の目的に合わせて読み替えると良いと思います。 用
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
