このスライドは令和元年5 月18日に東京で開催された Inside Frontend #3で発表した資料に簡単な説明を追加したものです。 フィーチャーフォンからデスクトップまですべてのデバイスで動くマインスイーパークローン(proxx.app)を作った経緯と開発の過程を発表しました。 な…
Web標準でつくるガラケーサイト
このスライドは令和元年5 月18日に東京で開催された Inside Frontend #3で発表した資料に簡単な説明を追加したものです。 フィーチャーフォンからデスクトップまですべてのデバイスで動くマインスイーパークローン(proxx.app)を作った経緯と開発の過程を発表しました。 な…
Cookie の SameSite=Lax をデフォルトにする提案仕様 - ASnoKaze blog
20191226 追記 SameSite属性のついたCookie自体を拒否する古いクライアントにご注意ください https://sites.google.com/a/chromium.org/dev/updates/same-site/incompatible-clients 20190823 追記 suidenOTI さまよりご指摘いただきました 不具合があったためChrome80でのリリースに延期になったようです。 https://www.chromestatus.com/feature/5088147346030592 https://www.chromestatus.com/feature/5633521622188032 20190523 追記 Firefoxでも同様の動きがあります https://groups.google.com/forum/#!msg/mozilla.de
W3Cで現在公開されているHTMLとDOM仕様は将来廃止されます - 水底の血
まえがき W3C（とWHATWG）からの公式なアナウンスはまだ確認していませんが、何度目かに結成されるW3C HTML WorkingのDraft Charterと、このCharterから辿れるDRAFT Memorandum of Understanding Between W3C and WHATWG（Memorandumは日本語で覚書などと訳されるので、ここでも覚書と呼びます）がブログエントリーのタイトルのソースになります。もっとも、今確認できる覚書もドラフトですから、変更があるかもしれません。しかしながらURLで観測できるわけですから、大筋でW3CとWHATWGとの間で合意が取れているのではないかと推測します。あとは、覚書だけでなくCharterもドラフトということになっていますが、以下の文章では面倒なので省略します。最後にお約束ですが、このブログエントリーは「だいたいあってる」感
Web Audio API
This version: https://www.w3.org/TR/2021/REC-webaudio-20210617/ Latest published version: https://www.w3.org/TR/webaudio/ Editor's Draft: https://webaudio.github.io/web-audio-api/ Previous Versions: https://www.w3.org/TR/2021/PR-webaudio-20210506/ https://www.w3.org/TR/2021/CR-webaudio-20210114/ https://www.w3.org/TR/2020/CR-webaudio-20200611/ https://www.w3.org/TR/2018/CR-webaudio-20180918/ https
ゲームWeb公開時は素材のファイル名に注意【ツクールMV】 | くいなゲームズ -KUINA GAMES-
RPGアツマールには「バグレポート」という機能があり、ゲームに不具合があった時にプレイヤーさんから不具合の内容を送っていただく事が可能です。 自分が『人身売買デスゲーム』を公開してから大量に送られてきたバグレポートがありまして、それは「Failed to loadエラーが出てゲームが進行不能になる」という内容だったのですが、エラーの原因が分からず試行錯誤した末にやっと解決したっぽいので共有します。 Failed to loadエラーで画像がロードできない バグレポートで報告された内容は、「Failed to load : img/pictures/cutIn_adv_taichi.png」というメッセージが出てゲームが進行不能になるというエラーです。 ちなみにこれは「cutIn_adv_taichi.png」という名前の画像が読み込めないよ！というメッセージで、普通は対象の画像がアップロー
Debugging Service Workers
プログレッシブ ウェブアプリ: オフライン コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 1. ようこそ このラボでは、既存のウェブ アプリケーションをオフラインで使用できるようにします。これは、プログレッシブ ウェブアプリ ワークショップの一連のコンパニオン Codelab の最初です。このシリーズにはさらに 7 つの Codelab があります。 学習内容 Service Worker を手動で作成する 既存のウェブ アプリケーションに Service Worker を追加する Service Worker と Cache Storage API を使用してリソースをオフラインで使用できるようにする 必要な予備知識 簡易 HTML と JavaScript 必要なもの Service Worker をサポートするブラウザ 2. 準備 まず、この Co
dev.toと阿部寛のホームページについてちゃんと計測させてくれ - Qiita
Twitter見てたら、以下のツイートを見た。 数時間後、dev.toと阿部寛のホームページどっちが速いですか？というブログがTLに現れた。 GoogleのPageSpeed Insightsで測って阿部寛のホームページの方が早かったという結論付けてよいのかという疑問が浮かび、webpagetest.orgで計測することにした。 設定 阿部寛のホームページに関しては、Tokyoリージョンにあるものとする。 そして、dev.toはNY発らしいので、サーバーの設定をNYにして測定する。 The platform was created in 2016. The twitter account, @ThePraticalWeb 評価結果 Webpagetest - 阿部寛のホームページ Webpagetest - dev.to 阿部寛のホームページ サーバーからのレスポンスの圧縮がされておらず、
マイクロソフト、Google、W3C、Mozillaらが協力。それぞれのWebブラウザのドキュメントをMozillaサイトに一本化。あちこちのWebサイトを見て回らなくても済むように
マイクロソフト、Google、W3C、Mozillaらが協力。それぞれのWebブラウザのドキュメントをMozillaサイトに一本化。あちこちのWebサイトを見て回らなくても済むように Mozillaは、マイクロソフト、Google、W3C、サムスンなどと協力して、それぞれのブラウザなどに対応した技術解説のドキュメントを一本化し、Mozilla Developer Networkの「MDN web docs」にまとめて掲載する取り組みを開始したと発表しました。 Webブラウザに関するHTMLやCSS、APIなどの機能の解説は、そのWebブラウザを開発するベンダのWebサイト、例えばマイクロソフトならMSDN（Microsoft Develpers Network）、GoogleならChromeのWebサイト、MozillaならMDN（Mozilla Developer Network）のWe
HTML文書は文字エンコーディングUTF-8でなければなりません - 水底の血
さよならレガシーエンコーディング。 文字エンコーディング宣言が存在するかどうかにかかわらず、文書のエンコードに使用される実際の文字エンコーディングはUTF-8でなければならない。 4.2.5.5 文書の文字エンコーディングを指定する - HTML Standard 日本語訳 Require utf-8 when specifying character encoding by sideshowbarker · Pull Request #3091 · whatwg/htmlにより、HTMLで使用できるエンコーディングはUTF-8のみとなりました。これにより、古いHTMLでは許容されていた、Shift_JIS、ISO-2022-JP、EUC-JP、UTF16LEといった文字エンコーディングは適合するHTMLではなくなりました。すでにNu Html CheckerでUTF-8以外の文字エンコー
グーペのPHPバージョンを5.2から7.1にアップグレードしました - Pepabo Tech Portal
こんにちは、グーペグループエンジニア @hypermkt と技術部インフラグループ・シニアエンジニア @hfm です。半年に及ぶグーペのPHPアップグレード作業が2017年5月中旬に全て完了し、PHPバージョンは5.2から7.1になりました。今回の記事ではアップグレードの過程と効果について、ご紹介させていただきます。 はじめに 8年目のホームページ作成サービス「グーペ」 なぜ8年目のタイミングでアップグレードをしたのか アップグレード基本方針 PHP5.2との後方互換性を維持する deprecatedの対応は優先度低め 事前準備 新旧両バージョンで継続的テスト より広範囲をカバーできるE2Eテストを重視 リアルタイムエラー検知 下位互換性のない変更点の修正 php7ccによる互換性の自動検知 MySQL関数の削除 preg_replaceへの置き換え PHP7.1用php.iniの作成 リ
pixivを常時HTTPS化するまでの道のり（後編） - pixiv inside
ピクシブ株式会社で開発基盤チームとして働いている @catatsuy です。 前編ではpixivを常時HTTPS化する前にやった前準備として、広告、画像といったリソースをHTTPSに切り替える際の手順を紹介しました。 pixivを常時HTTPS化するまでの道のり（前編） - pixiv inside 後編では実際にpixivのアプリケーション自体を常時HTTPS化していく手順を紹介します。 従来のHTTPS配信 pixivはPHPアプリケーションを実行するアプリケーションサーバー(Apache/mod_php)の前段にnginxを配置する構成になっています。以前からセキュリティ的に重要なページはHTTPSで提供しており、nginxでHTTPS終端処理を行っていました。HTTPSで応答する場合はアプリケーションサーバーにX-HTTPSヘッダーを付けてプロクシーしています。 具体的には以下のよ
SVGアニメーションの現状 | POSTD
SVG（Scalabe Vector Graphics）の世界は魅力的です。そして、これを使ってできることや、これに用意されているオプションには圧倒されてしまうほどです。 SVGはXMLベースの2次元ベクター画像形式で、インタラクティビティとアニメーションをサポートします。言い換えると、SVGは図形やグラフをレンダリングするXMLタグで、その図形やグラフはHTMLの構成要素がそうであるように、インタラクトしたりアニメーション化したりできるのです。 SVGに関して、私がよく受ける質問の1つは、SVG画像のアニメーション化についてです。そのやり方だけではなく、それが何なのかということも聞かれます。ですから、現在の（そして未来の）SVGアニメーションの状況を見ながら、あなたが苦痛を感じずに行えるようなヒントやツールについてお話ししましょう。 同期マルチメディア統合言語、またの名をSMIL（Syn
よこ並びのCSS。
スマホサイトが優勢な昨今、要素をよこ並びにする機会は減ってきているのかもしれないけれど、大きい画面で見るサイトでは、ナビゲーションやタブや、商品一覧など、よこ並びにレイアウトする機会はまだまだあるんじゃないでしょうか。そんな「よこ並びにするためのCSS」も、やり方はさまざま。お馴染みのやつから、新参者まで、順番に見ていくことにします:)。 よこ並び？ そう、よこ並び。 例えばボタンを横一列に並べたり。商品の情報なんかだと、横に3つずつ並べて改行して、多段に並べる場合もありますね。偏（ひとえ）に「よこ並び」と言えど、CSSにはそのやり方がたくさんあるんです:o。 導入 この記事で紹介するよこ並びの方法は以下の通り。 CSSの歴史的な背景から、最初はfloatプロパティを使った方法を紹介します。 float（フロート） 要素を左右へ寄せるためのプロパティ。 後続する文章（テキスト）などのインラ
【CSS3】float使わずに最速でブロック要素を横均等に配置する方法「display:flex」 | degitekunote2
float:leftでの横並びから卒業！ 横並びの左右均等っていうと下記画像がそうですよね。これを実際に作って見ようと思います。 今までだったらこれを作るにはfloat:leftでもってli要素を回りこませて横並びにして、marginやらpaddingやらで装飾するのが一般的ですが、floatを使わないやり方もいくつか存在します。 その中でもflexボックスを使うとまぁ簡単に今回やりたいことが出来ちゃうわけですよ。 まずはHTMLを作っていきます 上の画像を元にulとliでもって形作っていきます。 <ul id="wrap"> <li class="box1 a"><p>ABCDEFG</p></li> <li class="box1 b"><p>HIJKLMN</p></li> <li class="box1 c"><p>OPQRSTU</p></li> </ul> <ul id="wr
PornhubはWebSocketを使ってAdBlockを回避している
BugReplay あるWeb開発者が、開発のためにchromeで通信内容をキャプチャしたいと考えchrome.webRequestを使ったが、WebSocket経由の通信は得られないことを発見した。さっそくこれをバグ報告した。 その後、インターネット上でわいせつ動画を頒布する大手Webサイトとして有名なPornhubの運営会社であるMindGeek社の社員がこのバグを修正しないようコメントした。 不思議に思って調べてみると、PornhubはWebSocketを使って広告データをやり取りすることで、AdBlock系のブラウザー拡張による広告除去を回避していることが判明した。 なお、この記事を公開して程なくして、AdBlock PlusとuBlock OriginはPornhubに対するWebSocket経由の広告除去も実装した。 技術的に可能であることを示すことと、実際に労力を割いてまで実
Referrer を制御する - Qiita
Web ブラウザーは通常 HTTP 要求の Referer: ヘッダーに参照元ページの URL を入れますが (あるいは document.referrer で参照元ページの URL を取得できますが)、 Web サイト側でこれを制御したいことがあります。 例えば、次のような場面が想定されます。 URL にユーザー名や秘密の ID などを含めざるを得ない時は、プライバシーやセキュリティーの観点から、この URL を外部に漏らしたくありません。 社内システムに URL を貼りたいことがありますが、社内システムの URL を外部に漏らしたくありません。 Web アプリケーションの開発用サーバーは、その所在を外部に漏らしたくありません。 投稿者と友達のみに公開される SNS の投稿にリンクが含まれる時、その個別 URL を漏らしたくありません。 (SNS 全体の URL が漏れることは問題ありま
CSS Fonts Module Level 3 (W3C Working Draft 23 August 2012)
W3C Recommendation 20 September 2018 This version: https://www.w3.org/TR/2018/REC-css-fonts-3-20180920/ Latest version: https://www.w3.org/TR/css-fonts-3/ Latest editor's draft: https://drafts.csswg.org/css-fonts/ Previous versions: https://www.w3.org/TR/2018/PR-css-fonts-3-20180814/ https://www.w3.org/TR/2018/CR-css-fonts-3-20180626/ https://www.w3.org/TR/2018/CR-css-fonts-3-20180315/ https://www
W3C、「Web Storage (Second Edition)」を勧告。オフラインでも使えるブラウザのキーバリューストレージ機能
W3C、「Web Storage (Second Edition)」を勧告。オフラインでも使えるブラウザのキーバリューストレージ機能 Web StorageはWebブラウザがキーバリューストレージ（KVS）の機能を実現する際の標準仕様。オフラインでも利用でき、モバイルなど通信回線が不安定な環境でもWebアプリケーションの動作を支援する機能として利用できます。 Web Storage仕様で定義されている機能には主に2種類あります。1つは「sessionStorage」、もう1つは「localStorage」です。 sessionStorageは、ブラウジングコンテキストごと、つまりあるURLでタブを開き、そのタブでさまざまなWebページを閲覧し、閉じられるまでのあいだだけ有効になります。 localStorageはオリジン（おおむねWebサイト）ごとにキーバリューストレージを提供する機能。オ
メディアの種類と形式のガイド: 画像、音声、動画コンテンツ - ウェブメディア技術 | MDN
ほぼ最初の頃から、ウェブは何らかの形で視覚メディアのプレゼンテーションに対応してきました。当初、これらの機能は制限されていましたが、さまざまなブラウザーがウェブ上の静止画や動画の画像を含むことに関する問題に対して独自の解決策を見つけたため、有機的に拡張されました。現代のウェブは、メディアのプレゼンテーションや操作をサポートする強力な機能を備えており、さまざまな種類のコンテンツに対応するいくつかのメディア関連 API を備えています。一般的に、ブラウザーが対応するメディア形式は、ブラウザーの作成者に委ねられており、ウェブ開発者の作業を複雑にしています。 このガイドでは、ウェブ上で使用されるメディアを構成する可能性のあるメディアファイルの種類、コーデック、アルゴリズムの概要を説明します。また、これらの様々な組み合わせに対するブラウザーの対応情報や、ファイル形式の優先順位の提案、特定の種類のコン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
sdn-project.net