米The New York Timesのデジタルトランスフォーメーション、自社製Webエディター構築

米The New York Times(ニューヨーク・タイムズ)は、オウンドメディア「Times Open」で自社の取り組みなどを紹介しているが、このほど同社システム構築に携わるエンジニアSophia Ciocca氏が投稿した記事「Building a Text Editor for a Digital-First Newsroom」では、ニューヨーク・タイムズのWeb誌面を支えるために開発した自社カスタマイズエディターの紹介をしている。

同氏が所属するチームのタスクはカスタマイズされたエディタをニュースルームに提供することだった。従来テキストや画像、ソーシャル、タイトル編集とパーツごとに分かれたソフトやアプリで記事が作成されていた。しかし、編集サイドの断片化されたワークフローや余分なタグの消去などの手間が課題となっていた。

"ニュースルーム"の進化のために新たなストーリーエディターの構築を構想した同チームは、レポーターやエディターが正確に同一のストーリーを把握できるように異なるコンポーネントの集約を目指し、オープンソースのProseMirrorを用いてチームエディター"Oak"を作っていく。

• ProseMirrorの構造(Times Openより)

すべてがNodeで構築されるProseMirrorは、トラディショナルなDOM構造をフラットなインラインエレメントで構築する構造を持ち、Strongタグやemタグなどの強調文字を個別に区別できる点を例として挙げている。Oakではパラグラフノード、ヘッドラインノード、イメージノードなどに"node spec"と呼ばれるカスタムクラスやオープンソースのフレームワークRedux用いて独自のスキームを構築、詳細な履歴機能を実装した校正、校閲のためのバージョン管理やコメント設定、ニーズに応じて挿入される写真に変化を加える"full-bleed header"などのカスタム例を紹介している。

• 誌面に応じて写真の設定を簡易に変えられるカスタマイズが施されている(Times Openより)