VScodeとGitHubで差分管理して小説を書こう

こんにちは。たまに思い立ったように二次創作小説を書いているのくです。

クラウドで.txtデータをやりとりしつつ、AndroidのJota+、Windows10ではMery、Linuxの入ったノートとiPhoneではNolaでちまちま書いていました。……が、この間Nolaで書いたものをクラウド上のテキストファイルに上書きした所、Nolaの方で上手く同期ができておらず、しばらくポチポチして書いた部分がパーになってしまいました。泣いています。

Meryだと自動で複数バックアップを取ってくれたりもするけど、いちいちファイルを増やしてのバックアップを取るのも面倒……そういえばプログラマーみたいに小説をgit管理で書いている方がいた…！私もやろう、そうしよう！

そういうわけで、Visual Studio CodeをエディタとしてGit&Githubを使って差分管理しながら小説を書く方法まとめです。Windows/Mac/Linuxで利用できます。あと自己責任になりますがAndroidでも行う方法を後ろの方に書いています。iOSでも有料アプリ(Working Copy)でPush出来るようです。

そもそも何が出来るの？

小説を書いてコミットという操作をすると、gitというプログラムが変更履歴を作成してくれます。履歴が管理されるので、進捗管理や、消したり書き換えたところを戻したり再利用したい…という場合便利です。

また、例えばデスクトップとノートPCで別々の行を編集して保存した場合、なんとそれらの変更を合体(マージ)させることができます。ワオ…！

統合(マージ)のイメージ

同じ行が編集されていた場合は競合が発生しますが、履歴が残るのでどちらを残すかも決められます。

実際何をするの？

Visual Studio Codeとgitを公式サイトよりダウンロードしてインストールし、ブラウザからGitHubのサイトに登録して、それらを連携すると準備完了です。

実際に小説を書きながらやることを簡単にまとめると

  1. pullという操作でweb上から書きかけの小説データをダウンロード
  2. 小説の続きを書く
  3. コミットという操作で変更履歴を作成
  4. pushという操作で変更履歴と小説データをweb上にアップロード

を繰り返すイメージです。太字の操作はエディタにあるボタンを押すだけで進みます。小説は自分で書くしかないです。でも画像中のサンプル文章を書いたのはAIのべりすとくんなのでウナギに焼き印を押した戦犯は彼/彼女です。私は悪くない…

続きを読む

導入方法

なるべく分かりやすく言い換えたいな～と思うので、厳密には意味が違う言葉でも言い換えていたりします。よろしくお願いします。

Visual Studio Codeのインストール

Visual Studio Code(以下VScode)はMicrosoftの開発しているエディタです。プログラムを書いたり文章を書いたりするのに使います。

公式サイト　https://azure.microsoft.com/ja-jp/products/visual-studio-code/

「今すぐダウンロード」から自分のOSに合うものをダウンロードしてインストールしましょう。

Windowsでx64かx86かARM64分からない場合、Win10なら「PC設定」→「システム」→「詳細設定」のデバイスの仕様→システムの種類でベースプロセッサの部分を参照して下さい。

起動すると英語なので、日本語化します。拡張機能のボタンがあるので押して検索欄を「Japanese」等で検索して「Japanese Language Pack for Visual Studio Code」をインストールします。インストール後Restartボタンが出るかと思うのでそれを押して再起動しましょう。

Gitのインストール

Gitは分散型バージョン管理システムという、変更履歴や差分などを管理するためのソフトです。

公式サイト　https://git-scm.com/

Downloadsから自分のOSを選んでインストールします。色々インストール時に聞かれますがググると詳しいサイトが色々出てきます（投げやり）

こちらのサイトの説明が分かりやすいので参考になるかも。こちらの「4.Gitの初期設定」までを行います。

インストールが終了したらユーザー名とメールアドレスを設定します。自分のOS付属のコマンドプロンプト等を立ち上げて入力します。

ユーザー名は適当ですが編集した人の名前の表示部分に使われます。英字で入力してください。メアドはGitHubに登録するものと同一の方が良いかも。

コマンドの入力はWinならGit BashでもコマンドプロンプトでもPowerShellでもどれを使っても良いです。Mac・Linuxならターミナルです。ユーザー名とメアドはダブルクオーテーション“"で囲んで下さい。

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

