【図解】docker runのオプションいろいろ #マンガでわかるDocker 番外編

こんにちは!
書籍『わかばちゃんと学ぶ』シリーズや『マンガでわかるDocker』を描いている湊川(みなとがわ)あいです。

YYPHP Advent Calendar 2018 3日目を担当します!

icon_wakaba_normal.jpg (15.0 kB)
Docker、いろんなオプションがしれっと使われていて、初心者の頃はそれぞれどんな効果があるかわからないんだよね……-itとか……

$ docker run -it alpine /bin/bash

icon_wakaba_normal.jpg (15.0 kB)
-dとか-pとか-vとか……

$ docker run -d -p 80:80 --name myapp -v $(pwd):/var/www/html php:7.0-apache

icon_wakaba_normal.jpg (15.0 kB)
–rmとか……

$ docker run --rm -v $(pwd)/src:/work vvakame/review /bin/sh -c "cd /work && review-pdfmaker config.yml"

めちゃくちゃに長いDockerコマンド、最初は意味がわからないですよね。私もそうでした。
でも、ひとつひとつ分解して理解すると、意味がわかるようになります。

たとえばコンテナを立ち上げるとき、何もオプションを指定しなければこんな感じでシンプルですが

$ docker run php:7.0-apache

icon_wakaba_smile.jpg (15.3 kB)
うん、これならわかるよ。phpのイメージをもとにコンテナを起動するってことだよね

「デフォルトの設定じゃなくて、今回はこういう風なコンテナを作ってくれ〜」という場合、次のようにオプションをいくつか書き連ねます。

$ docker run [オプション①] [オプション②] [オプション③] php:7.0-apache

icon_wakaba_smile.jpg (15.3 kB)
オプションが増えるとコマンドが長くなり、難しそうに見えるだけなんだね!

この記事では、よく使うオプションをそれぞれ図解で表してみます。

icon_wakaba_smile.jpg (15.3 kB)
『図解でわかるdocker runのオプション』、いってみよー!

docker run -t

  • コンテナの標準出力をホストの標準出力につなげる
  • tty(端末デバイス)を割り当てる
    • -tはttyの略。ttyについてはこちらがわかりやすいです。

docker run -i

  • 先ほどの-tとは反対に、ホストの入力をコンテナの標準出力につなげる
    • (接続されていなくてもSTDINを開いたままにしている)
  • キーボードから入力した文字がコンテナに送られる
  • -iはinteractiveの略

docker run -it

  • -i-tを組み合わせたもの
  • ホスト(手元のターミナル)とコンテナの標準入出力をつなげる
  • コンテナ内部で作業したいときに使う

docker run -d [イメージ名]

  • コンテナ内に入らず、バックグラウンドでコンテナを動作させる
    • これをデタッチモードという
      • デタッチモードの反対語はフォアグラウンドモード。-dオプションが使用されていない場合は、フォアグラウンドモードとしてコンテナが起動します。

docker run -p [ホスト側のポート番号]:[コンテナのポート番号]

  • ポートフォワードする
    • たとえば-p 80:80はホスト側の80番ポートをコンテナ側の80番ポートに転送するように指定している
  • ポートフォワードすると何がいいの?

docker run -v [ホスト側のディレクトリパス]:[コンテナ内のディレクトリパス]

docker run –rm

  • コンテナ内でのコマンドの実行が終わったらコンテナを自動で削除する
  • --rmはremove(取り除く)の略。

icon_wakaba_smile.jpg (15.3 kB)
イメージで覚えればわかりやすいね!

実践編はマンガで解説しています

🌱マンガでわかるDocker①

200px_docker1

🌱マンガでわかるDocker②

400px_docker2

わかばちゃんが登場する書籍

マンガでわかりやすく学べる「わかばちゃんと学ぶ」シリーズです。

わかばちゃんが登場するWeb連載

マンガでわかるUnity

わかばちゃん、お次はゲーム制作に挑戦! もんりぃ先生 @monry とのコラボで連載中です。
こちらからお読みいただけます。
マンガでわかるUnity

マンガでわかるLINE Clova開発

TECH PLAY Magazine様にてWeb連載始まりました。
わかばちゃん、スマートスピーカー開発に挑戦! ちょまどさん @chomado とのコラボで連載中です。
こちらからお読みいただけます。
マンガでわかるLINE Clova開発 1話「どんな仕組みで動くの? サーバーレスって何?」

YYPHPアドベントカレンダー2018、明日12/4の担当は @stmtk_01 さんです!
よろしくお願いします。

『わかばちゃんと学ぶ』シリーズ #技術書典 5に出展します【あ20】

◎貴サークル「湊川あいの、わかば家。」は、 あ20 に配置されました。

一番出口に近い場所に配置されました!

前回大好評だったマンガでわかるDockerの続編や、ネットワーク技術関連のギャグマンガなどを頒布予定です。

技術書典って何?

技術書典は、いろいろなジャンルの技術同人誌と出会える技術書オンリーイベントです。ここでしか出会えない本もたくさんあります。
どなたでも、無料でご来場いただけます。

