技術書典7 行ってきました

※本記事と同内容をnoteにも投稿予定です。

はじめに

今年もありました、技術の祭典『技術書典7』！
筆者は同イベントに行くのは2回目ですが、サークル数も来場者数も前行った(技術書典6)時より格段に増えていてびっくりしました！
規模が大きくなった分、様々な方々と交流でき新たな発見もできたように思えます( ˘ω˘ ＊)

せっかくなので、この「技術書典楽しかったぜ！！」って気持ちが冷めやらないうちに感想とか色々書いておこうかなと。
当日の様子や戦利品、そして会場内で気になったこととかをつらつら書いていきます〜。
また筆者は有料枠の午前中入場で入ったので、「有料枠で入って損じゃなかったか」という点も合わせて…。
(結論から言うと、 全く損じゃなかった です！)

それでは行きましょう！

当日の様子: 入場前

まずは入場前の様子から…の前に入場に関することを1つ。
前回もそうでしたが、今回の技術書典も「11時〜12時に入場するには有料の入場券が必要」というスタイルでした。
入場券は前売り販売と当日販売があり、価格は前売り販売は1000円、当日販売は技術季報¹もついて2000円です。

そして、今回は会場が2つ(2階と3階のブース)に分かれていたため、各階によっても入場券が異なる形となっておりました。
※11時から2階に入場できる券と、11時から3階に入場できる券…で分かれていた感じです。

小話

また、売り切れ速度から見るに恐らく「11時から3階に入場できる」券が最も人気だったのかなと…。
各入場券の中で、最も早く売り切れちゃってました。
3階ブースはWebやクラウド系の技術がひしめき合っていたためでしょうかね…？

今回は筆者は「11時から3階に入場できる」入場券を前売りで購入してました。
そして会場に着いたのは10:40位…。
ですが、驚くことにもうその時から入場待機列の長蛇の列が広がってました…ざっと400人くらいはいたと思います。

結局筆者が会場に入れたのは11:27でした。
でも待機列の長さからすると、びっくりするくらい早く入場できたように思えます。

ちなみにこの待機列は、「2階に入場する人」「3階に入場する人」関係なくごっちゃになってました…入場直前で振り分けられて入場って感じです。

なお、会場の中で3階に上がる会場の階段には「技術書典に参加される方々はこの階段使用禁止」の立て札があちこちありました。
経路を絞って渋滞を緩和する一環なのでしょう…イベントを催す時は会場の事を深く知っておかないといけないんだなぁと思いました。

お次は会場の様子について、見ていきたいと思います！

※ここからは「3階フロアしか見なかった筆者の主観や感想」となります。2階についてはあまり言及していないのでご注意を…

当日の様子: 会場について

長蛇の入場列を切り抜け、なんとか会場に入れた11時30分ごろ。
開会してからそこまで時間が経っておらず、おまけに「その時間帯は入場できるのは有料入場券持っている人のみ」ということもあり、そこまで人混みごみはしてなかったです。

また、各サークルさんを見ても「残り部数わずかです！」という方も見なかったかなと。
前回行った時は閉場1時間前の16時に入っちゃったので、大概が「売り切れ」だったり「電子版しかない」だったりでしたが…。
早い段階で行けばそういうことはなさそうですね。

サークルさんの傾向とか

3階に配置されたサークルさんは、下記のようなジャンルをメインで取り扱うサークルさんが多かったように思えます:
※あくまで個人的な主観から見た内容です

• クラウド:AWS, GCP, Azure, AliCloud(AWSやGCPが多かったです)
• Docker, Kubernetes
• iOS/Androidアプリ(iOSの方が多かった気がする)
• Typescript, React, Vue.js
• Go, Ruby, PHP
• セキュリティ
• デザイン(同人誌表紙デザインに関する本もありました。ちなみにバ美肉系技術(Live2Dなど)については2階にありました)

