Lockr – localStorageを使いたくなる小さなJavaScriptライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTML5で提供される新しいAPIの一つにlocalStorageがあります。使ってみたいと思いつつも何となく面倒そうで避けてしまっている、なんて人もいるのではないでしょうか。利用するのに複雑な仕組みになっているとつい敬遠してしまうでしょう。 そこで紹介したいのがLockrです。ごく小さなlocalStorageラッパーで、高校のロッカーくらい簡単な仕組みだそうです。 使い方 Lockrは依存ライブラリもなく、JavaScriptファイルを読み込むだけで使えます。 <script src="/path/to/lockr.js" type="text/javascript"></script> これで準備完了です。 デモ APIはRedisを参考にしている層で、set/getでシンプ
CreateJSを使ってインタラクティブなHTML5デモを作ってみた - ICS MEDIA
CreateJS勉強会の参加応募数からも関心の高さがうかがえるCreateJSですが、弊社でも研究をしており今回は制作したデモをいくつか紹介します。 有名な絵画っぽいもの CreateJSとCSSを用いたデモです。カーソルをキャンバス上で動かすと絵が描け、ドラッグするとちょっと3Dっぽい動きをします。絵の描画はCreateJS、3Dっぽい動きはCSSで作っています。絵の描画は重ね塗りし続けると負荷が増大するので、毎フレームキャッシュし描画するコストを減らし最適化しています。 デモはこちらから Box2D Drop CreateJSと物理演算ライブラリ「Box2D」を組み合わせたデモです。マウスでアイコンをドラッグ＆ドロップすることで投げることができます。Box2DライブラリはActionScript版とほとんど同じAPIで用意されているので、ActionScriptのノウハウを活用できます
localStorage manager (lm.js)
localStorage manager (lm.js) is a simple wrapper around localStorage with which you can store, query and perform CRUD operations on collections and documents in an easy way. Initialize your app var todoapp = new lm('todoapp'); Create // create collection var list = todoapp.create('todos'); or create an initialized collection var todosList = [ { id: 1, name: 'shopping' }, { id: 2, name: 'washing' }
hanatoweb.jp - このウェブサイトは販売用です！ - hanatoweb リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
HTML5で組んでるならこの魔法のjsも入れておけっていう話
現在、A!@attripさん発で話題になっている「たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS」という記事。 Webデザイン界隈では当たり前のものですが、実はもうひとつ追加しておくといいかもしれないjsがあったりします。 Photo:html5 By michael pollak IE8以前のブラウザはどうにもこうにも開発者泣かせなわけですが、ie9.jsとcss3-mediaqueries.jsを突っ込むことで、モダンブラウザと同じ挙動にすることができちゃいます。 もう少し具体的に書くと、ie9.jsを組み込むことで、 position:fixed;に対応 max-width、max-heightに対応 属性セレクタ、擬似クラスに対応 margin:0 auto;でのセンタリングに対応 透過PNGに対応 opacityに対応 といったことが可能になります。要はCS
IndexedDB に画像とファイルを格納する
原文: Storing images and files in IndexedDB (on February 23, 2012 by Robert Nyman) 以前、私たちは localStrage に画像とファイルを保存 する方法について書きましたが、それは、今日でも利用できる実用的な方法でした。しかし、この方法には localStrage と密接に関わるパフォーマンスの問題 (このブログの後半で扱います) がいくつもあるため、IndexedDB を活用することが将来のアプローチ方法として望まれます。ここでは、IndexedDB に画像とファイルを格納し、ObjectURL を通して提供する方法をお教えします。 一般的なアプローチ はじめに、手順について話しましょう。IndexedDB データベースを作成し、ファイルをそのデータベースに保存し、そのデータをページに読み出して提供します:
IE対応済み！今すぐコピペして使えるHTML5テンプレート
HTML5が流行り始めて結構経ちました。 個人的にもHTML5でサイト制作したいなーと思っていたので まずはHTML5のテンプレートを用意しました。 最近のサイト制作ではjQueryを使うことが多いようなので jQueryも対応しています(ハイライト部分) <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <meta name="author" content=""> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <link re
HTML5クックブック
HTML5で開発をするために必要な実践的なコードを提供します。基本的な構文からプログレッシブなマークアップ、フォーム、各種メディア、マイクロデータ、位置情報、canvasなど幅広い内容をカバー。 また、どのブラウザが仕様のどの部分をサポートしているのかを調べるためのヒントやブラウザによるサポートにばらつきがある場合の対応策と、それらが必要かどうかを見きわめる方法についても解説。これによって、読者はそれらの機能が開発中の案件に必要かどうかを判断できるようになるでしょう。実践的な解決策を求めるエンジニアのためのレシピ集です。 本書に寄せて はじめに 1章 基本的な構文とセマンティクス はじめに レシピ1.1 DOCTYPEを指定する レシピ1.2 文字セットを指定する レシピ1.3 言語を指定する レシピ1.4 <script>と<link>を最適化する レシピ1.5 HTML5の新しい要素を
webdesignmatome.com - このウェブサイトは販売用です！ - webdesignmatome リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
jQueryでフォームの値を取得する方法をまとめておくので、コピペでご利用ください。 | Ginpen.com
必要ならどうぞ。 デモ jQueryでフォームの値を取得する方法をまとめ – jsdo.it – Share JavaScript, HTML5 and CSS jQueryでフォームの値を取得する方法をまとめ – jsdo.it – share JavaScript, HTML5 and CSS 共通：要素の探し方 input要素なんかにid振っちゃうのが一番なんだけど、属性セレクターを使うと楽な場合があります。つまり[name=xxx]で検索するやり方。 <form id="my-form"> <input type="text" name="my-text" value="This is text." /> </form>
HTML5の味見しちゃうよ（1）- ＠IT
HTML5の味見しちゃうよ（1） Web RTC、Face.jsとJSARToolkitのお味は？ シーエー・モバイル 市川 未吏 2012/5/11 Web RTC、Face.jsとJSARToolkitを試した。JavaScriptを使って、Webカメラで顔認識とARをしよう HTML5とか勉強会の分科会発足！ 日々めまぐるしい進化を遂げているWebの世界。その世界に身を置き、興味を惹かれるものは多々あれど、なかなか実践するのは難しいものです。私ももちろん、例外ではありません。 Web先端技術味見部は、気になるあの技術をどこよりも早く取り上げる勉強会です。10人前後の少人数の参加者全員で、気になるフレームワークやAPIなどを味見していきます。 先日開催された、その第0回、第1回の様子を以下にお伝えします。 その名もWeb最先端技術味見部 最初に取り上げたのは「Web RTC」。Web
<meter> polyfill (jQuery プラグイン) - JavaScript ライブラリー - HTML5.JP
使い方 JavaScript/CSS <script src="jquery.min.js"></script> <script src="jquery.html5jpMeterPolyfill.js"></script> <script> $(document).ready(function() { $('meter').html5jpMeterPolyfill(); }); </script> <style> meter { display: inline-block; width: 5em; height: 1em; vertical-align: -0.2em; } </style> HTML <meter value="20" min="0" low="30" high="70" max="100" optimum="100"></meter> <meter value="50"
レスポンシブWebデザインのウェブサイトを半年運営してみて思ったこと
昨年2011年10月に仕事で運営に携わっている大学ウェブサイトでレスポンシブWebデザイン (しかもフル可変グリッドレイアウト) を導入して、はや半年。約6ヶ月間、レスポンシブWebデザイン（RWD）で制作したウェブサイトを運営してみて思ったことをまとめてみました。これからレスポンシブWebデザインを導入したいと考えている方の参考になれば幸いです。 プロジェクトの概要 大学のウェブサイトをリニューアルするにあたり、さまざまな状況や制限などを考慮、また、今後3〜5年を見据えて、レスポンシブWebデザインを取り入れた制作を行いました。大学公式ブログでもリニューアルについて紹介しているので、ぜひそちらもご覧ください。そこで書いたように、以下のような思いもあり、このリニューアルを行いました： 今回、新しい試みを行った背景には、このウェブサイトが「大学のウェブサイト」であることが大きな要因の一つとし
このブログのコーディングガイドライン[旧] : Web Design KOJIKA17
このブログのコーディングガイドライン[旧] 2012-04-30 今まで5回ほどブログのデザインを変更し、その度にHTMLのソースなどに、簡単な解説を入れてきました。 最近、Google Style Guideが流行ってる(?)ので、それっぽくゆるく書いてみます。 この記事について このコーディングガイドラインは、旧デザイン・ソースについてのものです。 現在のコーディングルールとは異なります。 旧デザインを参照したい方は、こちらをご覧下さい。 インデント インデントはしません。 URL URLが_(アンダースコア)の場合、リンクなどで下線が入るとアンダーバーが認識しにくくなるので、-(ハイフン)を使用しています。 HTMLについて DOCTYPE HTML5で記述。 IE9以下でも、ある程度スタイルを保てるように「html5.shiv」をCDNで挿入。 <!--[if lt IE 9]>
![このブログのコーディングガイドライン[旧] : Web Design KOJIKA17](https://cdn-ak-scissors.b.st-hatena.com/image/square/abaa13c8e836b378977eb131ef5a4f6d726842c6/height=288;version=1;width=512/https%3A%2F%2Fkojika17.com%2Fog.png)
How To Enable HTML5 In Chrome | Robots.net
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
HTML5 Boilerplate, Initializrをこれから使う人が押さえるべき5つの原則 | ゆっくりと…
boilerplate とは、「再利用を意図した標準的な文例集」 だそうです。 Paul Irish が中心となり構築されてきた HTML5 Boilerplate は、その名の通り HTML5 でサイトを構築するためのテンプレート、さらにはフレームワークをも含む内容となっており、その特徴は次のように語られています。 HTML5 Boilerplate は、HTML5 を扱う上で必要な数多くの機能強化を他のベスト・プラクティスの数々と組み合わせることで、最小限の先行投資でプロジェクトの磐石な基盤を提供します。 2011年02月08日 HTML5 Boilerplate を使用して Web 開発を容易に始める | IBM developerWorks より。 HTML5 Boilerplateをベースにすることで最初からベストプラクティスが適用されたサイトやページを構築できるという特徴がある
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
html5shiv - Project Hosting on Google Code
IBM Developer
GitHub - pamelafox/lscache: A localStorage-based memcache-inspired client-side caching library.