前回行われた技術書典4の参加レポートはこちら

技術書典5 日時と場所

技術書典5 公式サイト

  • 日時 2018/10/08 (月) 11:00〜17:00
  • 場所 池袋サンシャインシティ2F 展示ホールD(文化会館ビル2F)
  • 主催 TechBooster/達人出版会
  • 一般参加 無料

当日は混雑が予想されます。新刊は多めに刷ってまいりますが、時間によっては冊子の在庫がなくなってしまっている可能性もございますのでご了承ください。(ダウンロードカードも刷っていきます)

また、イベント終了後、BOOTH・noteでダウンロード販売も行う予定ですので、遠方の方はそちらでもお求めいただけます。

https://twitter.com/llminatoll/status/1030815404782837760
https://twitter.com/llminatoll/status/1037369739834667009

それでは当日はどうぞよろしくお願いします!

#マンガでわかるScrapbox Kindle化しました:便利な使い方をイラストで

技術書典4で、配布開始後30分で150冊即なくなった「マンガでわかるScrapbox」がKindle化しました!

なんと0円。無料です!
ポチッと押すだけであなたのKindle端末にデータが送られます。

  • Web版
  • Kindle版
  • 冊子版(技術書典4と、Nota Inc.の公式イベントにて限定配布)

これでこの3種類が揃いました。
ぜひ、あなたのお好みの形式でお読みください。

https://twitter.com/llminatoll/status/1032511631765299200
https://twitter.com/llminatoll/status/997501569292632064

みんなの反応


https://twitter.com/torchiba/status/1027944544866717696

続きはWeb連載中!

https://twitter.com/Scrapbox_jp/status/1009382607656636417
https://twitter.com/llminatoll/status/1011611037701795840

湊川あいの著書

マンガでわかりやすく学べる「わかばちゃんと学ぶ」シリーズです。

湊川あいのWeb連載

わかばちゃんと学ぶ Git使い方入門 PDF版ダウンロードはManateeで!

御礼

拙著「わかばちゃんと学ぶ Git使い方入門」が、2017年4月に発刊して以降、おかげさまで2018年3月には第5刷となりました!
技術書で、一年経たず5刷というのはわりと異例みたいです。
ひとえに、読者の皆様のおかげです。ありがとうございます。

ズバリ、「わかばちゃんと学ぶ」シリーズのPDF版ってあるの?

はい、ございます。
PDF版・EPUB版は、Manatee(マナティー)というマイナビ出版さんが運営する電子書籍ストアにて公式に配信されています。

「わかばちゃんと学ぶ Git使い方入門」 PDF版・EPUB版

『Tech Book Zone Manatee』(テックブックゾーン マナティ)は、マイナビ出版が運営するITを学ぶ方に向けた電子書籍ストアです。様々な出版社のコンピュータ関連の電子書籍・POD書籍の販売をはじめ、注目の開発技法やプログラミング関連の情報など、多彩なコンテンツを提供いたします。(公式サイトより引用)

Manatee参画出版社

株式会社インプレス
株式会社シーアンドアール研究所
株式会社ビー・エヌ・エヌ新社
株式会社ボーンデジタル
株式会社マイナビ出版(当サイト運営会社)

「わかばちゃんと学ぶ」シリーズの出版社は、シーアンドアール研究所さんなので、Manatee(マナティー)さんに並べていただいてるわけですね。

PDFでダウンロードって、無断複製・転載されるのでは? 大丈夫?

この件は著者である私も最初に確認しました!(大事なことですからね)
これに関しては、Manateeさんはシッカリ対策をしてくださっています!

ManateeのDRMについて

当ストアで販売される電子書籍はソーシャルDRMという著作権管理方式を採用しており、購入者の個人的な利用目的以外での電子書籍の複製を禁じております。
ご購入された電子書籍には、購入者情報および暗号化したコードが埋め込まれております。
これらを無断で複製・掲載および販売を行った場合、法律により罰せられる可能性もございますので、ご遠慮ください。
Manatee公式ページより引用

暗号化したコードが埋め込まれている!

ポイントはここ。
PDFでもEPUBでも、「購入者情報および暗号化したコードが埋め込まれている」ってこと。

なので、違法にアップロード → すぐ犯人がわかっちゃうという仕様なんですね〜。
技術ってスバラシイ。

まとめ

「わかばちゃんと学ぶ Git使い方入門 PDF」ですとか、「わかばちゃんと学ぶ Git使い方入門 zip」というキーワードでの検索流入が多かったので、今回この記事を書いてみました!

ちなみにPDF版は公式に配信されてますけど、もちろんのことながら「Zipファイルが公式に配信されている」なんてことは・・・ありえませんよね!

あ、書籍の中で使うGitHubの練習用リポジトリはもちろんzipでも落とせますよ。
こちらからどうぞ!
GitHub: elmas3/mao-seminar

でも、せっかくなのでzipじゃなくて、git cloneしてくださいね❤️

