Life goes on

何かJavaScriptとかVimとかMacとかに関係してそうな深淵から覗かれる者

『開発効率をUPする Git逆引き入門』という本を執筆しました

開発効率をUPする Git逆引き入門

開発効率をUPする Git逆引き入門

  • 作者: 松下雅和,船ヶ山慶,平木聡,土橋林太郎,三上丈晴
  • 出版社/メーカー: シーアンドアール研究所
  • 発売日: 2014/04/09
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログ (1件) を見る

Git本を執筆しました - matsukaz's blog

のエントリーにもありますが、共同執筆という形で、id:matsukaz さんに声をかけていただいて執筆させてもらいました。 来たる4/9に発売予定になっています。

自分の担当範囲は「はじめに」とか「Gitを使った作業の流れ」とか逆引きの一部とか、他の方の修正お手伝いとかそんな感じです。

大体の本の内容は上記のid:matsukaz さんのブログをご覽いただくとして、自分はちょっと違う感想を。

本のターゲット

今回のターゲットは"Gitを使いたいけど、使っていない" という人向けという感じです。なので、思いっきり踏み込んだ使い方…みたいなのはないと思います。個人的にはgit bisectとか極たまーに使うんで載せたかったりしましたけど、このような理由で見送り。

エンジニアだけではなくデザイナーさんなどにも優しい感じにはなっているかと思います。

本の特色

既存のGitについての書籍とは結構毛色が違うんじゃないかなーという点を列挙。(もちろん既存の書籍を全部読んだわけじゃないんですけど)

逆引きメイン

まあタイトルからお察しなんですが、この本は「逆引き」がメインになっています。一例を上げると各項目はこんな感じ。

  • 新しいブランチを作成したい
  • リモートリポジトリの情報を確認したい
  • コンフリクトを解決したい

各項目の最初の方で、使うコマンドが書いてあって手順が載ってるというイメージです。

今のところ逆引きがメインの書籍はないかなーと思っています。

SourceTreeでの操作方法が(ほぼ)全ての項目に載っている

ほぼ全ての項目でGUIのGitクライアントのAtlassian SourceTreeでの操作方法をスクリーンショット付きで載せています。ここがエンジニアじゃない方にもオススメしやすいポイントかなと。

「ほぼ」って言うのはコマンドではあるけど、SourceTreeでの操作が見あたらない…っていう場合ですね。

コマンドではこう操作するけど、SourceTreeはこうですというように併記してあるので最初はSourceTreeで操作していって慣れればコマンドで…というような使い方もできるんではないでしょうか。

ちなみにSourceTreeを選んだ理由は、

  1. クロスプラットフォーム
  2. 無料
  3. できないGitの操作が少ない

という理由で選出しています。

Gitのコマンドを実行したときのリポジトリやツリーの状態が図で載っている

これまたほとんどの項目で、「この操作をした結果、Gitの中ではこんな状態になります」という図を載せています。 こんな感じの図ですね。(id:matsukaz さんのいつやるの?Git入門 v1.1.0から引用)

f:id:Layzie:20140403161754j:plain

個人的にも、Git覚えるのにこの辺の「実際のファイルの状態とGitの中の状態」というのを覚えるのが、早道じゃないかと考えているので、大事かなーと思いました。応用も効きやすくなりますしね。各項目にこういった図が載っているのも結構無いんじゃないかなあと思います。

まとめ

何だかんだと、みんなで時間かかりましたが頑張ったので、ぜひお手に取ってもらえれば嬉しいです。 関係各位のみなさんにおかれましては、お疲れさまでしたー!

git subtreeで自動生成ドキュメントをGitHub Pagesに連携してみた

何か色々試してみた結果これが一番スマートかなーとやってみました。

やりたかったことは結構シンプルでして。masterブランチで更新されてる特定のディレクトリをそのままgh-pagesブランチと連動して更新していきたいというだけでした。 要はこんな感じ。

  1. masterブランチでstyledoccoとかjsdocコマンドで生成したドキュメントファイルをdocsというディレクトリに入れておく。
  2. 1で生成したdocsディレクトリだけを、gh-pagesブランチに持っていく。
  3. gh-pagesgit pushしてドキュメントが更新されるようにする。

この一連の流れをどうやって実行しようかなーと思ってて、git submoduleだと参照はしやすくても、更新しにくいしなあということで結果git subtree使っていこうかなという感じに。 もちろんmasterで作ったdocsをいったんローカルリポジトリの外にコピーしてgh-pagesにしてまた持ってくる…っていうのも出来るっちゃ出来ますけどスマートじゃないやという。

