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連載

著書

SourceTreeのリセットボタンは、git reset全般を指しているわけじゃない

SourceTreeのリセットボタンは、git reset全般を指しているわけじゃない

こんにちは。
三度の飯よりSourceTreeが好き、湊川あいです。

SourceTree好きが高じて、こういうものを描いていたりします。

今回は、Atlassian(JIRA , Confuence, Trello, Bitbucket)のTips Advent Calendar 2017 11日目の担当として、SourceTreeへの愛ゆえに 「SourceTreeのリセットボタンは、git reset全般を指しているわけじゃない」 という記事を書こうと思います。

リセットボタンはどこにある?

リセットボタンは、SourceTreeのツールバーに鎮座しておられます。
リセットボタン

「リセットボタンが見当たらない」という方は、 ツールバーの上で右クリック -> ツールバーをカスタマイズ -> ドラッグ&ドロップ で設置できます。

リセットボタンを使ってみよう

Gitをご存知の方は「リセットボタン」と言われると「いや、git resetにも色々あるし……」と、ちょっとギョッとしてしまうと思います。

ところがこのリセットボタン、実際に触ってみると $ git reset --hard HEAD 的なことをしてくれるボタンになっています。

サンプルリポジトリで試してみましょう。

sushi.txt と cake.txt を作り、それぞれコミットしました。
そのあと、それぞれ間違った内容を追記してしまったとします。

SourceTreeでリセットボタンを試す1

まだコミットはしていません。

ここでリセットボタンを押してみます。

SourceTreeでリセットボタンを試す2

「ファイルの変更を破棄」タブが開きます。
編集はしたけど、まだコミットしていないファイルの変更を、最新のコミットの状態に戻せる ようです。

そして、気になるのはその隣の「すべてをリセット」タブ。

すべてをリセットタブ

え、やばそう

_人人人人人人人人人人_
> すべてをリセット <
 ̄Y^Y^Y^Y^Y^Y^Y^Y^Y ̄

すべてをリセットって、Initial commit まで git reset されてしまいそうな響きですが大丈夫でしょうか。

せっかくなので、「すべてをリセット」してみましょう。

英語で警告文が出ます。

SourceTreeリセット警告文

かまわず[リセット]を押します。

その結果

checkout HEADされた

$ git reset --hard HEAD されました。

git reflogで確認してみるとこんな感じ。
git reflogで確認

ちなみに

$ git reset --hard <コミットID> の操作は、 リセットボタンからは行えません
じゃあどうするのかというと、戻りたい時点のコミットログを右クリックして [このコミットまで<ブランチ名>を元に戻す] をクリックすればOKです。

reset_hard

機能の命名は難しい

SourceTreeだけに限らず、海外の製品全般に言えることですが、日本語のニュアンスに「う〜ん?」と思ってしまうことは多々あると思います。

「仕方ない、このまま使うしかないかなぁ……」

あきらめかけていたそのとき!

実は、誰でも日本語訳に参加できる!

実は、Atlassian製品はボランティアの手によって翻訳されているそうです。

こちらのサイトからで誰でも翻訳に参加できます。

翻訳案を投稿し、得票率でトップをとったら、実際にパッケージに反映されます。

詳細: Atlassian製品の日本語訳を変更する方法 〜多言語対応の裏側〜

こういった細かな言葉のニュアンスは、実際に使っている中で気付くことが多いですし、アトラシアンの方々もそういったフィードバックを歓迎しているとおっしゃっていました。

「この日本語訳はおかしい」で終わればただの不満。

そこから一歩踏み込んで「こうしたらもっとわかりやすいかも」と提案していくことで、より製品がわかりやすく・使いやすくなっていく。

そこに気づけたこと、またそのような場があることは、個人的に大きな発見でした。

皆さんも、何かよい代替名を思いついたら、ぜひ翻訳に参加してみてはいかがでしょうか。

Atlassianアドベントカレンダー、明日は @Kuma365 さんです。
よろしくお願いします!

関連リンク

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


C4XnLc6UoAAJNrS

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

マンガでGitをわかりやすく学ぼう 内容紹介1

マンガでGitをわかりやすく学ぼう 内容紹介3

マンガでGitをわかりやすく学ぼう 内容紹介2

Amazon試し読みできます

Web連載

著書

サイゼリヤミートアップの始め方

こんにちは。三度の飯よりサイゼリヤが好き、湊川あいです。
サイゼリヤ Advent Calendar 20179日目を担当します。

サイゼリヤミートアップとは?

サイゼリヤミートアップは、2017年8月9日に初めて開催されました。

