Life goes on

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

“Web制作者のためのGitHubの教科書” という本を共著させてもらいました

Web制作者のためのGitHubの教科書 チームの効率を最大化する共同開発ツール

Web制作者のためのGitHubの教科書 チームの効率を最大化する共同開発ツール

インプレスさんより、10/24発売予定の Web制作者のためのGitHubの教科書 という本を、弊社の原さん、紫竹さん、ドワンゴの塩谷さんという布陣で共著させていただきました。

以前の書籍でお世話になった編集さんに声をかけていただいて、メンバー集めのところから入っていったのですが、何だか色々あり当初の予定よりも発売遅れてしまい、関係各位には申し訳なかったです…。

今回の本は名前の通りテーマとしては普通のWeb制作をしている(プログラミングとかじゃなくても)方々にも気軽にGitHubを使えるようにというものでした。

既刊の書籍でもGitHubの機能や使い方などが詳しく書いてある良い書籍があるのですが、この本の要件としては上記のように今までGitHubの名前は聞いたことがあるけど…というような方々をターゲットにしています。

とはいえ、塩谷さんのブログにも書かれていますが、執筆中にどんどんとGitHub関連の書籍が発売されていて大変にビビってました。

が、最初のころに「分かりやすいように会話文形式をメインに実際のWeb制作の案件をやっていく過程を書いていく」というコンセプトは特色が出ているかなと思います。

執筆しているときにも聞いたりしたんですが、案外GitHubを使うことに抵抗がある…という方は多いようで、便利なんで少しでもそういう抵抗が無くなればいいなーという感じで執筆しています。

そんなこんなで初めての会話文形式での執筆なんですが、思った以上に難しくて所々難航してしまいました…。あとは共著なので、全部の章が出揃ったあとに会話文の調整などや、より分かりやすい表現にするなどの作業も結構出てきました。

色々と難航しましたが、GitHubでの共同作業についてはプロジェクトとかでやっていないと案外どういう風に進めていけばいいのかというのが分からないところもあると思いますが、そういう方におススメできるように書いているので、購入を検討してもらうと嬉しいっす。

それにしても、1年くらい前に生まれて初めて書籍執筆の機会をいただいたというのに、あれよあれよと3冊目ということで人生どう転ぶか分かりません。

Frontrend in Kanazawaに登壇します。

FRONTREND IN KANAZAWA

もう明日になってしまいますが、2014/10/18(土)金沢市にてFrontrend in Kanazawaが開催されまして、自分も登壇させていただくことになりました。

今回はDMM.comラボの皆さんとサイバーエージェント共催という形になります。テーマは 10年先のため、今身につけたいこと というかなり壮大なテーマになっております。

このテーマで話をいただいたときに、何話そうかなーと悩んだんですが結局いつもやってる情報収集のやり方とか考え方について話すことにしました。

別に自分は情報収集のプロとかそういうんでもないんですが、何だかんだとこの仕事していく内にプロセスが固まってきてて、たまーに「どういう風にそれ知ったんですか」とか質問もらったりもしたんで、良い機会ということでまとめることにしました。

ということで、金沢の皆さまよろしくお願いいたします。

共著したフロントエンド養成読本が出ました

フロントエンドエンジニア養成読本 [HTML、CSS、JavaScriptの基本から現場で役立つ技術まで満載! ] (Software Design plus)

フロントエンドエンジニア養成読本 [HTML、CSS、JavaScriptの基本から現場で役立つ技術まで満載! ] (Software Design plus)

お久しぶりのエントリになりますが、表題のとおり、技術評論社さまから「フロントエンド養成読本」という本が7/1に発売されましたので、その宣伝になります。

こちらの本のコンセプトとして「現状の広範囲なフロントエンドに必要な技術を、必要十分な程度に紹介する」というものになるかと思います。目次などを見てもらえると分かると思いますが、近年フロントエンドエンジニアに必要とされている技術の概要はほぼ網羅しているのではないかと思います。

もちろん、一つ一つのテーマはページ数の関係で、思いきり深いところまで紹介するということはできませんでしたが、それでも、その技術を使うにあたって情報を調べる足がかりになると思います。

個人的には自分はこの業界に入ったときにこういう本があれば、とても良いなあという感じにするように書いたつもりです。しれっとVimのことを書きたいと思いましたが、俺の技量では無理でした。

本書のなかにもありますが、最近の フロントエンドエンジニア という職種は知っておかなければいけない知識の範囲というのが広範になっています。自分も「必要になったときドリブン勉強法」なのですが、それでもWeb業界に入ったばかりの方や、元々サーバエンジニアなどの他の職種の方などが「最近のフロントエンド事情」を知ろうと思うと、今回の本の内容はもちろんネットで調べたりしても出てくるものなんですが、やはり体系的に調べようと思うと情報が あり過ぎ て大変になると思います。