GitHubへ登録

性的な内容は上げられないのでご注意ください。自分は自鯖にリモートリポジトリ(Githubの代わり)を作る方法でやってます。その方法もそのうちまとめ予定…

書いたコードや変更差分をウェブ上に保存できるサービスです。ブラウザでアクセスし、「今すぐ登録」or「サインアップ」から登録しましょう。

公式サイト　https://github.co.jp/

アカウントが作成できたらリポジトリというものを作成します。意味は「容器」です。このリポジトリの中に入れたデータを同期していく感覚です。リポジトリはGitHubのトップ画面から新規作成ができます。「novel」など適当な名前をつけて作成しちゃいましょう。非公開設定の「Private」を選んで「Create new repository」を押すと作成できます。

これで 

https://github.com/(ユーザー名)/(リポジトリ名).git

というURLでGitHubにリポジトリが作成できました。Privateなので外部からは見れません。

VScodeとGitHubの連携

自分のPCとGitHubを同期させます。VScodeを起動して、「開始」メニューにある「Gitリポジトリのクローン」を選びます。

「GitHubから複製」というメニューが出るのでそれをクリックし、先ほど作成した「(ユーザー名)/(リポジトリ名、今回はnovel)」を選択します。初回は認証があるのでブラウザでログインしましょう。ブラウザ側でVScodeで開くポップアップが出たら素直に開くを選択します。

次にPC上の保存先フォルダを選びます。指定したフォルダへリポジトリ(容器)がクローン（複製）され、リポジトリ内のデータがPC上にコピーされます。その後リポジトリを開くかどうか尋ねる通知が表示されるので、「開く」を選択します。

次に「ターミナル」→「新しいターミナル」でターミナル画面を出します。

ターミナルに、ブラウザでGitHubで作成したリポジトリを開いた時に出てくるここを一行ずつ入力します。

git remote add origin https://github.com/(ユーザー名)/(リポジトリ名).git
git branch -M main
git push -u origin main
入力していく

一行目でエラーが出るかも知れませんが気にしなくて大丈夫です。

これで準備完了です。

使い方

小説を書く

VScodeの見た目を変える

VScodeは見た目の変更など色々設定できるので自分好みに弄りましょう。設定はCtrl+,で開くことが出来ます。小説を書く場合下記の辺りを弄ると見やすいかもです。他にも設定項目は色々あるので適時ググってね

設定画面には上の方に検索欄があるので、設定項目の一部(themeなど)を入力すると絞ってくれます。

  • workbench.colorTheme //全体のテーマ（見た目）選択
  • editor.fontSize //フォントサイズ
  • editor.fontFamily　//フォントの変更
  • editor.lineHeight //行間
  • editor.wordWrap //右端で折り返すかどうか
  • editor.renderLineHighlight //カーソルのある行を強調表示するか
  • editor.lineNumbers //行番号の表示
  • editor.minimap.enabled //右側のミニマップを表示するかどうか

自分はフォントはメイリオを使用しているためフォント欄には「’Meiryo’, Consolas,’Courier New’, monospace」と入れています。

私は元々Atomというエディタを使用していたので、色の似ている「Atom One Dark」というテーマを使用しています。見た目は執筆のテンションに関わるので、色々試してみるのが良いと思います。細かい外観もオプションにより弄ることができます。

テーマはこちらのサイトからも探せます。　https://vscodethemes.com/

テーマ：Solarized Light
テーマ：Atom One Dark

全画面ではエディタの横幅が広すぎるので、私は2ペインにして細長めにして書いています。右側にはメモや資料を開いたりしています。タブを寄せたい側にドラッグすると分割できます。「表示」→「エディターレイアウト」→「分割」でもできます。

最近はスマホで読む前提のものが多いので文字の詰め方とか結構分からなくなりますね……。

作品を書く

左メニューのエクスプローラーの画面でファイルを新規作成できます。ジャンルごとや作品ごとにフォルダを作成しても良いかと思います。私は普段テキストファイル(.txt)で書いているので今回は「original」フォルダを作成し「mynovel.txt」というファイル名で新規作成してみます。ファイルが出来たらダブルクリックで開き、どんどん書きましょう。適度に進んだらCtrl+Sなどで保存します。