当時の様子をまとめたTogetterがこちらです。

エンジニアがサイゼリヤに行くとこうなる #saizeriya_meetup – Togetter

ご覧いただければ、#saizeriya_meetupがどのようなものか大方わかっていただけるかと思います。

  • 44万PV
  • 563ブクマ
  • 2377いいね

(2017年12月9日時点)

この数値は、全国チェーンであるサイゼリヤの知名度のおかげでしょう。
やはり「みんな知ってるアレ」というのは共感を産みやすく、広がりやすいように思います。

サイゼリヤミートアップに参加したい!

サイゼリヤが好きなら今日からあなたも主催です。各地で自由に開催してください。

実際に各地で開催されている様子。

https://twitter.com/sky_y/status/894924281930436608

数人で始めた#saizeriya_meetupですが、ネットを通じて色々な場所で開催されているのは、なんだか不思議ですね。

サイゼリヤミートアップの始め方

「サイゼリヤに一緒に行けるような友達がいない」

そんな声が聞こえてきそうですが、安心してください。
私自身、東京に来てほとんど友達がいない状態からサイゼリヤ友達ができました。

そもそもの発端

サイゼリヤに一緒に行けるような友達が欲しかった。
https://twitter.com/llminatoll/status/889477177036517376

pixivのBASHさんが反応してくださいました。


めっちゃ詳しい。


やったぜ!

結果

そんなこんなで8月中に7回以上サイゼリヤに行くことになりました。

一人でランチに行ったりもしてるから多分1ヶ月で10回以上行った。

ちょまどさんとも行った!

同じ「Web系の仕事 兼 マンガ家」ということで「いつかカンファレンスなり勉強なりでお会いすることになるだろうなぁ」と思ってたら、まさかのサイゼリヤにて衝撃のはじめまして。

ファミレスでお絵かき。

学生の頃に戻ったようで、楽しい。

マンガでわかるGitの魔王教授も描いてくれました。

お互いのキャラクターを描き合う。

絵描き同士で行くサイゼリヤも、学生気分に浸れてなかなかよいですね。

一人でもできる! #saizeriya_meetup


一人でサイゼリヤに行くのも、立派な#saizeriya_meetupです。
なぜなら、毎回新しいサイゼリヤに出会うことができるから。

今日という日が二度と無いように、今、この瞬間のサイゼリヤは二度と味わえないんですよ。

HTMLちゃん

というわけで、みなさま良いサイゼリヤライフをお送りください。

湊川あいでした。

関連リンク

湊川の著書

Web連載

NARASAKIフレーバーとももいろクローバー

こんにちは、Webデザイナー 兼 技術マンガ執筆をしています湊川です。珍しく雑記です。

NARASAKI(ナラサキ)とは湊川が敬愛する作曲家であり、COALTAR OF THE DEEPERSのボーカル・ギターです。

COALTAR OF THE DEEPERS

COALTAR OF THE DEEPERSは1991年に結成されたバンドです。
日本四大シューゲイザーバンドのひとつですが、COALTAR OF THE DEEPERSにはデスメタル、エレクトロニカ、ネオアコ、ボサノバがミックスされており、異色を放っています。

20年前の曲とは思えませんね。
国内のみならず海外からも人気があるというのも頷けます。

アイドルグループへの楽曲提供

NARASAKI氏はバンド活動の傍ら、ももいろクローバーZへも楽曲を提供しています。
特に、この曲のサビのメロディーにNARASAKI色がよく出ているように思います。

COALTAR OF THE DEEPERSの曲でいうと、こちらが結構近いんじゃないでしょうか。

ここでもう一度、さっきのサビを聴いていただきたい。

NARASAKIフレーバーを感じ取っていただけるかと思います。
むしろNARASAKI氏のボーカルが重なって聴こえるような気すらします。

ももいろクローバーZの「ピンキージョーンズ」もNARASAKI氏の作曲です。

ももクロ以外にも

BABYMETALの「ヘドバンギャー!!」も、NARAMETAL名義で作曲しています。

COALTAR OF THE DEEPERSの曲でいうと、こちらがテイストとして近いでしょうか。

NARASAKI氏がデスボイスと通常ボイス、1人2役やっています。
1人で歌っているとは思えない、ボーカルの幅の広さもCOALTAR OF THE DEEPERSのおもしろさですね。

アニソンも手がける

輪るピングドラムのエンディング曲や、さよなら絶望先生のオープニング曲、はなまる幼稚園のオープニング曲・キャラクターソングなども手がけています。

楽園追放

