omuriceman's blog

iOS / AWS / Firebase / JavaScript / Deep Learning を中心とした技術を面白く紹介します！

漫画から技術を学ぼう！技術書典7で頒布予定のマンガ技術書まとめました

技術書典 マンガ

技術書同人誌を販売する日本最大のイベント「技術書典7」が2019/09/22(日)に開催します。今回も楽しそうな技術書が盛りだくさんですね！

7回目の開催となる技術書典ですが、技術書典6の直前に書いた「技術書典6で販売されるマンガ技術書まとめ」記事がいろんな方に読んでいただけましたので今回もご紹介したいなと思っております！

協04 | paiza

paiza開発エンジニアによるTechbookと、ITエンジニアを目指す女子高生たちの学園ライフ4コマ漫画本を無料配布します！

オンライン学習サイトで有名なPaizaさんが4コマ漫画本を無料配布されるようですね！無料配布なので早めに手に入れないと無くなっちゃうかもしれませんね！

techbookfest.org

う38C | パルヒコさん

Webディレクターマンガ

前回のブログでもご紹介しました。技術書典6では見に行くことができなかったので、今回はリベンジしたいと思います！

techbookfest.org

お01C | おとうふ工房

  • まんがではじめるGo

私は前回の技術書典6で「まんがではじめるKubernetes」購入しましたが、中々の混み具合でしたね！今回の「まんがではじめるGo」も難しい技術を漫画でわかりやすく解説している感じで非常にいいテーマですね！早く買いに行かなければ！

techbookfest.org

お43C | 湊川あいの、わかば家。

  • マンガでわかるRuby② 〜オブジェクト指向編〜
  • 【無料頒布】マンガでわかるBtoBアプリエンジニア
  • マンガでわかる痩せる技術【2ヶ月半で−8kg】実録！原始人ダイエットやってみた
  • マンガでわかるRuby 番外編 gem・CSS組版 制作秘話

「マンガでわかる〇〇」で有名な湊川あいさんのサークルです。技術書典初頒布の本がこれだけあるようですね！

個人的に「マンガでわかるRuby② 〜オブジェクト指向編〜」は、何年エンジニアやってても一向に理解が進まない「オブジェクト指向」の手がかりとして購入したいと思います！

既刊の「マンガでわかるDocker①〜③」も購入しましたが、なんちゃってDocker使いには新しい学びがたくさんあってよかった！

techbookfest.org

か03C | みさきとミギー

「マンガでわかるRuby」シリーズと「猫と森羅と日本語とRuby」シリーズを頒布する予定です。

とのことです。マンガでわかるRubyシリーズはこちらのサークルでも購入できそうですね！

techbookfest.org

き07D | Rotelstift

主人公である男子中学生がPC部の入部試験としてFizzBuzz問題を解いていく物語です。

入稿〆切に向けてまだ作画を続けているようです。続報を期待したいですね！

techbookfest.org

き46D | GrabTF

  • VRoidとクリスタでマンガを作る本

という本を頒布されるようです。紹介しているリンクを見てみると、この本自体もVRoid(VRoid Studio)とクリスタ(CLIP STUDIO)というソフトを利用してマンガで描かれているページがあるようです。

techbookfest.org

し20D | ふりにち

  • マンガでわかる画像の基本
  • 残業を減らし定時で帰る仕事術〜定時退社はエンジニアのキャリア形成と両立できるのか〜

これらの本でマンガで描かれている箇所があるようですね！

「dpi」についてもマンガで分かりやすく解説します！

dpiはAndroidアプリ開発ででてきますが、ちゃんと理解していないので興味があります。

techbookfest.org

し24D | ロボット修業中

  • ロボットマスターへの道

というシリーズの「電子回路についての解説本」のようです。部分的に4コマ漫画で描かれているようですね。

私的には電子回路の技術を学ぶ機会がなかった（独学ではなかなか学びづらいですよね？）のでとても興味深いテーマです

techbookfest.org

し26D | オサルのロボットラボ

  • ロボット作りたい息子とそのハハのはなし

ロボット作りたい息子オサルと、技術についてド素人のハハの、ドタバタの毎日。

という内容のエッセイ風マンガのようです。

techbookfest.org

せ01D | ほっぺ食堂

VTuber稼業の暴露話漫画を描いていきます

なんとも怖そうなテーマですが、私の周りにもVTuberを始めている人がいるので共有したいと思います！

techbookfest.org

せ18D | ゴロゴロカヤック

ちょっと変わった技術の活用法や、漫画コンテンツもあります。

面白法人で有名なカヤックさんが頒布される本に漫画コンテンツが掲載されるようです。詳細情報を期待したいですね！

