無職です。はたらいてます。 旧ブログ: 1 Entry per Day

SPAでvideo要素とsource要素を組み合わせるときに気をつけること

video要素を使うときにsource要素を使って動画リソースを指定する場合、source要素の生成タイミングに気を使う必要があります。

例えば、Vue.js で動画リソースのvideoUrl という変数をHTMLテンプレートにバインディングなら下のHTMLように書きます。

<video>
    <source :src="videoUrl" >
</video>

この書き方だと、video要素とsource要素は最初から書き出されます。 しかし、src属性は videoUrl に値が設定された後に追加されるので、空のsource要素となってしまっている瞬間がありえます。 ちゃんと仕様を調べたわけではないのですが、どうやら既に存在しているsource要素のsrc属性が後から変更されてもvideo要素のリソースとしては読み込んでくれません。

こういう場合、とりあえずはsource要素も videoUrl を設定するタイミングで新たに書き出してあげる挙動にしておけばよいようです。

<video>
    <source v-if="videoUrl" :src="videoUrl" >
</video>

もっとも、このくらい単純な実装の場合、source要素を使わずにvideo要素に直接src属性を書いてもいいのですけど。

CIをスキップするコミットメッセージをよく間違えるのでcommitフックでチェックする

CIサービスを使っていて「このコミットはドキュメント変えただけだからCI走らせなくていいや」みたいない場合、コミットメッセージに[ci skip]と含めてあげると、CI実行をスキップしてくれます。

ただ、このマジックワードをうろ覚えなので、いつもskip-ciとか微妙にミスった内容でコミットしてしまうことがありました。

なので、gitのコミットフックでチェックしてみます。

以下の内容で .git/hooks/commit-msg というファイルを用意してあげればフックが動きます。ファイルに実行権限を付け忘れないように注意。

#!/usr/bin/env node

// Check typo for "[ci skip]".
// FYI: https://srz-zumix.blogspot.com/2018/03/ci-ci-20183.html
const fs = require("fs");
const msg = fs.readFileSync(process.argv[2], { encoding: "utf8" });
const regexp = /\[?(skip[\s-]ci|ci[\s-]skip)\]?/gmi;
const expected = ["[ci skip]", "[skip ci]"];
const matched = msg.match(regexp);
if (matched && matched.length > 0 && !expected.includes(matched[0])) {
  console.error("Not commited!");
  console.error(`Use "[ci skip]" instead of "${matched[0]}", because it's wrong or not generaly.`);
  process.exit(1);
}

正規表現でそれっぽい文字列を引っ掛けて、各CIサービスで対応しているマジックワード[ci skip] または [skip ci])ではなかったらエラー扱いでコミットさせません。

慣れているJavaScriptで書くためにNode.jsで実行するスクリプトにしましたが、普通のshやRubyとかPearlとか好きな言語で書いてもいいと思います。

参考

-webkit-overflow-scrollingはスタックコンテキストを生成するのでz-indexに影響する

スマホで慣性スクロールを良い感じにするために -webkit-overflow-scrolling: touch; を指定することがあります。 しかし、このプロパティは非標準であり、iOS Safariでだけ有効なものです。そのためiOS Safariだけ挙動が違ってびっくりします。

developer.mozilla.org

さらに、-webkit-overflow-scrolling: touch; はスタックコンテキストを生成するので、z-indexに影響します。 z-index・スタックコンテキストについては↓のz-index本が詳しいです。

masahiko.booth.pm

この問題に遭った時の解決方法は次の3種類くらいかなと思っています。

  1. -webkit-overflow-scrolling を使うのをやめる
  2. 当該箇所のマークアップを変更
  3. (影響があるのが特定タイミングだけなら)-webkit-overflow-scrollingをunsetするjsを書く

CircleCIのPerformance Pricing Planの料金を計算するツールを作った

この記事は CircleCI Advent Calendar 2018 の12月15日の記事です。


他のAdvent Calenderの記事が気合い入りまくっていてびっくりしているりんご@mstssk です。

CircleCIについてのあれやこれやのゴイスーな記事は他の方にまかせて、私はこんなのを作ってみました。

mstssk.github.io

CircleCI の Performance Pricing Plan の価格を計算するツールです。 UIが残念なのは仕様です。

使用イメージ
Image from Gyazo

CLIでも使えます。npmパッケージとして公開しているので、Node.jsが入っていればnpxコマンドですぐ使えます。結果の単位はUSドルです。 npm version

$ npx @mstssk/ppp 5 large:1500 macos-large:1000
npx: 1個のパッケージを4.342秒でインストールしました。
123

もちろん非公式ツールです。あくまで参考程度でお願いします。 ちなみに、前職で実際Performance Pricing Planを導入しようとした際は、CircleCIのセールスエンジニアが見積もりを出してくれました。

計算の元ネタはどはこちらの記事から。 qiita.com

ソースはGitHubにあります。CircleCI Japanコミュニティのキックオフの最中に小一時間で書いた雑実装です。

github.com

社内勉強会で「Splatoonで考えるチーム論」という発表をした

社内の開発チームで隔週でやってる勉強会で、話す内容は何でもいいってことなので Splatoon の話をしました。