この時点ではデータは通常どおりPCの内部に保存されただけの状態です。

察しの良い方は気づいてるかもですが、これらのファイルは先ほど指定したフォルダ内に保存されているので、別に小説を書く部分に必ずしもVScodeを使う必要はないです。ただ、別のエディタと画面切り替えるのも面倒なので……

pushしよう

書いて保存をしたら、早速リポジトリへ変更を記録しましょう。

まずは左メニューから「ソース管理」のアイコンをクリックし、編集したファイルの横の+ボタンを押して「ステージ」に追加します。ステージに追加されたファイルのみに変更履歴が作られます。

書いている小説のファイルだけ同期させたいので、他の不要なファイルはステージに追加しません。

ステージに追加できたら、コミットボタンの上のメッセージ欄に適当なコメントを入力して「コミットする」を押すと、オフラインの自PC上に変更履歴が記録されます。コメントを入れ忘れて押した場合もコミットボタンが灰色の状態の時点で入力ができます。

コメントはプログラマーの人などは規則的に統一してますが、今回は個人で小説を書いてるだけなので適当で大丈夫です。私は面倒なのでaddとかだけ入れていますが、日付だったり変更箇所など、自分で分かりやすいものを入れると良いです。よく考えたら編集したPCに合わせて「Desktop 追記」とか「Laptop 誤字修正」とかが良いかも。

ここまでの操作はオフライン上なので、オンライン上のGitHubにも変更履歴をpush(アップロード)しましょう。

変更履歴を、コミットは自PC内部に保存すること、pushはGitHubなどに保存することを言います。GitHubに上げておくことで、PCが故障したときのバックアップにもなります。

簡単なのは画面左下の同期アイコン🔄をクリックすることです。押すだけでpull+pushしてくれます。

ソース管理画面の右上のメニューから「プル、プッシュ」→「プッシュ」を選んでも良いですが、同期を選ぶと先にpullして編集箇所の競合を防いでくれるので、同期の方が安全かな？と思います。

ここまで終わったら、念のためブラウザのGitHubにアクセスしてみて同期できているか確認してみましょう。

ちなみに、設定画面を開いてgit.postCommitCommandの項目をpushまたはsyncに設定すると、コミットが成功したら自動でpushや同期をしてくれます。(syncがオススメ)　ちょっと重くなるかもですがコミット操作ごとにオンライン上にバックアップが取れるので安心。

続きを書くとき

他のPCなどで変更→pushしていれば今度はpull(ダウンロード/同期)しましょう

画面左下の同期ボタン🔄を押すだけでOKです。VScodeを起動したらとりあえず同期ボタンを押しておくと良いです。

続きを書いたり変更して保存したら、記録をとりたいタイミングごとに

  1. 変更したファイルをステージに追加
  2. コメントを入れてコミット
  3. プッシュ(または同期ボタンを押す) (コミット時に自動で行う設定をしていれば不要)

をしていきます。これで変更履歴が積み重なっていきます。

変更履歴は拡張機能のGit Historyなどを入れると見やすいです。使い方はググってね

addの部分がコミット時にメッセージに入力した部分です。

別の端末で

デスクトップとノートなど複数端末で執筆してる方は同様に別端末にも入れてみましょう。ユーザー名とメアドは全て同じで大丈夫です。続きを書く前にpull→書いたらコミット→pushをしていきましょう。

競合が発生したら

編集箇所が別の行だった場合、基本的には自動でマージ(統合)をしてくれます。

しかし編集箇所が同じ行だった場合には競合が発生します。競合が発生した場合は手動でマージ（統合）処理を行います。基本的に競合してしまっている部分をどちらかに合わせて書き換えればOKです。

細かくやる方法はちょっと面倒なので投げます。

Gitの基本やブランチ

「個人で小説を書く」という想定上、端末を移るときにpull,pushをきちんと行っていれば枝別れすることがあまりないため、このページではブランチ（分岐）等の説明はしていません。Git自体の説明などは色々と解説サイトが多いので興味があれば読んでみて下さい。

Androidでの利用

普段スマホでぽちぽち書いているので個人的にスマホで使えないとあまり意味ないな～と思ったのですが、Linuxエミュでなんとかなることに気づきました。これでPC←→スマホでの変な上書きがカバーできる…！