映画「楽園追放」のメインコンポーザーとしてもNARASAKI氏はその手腕を発揮しています。
こちらのBGMもNARASAKI氏によるもの。

バリバリのエレクトロです。
DEEPERSのアルバム「Yukari Telepath」あたりのスペーシーなエレクトロ感に通じるものがあります。
楽園追放の世界観とNARASAKIの作風が見事にマッチしていますね。

アイカツ

「Signalize!」の他、「タルト・タタン」「いばらの女王」の作曲もNARASAKI氏です。

まとめ

シューゲイザー、エレクトロ、アイドル、アニソン。
まったく違うジャンルの曲でも、NARASAKI氏が作った曲は、どこかNARASAKIフレーバーが漂っている。

この「フレーバー」、音楽だけに限らないように思います。
知人にQingumさんというライターさんがいるのですが、彼女の書いた文章はどことなく彼女の香りがするのです。

「作ったものすべてに、自然とその人特有のフレーバーが漂ってしまう」
そういう人になりたいし、そのためにもどんどんアウトプットしていきたいなぁと思ったのでした。

COALTAR OF THE DEEPERSに興味を持った方は

COALTAR OF THE DEEPERSに興味を持った方はこちらからどうぞ。

湊川の著書

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〜 アトラシアン様オフィスにて開催予定です。

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

【おしながき】 #技術書典 3 に出展します | 図解でわかるGoogleアナリティクス

「マンガでわかるWebデザイン+Git」が、 技術書オンリーイベント技術書典3に出展します。

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

おしながき

ツイートで見る商品一覧

新刊「図解でわかるGoogleアナリティクス」の他、HTMLちゃんのICステッカー、アクリルフィギュア等のグッズも頒布します。

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

また、前回の技術書典2にて、開始2時間で50冊が売り切れた「魔王教授と学ぶ Gitコマンド入門」も頒布します。

「魔王教授と学ぶ Gitコマンド入門」については、なんと今回C&R研究所さんの協力で増刷し、お値段そのまま、製本の美しさがアップ+未公開ラフマンガも4ページついています!
100冊ほどご用意がありますので、ぜひゲットしてくださいね!

会場限定!未公開4コママンガ

TOKYO FLIP-FLOPさんのご協力で #技術書典3 にて、わかばちゃん・HTMLちゃんたちの未公開4コマを配信します。
4コマは2パターン!何が出るかはお楽しみ。ぜひポチッと押しに来てくださいね。

書籍の直売も行います

わかばちゃんと学ぶ Webサイト制作の基本


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

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


Web連載「マンガでわかるGit」が書籍化!
Gitをゼロから学びたいデザイナーさん・今までのGit以外のバージョン管理システムを使っていたエンジニアさん・社内のGit教育用に大変ご好評いただいております。
アマゾンで冒頭を試し読みできます

GitHubでフォークしたリポジトリを本家リポジトリに追従させる方法:SourceTree

わかばちゃんと学ぶGit使い方入門の読者の方から、以下のような質問をいただきました。

プルリク練習用リポジトリにマージありがとうございます。
ところで、自分の所のフォークは更新されないんですね。どうやってするのですか?

以下、回答です。

本家リポジトリ追従方法

GitHubでフォークしたリポジトリを、本家リポジトリに追従させたいということですね!
では画像付きで解説しますね。

ゴール

  • 本家リポジトリ
  • 自分のローカルリポジトリ
  • 自分のリモートリポジトリ

上記3つのmasterブランチの状態を揃えることをゴールとして操作していきます。

今こんな状態だと思います

本家リポジトリで新しく追加されたコミットを取り込みたいが、フォークした自分のリポジトリは、古いままで止まっています。

本家リモートリポジトリを登録する

自分の手元のローカルリポジトリに、本家リモートリポジトリを紐づけます。左メニューの「リモート」を右クリック→「リモートを追加」をクリックします。

リモートリポジトリの名前(なんでも好きな名前をつけてOK、この例ではupstream)と、本家リポジトリのGitリポジトリURLを入力します。
書籍練習用のGitリポジトリURLは https://github.com/elmas3/pull-request-practice.git です。
(GitHub上でclone or downloadボタンをクリックした時に出てくるURLです)

OKを押すと、本家リポジトリ(書籍の中で言う、エルマスさんのリポジトリ)が追加されました!

本家リポジトリからローカルリポジトリにプルしてみる

左メニューの「リモート」欄に、「upstream」が追加されました。右クリックして「upstreamからプル」をクリックします。

このような画面が表示されます。1→2→3の順にクリックします。
これは「エルマスさんのリポジトリのmasterブランチから、ローカルリポジトリのmasterブランチへプルするよ〜」という設定です。