で、色々調べたんですが、このgit subtreeがクセモノで。git submoduleとかだと色々サンプルもあるんですが、git subtreeに関しては古い情報と新しい情報が入り混じっててカオス。 おまけに実例というかサンプル少ない。ので、記録として。

ちなみに簡単なディレクトリ構成としては

root/
root/src
root/docs

のような感じでrootGruntfile.jsなどがある感じ。root/src内のcssとかをstyledoccoなど使って、root/docsに生成してます。

下準備

まずは、同じリモートリポジトリ内で管理してたdocsディレクトリをリポジトリ外に移動して新しくドキュメント用のリモートリポジトリを作ります。

$ cd root
$ mv docs ../docs
$ cd ../docs
$ git init
$ git add .
$ git commit -m "initial commit"
$ git remote add document https://path/to/document
$ git push -u origin master

リモートの設定をしてgit subtree addでディレクトリ管理

次に元のリポジトリに戻ってから、ドキュメントのリモートリポジトリをgit remote addします。設定できたら、git subtree addコマンドでsubtreeとしてdocsディレクトリを登録。

$ cd root
$ git remote add -f document https://path/to/document # ついでにfetchしておく
$ git subtree add --prefix=docs document master --squash # git add --prefix=subtreeさせたいディレクトリ リモートリポジトリ リモートで更新するブランチ
$ git checkout gh-pages
$ git subtree add --prefix=docs document master --squash

git subtree addするときは--squashオプション付けておけば、documentリポジトリのコミットを1つにまとめてマージしてくれます。これで準備完了。

ドキュメント更新

普通に例えば、grunt叩いたりmake叩いたりしてドキュメント生成します。で、これを普通にコミットまでさせるんですが、この更新をpushするときは普通のpushの他にgit subtree pushも使います。 これによって、全然違うリモートリポジトリであるdocumentpushすることができるようになります。ここがgit submoduleと一番違う部分じゃないかと。

$ git checkout master
$ grunt cssdoc # まあこれでstyledoccoでドキュメント生成すると思いなせえ
$ cd docs
$ git add .
$ git commit -m "update docs"
$ cd ../
$ git subtree push --prefix=docs document https://path/to/document # git subtree addと同じ
$ git push origin master # `origin/master`に変更push

試しに、すでに外部のリポジトリになってるはずのdocsリポジトリに行ってみてgit pullしてみるとちゃんとコミットが取りこまれるのが分かります。ちなログは適当。

$ cd ../docs
$ git pull origin master
remote: Counting objects: 18, done.
remote: Compressing objects: 100% (10/10), done.
remote: Total 15 (delta 10), reused 10 (delta 5)
Unpacking objects: 100% (15/15), done.
From github.com:Layzie/document
 * branch            master     -> FETCH_HEAD
   480cedb..386ca75  master     -> origin/master
Updating 430cedb..3iaca75
Fast-forward
 index.html | 14 ++++++++++----
 btn.html |  2 +-
 2 files changed, 11 insertions(+), 5 deletions(-)

GitHub Pagesの更新

もともとのリポジトリに既にあるdocsディレクトリに関しては、git subtree pullで変更を取り込んでいきます。

$ git checkout gh-pages
$ git subtree pull --prefix=docs document https://path/to/document --squash# git subtree addと同じ
remote: Counting objects: 18, done.
remote: Compressing objects: 100% (10/10), done.
remote: Total 15 (delta 10), reused 10 (delta 5)
Unpacking objects: 100% (15/15), done.
From github.com:Layzie/document
 * branch            master     -> FETCH_HEAD
   480cedb..386ca75  master     -> origin/master
Updating 430cedb..3iaca75
Fast-forward
 index.html | 14 ++++++++++----
 btn.html |  2 +-
 2 files changed, 11 insertions(+), 5 deletions(-)
$ git push origin gh-pages

やっぱりこのとき--squashしておかないと変にコンフリクト起したりするんで忘れずに。あとやっぱりpullのログは適当。

ということでこれで晴れてGitHub Pagesが更新されました!

参考URL

結構いろいろやり方書いてあったんですが、その中でも下記の3つは役に立ちました。というかほぼまま記事にしてる気がしないでもない。

ありがたや。

あるフロントエンドエンジニアの1日

Frontrend Advent Calenderの14日目の記事です。

