エンジニアのお祭り、技術書典4に行ってきた

技術書典4

技術書典4」という技術書オンリーのイベントに行ってきました。
TechBoosterさんと達人出版会さんが主催のイベントで、会場は秋葉原UDX アキバ・スクエアという場所で開催されました。

出版社、同人サークル、企業などがそれぞれ技術書を持ち寄ってそれを販売する(頒布する)というイベントです。
6300人を超える来場者のかなり大きなイベントとなっていました。

実際、僕は11時開始ということで10時半くらいに秋葉原駅に到着して会場にむかったのですが 、すでに整理券を受け取るための長い列ができており、900番代だった僕が実際に入場できたのは11時30分くらいになりました。

戦利品

以下の書籍を入手しました。

「日経電子の本」は無償で頒布されていました。
いろいろな技術分野の書籍があつかわれていたのですが、その中でもフロントエンド技術周りの書籍を出されているサークルが多く、人の集中度も比較的高かったような印象がありました。
まだ読めていませんが、これから読んで1つ1つレビュー記事でも書こうかなあと思っています。(つもりです。)

エンジニアのお祭り

本当にいろいろなエンジニアが参加されており、ただ単に書籍を販売したり頒布したりするというだけではなく、エンジニア界隈のお祭りという感じありました。
僕自信もちょうど1年前からいろいろなエンジニアコミュニティに顔をだしていたので、場内でサークルの売り子の方と話したり、場外でもたくさんのエンジニアの方々と話すことができました。

jQuery本ノーチェックだったけど面白そうだったから買ってみた。」「Vueの本が多かった。」などの会話であったり、買った書籍を見せあったりというコミュニケーションがいたるところで行われていました。

混み具合

僕は初めての技術書典参加だったのですが、気持ちのよい晴天でかなり入場者数が多かったためか、かなり混み合っていました。
コミケなども参加したことがないのでわからないですが、混み合っている中で流れの向きがバラバラだったり、通路の左右を行ったり来たりするような進み方をする方もいたりしため、いろいろなブースをゆっくりと見ることができなかったのが少し残念でした。
人数規模的にも大きくなってきているということもあり、もしかしたら次は更に大きい会場での会場になるかもしれません!期待したいです!

まとめ

総じてすごく楽しいイベントでした。
混み具合のこともありましたが、入場の案内などこの人数のイベントでフラストレーションがたまるようなこともなく楽しく過ごせたので、運営の方々は本当にお疲れ様でした!ありがとうございました!!

これから今日手に入れた戦利品を読んで行くのが楽しみです。

また、今回初参加で雰囲気を知ることもできたので次の技術書典では何か本を書いて出展する側で参加したいな、という気持ちになりました!

ブログ執筆より簡単!?Podcastの収録方法の解説

僕はしがないラジオというPodcastのパーソナリティをやっていて、今回はその収録の方法について書こうと思います。*1

※ 機材のリンクについては、アフィリエイトリンクとなっています。
僕らのPodcast運用費用になりますので、興味を持たれた方はよろしかったらこちらから購入いただけると嬉しいです。

Podcast配信は簡単?

Podcastを始めることはそんなに難しくはなく、僕としてはブログよりも簡単に続けられる一つのアウトプット方法ではないかと思っています。
ブログは推敲し始めたら無限に時間がかかってしまいますし、(一応これでも)まずなにをどういう人向けに書こうかなと考えたりしています。
その点Podcastは、日付を決めて集まって収録してしまえば、編集にも限界があるので出すことができてしまいます。
はじめは自分の声を長時間聞くだけで恥ずかしくて悶てしまいますが、1、2回で慣れてしまいます。

収録機材

収録機材については、変遷があって

という2つを購入し、使っています。

f:id:zuckey_17:20180415234805p:plain

iQ7iPhoneのLightning端子に接続することによって使えるすぐれもので、小さく持ち運びもしやすく音質も安定し始めたので取り敢えず始めたかった僕らはこれに非常に助けられました。

f:id:zuckey_17:20180415234819p:plain

詳しくは後述しますが、リモートでの収録をしたいという要望から、各自パーソナリティが各自Yetiを購入してMacにつなぎ、Skype越しに収録するようになりました。
オーディオインターフェースなどを用いずUSBで直接Macに接続することが出来るので、オーディオ機器に詳しくない僕たちでも簡単に収録することができました。