プルできた!

本家リポジトリ(エルマスさんのリポジトリ)からローカルのリポジトリにプルできました!

あとはプッシュすればOK

あとは、自分のローカルリポジトリから自分のリモートリポジトリにプッシュするだけです。

これで、

  • 本家リポジトリ
  • 自分のローカルリポジトリ
  • 自分のリモートリポジトリ

上記3つのmasterブランチの状態が揃いました!

対応書籍

動画学習サービスSchooにて「Git超入門」講師をはじめます

こんにちは。フリーランスでWebデザイナー・技術書執筆・マンガ家・コンテンツライティングをやっている湊川あいです。

このたび、2017年8月5日から動画学習サービスSchoo(スクー)にて、講師をはじめます!

わかばちゃんSchooバージョン

授業ページ: わかばちゃんと動画で学ぶ Git超入門

どんな授業?

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

Git初心者の女の子「わかばちゃん」と一緒に、動画で楽しく、ハンズオン形式でGitを学んでいくことができます。

クリックしていくだけでGitを使えるツール「SourceTree」を使い、主に普通のテキストファイルを扱って授業を進めて行きますので、プログラミング未経験でも安心して授業を受講することができます。

書籍版との違いは?

書籍版「わかばちゃんと学ぶGit使い方入門」との違いは以下の通りです。

  • 各回の後半に、コマンドでのGit操作を動画で見ながらゆっくり実践できること。
  • 書籍ではWebサイト用のコードを扱うが、動画版ではさらに初心者向けに”すべてテキストファイル”で実践できること。
    • 視聴者の中には、コーディング未経験の方もいらっしゃるかもしれないため。
    • HTMLとかCSSとか、プログラミングとか出てきませんから安心してね!
  • 書籍版と違って、リベース、スカッシュ、チェリーピックなどの応用編の話は出てきません。

エンジニア志望の方はもちろん、デザイナーさん、コーダーさんなど、「SourceTreeは使えるけどコマンドでもGitを使ってみたい!」という方にもオススメです😊

生放送を見逃しても、あとで見られるの?

はい!Schoo内で見られます。
初めてSchooにログインした方は、無料チケットが2枚もらえるので、それで見逃した分を見るのもいいかもです。
https://twitter.com/kmix_01/status/886238820953317376

先生ページができていた

湊川あい Schoo
湊川あい先生のプロフィール 教員名簿 – Schoo(スクー)

Schooさんからお話をいただいたその一週間後には、先生ページができていました。
Schooさん仕事が早い!

それにしても先生だなんてなんだか照れちゃいますね。笑

頑張って授業資料を作っていきます!お楽しみに!

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

書店さま・Amazonなどにて大好評発売中です!


C4XnLc6UoAAJNrS

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

DIST.16に登壇しました【わかばちゃんと学ぶ フリーランスのための情報整理術】 #dist16

こんにちは! フリーランスWebデザイナー/技術書執筆/マンガ家/イラストレーターをやっております、湊川あいです。

2017年 6月23日(金)、DIST.16 「esa meetup in Tokyo〜情報共有Night」に登壇してきました。

発表したスライド

このテーマで話すにあたって、会場のみなさまの状態を確認したかったので、しょっぱなにこんな質問を投げかけました。

  • 「今、フリーランスだよ」という方、手をあげてください
    • 10%挙手
  • 次に、「フリーランスになりたいと思っている・なる予定だよ」という方
    • 5%挙手
  • 最後に、「会社で働いているけど個人活動もやっているよ」という方。たとえば、OSS活動・個人でアプリやサービスを作って公開・記事の寄稿・勉強会登壇など
    • 60〜70%挙手(多い!)

発表タイトルに「フリーランスのための」とついてはいるものの、対象は「今フリーランスの人」だけではなく、「余暇で個人活動をしている人」にとっても役立つ内容になっております。

みなさまからの感想

ツイッターで #dist16 タグのついたつぶやきです。
上のスライドと合わせて読むと会場にいる気持ちになって面白いかもです。

みなさま大いに反応いただき、笑いの絶えない発表でした。
喋っていて非常に楽しかったです。

結城先生からの激励

発表直前に、「数学ガール」シリーズで有名な結城浩先生から激励のリプライが来たのが、とても嬉しかったです。


結城先生から直々にプレゼンのアドバイス!なんという贅沢。
おかげ様で、落ち着いて喋ることができました。本当にありがとうございます。

なぜ人前で喋るのが好きか?

