追加の依存パッケージなしでプロジェクトごとのGitコミットフックを設定する方法
Git 2.9以降はcore.hooksPathというオプションでグローバルまたはローカルのGitフックのディレクトリを指定できるようになっています。 Gitのcore.hooksPathオプションを利用するとhusky、simple-git-hooksのような追加の依存がなくても、Gitの機能だけでGitフックのコードをバージョン管理して、プロジェクトのセットアップ時にプロジェクトごとのGitフックを設定できます。 📝 類似するGitフックを管理するツールとしてpre-commitやLefthookもあります。これらのツールはGitフックの管理だけではなく、ファイルの種類ごとに実行するコマンドをわけて書けるようになっています。 つまり、lint-stagedのような機能も含むので、この記事で紹介するアプローチ以上の機能も同梱されています。 Node.jsプロジェクトの例 ここでは具体例
superwhisperでの音声入力を試す
superwhisperという、whisper.cppを使った音声入力ができるmacOSアプリケーションを最近使っています。 基本的にはggerganov/whisper.cppのモデルを使って、音声認識しながら文字入力ができるアプリケーションです。 特徴 Whisperの認識精度が高い かなり早く喋っても認識してくれる 日本語も認識してくれるモデルがある 日本語で喋って英語に翻訳してくれる機能もある オフライン対応 有料: サブスク と 買い切り の2種類のプランがある 無料で15分のトライアル、その後は選べるモデルが制限される 公式サイトのデモをみると、かなり早く喋っても認識してくれるのがわかります。 大抵の人にとっては、多分文字入力するよりしゃべったほうが早いぐらいの入力速度が出ると思います。 superwhisper 長文はそこまで得意じゃないけど、1行とか2行ぐらいの文章はかなり
Google DomainsからCloudflare registrarにドメインとメールを移管した
Google DomainsがSquarespaceに買収されるので、持っているドメインとカスタムドメインのメールアドレスをCloudflare Registrarに移管した。 Cloudflare Registrar · Cloudflare Registrar docs 基本的にはCloudflare Registrarに表示される手順でやっておけば、問題は起きなかったので、よくできてると思った。 次のような手順で順番に移管していたので、移管時のメモ。 手順 Google Domainsの移行準備 Cloudflareのname serverを使うように移行する ドメインの移管 メールの転送設定 Google Domainsの移行準備 移管する前に、Google Domainに登録しているドメインの設定を変更しておく。 それぞれONになってると移管時に問題が発生する。 DNSSECを無
Bluesky/GitHub/Calendar/RSSをNotionに同期するbluenotiondbを作った
Notionには同期データベースとしてGitHubやJiraなどを同期できるDBがありますが、任意のサービスには対応していません。 もっと色々なサービスと同期するNotionのデータベースが欲しかったので、bluenotiondbというツールを作りました。 azu/bluenotiondb: Sync Bluesky/GitHub/Calendar/RSS to Notion. bluenotiondbは、色々なサービスからデータを取得してそのデータをNotionのデータベースに追加するツールです。 現状では次のサービスに対応しています。 Bluesky Pull Posts from Bluesky and push to Notion GitHub Activity Pull events of GitHub user and push to Notion Open/Close/Com
SecretlintでAPIトークンや秘密鍵などのコミットを防止する
SecretlintはAPIトークンや秘密鍵のようなリポジトリにコミットしてはいけないデータを含んだファイルがないかをチェックするツールです。 Secretlintが見つけられるCredentials(秘匿情報)はプラグインで拡張できるようになっていて、npm、AWS、GCP、Slack、SSH秘密鍵、ベーシック認証などの検知に対応しています。 Gitのpre-commit hookやCIサービス上でSecretlintを使ってファイルの中身をチェックすることで、 リポジトリにうっかりCredentialsをコミットしてしまうことを防止する目的のLintツールです。 Credentials(秘匿情報)のチェックに特化したESLintやtextlintのようなLintツールです。 まずチェックしてみよう SecretlintはDockerかNode.jsが入っている環境なら次のコマンドで、現
Semgrepを使った構文木ベースの検索と置換でコードのリファクタリングをする
Semgrepはr2cという会社/サービスが開発しているツールです。 Semgrepの特徴としてTree-sitterでコードをパースしたConcrete Syntax Tree(CST)の構文木をベースにして検索や置換ができます。 コードをCSTにパースした構文木に対して検索/置換することで、ただの文字列検索/置換に比べてミスマッチしない検索/置換ができます。 例えば、次のa.js、b.js、c.jsはそれぞれevalを使っていますが、スタイルは違いますが意味はほとんど同じです。 // a.js eval("const a = 1, b = 2; eval(a + b);"); // b.js eval('const a = 1, b = 2;\ eval(a + b);'); // c.js eval(`const a = 1, b = 2; eval(a + b);`); $ sem
Oculus GoのブラウザにPCからテキストデータを渡してフォームに入力できるブックマークレットとアプリ
Oculus GoのブラウザにPCからテキストデータを渡してフォームに入力できるツールを書きました。 擬似的にOculus GoのブラウザでPCのクリップボード貼り付けを行えるよという感じです。 azu/no-clipboard-app: Share your clipboard text to your device like Oculus Go. Oculus Goには日本語IMEやクリップボード機能がありません。 これはOculus Go上のブラウザでも同様です。 Oculus GoのブラウザについてのWeb開発者目線からのまとめ - Qiita Chromeがデフォルトです。Samsung Internet VRもapkをadb経由で入れると動きますがこちらもクリップボード機能はありません。 そのため、日本語を入力する手段がなかったり長いテキストをOculus Go上で入力するのは
ECMAScript 2015以降のJavaScriptの`this`を理解する
この記事はJavaScriptの入門書として書いているjs-primerのthisに関する部分をベースにしています。 またjs-primerでは書けなかった現在時点(2018年1月1日)でのブラウザの挙動についてを加えたものです。 次の場所にjs-primer版（書籍版）のthisについての解説があります。 この記事と違って実際にコードを実行しながら読めるので、学習ソースとしては書籍版を推奨します。 書籍版: 関数とthis · JavaScriptの入門書 #jsprimer また、バグ報告やPRも直接リポジトリにして問題ありません。 asciidwango/js-primer: JavaScriptの入門書 おかしい場所を選択した状態で右下にある”Bug Report”ボタンを押せば、簡単にtypoとかのバグを報告できます。(PRでも歓迎) 前置きはこの辺までで、ここから本編。 この記
テストできないコードをE2Eテストを使ってリファクタリングしよう
ユニットテストがしにくい状態となってるコードをTestiumを使ったE2Eテストを書いてリファクタリングしてみる話です。 例えば、以下のようなjQueryで書いたコードは外(テストコード)から取り出すポイントがないので、ユニットテストを書くのは難しいと思います。(そもそもViewのコードなので) 特定のバージョンでの変更点を簡単に確認できるよう、 「Aの列のラジオボタンを選ぶと同じ行より一つ下にあるBの列のラジオボタンを自動で選ぶ」 という補助機能 $(document).ready(function () { // seq: シーケンス番号 $.each(["new_version", "old_version"], function () { $("input[name='" + this + "']").each(function (idx, elem) { if (idx == 0
ライブラリをES2015(ES6)で書いて公開する所から始めよう
この記事はECMAScript 2015の事始めとして、ライブラリをECMAScript 2015で書いて公開するというところから始めるのがいいのではという内容です。 ECMAScript 2015(ES2015)はES6とも呼ばれていてどちらも同じものを指しますが、この記事ではES2015に統一します。 ECMAScriptのバージョンについては次のページを参照してください。 ECMAScript · JavaScriptの入門書 #jsprimer 2018-12-27: 追記 textlint/textlint-rule-helperのmasterはTypeScriptの実装へ変換されています。 Babelの実装はhttps://github.com/textlint/textlint-rule-helper/tree/2.0.1から参照できます Babel から TypeScrip
GitHubでライブラリのリリースを見ていくためのツールや方法
GitHubでのリリース 前回、GitHubのRelease機能ついて書きましたが、これはリリースする側の自動化等についてでした。 git tagとGitHub ReleasesとCHANGELOG.mdの自動化について | Web Scratch 今度は、いわゆるライブラリユーザーだったりソフトウェアの利用者側から、 GitHubでリリースされるものをどう追っていくかについて書いていきたいと思います。 自分は、JSer.infoというJavaScriptの情報を見ていくサイトをやっているので、 JavaScriptのライブラリ等のリリース情報をどう追っていくかが中心になりますが、基本的にGitHubでリリースされてるならやり方は大きな違いはありません。 基本的には以下に色々書いていた内容のGitHubに関してをまとめた感じの記事となっています。 最近のJavaScript情報の探し方 ·
Promiseのテストを補助するライブラリを書いた
promise-test-helper azu/promise-test-helper という名前そのままですが、 Mocha等でPromiseのテストを書くときに見落としを減らすための補助ライブラリを書きました。 MochaのPromiseテストというのは、下記のようにpromiseオブジェクトを返すとそれをPromiseのテストと認識してやってくれる機構の事を言っています。 it("should support by mocha", function () { return getSuccessPromise().then(function (value) { assert(value); }); }); 詳しくは下記を見て下さい。 MochaがPromisesのテストをサポートしました | Web scratch Promiseのテストの難しさ Promiseのテストについてはazu
Githubのタイムラインや通知を見るアプリをnode-webkitで作った
github-reader というGithubのNotifications や News Feedを見るためのビューアーアプリを作ってみました。 大した機能はなくて、GithubでWatch等をして飛んでくるNotificationsとホーム画面にタイムライン的に流れてくるNews Feedを一緒に見られるだけです。 飛んできたイベントをWebViewで見られるRSS Feed Readerみたいな感じです。 インストール node-webkit をダウンロードしてインストールします github-reader.nw からアプリをダウンロードします node-webkitをインストール済みならgithub-reader.nwが関連付けから起動 使い方 自分しか使わないかなと思ったので認証周りがかなり手抜きしています。 (以前も似たものを作ったけど使ってる人はいない) Githubでは自分用
npmとbrowserifyを使ったクライアントサイドのウェブアプリ開発
YoutubeとVimeoの検索結果のRSSをまとめてOPMLで取得できるサイトを作った | Web scratch で公開した Tech Video RSS Searcher はbrowserifyを使って作ったので、その辺の開発フローについての記事です。 browserify って何? browserify はNode.jsスタイルで書かれたモジュール(CommonJS)を ブラウザで利用できるように変換するコマンドラインツール(Nodeモジュール)となっています。 又、node.jsのCore Modulesのshimが用意されていて、 npmで公開されているnode.js向けのモジュールも一緒に変換してブラウザで動かすことが出来るようになっています。(普通に require で読みこめば勝手に変換されます) 原理的に無理だったり全てのモジュールが動くわけじゃないですが、 その辺の互
CROSS 2014のアウトラインメモ
Cross 2014 CROSS 2014 | エンジニアサポートCROSS2014 に参加してきたメモ アセンブラ短歌×バイナリかるた バイナリカルタで8枚とれた 実況解説つき！ペアプロでわかるJavaScriptテスト入門 ペアプロ + 解説実況 今あるDOMScriptingについてのテストを書いていく jQueryのコード テンプレート kyo-ago/cross2014 testem を使用 よくあるjQueryでクリックした何かするみたいなことに対してのテストを書いていく updateLabel という関数を呼び出されたかをテストする testem npm install -g testem mocha expect.js JavaScriptのテスト 少し前は書きにくいと言われてたけどツールが発達した jQueryでボタンを叩いたら updateLabel()が呼ばれる事をテ
YetiでJavaScriptのテストを動かす方法
Yeti はYahoo.comがメインで開発してるNode製のTest Runner的なCLIです。 Yeti自体はテストの構文とかは持っていなくて、Test Frameworksに書かれているようにQUnitやJasmine、MochaやYUI Testなどで書かれたテストを動かすツールになっています。 雰囲気的にはTestemに似ていて、上のTest Frameworksで書いたhtmlページを用意して、 キャプチャー用のURLを作って、そこにテストしたいブラウザをキャプチャーして、テストを書いたhtmlを指定して実行させるという感じです。 (意味的にあんまり変わらないですが、先にテスト用htmlを指定して、ブラウザにアクセスさせるという逆の手順もできます) Yeti自体は数年前からあって、Bunyipとかでもインスパイアされてたりします。 動かしてみる QUnitやJasmine、M
WebStormからtestacularでテストとデバッグをする方法
AngularJSで使われてるTestacularではWebStormからテストを実行してデバッグする事を想定した作りになっています。 (AngularJS自体もJetBrains Plugin Repository :: AngularJSプラグインがあります) Testacular – Spectacular Test Runner for JavaScript WebStorm Testacular Documentation — Testacular 0.2.1 documentation 公式のデモ動画(Testacular – JavaScript Test Runner – YouTube)でもWebStorm Integrationが紹介されていますが、 ちょっと古くて設定が変わってる(一応キャプションで補足入ってる)のと分かりにくいので、その部分だけ抜き出して紹介します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