ではでは、楽しいGitライフを!

マンガでわかりやすく学べる「わかばちゃんと学ぶ」シリーズ

超初心者のわかばちゃんと一緒に、HTMLやCSS、バージョン管理システム「Git」、アクセス解析ツールの「Googleアナリティクス」を、マンガでわかりやすく・楽しく学べるシリーズです。

湊川あいのWeb連載

#マンガでわかるDocker サンプル #技術書典 4

マンガでわかるDocker

2018年4月22日(日) 秋葉原UDX2階 アキバ・スクエアにて開催の、技術書オンリーイベント「技術書典4」の、スペース【い-05】にて、「マンガでわかるDocker」を頒布します。

ご好評につきダウンロード版販売スタート!

マンガでわかるDockerのダウンロード版(PDF)をBOOTH・noteでご購入いただけます!

概要

「Dockerって何? どんなことができるの?」
「とりあえず軽くさわってみたい」
そんな方にオススメな、Dockerのキホンがわかるマンガです!
冊子版は700円を予定。

  • 内容
    • Dockerってなあに?
    • Dockerデーモン登場!
    • DockerイメージでHello-worldしてみよう
    • 軽量のLinux「Alpine」のコンテナを動かしてみよう
    • コンテナの中に入ってみよう
  • レベル感
    • Dockerを初めて使う方
    • かつ、コマンドラインを軽くさわったことがある方

サンプル

ダウンロード版で続きを読む!

マンガでわかるDockerのダウンロード版(PDF)をBOOTH・noteでご購入いただけます!
PDFなのでそのままiBooksに登録可能。
表紙込みで28ページ。すべてマンガ形式です。

技術書典で頒布するもの一覧

湊川あいが技術書典で頒布するもの一覧は、こちらの技術書典公式ページからご確認いただけます。
https://techbookfest.org/event/tbf04/circle/16430001

https://twitter.com/llminatoll/status/983839248712327168

Nota.IncさんのWebサービス「Scrapbox」のマンガ冊子も頒布します!
こちらは無料で、先着順です!
ぜひゲットしてくださいね。

なお、商業本「わかばちゃんと学ぶ」シリーズもその場でご購入いただけます。

マンガでわかりやすく学べる「わかばちゃんと学ぶ」シリーズ

超初心者のわかばちゃんと一緒に、HTMLやCSS、バージョン管理システム「Git」、アクセス解析ツールの「Googleアナリティクス」を、マンガでわかりやすく・楽しく学べるシリーズです。

湊川あいのWeb連載

それでは当日はよろしくお願いします!

CLIP STUDIOで技術系同人誌を作ろう! 原稿作成→データ入稿までの一連の流れを公開

技術系同人誌 Advent Calendar 2017 18日目

技術系同人誌 Advent Calendar 2017 18日目担当として、CLIP STUDIOで技術系同人誌を作るときの流れをまとめます。

はじめに

技術系同人誌というと、Re:VIEWを使って書いている方が多いと思います。
テキストメインの場合、Re:VIEWは大変便利ですが、「文字よりも図解が多い」「マンガを挟みたい」場合は「CLIP STUDIO」を使うのがオススメです。

CLIP STUDIOは、さすがマンガ制作用ソフトだけあって、図解を書きやすいですし、印刷所にラクにデータ作成・入稿できます。

今回の記事では、Webデザイナー・マンガ家・技術書執筆をしております湊川あいが、技術書同人誌を作るときどのような工程で作っているのかを共有したいと思います。

1. 環境

CLIP STUDIO PAINT EX

湊川はCLIP STUDIO PAINT EXを使っています。

CLIP STUDIOとは、マンガに特化したイラスト制作ソフトで、その使いやすさから最近だとアニメ制作にも使われています。
値段も良心的なので、いちからデジタルイラストを始めたいという人にもおすすめです。

iPad版もリリースされたようなので、iPad Proをお持ちの方はアプリ版を使うという手もありますね!

絵を書くためのデバイス

液晶タブレットかペンタブレット(板タブと呼ばれているもの)をパソコンに繋いで使います。
どの機種が合うかは個人差があるので、まずは家電量販店で試し書きしてみるのがよいでしょう。

  • 肘から動かして絵を描く人 →大きめのインチ
  • 手首だけ動かして描く人 →小さめのインチ

湊川は手首で描くタイプなので、大画面だと逆に描きづらくなってしまいます。よって、小さめの液タブWacom Cintiq 13HDを使っています。

↑こちら、Amazon上でCLIP STUDIO EX付きの割安セットも選べるので同時購入を考えている方はオススメです。

2. 仕上がりサイズとページ数を考える

CLIP STUDIO PAINT EXを立ち上げ、上部のメニューから[ファイル] > [新規]をクリックします。

ページ数を考える

仕上がりサイズをA5にするか、B5にするか決めます。
「A5ってどれくらい?」と思う方は、A4用紙を半分に折るとわかります。

A5ってこれぐらい

書籍「わかばちゃんと学ぶ」シリーズはA5です。
わかばちゃんと学ぶシリーズはA5

