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に保存す
CreateJS入門サイト - ICS MEDIA
このサイトはHTML5 Canvasのフレームワーク「CreateJS」の入門サイトです。初学者から学べるように基本的なCreateJSの使い方から解説しつつ、発展的な内容までまとめています。このサイトを通して、webでのインタラクションデザインについて学んでいきましょう。 導入編 webのリッチコンテンツを作るためのフレームワーク「CreateJS」。どのような場面で利用されるのか、どういった表現が可能なのかという点を中心に、概要と導入方法を説明します。 CreateJS とは CraeteJS の事例 簡単なサンプルを試そう ブラウザの開発ツールの使い方を抑えよう CDNのURL 次のコードをHTMLファイルに記述することでCreateJSが利用可能になります。 <script src="https://code.createjs.com/1.0.0/createjs.min.js">
SoundJSを使って音を見えるものへ―CreateJS勉強会 - ICS MEDIA
ウェブ技術でサウンドを扱える技術「Web Audio API」。表現系の技術として、JavaScriptを使うことで、音に連動したビジュアライゼーションを作成できます。本記事では、Web Audio APIを使ったサウンドビジュアライザーの作り方を解説します。 まずは以下の2つのデモをご覧ください。 2Dデモ 別タブで再生する ソースコードを確認する 1つ目は2D版のデモです。Web Audio APIでフーリエ変換を行い、divタグのスタイルでビジュアライゼーションを作成しています。CSSのFlexboxを利用して水平方向にdivを並べています。コードがシンプルなので、Web Audio APIの使い方を理解したい方は参考にしてみてください。 3Dデモ 別タブで再生する ソースコードを確認する もう1つは、3D版のデモです。サウンドの解析部分をWeb Audio APIで行い、ビジュアラ
PreloadJSで「悩ませないローディング」の作り方―CreateJS勉強会 - ICS MEDIA
先日行われたCreateJS勉強会 (第5回)にてPreloadJSで「悩ませないローディング」の作り方というテーマでライトニングトークさせていただきました。時間の関係でお伝えできなかった部分も含め本記事でまとめました。みなさまのローディング作りのご参考になれば幸いです。 PreloadJSとは？ PreloadJSとは、CreateJSのライブラリモジュールの1つで外部ファイル（画像・音声・JSONなど）の読み込み処理を担当しています。読み込み状況をイベントで監視して読み込み率（0.0〜1.0）を取得できます。その読み込み率を演出用のJavaScriptに渡してあげることで、読み込み状況に合わせた演出を実現できます。 ソースコード PreloadJSで外部ファイルを読み込むソースコードです。今回はLoadQueueクラスを使って拡張子の違うファイルをまとめて読み込んでいますが、同じ勉強会
HTML5 CanvasとWebGLの使い分け―CreateJS勉強会/池田発表資料 (前編) ― ICS LAB
2015年2月10日（火）、アドビシステムズ株式会社でCreateJS勉強会 (第5回)が開催され30名を超える方々が来場されました。勉強会のフォローアップとして、発表資料「CreateJSで制作するスペシャルコンテンツ」のスライドをブログ記事という形で公開します。本記事では口頭で発表した内容もできる限り記載しました。 なお、前編（CanvasとWebGLの比較）と後編(WebGLの最適化)の二部構成にしています。前編となる本記事ではスペシャルコンテンツ制作にあたり調査したHTML CanvasとWebGLの双方の利点・欠点をまとめています。 HTML CanvasとWebGL 今回のテーマは「HTML CanvasとWebGLの使い分け」です。皆さんもご存知の通り、HTML5のCanvas要素 (JavaScript ではCanvasRenderingContext2Dオブジェクト）は従
HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う 記事一覧 | gihyo.jp
運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
canvasを画像に変換する-HTML5編
HOME JavaScript入門[HTML5編] canvasを画像に変換する ここでは、canvasに描いた図形や文字を、画像に変換する方法を見ていきます。 画像に変換すれば、右クリックで保存したり、他の画像と入換えしたりすることができるようになります。 canvasデータを画像に変換する canvasで描画したデータを画像に変換するには、toDataURL()を使います。 canvas.toDataURL(画像形式) キャンバス内のデータをdata:形式に変換します。 画像形式はimgage/png，image/jpeg，image/svg+xmlの何れかを指定します。 省略した場合はPNG形式になります。 toDataURL()の前は、contextではなくcanvasである点注意して下さい。 画像変換サンプル 以下のサンプルでは、canvasにラインを９列、ランダムな色で描いてい
【HTML】初期開発コーディングテンプレートと CSS コーディング規約
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>タイトル | サイト名</title> <meta name="description" content="ディスクリプション" /> <meta property="og:type" content="website" /> <meta property="og:title" content="タイトル" /> <meta property="og:image" content="/img/icon.png" /> <meta property="og:url" content="http://example.net/" /> <me
clipboard.js - Flashなしでも使えるクリップボード操作ライブラリ MOONGIFT
Web画面上に表示されている文字列をコピーするのは意外と面倒ですが、クリップボードの操作ができないために色々な工夫が考えられてきました。Flashを使ったものが多かったのですが、HTML5になってFlashは使われなくなってきています。 そこで代替として使ってみたいのがclipboard.jsです。Flashなしでクリップボードの操作ができるJavaScriptライブラリです。 clipboard.jsの使い方 clipboard.jsのデモです。テキストボックスの文字列をコピーします。 アイコンのクリックでコピーされました。 こちらはカットのデモ。 文字が消えてちゃんとカットされました。 こちらは表示されていない文字列をコピーします。data-clipboard-textでコピーする文字を指定しています。 clipboard.jsのタネは新しく出てきたexecCommandというAPIに
HTML5 CanvasにJavaScriptでリアルタイムに動画を描画。透過レイヤで動画の重ね合わせなど、新たな表現が可能なPC／モバイル対応コーデック「H2MD」［PR］
Webの表現力は、文字の大きさや色を中心に修飾していた時代から美しいグラフィックやアニメーションの活用へと進み、いまでは大きな動画も積極的に取り入れた、豊かな表現力と情報量を備えるWebが数多く見られるようになりました。 最近では広告や解説動画といった例だけでなく、背景いっぱいに動画を使うといった例もあります。モバイルでもゲームやソーシャルメディアなどを中心に積極的に動画を用いた表現が増えています。 GIFやH.264に足りないもの こうした動画表現を実現する技術には複数の選択肢がありますが、モバイルとWebサイトの両方での対応を考えると、GIFアニメーションかH.264のいずれかを選択するのが一般的でしょう。しかしGIFアニメーションは色数が256色と限られ圧縮率も低いため、小さなサイズで数秒程度といった最小限の動画再生にしか向きませんし、音声との同期も困難です。一方、H.264は高精細
Timesheet.js - Beautiful time tables with HTML, JavaScript and CSS …
Timesheet.jsVisualize your data and events with sexy HTML5 and CSS3. Create simple time sheets with sneaky JavaScript. Style them with CSS and have mobile fun as well … Just include Timesheet.js and configure your data. No external dependencies, no jQuery needed and of course no Angular.JS! Just a few lines JavaScript to generate a beautiful HTML5 layout and some really delicious CSS to be customi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