techbookfest.org

お願い

現在時点で12のサークルで漫画技術書が頒布予定ということがわかりました。サークル数が前回より多いのに、漫画が少なくなっているのは少し気になる傾向ですね！

もしこの記事に掲載されていない、マンガで描かれている技術書を技術書典7で掲載されているサークルの方がいらっしゃいましたらぜひコメントやツイートいただけると大変嬉しいです！

まとめ

前回の技術書典6で何冊もマンガ技術書を購入したのですが、読みやすく・読み進めやすくという感じですぐに知識を吸収することができました。日本のマンガ文化は素晴らしいですね。

宣伝

私も技術書典7に出典いたします！サークル場所は「お23C」

techbookfest.org

私はAWS Amplify Predictionsを使ってお手軽にAI/MLを開発するというテーマで執筆しております！朝からしばらく立ってますのでお越しください！

実は今回、私も漫画を描きたかったのでiPadとApple Pencilを購入したのです。

omuriceman.hatenablog.com

でも漫画で執筆できませんでした。。。本当に漫画をかける人尊敬します。

ブラウザのデバッグコンソールにshields.io風のログを簡単に出力できるOSS「console-badge」

Web OSS

f:id:omuriceman:20190824161435p:plain

この記事は2分程度で読めます

ブラウザのコンソールは色をつけたり、フォントを大きくするなどのカスタマイズができることは有名ですが、実際自分で作るとなるとかなり面倒です。

「mozillaの恐竜」とか「SUUMOのスーモくん」などコンソールに面白く表示してるのを見かけて「時間があったらやりたいですよ…」と思っているのは私だけではないはずです。

先日console-badgeというOSSを見つけました。簡単にshields.ioのバッジのようなログを出力できるようなので調査をしてみることにしました。

github.com

shields.ioに似たデザインになるので表現には限界があるのですが、ちょっとした時に使えそうなのでご紹介します。

インストール方法

NPM / YARN

$ npm install console-badge
# OR
$ yarn add console-badge

CDN

プロトタイピング環境などでは下記を利用します。

<script src="https://cdn.jsdelivr.net/npm/console-badge"></script>

本番環境に関しては下記のjsを使用することが推奨されています。

<script src="https://cdn.jsdelivr.net/npm/console-badge@1/dist/console-badge.umd.min.js"></script>

使用方法

基本的な使い方をコメントをつけてご紹介します。

//log warn error infoに対応
consoleBadge.error({
  //2種類の表示モードが選べる。デザインが少し違う
  mode: 'shields.io',
  //左側に表示するテキスト。絵文字やURLも可能
  leftText: 'エラー',
  //左側に表示するテキストの色。URLの場合無効
  leftTextColor: 'red',
  //左側に表示する背景色
  leftBgColor: 'white',
  //右側に表示する内容
  rightText: 'なんかエラーです',
  rightBgColor: 'red',
  rightTextColor: '#FFF'
});

余談ですが上記のオプションに何もいれないと、Lorem Ipsumが表示されます。

f:id:omuriceman:20190825133338p:plain

ブログでも利用する

私のような人間はブログにも秘密のメッセージをいれたくなります。早速はてなブログで試して見ましょう。

f:id:omuriceman:20190825133022p:plain

<script src="https://cdn.jsdelivr.net/npm/console-badge@1/dist/console-badge.umd.min.js"></script>
<script>
consoleBadge.log({
mode: 'shields.io',
leftText: '絶対見ないでね',
rightText: 'https://twitter.com/iijima_wataru 🚀',
rightBgColor: '#ffc107',
});
</script>

テキストエリアに上記のようにscriptを入力すればOKです。ブログの入力モードによってはscriptがテキストと認識されて表示できないかもしれないので、プレビューを見ながらチャレンジしてみてください。

もしかして…この記事にも秘密のメッセージがはいっているのか？！

英語のリスニングとプログラミングを同時に鍛えるYouTube動画20選とオススメチャンネル5選！

最近「英語のリスニングを鍛えたい！」と思い立ち継続してやっていることがあります。

その説明に入る前に、まずはこちらの動画をご紹介させてください。

英語のリスニングを「爆発」させる最強の方法 4K

内容を要約すると英語のリスニングを鍛えるには、

  • リスニングを鍛えたい国の動画を字幕付きで見る
  • 1日1分以上、週6日見る
  • わかりやすい動画にする

を行うと良いと言う事です。詳細は動画を見てくださいね。