B5ってこれぐらい

B5は、同人誌でよくあるサイズといえば伝わりやすいでしょうか。結構大きいです。
設定資料集はB5

私は、図解解説はA5、設定資料集などの絵を大きく見せたいものはB5にしています。

ページ数を決める

ページ数は基本的に8の倍数で考えます。

  • 16ページ
  • 24ページ
  • 32ページ 
  • … 

表紙・裏表紙は別で換算します。
表紙・裏表紙は印刷用語で「表1・表2・表3・表4」の計4ページぶんになります。
表1って何?と思った方はこちら

たとえば本文24ページの冊子を作りたい場合、「本文24ページ・表紙込みで28ページ」となります。
ページ数によって印刷費が変わってくるので、印刷所さんのWebサイトをよく確認しましょう。

.cmcファイル

冊子の設定を終えると、「.cmc」という拡張子のファイルができて、こんな感じで連番でページを埋めていくことができます。
(原稿ページ管理機能はCLIP STUDIO PAINT EXだけの機能です)

ページの並び替えもドラッグ&ドロップでできてラクチン!
cmc.png (93.7 kB)

3.全体の構成を考える

どんな項目を入れるかを箇条書きで考えます。

4. プロットを考える(マンガがある場合)

全体の構成の中でも

  • そもそもの場面設定の部分(どういうキャラクターが、どういう状態にあるのか?)
  • 特に力を入れて説明したい部分

をマンガにしていきます。

5. ネームを切る

プロットをマンガに当てこんでいきます。

6. 下書き→ペン入れ

ネームに沿って下書きします。
私の場合は、下書きであることがわかるように青い線で書いています。

マンガ下書き (103.9 kB)

下書きが終わったら、下書きレイヤーの透明度を20%ぐらいに下げ、その上のレイヤーから黒い線でペン入れしていきます。

最後にベタを塗る→トーンを貼る→一番上のレイヤーにホワイトを乗せて仕上げます。

マンガ仕上げ (103.9 kB)

8. テキスト

clipst.png (105.6 kB)

フォントはそれぞれこだわりがあると思うので一概には言えませんが、私が試した中では

  • テキスト部分:F910新コミック体
  • コマンドやソースコードの部分:Osaka

がしっくりくるので、よく使っています。

9. 仕上げに、メモ書きを書き入れたりする

ここがCLIP STUDIOで技術書を作るときの一番のメリットではないかと思うのですが、このように手書きで注釈を入れることで「手書きのノート風」にできるのです。

魔王教授と学ぶGitコマンド入門より

イメージとしては、友達のノートを見ているような感じでしょうか。
CLIP STUDIOだからこそできるこのスタイル、私は結構好きです。

10.いよいよ入稿!

私が普段使っている印刷所さんはサンライズパブリケーションさんです。
対応が丁寧ですし、入稿用のWebフォームもわかりやすいです。

サンライズパブリケーションさんの会員ページはこんな感じ

kaiin.png (103.9 kB)

再版も簡単

saihan.png (46.8 kB)

入稿形式

PSDファイルで書き出して、ZIPファイルにまとめておきます。

表紙は、テンプレートが用意されているので、それに当てこみます。

サンライズ表紙テンプレート

11. サンライズさんのWebフォームからデータを送って完了です

入稿しました

早めの入稿で20%割引

サンライズ割引
ちなみにサンライズさんには「レスキュー」っていうプランもあるけど35%”割増”です。
レスキュー……。

告知:表紙イラスト担当しました

おやかたさん 編の「技術同人誌を書こう! アウトプットのススメ」の表紙と、一部文章を担当させていただきました。
Re:VIEWの使い方から印刷所の手配、当日の準備物まで網羅した、258ページを超える分厚い本になっています。

ワンストップ!技術同人誌を書こう
技術同人誌を書こう! アウトプットのススメ | 出版社:インプレスR&D

Kindle版と冊子版とがお選びいただけます。
Amazonで好評発売中!

おわりに

この記事が「CLIP STUDIOを使ったことはないけど、図解や挿絵がたくさん入った技術書を描いてみたい」という方の参考になれば幸いです。

明日はfinapさんです!よろしくお願いします。

関連リンク

GitHub・Bitbucketの使い方は、こちらの書籍で解説しています。


C4XnLc6UoAAJNrS

「わかばちゃんと学ぶGit使い方入門」

Web連載

著書

#技術書典 3 結果報告:1日で230部売れました

湊川(みなとがわ)あいの個人サークル「マンガでわかるWebデザイン+Git」が、 技術書オンリーイベント技術書典3に出展しました。

  • とき:2017年10月22日(日) 11:00〜17:00
  • 場所:アキバ・スクエア(秋葉原UDX 2F)
  • 一般参加:無料

おしながき

結果発表

みなさん気になるのは「技術書典ってどれぐらい売れるん?」「お前んとこ、どないやったん?」ということだと思うので、まずはつべこべ言わずに結果をドン!しちゃいます。

