今日は、なぜか JavaScript でユーザー認証を実装する方法をご紹介します。いや、都合で必要になったもので、ついでに記事にしただけです（＾＾ヾ。もちろん JavaScript ではクラックしようと思えばいくらでもできてしまうのですが、「あまりやられたくない」程度のことを防御する手段としては便利なのではないでしょうか。 認証は、入力したパスワードを Cookie に保存しておき、ページ内に暗号化して埋め込んだパスワードと比較することで行います。JavaScript で Cookie を扱ったりパスワードを暗号化したりする方法は、他にも応用できると思います。 Cookie の設定 ではまず、Cookie の設定方法からご紹介します。JavaScript で Cookie を設定するには、document.cookie に Cookie の文字列を代入します。書式は HTTP リクエストヘ

JavaScript で作って意味があるのかどうか分かりませんが、作ってみました。 応用編 入力したテキストをページ上に書き出し、個々の文字をドラッグ＆ドロップ で動かせるようにする ソースを読んでも中身が分からない HTML を作成する パスワードチェックの部屋 (パスワードは「開けごま」ですが、HTML のソースや JavaScript を解析しても、絶対にパスワードが分からない仕組みになっています。) バー ライブラリ編 こんなの JavaScript で作るかよってな代物です。 できてしまったものはしょうがないでしょう。 utf.js (UTF-8 <-> UTF16 変換) base64.js (Base64 encode/decode) md5.js (MD5) des.js (DES 暗号化/復号化) zlib.js (JavaScript による zlib 実装、zlib

だいぶ前になりますが、 Google Apps Script で動くパスワード管理ツールを公開しました。このツールでパスワードの暗号化に使っているのが、 Closure Library の暗号化モジュールである goog.crypt です。これを使えば、 AES 暗号化や各種ハッシュ関数、 HMAC などをブラウザ上の JavaScript で利用できます。 最近は Web Storage や Indexed DB などの利用機会も多くなってきたと思いますが、 goog.crypt を使えばそれらに保存するデータを簡単に暗号化できます。今後はクライアントサイドの暗号化が必須の技術になっていくでしょう。そこで、本日はこの goog.crypt を使った暗号化の実装方法をまとめてみました。 予備知識 goog.crypt の説明に入る前に、暗号化処理の一般的な話を少し書いておきます。下の図は、

RegexPal is a tool to learn, build, & test Regular Expressions (RegEx / RegExp). Results update in real-time as you type. Roll over a match or expression for details. Save & share expressions with others. Explore the Library for help & examples. Undo & Redo with {{getCtrlKey()}}-Z / Y. Search for & rate Community patterns.

◆マッシュアップ技術の基礎 必要なスキルと知識は WebサービスAPI＝＞ほしい情報をパラメーターで指定し送信するとデータを送り返してくれる。 送信方法はREST方式で，データ構造はXMLからJSONになりつつある。 Ajax＝＞ブラウザ上で，Webサービスからデータを取り込んで(XMLHttpRequest)，操作に対応して，ページの表示を変える(JavaScript)ことが出来る。Ajaxのライブラリも色々開発され利用を待っている。 セキュリティ制限のため自サイトからしかWebサービスを利用できなかったが，自サーバー上のCGIやサーバーサイドプログラムを中継して他サイトのWebサービスを利用できるようになり，最近は中継せずにJSONPを使って，制限を回避できるようになりました。 CGI＝＞Webページを供給するサーバー+の管理下で，サーバーの上で動きWEｂページを支援するプログラム。

【お品書き】 01 EaselJSのアニメーション 02 スプライトシートからつくるアニメーション 03 TweenJSを使ったトゥイーンアニメーション 04 PreloadJSで画像ファイルを読込む 05 SoundJSでサウンドファイルを読込んで再生する 本稿は、2011年11月8日木曜日に同名で開かれたセミナーの概要を伝える目的で公開する。 CreateJS Suiteは、リッチでインタラクティブなコンテンツをつくるJavaScriptライブラリ群だ。各ライブラリは、予めCreateJSサイトからダウンロードしてインストールしておかなければならない。その手順については、「EaselJSで図形を描く」を参照してほしい。 01 EaselJSのアニメーション 01-01 canvas要素を定める canvas要素をbody要素の中に書くと、透明な領域が定められ、JavaScriptで図形

Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 Webに言語は数あれど、特に玉石混淆の激しいJavascriptの書き方について纏めてみた。間違い指摘大歓迎！ 発端はYahoo!の Eric Miraglia による、YUI 式モジュールの作り方をまとめた記事。ざっくりまとめると、以下の手順になる。 YAHOO.myProject.myModule = function () { //"private" variables: var myPrivateVar = "I can be accessed only from within YAHOO.myProject.myModule."; //"private" m

必要な知識 以前のバージョンの Flash Professional 必要なアドビ製品 *   Adobe Flash Professional CS6 (体験版ダウンロード) *   Toolkit for CreateJS Flash Professional Toolkit for CreateJS（以下「Toolkit」と表記）はFlash Proの拡張機能で、オープンソースのJSライブラリであるCreateJSスイートと組み合わせて使用するためのアニメーションアセットをパブリッシュできます。これにより、リッチでインタラクティブなエクスペリエンスをHTML5で実現できます。 Toolkitは変換用のツールではないという点に注意していただく必要があります。既存のプロジェクトを、1回のボタン操作でHTML5に変換することを想定したツールではありません。これまでのFlashスキルを活用し

去年、ノリで数日で作り上げたJavaScript製のお絵描きアプリ、JSPaintのソースコードを公開してみた。 なんとなく勢いで。 Download 1週間で実装したわりには、指先ツールとかカラーピッカー、Undoまで完備されていて結構頑張ってるんじゃないかと。ただしIEでは（メンドイので）動きません。Twitter投稿のみphpを使っていてZendのフレームワークが必要です。この辺は @sumihiro さんのご助力に感謝です。 ソースの書きかたが、ちょっとクラシックでprototypeで疑似クラスを作っていますが、まぁ気にしない。本職JavaScripterでもないので割と突っ込みどころが満載です。 こまかい事はTwitterのfladdictで捕まえて聞いてください。

Flashでに学ぶ非同期通信のノウハウのって感じのお話。JavaScriptでオブザーバパターンを用いて、イベントドリブンなコード（addEventListener等）をバリバリ書く方法です。 というかFlashで言うところの、mx.events.EventDispatcherクラスの自分なりの移植なわけですけど。 このEventDispatcherクラスを使うと、W3CのDOM3にそれなりに対応した、イベントモデルを自作のJavaScriptのオブジェクトに実装できます。これで素晴らしきイベントドリブンの世界が楽しめます。 function EventDispatcher(){} /** EventDispatcher.initialize( obj ) オブジェクトobjに、W3C DOM3互換のイベント通知機能を追加します。 これによりobjは、onLoad等のイベントを発行すること

こんにちは。きんくまです。 AS3のEventDispatcherは便利だと思います。JSでは特に用意されていないので作りました。 こんな感じです。 var kinkuma = {}; //package name (function(pkg){ pkg.Event = function(){ this.target; this.context; }; pkg.Observer = function(){ this.listeners = {}; }; pkg.Observer.prototype = { addObserver:function(type, listener, context){ var listeners = this.listeners; if(!listeners[type]){ listeners[type] = []; } listeners[type].pus

IDE でサポートされている動的な言語について IDE では、PHP のほかに、Ruby、JRuby、Rails、Python、Groovy などの動的な言語での開発をサポートしています。IDE でこれらの言語を使用する開発についてのリソースは、次を参照してください。 Ruby および Rails アプリケーション。Ruby は、容易に読解可能な構文を使用し、簡単さと生産性に焦点を合わせた、動的なオープンソースプログラミング言語です。Rails は、Model View Controller (MVC) パターンの分割に基づいた、データベース支援の Web アプリケーションをすばやく作成できるフレームワークです。 Python アプリケーション。 Groovy アプリケーション。