また、協賛企業としてでなく1サークルとして出している企業サークルさんもちらほらありました。
AbemaTVさんやMoneyForwardさん, CookpadさんとかMERYさん、GoodpatchさんとかSmartHRさんとか。
その企業がリリースしているサービスの技術的な裏側について書かれた本…を多く出されていたように思えます。

※ちなみに完全に余談ですが、Cookpadさんが出してる本の表紙にはめっっちゃ可愛い女の子書かれてました。
またSmartHRさんは本をまさかの無料頒布してました…！
「絵文字の歴史」などの為度が高い内容も書かれてて為になりました…無料でいいんですか…_:(´ཀ`」 ∠):

そして、「既刊」を出しているサークルさんが結構な数いらっしゃったように感じました…！
「既刊●冊、新刊●冊」といったPOPや呼び込みしている方が割といらっしゃったような…。

技術季報の「技術書典6 実施レポート」を見た感じだと「前の技術書典で執筆活動を開始した人がまた技術書典にて出展する」ケースも多いようですので、技術書典はサークル参加者側のリピート率が高いイベントなのかなぁとも思いました。
※もちろん、技術書典でないイベントで出されていた方もいらっしゃるとは思いますがね…

頒布物とか

販売物は本が圧倒的に多かったです。
ちなみに本を買うとその本の電子版DLカードが一緒についてきたりというケースが結構多かったです…。

出されてある本も、表紙デザインが凝っていたり表紙に和紙加工など特殊加工をされているものなど様々でした！
価格帯は1000円くらいの本が多い印象で、ページ数と価格帯には比例傾向は見られませんでした。
50Pの本が1000円だったり、250ページくらいの本が2500円だったりまちまちです。
この辺りはサークルさんのさじ加減…といったところでしょうか。

また、本と一緒にボードゲームも売られているサークルさんもありました。
こういった技術系に特化したボドゲ、対面ではなかなか買えないのでありがたいです…_:(´ཀ`」 ∠):

展示方法については、見本誌を置かれているサークルさんがとっても多かったように思えます。
同人誌と違って、内容まで見ないとなかなか購入判別つきづらいですからね…。

また、中には「出品本の目次ページを広げて展示している」サークルさんもありました。
目次ページを見て買おうか買わないかを判別することが多い筆者としては、すっごくありがたかったです…！

展示ブースの装飾についても、ポスターやPOPを活用されてあるサークルさんが多かったように思えます。
登りまで用意されているサークルさんは流石にあまりなかったですが…。

ちなみに個人的には、ポスターや登りなど「遠目から見てもサークルの内容がわかるPOPがあるとありがたいな」と感じました。
というのも、サークルの前は見本誌を読んでいる人で埋まりがちで…。
サークルの前を通っても「人で見えなくて何を展示されているサークルさんであるのかすらわからない」という時が多々ありました。

なおこれは、個人的には技術書典固有の傾向であるように思えます。
他の同人誌即売会では、見本誌をじっくり読んだりする傾向はないでしょうから…。

催事スペース

催事スペースには「進捗神社」や「戦利品撮影コーナー」、Cybozuさんが設営する「カフェコーナー」がありました。
進捗神社は11時半ごろはそこまで人はいませんでしたが、12時〜13時くらいになると結構な行列ができておりました…！
(皆さんだいぼさつに拝んでおりました)

また、戦利品撮影ブースは筆者が行った時は誰もいなかったのですが、「誰もいない！チャンス！」と見てせっせこ戦利品撮影ブースを使っているとたくさん人が来て皆んな利用し始めていった…という感じでした。
楽しそうにやってると自分もやりたくなってきますよね…わかります( ˘ω˘ ＊)
ちなみに筆者はこんな感じで写真撮りました:

幾つかの本、重なってしまって本当すみません…

戦利品がありすぎて、運営の方々に色々ご迷惑おかけしちゃいました…。
並べたり色々するのに手伝っていただいた運営の方々に心から感謝を…本当すみません、ありがとうございます…。
(ちょっとテンパりすぎて全然お礼言えなかった)

来場者の方とか混雑状況とか

