give IT a try

プログラミング、リモートワーク、田舎暮らし、音楽、etc.

Rubyプログラマが何を考え、どうやってコードを書くのか、その過程を動画にしてみました

はじめに:銀座Rails #12で登壇させてもらいました

去る2019年8月29日、銀座Rails #12で「プログラマがコードを書きながら考えること 」という発表をさせてもらいました。

ginza-rails.connpass.com

この発表では「プログラマが書き上げたコード(=完成形)」ではなく、「そのコードをどうやって書いたのか?(=何を考え、どんなツールやテクニックを使って、どれくらいのスピードで書いたのかという点、すなわち、コードを書く過程)」をテーマにしました。

f:id:JunichiIto:20190909073715j:plain

そして、その過程をわかりやすく伝えるために、スライドだけでなく、僕がガチンコでコードを書いていく様子を動画コンテンツとして会場のみなさんにお見せしました。
これまでいろんな勉強会やイベントで発表してきましたが、動画を事前に用意して発表で使ったのはこれが初めてです。

f:id:JunichiIto:20190909075151j:plain

初めての試みなので、どうなるかちょっと不安でしたが、意外と好評だったようでほっとしました。



みなさんのツイートのまとめはこちらにあります。
togetter.com

また、当日使ったスライドはこちらに置いています。

動画はBOOTHで販売してみることにしました

しかし、今回の発表のメインは動画だったので、スライドだけ見てもあまり役に立ちません。
じゃあどうやって動画を公開しようかな〜?と、いろいろ検討した結果、今回はBOOTHを使って有料販売してみることにしました。

当日使用した動画は以下のページにて490円で販売しています。

jnito.booth.pm

無料のお試し版動画もあります

とはいえ、どんなものかよくわからないものにお金を払うのもみなさん不安だと思うので、無料のお試し動画も作りました。
以下のYouTube動画はBOOTHで販売している動画の前半部分を無料で公開したものです。


【お試し版】プログラマがコードを書きながら考えること 〜動画でわかるWebクローラー開発〜

このお試し動画を見て「続きを見たい!」と思った方は、ぜひBOOTHの購入ページに進んでやってください🙏

なんで有料販売にしたの?

動画を有料販売にした理由はいくつかあります。

編集作業が思っていた以上に大変だったから

動画を撮る前は「スライドを作るより、動画をぱっと撮ってぱっと見せる方がラクなのでは?」と想像していました。
ですが、実際にやってみると、発表時間内に収めるために動画を切り貼りしたり、わかりやすく伝えるためにキャプションを付けたり、なんだかんだでめちゃくちゃ時間がかかってしまいました。

f:id:JunichiIto:20190910093005p:plain
iMovieでがんばって編集してました

なので、「これだけ手間ひまかけて作ったものを無料で公開するのはちょっともったいないな」と思ったのが理由のひとつです。

YouTubeの広告は質が悪い(と僕は思う)から

制作コストを回収するのであれば、広告付きのYouTube動画として公開する(=再生回数上げて収益を得る)、という手も考えられます。
ですが、YouTubeの広告を見ていると、なんか詐欺まがいの怪しい広告をときどき見かけます。

もし、僕の動画を見た人がそういう広告に引っかかって「脳のドーピング剤」みたいなよくわからない商品を買ってしまったら僕は悲しいです。
いや、そんなものに実際に手を出す人は滅多にいないと思います。
ですが、そういう可能性がゼロではない、というのが僕の中ですごく気持ち悪いんです。

それに、そもそもYouTube広告の99.9%が自分にとって興味がない、邪魔なモノでしかない、というのもYouTube広告を避けたい理由のひとつです。
たぶん、ほとんどの人がYouTubeの広告はなくせるものならなくしたいと思っているのではないでしょうか?(なので、僕はYouTube Premiumに入って広告を出さないようにしました)

こうした理由から、YouTubeで間接的にお金をもらうよりも、僕の動画を見たいと思っている人から直接お金をいただく方が健全ではないかと考えました。
(注:これはあくまで僕自身の考え、ポリシーであって、YouTubeでお金を稼いでいる世の人々を否定するものではないので、念のため)

