Cookieより扱いが簡単な「Web Storage」の使い方 [ホームページ作成] All About
従来、ウェブページ側からブラウザに対して何らかのデータを保存させるには、Cookie（クッキー）を使うしかありませんでした。 しかし、クッキーを利用してデータを保存・読み出しするのは、少々面倒なスクリプトを書く必要がありました。必要なソースの長さを見て、「なんだかクッキーを扱うのは難しそうだ」と断念した方々もいらっしゃることでしょう。 「Web Storage」（ウェブストレージ）機能なら、クッキーよりも格段に簡単な方法で、任意のデータを楽に保存したり、読み出したりできます。 保存や読み出しに必要なスクリプトは、どちらも僅か1行で記述できます。とても簡潔で分かりやすいので、スクリプトを記述するのが苦手な方々でも簡単に扱えます。 ※ウェブストレージ機能は、元々は「HTML5」の仕様に含まれていましたが、「HTML4.01」など、HTML5以外で記述されたページ内でも利用可能です。 ウェブスト
![Cookieより扱いが簡単な「Web Storage」の使い方 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
ブラウザでストレージ？ Web Storageを使いこなそう
連載目次 ■Web Storageの概要と活用例 旧来（＝HTML 4.1以前）のWebブラウザでは、eコマース・サイトのカート情報やログイン状態の管理情報などのデータをブラウザに保存する仕組みとして、大半のWebサイトではクッキーを利用していた。しかし、クッキーでは、保存容量が4KBytesまでであることや、すべてのリクエストに対してサーバにデータを自動で送信するため、容量制限やセキュリティ対策に悩まされることも多くあった。 HTML5では、クッキーに代わるデータ保存の仕組みとして、「Web Storage」と呼ばれる機能を利用できる。Web Storageは、ブラウザ側でKey-Value型でデータを保存する機能のことで、現在のインターネットを取り囲む環境に対応した「クッキーの後継技術」ともいえる。 Web Storageとクッキーの機能の差異は、以下の表のとおりだ。
jQuery Mobile の NestedList で JSON データを動的にリスト表示 - なんとなくな Developer のメモ
以前、jQTouch 等で作成したもの（iUI版 id:fits:20100715, jQTouch版 id:fits:20100731, SenchaTouch版 id:fits:20101005）と同様のサンプルを jQuery Mobile で作成してみました。（サーバー側の処理も同じものを使用） jQuery Mobile 1.0 a1 ただし、今回のサンプル（静的HTML版も含む）のようにリストアイテムにアンダースコア "_" を含む名称が使われる場合（例 information_schema）、Firefox では正常に動作しますが、Safari では「Error Loading Page」が表示され次の画面に遷移できなかったので注意。（Android エミュレータでも同じ現象が発生） 原因は調査してませんが、jQuery Mobile が自動生成する ID に問題ありかも。（
新しくなったGoogle Maps API V3をjQueryと一緒に利用する | MT Systems
WordPress を勉強しようと購入した WordPress カスタマイズブック のサンプルを見ていたら、Google Map API のバージョンが３に上がっているのに気が付いた。 バージョン3 から API キーが必要なくなったので、これから使ってみようかと思っている人には、使い方の敷居が一段と低くなったと思う。ここで紹介するのは、jQuery と Google Maps API V3 を利用して、指定した地名の場所を表示するサンプルですが、あなたのローカル PC 上で jQuery ライブラリをダウンロードすることなく、地図を表示する JavaScript のプログラムを作る事ができるのでお楽しみに。 先ずは実際のサンプルは以下の通り。 入力ボックスに地名を入れて、ポイント表示ボタンを押してみて下さい。指定した地名があれば、そこを表示の中心になるように地図が移動します(地図が表示さ
CSSを追加してjQuery Mobileのデザインをカスタマイズ！ | Lab by engineering@dwango.jp
こんにちは初めまして、石崎と申します。 今回は jQuery Mobile シリーズ3回目！ということで、jQuery Mobile デザイン編です！ jQuery Mobile には 標準のテーマ（色見本）が5つ用意されています。この標準のテーマを使用してアプリを作ることも可能です。しかし、アプリやサイトにはそれぞれのデザインやブランドイメージがあり、標準のテーマとは違うイメージのものを作りたい場合があります。 そんな時のために、今回は CSS などをカスタマイズして独自のデザインをいれていくノウハウについて説明します。 対象読者 CSS3, HTML5 の知識がある方 jQuery Mobile の仕組み 今回は jQuery Mobile のバージョン 1.0 RC2 を扱います。 先ほど述べたように、jQuery Mobile には標準のテーマが5つ用意されています。data-th
実例で学ぶjQuery MobileのCSSカスタマイズ (1/3)
jQuery Mobileを利用するとスマートフォンサイトを手軽に制作できますが、基本テンプレートをベースに制作すると「いかにもjQuery Mobileらしい」デザインになってしまい、他のサイトと似通ってしまいます。 そこで今回はjQuery Mobileのテンプレートをフルカスタマイズし、オリジナルデザインのスマートフォンサイトを作成する方法を解説します。サンプルとして、次のようなカタログサイトを制作します。 トップページには新着商品のサムネイル画像が3つ並び、その下にはアコーディオンパネルでニュースを掲載しています。新着商品のサムネイル画像を選択すると詳細ページに遷移し、詳細ページで画像をタップすると画像を拡大して表示します。 HTMLの作成 デザインカンプを元にHTMLを作成します。head要素内は次のように記述します。 ■サンプル1[HTML] <!DOCTYPE html> <
jQuery Mobileのマークアップの基本とCSSの変更 (1/6)
jQuery Mobileによるスマートフォンサイトの制作方法を解説する本連載。前回に引き続き、簡単な会社案内サイトを作りながら、jQuery Mobileの基本的な使い方を学びましょう。 aboutページの作成とCSS3によるデザインの変更 今回はトップページ以下の詳細ページを順に作成していきます。まずは「to-Rについて」のページ（#about）から取り掛かりましょう。前回作成したindex.htmlに次のようなHTMLを追加します。「data-role="content"」の中にh2要素とp要素を加えただけの簡単なHTMLです。 ■サンプル1[HTML] <div data-role="page" id="about" data-theme="b"> <div data-role="header"> <h1>to-R</h1> </div> <div data-role="conte
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネット(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込みです。
【スマホ用ページ】低解像度、高解像度端末のどちらでもくっきり綺麗に表示しつつ、幅ぴったりにする HTML テンプレート。
こんにちは、ウェブ開発の林です。 スマートフォン向けウェブページを作る際、横幅ぴったりにしたいと思いませんか。 meta viewport というタグを使えば表示サイズを調整することができます。 ただそれを使ったとしても、Android / iPhone は端末により横幅が違うため個別に最適化するのは面倒です。 スマホ端末ごとにコードを分けることなく常に幅ぴったりにする HTML テンプレートを作りました。 こちらを参考に組んでみてはいかがでしょうか。 HTML テンプレートコード（ヒント付き） こちらの HTML コードを丸っとコピペして修正していくと楽だと思います。 追記： ライセンスフリーです。自由に使ってください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <!--
スマホアプリの作り方【超まとめ】Web編：HTML5やjQuery MobileなどスマホWebアプリ開発に役立つ記事52選 - ＠IT
Web編：HTML5やjQuery Mobileなど スマホWebアプリ開発に役立つ記事52選 ＠IT編集部 2012/1/31（2013/2/28 改訂） iOS（iPhone／iPad／iPod touch）、Android、Windows Phoneなど、さまざまなスマートフォンのプラットフォームのアプリを作るための＠IT記事のまとめです。今後、順次更新・追加していきます。 開発者が登録したApp StoreやMarketplaceなどからダウンロードしてインストールするアプリ、もしくは、あらかじめインストールされているアプリは、「ネイティブアプリ」と呼ばれています。iOSやAndroid、Windows PhoneといったOS上で動き、マイクやカメラなどデバイスの機能を十分に使えるのが特徴です。作り方は、基本編やデザイン／グラフィック編で紹介した記事が参考になると思います。 一方で
ビューティホーなHTML5＆CSS3テンプレート５０:phpspot開発日誌
50 Beautiful Yet Free HTML5 And CSS3 Templates | Free and Useful Online Resources for Designers and Developers ビューティホーなHTML5＆CSS3テンプレート５０ HTML5、CSS3のテクニックを学べる上に無料で使えるということでなかなか有用なまとめになってます。 学習がてら自分でも無料で公開しちゃうなんてのもよい学習メソッドかもしれませんね 関連エントリ HTML5ゲームに使えるローディング表示機能付きプレロード用JSライブラリ「PxLoader」 HTML5のcanvasを使ったアニメーションするタグクラウド実装スクリプト「TagCanvas」 Flash使ってなくてもHTML5でここまでクールにできるというプロフェッショナルサイト集
Youtubeの動画を背景に
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
[CSS]あらゆる背景上で美しく機能する半透明なエレメントを実装するスタイルシート
まるでガラスで作られた棚のように、美しい半透明な3Dのエレメントを実装するCSS3のテクニックを紹介します。 デモページ：Firefoxのキャプチャ 実装 HTML HTMLはシンプルで、各アイコンはa要素、ガラス棚はdiv要素で実装されています。 <div id="shelf"> <!-- Add icons here --> <a class="icon" href="#"></a> <a class="icon2" href="#"></a> <a class="icon3" href="#"></a> <!-- Surfaces of the shelf --> <div class="front"></div> <div class="back"></div> <div class="top"></div> <div class="bottom"></div> </div> CS
CSSのセレクタ部分(IDやCLASS)にハイフンとか使われるの好きじゃないなー。ボクはあまり好きじゃないなー - latest log
「CSS の ID 名や CLASS 名の単語の連結にハイフンを使うべき、キャメルケースとかアンダーバーとかダメ」的な主張を去年ぐらいにどこかで読んだ記憶があるのですが(うろおぼえ)、 /* たしか… これがオススメのスタイルで */ .hoge-huga-piyo {...} /* これとか… */ .hoge_huga_piyo {...} /* これはイケてない(らしい) */ .hogeHugaPiyo {...} 個人的には「ちょっとそれ CSS に寄り過ぎてて、視野せまくないかー」という考えをもっていたので、つらつらと書いてみます。 E:first-child や E[key|="value"] などのハイフンを前提とした構文に関してはもちろんありですよ。ここで取り上げてるのは、属性セレクタや擬似クラスセレクタについてではなく、IDセレクタ と CLASSセレクタ についてです
Youtubeの動画を背景に
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
