「映像プレーヤー」を作成したことはあるでしょうか? 作成したことはなくても、おそらく日々様々なプレーヤーを利用していると思います。 HTML5で定義されるHTML Video Elementからは、メディア状態・エラー・DRM複合処理・広告再生・読み込み、などブラウザごとに多種多様なイベントが発生し…
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。PayPayモールのエンジニア関と、Yahoo!ニュースのデザイナー萩野です。 皆様、突然ですがPortalsをご存じでしょうか。 Portalsとは、新しいHTML要素です。2019年11月11日〜12日にサンフランシスコで開催された「Chrome Dev Summit 2019」(以下CDS)でも紹介されました。 本記事では、Portalsが可能にする新しいWebでの体験をご紹介します。 Portalsとは? なにができるの? Webブラウザー上でユーザーにとって良い体験を提供するためには、表示速度の向上が欠かせません。 Portalsを利用すると、画面遷移の体感速度を向上させることが可能です。 まずはこちらの比較
新しいHTML5 APPプラットフォーム「Capacitor」とは。HTML5を1ソースで、PWA、iOS/Androidアプリ、デスクトップアプリをリリース! 「a spiritual successor to Apache Cordova and Adobe PhoneGap」を目指して、Ionic teamがCapacitorをリリースしました。Cordovaの後継としてクロスプラットフォーム開発が大きく変わるので、ぜひご利用ください!(本記事は2018年8月執筆記事ですので、一部情報が古い場合があります。ご了承ください)。 Capacitorとは HTMP5 APPSを、PWA、iOSアプリ/Androidアプリ(ハイブリッドアプリ)、Electron(デスクトップアプリ)に変換するためのツールです。厳密にいえば、適切にラップや分岐処理をしてるのですが、まぁそこらへんの「どう動いて
Intro ページ内の特定の位置へのスクロールは、 URL フラグメントと HTML の ID 属性を用いて行われていた。 しかし、 ID を持たない要素へのスクロールというユースケースをカバーするために、フラグメントの拡張仕様が提案されている。 Chrome がフラグ付きで実装しているため、この仕様の特徴について解説する。 id 属性とフラグメント 従来の仕様では、 HTML 内にある ID 属性を URL フラグメントに付与することで、その要素まで自動でスクロールするという仕様になっていた。 https://html.spec.whatwg.org/multipage/browsing-the-web.html#try-to-scroll-to-the-fragment https://html.spec.whatwg.org/multipage/browsing-the-web.ht
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Randall Degges - Please Stop Using Local Storage 原文公開日: 2018/01/26 著者: Randall Degges 日本語タイトルは内容に即したものにしました。 画像は元記事からの引用です。 初版公開: 2019/10/19 追記更新: 2024/04/05 -- リンク情報を記事末尾に移動しました 本気で申し上げます。local storageを使わないでください。 local storageにセッション情報を保存する開発者がこれほど多い理由について、私にはさっぱり見当がつきません。しかしどんな理由であれ、その手法は地上から消えてなくなってもらう必要がありますが、明らかに手に負えなくなりつつあります。 私は毎日のように、重要なユーザー情報をlocal storageに保存す
サブリソース完全性 (Subresource Integrity, SRI) は、 (CDN などから) 取得したリソースが意図せず改ざんされていないかをブラウザーが検証するセキュリティ機能です。 SRI を利用する際には、取得したリソースのハッシュ値と一致すべきハッシュ値を指定します。 メモ: サブリソース完全性の検証において、サブリソースが埋め込まれる文書のオリジン以外から提供されたリソースについては、ブラウザーはオリジン間リソース共有 (CORS) を使用してリソースに追加のチェックを行い、オリジンがリソースがリクエストしたオリジンに共有されることを許可しているかどうかを確認します。 複数のサイトで使われるスクリプトやスタイルシートなどのファイルをコンテンツ配信ネットワーク (CDN) にホストすることにより、読み込みに必要な時間や通信帯域を減らすことができます。しかし、 CDN は
このページは、 Web プラットフォーム関連の様々な仕様の日本語訳の一覧と, それらの日本語訳に共通な事項についての説明です。 これらの翻訳の正確性は保証されません。 これらの仕様の公式な文書は英語版であり、 日本語訳は公式なものではありません。 誤訳が無いことは保証されません。 [ 当の仕様の策定者たちが想定している/当の仕様に期待されている ]意味論を完全かつ正確に反映することは保証されません。 翻訳なので、 語彙レベルで原文と正確に一致する意味を表すことは決してありません。 日本語は自然言語なので、 誰がいつどこで読んでも同じ解釈になることは保証されません。 )( 実際に誤訳が見つかることも時折あります。 それらについては見つかり次第修正され, 加えて用語の対訳や言い回しなども時折修正されるので、 これらの翻訳が「完成」する日は永遠に来ません。 逆に原文仕様が誤っていることもあり、
Apple Mail macOS iOS Gmail Desktop Webmail iOS Android Mobile Webmail Outlook Windows Windows Mail macOS Outlook.com iOS Android Yahoo! Mail Desktop Webmail iOS Android AOL Desktop Webmail iOS Android Samsung Email Android Mozilla Thunderbird macOS Windows ProtonMail Desktop Webmail iOS Android Fastmail Desktop Webmail HEY Desktop Webmail Orange Desktop Webmail iOS Android LaPoste.net Desktop Webm
html5ではインライン要素とブロックレベル要素の分類はなくなり、html4以前でインライン要素だったものの中にブロック要素を入れることができたりするようになりました。 また、そうすることでコンテンツ全体をaタグで囲い、その中にまたaタグを入れるようなレイアウトが出来るように成りました。 よくあるリンクの中にリンクを入れたいレイアウト よくありますよね! 全体をリンクにしてるけど、中の一部は違う場所にリンクを貼りたい! これの実装を考えてみます。 実装方法 見た目通り普通に書いてみる aタグの中にaタグを書いて実装しようとすると以下のように書くと思います。 <a href="/articles/1"> <!-- 全体をクリックすると記事ページヘ遷移 --> <img src="/assets/articles/1.jpg"> <p>タイトルタイトル</p> <div> <span>著者名:
まえがき W3C(とWHATWG)からの公式なアナウンスはまだ確認していませんが、何度目かに結成されるW3C HTML WorkingのDraft Charterと、このCharterから辿れるDRAFT Memorandum of Understanding Between W3C and WHATWG(Memorandumは日本語で覚書などと訳されるので、ここでも覚書と呼びます)がブログエントリーのタイトルのソースになります。もっとも、今確認できる覚書もドラフトですから、変更があるかもしれません。しかしながらURLで観測できるわけですから、大筋でW3CとWHATWGとの間で合意が取れているのではないかと推測します。あとは、覚書だけでなくCharterもドラフトということになっていますが、以下の文章では面倒なので省略します。最後にお約束ですが、このブログエントリーは「だいたいあってる」感
Web特有の事情はどう解決するのかに興味があって内部構造などを調べていた。 開発が進むにつれて実装はどんどん進化して問題解決されていくだろうし、現段階のこの情報の正確性も保証しない。個人のメモを公開しているだけなので鵜呑みにはしないようにしてほしい。 あと、Preview版が公開された後にFAQが追加されているので読んでおくほうがいい。 https://github.com/flutter/flutter_web/blob/master/docs/faq.md ニュース まとめ https://medium.com/flutter/a-roundup-of-flutter-news-at-google-i-o-453bb3249981 Flutter Webの開発体験とPreview版段階の技術的制約についての解説 https://medium.com/flutter-nyc/under-
リントツールをインストールしても使わなければ意味がない。 というわけで人的なリント忘れを未然に防ぐためにも、huskey と lint-staged と 各種リントツールを組み合わせてコミット前に自動的にリントが行われる環境を作りましょう。リントエラー時にコミットを弾くことによって git 上のコードの品質を保つことができます。 環境 husky 1.1.0 lint-staged 7.3.0 git hooks の設定を package.json などからできるようにしてくれるツールです。 生の git hooks だとチーム内で共有とかがしにくいですが、husky を使って設定を package.json などに書けば簡単に共有できます。 pre-commit フックを使うことが多いと思いますが、クライアントサイドのフックであればすべてサポートしているみたいです。 ステージングしたファ
前々から、ヘルプのバージョン管理をしたいと思っていたのですが、なかなか手が回らず放置していたところ、フリーランスで編集者をやっていた者がCSメンバーとして入社したので、それを機に、本格的に準備を進めて、今年頭から、運用を始めてみました。 1ヶ月ほど運用してみて、なかなか良い感じなので、紹介したいと思います。 ちなみに、boardという見積書や請求書作成・業務管理・経営管理などができるSaaSのヘルプです。 the-board.jp なお、仕組みとしては、GithubのプルリクエストとWebhookを使っているだけなので、何か特別なことをやっているわけではなく、ソースコードのレビューやデプロイと同じようなことをヘルプ記事にも適用したという感じです。 これまでのboardのヘルプ 現在357記事あり、通常のヘルプが226記事、FAQが131記事あります。 通常のヘルプは、機能・仕様や効率的な使
DOMPurify is a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG. It's also very simple to use and get started with. DOMPurify was started in February 2014 and, meanwhile, has reached version v3.1.6. DOMPurify is written in JavaScript and works in all modern browsers (Safari (10+), Opera (15+), Edge, Firefox and Chrome - as well as almost anything else using Blink, Gecko o
Roppongi.js #5 発表資料。redux-aggregate の 型合成テクニック https://roppongi-js.connpass.com/event/95936/
フロントエンドチームの @urahiroshi です。Mercari Advent Calendar 2018 12日目を担当します。 今年の8月から12月にかけて,メルカリ・メルペイのフロントエンドチーム有志で「超速!Webページ速度改善ガイド」の社内輪読会を行いました。 この本の中で,「推測するな,計測せよ」という言葉が紹介されていますが,今回の記事は,輪読会で学んだことのまとめとして,Chrome DevToolsを用いてメルカリWebのパフォーマンス計測と簡単な分析を行ったものです。 なお,現在メルカリWebのアーキテクチャを刷新するための開発が進んでいるため,ここで計測したパフォーマンスの値は大幅に変化していく可能性が高いです。アーキテクチャの刷新後に振り返って見られる楽しみが増えることも、この記事を書いた目的の一つです。 計測方法,環境 計測はGoogle Chrome 71.
Written by Cody Lindley Sponsored by Frontend Masters, advancing your skills with in-depth, modern front-end engineering courses Download: PDF | epub Overview: This is a guide that everyone can use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it in 2019. It is s
エンジニア不足と言われて久しいですが、できる経験者を採用するのはますます難しくなっていますね。 そんななか、弊社ではひょんな縁からエンジニア未経験の新人をエンジニアとして採用することになりました。未経験とはいえ、弱小企業の弊社には悠長に育てている余裕がないため、7日間で現場投入を目指してカリキュラムを組みました。 だいたいうまくいったので、メモがわりに晒しておきます。 前提条件 誰でも7日間でエンジニアになれると言っているわけではありません。あくまで一例として捉えていただければ幸いです。 担当してもらう予定の領域 HTML/CSS コーディング JavaScript はそこそこで(動きのエフェクトやカルーセルを仕込める程度) concrete5 テーマの開発(PHPファイルに foreach を入れていくイメージ、WordPress と変わらない) 流石にアプリケーション開発で7日間は無理
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く