そんな中の一つの道標的に使える書籍になっているんではないかなと思います。

執筆は結構ハイスピードに進んでいましたが、自分はケツから数えた方が良いくらいにスピード出ませんでした。ごめんなさい。見本誌を改めて読んでみましたが、全編通して読んでも結構面白い書籍になってるんじゃないかなと思いました。

ということで、みなさん買っていただくと嬉しいです。

『開発効率を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の中の状態」というのを覚えるのが、早道じゃないかと考えているので、大事かなーと思いました。応用も効きやすくなりますしね。各項目にこういった図が載っているのも結構無いんじゃないかなあと思います。

まとめ

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

Gitterが一般βになったので早速やってみたんだけど、ムッチャ感動するレベルだった

Gitterに感動した

金曜にメールチェックしてたら「Gitterが一般βになったから誰でも参加できるようになったよ」ってメールが届いてた。 確か以前は抽選かなんかだったんだけど、アイディアがちょっと面白いなーと思って参加できるようになったらメールでお知らせしてもらおうと登録してたんだけど。

Gitter - Chat, for GitHub

f:id:Layzie:20140224040015p:plain

早速、試してみたんだけど…久々に感動するレベルWebサービスでした。

そもそもこのサービス何なのか知らない人が大半だと思うんで、ちょっと説明するとこんな感じです。

GitHubリポジトリやOrganization単位でチャットルームを作ることができる

まあ、これだけなんですが。WebアプリとMacアプリがあってiPhoneとかのモバイル対応はまだらしい。とはいえ、Webアプリの方をMobile Safariなんかで見たらそこそこ見やすい感じではあります。

今回の説明はMacアプリの方でスクリーンショットを取ってみました。例としてhtml5j-englishで見てみます。

まず自分のGitHubのアカウントを入力してログインすると、自分のOrganizationやリポジトリの一覧がずらーっと出てきます。この時にプライベートリポジトリを見る場合はさらにGitHubの方で許可してあげないといけません。 今回プライベートのヤツはモザイクかけています。

f:id:Layzie:20140224040104p:plain

で、Organizationでもリポジトリでもクリックしたらすぐにそれに紐付いたチャットルームを立ち上げてくれます。Organizationの場合は特定のリポジトリSettings > Webhooks & Service > Gitterでtokenとか渡してあげると、そのリポジトリの動きが表示されるようになります。最初にリポジトリ単位であれば勝手にやってくれるようです。便利。

f:id:Layzie:20140224041341p:plain

肝心のチャット部分はなんとmarkdownで記述できます。しかもGitHubのmarkdownそのまま使えるようになってるんで、コードとか記述するとかemojiとかも大丈夫。で、issueの番号なんかも#3とかすると該当のものにリンクしてくれます。超絶便利。

f:id:Layzie:20140224172359p:plain

またREADMEとかに付けられるバッジもあるんで、これ付けておけば使ってる人とかOrganizationのメンバー間とのコミュニケーションが簡単にできそう。プライベートなリポジトリなんかのチャットはそのリポジトリが見れる人じゃないと入れないそうなんで、これまた安心です。オープンなリポジトリは誰でも入れます。

f:id:Layzie:20140224040849p:plain

懸念点としては、現在はβ版なんで無料なんですが正式サービスになった場合の料金体系がまだ分からないってところですか。あとは思った以上にMacアプリがWebそのまんまなんで、わざわざアプリ使わなくても…感あるとことか。 ただ、GitHubリポジトリ単位でのコミュニケーションには非常に便利で今までIRCとか色々なサービス使わなきゃいけなかったのが、これだけで大丈夫になるのはとても便利。

導入とか簡単なんで、みんなもぜひ使うと良いと思います。多分これは金払うわ。

現場からは以上です。

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つは役に立ちました。というかほぼまま記事にしてる気がしないでもない。

ありがたや。

SaCSS Special4 Frontrend in Sapporoのスライド公開しました

あけましておめでとうございます。

去年12月にセッションさせていただいたSaCSS Special4 Frontrend in Sapporoでの自分のスライドを公開しました。

今回はターミナルとかCUIをやりたいんだけども、踏み出せない方向け…ということで悩んだ結果こういうスライドになりました。アンケートなど拝見したところ、おおむね好評で良かったです。

本当はコマンドを便利に使うようにTabキーでの補完とか、最初は必ずハマるであろう環境変数のこととか、良く使うコマンド登録するためのaliasとかも説明したかったんですが、 時間の都合でそこら辺は入れられなかったのが残念です…。

ということで、ご来場いただいた皆様あらためてありがとうございました!

あと今回痛感したのが、「興味があまり持ってない分野に興味を持ってもらう」というのはやっぱり難しいなーということでした。どういう構成で説明したら良いのかとか、そこら辺も含めて。

別にこういったセッションだけじゃなくても意識していかないとなーと感じました。