頒布物 結果
図解でわかるGoogleアナリティクス(個人制作誌) 150部中、130部販売
魔王教授と学ぶGitコマンド入門(個人制作誌) 100部完売
HTMLちゃんICカードステッカー 50枚中、40枚販売
HTMLちゃんアクリルフィギュア 完売
HTMLちゃん丸ステッカー 完売

この1日で合計230部、技術系個人製作誌(同人誌)が売れたってことですね!

ちなみに被チェック数は「157」でした。
https://gyazo.com/b66a470334825685dad73a90c6f15eb1
ありがとうございます!

来場者数

技術書典運営によると、来場者数は次のとおり。

  • ユニークの来場者数では2750名
  • 再入場者を含むと3100名

台風にも関わらず、たくさんの来場者で溢れかえっていました。

技術書典2のときは、同程度の来場者数で、入場時にUDXの裏までぐるっと待機列が回ってしまうという事態が起きてしまっていました。
ところが、なんだか今回はお客様の入場がスムーズ。長〜い待機列もありません。
なんでだろう?

その理由は、今回から導入された整理券アプリでした。

これ、技術書典運営陣が作ってくださったんですよ・・・!

人の混み具合という極めてアナログな問題を、技術力で解決していく。感動しました。
参加者・出展者のことを考えてフルバーストしていく、その姿勢を尊敬いたします。

当日頒布した物一覧

新刊「図解でわかるGoogleアナリティクス」の他、既刊「魔王教授と学ぶGitコマンド入門」、「マンガでわかるWebデザイン 設定資料集」、HTMLちゃんのICステッカー、アクリルフィギュア等のグッズも頒布しました。


https://twitter.com/llminatoll/status/917684806829215744

4コママンガを「コミキャス」で配信しました

TOKYO FLIP-FLOPさんのご協力で #技術書典3 にて、わかばちゃん・HTMLちゃんたちの未公開4コママンガを配信しました。

4コマは2パターン!何が出るかはお楽しみ。
レシートに印刷される要領でマンガが出てきます。これぞ究極のオンデマンド出版!?


https://twitter.com/DesignHumore/status/922151236064788481

「コミキャス」を使ってみて感じたこと

会話の糸口になる

サークルスペースの前に来てジーッと眺めてくださっている方に、「ココ押してみてください」と声かけをしました。
最初は緊張の面持ちだった方でも、マンガが印刷されて出てくるのを見ると、思わず笑顔に。
そこから、「このキャラクターはこの本に登場してるんですよ〜」などと会話の糸口になるのでよかったです。

押してもらうためには声かけをしていく必要がある

待機中の画面には、私が作ったGIFアニメが表示されます。
10月上旬にGIF画像をTOKYO FLIP-FLOPさんに送ると、事前に設定してくださいました。
「ボタンを1回押してね」と書いてはいるのですが、自分からボタンを押していくお客様はいらっしゃいませんでした。
中には、「購入者限定ノベルティなので、なにも買わずにマンガだけもらうのは罪では?」と思っている方も少々いらっしゃいました。

つまり、導入してもその場に置いておくだけだと意味がなく、近づいて来た人に「どうぞ記念に押していきませんか〜」というスタイルで行くのが良さそうです。

「待機中のアニメーションがかわいい」と話題だった、HTMLちゃんの画像も載せておきます。

コミキャスについてもっと知りたい!使いたい!

コミキャスについて詳しく知りたい方はTOKYO FLIP-FLOPさんまでお問い合わせください!喜ばれると思います!

追記

「コミキャス」テストユーザー募集中とのこと!
近日申し込みページが出来るそうです!
TOKYO FLIP-FLOPさんをフォローして情報を受け取ろう💪

まとめ

https://twitter.com/llminatoll/status/922402926839996416
今まで技術書典2、超技術書典、技術書典3と参加してきましたが、そのどれもが心地よく、大切な思い出になっています。
一生懸命作ったものを読んでもらえる喜び。そして同じように、もしくはそれ以上の情熱で作られたものを、作者を目の前にして購入できる喜び。
さらに運営陣の皆様。不満があっても技術力で解決していく、エンジニアマインドを有しているところ。

技術書典は、見に行くぶんにも・出展するぶんにも、最高のエクスペリエンスだと思います。
ありがとう、技術書典。
次回開催時にはまた出たいです。

もくもく執筆会 #techbook_meetup やってます!

「月1開催程度で、みんなで集まってもくもく執筆をする会があるといいよね」ということで@es_kumagaiさんと2017年5月から始めたもくもく執筆会

もくもく執筆会とは

「本を書きたいけど、ひとりだとなかなか進まない」
せっかくだったら、みんなで集まって、もくもく執筆しませんか?
このイベントは、商業誌・同人誌(書籍など)の原稿だけにとどまらず、勉強会の発表資料、ブログ、プログラム、Web ページなどなど、著作物をもくもく作る執筆会です。
オープニングで、どんなものを書くかをみんなに共有したら、あとは、もくもく。 エンジニアもデザイナーもいるので、書いている文章やスライドを見せて相談しあうこともできます。

