「改めまして、Progressive Web Appsと申します」── Web UXの新たな基準を考える
Progressive Web Appsというワードが世に出て約2年半が経ちました。2015年10月に開催されたChrome Dev SummitにてFlipkartの事例をもってお披露目となったそのコンセプトは、2018年現在までに徐々に成功事例を増やしながらWeb界隈の注目を集め、ついに先日（忘れもしない2018年3月30日！）iOS 11.3からiOSデバイスでも一部の機能が利用できるようになるまで成長しました。これは、まるで進学する我が子を見ているかのような、新年度にふさわしい晴れやかなニュースですし、いい機会なので PWAとは何かを改めて振り返ってみようと思います。 Webに足りなかったもの 私はWebが大好きです。リンクを1つクリックしたら（インストールなど煩わしい手続きなしで）すぐに新しいコンテンツを読めるのは最高の体験だなと常日頃感じています。ただし、今までのWebアプリの
フロントエンドチェックリスト（日本語訳） - Qiita
GitHubで公開されているフロントエンドチェックリストというドキュメントが、網羅されている内容が幅広く便利そうだったので、日本語に翻訳しました。 日本語版は、以下のGitHubリポジトリにあります。GitHub側と自動的に連携するようにしておりますので、誤訳や誤りなどがあれば GitHub のプルリクエストまたは Issue で報告していただけると幸いです。 https://github.com/miya0001/Front-End-Checklist 日本語版への貢献方法 最終更新日時: 2017-11-19 03:50:47+09:00 (未翻訳) Front-End Checklist The Front-End Checklist is an exhaustive list of all elements you need to have / to test before lau
iPhone X の Safari における Web コンテンツの表示 - ONO TAKEHIKO - Medium
iPhone X が発表されて間もなく、ディスプレイの「切り欠き」については至るところでちょっとしたイジリ合戦が始まっています。中には実際に信じてしまっている人もいるほど秀逸なものがありまして、それがこちら。 思わずクスッときてしまいますが（笑）、まあ当然こんなことにはなりません。 iPhone X にはディスプレイの上下左右に iOS の占有領域が存在し、それ以外（アプリのタッチイベントを認める領域）を Safe Area と呼ぶようです。Safe Area の外にある上部領域にはステータスバーとして時計やアンテナのインジケータなど iOS のシステムアイコン等が並び、下部の領域には iPhone X で導入された「ホームバー」が存在することになります。 では iPhone X の Safari で Web サイトを表示した場合に一体どのようになるのか？それを Web 上の情報を元にまと
Custom elementsはES6のclass記法で定義可能になりそうです - Qiita
class FlagIcon extends HTMLElement { constructor() { super(); this._countryCode = null; } static get observedAttributes() { return ["country"]; } attributeChangedCallback(name, oldValue, newValue) { // observedAttributes によって、 name はいつも "country" になる this._countryCode = newValue; this._updateRendering(); } get country() { return this._countryCode; } set country(v) { this.setAttribute("country", v)
HTMLのpattern属性とJavaScript正規表現のunicodeオプション - Hatena Developer Blog
こんにちは、Webアプリケーションエンジニアのid:nanto_viです。みなさんHTMLのフォーム検証機能は使っていますか? 近年は各Webブラウザの対応も進み、お手軽にフォームの利便性を高められるようになっています。 そんなフォーム検証機能のひとつがinput要素のpattern属性です。pattern属性の値にJavaScriptの正規表現パターンを指定することで、ユーザーの入力が意図しないものであった場合、フォーム送信ができなくなります。下図は5桁の数字の入力が求められるところに3桁しか入力せずフォーム送信しようとしたところです。ブラウザに組み込みのエラー表示が出現し、またそのメッセージにtitle属性の値が使われていることを確認できるでしょう。(pattern属性を指定する際には、title属性に書式の説明を記述することが推奨されています。) <input type="text"
HTTP2 を前提とした HTML+CSS コンポーネントのレンダリングパス最適化について | blog.jxck.io
Intro Chrome が予定している <link rel=stylesheet> の挙動の変更について、 Google Chrome チームの Jake が、興味深いブログを上げている。 The future of loading CSS この内容は、単に Chrome に対する変更だけではなく、 HTTP2 によって変化する最適化手法と、それを最も活かすための HTML, CSS の構成についてのヒントがある。 今回は、この内容を意訳+補足解説し、本サイトに適用していく。 HTTP/1.1 時代の CSS HTML 自体がコンポーネントを意識した作りになっている場合は、自然と CSS も class などを使いコンポーネント単位に作ることができるだろう。 しかし、 HTTP/1.1 では、リクエストの数を減らすために全ての CSS を 1 つ(もしくは少数個)に結合する最適化が主流だ
ブラウザ上でMarkdownを安全に展開する - 葉っぱ日記
不特定のユーザーが入力したMarkdownをブラウザ上でJavaScriptを使ってHTMLに変換するという場面においては、JavaScriptで変換してHTMLを生成するという処理の都合上どうしてもDOM-based XSSの発生を考えないわけにはいかない。かといって、MarkdownをパースしHTMLを生成するという処理すべてをXSSが存在しないように注意しながら自分で書くのも大変だし、markedやmarkdown-jsなどの既存の変換用のJSを持ってきてもそれらがXSSしないかを確認するのは結構大変だったりする。 そういった場合には、Markdownから生成されたHTMLをRickDOMを通すことで、万が一HTML内にJavaScriptが含まれていたとしてもそれらを除外し、許可された要素、許可された属性だけで構築された安全なHTMLに再構築することができる。さらに、そうやって生成
オンラインエディタのIME対応などのメモ - 素人がプログラミングを勉強していたブログ
世の中に存在するオンラインエディタうち、textareaを直接使っていないものの大半が、適切にIME処理を出来ていない。IME周りの処理は厄介なので、とりあえずどういう感じなのかを調べた結果をメモしておく。後で直したい。 オンラインエディタの仕組み オンラインエディタの主な目的はsyntax-highlightingとCSSによるカスタマイズである。textareaは、個々の文字の強調や色づけができない。 <div contenteditable="contenteditable"> まず始めに思いつくのがHTML5のcontenteditable属性で、これは任意の要素を編集可能にするもの。execCommandというコマンドがあって、これを使うと選択範囲の文字をボールドにしたりできて、リッチテキスト編集のためにあるものなので、一見便利そうである。しかし、キャレット（エディタ内の縦棒の点
[デブサミ関西2013] JavaScript Security beyond HTML5
[デブサミ関西2013] JavaScript Security beyond HTML5 Presentation Transcript JavaScript Security beyond HTML5 ネットエージェント株式会社 長谷川陽介 Developers Summit 2013 Kansai Action! #kansumiB5 NetAgent http://www.netagent.co.jp/Developers Summit 2013 Kansai Action! #kansumiB5 自己紹介 長谷川陽介 - はせがわようすけ ネットエージェント株式会社 株式会社セキュアスカイ・テクノロジー 技術顧問 セキュリティ・キャンプ Webセキュリティクラス講師 Microsoft MVP for Consumer Security Oct 2005 -
Bootstrap3超速レビュー！刷新されたグリッドシステムを理解しよう！
Bootstrap3超速レビュー！刷新されたグリッドシステムを理解しよう！ 白石 俊平（HTML5 Experts.jp編集長） 人気のCSSフレームワーク「Bootstrap」のバージョン3が正式にリリースされました。この記事では早速Bootstrap3をレビューし、特にグリッドシステムを掘り下げて解説してみます。 フラットデザイン採用、フルレスポンシブ！ Bootstrap2からの変更点のリストは、公式のリリース文を参照してください。特に大きな変更点は以下のとおりです。 フラットデザインの採用 現在流行のフラットデザインを採用しました。ただこれは「流行りに乗った」のではなく、テーマの一つとして提供されているという位置付けのようです。 例えば以下は、Bootstrap3のボタングループです。 レスポンシブWebデザインの全面採用 以前までのBootstrapは、レスポンシブWebデザイン
ブラウザにファイルをドロップしてはいけない - ぼくはまちちゃん！
こんにちはこんにちは！！ 先日、CROSS 2013っていう、エンジニア向けのビール飲み放題のイベントに行ってきました！ そこの「HTML5×セキュリティ」っていうコーナーで、ちょっと喋ってきたんですが、 その時の小ネタを紹介しておきます。 最近、ブログとかのWebサービスで写真をアップロードする時に、 ファイルをドラッグ＆ドロップするだけでできたりしますよね。 いちいちダイアログから選ばなくていいから便利です。 こんなやつ。 この手の仕掛けって、ドラッグ時にボーダーカラーを変えたりして 「いまドラッグ＆ドロップ状態ですよ〜」ってわかりやすく表示されますが、 それって別に、ブラウザが警告の意味で出してるんじゃなくて、 あくまで、Webサービス側が親切で表示してるだけなんですよね。 ってことは ・ドラッグされても特にボーダーラインなどを表示せず ・画面上のどこでもドロップを受け入れるようにし
WebRTCはブラウザ上でリアルタイムコミュニケーションをするためのフレームワーク。HTML5 Conference 2012
WebRTCはブラウザ上でリアルタイムコミュニケーションをするためのフレームワーク。HTML5 Conference 2012 HTML5のコミュニティ「html5.org」主催のイベント「HTML5 Conference 2012」が9月8日、慶應大学日吉キャンパスで開催されました。ボランティア主催のイベントでありながら、約1000人の来場者と4トラック20セッション以上という規模は、現在のHTML5への大きな注目度を示しているようです。 Publickeyでは、セッションの中からWebの最新動向に関連した「WebIntents」と「WebRTC」に関する記事を2本公開します。 WebIntentsとSocket APIでブラウザから家電が操作できる。HTML5 Conference 2012 WebRTCはブラウザ上でリアルタイムコミュニケーションをするためのフレームワーク。HTML5
コンテントセキュリティポリシー入門 - ずっと君のターン
Chromeの拡張機能はmanifest v2からCSP対応とかでいろいろと制限が厳しくなったわけですが、そもそもそのCSPがよく分からなかったので、HTML5Rocksの入門記事を訳してみました。 ところどころよく分からなくて適当に訳してたりするので、おやっ？と思ったら原文参照のこと。 http://www.html5rocks.com/en/tutorials/security/content-security-policy/ コンテントセキュリティポリシー入門 注: この記事はまだ完全に標準化を終えておらず不安定なAPIについて述べています。自身のプロジェクトで実験的なAPIを使う場合には注意が必要です。 ウェブのセキュリティモデルは同一生成元ポリシーにその根拠を持ちます。 https://mybank.com のコードは https://mybank.com のデータにだけアクセス
ローカルストレージに簡単な解決策はない
原文：“There is no simple solution for local storage” (on March 5, 2012 by Chris Heilmann) 要約：私たちは良いデータストアとして localStorage を推奨するのをやめなければならない。パフォーマンスがひどく損なわれるからだ。しかし残念なことに、代わりとなるものはまだ完全にサポートされておらず、また簡単に実装できるものでもない。 Web 開発において、うますぎる話に出くわすことは常々だ。そういったもののいくつかは良いもので、だからこそそれが「すべて」として目立ってしまい、開発者を使うように仕向けてしまう。しかし、多くの場合、良いと思われていたものはそこまで良いものではない。また、しばらく使ってみてはじめて「間違っていた」と気づかされるものなのだ。 そんなもののひとつに、localStorage がある
Kazuho@Cybozu Labs: String::Filter っていうモジュール書いた - 続: (Twitter の XSS 脆弱性に関連して) 構造化テキストの正しいエスケープ手法について
先のエントリ「(Twitter の XSS 脆弱性に関連して) 構造化テキストの正しいエスケープ手法について」の続き。 弾さんが「404 Blog Not Found:DHTML - 構造化テキストは構造化するのがやっぱ正しい」で示されているような DOM ベースの操作を行えば、原理的に XSS 脆弱性を防ぐことができます。ただ、クライアントサイド JavaScript によるレンダリングはウェブの構造を破壊するという点で筋が悪い（テーブルと FONT タグを利用したページレイアウトが批判されていた頃を覚えていらっしゃいますでしょうか。JavaScript によるレンダリングはウェブのリンク構造も破壊するので一層たちが悪いというのが自分の考え）ですし、サーバサイドでの DOM 操作は重たいので、できれば避けたいところです。 構造化テキストの HTML への変換は、よほど複雑な記法でない限り
[セキュリティ]javascript://のXSS 00:17 - 2008-07-30 - T.Teradaの日記
こんな場合、普通はjavascriptやdataスキームなどを使ってXSSさせるのでしょう。 <a href="ここにHTMLエンコードされて入る">link</a> しかし、このアプリは「javascript://...」のように、先頭からアルファベット数文字が続き、その直後に「://」が付いている値以外は、エラーではじいてしまいます。 この「:」のあとの「//」が曲者です。 dataスキーマを試してみましたが、「//」があるとどうやらダメらしいということで、javascriptスキームで頑張ってみます。 まずはこんな感じです。 <a href="javascript://hoge[0x0A]alert(111)">link</a> 「//」が行コメントの開始になるため、[0x0A]（LF）や[0x0D][0x0A]（CRLF）を入れてみて、その後に動かしたいJavaScriptコードを
![[セキュリティ]javascript://のXSS 00:17 - 2008-07-30 - T.Teradaの日記](https://cdn-ak-scissors.b.st-hatena.com/image/square/3ce21f422dafba32f7c257ef3ed09227bfdd2c5e/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F10257846132711010800%2F10257846132711092219%2F1548045373)
HTML 5のデフォルトオーディオ/ビデオコーディックは「undefined」に | OSDN Magazine
World Wide Web Consortium（W3C）で「HTML 5」仕様の策定を進めるIan Hickson氏（米Google所属）は、HTML 5で新たに導入されるオーディオとビデオの両要素について、特定仕様の利用義務付けをなしとする意向を発表した。 HTML 5の仕様開発を進める作業部会WHATWG（Web Hypertext Application Technology Working Group）のメーリングリストで、Hickson氏が明らかにした。 Hickson氏は6月29日と7月2日の電子メールで、HTML 5で新たに加わるについて、デフォルトのコーデックを特定しない結論に至ったと記した。理由は、ベンダー間の合意が得られなかったため。これまで、特許ロイヤリティ不要などの理由から、オープンソースの「Ogg Theora」「Ogg Vorbis」が検討されていたが、反対
グーグルがOn2買収、videoタグの膠着状態に終止符か － ＠IT
MozillaとOperaは、Webの世界が、誰もが自由に実装可能な標準規格によって成立することが重要との立場から、ライセンスフィーが発生するH.264をサポートせず、Ogg Theoraのみをサポートしている。Mozillaファウンデーションのアルン・ランガナサン（Arun Ranganathan）氏は最近、Betanewsのインタビューに答えて、今後もOgg TheoraをHTML 5の標準に含めるようロビー活動を続けると明言している。 一方、アップルはサブマリン特許が潜んでいる可能性があることと、iPodのような非力な端末上でのハードウェアデコーダ対応が欠かせないことなどから、SafariではOgg Theoraをサポートせず、H.264のみの対応としている（Ogg TheoraはH.264に比べて計算負荷が低いので、これはナンセンスだという反論もある）。アップルはOgg Theor
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ready to check - Nu Html Checker
Text -> HTML Entities Encoder