風邪引いてちょっと遅れました…。

先週ですが、札幌でSaCSS Special4 Frontrend in Sapporoというイベントで講演させていただく機会がありました。 自分は"黒い画面"ことターミナルやコマンドに慣れていない方に興味を持ってもらおうという感じで、お話をさせていただきました。

ターミナルに興味が出てきたところで、「どうやって作業してんだろ?」っていうのが見ないと分からなかったりもすると思います。

自分は日常的にターミナル内で作業してるのですが、こんな感じでフロントエンドに関わる作業するのかなーという一例として書いてみます。あくまで イメージです。

  • 10:00
    • 出社してiTerm2を立ち上げる。
    • tmuxtmuxinatorを使って、その日の作業に対応した、paneとかwindowとか指定してる。
    • メールチェックはVmailAirmailを使い分けしてる。何か返信とかはAirmailで、閲覧はVmailっていうのが多い。
  • 11:00
    • Vimをエディタとして使ってる。
    • 大体tmuxのpaneを1つvim用に開いておいてそこで作業してる。ファイルとかは大体前日の続きというのが多いので、Unite.vimで開いたことあるファイルを検索して開く。
    • 一度ファイル開いたら大体のファイル開いたりという作業はctrlp.vimを使うことが多い。
    • Vimのタブ毎に開いてるプロジェクトが分かれてる感じにしてる。大体1つのタブに4つくらいは画面分割してファイルを並べる。多いと8個とか。
  • 12:00
    • 大体関わってるプロジェクトではSassとかStylus使ってる。
    • 上記のコンパイルとかするのにGrunt使ってるのでこれに専用にtmuxのpane割り当てる。
  • 14:00
    • 一段落してGitを使ってcommitしたりpushしたりmergeしたり。
    • リポジトリの履歴なんかはさくっとtigとかVimの中からgitvを使う。その時の状況により。
  • 15:00
    • GitHubを使用したりすること多いので、hubとかgit-extras使って省力化してる。
    • 途中で「このfunction名どこで使ってるのかいな…」ということでack使って検索かける。検索がもっと速いって言われるSilver Searcherはあんまり好みじゃない。
  • 16:00
    • 「このメソッド何だっけ…」と思ってDashを使って検索。大体GUIの操作というかアプリ開いたりなんだりはAlfredからやってる。
    • ファイル検索もAlfredからやること多い。普通にパスを入れてくと選べるので便利。
    • Alfredの万能感ハンパねえ。
  • 17:00
    • JSONのレスポンスが見にくいので、jqコマンドで整形しておいたり。いらないレスポンスは削ったりする。
    • Wikiのドキュメントを追記するのに自分はWiki形式よりMarkdownが良いので、pandocで変換。ドキュメント関係はこれ1本で済んでる。
    • MarkdownはVimで書いて、vim-quickrun使って、Marked2を使ってプレビュー。
  • 19:00
    • styledoccojsdoc3のドキュメントを更新しておく。
    • この作業もやっぱりGrunt使って作業。インターフェース一緒なので良い。
    • お疲れさまでした。

上記はフィクションですが、大体こんな感じかなと。他にサーバーでの作業が必要ってことで、ssh使ったりとかもありますけど。 慣れると(ほぼ)ターミナルで作業が完結して、キーボードしか使わなくなるので便利に思えます。もちろんブラウザでの作業とかありますけど。

まあ、あんまりフロントエンドっぽくない話だなーって気もしますが、こういう人間もいたりするってことで。

それではみなさま良いCUIライフを送ってください。

GistBox関連のGistBox Clipperが便利

以前からあったサービスなんですがChrome ウェブストア - GistBoxというサービスがあります. 自分がStarしたり作ったGistをGmailみたいに見れるという便利なサービスなんですが,先日Chrome ウェブストア - GistBox ClipperというChrome拡張があるのを知りまして.

どうもあんまり紹介されてないようなんで,少し紹介しようかと.

なんでも良いんですが,<pre>とか<code>で囲まれてそうな部分にマウスオーバーすると出てくるGistBoxのマークをクリック or 右クリック→Create Gistを選ぶと,そのコードをGistに投稿できるという拡張機能です.この作業をすると下記のような状態になるのでそのままGistに投稿できるというもの.

f:id:Layzie:20130908231648p:plain

ちょっとしたスニペットを検索してGistに放り込むのには一番手軽なんじゃないかなーと思いました.あとはそれこそGistBoxとかで検索するみたいな連携ができそう.便利.