上記を行うには映画を英語字幕で見るのがいいと思うのですが、私が契約しているAmazon Prime Videoは英語字幕出せない… とはいえ、他のNetflixなどのサービスに申し込むのも勿体無い。他にいい方法はないものか…と悩んでおりました。

しかしピンチはチャンス！

調べてみるとYouTubeにプログラミング系の英語動画がたくさんあることが判明しました。しかも海外のプログラミング系YouTube、動画のクォリティが高いのが多いんですよね。(余談ですが、日本はまだまだそういった動画が少ないように思います。日本市場は小さいですが、参入のチャンスでしょうか。)

私は電車移動中に1日10分以上英語字幕ありでプログラミングの動画を見るようにしています。

そんな中で貯めに貯めた「字幕ありで聞き取りやすいYouTube動画」を厳選していくつかご紹介したいと思います。

動画を見る前の注意事項

ある程度プログラミング経験がある方の学び直しを対象としています。プログラミング初心者で英語が得意ではない方は日本語の動画やレッスンを取り組む方がいいと思います。

英語動画厳選20選

  • ブログのタイトルにはわかりやすく「プログラミング」と書きましたが幅広い範囲の動画を取り上げております
  • シリーズ物の場合は最初の1つめを紹介していますチャンネルには他に面白い動画もあるのでYouTubeに遷移して好きなように見てみてください

アルゴリズム

アルファベット順に本を並べる最速の方法 ― チャンド・ジョン

とても有名ですが、TEDの動画は日本語字幕ありの動画が多く手始めに見るにはいいかもしれません。

TCP/UDP

TCP vs UDP Comparison

DNS

DNS: The Internet's Phonebook

SSH

How Secure Shell Works (SSH) - Computerphile

公開鍵暗号

Asymmetric encryption - Simply explained

Git and GitHub

What is VCS? (Git-SCM) • Git Basics #1

First Look • Collaboration with Git and GitHub

Scrum

Scrum vs Kanban - What's the Difference? + FREE CHEAT SHEET

MVP

Making Your First Game: Minimum Viable Product - Scope Small, Start Right - Extra Credits

OOP

8.1: What is Object-Oriented Programming (OOP)? - Processing Tutorial

Python

Lesson 1 - Python Programming (Automate the Boring Stuff with Python)

Python Tutorial for Absolute Beginners #1 - What Are Variables?

Unit Tests

Unit Tests in Python || Python Tutorial || Learn Python Programming

JavaScript

JavaScript Tutorial for Beginners: Learn JavaScript in 1 Hour [2019]

Unity

How to make a 2D Game in Unity

デザイン

Learn the Most Common Design Mistakes by Non Designers

Firebase

Introducing Firebase

機械学習

Hello World - Machine Learning Recipes #1

Googleの動画も日本語字幕ありの動画が多いので英語学習に良いですね。

ニューラルネットワーク

But what is a Neural Network? | Deep learning, chapter 1

TensorFlow

Get started with Google Colaboratory (Coding TensorFlow)

オススメしたいチャンネル&再生リスト5選

本当にいいチャンネルが多くて迷ってしまいました。今回は日本であまり有名ではないチャンネルを推薦していきたいと思います。

「退屈なことはPythonにやらせよう」で有名な著者のPythonレッスン動画

Automate the Boring Stuff with Python - YouTube

TypeScriptのデザインパターンからブロックチェーンまで幅広い動画が掲載

www.youtube.com

インフラや通信用語などを知りたい場合はこのチャンネル

www.youtube.com

たくさんのプログラミングのレッスンを行なっているチャンネル

www.youtube.com

デザインのこと詳しくないけど見てるだけで楽しいデザイン専門チャンネル

www.youtube.com

学習法

残念ながら私はまだ英語が得意ではないので、周囲にいる得意な人も含めて動画による学習法を調査しました。

  • 英語字幕で動画を見る
  • 動画の発音を真似して喋る
  • 母国語字幕で動画を見る→英語字幕で動画を見る→字幕無しで動画を見る
  • 字幕無しで動画を見る→英語字幕で動画を見る（自分で推測して答え合わせする意図のようです）

人によってバラバラですね。字幕無しで見るという方法もありますがまずは自分にあった方法で楽しく継続できるのが大事ではないでしょうか。（と言っている英語学習動画もありますね。）

まとめ

自分がやっていて面白いのが、自分が理解している技術については英語がわからなくてもある程度理解ができるのですが、ブロックチェーンなど理解していない技術についてはわかりやすい動画でも内容が理解できないのです。 つまり、英語動画の内容が理解できる＝その技術を理解している。ということになるのではないかと思いました。

英語やプログラムの学習にYouTube動画を取り入れてみてはいかがでしょうか。