###### tags: `GitHub`

# ウェブサイト班 引き継ぎ資料

## はじめに

ウェブサイト班は 73 で作られた班で、パー研 現高 2 で構成されていました。
申し訳ないことに、後輩教育どころかやってることの説明さえしてませんでした。（つまりこの資料を誰が読むのか私達は全く知らないです）
74 のウェブサイトを作る人も、結局ほぼ 1 からのスタートになると思います。ごめんなさい。

せめてもの罪滅ぼしに、この引き継ぎ資料には来年 1 からウェブサイトを作るのに役立つ事を中心にいろいろな事を書いているつもりです。
そしてこれから毎年安定してウェブサイトを作るために、来年以降もこれを添えて引き継いでくれると嬉しいです。

ウェブサイト制作自体ではなく、ウェブサイトを通じた発信・広報・企画を主軸に。

頑張れ！

--- 第 73 回 麻布学園文化祭実行委員会 総務局ウェブサイト班 一同

## 登録サービス

### 引き継ぐもの

- Google `[e-mail]`
- Gmail（`[e-mail]` も紐付けてあるので使えます）
- Google Domains （ドメイン管理）
- Google Analytics （ウェブサイトのアクセス解析）
- Google Search Console （Google 検索の管理ツール 検索順位とかクリック数とか）
- Google Account Password Manager : passwords.google.com
- Slack `afes-website.slack.com`
`[e-mail]` でプライマリーオーナーがいます
使いたければログインして使ってください（どちらかというと資料の意味合いが強いかも）
- ConoHa WING
- サーバー `afes-website`

### 引き継がないもの

