読者です 読者をやめる 読者になる 読者になる

tanaka's Programming Memo

プログラミングについてのメモ。

GitHubでみんなで開発2016年度版

(リポジトリー管理者向け記事はこちら)

複数メンバーでの開発は、コードの更新タイミングなどで様々なトラブルが発生しますし、完全な自動化はできません。慣れるまでは失敗はつきものですし、面倒に感じる部分もありますが、避けて通ることはできません。基本的な流れを覚えて、失敗しながら使い始めてみましょう。




利用するもの

基本的には、GitHubリポジトリーを操作する公式アプリのGitHub Desktop(f:id:am1tanaka:20170125215602p:plain)を利用します。

最初のプロジェクトをクローンする段階で、インターネット上の GitHub ページを利用します。


Gitはどうしてややこしいのか

「状態の異なるバージョンのファイルががあちこちにあるから」

図1は、GitHubで開発する時のリポジトリーの様子です。
f:id:am1tanaka:20170202134153p:plain
図1 GitHubリポジトリ
(パソコンのイラスト:かわいいフリー素材集 いらすとやより)

①オリジナルリポジトリ

プログラムの本家本元となるリポジトリーです。管理権限があるメンバーが管理していて、管理権限がない人が勝手に内容を書き換えることはできません。

②フォークされたリポジトリ

オリジナルリポジトリーをコピーしたリポジトリーです。あるリポジトリーを、自分のアカウントのGitHubにコピーすることをフォーク(Fork)といいます。フォークしたリポジトリーは、各ユーザーのアカウントのGitHubに複製されたものなので、自由に内容を変更することができます。

プルリクエスト(Pull Request)をすることで、このリポジトリーで行った開発内容を、オリジナルリポジトリーに反映する提案が行えます。

③ローカルのリポジトリ

開発をGitHub上で行うのは不便なので、手元のPCにリポジトリーをダウンロードして操作します。GitHubから手元のPCにリポジトリーをダウンロードすることをクローン(Clone)といいます。

ローカルで変更を加えたら、コミット(Commit)をして、ローカルPCのリポジトリーを更新します。その上で、プッシュ(Push)、GitHub Desktopではシンクロ(Sync)操作をすることで、フォークされたリポジトリーにその変更内容がアップロードされます。

リポジトリーのまとめ

リポジトリーは、オリジナルのもの、各ユーザーのGitHubアカウントにフォークされたもの、ローカルPCにクローンされたものがあります。それぞれが個別に存在するので、混乱のもとになりやすいです。自分が今操作しているリポジトリーがどれなのかを考えながら操作しましょう。

リポジトリーが密接に同期されないことは混乱の元なのですが、そのメリットは絶大です。管理者でなければ、オリジナルのリポジトリーを変更することはできません。フォークしたものは失敗を恐れずに自由に変更してよいということです。失敗したら、自分のリポジトリーを削除して、オリジナルからフォークをし直せばやり直せるのです。この気軽さが Git の素晴らしさです。


リポジトリーのフォーク

みんなで開発する手始めに、オリジナルのリポジトリーを自分のアカウントにフォークしましょう。

  • http://github.com を新しいタブで開いて、自分のアカウントでログインする
  • ログインが完了したWebブラウザーで新しいタブを開いて、開発に参加したいアカウントのリポジトリーを開く
  • 右上の方にある [Fork] ボタンを押す

f:id:am1tanaka:20170125230237p:plain

フォークが完了したら、リポジトリーページの左上を確認してください。[自分のアカウント / リポジトリー名]となっています。その下に小さい文字で[forked from]とあり、続けてオリジナルのリポジトリーへのリンクが記載されています。
f:id:am1tanaka:20170125230641p:plain

自分のアカウントにフォークしたリポジトリーができました。これをローカルPCにクローンして開発をしていきます。


フォークしたリポジトリーをクローンする

