2023年1月23日 Jon Robson投稿

ウィキペディアの見た目のほか、あれこれ変更した点

2023年1月末の週に、私のチーム最大の事業でマイルストンを達成しました — 英語版ウィキペディアを新しい見た目にしたわけです。これまでデスクトップ版の表示は、10年超、変わらないままでした。

ただし、変わったのは見た目ばかりではありませんので、今回のブログ投稿でどんな人たちのおかげで何がどうなったか、少しお伝えしたいと考えました[1]。

パッチセット第1版は2020年1月、あれ以来ウィキペディアのデスクトップサイトの設計改変をめぐり、コードベースやツールせっていにさまざまな改善を施してきました。

なんで見た目を変えるだけなのに、まるまる3年もかかったのかと苦笑いされるかもしれませんが、3ヵ月で済まなかった理由は、たくさんの協力先との話し合い、20年分の蓄積があるコードのリファクタリングに時間を費やしたからです。デザイナーが壮大な基本構想を示し、そこに向かって繰り返し開発の手法でじわじわと近づいてきました。初回を振り返ると時期は2020年7月、バスク語版ウィキペディアで意図的に戦略的に構築した時から、私たちのコードベース、いわば「巨人」全体を総合的に考え、責任感を抱いて構築してきました。リリース日程を見返したところ、当プロジェクト完了を目指して私たちがやってきたことは、3年でここまで到達できたのかと、にわかには信じられないほどです。

反対するのがうまくなった

ひとつ、気がついたことがあります。ウィキメディア財団は、内部で行き詰まっても切り抜ける方法を大きく改善したのです。技術畑の人間として当プロジェクトにはとても感謝しており、技術プログラムの部長から私たち技術職に寄せられたサポートはまるで日課あるいは儀式のようで、障害が出たら克服する、それを手伝ってくれました。あちこちの担当者は膝をまじえて話す場になげこまれ、芯を突いた質問を受け、意見の対立があればこっちも向こうもどちらも譲歩を迫られる。Vue.jsを使う使わない、お互いの信頼が増すかどうかすら棚に上げ、手法にも縛られず、なんとか解決策を見つけてインパクトの大きな変更を加えることができました。たくさんの人のお世話になったし、Jazmin、Lani, Suman、Nat、Daniel、本当にお疲れさまでした。

編集者のコミュニティと効率的に協働できた

編集者の皆さんのコミュニティと技術班とは、関係性を強めることができました。

英語版ウィキペディアへの実装は2023年1月時点だったわけですが、ウィキメディアの多くのプロジェクトでは導入を済ませて既定の見た目と使い心地になり、開発の道のりの途中で導入したところでは、今よりもかなり未完成の段階から使い続けてきたかもしれません。

設計を反復的に構築してきたので、早期導入のパイロット・コミュニティの皆さんにはたいへんに恩を感じています。多くのボランティアから私たちに寄せてもらった質の高いフィードバックは尊敬に値し、また当チームは全体に益する動機と目標を具体化しようと努め、どれほどの隔たりを超えてきたか、正直、驚いています。たとえば、さんざん議論がもめた機能をあげるなら、技術者には重要な要素だと疑いもせず文字領域の幅に制限を導入してページを読む人に好適に改善しようとしたくせに、解説文書がない点をすっかり見落としてしまい、だから自分たちで書きました。同僚たちは事務局時間を何度も組んできたし何回か私も出席したのですが、参加者の熱意と会話の面白さに引きずられて予定時間30分からの大幅な時間超過は頻発しています。フィードバックを新設計の微調整に使わせてもらえたのも、ボランティアの皆さんのおかげです。担当者はAlex、Szymon、Olga、Phuong、Martin、Letizia、Sherryでした。

フロントエンド開発の習慣を変えた

私たちが使うコードベースは基本的に、開発側ファースト（バックエンド発想） のソフトウェア思想であるため、フロントエンドのコード作業はこれまで、あまり名誉でもなければ褒められも注目もされませんでした。モダン JavaScript 対応の遅れ、ビルドツールすら業界標準なものがない、フロントエンドのフレームワークって何という状態に放置されたまま。ライブラリ類もJQuery.UIなどを使わずに済ませたくても、その場しのぎ、ごく一部の人しか使わないもので我慢させられてきたわけです。