- [GitHub Organization `afes-website`](https://github.com/afes-website)
- HackMD Workspace `afes-website`
（共同編集できるノート おすすめ度は高いけど、引き継ぐ理由もない）
- Figma team `afes-website`
- [npm Organization `afes-website`](https://www.npmjs.com/org/afes-website) / scope `@afes-website`

もし今後も作るのなら `74afes` とか `74afes-web` とかで作ったほうがいいと思います。
引き継ぎが面倒な上に、得られるものがほとんどないので…

どうしても `afes-website` 名前空間 を使いたい、とかいう場合は、後述する連絡先に連絡してくれれば空けるかもしれません。
ただ、私達が引き継がなかったのにも理由があることを念頭に置いて検討してください。

私たちも `73afes` にすればよかったなぁ…
（あとから変更するのはとても面倒、npm に関しては不可能）

## 契約状況

- ドメイン @ Google Domains : ¥1,400 + 税 /年
- `afes.info` ~~～2021.2.2~~ ～2022.2.2
ちなみに領収書は https://domains.google.com/registrar/billing から pdf をダウンロードできます。
https://pay.google.com/gp/w/home/settings で名前住所を変えてから注文したほうが良いかも。
- サーバー @ ConoHa WING : 約 ¥20,000 /年
- プリペイドカードを ¥25,000 分入れてあります
- 2020.2.2 くらいから借りてるので、¥20,000 はほぼ使い切りました
- プランの上げ下げができます
私たちは文化祭当日だけプランを上げました

## 予算・決算 & 今後の管理

### ドメイン

ドメインは普通に ¥1,540 を予算で落としました。
また、次年度分 ¥1,540 を決算に滑り込ませたつもりです。

75 文実がどうなるかわかりませんが、2 学期中に発足しなさそうなら 74 文実で 2022 年 2 月から 1 年分 = ¥1,540 を更新してほしいです。まあ普通に発足しないと思うので、74予算に入れておくのがいいと思います。

ドメインは維持して、新しい文化祭ウェブサイトに使いまわしたほうがいいです。

頑張って「麻布 文化祭」検索順位 1 位まで上げたので、Google からの `afes.info` の評価は高めのはずです。
0 から検索順位を上げるのはとても大変だし、なんだかんだで文化祭直前まで 1 位にならなかったので、契約を継続して使いまわしたほうがいいと思う。そのために、毎年使える `afes.info` ドメインを取りました。

### サーバー

約 1 年分、¥20,000 分の ConoHa プリペイドカードを予算で落としました。
また、74 が発足するまでのつなぎとして 3 ヶ月分、¥5,000 分を決算に滑り込ませたつもりです。

サーバーは従量課金ということもあり、決算までに通年の領収書が出ないので「プリペイドカードを予算で落とす」手法を取りました。なかなかグレーなので、文実上層部・会計・監査とよく相談してください。
「ConoHa のプリペイドカードはそれ以外に使いみちがないし、月ごとの利用明細で使用状況は確認できる」ということで OK が出たと記憶しています。

2021 年 5 月から 1 年分 = ¥20,000 を予算で落とすのがいいと思います。

## ウェブサイト制作方法のおすすめ

### ✕ Wix などのブラウザ・ツールで作るサービス （72 の歩んだ道）

無料だからって、**絶対に選ぶべきではありません**。

Wix は記事を作るという概念がないので、無理にやると手作業地獄で死にます。72 はそれをやって死んでました。
＊追記：今はあるっぽいですが、どうしてもっていう理由がない限り選ぶべきではないです。

記事を新しく作るたびに、手作業で、トップページの記事一覧のボタンを一つずつ下にずらして、一番上に新しいものを追加したいのならばやっていいと思います。きっと後悔すると思いますが…。

### △ 手作り （73 の歩んだ道）

はっきり言っておすすめはしません。かなりの動機がないならやらない方がいいと思います。

私達が手作りを選んだ理由

- 好きなようにレイアウトを作りたかった
- いろいろな機能を載せたかった

ウェブサイトを 1 から作りたい！と思わないならやらない方がよいし、製作には結構時間を使います。
班長としてはパー研の後輩だとしてもこの方法はおすすめしたくないし、73 でウェブサイトの制作方法を考えてたときも班長は手作りに反対して WordPress を推してました。班員（フロントエンドエンジニア）としては、やる気と時間があるならやってもいいんじゃないかなと思います。
（結果私達は機能もりもりにならざるを得なかったので、手作りで良かったと思っていますが）

### ◎ WordPress

特にこだわりがなければこれが絶対いい。
管理画面から GUI で記事管理とかユーザー管理とかができます。あとプラグインでいろいろ拡張できます。

一通り入門記事を読んで、わからないことはググったりすれば、大体どうにかなります。初心者でも十分扱えます。ユーザーが多くて情報が見つかりやすいのが嬉しい（ただし、その分誤った情報も多いので、ちゃんと読む必要があります）。

ConoHa WING の管理画面から WordPress サイトを作る方法があるんですが、やり方を間違えると 73 のウェブサイトも消えてしまい、（私達が）少し悲しくなるので、それを避ける為にやり方を下に書いておきます。
私達のサイトを残してくれるのならよく読んでほしいです。（ただ、もし消えても文句は言わないし,バックアップも取ってあるので、恐る恐るやる必要はないです）

## サーバー設定とサイト設定

ConoHa WING には、「サーバー」と「サイト」の２つの概念があります。

- サーバー：ウェブサイトサーバーのことです。1 台あたりの料金がかかります。
- サイト：`example.com` や `hoge.example.con` などのウェブサイトのことです。これには料金はかかりません。

1 つのサーバーに、複数のサイトを作ることができます。サイトはドメインに紐付いているので、ここでサブドメインを追加すると、サイトも追加されます。


新しくサイトを作るときのドメインの選択肢は 2 つあります。
つまり `afes.info` に作るか、 `xx.afes.info` に作るか (例えば `74.afes.info`)。

どんなドメインを使いたいかで設定の仕方は少し変わるので、方法を確認してください。

### ドメインを `afes.info` にする方法

`afes.info` を使う場合は、リダイレクト設定を解除し、「アプリケーションインストール」機能で WordPress を入れる。


翌年引き継ぐときは、[サイトコピー機能](//support.conoha.jp/w/wpsitecopy/) を使って `74.afes.info` にコピー後、`afes.info` → `74.afes.info` のリダイレクト設定をする。

### ドメインを `xx.afes.info` にする方法

`74.afes.info` を使う場合は、サブドメインを追加して、「アプリケーションインストール」機能で WordPress を入れて、`afes.info` →`74.afes.info` のリダイレクト設定をする。

どちらにせよ、(少し面倒でも)難しくはない作業です。
そしてその先に引き継ぐときも両方のパターンを使えるようにしておくといいと思います。

### リダイレクト設定


### Analytics とか Search Console とかの設定

「WordPress Google Analytics」とかでググって新し目のブログ記事とかを参考にしてください。
ただ、無くても死なないのでぶっちゃけ無くてもいいと思います。

## 75 以降への引き継ぎ

冒頭へも書いたように、(ここに書いてある情報が古くならない限り)この資料はそのまま次世代以降も伝えてください。資料をその都度作り直すと元の情報がどんどん劣化するので…。

そして、いつになるかはわからないけど、またガチガチの技術者みたいな人たちがウェブサイト班に現れた時の為に、私達の制作物・様々な事情で完成できなかったシステムの資料を残しておきます。

私達が１年間かけて考え、制作してきたシステムたちです、将来有効に活用してくれたら嬉しいです。

- [73 文実ウェブサイト班 | GitHub](//github.com/afes-website)
- [幻の「予約・受付・統制システム」教員説明用資料 | HackMD](//hackmd.io/@afes-website/manage-app-system)

「予約・受付・統制システム」もウェブサイト本体も、アイデア出しや設計など様々な内部資料があります。73 の公文書として提出したので、ぜひ探してください。(ウェブサイト班の `hackmd` ディレクトリにあるはず、なければ連絡してくれれば渡します)

また、「予約・受付・統制システム」は 73 文化祭一般客開催を目指すための取り組みの一つとして提出したため、コロナ感染対策というのが全面に出ています。
しかし、このシステム自体は通常開催の場合でも、各展示の入場者を数えられたり、いつもの整理アルファベットよりも圧倒的に入場統制の効果を発揮できる代物です。74 以降でも有効活用できると思うので、ぜひ使ってください！

### どこまでできてる？

- 全体
- [x] 設計
- [x] API 定義
- [ ] デプロイ
- フロントエンド
- [x] アプリのベース (5%)
- [x] QR コードリーダー (10%)
- [x] ユーザー認証 (10%)
- [ ] 入退場・入退出処理 (50%)
- [ ] 校内滞在状況 (20%)
- [ ] PWA 対応 (1e9%)
- バックエンド
- [x] モデル設計 (全体の40%)
- [x] リストバンドの形式チェッカー (5%)
- [x] 入退場 (10%)
- [ ] 入退室 (10%)
- [ ] 滞在状況 (5%)
- [x] ユーザーの行動履歴追跡 (5%)
- [ ] テスト(動作チェック) (25%)

### 今後話さなくてはいけないこと

- 計画書の話
- 予約システムの話
- 個人情報
- 教員との交渉
- 紛失リストバンドの対応

## 作ったもの一覧 on GitHub

GitHub 側に特記があるものを除き、すべて [MIT License](https://github.com/afes-website/docs/blob/develop/LICENSE) で公開しています。

- [73rd Afes Official Website Team \| GitHub](https://github.com/afes-website/)
すべてこの Organization に置いてあるはず
- [afes\-website/docs: 73rd Afes Official Website API Documentation](https://github.com/afes-website/docs)
API 定義・仕様書・全体のタスク管理
- [afes\-website/front: 73rd Afes Official Website front\-end](https://github.com/afes-website/front)
フロントエンド（ウェブサイト本体）
- [afes\-website/back: 73rd Afes Official Website back\-end](https://github.com/afes-website/back)
バックエンド（共通）
- [afes\-website/manage\-app: 73rd Afes Manage App for Executive and Exhibition](https://github.com/afes-website/manage-app)
予約・受付・統制システム 運営側アプリ（開発停止）
- [afes\-website/help\-docs: 73rd Afes Official Website Help Documentation](https://github.com/afes-website/help-docs)
主にオンライン文化祭用の即席ヘルプページ（作りかけ）
- [afes\-website/hackmd\-notes: 73rd Afes Official Website Team's HackMD Notes](https://github.com/afes-website/hackmd-notes)
HackMD で書いた note のうち、公開する価値があるもの

## 計画書を書くときのアドバイス (追記: 2021.03.07)

### 計画書を書くときに その1 「Google Document を使おう」

余計なお世話かもしれないけど、計画書とか文書を数人で書く時は Google Document を使うのをオススメします。
去年 Word ファイルバケツリレーで人に回したりして、すごく大変なことになっていたので。
https://docs.google.com/document/u/0/
去年のやつです： https://docs.google.com/document/d/1ck464adJ7shRNtE7Cf5W7RoKN2Lo3rZW/edit

あと、他の局長とかに文書を書かせる時には "各文書のタイトルは「見出し1」を使うように"とか、書き方について指示してください。

この二つ守らないと、ページめくるたびにフォントと文字のサイズが変わるすごい文章ができます…。
そんなこと起きる訳ないでしょと思ってるかもしれないけど、実際に私たちの代は実際にそうなりました。

### 計画書を書くときに その2 「要約版をつくろう」

直接話した時もいったかもしれないけど、職員会議のことを見据えるなら、本当に伝えたいことをまとめた数ページの要約版みたいなのを用意した方がいいです。職員会議中に長い文書を全部読むのは厳しいので…。要約版から本文を参照するような形にするとなおよし。
これはただの憶測ですが、生徒委員会ですらあの40ページを全員がすべて読んではいないと思います。

ただ、時間さえあれば、生徒委員会は40ページ全て確認したいと思っていると思います。
お話し合いかなにかをするときには、2,3日くらいそれを読んでもらう時間を設けたほうがよさそう（彼らも忙しいので）。
うちらはぎりぎりに出してたから、あまり読んでもらえていなかったと思っています。

### 計画書を書くときに その3 「個人情報について」

予約の仕組みについては、主に個人情報の観点から生徒委員会・職員会議と揉めることになると思います。というか面倒くさいです。

すでに資料を読んでいたら知っているかもしれないんですが、予約の個人情報の管理は選択肢が2つあります。
- 「生徒が個人情報を管理する」
- 「教員が個人情報を管理する」

それぞれのメリット・デメリットは話すし、聞かれたことにも答えるので、それを踏まえてどうするか、生徒委員会と話し合って決めてほしいです。

注意点として、生徒が管理する選択肢を推す場合は、教員が管理する場合も選択肢として残しておく必要があります。これは「生徒には任せられない」ってなったときにシステムごと吹っ飛ぶのを防ぐためです。

また、有事の際にどこまでの個人情報が必要なのかわかっていないため、保持する個人情報についてもまだ曖昧です。
氏名・電話番号・メールアドレスだけでいい気もしています。
生徒よりも教員のほうが詳しいと思いますし、'20年度の保健厚生部主任（物理科：加藤さん）に聞いてみるのもありかもしれません。

一つ留意しておいてほしいのは、これは「濃厚接触者がわかるシステムではない」ということです。
あくまで COCOA などによる接触判定システムと併せて使うことを想定していて、有事の際の連絡も「同じ教室にいた人が陽性でしたので、COCOA をご確認いただければと思います」程度しかできないと思っています。
（COCOA の導入を義務化することへの是非はありますが、COCOA とセットでないと「有事の際」は意味をなしません。）

### 計画書を書くときに その4 「私たちにも教えてね」

おそらく僕らも教員向けに文章を書かないといけないので、締め切りかなにかが決まったら僕らに教えてくれると大変助かります。
(そういうときにリンクを渡すだけでいいので、Google Document は本当に楽です)

## 連絡先

74 の人たちはなんでも、それ以降の人たちは先述した事情があれば連絡してください。

- ふわわあ
- [Twitter:@ibuki2003](https://twitter.com/ibuki2003)
- `[e-mail]`
- すばる
- [Twitter:@su8ru_](https://twitter.com/su8ru_)
- `[e-mail]`
- たけのひと
- [Twitter:@Takeno_hito](https://twitter.com/Takeno_hito)