「プログラミングTIPS/HTML5/ローカルストレージを使ったデータ保存/読込み」は管理者からの閲覧のみ許可しています。 ログイン ログイン
ローカルで動くウェブアプリケーションを作ってみたいと思い立って、HTML5関連について調べてます。今はローカルストレージ中心。 ◆たくさんありすぎのローカルストレージ ちょっと調べたところ「cookie」「SessionStorage」「LocalStorage」「Web SQL Database」「Indexed Database」の5種類がありました。多すぎっ! ただし、「Web SQL Database」はドロップされる模様。 このあたりを参考に。 http://groups.google.co.jp/group/... http://www.publickey1.jp/blog/09/websql.html SQL互換地獄に陥らなくてよかった… また「SessionStorage」「LocalStorage」は大きく「Web Storage」という括りで理解すべきみたい。そして「C
プログラマにとって欠かせないコミュニティになったgithubで話題になっているpull requestがありました。話題になっているのは正しい仕事の為の正しいツールという触れ込みのJavaScriptフレームワーク集「EveryJS」のリポジトリでそこに送られて来たプルリクエストの差分の量が驚きの426行追加、24623行削除。不必要にJavaScriptを使って表示を行っている部分をhtmlに変える事で動作の速度を向上させる狙いのようです。 またこのEveryJS.comの日本語の情報が無かったので掲載されているライブラリの全32個のリストも紹介しておきます。このリストもなかなか有用そうですしEveryJS.comをブックマークしてみようと思います。 Backbone.js イベントとKVSを結ぶ構造を提供 Benchmark.js 高解像度タイマ対応のベンチマーク Cappuccino
スマートフォンを含む最近のブラウザでは、戻るボタンで前のページに戻った際に、JavaScriptも含めて前回の最後の状態を復元します(Back Forward Cacheと呼ばれます)。これはとても便利なのですが、ページを作成する立場からすれば、余計なお世話であることもあります。 Back Forward Cacheの無効化はとても簡単に実現できます。ページの中にonunloadを書くだけです。 <!DOCTYPE html> <html><head><title>onunload test</title> <script> window.onunload = function() {}; window.onload = function() { var count = 0; var loop = function() { document.getElementById("num").in
「JavaとJavaScriptの20年戦争」 http://wise9.jp/archives/2245 なんというか全体に「これはひどい」ネタ記事なんだが*1,なんでコレが絶賛されてるか分からん.*2 そもそもJavaとJavaScriptを比較する時点でねえ... さて、Javaだが、JavaはC++の流れを汲む言語だ。 C++の源流は言うまでもなくCにあり、Cの源流はPascalやFORTRANといった手続き型言語にある。 Javaが本格的に登場したのは1996年。 うーん,こういう書き方している時点で,プログラミングのことを全く知らないんじゃないかと思うくらいに酷い. さらっと流しているが,「JavaをC++の流れを汲む言語」と捉える人はそんなに多くないのでは. 「C系の表記+オブジェクト指向」というならJavaと近い部分もあるが,それだけならObjective-Cだってあったわ
Closure CompilerというGoogle製のJavaScriptの最適化ツールが有ります。 このツールを使うと余分な空白や改行を削除したり、変数名を短いものに変更したりするなど様々な最適化を行ってくれます。 また、その様な最適化の他にJavaScriptファイルの連結も一緒に行ってくれます。 色々なライブラリを使うとJavaScriptのファイルが複数になったりする場合も多いかと思います。しかし、複数のファイルをDLするとなると単一ファイルをDLするより速度が落ちてしまいます。 その様な時にClosure Compilerでコンパイルを行うとその様な部分についても最適化出来ます。 使い方は至って簡単で、こちらの「Download the application」のリンクからClosure CompilerをDL。 ※Javaがインストールされてない場合は別途インストールの必要有り
配列リテラルとカンマの組み合わせについての「なんでこんな動作するんだーっ」という話。読んでみると確かになんだか不思議に感じる挙動でした。 Javascriptが難しくてわからないので誰か教えてください — Aduca http://www.aduca.org/article/wtfjs/ 回答付いてるからなぁ?とコメント欄を見てみた所、こちらのサイトにて回答を書いたとの事が書かれていたので早速見てました。 微妙な配列リテラル: Seaoak's READ http://seaoak.cocolog-nifty.com/read/2011/05/post-df49.html この解説を観ると一見、不思議なこの挙動も直ぐに納得出来ました。 因みに今回の例を実際にFireBug上で実行するこの様な結果になり、より理解し易いです。 [] を文字列にすると要素が無いので ""、 [,] は [und
わかった わかった 気になる わかった 気になる JS開発手法 わかった 気になる JS開発手法 \テッテレー/ アジェンダァ •「アップロード」?アホか! •Makefileを書かないJSerは悪い奴だ •GCCって知ってるか •テストコードを書かないと死ぬ奴向け 1. アップロードとか 最初に言ったのは どこのどいつだ 1. アップロードとか 最初に言ったのは どこのどいつだ まず諸君らは JSを書く だろう 書かない人は 対象外なので ニコニコチャンネルで アニメをどうぞ そしたらそれを試しに動かしたい まずこういうソフトを起動する奴は いますぐ腹を切って死ね file:///.... みたいなURLを開く奴は いますぐ首を裂いて死ね せめて置換Proxyを使え! http://coderepos.org/share/wiki/CocProxy •ファイル名マッチでローカルと置換 •ち
2010-06-03 カテゴリ: Client Side タグ: JavaScript Tips アルゴリズム 前回の記事で予告したとおり、今回はJavaScriptのMath.random()で生成できる乱数の精度の話。 前回の記事で、JavaScriptでは2^53未満の正整数を扱うことができるということがわかったから、今回の記事では2^53未満のランダムな正整数を生成してみる。 具体的には↓のようなコード。 var ub = Math.pow(2, 53), list = []; for (var i = 0; i < 16; i++) { list[i] = Math.floor(Math.random() * ub).toString(2); while (list[i].length < 53) { list[i] = "0" + list[i]; } // padding }
以下はプロトタイプ的継承だけで一通りの機能を実現できる、という一つの例です。もちろん他にも書き方はありますし、newを使うのがよくないと主張しているわけではないです。 (誤解を生みそうな文体が混じっているようなので追記: 2011/5/14) 春ですし、少し初心者向けの記事を書きます。タイトル通り、JavaScriptのオブジェクト指向について。ちょっと長くなるので目次です。 クラス(に相当するオブジェクト)を作る オブジェクトからオブジェクトを作る(インスタンス化) 単一継承 多重継承 privateは諦めましょう 親のメソッドを呼ぶ コンストラクタ instanceofに対応する ダックタイピングのススメ JavaScript標準のオブジェクト指向といえばnewやらprototypeやらを書く必要がありますが、これらは書くのが面倒臭い上に気をつけないといけない点がたくさんあります。Ja
You know Python. You should know Javascript. The two aren’t so different, but this talk will explain exactly how they are different — lists, dicts, objects, functions, loops and all the other details of Javascript described in terms of Python.
「iPadが薄くて軽くなったら買うね」と言っておきながらiPad2を傍観しているminamiです。 今回は便利なjQueryのプラグインの紹介です。 Ajaxでも「進む」「戻る」ボタンを使いたい Ajaxを利用して、ページ遷移することなくコンテンツを展開するWebページも増えてきていると思いますが、URLが遷移しないので、ブラウザの「進む」「戻る」ボタンを使ってさかのぼることができないのがネックです。 そこで最近よく見かける手法が、URL中の"#"以下の文字列を元にページの情報を表示する方法です。TwitterのPCページなどでも取り入れられています。ちなみにこの方法の是非についてもいろいろと議論があるようですが(主に検索エンジン対策)、そこは割愛します・・・ jQuery hashchange eventを使う jQuery hashchange eventは、jQueryのプラグインと
以前はJava EEの普通のWebアプリケーションで、JavaScriptはあくまでも利便性のために補助的に使うものという認識がありましたが、さすがに最近では普通の業務系のSI案件でもテーブル表示や入力補助などで高度なAjaxライブラリーの使用が当たり前のように求められるようになりつつあります。サーバーサイドのJavaScript技術といったものもありますが、そういった新しい技術を使わないまでも、ごく普通にある程度大きなJavaScriptの作成が必要になってきているということです。 もちろん、JavaとJavaScriptはその名前にかかわらず、本来全く別の言語です。しかし、意図的に似た構文でロジックが書ける*1ため、兄弟の言語として認識している人も意外に多いのではないかと思います。しかし、使用できるライブラリーに違いがあるという点が一見してわかる最も大きな違いですが、基本的な言語の文法
プログラミングのこつ 無駄な名前を極力使わないこと。意味単位に名前空間を細かく階層的に分離すること。 ここで言う名前空間とは 名前空間とは、一つの名前が一意のものを表す空間。例えば、大きな目で見れば、日本語は自然言語の名前空間である。また、専門用語なども名前空間と考えることが出来る。 日本語 { コンニチワ = 挨拶 : : } 中国語 { ニーハオ = 挨拶 } 英語 { ハロー = 挨拶 } また、名前空間は重なり(優先順位)を持つ 同音異義語などの言葉は、それぞれの細かい名前空間の重なりによって一意のものに特定されると考えられる たとえば、「コイが好き」と言った場合 池に関する名前空間 { コイ = すいすいパクパク } チャライ話題に関する名前空間 { コイ = ドキドキきゅんきゅん } お茶に関する名前空間 { コイ = にがーい } 名前空間の優先順位を考えると、一意の意味を知
Firefoxのデバッグ拡張ことFirebugですが、Firefox4よりFirebugとは別にWeb Consoleという機能が入りました。 しかし、Firebug自体もさらに便利になっているので、少し紹介します。(Firebug1.7 –1.8 の範囲で) 現在のFirefox4に正式対応しているのはFirebug1.7xで、Firebug1.8xはAlpha版として公開されているのでまだ不安定な部分もあることに注意して下さい。 特に注意書きしてない部分はFirebug1.7の項目だと思って大丈夫だと思います コマンドラインに履歴ボタン コンソールパネルでのコマンドエディタ(でかい方のコマンドライン)にHistoryボタンが新たに追加されました。 過去に実行したコマンドをポップアップから選択して挿入することができます。(以前はCtrl+ZでUndoし続ける必要があった) コマンドライン
先日、日本Rubyの会会長の高橋征義さんと雑談しているとき、以下の指摘に妙に納得しました。 「私の中ではハッカー言語という分類があって、PerlやLisp、JavaScriptはハッカー向けの言語だと思うんですよね」。 その心は、これらの言語は多数のプログラミングのパラダイムをサポートしていて、自分が何がしたくて、どれを使えばよいか分かっている人には柔軟で良いのだけれども、初心者が使う言語としては自由度が高すぎて難しいのではないか、ということです。 JavaScriptは最初のハードルこそ低いけど…… JavaScriptはどこでも動きますし、すぐに「Hello World」が表示できます。文字の色もすぐに変えられます。ほかのどの言語よりも最初のハードルが低く、入門に向きそうです。そういう意味で、初心者にオススメといわれることもあります。しかし、そこからちょっと先に進もうと思っても、「これ
JavaScriptでよく使われるコード片に即時関数というものがあります。無名関数を宣言して即実行することで、ブロックスコープの存在しないJavaScriptにおいて擬似的にブロックスコープを再現します。 var a = "global"; (function(){ var a = "local"; alert(a); //local })(); alert(a); //global 一番有名なのはこの(function(){ ... })()の形式なのですが、なぜfunctionの外側にカッコが必要なのか不思議に思ったことはないでしょうか? ためしにfunction(){ ... }()と書いてみると、Syntax Errorが発生します。 なぜfunction(){ ... }()はSyntax Errorなのか JavaScriptにはfunction文とfunction式があって、
Chrome版のFirebugことGoogle Chrome Developer Toolsですが、以前gihyoで解説したときよりさらに便利になっているので、少し紹介します(元はWebKitなので、そのうち(近いうちに)Safariでもそれなりに使えるようになるはずです)。 圧縮されたコードの整形 まず、目立つところからいきましょう。ちょうど先日更新されたChromeのdev版(12.0.742.0)に搭載されたばかりの機能で、minifyされているJavaScriptコードを読みやすいように整形して表示してくれるというものです(IE9の開発者ツールにも実装されている機能です)。 例えば、Google Analyticsのコードは圧縮されていて普通は読めません。 しかし、Chromeのデベロッパーツールなら、 このように整形してくれます。 やり方は簡単で、デベロッパーツールのScript
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く