開催時の様子

直近の開催日

直近では2017/11/23(木) 13:00〜 アトラシアン様オフィスにて開催予定です。

ご興味がある方は、こちらのグループページから「メンバーになる」をクリックして、開催情報を受け取ってくださいね。

「esa 3歳 お誕生日おめでとう」 – あるWebサービスが3歳を迎えた日に立ち会ってきた

「esa 3歳 お誕生日おめでとう」
プレートにはそう書いてあった。
esa3party

「esa社 3周年 おめでとう」ではなく、
「esa 3歳 お誕生日おめでとう」なのである。

ここに、もうすでに愛が溢れている。

esaとは

esa(エサ)は、「情報を育てる」という視点で作られた、自律的なチームのためのドキュメント共有サービスです。

esa-5

esa-6

https://esa.io/

esaの中の人との会話

esa LCCは、エンジニア2名 デザイナー1名の会社です。
お寿司やesaケーキをいただきながら、のんびりとお話ししました。
その中で特に印象に残った言葉を紹介します。

@ppworksさん

「3歳になると、もう喋り始めてる頃だねぇ」
「そこらじゅう走り回ってるよねぇ」

@ken_c_loさん

@ken_c_loさんが、独り言のように「トリ、かわいいなぁ〜」と言っていたのが、すごく良かった。
ああ、esaのことが本当に好きで我が子のように思っているんだなぁ。

@fukayatsuさん

URLに.mdつけた時のMarkdown表示が、Safariだと文字化けすることを雑談の中で軽く共有したら、すごく注意深く、耳を傾けてヒアリングしてくださった。
帰りの電車で「直しました!」と@fukayatsuさんから連絡が来ていた。早い!!

作ってる人に愛されてるサービスが、ユーザーから愛されないわけがない。

https://twitter.com/hiro_y/status/862248169358348288

esa 3歳のお誕生日を迎えて

私には、esaはWebサービスという概念を超越していて、
もはや、esaというスピリットのように見えました。

esa社には、営業がいません。
なのに、esaを使っている企業・チームは、年々増えています。
有名どころだとPixivさんやマネーフォワードさんなど。

「なぜ?どうやって広まっているの?」
その理由は、ただひとつ。
ユーザーからユーザーに、ヨサが伝わっていっているから。

「esa、使いやすいよね」「esa、いいよね」
esaは、押し付けがましくなく、ごく自然にそこにいて、エンジニアとそのまわりの人たちに選ばれていっている。

「言語化できないヨサ」を伝えたい気持ちが、esaを広めていっているのかもしれない

もし今、「esaってなんなの?どういいの?」と聞かれたら、私は答えに詰まってしまうかもしれません。

「esaはね、日報とか、日々のアイデアとか、書籍の構想とか練るのにすごくいいんだよ」

一生懸命喋るけど、言葉だけではesaのヨサを伝えきれていないような気がしてしまいます。

「あぁ、もっと言語化できないヨサがあるんだけどな」って、もどかしい気持ち。

その「言語化できないヨサ」を伝えたい気持ちが、esaを広めていっているのかもしれない。

esa 3歳の誕生日に立ち会って、そんなことを思いました。

esa-8

おまけ:esaのマンガ

esaが好きすぎて、オフィスに突撃して、マンガにしたことがあります。

esaはどうやって生まれたの?わかばちゃんが行くオフィス訪問マンガ – CodeIQ MAGAZINE

esa-4-1

  • 「esa」ができた経緯
  • 中の人の雰囲気や考え方
  • スケジュールは切らない
  • お金は借りない
  • 人を雇わない
  • @fukayatsuさんの、フィードバックに対する反映の早さ

マンガ全体はこちらから読めます。
https://codeiq.jp/magazine/2016/12/47650/

絵を描くWebデザイナー 湊川あいによるわかばちゃんシリーズ

書籍

Web連載

「マンガじゃなくてもGitぐらいわかるでしょ」と言われたことがあります

わかばちゃんと学ぶGit使い方入門

Web連載から始まった「マンガでわかるGit」の書籍版がついに発売となりました!


C4XnLc6UoAAJNrS

「わかばちゃんと学ぶGitの使い方入門」
出版社:シーアンドアール研究所
発売日:2017年4月21日

  • CHAPTER 1 Gitって何?
  • CHAPTER 2 個人でGitを使ってみよう
  • CHAPTER 3 複数人でGitを使ってみよう
  • CHAPTER 4 実用Git 〜 こんなときはどうすればいい?
  • CHAPTER 5 Gitで広がる世界

ステージングエリアやブランチの概念、マージ・リベース・コンフリクト解決・プルリク・GitHub Flowといった基本の使い方はもちろん、CHAPTER4では、間違えた時の回復(revert、amend、detached HEADからの脱出など)も入っています。
マンガ・図解解説に沿って実践すれば、実在の練習用リポジトリでプルリクを試せたり、サンプルサイトをGitHub Pagesにアップできたりもします。

