2020-12-01

シニアジョブの開発メンバー、こんな人欲しいなぁ（ポエム）

これまでエンジニア職の採用面接を適当にやりすぎていて、確認し忘れが出てしまうのが良くない。
採用基準とまではいけないけど、最低限確認したいこととをまとめたい。

会社のエンジニア採用ページ。私が保守してるので内容は大丈夫なはず。
corp.senior-job.co.jp

2020/12現在のシニアジョブの状況

開発チーム体制

私を含めエンジニア職は3人、デザイナー1人、マーケ担当1人、そして社長。

開発するもの

1 .シニア人材の紹介、派遣を管理する社内システム
2. 求人サイト
3. 自社メディアサイト
4. 新規事業

1,2はコアな部分なので必須。3,4はその人の意向や得意分野による。
1,2は2016年の創業当初から残る結構つらめのコード、設計もまだまだたくさんあるので、そういうコード相手にしたことある人は安心。

確認したいこと

具体的な質問は都度考える

一人で進められる？

基本的に1人1タスクとなるので、いわゆる要件定義、設計、実装、テストから公開、保守まで全部担当してもらうことになる。
（外に出すページのデザインはデザイナーさんに頼むこともあります）

他のメンバーがサポートはもちろんするものの、利用場面や自社ビジネスもある程度理解して、既存のコードも読めないと質問もできないので、結構高めのハードルかも。

でも少なくともエンジニアチーム5人くらいまではそういう人だけにしたい。10人超えたらこれは無理そう。

LinuxとかPHPとかGitとか基礎的な教育はできない。

技術オタク？

採用ページ見てもわかる通りいろいろ使ってるし、これからも最適であればどんどん新しいの使っていく。

使ったことがない技術を見て、気が重くなるのではなく自分も使ってみたい！と思える人がいい。
使い慣れてるから、という理由だけでもっと優れてる新しいものを使わないのはイヤ。
新しい技術への興味、憧れみたいなのがある人がいい。

最近流行りの「○○に興味あります！」と言うだけでなく、実際に何か行動を起こして使ってたり、ブログとかGitHubにあげてたりすると最高。

「必要に応じて言語はなんでも使います」より、「この言語、フレームワークのこういう所が好き！」とか言える人の方がいい。

社長もコミュニケーション力はいらないと言ってた（これ言えるのすごい）。

ずっとコード書きたい人？

現状、大きなチームのマネジメント力とか、大きなプロジェクトマネジメント力とかは求めてない。
そのため将来的には自分で手を動かくのはいいやって思ってる人は現段階だと向いてなさそう。

エンジニアのためのマネジメントキャリアパス ―テックリードからCTOまでマネジメントスキル向上ガイド

作者:Camille Fournier
発売日: 2018/09/26
メディア: 単行本（ソフトカバー）

2020-11-06

TypeScriptでオプション的なオブジェクトをデフォルト値つきでいい感じに扱う

関数の引数や、クラスのコンストラクタとかでオプション系の値をオブジェクトで受け取るときに、いい感じに省略可能にする方法をよく忘れるのでメモ。

interface HogeFunctionOptions {
  optionFoo: string
  optionBar: string
  optionBuzz: string
}

const defaults = {
  optionFoo: 'default value',
  optionBar: 'default value',
  optionBuzz: 'default value',
}

function hogeFunction(options = {} as Partial<HogeFunctionOptions>) {
  const {
    optionFoo,
    optionBar,
    optionBuzz
  } = { ...defaults, ...options }
  // continue
}

ポイントは３つ

組み込みのPartialで省略可能にする

TypeScript: Handbook - Utility Types

スプレッド構文で上書き

キーが重複する場合は後ろの値（↓の例だとoptions）で上書きされる

{ ...defaults, ...options }

f:id:uyamazak:20201106142921p:plain

スプレッド構文 - JavaScript | MDN

分割代入で必要なものだけ取り出し

オプションのオブジェクトのまま使うより明示的で好み

const {
    optionFoo,
    optionBar,
    optionBuzz
}

分割代入 - JavaScript | MDN

速習 TypeScript 第2版速習シリーズ

作者:山田祥寛
発売日: 2020/03/29
メディア: Kindle版

プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発