収録ソフト

収録ソフトは、Macで無料で使えるGarageBandというソフトを使っています。
編集もこちらのソフトと、もう1つ無料のAudacityを利用して行っていますが、編集について詳しくは他の機会に書こうと思います。

収録方法

僕らは基本はパーソナリティ2人とゲストを招いて収録しています。
はじめ半年くらいはパーソナリティ2人で収録していましたが、ここ数ヶ月はゲストを招いて3人で収録することが多いです。

複数人で収録する場合、

  • オンサイト収録
  • リモート収録

という大まかに2つの方法があります。

オンサイト収録

しがないラジオを始めた当初はiQ7を使っていたので、貸し会議室を借りて、面と向かってオンサイト収録をするしかありませんでした。
平日の朝に収録していたので、わざわざ集まることが辛くなってきたこともあり、リモート収録が出来るようにとYeti購入に踏み切りました。

f:id:zuckey_17:20180415234838j:plain:w300

最近ではゲストの方とは、はじめましての方も多かったりするので、実際にお会いして収録をすることが 多いです。
オンサイト収録では、Yeti1本で収録しています。

f:id:zuckey_17:20180415234854j:plain:w300

Yetiは単体では机に置くようにして利用するのですが、キーボードのタイプ音を拾ってしまいます。
公式でショックマウントも購入することができますが、持ち運びに不便なので、写真のようにタオルを下にひくという方法で机で伝わるタイプ音を低減させています。
それでも少し音が入ったりしてしまいますが、その場の空気として許容範囲かなと、あまりに気になる時以外はそのまま残していることが多いです。

リモート収録

パーソナリティ2人の場合、平日朝に収録することが多く、集まるのや会議室を借りるのもコストなためリモート収録することになりました。
また、遠方のゲストの場合だと、実際にお会いすることが難しかったりするので、リモートでの収録をすることがあります。

この場合、僕らはSkype越しでの収録を行います。
各自がそれぞれの声のみの入力をそれぞれローカルで収録し、
編集の際にそれらをマージすることによって会話しているように聞こえるというような収録方法*2です。

バックアップ

また、僕は誰かが録音を失敗していたときのために、全員の声が入っているSkypeの出力を別途録音し、バックアップとして使っています。

やり方としては、

という2つの無料アプリを用います。

f:id:zuckey_17:20180415234923p:plain

SoundFlowerは、オーディオデバイスを仮想的に増やすようなアプリケーションです。 音声を1つの入力や出力ではなく複数に分けることができます。

また、LadioCastは、SoundFlowerで複数にした音声入力をルーティングして、出力先を変更することができます。

詳しい使い方は以下のブログがわかりやすく解説してくれているので参考にしていただければと思います。

quoqlish.hatenablog.jp

こちらによってリモートのバックアップができます。

まとめ

いかがだったでしょうか? Podcastはマイクさえあれば、その日にでも始めることができます。
編集方法、公開方法などは今後ブログなどで書きたいと思います。

しがないラジオ聞いていただきたいですし、音質などへのフィードバック、助言などもあればすごく嬉しいので、コメントや僕のTwitter#しがないラジオでのツイート、しがないラジオのページなどのフォームなどからお願いします。

またこのブログは、昨年12月に開催した、しがないラジオ忘年会にて発表した資料を元に書いています。 よかったら見てみてください🙏

speakerdeck.com

宣伝

しがないラジオは、来る2018年5月23日にミートアップを開催します!!
ゲストやリスナーによるLT大会と懇親会をメインに考えています。
zuckey個人としては、Podcastリスナーというのはあるディープなセグメントされたコミュニティだと思っています。
パーソナリティだけでなく、リスナー間での交流を深めていただく会にしたいと思っているので、是非皆さん参加いただければと思います!

shiganai.connpass.com

*1:決してネタが思いつかないというわけではない...🙄

*2:ダブルエンダー方式というらしいです

【Ruby】OptionParserを使ってcliツールの引数を制御する

blog.zuckey17.org ↑でRubyに入門して、Ruby学習の一環で簡単なCliツールを作成している時に、引数を簡単に制御したいと思い、OptionParserというライブラリを使った。

