タグ

プログラミングとWebに関するanimistのブックマーク (3)

  • 開発体験を変える! Chrome DevTools Tips 7選 - Qiita

    最近Chrome DevToolsについて調べていて発見した便利機能を紹介します。 誰もが使える最高便利な開発マシンChrome DevToolsを使いこなして開発体験を変えましょう! 1. $0で選択中のDOM要素の取得 特定の要素に何かしたいという時には、要素のIDやclassを確認してConsoleでdocument.querySelector("#xxx")で取得するというのが一般的だと思います。実はそれはカーソル選択と$0で代替できます。 Classや、IDがついていない特定のDOMを取得したい時とかにも使えるので地味に便利です。 手順 カーソルで取得したい要素を選ぶ Consoleタブで$0を入力 最近知ったChrome DevToolsの便利機能① $0 での選択中のDOM要素取得 Elementsタブで選択状態のDOM要素は、Console上で $0 を入力することで取得で

    開発体験を変える! Chrome DevTools Tips 7選 - Qiita
  • フロントエンドエンジニアのための動画ストリーミング技術基礎

    動画はデータ容量が大きい 画像と違い、動画コンテンツはデータ容量がとても大きいため、データをダウンロードして再生するまでに待ち時間が発生します。 動画のデータ容量が大きい理由はとても単純で、動画は画像データが集合したものだからです。静止画像を人間の目が滑らかに感じられる速さで切り替えて表示することで絵を動かすという表現を実現しています(よくパラパラマンガに例えられますが、そんな感じです)。この人間の目が滑らかに感じる速さというのが 1 秒間に 30 枚だったり 24 枚を切り替えることになります。29.97 (≒30) fps とか 24 fps とかの数字を耳にしたことがあるかと思いますが、24 fps の場合は 1 秒間(s)の間(p)に 24 フレーム(f)を切り替えることを意味します。 データを全て自分の端末にダウンロードしてから再生しようとすると、かなり長い待ち時間が発生してしま

    フロントエンドエンジニアのための動画ストリーミング技術基礎
  • Media Source Extensionsを使ってみた (WebM編) - Qiita

    モバイルブラウザのビデオ再生でアプリキャッシュが使えるかを再度検証で紹介したように、Androidのブラウザでは、アプリケーションキャッシュを使っても、<video>タグでデータを先読みしてタップしたら直ちに再生する、といった挙動を実現することができませんでした。 そこで、少し手の込んだ方式になってしまいますが、Chrome等でサポートされている、Media Source Extensionsを使って、キャッシュされたWebMファイルをXMLHttpRequestでロードして<video>タグで再生してみます。 なお、だったらXMLHttpRequestでデータを取得してBlobを生成すればいいのではないか、という声も聞こえてきそうですが、残念ながら、これもまたモバイルブラウザでは上手く行かなかったりします。 Media Source Extensionsの予備知識 そもそも、Media

    Media Source Extensionsを使ってみた (WebM編) - Qiita
  • 1