Lab | aoiroinc

サイト移行の副産物先日のサイト移行が完了して、新しい環境でいろいろ整理していたら、長年蓄積されていた「オレオレツール」群が大量に発掘されました。どれも「ちょっとこういうのがあれば便利なんだけどな」という思いつきで作って、そのまま自分だけがひっそりと使い続けていたものばかり。ほとんどがCUI（コマンドライン）ツールで、UIなんて概念すらありません。コードは汚いし、使い方も自分しか分からない、まさに「動けばいいや」精神の塊です。体裁を整えるという苦行せっかくなので公開してみようと思ったのですが、これが想像以上に大変でした。何しろ、CUIツールをWebツールにするには、UIを一から作る必要があります。「引数で設定を渡す」から「フォームで入力を受け取る」に変更し、「標準出力に結果を出力」から「きれいに整形して表示」に変更し… 一番困ったのが、自分にはまともなデザインセンスがないこと。機能は作れても、「人が使いたくなるUI」を作るのは別のスキルです。生成AIに助けられた話ここで救世主として登場したのが生成AIでした。「こういう機能のツールで、こんな感じのUIにしたい」と指示すると、ほぼノーコードでそれっぽいものを作ってくれます。CSS Gridの使い方から、レスポンシブ対応、果てはアニメーションまで。特に驚いたのは、「ファイルをドラッグ&ドロップで受け取って、処理結果をダウンロードできるツール」みたいな複雑な要求でも、一発で動くコードを生成してくれること。正直、これまで何時間もかけてStack Overflowを漁り、MDNを読み漁り、試行錯誤しながら作ってきた機能が、指示一つで完成してしまうのを見て、心の中で「あの苦労はなんだったんだ…」と嘆きました。いや、本当にすごい時代になったものです。（この辺りの話は、また別の機会にじっくりと書きたいと思います）こだわりポイント整理するにあたって、いくつか譲れない部分がありました。軽量であること読み込み時間にイライラするツールほど使わなくなるものはありません。必要最小限の依存関係で、サクッと開いてサクッと使える。これ重要。使いやすくあること UIの美しさより操作の分かりやすさ優先。説明書を読まなくても直感的に使える、というのを目指しました。（達成できているかは別として）ローカル環境で動くことこれは昔からのこだわりです。一般的には画像変換やデータ処理はサーバーサイドで行うのが主流でしたが、私はインターネットが普及し始めた頃からJavaScriptでなんとかしようと頑張ってきました。もちろん、当時は今ほどJavaScriptが強力ではありませんでした。ブラウザの「JavaScriptを無効にする」設定と延々と戦い続けた記憶があります。「スクリプトが無効になっています」のメッセージを何度表示したことか… でも、「データを外部に送信しない」というのは、プライバシーとセキュリティの観点から非常に重要だと思っていました。特に画像系のツールなんて、機密性の高いデータを扱うことも多いですからね。今では、JavaScriptの進化とブラウザAPIの充実で、昔は不可能だった処理もクライアント側で完結できるようになりました。長年のこだわりが、ようやく技術的に報われた感じです。レスポンシブ対応は当たり前もはや言うまでもありませんが、スマホからでも使えることは前提。技術的な面白ポイントせっかくなので、技術的に面白かった部分もいくつか。 Web Workers でのバックグラウンド処理重い処理はWeb Workersに投げて、UIをブロックしないようにしています。プログレスバーもリアルタイムで更新されるので、「固まった？」という不安がありません。 OffscreenCanvas for 画像処理 Canvas操作をメインスレッドから分離できるOffscreenCanvasも活用。大量の画像を処理する際のパフォーマンス向上に効果的でした。そういえば、もうリリース後8年目に突入したPixnoteでも、Canvasを使った画像変換や座標変換、圧縮処理などをバリバリやってきているのですが、今回の作業を振り返りながら改めてその面白さを噛み締めているところです。当時は「ブラウザでこんなことができるなんて」と驚きながら実装していた機能が、今では当たり前のように使えるようになっている。技術の積み重ねって、本当に面白いものですね。 Pixnoteといえば、YouTube動画での説明もやらなければと思いつつ、説明しなければならない内容もいっぱいあって、未だ3本で終わってしまっています。まさに三日坊主… 動画制作ってまとまった時間が必要で、なかなか腰を上げられないのが現実です。でも、それまではここで記事にしていこうと思います。なぜならば、サイトリニューアルで記事が書けるようになったから！文章なら隙間時間でも書けるし、技術的な詳細も丁寧に説明できる。動画の準備ができるまでは、こちらで情報発信を続けていく予定です。 JavaScriptとの長い付き合い今回のツール群整理を通じて、改めて「JavaScriptとの長い付き合い」を振り返りました。最初の頃は「おもちゃ言語」扱いされていたJavaScriptが、今では本格的なアプリケーション開発言語になっています。ブラウザ上で動画編集ができて、3Dレンダリングができて、機械学習まで動く。昔、「JavaScriptでファイル操作なんて無理」と言われていた時代に、無理やりData URIやBlob APIで頑張っていたのが懐かしいです。今では File API や FileReader API が当たり前のように使えて、ドラッグ&ドロップも簡単。技術の進歩を肌で感じられるのは、エンジニアの特権ですね。今後の展開とりあえず、手持ちの中で人様に見せられる状態になったものから順次公開していく予定です。まだまだ「発掘作業」が必要な状態ですが、気長にお付き合いください。新しいツールを一から作るよりも、既存のCUIツールをWeb化する方が、場合によっては大変だということを改めて実感しました。でも、自分が実際に使っているものなので、少なくとも「机上の空論」ではないはず。まとめ新しいサイト環境で、ようやくこういった実験的なコンテンツも気軽に公開できるようになりました。「作って終わり」ではなく、実際に使い続けて改善していく、そんなLiveなプロジェクトにしていきたいと思います。長年のJavaScript愛と、「ローカル処理へのこだわり」を貫きながら、役に立つツール群を育てていければと思います。リクエストやバグ報告もお気軽にどうぞ。ただし、「すみません、まだ発掘中です」という返事が返ってくる可能性は相変わらず大ですが。 Lab: https://aoiroinc.com/ja/lab/