【図解】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連載

Live2Dモデル制作依頼受付中(サンプルモデル・制作料金掲載)

Live2Dモデル制作 ご依頼承ります

こんにちは。本ページをご覧頂きましてありがとうございます。
フリーランスでWebデザイナー・イラストレーター・モデラー・技術書ライターとして活動しております湊川あいと申します。
ご依頼はメールまたはTwitter DMでお請けします。

Live2Dを使ったモデル制作例

わかばちゃん
(拙著『わかばちゃんと学ぶ Git使い方入門』に登場するオリジナルキャラクター)
Live2Dサンプルモデル:わかばちゃん
MP4はこちら(上記はGIF画像なので、MP4の方が滑らかです)
新規イラスト制作からモデリングまでトータルで可能です。

Vtuber化した状態


実際のYouTube動画

イラスト制作からモデリングまでトータルで可能

  • イラスト制作
  • Live2Dを使ったモデリング(Live2D Cubism 2.1・3対応)
  • GIFやMP4など各種データ書き出し
  • Vtuber用のデータ書き出し

既存イラスト使用の場合、PSDデータをいただければモデリングのみでもお請けできます。
レイヤー分けされていない状態からのパーツ化も承っております。

また、「Live2Dモデルを使って、初めてVtuberに挑戦してみたいけど、どうやって配信すればいいかわからない」という方への配信までの技術サポートも可能ですので、別途ご相談ください。

料金

Image from Gyazo
上記モデルですと400,000円が目安です。

  • イラストから描き起こし + モデリング(上半身): 400,000円〜
  • 髪揺れの物理演算追加 + FaceRig用(Vtuber用)の形式に書き出し: 50,000円

すでにイラストがあり、モデリングのみのご依頼の場合は、250,000円前後から承っております。
PSDでのパーツ分けの状態によって工数が変わってまいりますので、別途ご相談ください。

参考として、相場では「イラスト抜き・モデリングのみ」で300,000円〜となっております。

(仕様により価格は変動いたします)

対応しているもの

  • まばたき
  • 口パク(音声によるリップシンク可能)
  • 上半身のXYZ傾き可変
  • 顔のXYZ傾き可変
  • 二の腕の動き
  • 髪揺れ(物理演算)
  • 呼吸

納期

リテイクなしで、最短7日から可能です。
モデルの詳細により変動しますので、ご相談ください。

追加サービス:SNSでの拡散

ご依頼頂きました方には、モデルの公開時に湊川あいアカウントでの拡散もセットで可能です。

Twitterフォロワー数 10812人
 (2019/1/15時点)

Image from Gyazo

連絡先

湊川(みなとがわ)あい
cam51p.g@gmail.com

湊川あいの著書

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

湊川あいのWeb連載

YouTubeヘッダー画像のサイズは2560×1440ピクセル。チャンネルアート作り方2018

チャンネルアートの作り方

2018年8月時点での、YouTubeチャンネルアート(ヘッダー画像)の作り方をまとめます。

チャンネルアートっていうのはコレですね。
YouTubeチャンネルアート:わかばちゃん
アイコンの横の背景、つまりヘッダー部分のことです。

どこから変更できるのか

右上の自分のアイコンをクリックし、画像のとおり操作します。
YouTubeヘッダー変更

チャンネルアート(ヘッダー画像)の右上の鉛筆マークをクリックし、編集に入ります。
Image from Gyazo

推奨サイズは2560×1440ピクセル

チャンネルアートの推奨サイズは2560×1440ピクセルです。
それ以下のサイズの画像(幅1200ピクセルぐらい)をアップロードしようとしたら、サイズが小さすぎると言われ拒否されてしまいました。

というわけで、推奨サイズで筆者が作った画像
Image from Gyazo
パソコンのほか、スマホでも閲覧されるので、どんな形式でも大丈夫なように、真ん中に見せたいイメージが来るように作るとよいです。

画像ソフトはPhotoshopやクリップスタジオなど、あなたが普段使っているものでよいでしょう。

画像をアップロードしたら、こんな感じでプレビューが表示されます。
Image from Gyazo

表示位置の調整はしなくていいみたいですね。
問題なければそのままボタンを押して確定します。

完成

Image from Gyazo

これで、Youtubeのヘッダー画像が変更できました!

チャンネル登録よろしくね

