このウェブサイトについて

木下晴貴

2021/05/21 05:30

概要 / Overview

このウェブサイトは、2019年8月20日から運用を開始しました。開発コードネームは筑波山 Mt. Tsukuba にちなんで twinpeaks としています。GItHubのリポジトリ名もこれです。開発チームのリーダーは木下晴貴です、といっても昔から今に至るまで開発メンバーが1人しかいないのですが。

非技術的な話題から順に紹介していきます。というわけで、意味不明な単語が出てきたらそこで読むのをやめるのが正解です。

日英二言語対応 / Billingual Policy

このウェブサイトの最大の特徴は、UIが日本語・英語の二言語に100%対応していることです。画面右上(モバイルだとドロップダウンメニューの最下部)にあるボタンで表示言語を切り替えることができます。これは、留学生をはじめとする非日本語話者の閲覧を想定しているからです。事実、2019年までのメインイベントではオーディエンスの3割〜4割程度を外国籍の方が占めていたので、英語ページの制作は必須と言えます。また開発者個人の信条ですが、あらゆる人々が、言語にかかわらず等しく情報を入手するに値する Everyone deserves to have equal access to information regardless of language he/she speaks と考えています(これにはカナダの二言語政策を規定した Canadian Charter of Rights and Freedoms Link に多分の影響を受けている )。

上で「UIが100%対応」と言いましたが、これは例えばボタンやメニュー、見出しといった、一度翻訳してしまえば使い回しが効く部分のことを指しています。一方でそれ以外の「コンテンツ」例えばスピーカーのプロフィールやトップページのお知らせなども可能な限り二言語化を目指していますが、それにはコンテンツを制作する人たち(スピーカーのプロフィールであればEnjaチーム)との協力が不可欠です。

エンジニアリングの分野では、多言語対応のことを internationalization (略して i18n) 国際化 と呼んでいるので、これ以降はこの表記を用います。国際化には nuxt-i18n というモジュールを使っています。このモジュールでは、ja.json や en.json のように言語別のJSONファイルを作り、その中にネストしたオブジェクトとしてキーと値(翻訳文)を格納していきます。これによる副次的な効果として、サイトの構造からコンテンツを分離することができ、保守性も高まりました。「でもそれじゃSEO的にどうなの?」と思うかもしれません。ですがJSONファイルの中身は静的ジェネレートのタイミングで埋め込まれるのと、英語ページは www.tedxutsukuba.com/en/hoge というディレクトリを割り当ててあるので、問題はない(はず)です。

Google Sheets との連携

メンバー紹介ページのデータは、なんとGoogle Sheetsから取ってきています。www.tedxutsukuba.com/private/how_to_update_team を見てみてください。シートを更新するだけで、即座に変更が反映されます。一番左の列にある id の値がページのURLの末尾になっていて、例えば www.tedxutsukuba.com/about/takuma_goto で後藤さんの紹介ページにアクセスできます。

Google Sheets では Google App Script というスクリプトを走らせることができて、簡易的なAPIになってくれるんですね。このウェブサイトがURLの値を読み取って、Google Sheetsにアクセスし、App Scriptがデータを返してくれます。ただこれの難点は、レイテンシ (遅延) が大きいことです。読み込みまで2秒くらいかかってしまいます。それでもやっぱり、組織内の人なら誰でも簡単に情報を更新できることを優先しました。

JAMStack

Nuxt.jsを選定した理由は単純に私が一番慣れているのがVue/Nuxtだったからです。それを静的ジェネレートしてVercelでホスティングしています(詳細は後述)。

Nuxt.jsと言われてもピンと来ない人向けにまずウェブ開発の最新状況をざっくりと紹介します。今やHTMLやCSSを手書きすることはまずもってなく、さらにNode.jsの普及などにより今まではフロントエンドと明確に区別されていたバックエンドの処理も、フロントエンドの技術を使ってできるようになりつつあります。そこで、2010年代に入ってから、Vue.jsやReact.js、AngularJSといったJavascriptフレームワークの時代が到来しました。Vue.jsおよびその派生系のNuxt.jsは、HTMLの要素の値と裏側で保持するJavascriptの変数の値を連動させ、さらに変更が必要な一部分のみを再描画する点が特徴です。これにより、ページが一瞬で遷移したり、ユーザが入力した値を即座に反映したりすることが可能になりました。ページ遷移についてはこのウェブサイトでも大いに体感してもらえると思います。