メモ的に使い方をまとめておく。

実際のコード

test.rb

#!/usr/bin/env ruby

require "optparse"

params = {}
arguments = []

OptionParser.new do |o|
  o.on("-t", "--title TITLE", "set title param") {|title| params[:title] = title}
  o.on("-b", "--body BODY", "set body param") {|body| params[:body] = body}
  o.on("-h", "--help", "show help") {|| puts HELP_MESSAGE; exit }

  begin
    arguments = o.parse(ARGV)
  rescue OptionParser::InvalidOption => e
    puts e
    exit 1
  end
end

p params
p arguments

今回利用したのは、newというメソッドに対して、ブロックを渡す方法。
newにブロックを渡すとOptionParserオブジェクトを引数にとってブロックが実行される。

実行結果

上記のコードは以下のような実行結果になる。

$ ./test.rb hoge -t タイトル
{:title=>"タイトル"}
["hoge"]

$ ./test.rb hoge -t タイトル -b 本文
{:title=>"タイトル", :body=>"本文"}
["hoge"]

$ ./test.rb -t タイトル -b 本文
{:title=>"タイトル", :body=>"本文"}
[]

$ ./hgoe.rb -t タイトル --b 本文
{:title=>"タイトル", :body=>"本文"}
[]

$ ./test -t タイトル --b 本文 -a zuckey
invalid option: -a

詳しく見てみる

OptionParser#on

引数にオプションとそのオプションの説明を取り、コマンドの引数が与えられたオプションを持っている場合に実行される処理をブロックとして与える。
呼び方は大まかに2パターンで、

# ショートオプションあり
o.on(short, long, description) { |v| puts v }
# ショートオプションなし
o.on(long, description) { |v| puts v }

オプションが引数をとる場合は、-t オプションといったように指定する。
オプションが任意であれば、-t [オプション]とすることで指定が可能。

descriptionは、OptionParser#summaizeメソッド時に表示される。

OptionParser#parse

配列(主にARGV)を与えると、onメソッドで指定した設定の通りにその配列をパースし、オプションとその引数を除外した配列を返す。
そのため、今回の実装では、argumentsにオプション以外の引数が入っていることになる。

onメソッドで指定した以外のオプションを指定した場合、OptionParser::InvalidOptionという例外をが発生するので、良い感じに救ってやる。

begin
  arguments = o.parse(ARGV)
rescue OptionParser::InvalidOption => e
  puts e
  exit 1
end

おわり

あまりRubyコマンドラインツールを作ることはないと思うが、PHPにはあまりこういうライブラリが標準でなかったんじゃないかと思い、面白かったのでまとめておいた。

感想とメモ | We Are JavaScripters! #17th @mercari 20180330

wajs.connpass.com

ちょうど去年の3月からお世話になっているWe Are JavaScripters!のLT大会に参加してきました。
We Are JavaScripters!はJavaScriptで学習したことやTipsを紹介したりするLT大会や、
休日を使ったもくもく会などを開催しているコミュニティです。

今回はメルカリさんのきれいなオフィスで寿司が登場し、参加者も100人を超えてすごく盛り上がっていました。
(実は3ヶ月ぶりの参加でしたが、)ビギナー枠を設けるなど、長く続いて拡大していく中でコミュニティとして大事にしていきたいところを守るために模索されているのを感じました。

運営の方々お疲れ様でした!!!

メモ

メルカリ 会場スポンサー LT

会場スポンサーのメルカリさんのLTでしたが、僕は15分くらい遅れて会場入りしたので、聞くことができませんでした。
ただ、Twitterを見る限り、iOS Safariのリリースもうけて、PWAに取り組むぞということをされていたようでした。

チームをCQRS - boiyaa

speakerdeck.com

We Are JavaScripters!ではおなじみboiyaaさん

CQRS ?

  • 全ての処理はコマンドかクエリ
  • 実装ではAkkaなどが有名

人の役割もCQRSを取り入れたい?

最近の問題意識 = クライアントサイドにロジックが寄ってしまう

  • フロントエンドエンジニア => 参照系
  • バックエンドエンジニア => 更新系

にわけるのはどうか?

フロント未経験者のReactプロダクト改善 - shikichee

speakerdeck.com

