HTML5のLocal Storageを使ってはいけない（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Randall Degges - Please Stop Using Local Storage 原文公開日: 2018/01/26 著者: Randall Degges 日本語タイトルは内容に即したものにしました。 画像は元記事からの引用です。 初版公開: 2019/10/19 追記更新: 2024/04/05 -- リンク情報を記事末尾に移動しました 本気で申し上げます。local storageを使わないでください。 local storageにセッション情報を保存する開発者がこれほど多い理由について、私にはさっぱり見当がつきません。しかしどんな理由であれ、その手法は地上から消えてなくなってもらう必要がありますが、明らかに手に負えなくなりつつあります。 私は毎日のように、重要なユーザー情報をlocal storageに保存す
Web標準化という仕事、そしてWebの今後について、W3Cの中の人に聞いてきた
Web標準化という仕事、そしてWebの今後について、W3Cの中の人に聞いてきた 白石 俊平（HTML5 Experts.jp編集長） Webの現状をどう見る？ 白石: 今日は取材お受けいただきありがとうございます。簡単に自己紹介からお願いします。 芦村: W3C/Keioで働いている芦村です。Webの標準化を仕事にしていまして、アクセシビリティやコンピューターを使いやすくすることに興味を持って取り組んでいます。 白石: W3Cの方に直接お話を伺う機会なんてそうはないので楽しみにしてきました。芦村さんから見て、今のWebの現状はいかがですか？ 芦村: HTML5のムーブメントを経て、アプリケーションやシステム構築のための共通プラットフォームになってきました。 WebDINO Japan（元Mozilla Japan）の浅井智也さんが作った「Web曼荼羅」という図ですが、凄まじい数の仕様が、様
サーバの負荷に応じて加速するマリオBGMプレイヤー(html5<audio>) - Qiita
こんにちは、エイチーム引越し侍の中川です。 「仕事をしながら、常に直感的にサーバの負荷状況を把握していたい」 今回はそんな要望を実現してみました。 概要 [1]サーバのロードアベレージを返すAPIと、 [2]HTML5のAudioタグで、 サーバの負荷に応じて再生速度を変えながら音楽が再生されるようにしました。 まずはこちらをご覧ください↓ https://youtu.be/u14rl3wgVSs 背景(こじつけ) 日頃、直感的にサーバの負荷状況を知りたい 職場の非エンジニアも知りたい 視覚は気が散るのでそれ以外の何か 味覚、嗅覚→負荷上がると臭くなる→実現難しい、触覚→負荷上がると椅子にビリビリ...→いや難しい 「音」なら、PCのファンやエアコンの稼働音のように、鳴っていても日頃慣れて忘れることができる 音楽再生側 html5とjsで実装しました。 ちなみに、これはどこかのサーバに置か
【主要タグ一覧＆解説】5分でわかるHTML・CSS入門 - paiza times
こんにちは、吉岡(@yoshiokatsuneo)です。 あらゆる情報が集まるインターネットですが、パソコンや携帯電話のWebブラウザで表示される情報は、全てHTML・CSSで書かれています。逆に言えば、HTML・CSSを使えば、好きなデザインのWebページが作り放題ということです。 HTML・CSSは多くのブログサイトでも使うことができますので、記事にHTML・CSSを少し追加すれば、より表現豊かにわかりやすい記事が書けるようになります。 さらにJavaScript・PHP・Ruby on Rails・Javaなどを学べば、本格的なWebサービスを作ることもできますし、スマートフォンなどで動くモバイルアプリケーションでも、HTML・CSSを使っていることが多いです。 ここでは、HTML・CSSの基本を5分でわかるように簡単にまとめてみます。 【目次】 HTML・CSSファイルの作り方 エ
Performance improvements in Chrome's rendering pipeline
$200K 1 10th birthday 4 abusive ads 1 abusive notifications 2 accessibility 3 ad blockers 1 ad blocking 2 advanced capabilities 1 android 2 anti abuse 1 anti-deception 1 background periodic sync 1 badging 1 benchmarks 1 beta 83 better ads standards 1 billing 1 birthday 4 blink 2 browser 2 browser interoperability 1 bundles 1 capabilities 6 capable web 1 cds 1 cds18 2 cds2018 1 chrome 35 chrome 81
User timing API | Articles | web.dev
User timing API Stay organized with collections Save and categorize content based on your preferences. High performance web applications are crucial to a great user experience. As web applications become more and more complex, understanding performance impact is vital to creating a compelling experience. Over the past few years, a number of different APIs have appeared in the browser to help analy
HTML5 Genetic Algorithm Biped Walkers
Genetic Algorithm Walkers "It's like watching other people QWOP" Controls Gene mutation probability Gene mutation amount Champions to copy Motor noise Round length Animation quality Simulation speed Lower the animation quality and simulation speed to save some CPU. Zero frames per second and high simulation speed will give you the fastest results, but processor usage will go up as well. About What
Unity for Creative 第2回!! 「Unity x WebGLの開発現場最前線」 メモ - Qiita
Unity for Creative 第2回!! 「Unity x WebGLの開発現場最前線」 メモWebGLUnity Unity x WebGLの開発現場最前線に参加したのでメモを共有します。 メモなので誤字脱字があります。あらかじめご了承ください。 開発側から見るUnity x WebGLの開発現場最前線 窪田豊氏 株式会社NilOne WebGLの今 ・そもそもWebGLとは？ HTML5のCanvas要素にOpenGLを利用して、グラフィックを描画するためのブラウザ仕様 PCのハードウェアを使用してレンダリングすることができるため、高速かつ豊かな表現が可能 2011年にWebGL1.0登場 ・WebGLとOpenGLの関係 WebGLはOpenGL ESをベースにブラウザ向けに調整されてできた使用 WebGL2.0のブラウザサポートはまだ実験段階 WebGL2.0ではグラフィッ
2016/11/1付けで正式勧告となったHTML5.1新仕様について、知っておくべきことと知ってたら楽しいこと、そして知らなくてもいい（であろう）こと - Qiita
2016/11/1付けで正式勧告となったHTML5.1新仕様について、知っておくべきことと知ってたら楽しいこと、そして知らなくてもいい（であろう）ことHTMLHTML5マークアップフロントエンド 追記[20161109] * todogzmさんによる脱字のご指摘の反映 * narutoさんによる translatable の誤訳のご指摘の修正 追記[20161110] * iwaim@githubさんによる旧仕様へのコメントを反映 追記[20161111] * momdoさん、falsandtruさんによる誤訳のご指摘の修正 追記[20161124] * takahashimさんによる脱字のご指摘の反映 公式はこちら。 以下に解説する「知っておくべき」「知ってたら楽しい」「知らなくてもいい」の分類は私個人の見解であることをご容赦願いたい。また、解釈の誤りやその他ご意見などはコメント欄にてご
SEO対策に役立つかもしれない、普段あまり注目されていないタグたちまとめ(HTML 5.1版) - Qiita
SEOの内部対策をするにはキチンとしたHTMLタグを使うことから！！！ ということでSEOには役立ちそうだけど、普段のHTMLコーディングではあまり意識しないHTMLのタグをまとめてみました。 正直それぞれのタグでどのくらいの効果があるのかはわからないですが、この手のコーディングは最初にやらないと、後から直すっていうことはないので、できれば最初にちゃんとやっておきたいですね。 主に以下のサイトを参考にしてます。 HTMLクイックリファレンス HTML 5.1 W3C Proposed Recommendation, 15 September 2016 base 相対パスリンクを指定したときのルートとなるパスをデフォルトで指定することができます。 headタグ内にいれます。 <html> <head> <base href="http://qiita.com" target="_blank"
『HTML5 CONFERENCE 2016参加レポート』
こんにちは。サイバーエージェント17卒内定者で現在アメーバブログでアルバイトをさせていただいている柳耕太です。 少し日は空いてしまいましたが先日行われたHTML5 CONFERENCE 2016のレポートを書かせて頂きました。 基調講演 基調講演前半 基調講演は前後半に別れており、前半は慶應義塾大学環境情報学部教授でW3Cサイトマネージャーでもある中村 修教授が登壇しました。 中村教授はWEBというものが世の中に現存する媒体（雑誌、カタログ、ニュース)を表現するものにとどまるのではなく、新しいデバイスやデータの扱い方等をハンドリングしてユーザーに提供しなければならない。といった今後進化する技術にWEBが対応すべきであるという話、そして最近よく聞かれる IoT, ビックデータ, 人工知能等 という技術はWEBという基盤の上に成り立っているものであり、地球を取り巻く大規模なOSと化しているWE
HTML5 conference 2016 スライド他まとめ - Qiita
Overview http://events.html5j.org/conference/2016/9/ のとおり、HTML5 Conference 2016が、2016年9月3日 東京電機大学にて開催されました。 そこで利用されたスライドなどのまとめです。 HTML5 Conference 2017版は、こちら 基調講演 https://www.youtube.com/embed/0L0zsaOUKMs (Liveですが録画されているので見れます) http://togetter.com/li/1020730 Reactの最新動向とベストプラクティス by 株式会社TOLOT 小林 徹 氏 https://speakerdeck.com/koba04/reactfalsezui-xin-dong-xiang-tobesutopurakuteisu Service Worker Deep
HTML5 Conference に行ってきたメモ #html5j - console.lealog();
2015年に引き続いて2016年も。 北千住もーちょっと近くならんかな・・ｗ なんだかんだずっとホールにいました。 基調講演 W3C/Keio 中村さん 画像とか動画でおなじみHDR HDRをWebから使えたら・・・？ こういう視点がこれから必要なのでは BigData, AI, IoTなどIT業界のBuzzWord でもこれは、Internet・Webの上に成り立ってるもの WebはDistributed OSだ！（地球上の） なので我々がふだん作ってるのは、OS上の資源 W3Cの活動範囲の広さそこにつながるもの TV（Hybridcast）、車、電子書籍 車のインパネもWebに！（なるかも e-PubとW3Cの統合 縦書きCSS Blockchain https://en.bitcoin.it/wiki/Block_chain のような分散システム IG (Interest Group
js13kGames：コードゴルフ型ゲーム開発大会
この記事は “js13kGames: Code golf for game devs” の抄訳です。 13KB。KB なんて最近では雀の涙ほどのデータ量ですが、ゲームの歴史を遡れば先駆者たちはとんでもない制約の中でゲームを作ってきたということに気づくはずです。 一例を挙げると、皆に愛されたアタリ 2600 の RAM は、ほんの 128 バイトしかなく、カセットをさしても 4 KB 増えるだけでした。ことわざにもある通り、制約は創造の母です。そんなゲームのコンペティション、js13kGames の季節がやってきました。これは zip 圧縮して 13,312 バイト以内であることを条件に、ゲームの創造性を競う大会です。 HTML5 ゲーム開発者向けの大会 js13kGames は HTML5 でゲームを作る開発者のための大会で、2012 年より毎年開催されています。作成するゲームのファイルサ
WebRTCを試すときにオッサンが映り続ける問題に対処する - Qiita
はじめに WebRTCを使ったアプリを作る際に、切っても切れないのがカメラ映像の取得です。ノート型のPCで作業したりすると、延々と自分の顔を見続けなければなりません。そこで、自分の顔の替わりに好きな動画をメディアストリームとして流すサンプルを作って見ました。 仕組み 動画ファイルの変換 ユーザにローカルの動画ファイルを指定してもらう（ファイル選択 or ドラッグ＆ドロップ） FileオブジェクトからURLを生成 (window.URL.createObjectURLを利用） それをVideoタグで再生 継続的にCanvasタグに転写 (window.requestAnimationFrameを利用） CanvasタグからMediaStreamを取り出す (Canvas.captureStreamを利用） 音声ファイルの変換 ユーザにローカルの音声ファイルを指定してもらう（ファイル選択 or
HTML5 CanvasとiPadで実現する3Dホログラム - ICS MEDIA
みなさんは「3Dホログラム」をご存知でしょうか？ 空間に映像を投影するというもので、スター・ウォーズなどSFのイメージがあるかもしれませんが、近年ではTIFFANYのプロモーションやマイケル・ジャクソンのライブなどでも使用されている技術です。 近未来感のある技術ですが、スマートフォンとCDケースで簡易的なものが自作できると2015年夏に話題になりました。これはCDケースの透明なプラスチック板を使って投影機を作成し、スマートフォンの画面の上に設置し、専用の動画を再生して投影するものです。 週末に子供と遊ぶネタにちょうどいいなと私も作ってみようと思ったので、投影する映像をHTML5 Canvasで実現してみました。 投影機の作成 投影機は、台形型（上辺1：下辺6：高さ3.5の比率）の透明な板を4枚組み合わせて作成します。今回はiPadのサイズに合わせて、「2.5cm × 14.8cm × 8.
2016/05/11時点でWebAssembly関連の情報を整理してみた - Qiita
フロントエンドとしては絶対に避けて通れないWASM、そろそろエッジ環境なら試せるツールが揃ってきたということで、手を出してみた。 自分がどうしてもローレベルに弱いので、たぶん色々間違ってるんだけど、識者各位は指摘お願いします。 現在の仕様はここ https://github.com/WebAssembly/spec Chrome Canary と Firefox Beta で動作可能 WASMのゴール asm.jsに比べてサイズが小さく高速にデコード可能なバイナリフォーマット 将来的な目標として、DOMアクセスとそのGCインテグレーション これが達成されれば、ブラウザにおいて JS がファーストプライオリティな言語という状態ではなくなる とはいえ既存の資産が多いのでなくなることはないだろうが wasmのスペック自体は小さいのでおそらくブレようがないが、DOMの実装とGCは各ベンダごとに別々
マイクロソフト、ネイティブUIをハイブリッドアプリケーションに組み込める「Project Ace」を公開
マイクロソフト、ネイティブUIをハイブリッドアプリケーションに組み込める「Project Ace」を公開 HTML5/JavaScriptなどのWeb標準技術でアプリケーションを開発し、それをラップしてネイティブアプリケーションのように単独で実行可能にしたものが、いわゆる「ハイブリッドアプリケーション」と呼ばれるものです。CordovaやPhoneGapなどを用いて開発することができます。 ハイブリッドアプリケーションはHTML5やCSS、JavaScriptなどで開発するため、iOSやAndroidなどのマルチプラットフォーム展開が容易な一方、ルック＆フィールなどがiOSやAndroidのネイティブUIと異なることも多くあります。 マイクロソフトは、このハイブリッドアプリにネイティブUIのコントロールを統合できるCordovaのプラグイン「Project Ace」をオープンソースで公開し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Building A First-Class App That Leverages Your Website: A Case Study — Smashing Magazine
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