来場されていた方々を見ると、学生さんっぽい方から小学生くらいの小さなお子さん、社会人の方々まで非常に幅広い方々がお越しになられていたように感じました。

中には60歳を超える方も…！(なんとサークル参加側にいらっしゃいました！)
技術は年代によらないのだなと、強く感じました…。

とはいえ、最も多い年齢層は30代くらいの方々であるように思えます。
エンジニアの寿命とも言える年齢層にかなり被っていそうだなと思いました…。

そして…当然のように女性は少なく。9.5:0.5くらいかな…いやもっとかな…
技術界隈の宿命なんですかねぇこれも…。

また、こういうイベントでよく言われる「ニオイ問題」ですが、3階についてはそこまで気にならなかったと感じてます。
(筆者がいた時間帯の11時半〜13時ごろは少なくともそうでした)

ただ、ニオイについて2階にいた友人に聞くと「2階はニオイ結構しんどかった」とのこと…。
2階は3階に比べ、場所が狭かったらしく「ニオイやばい人の影響」が大きくなりやすかったのかもしれませんね。

当日の様子についてはここまで！
(ここまで！って文量でもないですが…いやすごい量に…)
お次は戦利品について見ていこうと思います！

戦利品

今回は3階の会場の戦利品しか見れてませんが…。
それでもヤベー量の本を買っちゃいました。ざっと35000円くらい飛んだかな…:(；ﾞﾟ'ωﾟ'):

技術書典7、戦利品1/2です！
・運営さん、企業さん
・デザイン系
・クラウド&Docker系
・その他
って感じで分けてみました_(┐「ε:)_

まだ技術季報しか読んでないので…じっくり読んでいきましょ_(:3」∠)_ pic.twitter.com/1gxqDNScox

— Aik(アイク) (@aik0aaac) September 23, 2019

技術書典7、戦利品2/2です！
・プログラミング言語系
・マインド系
って感じで分けてみました！
めっちゃ買ったんやなって…( ˘ω˘ ;)ﾖﾒﾙｶﾅ pic.twitter.com/Uq5BPHnc1l

— Aik(アイク) (@aik0aaac) September 23, 2019

3割くらい衝動買いしちゃいましたが、こういう場所での衝動買いなら許されますよね(セルフコンパッション)

これら戦利品を読んだ感想は、別記事に載せようかなと思います(忘れなければ)。
でも1冊だけ…運営さんが出展された『技術季報』についてだけ、ここで感想を書いていこうかなと思います！

『技術季報』読んだ感想

読んでみてまず驚いたのは「技術書典に行動規範やアンチハラスメントポリシーが設けられていること」でした。

というのも、当本の最初にこれら項目が書かれていて…。
公式サイトを見ても、サークル参加ガイドラインしか設けられていない点から、これまで筆者は「技術書典はサークル参加者側の整備は丁寧にやっている(イベント参加者側の規範はまだ決まっていない)のかなぁ」と思っていたのですが…。
しっかりイベント参加者側にも、守るべき規範が明記されていたのですね…。
※技術書典公式サイトを改めて見ると、「利用規約とポリシーをみる」ページには記載ありました

内容もすっごく良いこと書かれてあるので、ぜひ「イベント参加者ガイドライン」とかで別途書いて欲しいなぁとか思ってみたりしました。

また「技術書典6 実施レポート」では、サークル参加者が書かれたアンケートを元に「前回の技術書典の傾向」がわかりやすく掲載されており、そこでも様々な驚きがありました。

持ち込み部数数や頒布部数、完売率や完売した時間帯、展示形態(見本誌利用した、お品書き利用した、PC/タブレット使って実演した、とか)の他にも、
「サークル参加を継続する場合、重要だと考える要素(収益や楽しさ、とか…)」など多岐にわたるデータが掲載されております。

データを見るだけでも面白いですが、今後技術書典に出展するときの参考情報としても非常に有用そうです！

