MGitを使ってスマホからGitHub Pagesの記事を編集する。

はじめに

各種実験用に人知れずGitHub Pages上で運営中の「panda大学習帳外伝」ですが、ページ数が増えてきたので、トップページにあるYouTubeのpandanote.infoチャンネルの動画紹介を別のページに切り出して、トップページ及びWebサイトとしての体裁を整えることにしました。

本Webサイトの記事のうち、数式以外の文章の編集はスマホを使って電車の車内等で行っていることが多いので、GitHub Pagesでも同様のことができないかと思い Google Playを探し回ったところ、MGitを使えばAndroidのスマホからでもgitでのリポジトリの操作やファイルの編集に必要な操作ができそうなことがわかったので、使ってみることにしました。

そこで、この記事ではMGitのセットアップとMGitを使ったテキストファイルの編集及びリポジトリの操作の方法について書いていきます。

MGitのセットアップ

インストール

MGitはGoogle Playからダウンロード及びインストールできます。

インストールするとスマホの画面上に下図の赤矢印のようにアイコンが表示されます。

GitHubにアクセスするための設定

スマホの画面上のアイコンをタップするとMGitが起動しますので、以下の手順で設定します。

以下のポップアップウィンドウが表示されたら、「許可」をタップします。なお、「許可しない」をタップした際の動作については確認していません。
MGitのメイン画面の「縦の三点リーダー」(︙)ボタンをタップすると、以下の画面になりますので、「設定」(下図の赤矢印)をタップします。
MGitの「設定」画面が表示されますので、「ユーザー名」(下図の赤矢印(a))及び「ユーザーEメール」(下図の赤矢印(b))を入力します。
「SSHキー」(下図の赤矢印)をタップします。
「プライベートキーを管理」画面の「縦の三点リーダー」(︙)ボタンをタップすると、以下の画面になりますので、「キーを生成」を(下図の赤矢印)タップします。
以下のポップアップが表示されますので、キーの名称(下図の赤矢印(a))を入力後、「キーの生成」(下図の赤矢印(b))をタップします。
「プライベートキーを管理」画面が再び表示され、画面中に作成されたキーの名前(下図の赤矢印)が表示されますので、それをタップします。
公開鍵が表示されたことを確認し、「縦の三点リーダー」(︙)ボタンをタップすると、以下の画面になりますので、「すべてのファイルをコピー」(下図の赤矢印)をタップし、公開鍵をクリップボードへコピーします。
GitHubに自分のアカウントでサインインして、メニューから「Settings」→「SSH and GPG keys」を選択し、クリップボードにコピーした公開鍵を登録します。登録できたらGitHubからサインアウトします。

ここまでの手順でMGitからGitHubのリポジトリへアクセスするための設定は完了です。(｀・ω・´)

GitHubのリポジトリからのクローン

MGitによるGitHubのリポジトリからのクローンは以下の手順で行います。

MGitのメイン画面の「縦の三点リーダー」(︙)ボタンをタップすると、以下の画面になりますので、「クローン」(下図の赤矢印)をタップします。
以下の画面が表示されますので、「リポジトリをクローン」の「リモートURL」(下図の赤矢印(a))を入力し、「再帰的に複製します」(下図の赤矢印(b))にチェックを入れます。なお、「リモートURL」には”git@github.com”で始まるURLを入力します。また、「ローカルパス」はお好みで修正します。入力が終わったら、「クローン」(下図の赤矢印(c))をタップします。
リポジトリのクローンが実行されます。クローンが完了するとローカルのリポジトリがスマホ上に作成され、それがMGitのメイン画面に表示されます(下図)。

MGitを使ったテキストファイルの編集とリモートのリポジトリへのpush

上記のリポジトリにはindex.mdというmarkdown形式で記述されたファイルがあります。

リポジトリがクローンできたので、次はこれを編集してローカルリポジトリへコミット後、リモートのリポジトリへpushしてみます。

index.mdの編集及びローカルリポジトリへのコミット並びにリモートのリポジトリへのpushは以下の手順で行うことができます。

gitを使う上では割と基本的なことだとは思いますが、本Webサイトの管理人たるpandaはコミットの後にpushするのをよく忘れるので、自分へのメモ書きも兼ねて書くことにします。

MGitのメイン画面でリポジトリ名をタップします。
すると、ファイルリストが表示されますので、”index.md”をタップします。すると以下のような画面に切り替わり、”index.md”のファイルの中身が表示されます。なお、この段階ではまだ編集はできません。
手順2の画面の「縦の三点リーダー」(︙)ボタンをタップすると以下の画面になりますので、「編集」(下図の赤矢印)をタップします。すると、編集ができるようになります。
編集内容はとりあえずは何でもよいのですが、下図の赤枠のような内容を追加してみます。
編集が終わったら、「縦の三点リーダー」(︙)ボタンをタップすると以下の画面になりますので、「保存」(下図の赤矢印)をタップします。すると、編集した内容が保存されます。
次に、ローカルリポジトリへ編集内容をコミットします。「縦の三点リーダー」(︙)ボタンをタップすると以下の画面になりますので、「ドロワーの切り替え」(下図の赤矢印)をタップします。
以下のメニューが表示されますので、「コミット」(下図の赤矢印)をタップします。
以下のポップアップが表示されますので、下図の赤矢印(a)にコミット時のコメントを入力し、「変更を自動でステージに追加」のチェックボックスにチェックを入れます。入力内容を確認後、「コミット」(下図の赤矢印(c))をタップします。
最後にローカルリポジトリにコミットした編集内容をリモート(GitHub上)のリポジトリにpushします。画面で「縦の三点リーダー」(︙)ボタンをタップすると手順6の画面になりますので、「ドロワーの切り替え」(手順6の画面の赤矢印)をタップします。
以下のメニューが表示されますので、「プッシュ」(下図の赤矢印)をタップします。
以下のポップアップが表示されますので、「全てプッシュしますか?」(下図の赤矢印(a))にチェックを入れ、pushしたいブランチ名(下図の赤矢印(b))をタップします。
pushに成功すると、以下のようなポップアップが表示されますので、内容を確認し、「OK」(下図の赤矢印)をタップします。

これで編集内容がリモートのリポジトリにpushされました。

お疲れさまでした。

ちょっとした不具合?

手元のスマホで簡単に操作してみた範囲では以下のような不具合がありましたが、原因については追及していません。

日本語入力モードで1文字目を入力すると、カーソルがその文字の左側に自動的に移動してしまう。そのため、カーソルが移動したところを見計らってカーソルを1文字目の右に移動させないと、2文字目が1文字目の左隣に入力されてしまう。
ファイルの中身を表示する画面において、「縦の三点リーダー」(︙)ボタンをタップすると表示されるメニューのうち、「その他のアプリケーション」(下図の赤矢印)をタップすると、エラーメッセージが表示される。