マンガじゃなくてもGitはわかる?

ちょうど一年前、Web連載を始めた当初のことです。
ネット上で「マンガじゃなくてもGitぐらいわかるでしょ」と言われたことがあります。

たしかにそうかもしれません。
そもそも今Gitを使っている人たちはマンガ解説なんて読まずに使えているわけですから。
もちろん、私がGit初心者だったときも、マンガでわかるGitなんてこの世に存在していませんでした。

だからといって、「使える人だけが使えればいい」と、教えることを放棄するのは違うと思っています。
Gitは、もはや特定の人たちだけのものではなく、企業全体、世界全体にもなくてはならないものになっています。

たとえば、4月中頃から一気に流行し始めたMastodon
24歳のドイツ人 Eugen Rochko 氏が個人的に作成したRailsアプリケーションですが、GitHub上で公開されたオープンソースだったからここまで広まりました。
他にも、ホワイトハウスにもGitHubリポジトリがあり、政策文書が公開されていたり、企業によっては企画担当がGitを使ってコーポレートサイトのニュースエリアを更新していたりもします。

Webエンジニアだけでなく、アプリ、ゲーム、組み込み系、原稿管理にも使われているGit。

今や必要不可欠なバージョン管理、せっかく学ぶなら、しぶしぶではなく、楽しく学んでほしい。

そんな気持ちをこめてこの本を書きました。

https://twitter.com/llminatoll/status/856052278716805120

なお、私が図解・マンガ解説という手法をとっている根拠は、下記スライドに載っています。
https://www.slideshare.net/mobile/AiMinatogawa/git-git-75225950

WebデザイナーがWebデザイナーの視点で書きました

クリックしていくだけでGitを使えるツール「SourceTree」を中心に解説しているので、コマンドラインが苦手なWebデザイナーでも、仕事で使えるレベルでGitが使えるようになります。

そもそも私、湊川あい自身がWebデザイナーなので、初心者のみなさんの「Gitって難しそう」「Gitって怖い」という気持ちが痛いほどわかるのです。

Gitの解説書って、エンジニアがエンジニアの視点で書いたものが多いんですよね。
エンジニアの間では当たり前なことでも、Webデザイナーやコーダーにはわからないことも……。

最初のハードルをとっぱらいたい

Gitは、一度理解してしまえば、もう手放せなくなります。

その「一度理解してしまえば」という最初のハードルを、私はとっぱらいたかった。
だから、徹底的に、Gitの概念を図解・マンガに落とし込みました。

具体的にどんな雰囲気かは、Web連載1~9話(基本のキ)をご覧ください。

https://codeiq.jp/magazine/2016/07/42744/

https://codeiq.jp/magazine/2016/08/43433/

https://codeiq.jp/magazine/2017/01/48796/

Gitで私の世界は変わった

私がGitを初めて使ったとき、少しの怖さがありました。
最初はGUIで触り、次にCUIで触りました。
思い通りに操作できるようになると、今度は楽しくなってきました。

人によっては、単なるバージョン管理システムで、些細なことに思えるかもしれません。
でも、私にとってそれはとても新鮮でした。
今までの仕事の仕方さえ変えてくれる、こんな世界があったんだと思いました。

この本で、そういうワクワク感が伝われば、そしてより多くの人の、Gitへの苦手意識をなくせれば、こんなにうれしいことはありません。


C4XnLc6UoAAJNrS

「わかばちゃんと学ぶGitの使い方入門」

 「わかばちゃんと学ぶGitの使い方入門」目次

  • プロローグ(カラー漫画4ページ)
  • キャラクター紹介
  • はじめに

CHAPTER1:Gitって何?

  • Gitで解決できること
  • コミュニケーションの場としてのGitHub・Bitbucket

CHAPTER2:個人でGitを使ってみよう

  • Gitを簡単に使えるツールをインストールしよう
  • リポジトリを作ろう
  • コミットしてみよう
  • コラム◆ステージングエリアから降ろしたい場合は?
  • コラム◆コミットメッセージはなぜ必要?
  • チェックアウトでコミットを移動してみよう
  • コラム◆チェックアウトに表示されている英数字は何?
  • コラム◆分散型バージョン管理システムって何?

CHAPTER3:複数人でGitを使ってみよう

  • GitHubのアカウントを作ろう
  • コラム◆GitHubのプランについて
  • 練習用のリポジトリをコピーしてこよう
  • 並行世界を作ろう(ブランチ)
  • ブランチを統合してみよう(マージ)
  • プッシュしよう
  • プルしよう
  • コンフリクトが起きたら?
  • プルリクエストからマージまで
  • バージョン管理しなくてもいいファイルを無視しよう
  • Bitbucketの使い方
  • コラム◆ブランチの運用ルール

