VTuberのホームページをGitHubのプルリクだけで更新していったらどうなるのか？企画に参戦してみた

# おめシスはいいぞ
VTuberのホームページをGitHubのプルリクだけで更新していったらどうなるのか？という企画に参戦してみた。技術的にも非常に面白い試みだったので書き残しておく。

## 経緯
夜中にTwitterのタイムラインを眺めていたら興味深い動画を見かけた。
[【検証】１ヶ月間、プルリクだけでホームページ作ったらどうなるの？](https://youtu.be/5h1NoX3my0s)

どうやら「[おめがシスターズ（通称：おめシス）](https://www.youtube.com/channel/UCNjTjd2-PMC8Oo_-dCEss7A)」というVTuberが、自分たちのホームページをGitHubのプルリクだけで更新していったらどうなるのか？という検証を行なっていた模様。


<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おめシスのホームページをGithubのプルリクで更新していったらどうなるのか、こっそり検証中です。そのうち動画にします！<a href="https://t.co/rErhv32NNR">https://t.co/rErhv32NNR</a></p>&mdash; おめがレイ@バーチャル双子YouTuber (@omesis_ray) <a href="https://twitter.com/omesis_ray/status/1209057136992387072?ref_src=twsrc%5Etfw">December 23, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

はじめはYouTube、Twitter、GitHubリポジトリのURLをベタ貼りしただけのテキストページ。aタグでのリンクすら張られていない。
![EOesMAsU8AAIdSh.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6380/fe312761-92db-739f-1887-676472e6391c.jpeg)

これが1ヶ月後どうなるか、という企画のようだ。
めっちゃ面白そう。

## 条件
本人たちからの要望は特に出さず、更新が来たらなんでも反映するというスタンス。

以上。

## 結果
1ヶ月（動画公開時点）で来たプルリクの総数は222件。GitHubトレンド入りも果たし、海外ユーザーが困惑していたらしい。笑う。

で、それなりに良さげなホームページに成長。
[おめシスのホームページ | 第１回おめシスのホームページをプルリクだけで更新していったらどうなるの？企画](https://omegasisters.github.io/homepage/)
![EOe9-2jU0AESugd.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6380/f68dd287-7c1f-9e93-4926-5407951b4877.jpeg)

主に載った機能としては、以下のようなものが挙げられる。

- ファーストビューにアニメーション
- 多言語対応
- レスポンシブ対応
- おすすめ動画紹介
- ディスコグラフィー（歌詞表示あり）
- Twitter埋め込み
- 各種リンク
- 3Dモデルビュワー
- トップに戻るボタン
- 隠しリンク
- おめが診断
- コントリビューター一覧
- (ゲーム)

すごい。

# 参戦してみた
まだしばらくプルリクを受け付けているとのことだったので、自分も何かやってみようと触ってみた。

さっそくGitHubリポジトリを見に行く。
[omegasisters/homepage: おめシスのホームページを作りたい](https://github.com/omegasisters/homepage)

HTML、JavaScript、TypeScript、CSSあたりで構成されているようだ。
<img width="503" alt="2020-01-18_18h53_38.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6380/b51ff73a-cba1-63d9-8315-8b20e2aca01b.jpeg">
TypeScriptよくわかんけど、軽くWebフロント触るくらいならできるっしょ（適当）

READMEもちゃんとあった。
<img width="511" alt="2020-01-18_18h54_55.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6380/a049107e-464b-dbfb-2a72-f33c5340e4ad.jpeg">

開発のやり方説明が簡素過ぎて笑う。
<img width="253" alt="2020-01-18_18h56_13.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6380/0863dfc9-820b-9653-eb07-660af7311f70.jpeg">

npmはNode.js触る時に入れたので何となくわかる。
yarnとかいうやつ知らんけど、これくらいならまぁ何とかなるっしょ（適当）

## 開発環境構築

yarn導入して`yarn start`したら早速エラー。
`webpack-dev-server`コマンドが認識されてないとか何とか。

単純に`yarn`コマンド打ったらなんか入った。init的なやつが足りなかった感じかな。
知らんけど。

**追記：`yarn install`が必要だったらしい**
[readme追記 by tktk0430 · Pull Request #302 · omegasisters/homepage](https://github.com/omegasisters/homepage/pull/302)

再度`yarn start`実行したらローカルでサイト表示できた。
![EOfovboUEAAFQD0.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6380/b53ddc75-1b85-7771-3ce0-847dd45474aa.jpeg)
これでガチャガチャいじれるぞ。
# ヘッダーテキストのローカライズ対応やる

動画ではまだ多言語対応が完全ではないとのことだったので、サクッとできそうな部分だけ見てみることにした。
[多言語対応 by shinyoshiaki · Pull Request #253 · omegasisters/homepage](https://github.com/omegasisters/homepage/pull/253)

`assets/i18n/resource.json` にjsonで言語データを定義。
指定したキーがhtml側のid属性に対応している模様。

言語データは適当にGoogle翻訳で投げたものをブチ込んだ。

```assets/i18n/resource.json
"section_discography": {
    "ja": "ディスコグラフィー",
    "en": "Discography",
    "cn": "唱片目录"
  },
  "section_movie": {
    "ja": "⭐【初心者向け】すごい面白い動画",
    "en": "⭐【Beginners】Recommended Videos",
    "cn": "⭐【对于初学者】推荐影片"
  },
  "section_link": {
    "ja": "リンク",
    "en": "Link",
    "cn": "连结"
  },
  "section_3d": {
    "ja": "3Dモデル",
    "en": "3D model",
    "cn": "3D模型"
  },
  "header_section_description": {
    "ja": "おめシスって？",
    "en": "What is Ome-sis?",
    "cn": "欧米茄姐妹 是什么?"
  },
  "header_section_movie": {
    "ja": "おすすめ動画",
    "en": "Recommended Videos",
    "cn": "推荐影片"
  },
  "header_section_discography": {
    "ja": "ディスコグラフィー",
    "en": "Discography",
    "cn": "唱片目录"
  },
  "header_section_link": {
    "ja": "リンク",
    "en": "Link",
    "cn": "连结"
  },
  "header_section_3d": {
    "ja": "3Dモデル",
    "en": "3D model",
    "cn": "3D模型"
  },
  "header_diagnosis": {
    "ja": "おめが診断",
    "en": "Omega Diagnosis",
    "cn": "欧米茄诊断"
  },
  "header_contact": {
    "ja": "お問い合わせ",
    "en": "Contact Us",
    "cn": "联络我们"
  }
```
あとは`index.html`に対応id追加して終わり。
これでヘッダーテキストが日本語、英語、中国語に対応。
<img width="488" alt="2020-01-18_12h39_53.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6380/c94ad8c2-ebff-8242-04a7-f35a5dbfa887.jpeg">
<img width="497" alt="2020-01-18_12h40_06.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6380/3e66ff69-9f45-11bf-d18b-524b3920076d.jpeg">
<img width="391" alt="2020-01-18_12h43_16.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6380/1317f065-0e3d-05c9-3ce6-ab63d50eeec3.jpeg">

簡体字、繁体字の区分がないのが若干気になった。
プルリク見てると正しいローカライズ修正してくれてる人をみかけたので、そのあたりは丸投げする。

OSSは適材適所や。

## 更新が早い

多言語対応初期導入時のプルリクではキー名が日本語になっていたが、翌日には英語キーに変更されていた。
[CSSのIDを日本語から英語に変更、他 by s4na · Pull Request #257 · omegasisters/homepage](https://github.com/omegasisters/homepage/pull/257)

素晴らしい。

とりあえず今回は「プルリク投げてマージしてもらう」のが主目的なので、速度優先でヘッダーテキスト部分だけローカライズ対応してプルリク作った。
[ヘッダーテキストのローカライズ対応 by unsolublesugar · Pull Request #293 · omegasisters/homepage](https://github.com/omegasisters/homepage/pull/293)

未対応部分は気が向いたときにでもやる。
1ヶ月でここまでのものが出来たということは、大体こういうスタンスの人たちが作ってきたのだろう。


## プルリクでCIが走る
プルリク投げたらなんかCI回った。
<img width="613" alt="2020-01-18_18h36_48.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6380/cb36acfd-88b7-2fe9-b6f9-784e878f46da.jpeg">
https://github.com/omegasisters/homepage/commit/5cff6658418c14c38d64b64b950bbbf7cbfe3d51/checks?check_suite_id=407543068

yarnでGitHub ActionsのCIによるテストを走らせるプルリクを発見。
[yarn CIの追加 by s4na · Pull Request #181 · omegasisters/homepage](https://github.com/omegasisters/homepage/pull/181)

結構ちゃんとしてた。

# 無事、マージされる

おめシスをレビュワーとしてassignして放置。
<img width="101" alt="2020-01-19_10h19_29.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6380/7fdedb1f-b598-f86b-5690-8a5425346c15.jpeg">

プルリクページ眺めてたら溜まってたプルリクがリアルタイムでマージされていっててドキドキした。

何個か前のプルリクマージで言語ファイルがコンフリクトしてしまったので秒で対応。
数時間後に無事マージされた。

[コントリビューター一覧](https://omegasisters.github.io/homepage/pages/contributors.html)にも載って満足。
<img width="144" alt="2020-01-18_17h05_28.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6380/ebc1468b-6a08-3a09-faa1-0b9e3d1c952e.jpeg">
やったぜ。
# OSSは楽しいね
まともにOSSプロジェクトに参加した経験がなかったため、リポジトリをフォークしてからプルリク作るという手順を知らず困惑した。

オリジナルのリポジトリに対してブランチを直接プッシュを試みるも、403エラーに阻まれて奮闘。「あ、これもしかしてforkってやつしないといけないのか…？」という閃き()により解決。

基本cloneだけで生きてきたので、大変勉強になりました。

あとでやるつもりだった本文中のローカライズ対応も、すでに進行しており感動した。
[英語・中国語の翻訳を追加 by johnmanjiro13 · Pull Request #295 · omegasisters/homepage](https://github.com/omegasisters/homepage/pull/295)

適当にブチ込んだ翻訳も修正してもらえた。
[中国語の内容を一部修正 by hyouchimaru · Pull Request #300 · omegasisters/homepage](https://github.com/omegasisters/homepage/pull/300)


使用技術としてVue.jsやReactなども絡んでいるようなので、興味のある方はじっくり見てみると良いかと思います。
[homepage/documents/environment at master · omegasisters/homepage](https://github.com/omegasisters/homepage/tree/master/documents/environment)


現場からは以上です。