分12こんにちは,太田です。Chrome拡張に使えるHTML5関連技術の3回目をお送りします。Notificationsを紹介します。StorageはHTML5関連の中でもIE8でサポートされているなど,実装が進んでいるAPIの一つです。Notificationsはウェブページや拡張からユーザーに積極的な通知を出すことができるAPIです。MacではGrowlというアプリケーションが有名ですが,Growlに相当する機能をブラウザベースで実現しています。Storageはブラウザ上で動作するキーバリューストアです。JavaScriptからデータを保存,参照できるシンプルなAPIですが,HTML5からみても,Chrome拡張からみても最も重要なAPIと言えます。いうのも,長い間ブラウザだけでのデータの永続化にはCookieを使用するしかありませんでした。behaviorを使った方法などのテクニックはありましたが,どれも環境に依存するところがあり一長一短でした。4では上限5MBなのでそこまで大きいわけではないのですが,Cookieの4KBに比べると大容量といえます)と,非常に優秀なAPIです。5からサポートする予定です。localStorageのインターフェースを見ていきます。いっても,localStorageは扱いやすいデザインになっており,JavaScriptの通常のオブジェクトを扱う感覚で操作できます。参照してしまって問題ありません。これらのメソッドは例えばlengthをキーにしたいといった場合に必要となるので覚えておいて損はないでしょう。下記のようにstorageイベントで値の変化を監視することもできます。'サンプル';localStorageはChrome拡張において,拡張用の設定を保存する際によく使用されます。そのほか,キャッシュして置きたいデータを保存しておくといったことにも使えます。Pageなどにおいて,localStorageにすでに設定用のキーを持っていればその値を復元,設定を持っていない(最初にインストールしたときなど)場合は初期値をlocalStorageに保存します。このとき,上記ではJSONを介してデータを保存,参照しています。dataと修正されており,文字列以外も保存できる仕様になっていますが,Chromeをはじめ多くのブラウザは文字列で実装されています⁠)⁠。JSONは配列,オブジェクト,文字列,数値,真偽値,null値しか表現できない点には注意が必要です。undefined,NaNなどはJavaScript固有の値なので,そのままでは情報が失われてしまいますし,循環参照しているオブジェクトなどを渡すとエラーになります。JSON.stringifyでの出力結果は必ず確認するようにしましょう。localStorageはCookieと異なり,保存期限を指定するようなAPIは用意されていません。そこで,期限を設定できるようlocalStorageをラップしてみます。};})();こちらは以下のように扱えます。これで,7日間データをキャッシュすることができます。Notifications著者プロフィール太田昌吾(おおたしょうご,ハンドルネーム:os0x)1983年生まれ。JavaScriptをメインに,HTML/CSSにFlashなどのクライアントサイドを得意とするウェブエンジニア。Expertとして活動を開始。2019」を開催しました。DAY1・DAY2の様子を注目セッションとともにお伝えします。LINEのエンジニア3名がイベントに先駆けて見どころを紹介します。コードの安全性・安定性を高める開発サイクル~テスト管理の効率を上げ,脆弱性診断を自動で行う~本連載では,連載「業務を改善する情報共有の仕掛け」を受けつつ,安全性・安定性を加えた開発サイクルについて考えていきます。若者世代から圧倒的な人気を誇るライブ配信&動画投稿コミュニティアプリ「MixChannel」(ミクチャ)の裏側(レコメンドシステムやサーバサイド開発など)について解説していきます。その他の連載CSS3アニメーションでつくるインターフェイス表現CSS3によるアニメーション表現を紹介していきます。その中でも,幅広い読者に応用してもらえるだろうインターフェイスを主なお題とします。MySQL道普請便り本連載では,MySQLを使ったアプリ開発・運用に関するノウハウをご紹介していきます。RecipeUbuntuの強力なデスクトップ機能を活用するための,いろいろなレシピをお届けします。JavaScriptセキュリティの基礎知識JavaScriptに関するセキュリティ上の問題はどこで発生し,どうすれば防ぐことができるのか?について解説していきます。〜システムをきちんと運用するための基礎知識システムは「作って終わり」ではなく,運用の中でさまざまな問題が発生します。問題の発生に備えて事前にどのような対応をしておくべきなのか,問題発生時に何をしなければならないのか,ポイントを解説していきます。きたみりゅうじの聞かせて珍プレーソフトウェア開発の現場で体験したトホホな失敗,思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。Linuxのメンテナンスの傍ら,Linuxやオープンソースソフトと日々を過ごす著者が,その魅力とつきあい方を,エッセイ風味でお届けします。PRESS特別編集部員,さわやか笑顔のスーパーハカーはまちちゃんとネット大好き14歳わかばちゃんが,毎号,読者の皆さんから寄せられたおたよりを紹介します。皆さんの日頃の悩みにも答えちゃいますよ。]メールでのお知らせメールで次の案内をお送りしております。メールの配信を希望する方は,利用したい項目をチェックしてメールアドレスを入力し,[登録]ボタンをクリックしてください。UPDATES[ほぼ週間に1回]新刊メールマガジン[ほぼ週間に1回]電脳会議の各号案内[ほぼ1ヵ月半に1回]※変更する場合や停止する場合は,登録情報変更ページをご覧ください。※登録いただいたメールアドレスには,そのお知らせ以外,配信いたしません。Ltd.ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。