単純に試してみたかったから

あとは単純に、有料販売したらどれくらいの人が購入してくれるのか試してみたかったから、という理由もあります。

世間には書籍やWeb記事、YouTube動画など、プログラミングを学習するための情報がたくさんあります。
ですが、今回のように「他の誰かがガチンコでコードを書く様子を収めたコンテンツ」はほとんど見かけません。

こういったコンテンツは珍しいですし、他のプログラマの方(特に初心者さん)にとって非常に参考になるはず、と僕は信じています。
そこに対価を払ってくれる人がどれくらいいるのか見てみたい、というのも理由のひとつです。

カッコいいところだけでなく、カッコ悪いところも見せる勇気

ところで、今回の動画はべつに「俺様のプログラミング能力のスゴさを見よ!!」と自慢するために作ったわけではありません。
気持ちとしてはむしろ逆で、こんな動画を作って見せたら、みんなから「なーんだ、伊藤さんっていつもネットで偉そうなこと書いてるけど、全然大したことないやーん🤣」とバカにされるかもしれない、と心配していました。

それでも「動画にして見せる価値があるかも」と思ったのは、以下の2つの記事を読んだからです。

前者はReact界の有名エンジニアであるDan Abramov氏が「私はこんなこと(=技術関連の知識)を知らない」と、「自分の知らないことリスト」を公表した記事です。

また、後者の記事ではRubyのパパことMatz氏がご自身の集中力について「私は普段だと集中力は15分くらいしか持ちません」と公言しています。

これらの記事を読んで僕は非常に救われたというか、「すごい人はどこを切り取っても全部すごいわけじゃないんだな。まあ、そうだよな」と安堵しました。
そして、自分のすごくないところを堂々と言えるところが逆にすごいと思いました。

Matzさんのようなスーパープログラマと僕を同列に並べるのはおこがましいですが、それでも「自分のすごくないところもおおっぴらにできる勇気」みたいなところは僕も見習いたいなと思いました。

こうした思いもあって、自分がハマったり迷ったり間違ったりするところも全部動画に撮って公開してみようと考えたのでした。

まとめ

というわけで、このエントリでは銀座Railsで僕が発表した内容と、そのときに使った動画の販売ページをお知らせしました。

「伊藤さんは普段どんなことを考えて、どんなふうにコードを書いているのかなー?」と興味を持っている方がいたら、ぜひこの動画を購入して見てやってください!

【動画】プログラマがコードを書きながら考えること 〜動画でわかるWebクローラー開発〜 - 伊藤淳一 @ BOOTH - BOOTH
https://jnito.booth.pm/items/1551521

おまけ

ちなみに、BOOTHには「ブースト」という機能があって、これを使うと購入金額を上乗せすることができます。

BOOST↑(ブースト)機能とは何ですか? – BOOTHヘルプセンター|よくある質問

f:id:JunichiIto:20190910083159p:plain
画像の引用元: https://booth.pixiv.help/hc/ja/articles/230690927

この機能を使って金額を上乗せしてもらえると僕が非常に喜びますので、もしよかったらよろしくお願いします😆(もちろん強制ではありません!)

あわせて読みたい:銀座Rails #12の参加レポート

銀座Rails #12に参加したみなさんが書かれた参加レポート(または開催レポート)です。(みなさん、どうもありがとうございます!)
僕の発表に関する感想もあるので、動画の内容が気になる方はこちらも参考にどうぞ。

声をかけてくださった銀座Railsの河野さん、スポンサーのDeNAさま、リンクアンドモチベーションさま、どうもありがとうございました!

【DIY】妻のリクエストに応えてホールソーでキッチン棚の区切り板に穴を空けた話

はじめに

先日、妻が「トースターの位置が高くて使いにくいので、左のキッチン棚に移動させたい」と言い出しました。
ですが、左の棚にはコンセントがないため、そのままだと左の棚にはトースターが置けません。

・・・と言っても、何を言ってるのかわからないと思うので、写真で説明します。

f:id:JunichiIto:20190820061048j:plain