CHAPTER4:実用Git  ~こんなときどうすればいい?〜

  • 過去に戻って新規ブランチを作成、作業をやり直したい
  • 過去のコミットを打ち消したい(リバート)
  • 履歴を一直線にしたい(リベース)
  • コミットを1つにまとめたい(スカッシュ)
  • プルは実際には何をやっているの?
  • リモートリポジトリから最新の状態を取得したい(フェッチ)
  • 不要になったリモートブランチを削除したい
  • 直近のコミットメッセージを修正する
  • 未コミットのファイルを一時退避する(スタッシュ)
  • 別ブランチから特定のコミットのみを取り込みたい(チェリーピック)
  • コミットに目印をつける(タグ)
  • 間違えてHEADに直接コミットしてしまったら

CHAPTER5:Gitで広がる世界

  • GitHub PagesでWebページを公開してみよう
  • コラム◆GitHub Pagesでできるこんなこと!
  • Gitを使うとうれしいこと
  • コラム◆オープンソース/ソーシャルコーディングの世界

  • あとがき

https://twitter.com/hanaguro/status/856404505620922368

マンガでわかるGitが書籍化!書店・Amazonにて発売中 #わかばちゃんと学ぶGit使い方入門

マンガでわかるGitが書籍化

マンガでわかるGitの書籍版 「わかばちゃんと学ぶGit 使い方入門」 が、2017年4月21日に発売いたしました。
dakkou
書籍版タイトルは「わかばちゃんと学ぶGitの使い方入門」、出版社さんはシーアンドアール研究所です。

わかばちゃんと学ぶGitの使い方入門


C4XnLc6UoAAJNrS

Amazonで試し読みする

書籍の内容はどんな感じ?

前半の基本編では、「そもそもコミットとは?ブランチとは?」という解説から始まり、実際にGitHub上でプルリクエストの練習もできるようになっています。
本書のプルリクエスト練習用リポジトリはこちら。読者の皆様から1000以上のプルリクエストが送られています。

後半は「こんなときどうする?」という実用編となっています。
業務でぶつかりがちな問題、例えば「過去のある地点から作業をやり直したい」「作業中の内容を横に置いておきたい」「複数のコミットをひとつにまとめたい」といった、具体的なハウツーも盛り込まれています。

Web連載には掲載されていない内容がほとんどです!

目次

  • プロローグ(カラー漫画4ページ)
  • キャラクター紹介
  • はじめに

CHAPTER1:Gitって何?

  • Gitで解決できること
  • コミュニケーションの場としてのGitHub・Bitbucket

CHAPTER2:個人でGitを使ってみよう

  • Gitを簡単に使えるツールをインストールしよう
  • リポジトリを作ろう
  • コミットしてみよう
  • コラム◆ステージングエリアから降ろしたい場合は?
  • コラム◆コミットメッセージはなぜ必要?
  • チェックアウトでコミットを移動してみよう
  • コラム◆チェックアウトに表示されている英数字は何?
  • コラム◆分散型バージョン管理システムって何?

CHAPTER3:複数人でGitを使ってみよう

  • GitHubのアカウントを作ろう
  • コラム◆GitHubのプランについて
  • 練習用のリポジトリをコピーしてこよう
  • 並行世界を作ろう(ブランチ)
  • ブランチを統合してみよう(マージ)
  • プッシュしよう
  • プルしよう
  • コンフリクトが起きたら?
  • プルリクエストからマージまで
  • バージョン管理しなくてもいいファイルを無視しよう
  • Bitbucketの使い方
  • コラム◆ブランチの運用ルール

CHAPTER4:実用Git  ~こんなときどうすればいい?〜

  • 過去に戻って新規ブランチを作成、作業をやり直したい
  • 過去のコミットを打ち消したい(リバート)
  • 履歴を一直線にしたい(リベース)
  • コミットを1つにまとめたい(スカッシュ)
  • プルは実際には何をやっているの?
  • リモートリポジトリから最新の状態を取得したい(フェッチ)
  • 不要になったリモートブランチを削除したい
  • 直近のコミットメッセージを修正する
  • 未コミットのファイルを一時退避する(スタッシュ)
  • 別ブランチから特定のコミットのみを取り込みたい(チェリーピック)
  • コミットに目印をつける(タグ)
  • 間違えてHEADに直接コミットしてしまったら

CHAPTER5:Gitで広がる世界

  • GitHub PagesでWebページを公開してみよう
  • コラム◆GitHub Pagesでできるこんなこと!
  • Gitを使うとうれしいこと
  • コラム◆オープンソース/ソーシャルコーディングの世界

  • あとがき

書店・Amazonにて発売中

https://twitter.com/llminatoll/status/1005642762039918592
https://twitter.com/llminatoll/status/1034740155116994561

みなさまからの反応

https://twitter.com/vitaone_/status/856509281385852929

発売後4ヶ月経っても、開発技法カテゴリ2位


https://twitter.com/webdesignManga/status/1015011650477281282

書籍版の続きのお話も

中国の出版社からも声がかかり、中国語版も出ることになりました

https://twitter.com/llminatoll/status/998207024620912641

どんどん広がる「わかばちゃんと学ぶ」シリーズをよろしくね


https://twitter.com/llminatoll/status/1033019981607268352