この記事では、WebにおけるWYSIWYGなルビ入力の現状と実装方法について解説しています。ルビは日本語の文字にふりがなを付ける仕組みで、主に漫画や教科書などで使用されます。Web標準としてHTMLで表現可能ですが、WYSIWYGエディタでの実装は難しいとされています。ルビ入力の方法として、マークダウン記法、アトム型の専用入力画面、単語とルビを直接編集する方法が紹介されていますが、特に直接編集はブラウザ間の互換性の問題があり、実用的ではないとされています。Tiptapを用いたアトム型の実装が提案され、実際にデモも提供されています。 • ルビは日本語の文字にふりがなを付ける仕組みで、主に漫画や教科書で使用される。 • WYSIWYGエディタでのルビ入力は難しいため、実装が後回しにされがち。 • ルビのHTML表現はWeb標準であり、<ruby>タグを使用する。 • ルビ入力の方法には、マークダウン記法、アトム型の専用入力画面、単語とルビを直接編集する方法がある。 • 直接編集はブラウザ間の互換性の問題があり、実用的ではない。 • Tiptapを用いたアトム型の実装が提案され、デモが提供されている。
サイボウズのkintoneでは、社内向けにkintone Design Systemを提供しており、これをAIエージェント向けにSkills化する試みが行われた。デザインシステムとMCP（Model Context Protocol）の組み合わせにより、情報の段階的開示が可能となり、必要なタイミングで鮮度の高い情報を取得できるメリットがあった。MCPの構築にはサーバーの設計や運用が必要で、コンテキストの圧迫が課題として挙げられたが、Skillsを用いることで、従来のデザインシステムの利用方法を改善できる可能性が示された。具体的には、kintone Design Systemのドキュメントをリポジトリとして整備し、段階的に情報を参照できる仕組みを構築した。 • kintone Design SystemをAIエージェント向けにSkills化した事例 • MCPを用いた段階的開示のメリット • MCPサーバーの構築と運用の必要性 • コンテキスト圧迫の課題 • Skillsを用いたデザインシステムの活用方法の改善 • リポジトリを利用したドキュメント整備の重要性
サイボウズは2025年4月からW3Cのメンバーとなり、フロントエンドエンジニアがWeb標準の動向を追う活動を開始しました。記事では、Chromium系ブラウザでの新機能や提案について紹介しています。具体的には、HTMLのtoolbar要素のネイティブ実装、WebComponentsの標準的な挙動の提案、CSSの新機能であるcontrast-color()やlight-dark()の拡張、CSSのat-ruleに対するFeature Detectionの実装などが挙げられています。これらの変更により、開発者はより効率的にWeb標準を利用できるようになります。 • サイボウズがW3Cのメンバーに加入し、Web標準のキャッチアップを行っている。 • HTML toolbar要素のネイティブ実装により、JSなしでキーボード操作が可能になる。 • WebComponentsの挙動をネイティブに近づける提案が進行中。 • CSSのcontrast-color()が全主要ブラウザで利用可能になる。 • CSSのat-ruleに対するFeature Detectionが可能になり、条件付きスタイルシートの読み込みが容易になる。