ずっと前から因縁のように存在した大きな課題があり、無数のJavaScriptフレームワークからどれを選ぶのか痛みを伴う決断ではありましたが、管理者の機転、話し合っては試行錯誤する手順を得て、とうとうフロントエンドの開発にはVue.js しか使わない決断に至りました。ES6 コード書きはツール作成が無用な方法をいくつか見つけたり、デザイナーは組織のあちこちと相談を重ねて設計システム用ツールキットを作りました。

Vue.jsは最初の実験段階ではパイロット版を新しい検索の体験に応用、ツールカットの進化には、さまざまなチームやプロジェクトの関係者の意見を聞いて周りました。Eric、Anne、Volker、Roan、Nick、Jan、Stephen、Alex、Barbara、Natに加えて多くの人々の努力により、この途方もない道が開きました。

後方互換性を高めた

以前、2018年に書いたのですが、サイトのデザインを更新したあとも古いバージョンをかなりの長期間、温存する傾向があります。提供自体、これまでの伝統だと無料ではないので、開発史を見ると多くの場合、マークアップの変更やCSSの削除など小さな変更でも、変更するまでに複数のバージョン、数十のパッチを待つ必要があります。

書式設定をしないメニュー項目などはマークアップにとんでもなく依存して、HTML構造やIDを変更すると、重要な統合が壊れました。計画どおりに大幅な変更を行うにはテンプレートを使用して開発者の負担を軽減、共有データと表示レイヤ作成を別立てにした結果、私のチームが管理するコードは20%減を達成しました。

これに対応しようとAPIの追加やコード統合の契約を強化しました。たとえばページの副題変更やアイコン付きのメニュー項目の追加などは、方法を一貫させた安定版の方法に切り替えてあります。

プロジェクト中に私たちは何度も機能を壊してしまいました。手当てをしては再発防止に尽力した開発者の我慢強さにも寛大な心にも感謝しています。あらゆる手を惜しまず辛抱強く仕事を進めてくれたLeon、Ed、Roan、Ammarpad、Clare、Bernard、Mo、Bartoszにここで感謝します。

多言語対応をさらに進めた

新版ではこれまで以上にはっきりと多言語対応を前面に押し出し、表示場所も記事の題名脇に移しました。ここまで目立つようにするまでに、コミュニティの皆さんから大量のフィードバックを集め、言語チームとの緊密な連携では、先方が本業から目を離すほどまで関与してもらいました。Santhosh、Pauはじめ言語チームの皆さん、本当にお疲れさまでした。

API類の簡素化、コードパスの減量

段取りとしてはずばり、メニューに項目を追加するなど直球勝負で取り組もうとしたせいで、手順がとんでもなく複雑になってしまいました。メニューの場合、メニューに項目を1件追加するだけなのに、使う APIは5種以上になる状態でした。手順をかなり切り捨てないと、頭がおかしくなりそうだったのです。担当のAmmarpad、Clare、Moのおかげです。

アクセス性を保った

旧版のデスクトップ外装は見た目も操作性もとても使いやすかったので、設計が変わってもここは標準としてキープしたいと考えました。この分野に特化した技術者3名のおかげで、プロジェクト期間を通じて私たちの信頼性を落とすことなく、またこの分野の多くの利用者や専門家の皆さんからたくさんのフィードバックを受けられたのは誠に幸いでした。名前をあげさせてもらうならBernard、Jan、Volkerは甲乙つけ難い活躍で、その上司に賛成してもらえたおかげでもあります。Bernardからアメリカ盲人協会 American Foundation for the Blindにご協力を要請、有用なフィードバックをいただきました。

パフォーマンスを意識してビルド

パフォーマンス改善に努力しました。使わない CSSの除去、どうしてもそのCSSがないと困るページを減量、サムネールのトラフィックを標準化しました。Vue.js への切り替え、新規の検索用API採用など大規模な変更は、その都度、モニタリングを重ねています。ここらはVolker、Nick、 Timoの担当です。

ウィキ文のマークアップを再構成

新しい目次の体験では、ウィキ文の再構成を迫られました。以前の目次表示は記事のHTML コンテンツを解析したものであって、他の場所でレンダリングできるメタデータではなかったからです。特にこの変更は、古いスタイルのバージョンを維持しながら新版へ移行するという、危なっかしい変更でした。この苦労は将来、記事HTMLの大規模な再構築に際して、青写真として機能すると願っています。コンテンツ変換チーム— 特にSubbu, C Scott、Jamesのおかげです。

サードパーティ対応を改善

