ep.160『HTMLの品質チェックをもっと身近に!Nu HTML Checker セルフホスティングへの道』

  • HANATANI Takuma(@potato4d)
  • Pittan
  • vivil
  • hiroya_UGA
2024/07/25 に公開750 views

このエピソードについて

@potato4d が @hiroya_UGA, @Pittan, @vivil に、Nu HTMLチェッカーのセルフホスティングについて話を聞きました。

ゲスト

  • @hiroya_UGA
    • 出前館に出向してコンシューマ向けのウェブアプリケーションの開発に携わり、兼務でウェブアクセシビリティチームに在籍。
  • @Pittan
    • LINEギフトのフロントエンド開発を担当し、兼務でwebアクセシビリティチームに所属。
  • @vivil
    • 社外アンケートプラットフォームチームのリーダーで、兼務でフロントの組織向けのDevOpsチームのインフラチームに所属。

Nu HTMLチェッカーについて

  • Nu HTMLチェッカーは、W3Cがメンテナンスしていた公式のHTML文法チェックツールで、現在はWHATWGが管理している。
  • HTMLだけでなく、CSSの文法チェックも可能。
  • オンラインで利用可能で、ソースコードやURLを入力して検証できる。

セルフホスティングの経緯

  • 社内での未公表情報を外部サーバーに送信するリスクを避けるため、内部にバリデータを立てることを決定。
  • 社内でのインフラ構築において、セキュリティチェックやリスクアセスメントを通過する必要があった。
  • GitHubで任意のURLを投げられなくするオプションをプルリクエストし、マージされることで再度立て直しを検討。

ホスティングの詳細

  • 社内のフルマネージドのコンテナアプリケーションサービス(AWSのApp Runner)でのホスティングを検討。
  • 大きなサイズのHTMLがベースとされてレスポンスを返せない問題があり、別の技術スタックでホスティングを実施。
  • 最終的にはコンテナベースで動かし、社内レジストリにDockerイメージをプッシュしてホスティング。

利用方法と活用事例

  • 普段の開発で書いたHTMLをNu HTMLチェッカーに投げてバリデーションを行う。
  • チーム内での技術トークやカジュアルな雑談の中でも活用。
  • ブックマークレットを利用して、ローカルホストでの開発結果をすぐに検証できるようにしている。

今後の展望

  • フロントエンドエンジニアだけでなく、HTMLを扱うすべての人にNu HTMLチェッカーを利用してもらいたい。
  • 社内外問わず、より多くの人に利用してもらうことで、アクセシブルなプロダクトの増加を目指す。
  • 社内での利用者拡大を進め、インフラチームとしても迅速に対応できる体制を整える。

結論

  • Nu HTMLチェッカーのセルフホスティングを通じて、社内での安全なバリデーション環境を構築。
  • 社内外での利用者拡大を目指し、アクセシビリティ向上に貢献していく。
  • 今後も継続的にメンテナンスし、より多くの人に利用してもらえるよう努める。

採用について

使用素材・クレジット

© Presented by UIT