Image from Gyazo
[初心者系VTuber 「いろは わかば」のYouTubeチャンネル https://www.youtube.com/channel/UCky-Q8NPjoohScbfrKU6AWA]

初心者系VTuber「わかばちゃん」のチャンネルです。
Web制作・ゲーム制作などのテック系を中心に、いろんな技術に挑戦していくよ!

原作/イラスト/マンガ/モデリング:湊川あい

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

超初心者のわかばちゃんと一緒に、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〜 アトラシアン様オフィスにて開催予定です。

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

マンガでわかる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

【コラボマンガ】怖くない!黒い画面入門【 #シス管系女子 + #マンガでわかるGit 】

こんにちは!絵を描くWebデザイナーの湊川あいです。
普段
マンガでわかるGit
わかばちゃんと学ぶWebサイト制作の基本
わかばちゃんが行くオフィス訪問マンガ
などを執筆しています。

今回、シス管系女子 アドベントカレンダー22日目、「怖くない!黒い画面入門」として担当させていただきます!

登場人物紹介

わかばちゃん

icon_wakaba_normal

みんとちゃん

icon_mint_normal

マンガでわかるGit コラボマンガ1
マンガでわかるGit コラボマンガ2

icon_mint_normal
へぇ~、大学のゼミでGitを使ってるんだ!すごいね!

 

icon_wakaba_normal
Gitをコマンドで操作できれば、よりGitの理解が深まるのかなと思うけど、なんかハードルが高くて( ꒪⌓꒪)

 

icon_mint_normal
やってみれば簡単だよ!
コマンドが打てるといざというときに役立つし、慣れてくるとクリックで操作するツールよりも早く操作できたりするよ。
 

実践

icon_mint_normal
まずはコマンドを打つための画面を表示しよっか。
こういう画面ね。
ss02

Macの場合

Macの黒い画面(CUI)は「ターミナル」と呼ばれているよ。
Launchpadの「その他」からクリックするか、[Control]+[スペース]を同時に押してterminalと検索すると出てくるよ。
ss01

Windowsの場合

Windowsでは、「コマンドプロンプト」と呼ばれているよ。
[スタートボタン]>[すべてのプログラム]>[アクセサリ]>[コマンドプロンプト]で出てくると思うよ。

Gitのインストール

icon_mint_normal
大学で使ってるってことはGitはインストールしてあるんだよね?

 

icon_wakaba_smile
はい、SourceTreeをインストールしたときに同時にGitもインストールされました。
https://codeiq.jp/magazine/2016/05/41303/

 

icon_mint_normal
なら大丈夫だね。

一番簡単なコマンドを使ってみよう

icon_mint_normal
じゃあ、まずは「pwd」って打って、エンターを押してみて。
 

icon_wakaba_normal
えっ、たった3文字でいいんですか?ピーダブリューディー……っと

$ pwd

icon_wakaba_normal
おおっ、これは!?

$ pwd
/Users/wakaba

icon_mint_normal
これが、わかばちゃんが今いるディレクトリだよ。
pwdは「Print Working Directory」の略なの。「今どこにいるか表示して」っていう意味ね。
 

icon_mint_normal
さらに「ls(エルエス)」と打つと
(Windowsコマンドプロンプトの場合は「dir」)

$ ls

ss03

icon_wakaba_smile
おお〜!
icon_mint_normal
今自分がいるディレクトリの直下にあるものが表示されたね。ちなみにlsはlist segmentsの略だよ。

試しに、今表示された中の「Desktop」に移動してみよっか。
「cd」というコマンドに続けて、ディレクトリ名を打つと、階層を移動できるよ。

$ cd Desktop

ディレクトリを作ろう

icon_mint_normal
さて、デスクトップに移動したところで、Gitの練習用のディレクトリ(フォルダ)を作ろっか。
「mkdir」に続けて、希望のディレクトリ名を打ってみて。

$ mkdir lesson

ss04
icon_wakaba_smile
わわ!デスクトップにフォルダができた!
いつもマウスでやってる作業が、少し文字を打つだけでどんどん出来ていく……!すごい!

リポジトリを作ろう

icon_mint_normal
それじゃ、lessonディレクトリに移動して

$ cd lesson

リポジトリを作る。

$ git init

lesson
※「.git」が見当たらない場合は、隠しファイルを表示する設定にすれば見られると思います。
icon_wakaba_smile
やった!リポジトリができた!
SourceTreeでリポジトリを作ったことはあったけど、黒い画面で作ったのは初めてです!
なんだか嬉しい!
https://codeiq.jp/magazine/2016/06/42023/

サンプルファイルを作ってコミットしよう

icon_wakaba_normal
リポジトリを作ったはいいけど、lessonディレクトリにはまだ何もファイルがないや……
よーし、テキストエディタを開いて適当なファイルを作ろうかな
 

icon_mint_normal
おっと!
せっかくならファイルの作成もコマンドでやってみようよ!

$ echo “こんにちは” > sample.txt

ss05

icon_wakaba_normal
わわっ!ファイルが出来て、しかも内容も入力されてるっ!?
 

icon_mint_normal
へへ、便利だよね。
じゃあステージして

$ git add sample.txt

コミットメッセージをつけてコミット。

$ git commit -m “first commit”

ss06
 

コミットの履歴はこう打てば見られるよ。

$ git log

image
 

icon_wakaba_smile
おお〜!!黒い画面、怖くなかった!
っていうかむしろ便利!
 

icon_mint_normal
ちなみに「↑」キーを押せば、最近自分が打ったコマンドが選択できるから、ラクできるよ。
 

icon_wakaba_smile
みんとさんってすごいですね!
さすが社会人!✨
 

icon_mint_normal
あ、ありがと……///
あたしも最初はちんぷんかんぷんだったけどね(笑)
大野先輩に教えてもらったおかげかな!
 

icon_wakaba_smile
おかげさまで黒い画面への苦手意識が減りました!
あっ、みんとさん、サインもらっていいですか!?
(あとでゼミのメンバーに自慢しよ~っと)

シス管系女子について

発売中の書籍

book-1st
まんがでわかるLinux シス管系女子

book-2nd
まんがでわかるLinux シス管系女子2

Piro先生作「マンガでわかるLinux シス管系女子」は、日経BP社さんの月刊情報誌「日経Linux」誌上で好評連載中のマンガです。
新人女子社員のみんとちゃんと大野先輩が、Linuxのコマンド操作・シェルスクリプトの世界を楽しく解説してくれます!

みんとちゃんのツイッターアカウント

マンガでわかるGitについて

catch_git_syosekika.png (411.8 kB)
Web上で連載しているマンガでわかるGitの書籍化が決定しました。
出版社はC&R研究所さんです。
只今、書籍用の原稿を書き貯めています。
書籍版の内容は、ガッツリ増し増しになりますのでご期待ください(頑張ります)!

Gitコマンドのクイズ

Gitコマンドの選択式クイズがCodeIQさんで出題されています。
2〜3分でサクッと答えられますので、ぜひチャレンジしてみてくださいね〜。

おまけの1コママンガ付き Gitクイズ


emoji_q01.png (62.0 kB)


emoji_q02.png (79.5 kB)


emoji_q03.png (72.5 kB)

マンガでわかるGit(Web連載分)

https://codeiq.jp/magazine/2016/05/41303/
https://codeiq.jp/magazine/2016/07/42744/
https://codeiq.jp/magazine/2016/09/44989/
https://codeiq.jp/magazine/2016/10/45609/
https://codeiq.jp/magazine/2016/12/47695/

わかばちゃんが行くオフィス訪問マンガ

https://codeiq.jp/magazine/2016/10/45631/
https://codeiq.jp/magazine/2016/11/46648/
https://codeiq.jp/magazine/2016/12/47650/

発売中の本

「わかばちゃんと学ぶ Webサイト制作の基本」
わかばちゃんと学ぶ Webサイト制作の基本
8割以上が書籍限定の内容となっております。
HTML5・CSS3のコーディングだけでなく、Webサイトの企画・運用(SEO・アクセス解析)についても解説しています。
アマゾンで冒頭を試し読みできます

謝辞

今回、コラボマンガを描くにあたって、シス管系女子の作者のPiro先生直々に、みんとちゃんの喋り方のチェックをしていただきました。
ご多忙のところご確認いただき、誠にありがとうございました!

Piro先生曰く「みんとちゃんはいつも大野先輩に教わる立場なので、誰かに教えているのは不思議」とのことでした。
言われてみれば、確かにそうですね!
大学生のわかばちゃんから見たみんとちゃんは、きっと憧れの社会人なのだと思います。

Piro先生の、わかりやすく表現するための工夫、登場キャラクターへの愛、学習マンガに対する姿勢……本当に学ぶところが多いです!
今後とも、みんとちゃんたちの活躍を楽しみにしております!

cspy4xnvmaemd4w

Next

シス管系女子 アドベントカレンダー、23日目はKittyAngelさんです!