私たちのソフトウェアはウィキペディアばかりでなく、さまざまなタイプのウェブサイトで使われており、外装というプラグインを採用して見た目もかなり変えてあります。プロジェクト立ち上げ当初は、サードパーティの外装で壊れてしまったものが続出、管理されないままだったり、現在の構造に限界があるせいで必要以上に複雑化してしまい、そこは私たちのゴール達成を阻害する同様の困難と共通しています。この現実を見つめると、将来的に発生するかもしれない困難に対して度胸がつきます。サードパーティが使う外装は101件に達し、どれもサポートは改善、後方互換性のシステムは前よりも向上しています。華やかな見た目の外装が世間で使われ、外装ラボで鑑賞したり、 自作に挑戦したりしませんか。それぞれを開発してくれた人たちのご苦労に感謝し、またすっかりお待たせしてしまっているのですが、見捨てずにいてくれる点も洞察を投稿してくれるご協力にも感謝しています。Mainframe、Alistairだけでも名前をあげておきます。

見た目を古くさせない対策

プロジェクト開始からおよそ1年が経過した時点で、リリースに見た目の古さがあちこちでじわじわ混入したと気づきましたが、そのせいで全般的な速度が足を引っ張られました。

対応策として visual regression framework を策定、 実装の手順に組み込み、このツールは当チーム以外でも採用が進んでいます。Suman、Nickに頑張ってもらいました。

このあたりの詳細は、Visual Testing: Building A More Robust Wikipedia Interface By Spotting the Differences [2]を参照してください。

JavaScript のエラー記録を開始

プロジェクトの立ち上げ当初、JavaScript のエラー記録は取っていませんでした。現在はログがあります。担当者はJason L、Daniel 。

モバイル版の体験を改善

実は、この件の達成度は予想を下回っています。比較対照する相手のデスクトップ版外装の新しい版は旧版よりもずっと使いやすいせいです。原因は根本的には優先順位の課題のため — 現状のモバイル版はちゃんと機能するのですが、そうは言っても選択は重要であり、私たちは少なくとも実行可能な外装のご用意を熱望しています。

そういう間にもモバイルサイトのトラフィックは伸び続け、常に頭の片隅で注意をしてきました。技術のスタックはデスクトップ晩に迫る勢いで充実させ、その逆も実現しています。モバイル版にはありませんと言い続けた機能もモバイル版で活用されていますし、モバイル版で これ以上ないという名案はデスクトップ版に逆移入してあります。差分ページの改良は今後の直近のプロジェクトで取り組んでいきます。

この方面ではBernard、Jan、Bartosz、Jason S にお世話になりました。

大切なのは、まだ仕事は終わっていないということ。対処を延期したけれども、直したい点はいくつかあります。具体的な一覧です。

• 新しい外装には、まだまだ改善の余地がある。CSSには 2kb超も無駄があるまま出荷しているのは、たとえば機能のロールアウトの方法や、あるいはサイトの機関のCSS 構えより膨張したことが原因。反面、機能が増えたし、そのおかげでサイトの便利さが向上、旧版のブラウザだと表示が崩れる設計を回避できている点。
• デスクトップ版外装は、ちょっと反応が鈍い。でも当面は対応の優先度を下げて、モバイル版のサイトがあるし、手直ししたい部分の多くはコンテンツ制作者の協力なしには、記事のコンテンツ（巨大な表組みなど）の反応を改善できない。
• サイトのユニバーサル性にまだ課題がある。コンサルタントの人に相談しており、問題点の洗い出しに成功、あとは解決に向かって作業を進めるだけ。
• 文字サイズは理想よりも小さい原因は、開発のこの段階で文字サイズをいじると、編集者の人に押し付ける負担が大きすぎる。
• 私たちが取り組む作業は他にもブログ投稿の予定あり[3]。

……まだゴールではない

上記のとおり完璧ではない点は改善したいですし、まだその先もあります。 過去3年があったからこそ、前進するのに前よりも土台が固まったのだと感じています。デスクトップ版では次の改善点には、もう10年なんて時間は不用でしょう。

脚注

[1] 私たちの村の貢献者なのに、名前を書き忘れてしまった人があるかも知れず、その節は申し訳ないし、ぜひ教えてもらってご当人にお詫びかたがた、この投稿に加筆させてもらいたいです。

[2] 投稿の初版は1月19日に掲出、改稿によりニックのブログ投稿にリンクしました。

[3] 今後の1週間くらいでリンクを補足する予定。乞うご期待！

このブログはblog Medium.com ならびに私個人のブログサイトにも載っています。

ぎりぎりまで技術文書の書き方を教えてくれて、 Alex。本当に助かりました。