はい、そういうことです。
(上の写真では左の棚は扉で隠れていますが、扉をスライドさせるとふつうに棚があります)

最初は「業者を呼んで左の棚にコンセントを追加してもらおうか」と妻と話してたんですが、「これ、そんなことしなくても、区切り板に電源コードを通す穴を空けたら解決するんじゃない?」というアイデアがひらめきました。
つまり、こういうことです。

f:id:JunichiIto:20190820061613j:plain
手描きの完成予想図

が、問題は「どうやって穴を空けるか」ということです。
というわけで、この記事ではDIYで区切り板に穴を空ける方法を紹介します。

板をくり抜くならホールソーが便利(らしいのだが・・・)

ネットをいろいろ調べていると、世の中にはホールソーという便利道具があることを知りました。
ホールソーというのは電動ドリルに輪っか状の刃を取り付けて、それを回転させながら板に穴を空ける工具です。

makit.jp

「ほうほう、なるほど。これを使えば一発で穴が空けられるじゃないか!」と思い、近くのホームセンターで電動ドリルとホールソーを買ってきました。

リョービ(RYOBI) ドライバードリル CDD-1020 645801A

リョービ(RYOBI) ドライバードリル CDD-1020 645801A

E-Value 木工用7枚刃ホールソー 20mm

E-Value 木工用7枚刃ホールソー 20mm

さっそく電動ドリルにホールソーを装着して、「よーし、穴を空けるぞー!」と作業に取りかかったのですが・・・

f:id:JunichiIto:20190820070443j:plain:w350
ホールソーで穴を空ける準備万端の伊藤さん

まったく刃が立たない!!😂😂😂

本来であれば下の写真のように、先端のドリルが板に入っていくはずなんですが、どれだけ力を入れて押し込んでも刃先が板の表面でツルツル滑って先へ進みません。