Ubie

たまる技術的負債

最近では当たり前になっているけれども負債になっているのではないか? => いつまでも不安 こういう場で情報共有したい!


### new version of context in React 16.3 - sottar_

speakerdeck.com

New Lifecycle method

Context API

  • Props経由の値渡し
  • ページ全体に関わることは必要なくない?

子階層から直接呼び出せるようにしたい

React.createContext()

  • ステートの値をproviderがcontextに入れる => Consumerが受け取ってレンダリング

Ref: What’s new in React 16.3(.0-alpha) – Bartosz Szczeciński – Medium

What is necessary for Developer Friendly UI? - kuwahara

speakerdeck.com

  • Riotのコミッター

Bad sample of Web page UI

Api callの連鎖的 UI => 難しい記憶しかない

forkwell スポンサーLT

PR担当

キャリアアップ

できないエンジニア

  • 市場の評価 > 社内の評価
  • 市場の評価 < 社内の評価

できるエンジニア

  • 市場の評価 = 社内の評価

どうやって社内の評価と市場の評価をギャップを埋めるか?

  • 市場の評価 > 社内の評価 => コミュニケーション力
  • 市場の評価 < 社内の評価 => 技術力

勉強会懇親会参加しよう スカウトサービスという選択肢も?

Vuetifyで学んだあれこれ - ともこ

Vue

  • サポートライブラリの充実
  • コンポーネントの開発
  • 一つのファイルに3つの要素(.vue)

Vuetify

さわってみて

  • やってみた系の記事は情報が少ない
  • OSSフレームワークのソースを読んでVueの使い方を勉強

HyperappでMarkdownエディタを作って薄い本をかきたい - atsuco

speakerdeck.com

Hyperapp?

  • 軽い!!
  • 技術書店で詳しく書く

Markdownエディタ

  • Markdown => JSXは難しい
  • 知見求む、らしい

Osushiに見るフロントエンドのセキュリティ - シベ

speakerdeck.com

「控えめにいって最悪の経験をした」

  • 原因?
    • セキュリティ
    • 法律
    • 考えの甘さ
    • 早く世に出して仮説検証したいという思いが先行しすぎてしまった

ex ) アクセストークンが可逆暗号で作られていた => UUID

セキュリティ対策

  • 攻撃の数を減らす
    • DevToolハックによる撹乱
  • 攻撃を防ぐ
  • 被害を減らす
    • 可能な限り個人情報をAPIで返さない

継続的 npm update のために実践していること - シゲオカ タダシ

speakerdeck.com

Tokyo Otaku Mode

nom update

  • サービス開発が忙しくて、それどころではない?

npm ローカルモジュールを活用する

https://efcl.info/2014/10/04/npm2-local-module/

npm update & pull request

アップデートツール

  • Greenkeeper
  • Dependeabot

常に最新の環境を目指す!

WASMとES modules - chikoski

WASMはモジュール

  • ES modulesに似ている
  • C Rust C++ AsemblyScript(TypeScript)
  • WebAssembly Studio

WASM Web embedding API

ES2016 moduleとの違い?

モジュール = 名前と値の対応表

より便利に

  • Webpackで区別しない

「プロを目指す人のためのRuby入門」を読んでRubyに入門した

Rubyに入門する必要があったので、Rubyを書いたことがない僕でも最近話題になっていると知っていた、プロを目指す人のためのRuby入門を購入して読んでみました。
Kindleで読んだのではじめはわからなかったのですが、紙の本では全体で472ページとかなりボリュームのある本で、読み終えるのにかなり時間がかかりました。
出版からかなり期間が空いてしまっていますが、感想と良かったところを描いておこうと思います。

難易度

第1章で書かれている対象読者に「Rubyを使った仕事に就きたい人」ということが書かれており業務でのプログラミング歴といえば、1年半程度PHPJavaScriptで仕事をしてきて今度Rubyを使って開発する予定の僕にはピッタリの本ではないかと思いました。
実際、各章の例題を写経したり、いたるところに出てくるサンプルコードをirbで実際に動かしたりすることで、これまでに学んできた言語との書き方の違いを意識しつつ学習をするめることができました。
また、Ruby以外の基本的な話題や、書籍では書ききれないトピックなどは、著者の伊藤淳一さんの書かれたブログや、参考文献、読むべきドキュメントなどを豊富に記載していただけているので、本当に初学者であっても丁寧にやっていけば読破できるのではないかと思いました。

