前回は5374アプリを作る上での準備作業をしました。続きはいよいよ実際に5374アプリの製作作業です。
各回の目次
- 準備編
- 作る前に確認すること: 既出かの確認作業, 著作権等
- 作るために準備するもの
- 作成作業編（２回に分けます
- 5374アプリの設置場所の用意（GitHubの組織アカウントの作成, リポジトリの準備）
- Googleスプレットシートでデータの入力と整形
- 公開編
- GitHubに配置
- 一般公開
- トラブルシューティング
5374アプリの設置場所の用意
今回はGitHub Pagesという、プログラマ向けのサービスであるGitHub上でWEBサイトを公開できるサービスを使います。
GitHub自体の解説を簡単にすると、プログラムの元になるソースコードというファイルを管理（良く履歴管理とも言います）し、プログラムに対してある課題の管理や、プログラムを運営する組織が様々な情報を公開するWiki機能、などをプロジェクトという単位で管理運用することができるサービスです。
オープンソースなアプリ, プロジェクトで利用されていまして、誰でも観覧、共有、参加ができる公開プロジェクトは無償で作成することが出来ます。
5374.jpも公開プロジェクトで、アプリとしての元になるソースコードをフォーク（コピーの意味）することで他の地域の5374アプリが作成できるようになります。
そのため、5374アプリを作る際は、GitHubのサービスを知っている必要があります。（GitHubの重要なシステムの一つで有るOSSのソースコード管理システムのgitの知識も必要になることがあります）そのため、だれにでもおすすめできる方法ではないことを最初にお断りしておきます。
とはいえ、ノンプログラマ向けでも解説サイトでGitHubのサービスの利用方法を学ぶことが出来ます。参考にリンクしておきます。
Git初心者でも大丈夫！完全無料でGitHub PagesにWebページを公開する方法 | 株式会社LIG
GitHub PagesでWebページを公開する方法 | TechAcademyマガジン
まずはGitHubのサービスが利用できるまでにします。冒頭で述べたように、ここで詳しい解説はしません。サービスの利用にはGitHubのアカウント作成が必要になります。上記のリンクを参考に登録してみましょう。
GitHub Organization で組織アカウントを作成
GitHubは、ユーザー個人の扱い以外に、組織アカウントという存在があります。文字通りとある組織全体で利用するアカウントで、その中に個人アカウントを参加されることで組織上のプロジェクトの状況が見やすくなります。
個人アカウントがあれば誰でも作成可能です。
GitHub Organization アカウントを作った | プログラミング生放送
自分のGitHubアカウントはこちらになりまして
組織アカウントである、fuji-5374はこちらになります。
なぜGitHub Organizationで作るの？
管理しやすい
これはいくつかの事情があります。一つは複数人が扱うプロジェクトとして行う場合にやりやすいからです。各ユーザーを組織アカウントに属させるだけで、管理や共有がしやすくなります。
GitHubのプロジェクトは個人ユーザーもユーザープロジェクトとして利用することが出来ますが、プロジェクトに参加を表明する仕組みがありません。組織アカウントは参加しているユーザーの一覧や、その中でチームを分けて作ることもできるので、複数人で作業したいときは便利な仕組みだと思います。
（このアカウントではチームを作っていませんが、どういったものかが英語で解説されています）
サブドメイン割当時の問題
もう一つの理由はGitHub Organizetionとは正確には少し関係ないのです、GitHub pagesにドメインを割り振る時の問題です。
5374アプリは、Code for Kanazawaが所有している5374.jpというドメインのサブドメインが取得できます。今回の富士市版では「fuji.5374.jp」を提供していただきました。このサブドメインをGitHub pagesのページに紐付ける（これをサブドメイン割当という）時に問題が一つあります。
まず、GitHub pagesで作成したページは初期状態でこういったURLが割り振られています。
http://fuji-5374.GitHub.io (現在は、このURLへアクセスすると fuji.5374.jp へと自動的にリダイレクトされます。)
このURLは、 ユーザーサイト と呼ばれるページの作り方です。どのように作られているかというと
- ユーザー/組織アカウントを作成する(例:fuji-5374)
- ユーザー/組織アカウント内に、[アカウント名].GitHub.io というプロジェクトを作成する(例:fuji-5374.GitHub.io)
- このプロジェクト内でGitHub pagesのセットアップ（WEBサイトで扱うHTML, CSS, Javascript等の構成データを入れる）を行うと、
http://fuji-5374.GitHub.ioへアクセスした時に表示される。
対して、 プロジェクトサイト と呼ばれるページがありますが、作り方とURLは以下になります。
- ユーザー/組織アカウントを作成する(例: fuji-5374)
- ユーザー/組織アカウント内に、example_site というプロジェクトを作成する
- example_siteプロジェクト内でGitHub pagesのセットアップ（WEBサイトで扱うHTML, CSS, Javascript等の構成データを入れる）を行うと、
http://fuji-5374.GitHub.io/example_siteへアクセスした時に表示される。
この２つのどちらが良いか、結論からいうと ユーザーサイトです。理由ですが、 プロジェクトサイトにサブドメイン割当を行うとGitHubから警告メールが届く ようになったそうです。
- ユーザーサイト にサブドメイン割当を行う:
fuji-5374.GitHub.io->fuji.5364.jp - 特に連絡などなく利用可能になる。
- プロジェクトサイトにサブドメイン割当を行う:
fuji-5374.GitHub.io/example_site/->fuji.5364.jp - GitHubより、割り当て時に警告メールが届く（未確認:ドメイン管理者側にも来る？）
現在はサブドメイン（つまりドメイン）自体をプロジェクトサイトに割り当てることは推奨されていないようで、（推奨されていないということはつまり、）いつまでサポートされるか不明です。
ユーザーサイトを作るときは、すでにユーザーサイトを作っていないアカウントが必要になります。なのでユーザーアカウントを新しく一つ作って、それで作業するのも悪く無いのですが、複数のユーザーアカウントを持つと管理が面倒になります。
すでにユーザーアカウントを持っているのであれば、組織アカウントを作りそれに利用してるユーザーアカウントを参加させるほうが、余計な作業が減ります。
ドメインの割当については、今後の回で扱います。
5374アプリのフォーク
では、組織アカウントに5374アプリのプロジェクトを作ります。
GitHubでは、フォークという概念があります。コピーの意味合いに近いのですが、プロジェクトのソースコードをフォークした時点の状態（更新履歴も）を新しいプロジェクトにコピーしてくれます。
やってみましょう。まずGitHubにログインしている状態で、5374.jp の GitHub上のプロジェクトサイトへアクセスします。
codeforkanazawa-org/5374: 5374(ゴミナシ).jp for Kanazawa
こちらのサイトに有る、 Fork というボタンを押します。
フォーク先のアカウントを選びます。上の組織アカウントまで作成している場合は、ユーザーと組織の２つが現れます。組織側のアカウントを選択するとフォークされます。
フォークされると [アカウント名] / 5374 のプロジェクトが作成されます。こちらにフォークした時点でのソースコードが入っています。
次に、フォークされたプロジェクトのSettingメニューより、プロジェクト名を変更します。
最初に表示される Repository name を [アカウント名].GitHub.io へ変更します。この写真の例では fuji-5374.GitHub.io としています。
これでフォークされたプロジェクトで、GitHub Pagesのユーザーサイトとして機能させる準備が整いました。（こちらはすでに動作するような更新済みのプロジェクトです）
GitHub特有のキーワード: ブランチ(Branch), リポジトリ(Repository, Repo)について
最後に、GitHubで扱う言葉について簡単に解説します。
GitHubのサービスをもう少し突っ込んで説明すると、gitと呼ばれるソースコードを管理するソフトがあり、それで利用されるソースコードを含むデータをホスティング（保存したり、内外に公開したりする）するサイトです。
このgitで管理される意味とは
- ソースコードを変更した時の履歴を保持することができる
- ブランチと呼ばれる、ソースコードのコピーを仮想的に保持する。
- 例えば現バージョンから新しいバージョンの開発用にコードを別に切り替えることができる （ブランチは枝という意味で、一つのソースコードからいろんなバージョンに枝分かれするという意味合いです）
となります。ソフトウェアを扱うエンジニアにとって履歴の保持やブランチの存在はありがたいもので、日々の開発やアプリ運用時のトラブルに重宝される存在です。
gitはこのようなソースコード管理されたものをリポジトリという単位で扱います。リポジトリと聞いたら、ソースコードの履歴やいろんなブランチが入ったものと捉えていただければと思います。
GitHubのプロジェクトサイト=GitHubのリポジトリと言われることもあります。同等の意味ではないのですがよく利用されるので覚えておくと良いです。
まとめ
今回は5374アプリの公開場所として利用するGithub Pagesの概要と, 5374アプリの設置準備まで行いました。次回はいよいよ5374アプリで利用するデータの作成を行います。
お知らせ
5374アプリ 静岡県富士市版は、現在私個人で作成, 運用しているプロジェクトです。興味のある方がいらっしゃいましたら一緒にやりませんか？
具体的に今困っている/足りないことは以下のとおりです。
- 入力しているごみ情報の正確性
- モバイル向けに電話番号や住所への対応
ごみ情報の正確さが一番大事なのですが、作成した人が見ているだけだと間違えに気がつかないので、どなたかに確認してもらいたいです。
連絡先は個々のコメント, Twitter@hrs_sano645 でお願い致します。お待ちしております！
Social