f:id:JunichiIto:20190820070808j:plain
本当ならこうなるはず!(画像の引用元: https://makit.jp/01968/

これは困った!!せっかく電動ドリルまで買ったのに〜😣

先に下穴を空けておけば大丈夫?

そこで、弊社ソニックガーデンのメンバーに雑談ネタとして「かくかくしかじかで穴を空けられなくて困ってるんだけど、誰かいい方法を知らない?」と尋ねてみました。

すると、あるメンバーから「化粧板のように硬い板の場合は、先に細い下穴を空けてからやればいけるかも」という意見が挙がりました。

その意見を聞いて「なるほど、その発想はなかった。やってみよう!」と思い、もう一度ホームセンターに行って、下穴を空ける細めのドリルをいくつか買ってきました。

最初は一番細い2.5ミリの下穴錐を使って穴開けに挑戦してみました。
すると・・・おお、入った!
これだと結構すんなり穴を空けることができました。素晴らしい!

それから、3ミリと4ミリのドリルを使って少しずつ穴を広げていきました。
こちらも先ほどと同様、問題なく板を貫通していきました。

下穴は空けることができた。じゃあ、ホールソーは?

それではいよいよ、この記事の主役であるホールソーの出番です。
はたしてリベンジできるのか・・・!?

f:id:JunichiIto:20190820072543j:plain
4ミリの下穴を空けてから、もう一度ホールソーを使おうとする図

では、やってみましょう。スイッチオン!

チュイ〜〜〜〜〜ン・・・・おお、いけた!!

下穴を空けてからホールソーを使うと、しっかり先端のドリルが板の中に入っていきました!
これならホールソーがホールソーとしてちゃんと機能しそうです。

f:id:JunichiIto:20190820073254j:plain
ホールソーで穴を空ける途中経過です。これならいけそう!

そして、ついに・・・!!

それからホールソーでガリガリやること数分間。
ついに穴を空けることができました!ばんざーい!!🙌

f:id:JunichiIto:20190820073622j:plain

逆サイドから見てもきれいに穴が空いてます。

f:id:JunichiIto:20190820073830j:plain

これでトースターの電源コードもこのとおり!!

f:id:JunichiIto:20190820074028j:plain

もともとイメージしていたアイデアスケッチのとおりに仕上がりました。

f:id:JunichiIto:20190820061613j:plain
f:id:JunichiIto:20190820074249j:plain

まとめ

というわけで、工事完了後のキッチンの全景がこちらです。
これまでは完全にデッドスペースになっていた左の棚を有効活用することができました。

f:id:JunichiIto:20190820074350j:plain
今はこんな感じです(キッチン棚の扉は邪魔なので処分しました)

「業者を呼ばなくても自分でできた!」と、妻も喜んでいました😄

今回のDIYで得た知見は「板が硬ければ先に下穴を空けてからホールソーを使え」ということです。
みなさんもキッチン棚の区切り板に穴を空けたくなったときは、この記事を参考にしてみてください!

おまけ:妻が使っているトースター(小型オーブン)はこちら

ちなみに妻が使っているトースターはこちらです。

アイリスオーヤマ コンベクションオーブン 15L PFC-D15A-W

アイリスオーヤマ コンベクションオーブン 15L PFC-D15A-W

厳密にはトースター専用機ではなく、トースターとしても使える小型オーブンです。
妻はときどきこのオーブンを使ってパンやケーキを焼いています。

f:id:JunichiIto:20190820080254j:plainf:id:JunichiIto:20190820080309j:plain
先日妻が焼いてくれたシフォンケーキです

Rails 6リリース記念!?Qiitaにいろいろ記事を書きました

先日、Rails 6が正式にリリースされました。

だから、というわけでもないのですが、Rails関連の記事をいくつか書いてQiitaにアップしています。

Railsアプリのアップグレードの手順

1つ目はRailsアプリのアップグレード(バージョンアップ)の手順です。

永久保存版!?伊藤さん式・Railsアプリのアップグレード手順 - Qiita
qiita.com

これまでに何度もRailsアプリのアップグレード作業を繰り返してきた僕が編み出したベストプラクティス、いわば「秘伝のタレ」的なノウハウが詰め込まれております。
記事としてはやや長文です。

config.load_defaultsとnew_framework_defaults_x_x.rbの解説記事

2つ目はこれまたRailsアップグレード時に登場するconfig.load_defaultsとnew_framework_defaults_x_x.rbの解説記事です。

config.load_defaultsとnew_framework_defaults_x_x.rbの関係を詳しく調べてみた - Qiita
qiita.com

ぶっちゃけ、このあたりの設定はしっかり把握しておらず「なんとなく雰囲気で」使ってきてた感があったので、じっくり調べてその調査結果をまとめてみました。
Railsガイドを読んでもここまで詳しく説明されていないので、以前の僕みたいに「なんかようわからん」と思っている人は一読の価値があると思います。

Rails 6.0.0で発生する警告文に関する情報

3つ目はRails 6へアップグレードしている最中に発生した警告文に関する情報です。

Rails 6に上げると”DEPRECATION WARNING: Initialization autoloaded the constants ActionText::ContentHelper, and ActionText::TagHelper.”のような警告が出る - Qiita
qiita.com

Rails本体のissueなのでそのうち修正されるとは思いますが、僕がググったときは「これ!」という日本語記事が見つからなかったので、同じように困ってる人がすぐに見つけられるようにQiitaに書いておきました。


ためしに手持ちのRailsアプリをRails 6に上げてみました

Rails 6がリリースされたので、ためしに手持ちのRailsアプリをRails 6に上げてみました。
アップグレードしたのは妻のパン屋のWebサイトです。

coupe-baguette.com

外から見てもよくわからないと思いますが、いちおうRails 6 + Ruby 2.6 + Herokuで動作しています。

アップグレード時に発生したその他のトラブル

詳細な原因は追えていませんが、アップグレード時にはいくつかのトラブルが発生しました。
Rails 6になったせいなのか、Rails以外のgemを上げたせいなのか、はたまたHerokuのスタックをheroku-18に上げたせいなのか、どれが引き金になっているのかは僕もよくわかりません。

トラブル1:サーバーが起動しない

デプロイ直後に以下のエラーが出てサーバーが起動しなくなりました。

Errno::ENOENT: No such file or directory @ rb_sysopen - tmp/pids/server.pid 

Procfileにtmp/pidsディレクトリを作成するコマンドを追加したら動きました。

 release: bundle exec rake db:migrate
-web: bundle exec puma -C config/puma.rb 
+web: mkdir -p tmp/pids && bundle exec puma -C config/puma.rb
トラブル2:jsやcssが404エラーになる

サーバーは起動するようになりましたが、今度はjsやcssが軒並み404エラーになって「素のHTMLを表示しているだけ」の状態になってしまいました。

この件はRAILS_SERVE_STATIC_FILES=1という環境変数をHerokuに追加することで直りました。
(これでいいのか確信はありません・・・)

トラブル3:hamlの文字参照が文字にならない

全角チルダ(〜)をきれいに表示するために、~という文字参照をところどころで使っています。
ですが、この文字参照がそのまま~で表示される画面が出てきました。

ふつうに文字が表示されるよう、一度.html_safeしているのですが、ここではさらにもう一度.html_safeすることで修正できました。

 - menu_items.each do |img, name|
   - name = name.html_safe
   %figure
     = image_tag "menus/#{img}.jpg", alt: name
     %figcaption
-      %h2.text-shadow= name
+      %h2.text-shadow= name.html_safe

2019.8.20追記
この件はRails側の不具合だったようです。以下のpull requestで修正済みです。
(Rails 6.0.1のタイミングでリリースされるかな?)

Prevent TagBuilder modify options by tsuka · Pull Request #36981 · rails/rails · GitHub

情報提供してくれた、tkawaさん、tsukaさん、どうもありがとうございます!


その他、最近書いたQiita記事

ついでに、最近書いたその他のQiita記事も紹介しておきます。

統合テストはリクエストスペックに移行させよう、という話

【動画付き】Railsチュートリアルの統合テスト(integration test)は、RSpecのリクエストスペックに置き換えるのがラクです - Qiita
qiita.com

Rails標準の統合テスト(integration test)をRSpecに書き換えるなら、リクエストスペックがいいですよ〜、という解説記事です。
解説動画も作りました。


Railsチュートリアルの統合テスト(integration test)は、RSpecのリクエストスペックに置き換えるのがラクです

Cloud9上でフィーチャスペックを動かす方法

【2019年7月版・動画付き】Cloud9上でEveryday Railsの`js: true`付きのフィーチャスペックを実行する手順 - Qiita
qiita.com

Cloud9上でEveryday Railsのフィーチャスペックを動かす方法を解説した記事です。
こちらも動画付きです。


【2019年7月版】Cloud9上でEveryday Railsの`js: true`付きのフィーチャスペックを実行する手順

Cloud9、Chrome、ChromeDriverは、いずれもRubyから見ると外部リソースになるので情報をきれいに同期させるのが難しいですね。

strftimeじゃなくてlメソッドを使おう、という話

【初心者向け・動画付き】Railsで日時をフォーマットするときはstrftimeよりも、lメソッドを使おう - Qiita
qiita.com

最後に紹介するのは「お前ら、すぐにstrftimeに頼らず、l(える)メソッドを使っていこうぜ」という啓蒙記事です。
lメソッドはググラビリティが悪いせいか、どうもstrftimeの方がよく使われている気がします。
でも僕は使っていません。みなさん、日時フォーマットはDRYに書きましょう。

こちらもやはり動画付きです。

【初心者向け】Railsで日時をフォーマットするときはstrftimeよりも、lメソッドを使おう

別にYouTuberを目指しているわけではないのですが、「文章で書くより、画面を見せながら口で話した方が早くてわかりやすい」と思ったときは、先に動画を作って、その内容をQiitaとかに簡単にまとめるようにしています。

宣伝:何はともあれテスト!テスト!!Everyday Railsでお勉強しましょう

Railsのアップグレードには自動テストが必要不可欠です。
テストが苦手な人は「Everyday Rails - RSpecによるRailsテスト入門」を読んで、テストの自動化をマスターしましょう!
まだ読んだことがない方はぜひチェックしてみてください😄

Everyday Rails - RSpecによるRailsテスト入門
leanpub.com