「運営の裏側」という稿も面白かったです。
今回の稿は「サークル配置編」となっており、年々増え続ける規模に対応するべく、運営さんがどんな対応をなされているのか&どんな試行錯誤を行なっているのかが非常に理解できる内容でした。
(サークル配置に毎回毎回すっごく苦労されている事も見受けられました…まぁでしょうね、技術分野は広いから…)

そして、最後に記載されていた「技術書を書こう！」という稿は「技術書を完成させるにはどういうことをすればいいのか」「技術書を書くときのコツ」が記載されており…。
「これから技術書を書くぞっ」という方(筆者みたいな)にはとってもありがたい情報が詰まってます。

過去の技術書典のデータから見た販売数の指標や、主な予算項目(印刷費とかデザイン費とか)と目安額についても記載されてありました…神かな_:(´ཀ`」 ∠):

戦利品についてはここまで、次は「有料枠で技術書典に参加し、損ではなかったか？」について見ていこうと思います！

有料枠で入って損じゃなかったか？

本稿を語る前に、有料枠についてもう一度おさらいを。
今回の技術書典では「11時〜もしくは12時〜入場する際には有料券が必要」でした。
また今回は会場も分かれており、当日と前日までで販売形態が分かれていたため、様々なパターンの有料入場券が販売されていました。

筆者が今回買った入場券は「11時〜入場」の「3階」フロア、「前日」販売の入場券で価格は1000円。
結論から言うと「全然損じゃなかった」ように思えます！
ここからはその理由…もとい有料枠のメリットについてつらつら書いていきます。

人混みに困らない

どうやら有料入場枠は限られているようなので、無制限で入場可能な13時以降と違い「入場人数はある程度抑制」されます。
13時以降、誰でも入れるようになる時間帯と比較すれば、母数が少ない分ゆったりできるんじゃないかなと思います。

先の項でも書いてたように、3階はそこまで混んでもいなかったので…人混み解消という点で、有料枠で入るのは良い手じゃないかなと思います！

出展物が売り切れてて買えない…なんて事がない

こちらは早く入場できるメリットの最大点とも言えると思います。
というか筆者が有料入場券を買った理由の大部分がここです…。

前回参加した時間帯の16時〜だと、売り切れているサークルさんが本当に多かったのでね。
人気サークルさんだったり、頒布物量が少ないサークルさんが狙い目だったりする方にはうってつけかなと思います！

気力満タン状態に近い方々と交流可能 ※個人的主観

筆者もオンリーイベントにサークル参加したのでわかるのですが、サークル参加者側ってめちゃくちゃ気力使います。

開場されたすぐだと「どんな方が来てくださるかな」「自分の本手に取ってもらえるかな」とか、そういったドキドキの中で来場者の方と応対できるので、割と全力で応対できるのですが…。
お昼過ぎてきたり、閉場間際になっちゃうと、どうしても疲れからか全力で応対できなくなってきます…。
そうなってくると、1人1人に対して意欲的に説明できたりなんてなかなか…。

だからこそ、開場されたすぐにサークルさんの所に行けば「気力満タンな方々と熱く色々話せたり交流できるんじゃないかな」と思います！
まぁもちろん、人にもよるので…あくまで「疲労度的な観点から見ると」と言う話です。

技術に関する関心が高い方々と触れ合える ※要コミュ力

こういったイベントに参加する時点で技術的関心は高い方々は多いと思いますが、更に「わざわざ有料枠で入場される方」は総じて「特に技術に関する関心が高い方々」ばかり…だと思います。

そういった方々と、人混みが少ない傾向にある午前中に触れ合える…そんな機会を得られるのも、有料枠を買うメリットの1つじゃないかなと思います。
(ふれあいに行くコミュ力は必要ですが)

結論:有料枠は損じゃない！

…とまぁ色々述べましたが、それでも「ただ早く入れるだけなのに1000円も払うかな…」と言うのは悩みどころさんだと思います。
(1000円もあれば技術書典で頒布されている技術書1冊は買えますしね)

でも、上記にあげたメリットは、有料枠でしか手に入らないんじゃないかなと思います。
(まぁ個人的にはいいよって思ってるだけなので…はい…

本項についてはここまで、次は「次回技術書典に行く際に、個人的に気をつけておきたいこと」について見ていこうと思います！

次回行く際に気をつけたい事

今回の技術書典に参加し、友人と振り返った際「ああここはめっちゃ気をつけないとな」と思った点が1つあるので…。
自戒も込めて、ここに記しておこうと思います。

本の取り扱い方

大概の技術書は薄めであるため、「本を開いた時の折ぐせが非常につきやすく」なってます。
このため、内容確認に本を読む時に開いて読んじゃうと本にクセがつき、新品の本の状態を維持できなくなってしまいます。
内容確認のために読む際は、本を開くのはせいぜい30度くらい開くまでにとどめておいた方がいいなと思います。

見本誌なら良いと思いますが、実際に頒布している本を手に取った時に気をつけなきゃなと思いました。

次回記事に続く…かも？

めっちゃくっそ長大な記事になっちゃいました…。
ここまで読んでくださった方には感謝しかありません…。本当にありがとうございます！

次回は戦利品読んだ感想について書いていきたいと思います…が、戦利品の量が量なんでね…。
はたしていつになるやら。

各本について色々感想書いていきたいと思っているので、期間はめっちゃ空くかなと思いまする…。

それでは！

---

1. 会場図やサークル配置図、前回の技術書典6実施レポートや運営さんたちの裏話が載った本です。今回の運営さんたちの裏話は、サークル配置の自動化への道のりについてとっても濃い内容が書かれており、読んでいて非常に面白かったです！↩

かの有名なサンバ踊りCSSに機能追加してみました

はじめに

私が日課となった技術系面白記事を発掘していたところ…。
つい最近に投稿された記事で、めったくっそ面白い記事を発見しちゃいました。 qiita.com

なぜ私がこのような物を作ったのか、突如インスピレーションしたのかもしれないし、
５月中旬の時の、私の精神状態がおかしかったのかもしれない。
ただ、同期の中では、想定外の事実に直面した時に思わず声をあげてしまうような人間がいたことや、
デバッグで頭がおかしくなってしまった時に、サンバを踊る文化があったことだけは事実である。

〜本家記事より抜粋〜

ちなみに本家の成果物は下記にございます。
Ctrl+Enterを押した後の衝撃は格別です…！ yuichisemura.github.io

こんな面白い成果物に、せっかくなのでちょっと機能追加したいなと思い…。
GithubからForkボタンをポチーと押し作っちゃいました。

今回の記事では機能追加に至る道のりを書いていこうと思います。
ちなみに完成物はこちら: aik0aaac.github.io

ソースコードはこちら: github.com

((ちなみに筆者のFork経験はこれが初めてになります。
((勝手にやってしまってよかったのでしょうかね…暗黙の了解とかあるんでしょうか…。

機能拡張までの道のり

先に申し上げておきます。
今回機能追加と言っておきながら、大変申し訳ないことにコードの実装内容も大改編しちゃいました。
本当勝手に…ｺﾞﾒﾝﾅｻｲ…。

Vue.jsの検討

対象となったリポジトリのコードを見ると、PureJSで全て記載されておりました。
jQueryで書かれていたら、まず間違いなくjQueryに甘えて機能追加していたでしょう…本当に感謝です。

ただ、例えばサンバを踊らせるための顔文字下記のコードですが:

<p class="left">＼</p><p class="face">(^p^)</p><p class="right">／</p>
<p class="left">＼</p><p class="face">(^u^)</p><p class="right">／</p>
<p class="left">＼</p><p class="face">(^s^)</p><p class="right">／</p>
〜以下省略〜

…という風に書かれており…。
個人的に「Vue.jsのコンポーネントを利用すればスッキリ書けそう」と思い(後Vue.jsの勉強も兼ねて)、本コードにVue.jsを適用するところから考えてみました。

Vue.jsコンポーネント化

ひとまずは先の部分をコンポーネント化しました。
Vue.js公式記事だったり他記事を見ながら勉強…。
出来上がったコードはこちらになります。

const SambaPerson = {
  props: ['mouth'],
  template: '<div class="samba-person">' +
    '<span class="left">＼</span>' +
    '<span class="face">(^{{ mouth }}^)</span>' +
    '<span class="right">／</span>' +
    '</div>'
};

こうする事で<samba-person-component mouth="p"></samba-person-component>と書けば＼(^p^)／が出る様に！
いやーコンポーネント化って神ですねまじ。

ちなみに、コンポーネント化するときはtemplateはrootとなるDOM要素が唯一1つ無ければならないらしく…。
(ルートエレメントは1つでないといけない)
例えば下記の様なHTMLをtemplate化しようとすると、Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.エラーがでます。

<span class="left">＼</span>
<span class="face">(^{{ mouth }}^)</span>
<span class="right">／</span>

この仕様に気づかずエラーを連発しまくり非常に苦労しました…。
Vue.jsの根本を理解しておけばよかったのでしょうかな。むむむ…。

機能追加: カスタマイズ絵文字がサンバできる様に

さて本題、機能追加です。
私が思いついた機能は「自分で作ったカスタマイズ絵文字もサンバで踊れる様にすること」。
出来ればダンサーたちを増やしたかったりしたのですが…そこまでは手が回らず。

ひとまず下記の様な感じにできました。

一緒に踊れるよ

上記処理に該当するコードは下記の様な感じ。
Vue.jsが保持するdataをinputタグのValueにv-modelでバインドさせてます。
このお陰で入力するたびに踊っている顔文字が変化していく様になりました！たまたまですけどね

<samba-person-component v-bind:mouth="customSambaPerson"></samba-person-component>
〜中略〜
<section id="samba_add_wrapper">
  <span>一緒に踊る:</span>
  <input type="text" v-model="customSambaPerson">
</section>
…

let sambaApp = new Vue({
  el: '#sambaApp',
  data: {
    customSambaPerson: '',
    sambaNowDoing: false,
  },
  components: {
    'samba-person-component': SambaPerson,
  },
…

命名規則、HTML構造、JS構造を整備

今回は、コード読解も兼ねて命名規則を自分好みに修正したり、HTML構造やJS構造を自分好みに整理したりと
人様の書いたコードの…特にパフォーマンスに影響しない項目にまで手を加えちゃうのに何とも言えない罪悪感を覚えながら…。
でも、自分が見やすいコードにするためには…と言い聞かせながら整備していきました。

命名規則については、例えば下記の様に:

• yure → shakeにしたり
• yurezu → not-shakeにしたり
• left → left-handにしたり…

HTML構造については、sectionタグやmainタグを積極的に用いる様にしただけです。
下手にいじるとCSSまで手を加えないといけないですからね…。
また、HTMLの骨組みは非常に美しいと思ったので、壊すのなんてとんでもない！と思ったのもあります。

JS構造については「共通化できる部分は共通化していく」「ただしコード行数が劇的に変化しないのであればそのままにしておく」という理念のもと、自分好みにしていきました。
例えばでいうと下記のコードを:

var tateList1 = document.getElementsByClassName("left");
for(var i = 0; i < tateList1.length; i++) {
    tateList1[i].classList.add('hurueruLeft');
}

こんな感じにしたりしました:

addClassToArrayByClassName('left-hand', 'shake-left');
〜中略〜
/**
 * 指定したクラス名を持つDOM要素に指定したクラス名を追加します。
 * @param {string} targetClassName 対象のDOM要素が持つクラス名
 * @param {string} addClassName 対象のDOM要素に追加したいクラス名
 */
function addClassToArrayByClassName(targetClassName, addClassName) {
  let array = document.getElementsByClassName(targetClassName);
  for (let i = 0; i < array.length; i++) {
    array[i].classList.add(addClassName);
  }
  return;
}

正直3行→1行になった程度なので、わざわざしなくてもよかったかもですね…。 本当勝手に色々弄ってしまって申し訳ないです…。

終わりに

振り返ってみれば結構改修しちゃった様な…。
でも意外と時間はかからなかったのは、自分自身がVue.jsやJavascriptへの理解を深めている証拠なのかもですかね。
また、今回の経験を通じVue.jsのコンポーネントという概念もちょっと理解できました。こんなに便利な概念だったとは…！

合わせて初のFork経験もできました！
本来はこっからプルリクエストが始まるらしいですが…。
私的には本件のプルリクエストを送信するつもりはないです。
元コードからだいぶ自分流に弄っちゃったので…これをプルリクエスト送信するのは憚られて…。

ともあれ色々とまた経験ができ、非常にホクホクです。
((ブログ記事もこうして書けましたし…
またもしビビッとくるものがあったらこうしてForkしたりなんだりしていけたらと思いますっ╭( ･ㅂ･)و

余談

今回の機能追加に伴い、GithubのREADME.mdへ完成版のスクショを貼ろうとしたのですが…。
README.mdに画像を貼るにはどうしたら良いかわからず、色々調べた結果良さげな方法が見つかったので備忘録がわりにメモを。

cakecatz.hatenadiary.com こちらの記事にある様に、「スクショを置いておく専用のブランチ」を適当に切って、その中にスクショのみを入れていきます。
その後pushし、画像URLパスをMarkdownに下記の様に入力すればOK！
![alt文](画像URL)

※ちなみに画像URLのパスはこんな感じになります(2019/09/09現在):
https://raw.githubusercontent.com/[Githubアカウント名]/[リポジトリ名]/[ブランチ名]/[ファイル名]

ブランチを分けることで他のブランチが汚れることもなくなりますし、Githubサービス内で全てを完結可能になる…。
考えた人は間違いなく天才ですな(　ﾟдﾟ)ｳﾑ

GitKrakenについてまとめてみた&使ってみた

はじめに

私はよくGit…Githubにお世話になっており、これまでGitの利用にあたってはCLI経由で行なっていました。

かれこれGitは初めて触ってから3年か4年くらい経つので、GitのCLI利用にはすっかり慣れちゃったのですが…。
CLIだとどうしても「コミットログが見にくかったり」「ブランチの状態がわからなくなりがち」で割と問題視にはしてました。

「だったらSourceTree使えばいいじゃない」という意見もありますが、SourceTreeのGUIの色味がが気に食わず、ずっと触れずにいました。
そんな最中、最近SourceTreeの様なGit GUIツール「GitKraken」を知り。 www.gitkraken.com

GUIもめっちゃくちゃイカしてますし、こりゃいいと思い使ってみることに！
…というわけで、本記事ではGitKrakenについて少しまとめたりGitKrakenを使ってみた感想を書いたりしようかなと思います。

GitKrakenの機能

GitKrakenは「axosoft」というアリゾナ州スコッツデールにある企業が作成されたツールです。
無料でも使用できますが、Privateリポジトリへのアクセス機能などは有料版でないと使用できません。

リリースノートをみる感じ、かなり頻繁にアップデートがなされております。有難や…。 support.gitkraken.com

また、サポートしているGitクライアントも豊富にあります。
Githubはもちろんのこと、BitbucketやAzure DevOpsまで対応されております、素敵！
詳細な対応リストは下記に…。

• GitHub
• GitHub Enterprise
• GitLab
• GitLab Self-Managed
• Bitbucket
• Bitbucket Server
• Azure DevOps

ちなみにGUIはこんな感じ。
黒を基調とした非常にモダンな感じの雰囲気となっています。

ﾓﾀﾞｧﾝ…

もちろんカラーテーマもいじることができ、現在の最新バージョン(Version 6.1.4)では、「黒基調のDarkテーマ」と「白基調のLightテーマ」から選択可能です。
Lightテーマもこれはこれでおしゃれな感じです…。

また、SourceTreeとGitKrakenの機能面から見た違い…については、下記の記事に非常にわかりやすく書かれていたので参考に…。 spc-jpn.co.jp

合わせて、GitKrakenの導入方法や使用方法についても、下記の記事に非常にわかりやすく書かれていたので参考に…。 elated-blackwell-51e103.netlify.com

有料プランについて

先ほども少し(?)話しましたが、GitKrakenは有料プランが存在します。
有料プランは2種類あり、「Individual」プランと「Pro」プランに分かれています。
無料プランでも十分に扱うことは可能ですが、Privateリポジトリを操作するならIndividualプラン以上にしないといけない感じです…。

各プランの違いは下記に…:

• Free: 無料
• Individual: 年間29ドル
  • Free版と比較し下記の機能が追加:
    • Privateリポジトリの編集
    • GitKraken内で競合マージによるConflictを編集可能
    • Gloボード上のカスタム背景画像が利用可能
  • 利用にはGitKraken v6以上が必要
• Pro: 1ユーザーあたり年間49ドル
  • Individual版と比較し下記の機能が追加:
    • .gitconfigを管理するためのプロファイルが利用可能
    • GitHub、GitLab、BitBucketなどと統合して利用可能
    • ユーザーの管理が可能となる(マルチユーザー対応)
    • メールサポートが保証される

見てみると、Individual版は個人開発向け、Pro版は企業向けといった形でしょうか。
なお、Proプランは7日間の無料体験期間があるため、そちらで体験してみてよければProに…といった運用も可能です。

感想

ここからはGitKrakenを使ってみた感想を書きたいと思います。
(筆者がGit GUI使ったの初めてということからCLIと比較した感想となるため、GitKraken固有の感想とはならない気もします…)

これまでのGit CLI運用と比較し、addやコミットが驚くほど手軽にできる様になりました。
ボタンをポチッと押し、専用のテキストボックスにちょちょいとコミットメッセージ書けばもうコミットされてる…もう超便利です。
これまでだと、git commit -mでコミットメッセージ打ってる途中に間違えてEnter押しちゃって「ああ…」となることもあったのですが、GUIからならそんなことも起こりづらく快適です。

さらの、ブランチやコミットログがすっごく見やすくなったのもありがたいです。
…とはいえ私は個人開発が主であり、基本masterブランチへの直コミットがほとんどなので…ブランチが見やすくなったところで、というのはありますが。

でもコミットログが見やすくなったのは非常に最高です！
過去のコミットも非常に追いやすくなり「過去のコミットメッセージに合わせていい感じのコミットメッセージを書く」ことも非常に容易にできる様になりました！
もうgit logで過去ログを延々と追っていったり、Githubにわざわざアクセスしてログ見たりしなくていいんだぁ…。

さらに、複数のリポジトリをタブ形式で同時並行管理できるのもまたいいなと…。
これまで複数のリポジトリを同時並行管理するには複数のコンソールを開かなきゃいけないというクソみたいな感じでしたが…。
そういった苦労からも解き放たれ、快適に開発ができる様になりました。

そして極め付けは「コミットメッセージのテンプレートがリポジトリごとに設定可能な」所ですかね。
もうこの機能が最高に最高で…(語彙力崩壊)。
日記やブログ記事の管理リポジトリなら、定期更新がほとんどなのでコミットメッセージにあまり変化がないため、こうしてテンプレート化できるのはすっごくありがたいです。

ただ、GitKraken…というかGit GUIツールの欠点(?)として、「簡単にaddやコミットが出来てしまうためコミットのハードルが下がりすぎちゃう」点があげられるかなと。
まぁこれは使いやすさのトレードオフですがね…。

何となく、CUIだとコマンドを1個発行するのに慎重になれる感じがして(git statusで状態を確認しコミットするのが当たり前になる)。
GUIだとボタン1つでいろんな処理ができちゃうから…便利になる分、無駄なコミットが増えてしまわないかな？と思っちゃいます。
まぁまだGitKrakenは使いたてなので、慣れていけばうまい付き合い方も見えてくると思いますが。

終わりに

GitはこれまでCLIで運用していた筆者にとって、GitKrakenは本当に革命的でした…いや本当に。
今後もガンガンお世話になっていきそうです。

それでは|дﾟ)