本地处理

网站迁移的副产物 前几天的网站迁移完成后，在新环境中进行各种整理时，发掘出了多年积累的大量"私人工具"。 都是"如果有这样的东西就方便了"这种想法做出来的，然后就一直自己一个人悄悄地用着。大部分都是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用于图像处理 也活用了能将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之爱和"对本地处理的坚持"，希望能培育出有用的工具群。 也请随意提出需求和bug报告。不过，可能会收到"抱歉，还在发掘中"的回复。 Lab: https://aoiroinc.com/zh/lab/