手元のPCで開発できるように、フォークしたリポジトリーをクローンします。

  • GitHub Desktop(f:id:am1tanaka:20170125215602p:plain)を起動
  • ログインしていなければ、ログインする(右上の歯車アイコンをクリックして、[Options...]を選択。Accounts にアカウントが表示されていなければ、アカウント名とパスワードを入力してログインする)
  • 左上の[+]をクリック > [Clone]をクリック > [Filter repositories]欄に、クローンしたいリポジトリー名を入力 > 表示されるリポジトリーを選択 > [Clone <プロジェクト名>をクリック

f:id:am1tanaka:20170125231054p:plain

  • 作業したい場所を指定する。特別なことがなければ、そのままの場所で[OK]でよい

以上で、手元のPCにリポジトリーがダウンロードされました。これで開発を行います。


開発作業

開発の流れを体験してみます。README.md ファイルに、自分の学籍番号と名前を追加する作業をしてみます。

ブランチ(Branch)とは

Gitなどのバージョン管理システムは、様々な状態のリポジトリーを扱うためのブランチ(Branch)という機能を持っています。詳しくは専門書やインターネット上の記事に譲りまして、ここでは基本的な方針を述べます。

  • master ブランチは、常に動作する状態を維持する
  • 開発は、一言で書き表せる程度の目標に分割して、そのためのブランチを作成して、そこで行う
  • 開発が完了したら、オリジナルリポジトリーの master ブランチ(dev ブランチなどの他のブランチにプルリクエストするようなルールがあればそれに従う)に、プルリクエストを発行する
  • プルリクエストは、完成しない状態で送ってもよい。開発者とディスカッションをしながら機能の完成をしていくことができる
  • 機能の実装が完了して、プルリクエストがオリジナルに組み込まれた開発用のブランチは、そのまま放置でよい

master ブランチは、いつでもそこから別の開発が始められるように、バグが無い状態を保ちます。そのためには、 master ブランチ上で開発することは得策ではありません。開発用のブランチを作成して、そこで開発をすることで、 master ブランチは常に動作する状態を保てます。

ブランチを作成する

ブランチは、 GitHub Desktop で簡単に作成できます。それでは名前を追加するためのブランチということで[add-name]というブランチを作成します。

  • GitHub Desktopの[Create new branch]ボタンを押す

f:id:am1tanaka:20170202231537p:plain

  • Name欄に[add-name]と入力して、[Create new branch]を押す
  • ブランチ名が[add-name]に切り替わっていればOK

f:id:am1tanaka:20170202231852p:plain

これで作業用フォルダーの中身が add-name ブランチに切り替わりました。

プロジェクトを変更する

開発用のブランチ[add-name]に切り替わりましたので、作業を行います。

  • GitHub Desktop で、作業したいリポジトリーをクリックして選択
  • 右上の[Atom]ボタンを押す(Atom以外のエディターを利用する場合は、クローンしたフォルダーの README.md をファイルから開く)

f:id:am1tanaka:20170202235007p:plain

  • 適当な場所に、学籍番号と氏名を入力
# yoketoru-unity-2016
2016年度版よけとるUnity for Unity5.5

# メンバーリスト
- 00 たなかゆう
  • 書き込みが終わったら、上書き保存する

以上でこの作業は完了です。次の手順に進みます。

コミット(Commit)とプッシュ(Push/Publish/Sync)

ファイルなどを変更したら、コミットをしてリポジトリーに変更内容を記録します。

  • GitHub Desktop に切り替える
  • (1)[Changes]を押す > (2)[Summary]欄に変更内容を書く(「学籍番号と名前を追加」など) > (3)[Commit to add-name]を押す > (4)[Publish]を押す(2回目以降は[Sync])

f:id:am1tanaka:20170202233113p:plain

以上で、ローカルPCのリポジトリーに変更が記録され、その内容がフォークしたリポジトリーに反映されます。ここまでをワンセットで操作するとよいでしょう。

コミットをすると、その後、いつでもその状態に戻すことができます。コミットは小まめに行うようにしましょう。

ブランチの動作を確認する

コミットが完了したら、ブランチを切り替えることができます。 master ブランチに切り替えて、 README.md がどうなるか確認してみましょう。

  • GitHub Desktop の [add-name]の部分をクリックして、[Default branch]の[master]に切り替える

f:id:am1tanaka:20170202231852p:plain

  • Atom エディターなどで、 README.md を確認する

以下のように、先ほどの変更が消えています。

# yoketoru-unity-2016
2016年度版よけとるUnity for Unity5.5

# メンバーリスト

同様の操作で add-name ブランチに戻してから README.md を確認してください。学籍番号と名前が復活します。ブランチごとに、違う状態が保持されているのです。

ブランチの下に表示される[Other branches]欄には、オリジナルのリポジトリーが表示されています。これを選べば、オリジナルの状態を参照することもできます。
f:id:am1tanaka:20170202234203p:plain

コミットしていない変更があるとブランチは切り替えられません。ブランチを切り替える前にはコミットするようにしてください。

プルリクエスト(Pull Request)

変更が完了したら、オリジナルのリポジトリーに反映してもらうためにプルリクエストをします。

  • GitHub Desktop の右上の[Pull request]を押す

f:id:am1tanaka:20170202234904p:plain

  • 必要であればタイトルを変更。Descriptionに簡単な修正内容を記載。テストや確認点があれば追記して、[Send pull request]を押す

f:id:am1tanaka:20170202235406p:plain

完了したら、[Pull request created]と表示されます。その下の[View it on GitHub]をクリックすると、Webブラウザーが開いて、オリジナルリポジトリーに送られたプルリクエストを見ることができます。

f:id:am1tanaka:20170202235839p:plain

このページで管理者と相談をしたり、駄目な場所があれば指摘されるので、それを持ち帰って改変します。

変更した内容をコミットしてSyncすると、プルリクエストにも自動的に反映します。一度プルリクエストを発行したら、それ以降は、普通に開発をして、コミットしてSyncして開発を進めればよいのです。

完了

管理者がプルリクエストをオリジナルのリポジトリーにマージ(Merge)して組み込まれれば作業完了です。これを繰り返していくことで、複数人数で、一つのプロジェクトを開発していくことができます。


次の開発をする

作業者が自分だけであればよいのですが、複数いる場合は、オリジナルのリポジトリーには他の人の変更も加わっていきます。その変更をローカルのリポジトリーに反映させる方法です。

  • ローカルブランチを[Default branch]の[master]に切り替える
  • [Compere]をクリックして、[Other branches]のオリジナルリポジトリーを選択

f:id:am1tanaka:20170203000918p:plain

  • [Update from <オリジナルのアカウント>/master]をクリック

f:id:am1tanaka:20170203001047p:plain

以上で、オリジナルのリポジトリーの master ブランチの状態を、ローカルリポジトリーの master に反映させました。 README.md を見れば、自分が行っていない変更があれば、それが加わっていることが確認できます。

あとは、また開発用のブランチを新しく作成して、そこで開発→コミット→Sync→プルリクエスト のサイクルで開発してください。


まとめ

以上で、開発者として開発に参加する流れは最低限押さえました。簡単なプロジェクトで作成をしてみましょう。

管理者を引き受ける場合は、ここでやったものの他に、プルリクエストの受け入れと、別々の人たちが同じ場所を変更した時に発生する衝突=コンフリクト(Conflict)の解決が必要になりますが、それはまた別の機会に。

以下、開発時のTipsをおさらいしておきます。

  • オリジナルのリポジトリーから、自分のアカウントにリポジトリーをフォークして開発を開始
  • 自分のアカウントから、開発するPC上にリポジトリをクローンする
  • master ブランチ上では直接開発しない
  • 開発時には、一言で表せる程度の規模の目標を立てて、ブランチを作成
  • コミットとSyncは小まめに
  • プルリクエストは早めに行ってよい
  • 完了したら、オリジナルリポジトリーの管理者によって、プルリクエストがオリジナルリポジトリーにマージされる
  • 最新状態は、 Compare からオリジナルのリポジトリーを選んで、 Update する

困った時は

手元のリポジトリーを削除して、フォークやクローンし直そう。

ブランチの単位は

以下のように、一言で書き表せる程度にしましょう。

  • 得点アイテムを追加する
  • 敵の弾を追加する
  • プレイヤーのバグを直す

コミットはもっと小まめにしましょう。

リポジトリー管理者向けの記事を、こちらにアップしました。


GitHub Pagesのマークダウンにテーマを設定する

はじめに

GitHubの機能の一つである GitHub Pages を使えば、無料で自分のWebサイトや作品のWebサイトをインターネット上で公開することができます。マークダウンで書かれたファイルは自動的にHTMLに変換して表示します。とても便利ですが、デフォルトのスタイルはものすごく質素です(図1)。

f:id:am1tanaka:20170201180641p:plain:h200
(図1)デフォルトのGitHub Pages

GitHub Pages は Jekyll というツールを使ってマークダウンファイルをHTMLに変換していて、あらかじめいくつかのテーマが組み込まれています。それを適用すれば見た目を改善することができます。




方針

方針は以下の2点です。

  • 作品を作成しているリポジトリーとWebページを共存させる(Webページ専用のリポジトリーは作らない)
  • GitHub Page用のデータは master ブランチの docs フォルダーに入れる



前提

以下の環境を前提とします。



GitHub Pages用のフォルダーの作成

プロジェクトフォルダーに docs フォルダーを作成して、GitHubにプッシュします。

  • GitHub Desktop(f:id:am1tanaka:20170125215602p:plain) を起動
  • 作業したいリポジトリーを右クリックして、[Show in Explorer]を選択してエクスプローラーで開く
    • 作業手順を確認したいだけで、作品がない場合は、GitHub Desktop で新しいプロジェクトを作成して、上記の作業をしてください
  • 開いたフォルダーに docs という名前のフォルダーを新規に作成
  • README.md をコピーして、 docs フォルダー内に貼り付ける
  • GitHub Desktop に切り替える
  • 表示を[Changes]に変更
  • [Summary]欄に[docsフォルダーを追加]などのように入力
  • [Commit to master]を押す
  • 右上の[Sync]を押す

以上で、 GitHub Pages 用のフォルダーができました。


GitHubでページの設定

フォルダーができたので、GitHub Pagesをそのフォルダーに割り当てます。

f:id:am1tanaka:20170201182344p:plain
図3 Settings

  • 画面を下にスクロールさせて [GitHub Pages]の欄を表示
  • Source 欄のコンボボックスをクリック > [master branch /docs folder]を選択 > [Save]ボタンを押す(図4)

f:id:am1tanaka:20170201182552p:plain
図4 GitHub Pagesを docs フォルダーに設定

GitHub Pages の設定をした欄の下に表示するための URL が表示される(図5)ので、そこをクリックしてください。ビルドが完了し次第(1分程度かかる可能性があります)、 README.md が成形されて表示されます(図6)。
f:id:am1tanaka:20170201183804p:plain
図5 作品ページのURL

f:id:am1tanaka:20170201211851p:plain
図6 最初のGitHub Pages


テーマを適用

簡素な画面に、組み込みテーマを適用します。

f:id:am1tanaka:20170201212255p:plain
図7 Change Themeボタン

  • 採用したテーマをクリックする
    • クリックすると、そのテーマでの描画イメージがページの下に表示されるので、確認してください
  • 画面右の[Select Theme]をクリックする(図8)

f:id:am1tanaka:20170201213024p:plain
図8 Select Theme

  • デフォルトのマークダウンが表示されるので、ひとまず画面下の[Commit Changes]をクリック(図9)

f:id:am1tanaka:20170201213239p:plain
図9 Commit Changes

以上で適用完了です。作品の GitHub Pages を再読み込みしてください。マークダウンの使い方が記されたページが、選択したテーマで表示されます(図10)。
f:id:am1tanaka:20170201213449p:plain
図10 テーマが適用されたページ


ページ内容を構築する

テーマの設定ができたので、あとはページの内容を作品のものに書き換えます。

ページに必要な画像や素材の準備

作品の紹介に使う画像ファイルや、UnityのWebGLをビルドしたフォルダーを、 docs フォルダーにコピーします。たとえば、以下のような構成にします。

  • docs/images フォルダー内に img0.png と img1.png
  • docs/webgl フォルダー内に Unity でビルドした WebGL のプロジェクト

ページを作成

作品ページをマークダウンで作成します。

  • GitHub Desktop に切り替える
  • 画面右上の[Sync]を押して、GitHub の更新を取得
  • Atom などのエディターで、作品フォルダー内の docs/README.md を開く
  • あらかじめ入力されているマークダウンの例は不要なので削除
  • 作品の紹介マークダウンを入力する。以下、例
# 正月休み課題「鶏Bomb2017」
ver 170108
<p>
<a href="webgl/index.html" target="_blank">
<img src="images/img0.png" height="240px" alt="タイトル画面">
<img src="images/img1.png" height="240px" alt="ゲーム画面">
<p>ゲームで遊ぶ</p>
</a>
</p>

# ルール
画面の上から卵が降ってきます。これを爆風で孵化させてください。

卵が下に落ちて割れたらゲームオーバーです。

# 操作方法
- 画面をタップした場所に爆弾が置かれます
- 爆弾は一定時間が経過すると爆発します
- 爆風で卵を孵してください
- 爆風に触れた爆弾も、爆発します

# 高得点のヒント
- 卵は画面下で孵化させるほど高得点です
- 一つの爆風で、複数の卵を孵すと得点が増えます
- 誘爆させた爆風で孵化させると、得点が増えます

# 既知のバグ
まだ開発中のため、バグがあります。

バグの確認や報告は[こちら](https://github.com/tanakaedu/ToriBomb2017/issues)へどうぞ。

---
Copyright(C)2017 YuTanaka
  • 上書き保存する
  • GitHub Desktop に切り替える
  • [Changes]に切り替えて、 [Summary]に「ドキュメントの作成」などと入力して[Commit to master]を押す
  • 右上の[Sync]を押す

以上で完了です。作品ページを再読み込みしてください。適用したテーマで、作品ページが表示されるようになります。変更が反映するまでに1分程度かかる可能性がありますので、変更が確認できない場合は、しばらく待ってから再読み込みをしてみてください。


ページの上段の変更

一度設定したレイアウトは、 [Settings]メニューから別のテーマを選択すれば切り替えることができます。切り替わるのに1分程度かかる場合があるので、設定したらしばらく待ってください。

ページの先頭は、リポジトリー名とリポジトリーの Description が自動的に挿入されます(図11)。
f:id:am1tanaka:20170201220508p:plain
図11 ページの先頭部分

Description を変更したい場合は、以下のようにします。

  • リポジトリーページを開いて、 Description の右の [Edit]をクリック

f:id:am1tanaka:20170201220955p:plain

  • テキストボックスの内容を変更して、右の[Save]を押す

以上だけでは、ページは更新されないようです。再構築をするには、Settingsから一度別のテーマを設定してから、元のテーマに設定しなおしてください。


まとめ

以上で、デフォルトの状態よりも見た目がよいページにすることができます。似合うテーマを色々と試してみてください。

以下、作例です。


ここでのやり方は、GitHubに予め用意された定型のテーマやレイアウトでの利用にとどまります。自由に見た目を変更したい場合は、 Jekyll というWebサイト生成ツールを利用します。英語ですが、手順が紹介されているページがこちらにあります。興味があれば、調べてみてください。


Hexo3について私見

ある程度、使い方を把握しました。結論としては、肌に合わないので利用は見合わせることにします。

以下、問題に感じた点です。

アセットフォルダーの仕様が整理されていない

アセットデータへのパスの指定方法が整理されていません。結果的に、Markdownで普通に画像を表示させることができません。{% %}を使った特殊な表記で解決することは可能ですが、基本中の基本の機能なだけに、他にやり方はなかったのかと思います。


加工しないページの指定方法が不明

source フォルダーに入っているマークダウンや HTML は、強制的にテーマの形式に変更されます。そのため、Unity で出力した WebGL 用のページをそのまま表示するなどができません。実行もできません。これは最初の問題と関連していて、 JavaScript などへのリンクが切れてしまっているためと思われます。

デプロイを個別にやるとか、あるいは何らかの書き方があるかもしれませんが、そもそも強制的にすべてのページをビルドするという仕様が乱暴に感じました。


まとめ

いったんHexoはあきらめて、Jekyll を改めて調査します。Jekyll も同様な場合は戻ってくるかも知れませんが、ひとまず現段階では Hexo の採用は見送ります。

HexoのインストールとGitHub Pageへデプロイ

GitHubで公開しているアプリなど用のWebページを、Hexoで作成する手順です。Webページとアプリでリポジトリを共有できるように、Hexoは gh-pages ブランチにデプロイします。



前提

  • VirtualBox にインストールされている Ubuntu で作業する前提です。
  • VitualBox と Ubuntu はインストール済みとします。



Ubuntuの起動

まずは、 VirtualBoxUbuntu を起動します。

  • VirtualBoxを起動
  • Ubuntuのプロジェクトを選択して、[起動]を押す

以上で、起動するまで待ちます。

画面サイズが大きくて不便な場合は、以下を先にやっておきます。

VirtualBoxのUbuntuの画面サイズを調整する - tanaka's Programming Memo


nodeのインストール

  • Ubuntu の画面左上の[コンピュータを検索]アイコンをクリック
  • [te]ぐらいまで入力すると[端末]が見つかるので、クリック

以下を参考に、nodeの最新版を Ubuntu にインストールします。
Ubuntuに最新のNode.jsを難なくインストールする - Qiita

apt-getなど、処理が開始するまで数分かかることがあるので、コマンドを入力して、エラーが表示されていなければ、動きがあるまで焦らず待ってください。

最後、以下で不要なパッケージを削除します。

sudo apt autoremove

グローバル環境を以下で更新しておきます。

sudo npm update -g

以上ができたら、あらためて node -v と npm -v を実行して、バージョンが表示されることを確認して完了です。


Hexoのインストール

以下を参考に、インストールします。
Hexo

sudo npm install hexo-cli -g



Gitのインストール

Gitが必要なので、以下でインストールします。

sudo apt-get install git-core

インストールが完了したら、 Git にデフォルトのメールアドレスと名前の設定をしますので、以下のように端末で実行します。以下の例の「メールアドレス」の部分に連絡用のメールアドレス、「EntryName」のところにGitにコミットするときに表示する名前に差し替えます。

git config --global user.email "メールアドレス"
git config --global user.name "EntryName"



SSHGitHubに接続できるようにする

安全な通信をするために、秘密鍵と公開鍵を作成します。ユーザーディレクトリ内の .ssh フォルダー内に作成しますが、最初はフォルダーが無いので、ターミナルから以下で作成しておきます。

mkdir ~/.ssh

途中で必要になるファイル内容をクリップボードにコピーする xsel というプログラムを以下でインストールしておきます。

sudo apt-get install xsel 

以下を参考に、SSHGitHubに接続できるように設定してください。そのままで成功しない部分があるので、下の注意点も確認してください。

gitHubでssh接続する手順~公開鍵・秘密鍵の生成から~ - Qiita

  • パスフレーズなどは、説明通りで省略してかまわない
  • キーの生成が完了したら、UbuntuFirefox を起動して、指定のURLを入力して、GitHubを開いて、ログイン
  • 画面右上のボタンの表示は、[Add SSH key]から[New SSH key]に変更されているので、[New SSH key]を押す
  • 公開鍵名は[dat-ubuntu]など
  • ターミナルで、以下を実行して、公開鍵の文字列をクリップボードにコピー
cat ./id_rsa.pub | xsel --clipboard --input
  • Firefoxに戻して、[Key]欄に貼り付ける
  • 左下の [Add SSH key] ボタンを押す

以上で完了です。ターミナルで以下を実行して、 GitHub への接続を試みます。

ssh -T git@github.com

最初の一回目は警告が表示されるので、[yes]を入力して[Enter]キーを押して確認します。

「Hi <GitHubのアカウント名>」が表示されれば成功です。これ以降は、SSHで自分のアカウントに接続ができるようになります。


ブログを作成する

公式ページの Get Started に沿って、簡単なブログを作成してみます。

  • 以下で、ブログ用のフォルダーを作成して、その中に移動する
cd ~
mkdir blogs
cd blogs
  • 以下で、ブログを作成して、その中に入る
hexo init test-blog
cd test-blog
  • 初回は、必要なパッケージのインストールが必要なので、以下を実行
npm install
npm install hexo-deployer-git --save
  • ブログサーバーを起動する。WARNINGが出ても気にしなくてよい
hexo server

以上で、hexoのブログサーバーが起動します。UbuntuFirefox で、 http://localhost:4000 を開いて、ブログページを確認してください。


GitHub Pagesへの導入

GitHubのアップロード先のリポジトリーを準備

アップロード用のリポジトリーがなければ以下の手順で作成します。すでにある場合は、そのページを UbuntuFirefox で開いてリポジトリーのSSH文字列のコピーへ進みます。

  • UbuntuFirefoxGitHub を開いて、ログイン
  • 右上の[+]アイコンをクリックして、[New repository]を選択してリポジトリーを作成
  • Repository nameに「hexo-test」などを入力
  • [Initialize this repository with a README]にチェックを入れる
  • あとはそのままで[Create repository]を押す

リポジトリーのSSH文字列のコピー

アップロード先の設定のために、以下の操作でこのリポジトリーを指定する文字列をコピーしておきます。

  • UbuntuFirefox上で、作成したリポジトリーページの右にある[Clone or download]ボタンを押す
  • 右に表示される[Use SSH]のリンクをクリック
  • [git@github.com:・・・]と表示されるテキストボックスの右のコピーアイコンをクリック

何も起きませんが、これでコピーが完了しているので、続けて以下の作業に進んでください。

ブログの設定

ブログの情報や、URL、GitHub Pagesに Hexo で生成したブログをアップロードするための情報など、各種情報は、_config.yml というファイルに設定します。

ブログの基本設定

まずはブログの基本情報を編集します。

  • Ubuntu の左上の[コンピューターを検索]アイコンをクリック
  • [te]が入力されていると、[テキストエディター]も検索されるので、それをクリックして起動
  • [開く]を押して、[他のドキュメント]>[blogs]>[test-blog]>[_config.yml]を選択して開く
  • 以下の設定を自分の環境の合わせて変更する
    • title ブログのタイトル
    • subtitle ブログにサブタイトルがあれば入力。省略可
    • description ブログの説明。省略可
    • author ブログの著者名。自分の名前やハンドル名に変更
    • language 日本語の場合、 ja としておく
    • timezone 時差の設定。日本だと Asia/Tokyo にする

以下、例です。

title: Hexoの練習
subtitle:
description:
author: たなかゆう
language: ja
timezone: Asia/Tokyo
公開先URLの設定

公開先のURLを設定します。

  • [# URL]から始まる行(16行目付近)を探して、その下の url と root を、公開先の URL とパスに変更。例えば、 tanakaedu という GitHub アカウントで、 hexo-test というリポジトリーで公開する場合は以下の通り
url: https://tanakaedu.github.io/hexo-test
root: /hexo-test/
デプロイ設定

続けて、以下を参考に GitHub への公開設定をします。
Deployment | Hexo

  • [# Deployment]という行を探して(一番下)、GitHubの情報を入力
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: (ここに貼り付けをして、GitHubでコピーした文字列を張り付ける。例) git@github.com:アカウント/リポジトリー名.git)
  branch: gh-pages
cd ~/blogs/test-blog
hexo deploy -g

以上で、「INFO Deploy done: git」と表示されれば、アップロード完了です。GitHubにアップロードされましたので、確認は Ubuntu でも、ホストPCでもどちらでも可能です。

https://<アカウント名>.github.io/hexo-test

にアクセスします。アカウント名のところは、自分のアカウント名に差し替えてください。たとえば以下のようなURLになります。

https://tanakaedu.github.io/hexo-test

Hexo のインストール後に localhost:4000 で確認したのと同じページが表示されていれば成功です。


まとめ

以上で設定完了です。これ以降は、 Hexo の使い方に従ってデザインを導入して、記事を作成したら hexo deploy -g でデプロイすればページが更新されます。


VirtualBoxのUbuntuの画面サイズを調整する

画面サイズを変更

画面の解像度が低いPCで動かす場合、画面が収まらないと操作が不便なので、画面サイズを調整します。

高さ720pxのモニターで表示できるようにします。

以下を参考に解像度の設定をインストールします。

virtualbox 上の ubuntu の解像度 ( 画面サイズ ) 変更方法 - Opensourcetechブログ(ZeusITCamp裏BLOG)

再起動が完了したら、左の[CD]のイメージを右クリックして、[取り出し]で取り出します。その後、以下で解像度を変更します。

  • 画面左下の[設定]ボタンを押す
  • [ディスプレイ]をクリック
  • 解像度欄を適したサイズに変更。高さ720pxの場合、1280x720(16:9)か、800x600(4:3)
  • [適用]を押して、[この設定のままにする]を押す

[表示]メニューから[フルスクリーンモード]を選択すると、全画面をUbuntuで利用できます。

Laravelにfont-awesomeを組み込む

デフォルトで使えたと思ったら勘違いだった模様なので、Sass版を組み込みます。

  • Font Awesome, the iconic font and CSS toolkit を開く
  • [Download]を押して、パッケージをダウンロード
  • とりあえず[No thanks, just download Font Awesome]の方を押す
  • zipファイルのダウンロードが完了したら、展開する
  • 展開したフォルダー内の font-awesome-x.x.x フォルダーを、Laravelプロジェクトの resources/assets/sass フォルダー内にコピー
  • font-awesome-x.x.xフォルダー内にある fonts フォルダーをコピーして、 publicフォルダー内に貼り付ける
  • gulpfile.js をエディターで開く
  • elixirのmix.sass(・・・)の部分を以下に書き換えて、font-awesomeのscssを対象に加える(font-awesome-4.7.0 を利用するときの例。バージョンに応じて書き換えるか、フォルダー名からバージョンを外してください)
    mix.sass(['app.scss', 'font-awesome-4.7.0/scss/font-awesome.scss'])

以上で、 font-awesome のアイコンが利用できるようになります。


VirtualBoxとUbuntuのセットアップ

VirtualBoxWindowsにインストールして、Ubuntu16.04をOSとして利用する手順です。




VirtualBoxのインストール

管理者でログインして、まずはVirtualBoxをインストールします。

  • Oracle VM VirtualBoxブラウザーで開く
  • [Download VirtualBox 5.1] をクリック(5.1は、2017/1/8時点のバージョン)
  • [VirtualBox 5.x.x platform packages.] にある [Windows hosts]をクリック
  • 実行ファイルのダウンロードが始まるので、実行するか、保存してから実行する
  • インストールウィンドウが表示されるので、設定はそのままでインストールを開始する([Next]>[Next]>[Next]>[Yes]>[Install])
  • 途中で、Windowsセキュリティが何度か表示されるので、[インストール]を選択
  • [Finish]を押して、VirtualBoxを起動する

以上で、プラットフォームパッケージがインストールされて、VirtualBoxが起動します。続けて、追加パックもインストールします。

  • Downloads – Oracle VM VirtualBox のページに戻る
  • [VirtualBox 5.x.x Oracle VM VirtualBox Extension Pack]の右の[All supported platforms]をクリックして保存する
  • VirtualBoxの[ファイル]メニューから[環境設定]を選択
  • [機能拡張]をクリックして、右の水色の四角に、黄色の三角のアイコンをクリック
  • デスクトップの[VirtualBox]フォルダーを開いて、[Oracle_VM_VirtualBox_Extension_Pack-5.1.12-112440.vbox-extpack]をクリックして、[開く]を押す
  • VirtualBox機能拡張パッケージをインストールします。」というウィンドウが表示されるので、[インストール]を押す
  • ライセンスを最後までスクロールさせて[同意します]を押す
  • 変更を許可するかを質問されたら、[はい]で進める
  • 完了したら[OK]を押す

以上で、VirtualBoxのインストールは完了です。

ここから先は、実際に Ubuntu をするユーザーに切り替えてから、作業をしてください。


vboxファイルがある場合のUbuntuのインストール

予めインストール済みのvboxファイルがある場合は、それをコピーしてVirtualBoxに読み込ませるだけで利用できるようになります。

vboxファイルがない場合はこちら

  • インストールする vbox ファイルが入っているフォルダーを指示された場所からコピーする
  • マイドキュメントのフォルダー内に、コピーしたフォルダーを貼り付ける
  • VirtualBoxを起動する
  • [仮想マシン]メニューから[追加]を選択
  • コピーしたマイドキュメント内のフォルダーを開いて、 [Ubuntu.vbox] などの vbox ファイルを選択

以上で完了です。仮想PCを起動して、指示されたIDとパスワードでログインしてください。

ユーザー名やコンピューター名とパスワードを変更する

そのままだと、みんな同じ名前やパスワードになるので、以下で変更します。

  • Ubuntuが起動したら、左下の歯車マークをクリック
  • [システム]の[ユーザーアカウント]をクリック
  • ウィンドウの右側のユーザー名をクリックして選択
  • コンピューターの名前に変更する
  • パスワード欄の右の「●●●●●」をクリックして選択
  • コンピューターにログインする時のパスワードとPC名を続けて入力



ターミナルを表示

基本的にはコマンド入力で操作したいので、ターミナルの起動方法です。

  • 画面左上の[コンピューターを検索]アイコンをクリック
  • [コンピューターを検索]欄に[ter]と入力する
  • [端末]が表示されるのでクリック

以上で、コマンドプロンプトが表示されるので、各種操作をします。


テキストファイルの操作

linuxでは標準の vi エディターを端末から使うこともできますが、慣れない場合は gedit を利用するとよいでしょう。

  • コンピュータを検索]アイコンをクリック
  • [text]を入力
  • [テキストエディター]が見つかるので、クリック

これでテキストエディターが起動します。普通のメモ帳のように使えます。


CUIGUIの切り替え

UbuntuでCUI/GUIログインの切り替え方法 - 日常 にありました。

  • [Ctrl]+[Alt]+[F1]キーでCUIに切り替え
  • [Alt]+[F7]キーでGUIに切り替え

上記のCUIだと、日本語が化けるので、端末から操作したほうがよいでしょう。


シャットダウン

右上の小さい歯車マークをクリックして、シャットダウンを選択します。

あるいは、端末から以下を実行します。

sudo shutdown -h now

一分ほど待つとUbuntuのウィンドウが閉じます。その後、VirtualBoxマネージャーを閉じます。


再起動

端末で以下を実行します。

sudo shutdown -r now



Ubuntuをダウンロードしてインストール

vboxがない場合は、自分で必要なファイルをダウンロードして、VirtualBoxにインストールします。

管理者で作業をしていたら、ここでアカウントを切り替えて、利用するユーザーに変更します。

OS には Linuxディストリビューションの一つである Ubuntu をインストールします。情報が集めやすいディストリビューションです。

仮想ハードディスクイメージのダウンロード | Ubuntu Japanese Team を参考に、VirtualBoxに、Ubuntuの日本語パッケージをインストールします。

ファイルが大きいので、ダウンロードが完了するまで10分以上かかる場合があります。しばらく待ちます。

ダウンロードが完了したら、以下でファイルが壊れていないかを確認できます。ファイルが壊れていなければこの手順は飛ばしても構いません。

  • スタートメニューを開いて、[プログラムとファイルの検索]に[cmd]と入力して、検索されるコマンドプロンプトを起動
  • コマンドプロンプトに以下を入力すると、 MD5のメッセージダイジェストが表示される(以下は、ubuntu-ja-16.04 の例。新しいものが出てたら、ファイル名を差し替えること)
certutil -hashfile %USERPROFILE%\downloads\ubuntu-ja-16.04-desktop-amd64.iso MD5
  • 文字列が表示されるまで、十秒ほど待つ
  • ダウンロードしたリンクの右に書いてある md5sum: の右の文字列と、前の手順で表示したメッセージダイジェストが同じであれば、ファイルが壊れていないことが確認できる

続いて、VirtualBoxUbuntu をインストールします。

  • VirtualBoxを起動
  • [新規]ボタンを押す
  • 名前に[Ubuntu]を入力する。タイプとバージョンはそれぞれ[Linux]、[Ubuntu(64-bit)]が選択されるので[次へ]
    • バージョンに[Ubuntu(64-bit)]が見つからない場合、BIOSで CPU の Virtualization Technology を Enable にする必要があります。動作させるPCを再起動して、メーカーロゴが表示されているときに指示に従ったキーを押してBIOS設定を起動してください。PCごとに設定方法は異なるので、PCに応じた情報を検索してください
  • モリーサイズは必要なサイズ(1024MB)で[次へ](メインメモリに余裕があるなら2048程度にしてもよいでしょう)
  • ハードディスクは、[仮想ハードディスクを作成する]を選択して[作成]を押す
  • VDIのまま[次へ]を選択
  • 物理ハードディスクにあるストレージは[可変サイズ]にして[次へ]
  • ファイルの場所はそのままで、サイズは[16GB]にして[作成]を押す

以上で完了です。作成した Ubuntu を選択して、[起動]を押して、OSのインストールを行います。

  • VirtualBoxで、設定した Ubuntu を選択して[起動]を押す
  • [起動ハードディスクを選択]が表示されるので、コンボボックスの右のフォルダーアイコンを押して、先ほどダウンロードした[ubuntu-ja-16.04-desktop-amd64.iso]を選択して、[起動]ボタンを押す
  • 画面上に表示される[キーボードの自動キャプチャー・・・]のウィンドウは、右端の閉じるボタンを押して閉じてよい

起動が終わるまで待ちます。起動したら以下でインストールします。

  • [Ubuntuをインストール]をクリック
  • [インストール中にアップデートをダウンロードする]にチェックを入れて、[続ける]を押す
  • [ディスクを削除してUbuntuをインストール]を選択して、[インストール]を押す
  • ディスクに書き込むかの質問が表示されたら[はい]で先に進める
  • どこに住んでいますか?]は、[Tokyo]のまま[続ける]を押す
  • [キーボードレイアウト]では日本語が選ばれているはずなので、そのまま[続ける]を押す
  • 以下を設定
    • あなたの名前にPCの名前を入力
    • コンピューターの名前は、自動的に入力されたものをそのまま利用
    • ユーザーの名前とパスワードには、ログイン時のものを設定する
    • 自動的にログインするにチェック
  • 以上できたら、[続ける]を押す

インストールが始まるので完了するまで待ちます。完了したら、[今すぐ再起動]を押して待ちます。

動きが止まった場合は、[仮想マシン]メニューから[リセット]を選んで、もう一度起動しなおします。

以上で[Ubuntuデスクトップ]が表示されて、左にメニューが並べばインストール完了です。


32bitしかない場合

PCを再起動して、BIOS設定を表示。以下を設定します。

  • Advanced > CPU Configuration > Intel(R) VirtualizationTechnology > [Enabled]

上記は一例で、メーカーや機種によってメニューの内容は異なります。[CPU]と[Virtualization]のキーワードでそれらしい設定を見つけて設定してください。

設定後は、[Save]などで保存をしてから、[Restart]などを選択してください。


今後

このあと、Hexo、Heroku、TensorFlowなどを使えるようにしていく予定です。