TDD、リファクタリング

この本では2章から10章でそれぞれの章の文法を理解するための例題があります。

すべての例題は、こちらで写経しました。

github.com

お題紹介からTDD(テスト駆動開発)のサイクルを説明しながら読者と一緒に例題を解いていくというスタイルでした。
TDDについての詳しい説明はありませんでしたが、

通らないテストを始めに書く
とりあえず通るように仮実装する
テストコードを増やす
本実装をする
リファクタリングをする

という一連の流れを実際に各章で体験することが出来る、良い例題でした。

その中でも、第7章の改札機プログラム、第10章のワードシンセサイザーの作成はすごく面白く進めることができました。

Rubyらしい書き方

例題が終わった後は、各章の文法をより深掘って説明されています。
すると、

この文法のこの書き方は、実は以前説明したこの書き方でも代用できます
この書き方は一応文法として紹介しておきますが、あまり業務で触れることはないでしょう

などと言った説明が散見されます。

この本でも言及されていますが、以前からRubyは色々な書き方ができる、というように聞いていたので、それを実感しました。

一度読んだだけでここで紹介されているすべてを書き方を覚えることはできないので、頭の片隅に入れつつ折にふれて戻ってきたときに、自分の進歩がわかるのではないかと思いました。

まとめ

Rubyに入門しましたが、紹介されていた資料なども読み切れていなかったりするのでこれがRubyの「門」なんだな、という感じです。
これからコードを書いていってこの本に立ち返っていくことになるだろうと思いました。

【2018年版】分割キーボードのErgoDox EZ購入から利用開始まで

分割エルゴノミクスキーボードとして有名な、ErgoDox EZを購入したので、まだ3日しかたっていませんが、購入方法と行った設定などをまとめておきます。
まだ慣れませんが、この記事はすべてErgoDox EZで書いています。

f:id:zuckey_17:20180325144301j:plain:w400

動機

ErgoDoxの特徴としてあげられるのは、

  • 左と右でキーボードが別れている
  • 親指に6角キーが割り当てられるという変わったキー配列
  • キーのマッピングオープンソースで開発されているソフトウェアによって、カスタマイズ可能

ということですが、 買った基本的な動機は単なるミーハー心です。
後は肩こりひどくなってきたので胸を張って肩甲骨をしっかり閉じた状態にしておくという開発体験をしたいということで、購入しました。

購入

ergodox-ez.com 公式ページから購入しました。
Let's splitや自作することも検討したのですが、はんだ付けなどやったことがなかったため、初めてとしてやめておきました。

僕の場合は、3月5日に注文して3月22日に到着したので、2週間強で受け取ることができました。
ブログによっては、5日位で届いたというのも見たことがありますし、注文完了のメールによると受注生産だそうなので、混み具合によっても変わってくるのではないかと思われます。

注文完了メールには、トラッキング出来るよ、と書いてあるように見えますが、実際そのリンク先には注文内容がそのまま載っているだけです。
運送業者は(おそらくデフォルトだった)DHLを選択しましたが、発送が完了した段階でDHLから連絡がきて、何日に届くのかということがわかります。
僕の場合は時間指定はできず、22日中に届くと書かれていましたが、21時ころに届きました。

f:id:zuckey_17:20180325143840j:plain:w300

金額

を購入しました。 注意が必要なのは、値段はこれだけではなかったということです。
全世界共通の配送料が +$30と運送業者に支払う税関係が約3000円かかりました。

オプションについて

筐体はブラック、キーキャップもブラックの無刻印のものを選びました。
キーボードの軸はそれによってうち心地とかがかわるというので悩みましたが、

fps.game2ji.com

を参考に、静かで疲れにくいという観点から、赤軸を選びました。

設定など

到着した状態で、USBを繋げばUS配列キーボードとして普通に使うことができます。
デフォルトのキー配列は、こちらのURLから確認することができます。

ErgoDox EZ Configurator

こちらのページではErgoDoxの特徴であるキーマップのカスタマイズをすることもできます。
ここでは、キーマップを独自のものに変更する手順を紹介します。