作者:Boris Cherny
発売日: 2020/03/16
メディア: 単行本（ソフトカバー）

2020-09-28

ブラウザだけでVtuber用動画をつくるツールをKonvaとVueでつくってる

動画サンプル

https://youtu.be/3t2l1OH00lU
youtu.be
声はまだない。

作ってるやつ（スマホ非対応）

uyamazak.github.io

使い方

STARTしていろんな操作して録画、STOPすると出てくるDOWNLOADボタンで落とせます。UIまじで並べただけ。

経緯

架空のVtuberを題材とした漫画を描くというのでツッコんでるうちにこうなった。声はまだない。

WEBマンガ企画@uyamazak 「Vtuberのマンガなのにyoutubeリンク貼ってないの？」←ｾﾞｴｾﾞｴﾊｧﾊｧ　チャンネル作ったぞ(´・ω・`)

「動画無いの？」←あるわけないやろ(´・ω・`)ｲﾏｺｺ

やつがライブ２Dできるので、目を動かしてってお願いした(´・　ω　・`)そのうち動画ができるかもしれん pic.twitter.com/TlPv1ASEvv
— 八神秋一＠八木崎銀座 (@yagami_shuichi) 2020年9月21日

（断じてLive2Dはできない）

最初はJavaScriptで画像を指定した座標と時間で表示する紙芝居作るかぁと思いました。

でも、どうやらCanvasだと動画まで生成できることを知った。すごい。

MediaRecorder APIでCanvasを録画してみる | blog.kwst.site

画像の座標とかはVuetifyのSlidersでやるかぁと思いました。
vuetifyjs.com

リリースされたVue3使いたかったけどVuetifyや周辺がまだまだっぽいので2を使う。

うーんでもCanvasの操作は面倒だ、と思っていたらKonvaというライブラリがあり、さらにVue用の公式ライブラリもあるらしい。

konvajs.org

使ってる技術

Canvas周りはKonva、データ周りはVue、UIはVuetify、録画にブラウザの」MediaRecorder API。
ブラウザだけでどこまでVtuber動画作成ツールを作れるかの技術検証でもある。

詳細はソース
GitHub - uyamazak/marika_kitada: 架空のVtuber、北田まりかの動画をつくるためのWEBアプリ

公開先もGitHub Pages。サーバーサイド不要のクソアプリに最適でした。

ハマりどころ

録画できるcanvasは一つだけ

HTMLを見る感じKonvaはレイヤーごとにcanvasを作るようなので、v-layerは一つだけにしました。
それぞれ画像にして一つのcanvasにすることもできそうだけど録画は厳しそうだし、やってみると1レイヤーでも大丈夫そう。

vue-konvaだと生成されるcanvasにrefやidを貼れない

普通にKonvaを使うと自分で書いたcanvasにidを振って使うけど、vue-konvaだと自動で生成され手出しできなかった。
なんかいい方法ありそうだけど、上述の理由からページ上に一つしかcanvasはないため一旦下記で取得。

this.stream = document.getElementsByTagName('canvas')[0].captureStream()

動画はwebmでしか書き出せない（MacやChromeOSのChromeの場合）

なのでTwitterにはそのままアップできない。変換ツールはいろいろあるので問題なさそう。
（Windowsだとできるのかな？）

filters()するとPCは大丈夫だけどスマホだと画像が消える

原因は未調査。重い処理だからかな？

フィルターデフォルトでいろいろあって遊べます。
Konva Namespace: Filters

Noise
f:id:uyamazak:20200928181321p:plain

Invert
f:id:uyamazak:20200928181217p:plain

Pixelate
f:id:uyamazak:20200928182935p:plain

白目の後ろが透けないようにおいた白い資格にfilter適応するの忘れてるのに気づいた。

これから

声まじでどうするの。
できたらブラウザでいっしょに動画に収めたい。
ブラウザでできることだけ、を貫く。
背景の株価とかも変動させたいなぁ。

北田まりかに興味がある人は
八神秋一＠八木崎銀座 (@yagami_shuichi) | Twitter
と
北田まりか (@marika_kitada) | Twitter

技術的に興味ある人はGitHubやTwitterで私になんかください。

GAミント至上主義

Web Monomaniacal Developer.