みなさんはPicture-in-Picture(PiP)という機能を使ったことがありますか。PiPは動画コンテンツなどを浮遊する小窓に表示する機能です。小窓はウィンドウの外側を自由に移動できます。 デスクトップが賑やかになりがちなPCでもPiPは大活躍なのですが、特にスマートフォンにおいては数少ない「ウィンドウ」機能になります。Androidはもちろん、iOS14も対応したことで話題になりました。 これによってスマホ一台あれば、ソシャゲの公式生放送を見ながらソシャゲのイベントを周回する地獄のような行為が可能になりました。 利用者という視点から見ると非常に便利なのですが、開発者から見ると動画しか表示できないのはなかなか使い所が難しくなります。そこで、この機能を使って好きな情報を表示できないか実験してみました。 PiP機能の対応環境 Chrome 70 Firefox 71（制限付き） mac

tl;dr 驚くべきハックにより旧Androidも引き続き証明書エラーなくサイトを閲覧できそうです いよいよ5/4に標準の証明書チェーンが切り替わります 前回までのおさらい Android7.1以前でLet's Encrypt証明書のサイトが見られなくなる Let's Encryptの証明書切替周りその後 Let's Encryptはルート証明書を自身(ISRG)の認証局のルート証明書(ISRG Root X1)に切り替えようとしています。現在は、IdenTrustのルート証明書(DST Root CA X3)が使われています。 正確に言うと、ISRGは新しい認証局なのでそのルート証明書の普及率も当然低く、中間証明書はIdenTrustのルート証明書でクロスサインされており、それが標準で使われています。標準がDSTになっているだけで、ISRGのルート証明書のチェーンの証明書も指定すれば今で

この記事では、Webデザイン制作の面倒な作業をラクにするCSS便利ツール87個をまとめています。なお、新しいツールを随時アップデートしています。 CSS FlexboxやGridをつかったレイアウト生成ツールや、レスポンシブ対応の画像ツール、配色に困ったときに便利なツール、多彩なCSSアニメーション、話題のニューモーフィズムなど、CSSスタイリング時間節約や、さまざまな問題を瞬時に解決することを目的に作成された便利なツールが揃います。 Web制作に活用したい最新ツールと合わせてチェックしてみてはいかがでしょう。 これだけあれば困らない！Web制作を快適にする最新オンラインツール48個まとめ Web制作�の面倒�な作業をラクにするCSS便利ツールまとめ CSS box-shadow Examples さまざまなサイトで実際に使われているCSS box-shadowを集めているライブラリ。お好

※本記事はアフィリエイトプログラムによる収益を得ています Yellstonが、音声合成サービス「CoeFont STUDIO」を公開しました。入力した文章を読み上げてくれるWebサービスなのですが、無料とは思えない極めて自然な音声で読み上げてくれるとさまざまなかいわいの人たちをざわつかせています。すごいのが出てきた……！ CoeFont STUDIO 試しに吉野家コピペを入力して読み上げさせてみたところ、大変流ちょうに読み上げ始めて爆笑しました。イントネーションが調整できるようになっているのですが、特に調整する必要性は感じないほど。 現在芯の通った声質の「アリアル」と透き通った声質の「ミリアル」の2種類の音声が公開されており、自由に切り替えられます。ミリアルの方は「Prototype」の記述があり、アリアルの方がより自然に読み上げてくれる印象でした。 CoeFont STUDIOはリリース

自動的にライブラリのアップデートのプルリクエストを作ってくれるDependabotはとても便利です。ただ、何かと通常の開発タスクに追われライブラリアップデートのプルリクエストは滞留しがちです。それを解決するための仕組みはないかなと思い、試行錯誤してみたので書きます。 静的アセットのビルド差分からレビューの必要性を判断 今のチームのプロダクトでは静的アセット（JS, CSS, Image）のビルドにのみ Node.js を利用しています。 そのため、npm モジュールのライブラリアップデート時にプルリクエストのブランチでビルドされた静的アセットが、master ブランチでビルドされた静的アセットと差分がなければプロダクトの動きは変わららないはずです。 なので、そのビルド差分の有無をみれば詳細なレビューが必要かどうか判断できます。差分もなく CI も通っていればほぼ動作確認は不要で、Chang

IETFに「New UUID Formats」という提案仕様が提出されています。 これは、時系列順にソート可能なUUID version 6, UUID version 7, UUID version 8を新しく定義するものです。 詳しい背景は提案仕様にゆずりますが、ULIDを始めとして、時系列順にソート可能な一意な識別子を利用したいというユースケースがあります。例えば、データベースのキーとして使えば、ソートせずとも順番に並びますし、書き込む際も順々に書き込めるのでデータアクセスが局所的になります。 今回は簡単に、それぞれのUUIDのフォーマットを眺めていきます。なお、フォーマットは異なりますが、バージョンを示す値は同じ位置にあります。 UUIDv6 UUIDv6は128bit長で、UUIDv1と似てるフォーマットを取ります。 1582年10月15日(グレゴリオ暦)からの100ナノ秒単位で

準備 CodeCommitに以下をプッシュします。 なお、CodePipelineによる自動デプロイではファイル上書きデプロイを設定できないので、必要に応じて appspec.ymlで元のファイルを削除するように対応します。 ソースコード(index.html, hello.conf) appspec.yml (本稿では beforeInstall.sh を利用) ちなみに、index.html や hello.conf の素材は こちら を使っています。 参考 ## appspec.yml version: 0.0 os: linux files: - source: ./hello.conf destination: /etc/nginx/conf.d/ - source: ./index.html destination: /usr/share/nginx/html/ hooks:

PCのキーボードや、スマートフォンの英数字入力画面では、数字の入力キーは「1234567890」の順番で並んでいることがほとんどです。当たり前のように目にするこの並び順ですが、よく考えると「1～9までは昇順に並んでいるのに、1よりも小さな数である0が一番右にある」というのはおかしな気もします。そんな疑問を投げかけたオンライン掲示板の質問に、技術の進歩の歴史を根拠にした納得の理由が回答されていました。 keyboard layout - Why is the 0 next to 9, not next to 1? - User Experience Stack Exchange https://ux.stackexchange.com/questions/76446/why-is-the-0-next-to-9-not-next-to-1 2015年4月、ユーザーエクスペリエンス(UX)の研

開発室の雑談。営業側のマネージャが言うには 「今のプロジェクトで自動テストの導入を試みている話をしたら、XXXさんのところでも過去にいくつか導入を試みたけどもみんな上手くいかなかったって話になって」 なるほど？ まあ確かに自動テストはシステム開発にとって魅惑の技法ではあるものの、では導入がうまくいっているか？　というと普及率は低いと言わざるを得ない。私がお手伝いしたプロジェクトでは、元請け側から自動テストをやるお達しが来たわけだが、紆余曲折あって掛け声倒れのような状態になってしまった。 ビジネス書の煽りタイトルのような本件だが、古式ゆかしき受注生産の業務システム開発プロジェクトに自動テストを導入しようとして失敗する事例を聞いたので、僕なりに分析して見出した要素を挙げておこうと思う。 V字モデル ソフトウェア開発の手法としてV字モデルというものがある。 オーダーメイドでシステムを作るにあたっ