mubook-hon: Dropboxに保存したepubやPDFを読むビューア、Notionにメモや読んでいる位置を記録できるMobile/PC対応のウェブアプリ
mubook-hon: Dropboxに保存したepubやPDFを読むビューア、Notionにメモや読んでいる位置を記録できるMobile/PC対応のウェブアプリ mubook-honという読書用のウェブアプリを作りました。 特徴として、Dropboxに保存しているepubやPDFをそのままブラウザで読むことができ、メモやどこまで読んだかをNotionに記録できます。 ウェブサイト: https://mubook-hon.vercel.app/ ソースコード: azu/mubook-hon: epub/PDF reader + Notion Sync + Memo ドキュメント and サンプルデータベース: https://efcl.notion.site/mubook-hon-addce6c324d44d749a73748f92e3a1a6 特徴 Dropboxに保存したepub/PD
superwhisperでの音声入力を試す
superwhisperという、whisper.cppを使った音声入力ができるmacOSアプリケーションを最近使っています。 基本的にはggerganov/whisper.cppのモデルを使って、音声認識しながら文字入力ができるアプリケーションです。 特徴 Whisperの認識精度が高い かなり早く喋っても認識してくれる 日本語も認識してくれるモデルがある 日本語で喋って英語に翻訳してくれる機能もある オフライン対応 有料: サブスク と 買い切り の2種類のプランがある 無料で15分のトライアル、その後は選べるモデルが制限される 公式サイトのデモをみると、かなり早く喋っても認識してくれるのがわかります。 大抵の人にとっては、多分文字入力するよりしゃべったほうが早いぐらいの入力速度が出ると思います。 superwhisper 長文はそこまで得意じゃないけど、1行とか2行ぐらいの文章はかなり
体の動きや音声入力でアプリケーションをハンズフリー操作したりプログラミングしたり文章を書いたりしてみる
この記事は、体の動きとか音声入力でアプリケーションを操作したり、プログラミングをするにはどうすればいいかということをいろいろ実験してみた記事です。 この記事には、実用性があるものと現実的に使うにはトレーニングが必要なものが混在しています。そのため、そこまで期待してはいけません。 この記事は、TalonとmacOSの音声入力で書いたものを手作業で修正しています。 マイクはBlue Microphones Yeticasterを使いました。 きっかけ t_wadaさんが老眼について書いていたのが、この記事を書いたきっかけの一つです。 プログラマ35歳定年説はとっくに過去のもので、35歳を過ぎても能力も報酬も伸び続けるし、生涯現役プログラマのロールモデルとなる方も増えてきた。ただ諸先輩方から聞いた話をまとめると、ベテランプログラマの前に立ち塞がるのは「老眼」で、こればかりは本当に恐ろしい。何か対
ni.zsh: npmインストール時のサプライチェーン攻撃を検知する機能を追加
npm/yarn/pnpm/bunを同じコマンドで扱えるni.zshに、npmで配布されているマルウェアを間違ってインストールするのを防ぐ機能を追加しました。 ni.zshについては、次の記事を参照してください。 npm/yarn/pnpm/bunを同じコマンドで扱える ni のzsh実装を書いた | Web Scratch npmパッケージのマルウェア npmパッケージとしてマルウェアをpublishして開発者を狙うサプライチェーン攻撃が最近多くなっています。 たとえば、次の記事ではemails-helperというもっともらしいパッケージ名でマルウェアが配布されていました。 NPM Package Masquerading as Email Validator Contains C2 and Sophisticated Data Exfiltration 他にもtyposquatting
OneNoteのデータを画像付きのMarkdownにexportする
今まで技術書のメモをOneNoteに取っていました。 OneNoteを使う理由としては、自分はスクリーンショットをメモの代わりにしていて、OneNoteは画像が扱いやすくOCRも効くためでした。 技術書読むときメモ取る代わりにスクショとって貼って書くこと多いんだけど、これできるアプリ欲しい。 OneNoteでやってるんだけど、もっと気軽に読みながらスクショとメモを貯められる一時置き場みたいのがほしいな。 最終的な貼り付け先はOCRできるOneNoteがいい気がするけど。 pic.twitter.com/TzyRdSgMFh — azu (@azu_re) September 15, 2019 ただし、OneNoteを使うとスクショを取って貼り付けるという作業が面倒でした。 そのため、mumemoというスクリーンショットベースのメモをとり、Markdownファイルとして書き出していくアプリを
Googleマップ ストリートビューでランニングできるウェブアプリを作った
ノートPCやタブレットとかについてるウェブカメラを使って、Googleマップ ストリートビューでランニングできるRunning on StreetViewというウェブアプリを作りました。 Google Maps Street Viewとウェブカメラを使って、ストリートビューを走るウェブアプリを書きました。 走るとストリートビューが進む感じ(雑な判定なので走らなくてもいい)https://t.co/bhYq289QmS 使い方はこちらhttps://t.co/kypr9Oo9JU Google MapのAPIキーは自分で取得する必要があります。 pic.twitter.com/tmD1XNwjSa — azu (@azu_re) May 8, 2020 動画はデバッグ用のモデルに走ってもらっていますが、ウェブカメラで走るなどのアクションに応じてストリートビューを進行できるアプリです。 色々検
ウィンドウ管理アプリの.phoenix.jsを使って、任意のアプリをSplit Viewのように左右に並べる
ウィンドウ管理アプリの.phoenix.jsを使って、任意のアプリをSplit Viewのように左右に並べる TwitterとDiscordを1つの画面で見たかったので、Phoenixを使って実現しました。 Phoenixは、アプリやウィンドウの位置やサイズをJavaScriptで管理できるmacOS向けのアプリです。 kasper/phoenix: A lightweight macOS/OS X window and app manager scriptable with JavaScript このPhoenixを使うことでmacOSのSplit Viewのように複数のアプリを任意の割合で左右に並べる実装を書きました。 macOSにはビルトインでSplit Viewという2つのアプリをSide by Sideで並べて表示できる機能があります。 Split View で Mac の Ap
JavaScriptやCSSを読み込むローダーライブラリをES Modulesとして読み込む
今どきのnpmパッケージはUNPKGやPika CDNを使えば、ES Modulesとして直接import文読み込めることがあります。 たとえばPreactなら、次のようにUNPKG経由で直接モジュールをインポートできます。 <script type="module"> import { h, Component, render } from 'https://unpkg.com/preact?module'; // Create your app const app = h('h1', null, 'Hello World!'); render(app, document.body); </script> Getting Started | Preact: Fast 3kb React alternative with the same ES6 API. Components & Vir
GitHub ActionsでElectronアプリのクロスプラットフォームバイナリを配布する
mu-epub-readerというElectron製のEpubビューアを作っていて、いつもどおりバイナリの配布に困っていましたが、GitHub Actionsを使うことで簡単にできたのでメモ書きです。 英語の本を色々読もうと思ったのでepubビューア作った。 Oreilly MediaのSafari見てたらGoogle翻訳にまかせてしまうのが良さそうと思って、epub.jsを使ったElectronアプリにしてみた。 ざっくり眺めるのに便利な気がする。https://t.co/ZA0Urh2JTj pic.twitter.com/qMtISN5Y64 — azu (@azu_re) September 14, 2019 GitHub Actionsの設定 .github/workflows/electron.ymlを見るのが早いですが次のような設定をしています。 yarn run distは
JXAをTypeScriptでコード補完して書く環境やNode.jsから実行する環境を作った
JXA(JavaScript for Automation)を書いて実行するためにいろいろなパッケージを作りました。 この記事で紹介する内容は次のスライドで発表したものと大体同じです。 スライド: JXA for TypeScript/Node.js リポジトリ: JXA-userland/JXA: JavaScript for Automation(JXA) packages for TypeScript/Node.js. JXAはAppleScriptのJavaScript版(WebKit)のようなもので、macOSにはビルトインされています。 osascript -l javascrript file.jsでJXAを実行できます。 詳しくは次のページで解説されています。 Home · JXA-Cookbook/JXA-Cookbook Wiki [email protected] |
laco_sushiでJXA(JavaScript for Automation)の話をした
#laco_sushiに参加してきました。 laco_sushi - Togetter JXA for TypeScript/Node.jsというタイトルで、JXAというAppleScriptのJavaScript版についての話しをしました。 JXA-userland/JXA: JavaScript for Automation(JXA) packages for TypeScript/Node.js.というリポジトリに作ったものをまとめています。 JXAのTypeScript統合環境 JXAをTypeScriptで書けるようにした Node.jsからJXAの実行ライブラリ @jxa/run and @jxa/repl TypeScript definition file(.d.ts)を使ってWebStormやVScodeでのJXAのコード補完の実装 @jxa/types and @jxa
ページ上でずっと動いているsetTimeout、setInterval、requestAnimationFrameを見つけてパフォーマンス改善する
ページ上でずっと動いているsetTimeout、setInterval、requestAnimationFrameを見つけてパフォーマンス改善する 複雑なウェブアプリケーションになってくると、1つのページで複数のTimerなどを回すことがあります。 例えば、Twitterのようなアプリならば、ポーリングで更新するためにsetInvervalのようなタイマーを回します。 また、ゲームなどCanvasで描画を行うアプリケーションならば、メインループをrequestAnimationFrameで回します。 このように色々なタイマー系がありますが、アプリが多機能になっていくと色々なタイマーが同時に動くようになっていきます。 特に問題がなりやすいのが表示中だけタイマーを回すコンポーネントです。 よくあるのが次のようなmount時にtimerを開始して、unmount時にtimerを停止するコンポーネ
ローカルのPDFを全文検索するクライアント/サーバ/Electronアプリを書いた
ローカルにあるPDFを全部検索して、その結果を一覧したいことがあります。 例えば、今、js-primerという書籍を書いていて、ある用語が他の書籍ではどんな扱い/用語になっているのかを調べたいことがよくありました。 この手のアプリとしては論文管理のPapers for Macなどがありますが、検索したいだけなのに色々な機能がついていてまた、とりあえず作ってみることにしました。 searchiveというプロジェクト名にしてPDFからテキストを取り出す所やフロントエンドのElectronアプリ、PDFからテキストを取り出すのはブラウザでやるには遅いので、そこをサーバ側でやってくれる仕組みを作りました。 大体100冊ぐらいをインデックスに入れて検索していますが、数百ms以内に検索結果が出てるので意外と動くようです。 インストール Release pageからElectronアプリをダウンロードし
TestCafeでブラウザの自動テスト(E2Eテスト)
TestCafeという自動テストフレームワーク(いわゆるE2Eテストフレームワークジャンルとしておきます)を試してみました。 TestCafeの特徴としては、Seleniumを使っていないこと、設定ファイルなしで利用できる点です。 Seleniumを使ったテストフレームワークとしては、Protractor、testium、WebdriverIOなどがあります。 (Seleniumを使わない他のテストフレームワークだとNightmareなど) Seleniumを使わずにどうやって自動的にブラウザを操作するかというと、中継サーバーを起動してそこにテストコードなどを追加して動かすことができるSelenium RC(1)方式に近いものだと思います。 同名のウェブサービス/クライアントアプリも出していて、こちらはSelenium IDEのようにGUIで操作して記録したものを再生などができます。 なぜ
技術文書を書くためのtextlint校正ルールセット
技術文書向けのtextlintルールプリセットを作りました。 textlint-ja/textlint-rule-preset-ja-technical-writing: 技術文書向けのtextlintルールプリセット 今、書いているjs-primerで使用しています。 元々, JavaScript-Plugin-Architecture: JavaScriptプラグインアーキテクチャの本で実験していたルールをまとめたプリセットになっています。 そのため、実際に適応した状態で書けることは確認した内容がベースです。一部オプションで設定をゆるくしたり、textlint-filter-rule-commentsなどで無視する必要がある部分もありますが、許容範囲な感じでした。 そもそもなんでこういうツールが必要なのかについては以下のスライドを参照してください。 Introduction | 技術文
Reactで条件によって出したり消したりするコンポーネントを書いた
<TogglePattern /> というコンポーネントを書きました。 azu/react-toggle-pattern: React Component that provide toggle pattern 名前の通りトグルするボタンとかを実装するのを想定して作りましたが、 もっと汎用的にパターンマッチ的な感じの制御ができるようになってます(A/Bテスト的なやつにも使えそう) 使い方は、childrenに表示が切り替わる要素を置く形で書くようになっています。 (こういう親になるコンポーネントってなんというのだろう?) 次の例ではisEditingの値が trueならばLeaveEditingButtonが表示 falseならばEnterEditingButtonが表示 という形になっています。 import {TogglePattern} from "react-toggle-patt
textlintで日本語の文章をチェックする
textlintはMarkdownなどテキスト向けのLintツールで、テキスト版ESLintみたいな感じのツールです。 JavaScriptでルールを書けるテキスト/Markdownの校正ツール textlint を作った | Web Scratch 最近azu/JavaScript-Plugin-Architectureという小さな書籍を書いていて、色々簡単に使えるような仕組みを追加しています。 この記事では簡単なtextlintの導入方法について紹介します。 公式サイトには一部ルールを含むオンラインデモが公開されています。 textlint · The pluggable linting tool for text and markdown ドットインストールにてNode.jsのインストール、textlintの利用方法、エディタとの連携などのチュートリアルが公開されています。Node.
power-assertを使ったDoctestツール power-doctestを書き直した
今回power-doctestをシンプルなものへと作りなおしました。 rewrite simply by azu · Pull Request #11 · azu/power-doctest 1.0未満のバージョンはツール自体に変換したコードの実行=>レポート表示の機能があったのですが、そこを削除して変換のみを行うように書き換えました。 実行機能はやっぱりとても複雑で、Nodeだけでも結構制御が大変なので、単純にassertに変換して後は他のツールと組み合わせて実行できるような形がいいかなと思いました。 使い方 azu/power-doctest さきほども書いたように変換機能しかないのでライブラリとして使うのがいい気がしますが、単純なファイルを指定して変換するCLIの機能だけは入っています。
ブラウザでビジュアルテストをするreftest-runnerを作った
概要 reftest-runnerというブラウザで描画内容やレイアウトといった表示結果をテストするためのライブラリを作りました。 要素技術としてはブラウザ、WebDriver API、レンダリングキャプチャ、画像Diffという感じです。 azu/reftest-runner 時間が無い人向け 以下のスライドに簡単にreftest-runnerやreftestとはなにか、どういうユースケースがあるのかが書いてあります。 reftest-runner-overview.pdf reftestとは reftest(Referrence Test)とは、2つのHTMLの表示結果(スクリーンショット)を比較することで表示結果が意図したものかをテストする方法です。 用意するHTMLとして以下の2種類を1セットとして用意して利用します。 テスト用HTML テストしたい機能を使って実装したHTML リファ
material-fluxというFluxライブラリをREADME駆動で開発した
material-fluxというFluxアーキテクチャの実装ライブラリを書きました。 Fluxって何?と思う人は以下などを見ると良さそうな気がします。 React: Flux Architecture - Video Tutorial Series @eggheadio Fluxとはなんだったのか + misc at 2014 - snyk_s log Fluxアーキテクチャの覚え書きを書いた - snyk_s log The Flux Quick Start Guide Getting To Know Flux, the React.js Architecture ♥ Scotch What the Flux? (On Flux, DDD, and CQRS) — Jack Hsu なぜ作ったか IDE readable(machine readable)なライブラリが欲しかったのがひと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
