a2 Tech blog

試したこと・調べたこと・感じたことを発信するITエンジニアの日記です。仕事とは直接関係ないけど興味あることを模索していきます。

Working CopyとTextasticでモバイル開発環境(使用編)

f:id:ninna2:20170410203916p:plain

前回、Working Copyの導入編ということで、RipositoryをCloneするところまでざっと書きました。今回は、実際にWorking Copyを使ってコードの修正を行っていきたいと思います。gitとWorking Copyの連携Working CopyとTextasticの連携をやっていきたいと思います。

まだ前回の記事は読んでいない方は下記を参照ください。

ninna2.hatenablog.com

まずRepositoryをCloneする

前回のおさらいも込めて、まずはRepositoryをCloneしていきます。Working Copyを開き、GitHubの自分のアカウントでSign inすると自分のReposiory一覧が出るので、適当なものを選びCloneします。私の場合は、自分のアカウントに作成した"test"というRepositoryをCloneしています。

f:id:ninna2:20170409005158p:plain:w360

Cloneできると、下記のようにRepositoryに含まれるファイルが表示され操作できるようになります。私の場合は、node.jsのコードをサンプルにしてるのでindex.jsとpackage.jsonが存在します。

f:id:ninna2:20170409005201p:plain:w360

作業用Branchの作成

masterを直接触ってもいいのですが、普通は作業用のBranchを作るので同じようにしていきます。先ほどの画面で、Repositoryという項目を選択して、次の画面でBranch masterを選択します。遷移先の画面で、右上のブランチボタンで新しくブランチの作成が出来ます。適当にブランチ名を入力します。今回は、"test_branch"にしました。入力が終わったら再度、ブランチボタンをポチッとしてブランチの作成は完了です。

f:id:ninna2:20170409005205p:plain:w360

f:id:ninna2:20170409005209p:plain:w360

これでブランチの作成は完了です。表示されているBranchという項目が作成したブランチ名(test_branch)になっていればオッケーです。

f:id:ninna2:20170409005212p:plain:w360

ソースコードの修正

さて次に、ソースコードの修正を行ってみましょう。この作業はWorking CopyでなくTextasticでやります。Textasticを起動して、"Open…“から、"Working Copy"を選択します。

f:id:ninna2:20170409005215p:plain:w360

修正対象(先ほど作成したリポジトリ)を選んで、"Pick"します。

f:id:ninna2:20170409005219p:plain:w360

そうするとTextasticの"Open…“の下にPickしたリポジトリが表示されるので、開きます。

f:id:ninna2:20170409005222p:plain:w360

今回はindex.jsをちょこっと修正します。レスポンスで返す文字列を"Hello World!!“から"Hello GitHub!!"に修正してます。この修正になんの意味もありませんよ。

f:id:ninna2:20170409005225p:plain:w360

修正したらTextasticでの操作はおしまいで、その内容をWorking Copy側から確認してみます。変更により差分があるよというアイコン表示になっていると思います。Textasticで変更した内容が、Working Copyですぐに見れるんです。あら便利。

f:id:ninna2:20170409005229p:plain:w360

ファイルの中身を見ると、ちゃんと差分のコードに色つけてくれてわかりやすく出ていますね。すごい!

f:id:ninna2:20170409005232p:plain:w360

変更内容のCommitとPush

ここまでくれば、あとは変更内容をCommitしてPushして作業用ブランチに反映します。gitのコマンドは、対象のファイルを右から左にスワイプすると該当の操作が出てくるようになっています。

f:id:ninna2:20170409005235p:plain:w360

Commitできたら、Pushします。Repositoryでスワイプすれば、Pushコマンドが出てきます。App内課金していない方は、鍵マークがついているのでPush出来ませんので、悪しからず。

f:id:ninna2:20170409005239p:plain:w360

masterへマージ

これで、作業用ブランチにPush出来ました。最後に、ブランチからmasterにマージしてみましょう。そのためにはCurrent Branchをmasterに切り替えます。

f:id:ninna2:20170409005242p:plain:w360

Branchから右上の"Marge"を選んで、マージしたいブランチを選択します。そうするとマージされます。

f:id:ninna2:20170409005247p:plain:w360

最後に手順は先に説明した方法と同じなので省略しますが、masterへマージした内容を"Push"すれば、masterに変更内容が反映されて、おしまいです!!

これで、リポジトリのCloneから、作業用Branchの作成、Textasticでのソースコードの修正、Commit、Push、masterにマージ、Pushまで出来ました。iOSでここまで出来れば十分ではないでしょうか。

GiyHub + Working Copy + Textasticでモバイル開発環境構築に是非トライしてみてください。

皆さんの参考になれば幸いです。