AndroidスマホにLinuxのエミュレータアプリ「Turmux」をインストールしてgitを使用します。

GooglePlayを通さないアプリの為、使用に関しては自己責任になります。

導入

公式サイト　https://f-droid.org/en/packages/com.termux/

最新バージョンの下の「Download APK」リンクからcom.termux_(バージョン).apkファイルをダウンロードして開き、インストールします。(実行には許可が必要です、自己責任)

Termuxを起動したら以下コマンドを入力し、スマホ内のストレージと連携します。ポップアップが出たら許可します。

termux-setup-storage

各種パッケージを以下コマンドでアップデートします。

pkg update

gitをインストールし、PC同様にユーザー名とメアドを入力します。ユーザー名とメアドはダブルクオーテーション""で囲んで下さい。

pkg install git
git config --global user.name "ユーザー名"
git config --global user.email "メールアドレス"

GitHubと連携します。二段階認証が出来ない為、TermuxからGitHubへのアクセスするパスワードはGitHubでトークンを作成して使用します。

ブラウザでGitHubにログインし、アカウントの「Setting」→「Developer Settings」→「Personal access tokens」→「Tokens(classic)」を選択、右上の「Generate new token」→「Generate new token(classic)」から新規でトークンを作成します。名前は「android」など分かるように適当に、Expiration(期限)はセキュリティの為設定した方が良いですが、無期限も可能です。「Select scopes」は「repo」にチェックを入れます。

作成したトークンは後から参照出来ない為、保管してください。

ログインの省略

毎回ユーザー名とパスワード(トークン)を入力するのは面倒なので下記コマンドでLinux上で使えるテキストエディタのvimをインストールします。

pkg install vim

vimで「.netrc」というファイルを新規作成&編集します。

vim .netrc

上記コマンドでvimが起動するので編集します。入力モードはキーボードのiを押すとインサートモードになり、ESCを押すとノーマルモードに戻ります。空の新規ファイルが作成されるため、下記を入力します。こちらはユーザー名などにダブルクオーテーションは不要です。

machine github.com
    login ユーザー名
    password 作成したトークン

ESCボタンを押した後:wqと入力して確定し、保存&終了します。これで毎回の入力が不要になります。トークンが期限切れで無効になった場合には再度編集してください。

保存先の作成、連携

スマホの内部ストレージ内に適当なフォルダに保存先を作ります。今回スマホのファイルマネージャー(私はFile commander)を使って、内部ストレージ直下に「mygit」というフォルダを作成しました。フォルダのプロパティを見ると、パスが表示されるので控えます。

cd /storage/emulated/0/mygit/

Termuxにて上記コマンドでmygitフォルダへ移動したら、GitHubからスマホへデータをクローン（複製）します。

git clone https://github.com/(ユーザー名)/(リポジトリ名).git

これで内部ストレージに作ったmygitフォルダの中に(リポジトリ名)であるnovelフォルダができ、データがダウンロードされ、書いている小説がAndroidのテキストエディタでも編集できるようになりました。やったね。

pull, pushの前に

Termuxを起動したらpull/pushの前に必ず作業フォルダへ移動しておきます。

cd /storage/emulated/0/mygit/novel/

pull

下記コマンドを実行するとpullできます。小説の続きを書く前にpullしておきましょう。

git pull

push

小説の続きをテキストエディタでポチポチ書いて保存したら、以下コマンドを実行してGitHubへpushします。

git add -A
git commit -m "Android"
git push

1行目がフォルダ内の全てのファイルをステージに追加、2行目が「Android」というメッセージを付けてコミット、3行目がGitHubへのpushです。PCでやることと同じようなことをしています。

無事Androidで続きを書いてGitHubへPushできました！

(おまけ)Bashファイル作成

コマンドをまとめたBashファイルを作っておくと楽です。

起動した時点のディレクトリに、vimで適当なBashファイルを作成します。今回は「nv.sh」という名前を付けました。

vi nv.sh

作業フォルダへのディレクトリ移動とpullをまとめたBashファイルの例

cd /storage/emulated/0/mygit/novel/
git pull

下記コードを実行すると上記コードが実行されます。

. nv.sh

ハッピー小説ライフ！