準備

まず 、Teensy Loaderというキーマップの書き込みに必要なアプリケーションで、利用しているOSにあっているものを以下のページからインストールする必要があります。

Teensy Loader Application - available for Windows, Linux and Macintosh systems f:id:zuckey_17:20180325144350p:plain

キーマップを決定

ErgoDox EZ Configurator f:id:zuckey_17:20180325145322p:plain

こちらのページにアクセスし、
Clone and modify this layoutをクリックします。
すると、キーマップが変更できるようになります。
GUIで簡単に変更することができますが、真ん中のロゴをクリックすると英語ですが、このページの詳細な使い方の動画に飛ぶことができます。

レイヤー

キーマップ設定画面にはLayerというタブがあります。
レイヤーを変えて、それぞれのキーに違う役割を割り当てることができます。
レイヤーを変えるためによく使う役割は以下の2つです。

TG: レイヤーを切り替えます。他のキーが切り替え後のレイヤーの役割をするようになります。
LT: この役割を割り当てられているキーを押している間のみ、他のキーが指定のレイヤーの役割をするようになります。

それぞれを利用する場合には、キーをクリックして出てきた吹き出しの↓で示した部分にそれぞれ、「LT」「TG」と入力することによって候補を絞ることができるのでその中から選びましょう。 f:id:zuckey_17:20180325144359p:plain 他にも様々な役割があるので、キーをクリックして説明を見ましょう。

キーのコンパイルとダウンロード

好きなようにキーマップを変更できたら、キーマップに名前をつけてからCompile this layoutボタンを押します。
次に、Download this Layoutボタンを押すと、.hexの拡張子を持ったファイルがダウンロードできると思います。

キーマップの書き込み

最後に、Teensy Loaderを起動し、「File>Open Hex File」をおして先ほどダウンロードしたキーマップファイルを選択します。
そして、右手側のキーボード以下の部分にある小さな穴の中のボタンを押します。(僕は安全ピンでやりました。)

f:id:zuckey_17:20180325144230p:plain:w300

すると、「Operation>Program」が押せるようになり、押した後に、「Operation>Reboot」によって、キーマップの書き込みが完了します。

完了すると、指定のキーマップによる入力が、完了していると思います。

まとめ

まだ、消品が到着してから2日しか経っていないので、レビューではないですが購入から利用開始までの流れを書きました。
特に注文してからの流れや、初めてのキーマッピングのところなどは、最近の日本語の記事は多くなかったと感じたので、参考になれば幸いです。
これからもキー配列などどんどん変わっていくとは思いますが、次は、キーマップのローカルでのコンパイルや、マクロを登録するなどに挑戦したいと思います。

npxとnpm-run-allでローカルモジュールを実行する

小ネタです。

npm管理下のプロジェクトで、なにかのモジュールのコマンドを叩きたいということがよくあります。

その場合、僕がよく使っていたのは、

  1. ./node_modules/.bin/(パッケージ名)
  2. package.jsonにnpm-scriptsを書いて npm run (script名)

でした。

npx

ところが、npm 5.2.0からは、npxというコマンドが利用可能になり上のどちらの方法よりもシンプルに使えるようになっていました。

npx (パッケージ名)

また、npxコマンドを使うと、ローカルのプロジェクトにインストールしていないモジュールのコマンドも、一度だけ実行することが出来ます。

npm-run-all

また、npm-scriptsをたくさん実行したいときがあると思います。その時は

npm run lint & npm run build:server & npm run build:client

などと書いたりします。

こちらもnpm-run-allというコマンドを利用すると、シンプルに書くことができます。

www.npmjs.com

npm install -D npm-run-all

してから、上記のようなコマンドであれば、

npm-run-all lint build:*

というふうにまとめることが可能です。

コマンドの実行時に、オプションとして

-sで順次実行に、-pで並列実行になるので、こちらも覚えて置くと良いかもしれません。

まとめ

ちょっとしたことでしたが、僕は最近まで知らなくて、いちいち./node_modules/.bin/(パッケージ名)などと書いていたので、その手間が省けて良いなとおもいました。
こういう日々の細々した事によって効率に違いが出てくるので、皆さんもそういった小ネタをどんどんアウトプットしていただければ嬉しいです!