「Nuxt.jsといえばSSRでしょ!」なんて思っている方も多いようですが、それを否定するに足るメリットは多方面にあります。そもそもTEDxUTsukubaのウェブサイトはコンテンツの閲覧に特化しており、アクセスに応じて変更されるようなコンテンツがほぼありません。SSRはオーバースペックです。開発現場におけるスケールのしやすさも挙げられます。Vueでは新しいページを追加するたびにルーティングを手動で設定しなければいけませんが、Nuxtは動的ルーティングと言って、ファイル構造にしたがって自動でやってくれます。そして決め手は上述した国際化です。共通のサイト構造に言語ごと異なるデータを流し込むという性質上、これらを簡単にこなせるのはVue, React, Angular、あとはRailsくらいしかありません。なお、静的ジェネレート、SSG (Static Site Generation)、プリレンダリングはほぼ同じ意味です。

サイトのホスティングは Vercel でしています。昔はNetlifyを使っていましたが、ビルド時間が少し短いのと、コンソールがモダンでおしゃれだったので、特に理由は無いんですがある時からVercelに移行しました。サーバレスにしたことで、年間1,500円程度のレンタルサーバのコストを丸々カットすることができ、決して潤沢とはいえないTEDxUTsukubaの予算を僅かながら削減することができました。

SSRやサーバのある従来のウェブサイトと比べて静的サイトが劣っているのは、1文字の誤字を修正するだけでもサイトを丸ごとビルドしてデプロイする必要があるという点です。エンジニアのポートフォリオサイトのように、開発者本人が1人でコンテンツも管理しているならばいいでしょうし、twinpeaksもある時期まではそうでした。しかし私が現役を退いてからは、トップページのお知らせをタイムリーに更新する作業を現役メンバーにやってもらいたいというニーズが出てきたため、CMSの採用を検討することになりました。

CMSは、コンテンツを外部のサーバに置いておき、APIでリクエストして取得するという仕組みです。その中でもヘッドレスCMSといって、テキストとか画像とかJSONオブジェクトなどを組み合わせて必要なものだけ取ってこれる技術が、JAMStackではよく使われています。ヘッドレスCMSは群雄割拠という状態で、Nuxt.js + Contentful というのが王道の組み合わせなのですが、twinpeaksでは datoCMS というものを採用してみました。ダトと発音するらしい。フィレンツェにある会社なのでたぶんイタリア語か何かです。

// 冒頭に掲げたJAMStackというのは、JavaScript/APIs/Markupの略だそうです。設計思想を表す言葉のようで、確かに便利な表現ではあると思います。

やっていないこと

まず、TypeScriptは採用していません。Nuxtのライブラリはまだまだ型チェックに非対応のものが多く、また自前で複雑なロジックを書くわけでもないので、無難にJavascriptにしています。
OGPを言語別に出し分けたい! 完全二言語化を謳っている以上、OGPで出力されるメタ情報やサムネイル画像も日本語と英語で出し分けたいです。Qiitaとかに備忘録が載っていたと思うので、あとはやる気さえあればできます()

将来

Vercelを使い始めて以来、Next.jsも使い始めました。そこでTEDxTsukubaのウェブサイトはNext.jsを使おうと思っています。でもCSS in JSってなんなの?

最後までお読みいただきありがとうございました。
投稿内容は寄稿者個人の見解であり、TEDxUTsukubaを代表するものとは限りません。

新型コロナウイルスへの対応


TEDxUTsukubaでは、新型コロナウイルス感染症(COVID-19)の感染拡大の抑止と団体メンバーおよび関係者の安全確保の観点から、以下の対応を実施しています。

Logo

Spread Globally, Connect Locally.

〒305-8577 茨城県つくば市天王台1-1-1

tedxutsukuba@gmail.com


© TEDxUTsukuba 2021

This independent TEDx event is operated under license from TED.
About TEDx program