Splatoon で考えるチーム論

チーム論と銘打ってますが、そこまでかっちりとした感じではなく、単にSplatoonをプレイ中にチームとして動くにあたって気をつけてる事をまとめた内容です。 細かいテクニックとかではなく、チームとしてパフォーマンスを発揮するにはどう考えて動くべきかみたいな話。

株式会社 Viibar に入社しました

viibar.com

10月15日から既に働いてたんですが、 blog 書くのサボってました。

これまで

前職のトップゲート社では、Google Cloud Platform はもちろん、 Angular でフロントエンドがっつりやったり、初めてプロジェクトリーダーとかテックリード的なポジションでの経験も積むことができました。自分のキャリアの中で大きく躍進できた期間でした。

実は早めに退職しリフレッシュ期間として最近流行りの無職を謳歌していました。リフレッシュ期間のはずが途中のべ1万人が集まるイベントでスタッフやってくたびれていたような気もしますがたぶん気のせいです。

これから

今は Vync という動画制作などのための制作管理ツールの開発に携わってます。 viibar.com

開発期間が結構長く当たり前ですが技術的負債もあり、がっつり改善していくのが楽しいったらありゃしません。 他方、 Ruby 周辺のエコシステムが個人的にしっくり来ずに苦しんでいたりもします。

プロダクトに関わりながら開発がスケールするよう環境改善していくのを当面の自分のミッションとしてます。

その他

それと、再来週あたりに LEAD SUSHI NIGHT! という何があってそんな名前になったんだという感じのイベントを Wantedly と共同でやるそうです。 当日は後ろの方で見てると思います。 sushinight.connpass.com

ほしい物リスト

あまり贈ってもらったことない1んですが、慣例として一応ほしい物リスト置いておきます。 一応整理したら何故か酒ばっかりになりました。

Amazon.co.jp ほしい物リスト


f:id:mstssk:20181108223152j:plain


  1. T○NGAと一緒に「潤滑剤が必要だと思って」と KURE 5-56 を贈られたのが衝撃的過ぎて他を覚えていない。

mornin' plusを買ってみた

最近QoL上げようとNature Remo買ったりしてスマートホーム化を進めています。

カーテンの開閉も自動化できたらいいなと思い、他の自動カーテンより設置しやすく値段も安めなmornin' plusをとりあえず買ってみました。

mornin.jp

以下は設置してみた写真。既存のカーテンレールにぶら下げるだけです。 写真では見えませんが、カーテンレールを走るようタイヤが付いており、本体が動くことでカーテンを移動させる仕組み

f:id:mstssk:20180917132458j:plain:w320

メリット

  • 設置が楽
    • 他の自動カーテンはもっと大掛かりだったりするんですが、これは既にあるカーテンレールにぶら下げるだけ。
  • 安い
    • 他の製品は1〜2万円が価格の下限です。ニトリのもので9千円台のものがありますが、カーテンレールごと付け替える必要があるみたい。
  • 指定時刻に自動開閉する機能あり
    • 専用アプリで開閉する曜日と時間を決めておけます。例えば、平日の朝7時に自動でカーテンが開くようにしておくことで目を覚ましやすいです。

デメリット

本当は「ok google、カーテン開けて」とかやりたいんですが、基本的にmornin' plusではできません。 これが個人的な一番のマイナス点。

IFTTT + Pushbullet + Taskerを組み合わせてなんとかしている方はいるようです。ここまでやったのはすごい。 Google Home と mornin' を使って声でカーテンを開閉する 私も同じ環境を構築してみようとしたんですが、昔使っていた端末を人身御供にしてやろうとしたところ、Pushbulletの通知周りが上手く飛んでこずに断念しました。 端末自体がガタが来ていたとか、1つのアカウントで複数台Pushbulletログインしていた+IFTTT→Pushbulletの連携が端末を指定できない、とか細かい問題がちょくちょくある上、構築できたとしてもボイスコマンドからmornin' plusが実際に動き始めるまでに20秒くらいかかってしまうなどコストが辛いです。

今後

mornin' plusがGoogle Assistantとかと対応してくれるとありがたいんですが、一筋縄ではいかなさそうです。 スマートスピーカーとの対応は考えていないわけではないですが、今のBLE,乾電池式という設計上本体の拡張が大変なのであまり期待はできないようです。 他のスマートホーム機器のシリーズのようにコンセント直差しの中継機器なんかを出すとかでしょうか…

カーテンを自動開閉するIoT機器の開発秘話とスッキリ起きるコツとは? 株式会社ロビットに聞く。 – SmartHacks Magazine

もうしばらくmornin' plusを使ってみるつもりですが、いずれは他のものに買い換えることも考えてはいます。 単純な話、赤外線リモコンで操作できる他のものを買ってしまえば、既に持っているNature Remoで操作できるのでGoogle Assistant連携も一瞬なんですよね。

赤外線リモコンで操作できるかどうかちゃんと調べたわけではないですが、他にも自動カーテンのラインナップで見かけたものを並べておきます。

mornin' plusの本体の設置のしやすさ取り回しやすさは魅力なので、公式でよいソリューションを提供してくれるとホントは嬉しいんですが。