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とか好きな言語で書いてもいいと思います。
参考
- CIサービスの自動ビルドをスキップする方法まとめ - Qiita https://qiita.com/vmmhypervisor/items/f10c77a375c2a663b300
- ブログズミ: [CI] 各種 CI サービスのビルドスキップコメントまとめ (2018/3) https://srz-zumix.blogspot.com/2018/03/ci-ci-20183.html
-webkit-overflow-scrollingはスタックコンテキストを生成するのでz-indexに影響する
-webkit-overflow-scrollingはiOS Safariで有効で、しかもスタックコンテキストを生成する。そのため、他のブラウザと要素の重なりが全然異なってしまっているという不具合だった。
— りんご🍏ガチアサリをXにした (@mstssk) 2019年3月1日
z-index本にもこれは書いてなかった(非標準プロパティだしな!)
スマホで慣性スクロールを良い感じにするために -webkit-overflow-scrolling: touch;
を指定することがあります。
しかし、このプロパティは非標準であり、iOS Safariでだけ有効なものです。そのためiOS Safariだけ挙動が違ってびっくりします。
さらに、-webkit-overflow-scrolling: touch;
はスタックコンテキストを生成するので、z-indexに影響します。
z-index・スタックコンテキストについては↓のz-index本が詳しいです。
この問題に遭った時の解決方法は次の3種類くらいかなと思っています。
CircleCIのPerformance Pricing Planの料金を計算するツールを作った
この記事は CircleCI Advent Calendar 2018 の12月15日の記事です。
他のAdvent Calenderの記事が気合い入りまくっていてびっくりしているりんご@mstssk です。
CircleCIについてのあれやこれやのゴイスーな記事は他の方にまかせて、私はこんなのを作ってみました。
CircleCI の Performance Pricing Plan の価格を計算するツールです。 UIが残念なのは仕様です。
使用イメージ |
---|
CLIでも使えます。npmパッケージとして公開しているので、Node.jsが入っていればnpxコマンドですぐ使えます。結果の単位はUSドルです。
$ npx @mstssk/ppp 5 large:1500 macos-large:1000 npx: 1個のパッケージを4.342秒でインストールしました。 123
もちろん非公式ツールです。あくまで参考程度でお願いします。 ちなみに、前職で実際Performance Pricing Planを導入しようとした際は、CircleCIのセールスエンジニアが見積もりを出してくれました。
計算の元ネタはどはこちらの記事から。 qiita.com
ソースはGitHubにあります。CircleCI Japanコミュニティのキックオフの最中に小一時間で書いた雑実装です。
社内勉強会で「Splatoonで考えるチーム論」という発表をした
株式会社 Viibar に入社しました
10月15日から既に働いてたんですが、 blog 書くのサボってました。
これまで
前職のトップゲート社では、Google Cloud Platform はもちろん、 Angular でフロントエンドがっつりやったり、初めてプロジェクトリーダーとかテックリード的なポジションでの経験も積むことができました。自分のキャリアの中で大きく躍進できた期間でした。
実は早めに退職しリフレッシュ期間として最近流行りの無職を謳歌していました。リフレッシュ期間のはずが途中のべ1万人が集まるイベントでスタッフやってくたびれていたような気もしますがたぶん気のせいです。
これから
今は Vync という動画制作などのための制作管理ツールの開発に携わってます。 viibar.com
開発期間が結構長く当たり前ですが技術的負債もあり、がっつり改善していくのが楽しいったらありゃしません。 他方、 Ruby 周辺のエコシステムが個人的にしっくり来ずに苦しんでいたりもします。
プロダクトに関わりながら開発がスケールするよう環境改善していくのを当面の自分のミッションとしてます。
その他
それと、再来週あたりに LEAD SUSHI NIGHT! という何があってそんな名前になったんだという感じのイベントを Wantedly と共同でやるそうです。 当日は後ろの方で見てると思います。 sushinight.connpass.com
ほしい物リスト
あまり贈ってもらったことない1んですが、慣例として一応ほしい物リスト置いておきます。 一応整理したら何故か酒ばっかりになりました。
mornin' plusを買ってみた
最近QoL上げようとNature Remo買ったりしてスマートホーム化を進めています。
カーテンの開閉も自動化できたらいいなと思い、他の自動カーテンより設置しやすく値段も安めなmornin' plusをとりあえず買ってみました。
以下は設置してみた写真。既存のカーテンレールにぶら下げるだけです。 写真では見えませんが、カーテンレールを走るようタイヤが付いており、本体が動くことでカーテンを移動させる仕組み
メリット
- 設置が楽
- 他の自動カーテンはもっと大掛かりだったりするんですが、これは既にあるカーテンレールにぶら下げるだけ。
- 安い
- 他の製品は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連携も一瞬なんですよね。
赤外線リモコンで操作できるかどうかちゃんと調べたわけではないですが、他にも自動カーテンのラインナップで見かけたものを並べておきます。
- 電動カーテンレール|製品情報|学習リモコン,マルチリモン,LED照明調光器,電動カーテンレールは専門メーカーNasnos(ナスノス)へ
- 両開き用 電動カーテンレール(アルバ 184cm) | ニトリ公式通販 家具・インテリア・生活雑貨通販のニトリネット
- IoTカーテン「eCurtain」はスマホで開け閉め、スマートスピーカーなら声でも操作!タイマーなど自動開閉にも対応。「Makuake」で先行予約開始 | ロボスタ
mornin' plusの本体の設置のしやすさ取り回しやすさは魅力なので、公式でよいソリューションを提供してくれるとホントは嬉しいんですが。