私はもともとプレゼンは苦手でした。

ところが、転機が訪れました。
大学3年生のころです。
とある授業で、めちゃくちゃプレゼンが上手い先輩に出会ったのです。
私はその人に憧れました。
授業があるたび、プレゼンのアドバイスをもらい、間のあけ方を真似したりしていました。
それを2年ほど続けた結果、人前で喋るのが大好きな人間になりました。

その頃の経験が、5年後の今、こうして別分野にも役立つ。
不思議なものですね。

DISTというイベントのヨサ

DISTは、職種や技術の垣根を越えてWebに関わるすべての人を結ぶクリエイティブコミュニティです。

Web制作関連をテーマとした勉強会を、2ヶ月に1回程度のペースで開催しています。デザイナー、エンジニア、ディレクターなどあらゆる立場の方に参加していただき、その知の共有、研鑽ならびに参加者同士の交流を目的としています。

公式ページより引用

私は会場に早めに到着したので、発表スライドに目を通しておりました。
その間、スタッフさんたちが、会場の音声や映像系統を、次々に整えていきます。
特に、主催の沖さんが大人数のスタッフにテキパキ指示を出していく様子は圧巻でした。

本番が始まってからも、ガッチリとした司会進行に安心して発表することができました。

みなさまの発表

esa.ioのご紹介 〜気軽に思いを発信できる文化を作ろう〜

esa LLC
エンジニア 越川 直人さま 
デザイナー/Co-founder 赤塚 妙子さま

Node学園祭とesa.io

Node.js 日本ユーザーグループ
代表 古川 陽介さま

サービス開発を加速させる情報共有

株式会社spice life
CTO 赤松 祐希さま

情報共有からはじめるチームづくり

ソフトウェアエンジニア
小久保 祐介さま

みなさまのスライド

他の登壇者のみなさまのスライドは、Rubyエンジニアのてぃーびーさん@tbpgrがこちらの記事に丁寧にまとめてくださっています。

DIST.16 「esa meetup in Tokyo〜情報共有Night」のおでかけメモ

esaの中の人は、ユーザーの声を元に、その場でイシューを立てていた

https://twitter.com/ken_c_lo/status/878223728873689089

はー、こういう行動ひとつひとつが信頼感を作るんだなと。

ユーザーの声に耳を傾ける。
どんな小さなフィードバックも聞き逃さない。

Webサービス開発者の鏡だ……。
ただただ尊敬。

esa、愛されている感

esaというサービスが好きな人たちがこんなにいて、esaの活用事例を知りたいがために東中野という場所に100人近くも集まる。
なんて幸せなサービスだろうか。
そのことをesaのデザイナーの赤塚妙子さんに伝えたら、とても嬉しそうな顔をしていらっしゃったのが印象的でした。

私、湊川あいをスピーカーの選考候補に推薦してくださった方々、そしてお集まりいただいた方々に大きな感謝を。

HTMLちゃん

P.S.
録画されたものは後日Youtubeでアップロードされるようです。
会場の笑い声や雰囲気、とてもよかったので、マイクが拾ってくれてたらいいな。

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

書店さま・Amazonなどにて大好評発売中です!


C4XnLc6UoAAJNrS

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

Windows版SourceTreeがVer 2.1系列になって、ローカルリポジトリの作り方がわからなくなった方へ

ローカルリポジトリの作り方がわからない問題

「わかばちゃんと学ぶGit使い方入門」の読者様より、
Windows版SourceTreeのバージョンが上がり、書籍発売時とはUIが変わったため、ローカルリポジトリの作り方がわからないという質問をいただきました。

以下に、SourceTreeのバージョン2.1系列の、ローカルリポジトリの作り方を載せますのでご参考になれば幸いです。

ローカルリポジトリの作り方

キャプチャ画像は、クリックで原寸大に拡大できます。

1. 書籍50ページの②の画面

「わかばちゃんと学ぶGit使い方入門」 50ページで「ファイル」→「新規/クローンを作成する」をクリックしたところからのスタートです。

2. リポジトリを作るので「Create」をクリック→「Browse」をクリック

beta_No-12

3. sampleフォルダを選択

beta_No-13

4. 「作成」クリック

beta_No-14

5. リポジトリができました!

beta_No-15

これ以降のステージ・コミットの操作は、多少UIが違うものの基本的には同じように使えると思います。

何かわからないことがあれば @llminatoll までどうぞ。わかる範囲で回答させていただきます。

マンガでわかるGitが書籍になりました

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

書店さま・Amazonなどにて大好評発売中です!


C4XnLc6UoAAJNrS

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