はてなブックマーク

前回のコードをもう一度見てみましょう。 var person = function (n) { var name = n; return { say_hello: function() { alert( name ); } }; }; var p1 = person('Ichiro Suzuki'); p1.say_hello(); これはオブジェクトリテラルで区切ると、次のように考えることができます。 すなわち、ファンクションオブジェクトと、その戻り値となるオブジェクト。 及びその戻り値となるオブジェクトの中で定義された、say_hello という名前の function オブジェクトです。 このように定義すると、内側の関数からその外側の変数にアクセスすることが出来ます。 これはどうしてかというと、JavaScript の関数オブジェクトはそれが生成されたときのコンテキストを保持している

昨今の PC、スマートフォン、タブレット等デバイスのマルチスクリーン対応 (いわゆるレスポンシブウェブデザイン) は、 CSS について色々としらないと大変です。 知っていればできる、知らないと出来ない (もしくは手間がかかる)、ということが多いです。 ここでは CSS3 における背景 (background) の設定で、特に background-size 属性について少し詳しくみていきましょう。 background-size 属性による違い CSS3 では背景 (background) の設定はいろいろな要素ができます。詳しくは W3C の background の説明ページを見ていただくことにして、 ここでは background-size について動作をみてみましょう。 尚、ここで使用する背景画像は次の画像です。端がわかるように黒い正方形を書いています。 background-s

HTML5 は主要なブラウザーの新しいバージョンで実装が進んできている新しいテクノロジーです。 最新のブラウザでも全て実装できている訳でも無いのですから、古いブラウザーでは当然ながら実装されていない機能、認識されない要素、属性などが多数あります。 古いブラウザーに欠けている部分、新しいブラウザーでも足りない機能の穴を埋めることを、ポリフィル (polyfill) という風に呼ばれています。 もともと、壁の穴を埋めるための有名な商品で Polyfilla (ポリフィラ) というのがあり、ブラウザの穴を埋めるという行為も名前からポリフィルという言葉を動詞として使ったということです。 ちなみに少し脱線ですが、こうした「商品名からの命名」として思い出すのは "Raid" (レイド) でしょうか。 Raid というのはアメリカで有名な殺虫剤で、日本で言えば「キンチョール」という感じになります。 その

<p><img src='/img/img24x24.png' alt='' style="width:24px;height:24px;">abc</p> ここで画像は縦横 24px です。 すると、次のように画像に対して文字が下側に表示されてしまいます（文字が小さい場合）。 そこで、これを回避して横一線に中央に揃えて表示するには、img と文字の CSS に vertical-align:middle を指定します。 <p><img src='/img/img24x24.png' alt='' style="width:24px;height:24px;vertical-align:middle;"><span style="vertical-align:middle;">abc</span></p> その結果、次のように横に揃います。 さて、これはいったいどういうことでしょうか。そも

Web アプリケーションでは、ユーザーからの一連の HTTP 要求をまとめて考えることができるよう、しばしば「セッション」という考え方が導入されます。 例えば一旦ログインを行なったら、そのセッションをログイン済みとマークしておき、そのログイン済みセッション内ではログイン処理を繰り返さない、といったことが行なわれます。 各種フレームワークでセッションオブジェクト、セッション変数という形で出現するので、ウェブアプリケーションを開発したことのある方なら、一度は利用したことがあると思います。 蛇足ですが、セッション変数と聞くと反射的に、アパートメントスレッドモデルの COM オブジェクトのポインターをセッションオブジェクトに格納していて、 他のワーカースレッドからそれを利用し、メソッド呼び出しの際に元のスレッドにマーシャリングされてそこがボトルネックになるとか、デッドロックになってしまう・・・とい

ここでは Web SQL Database の使い方を説明します。 ちなみに HTML5 Web SQL Database はもともと HTML5 標準仕様として組み入れられるものとして検討されてきて、2010年11月に W3C では Recommendation に入れるのをやめました。 しかしながら HTML5 の一環として、Google Chrome、Safari、Firefox 及び Android の標準ブラウザなどの主要ブラウザでサポートされています。 従って、HTML5 標準ではないから使えないか、というとそうでもなく、例えばモバイルアプリの HTML5 開発といった状況では利用可能です。 Web Storage ではキー・バリューペア式の簡便なストレージを提供しているのに対して、 Web SQL Database は SQLite をバックエンドのエンジンに持ち、基本的な

美しい図を作ることで、各種資料が分かりやすくなる、プロフェッショナルな説得力を持つといった効果があるのは、皆さん既に経験済みと思います。 私は以前は Visio を使っていたのですが、Viso では確かにキレイに図が描けるのですが、なにぶん高価なソフトウェアだけにバージョンアップのたびにホイホイ買い換えるわけにも行かず・・・ 結局、古いバージョンを使い続けたりしてました。 その点不便です。 でも、実際の所そういう人は多いのではないでしょうか。 そこで、常々 Visio の代わりとなるソフトウェアを探し続けてきた成果をご紹介します。 フリーソフトではないのもありますが、Visio 程高くないし十分価値があるものばかりです。これまでいろいろと試してきたものから、おススメを紹介します！ Edraw Max 図表作成機能で１番のおススメはこの Edraw Max です！ 私は今これを利用しています

ここでは HTML5 に関する話題を取り上げます。 HTML5 は単にマークアップが進化したというだけではなく、オフライン機能、ジオロケーション情報のインターフェイスなど、 特にモバイルアプリケーション開発のオープンスタンダードな基盤として注目されています。 HTML5 Web Storage の使い方 HTML の Web Storage の使い方を示します。window.localStorage というインターフェイスを通してキー・値のペアを簡単に設定及び取得可能です。 HTML5 Web SQL Database の使い方 HTML5 Web SQL Database はもともと HTML5 標準仕様として組み入れられるものとして検討されてきて、最終的に落ちてしまいましたが・・・ HTML5 ジオロケーションの使い方 ジオロケーション API を利用するとスマートフォンなどのモバイル

Webサイトを構築する上で、画像の加工はしばしば必要となります。画像そのものがWebページのコンテンツになることもあれば、画像で文章による説明を補間することでより効果的に、物事を説明することもできます。 GIMP は Linux 上の画像編集ソフトとして、もっとも人気のあるソフトウェアの一つです。 Windows上でも利用できるので、利用している人も多いと思います。 ここでは GIMP を利用して、画像に矢印を描く方法を示します。 Draw Arrow プラグインのインストール 矢印を描く場合には、GIMP プラグインレジストリの Draw Arrow プラグイン を利用すると綺麗な矢印が簡単に描けます。 同プラグインページから、 scm ファイルをダウンロードして <ホームディレクトリ>/.gimp-<バージョン>/scripts ディレクトリにインストールします。 具体例として、GIM

Xdebug を利用すると PHP プログラムのプロファイリング (Profiling) を行うことができます。 プロファイリングの有効化 プロファイリングを有効にするには、php.ini にて xdebug.profiler_enable スイッチを On にします。 xdebug.profiler_enable = 1 xdebug.profiler_output_dir = "C:/Temp" profiler_output_dir はプロファイラログの出力先を指定します。 ログの追加 ログを既存ログの上書きではなく、追加する場合は xdebug.profiler_append を On にします。 xdebug.profiler_append = 1 ファイル名の指定 プロファイラログファイル名を明示的に指定する場合は、トレースファイルと同様にファイル名を指定することができます。

each 配列のそれぞれの要素の値とインデックス、あるいはオブジェクトのそれぞれの属性名と値を引数として、ファンクションを呼び出す。 次の例では 'one', 'two', 'three' という文字列が要素である配列 arr と、属性名が One, Two, Three であり、それらの値がそれぞれ 10, 20, 30 であるオブジェクト obj に対して each を適用して、どのような値が引数に渡されているか確認しています。 var arr = [ 'one', 'two', 'three' ]; var obj = { One: 10, Two: 20, Three: 30 }; $.each ( arr, function ( a, b ) { alert( a + ' - ' + b ); }); $.each ( obj, function ( a, b ) { alert

URL 承認とは？ IIS7 以降では URL Authorization という機能が導入されました。 2010年7月の時点で、MS の TechNet の記事の見出しでは URL Authorization のことを "URL 認証" と翻訳しているようですが、これは "URL 承認" と訳すべきところです。 この記事のことです↓ IIS 7.0 の URL 認証とは - http://technet.microsoft.com/ja-jp/library/dd939092.aspx 珍しくかなり豪快な間違いですね（苦笑） 文章中では URL 承認と正しく書いているのに・・・。 「認証」と「承認」のおさらい どちらも Auth から始まる単語で紛らわしいのですが、通常 Authentication (オーテンティケーション) は「認証」 と訳し、Authorization (オーソライ

Web サイトの多文化、多言語対応 私はアメリカでシステム開発をしていることもあり、日本語と英語バージョンのサイトを作成する場合があります。 実際のところ、例えば日本語サイトと英語サイトを作る場合は、お客さんのターゲット・セグメントも日本人、 アメリカ人等の様に異なるわけですから、単にユーザーインターフェイス (UI) が日本語で書いてあるか、 英語で書いてあるかという違い以上の違いを配慮しなければなりません。 特にオンラインショッピングサイト等ではセールス側の意見をしっかり取り入れなければ、そもそも売れませんから、 そうした配慮は特に重要です。 このため、それぞれのサイトを別々に開発することも珍しくはありません。(もっとも似たようなコードは再利用できるよう配慮するのはもちろんですが) しかしながら、キャプションやメッセージ等の言語切り替えのみができれば良い、という場合ももちろん存在します

認証の種類 IIS は多数のユーザー認証方法をサポートしています。 ここでは認証方法の代表格である、「匿名認証」、「基本認証」、「Windows 統合認証」 の３つの使い方を見て行きましょう。 匿名認証 匿名認証は、「認証をしない」 という設定です。 インターネット上のどのユーザーからのアクセスも受け付ける場合等は、匿名認証を有効にします。 匿名認証の設定は非常に簡単です。 IIS マネージャにて、匿名認証を選択して 有効にする をクリックすれば OK です。 ちなみに、IIS 7.0 の管理用コマンドである appcmd で設定する場合は次のようにします。 C:\>%systemroot%\system32\inetsrv\appcmd set config /section:system.webServer/security/authentication/anonymousAuthen

PHP エクステンションでの戻り値の扱い方 PHP エクステンションの関数から、呼び出し元の PHP スクリプトへ戻り値を返したい場合について説明します。 PHP エクステンションでは、事前割当てされた return_value という zval 値に値をセットすることによって戻り値を返します。 return_value ってどこにあるの？ PHP_FUNCTION は ZEND_FUNCTION の別名なのですが、ZEND_FUNCTION は次のように定義されています。 #define ZEND_FUNCTION(name) ZEND_NAMED_FUNCTION(ZEND_FN(name)) さらに掘り下げると、ZEND_FN と ZEND_NAMED_FUNCTION は次のようになります。 #define ZEND_FN(name) zif_##name #define ZEND

私は転職を何度かしており、あちこちで働いてきました。 開発現場で一番、「雑さ加減」 が如実に現れるのは、コーディングや設計方法もさることながら、その工数の見積り方法でしょう。 その中で一番雑な状況をご紹介します。 とある上司は、私が何か考えを示すとすぐに「見積額はいくらか」 と聞いてくるのが常でした。 私は 「今のアイデアを実現するには、この機能が必要、この機能が必要、この画面が必要... そしてそれぞれ...」 と 「工数」 を計算し始めます。しかし、その上司はいつもイライラして、こう言います。 「小山さん、私が知りたいのは機能じゃない。見積額だけだよ。早く教えてくれ。」 機能や工数を挙げることなく、どうやって見積額を出すのでしょうか？ 一体何の金額を計算しようとしているのでしょうか。工数の見積額ではなかったのでしょうか？ しかしその上司は、パッと数字をいえない私を見て、さも「お前は経験

アクセス違反などでクラッシュして終了したプロセスのダンプをデバッガで開くと、 クラッシュしたスレッドにコンテキストがセットされた状態で開かれます。 このため、ひとめみただけで、クラッシュの直接の原因を特定することが可能です。 その直接の原因にいたる経緯はひとめではわかりませんが、なぜアクセス違反を発生させたのか、などは ひとめでわかります。 「ひとめでわかる」 と言われても、デバッガを使ったことが無ければ、 なかなかピンとこないと思いますので、簡単な例をみてください。 クラッシュ時の解析例 次のようなコードがあったとします。 #include <string.h> int main() { strcpy( NULL, NULL ); return 0; } このコードでは strcpy 関数を呼び出していますが、文字列の元のアドレスも書き込み先も NULL がセットされています。 NULL

ブラウザからファイルをアップロードする仕組みをご存知ですか。 たとえアップロードの仕組みを知らなくても、普段からあまり意識することなく、ファイルをアップロードしているのではないでしょうか。 また、ASP.NET や PHP 等、様々な実行環境においてはファイルアップロードをサポートする仕組みがあるので、サーバー側でも特に何もしなくてもアップロードされたファイルを受け取ることが可能だったりします。 しかし、ISAPI 等のネイティブコード開発では、プロトコルやデータフォーマットに関する知識がないと開発できないこともしばしばです。ファイルアップロードもそのひとつです。 もちろん ISAPI にはクライアントからポストされたデータを読み取る仕組みはあるものの、「アップロードされたファイル」 というようなまとまった形ではデータを受け取ることが出来ません。あくまで、生データを受け取り、そのデータを自

デジカメで撮影した画像ファイルに含まれる撮影日時や撮影したカメラの機種や設定などの情報は、 「EXIF 情報」として画像ファイル内に含まれています。（EXIFはイグジフと読みます） iPhone や Android に代表されるスマートフォン等、GPS機能付きの機器で撮影した写真には、設定によっては撮影した場所まで記録される場合がありますので、 撮影してすぐに画像をウェブサイトやブログに掲載すると、うっかりいろいろな情報を流出させてしまうことになりかねません。 そこで、画像を公開する前には不要な EXIF 情報が含まれていないか確認し、不要ならばそれを削除するべきです。 ここでは、JPEG ファイルの EXIF 情報を操作する jhead というツールのインストール方法と使用方法を紹介します。 jhead のインストール Windows jhead の Web サイト (http://ww

アクセスログの読み方 アクセスログを収集したら、必要に応じてそこから何らかの情報を読み出すことになります。 この資料では収集するアクセスログファイル形式を W3C 形式 でログを収集することを想定します。 これが一番使われており、情報もリッチなので特に問題がない限り、W3C 形式をおすすめします。 さて、ログファイルを開くと次のようにログが記録されていることが分かると思います。 #Software: Microsoft Internet Information Services 7.0 #Version: 1.0 #Date: 2009-03-04 18:21:39 #Fields: date time s-ip cs-method cs-uri-stem cs-uri-query ... 2009-03-04 18:21:39 ::1 GET /wp-admin/install.php

PHP エクステンションの開発環境では、ハッシュテーブルを簡単に利用するための、便利な API が用意されています。 ハッシュテーブルはキーと値のペアを格納するデータ構造で、あるキーをもとに素早く値を取得する場合に適しています。 PHP エクステンションの開発環境では、ハッシュテーブルを簡単に利用し、それを PHP スクリプトでも利用可能とするための、 大変便利な Zend Hash API (ゼンドハッシュ API) が用意されています。 この資料では Zend Hash API を用いて PHP エクステンションのコード内でハッシュテーブルを作成し、それに値を格納、 取得、値の削除、クリーンアップ等を行い、基本的な動作を確認します。 コードの書き方 ハッシュテーブルのデータ型 ハッシュテーブルは HashTable 型として作成されます。これは zend/zend_hash.h にて定

この資料では Windows XP 以前のデフォルトであった、ルックアサイドリスト (Look Aside List, LAL) をフロントエンドアロケータとする、ヒープメモリの仕組みについてご説明します。 尚、Vista 以降では LAL ではなく、LFH (Low Fragmentation Heap) がデフォルトとなり、 またセキュリティ対策のためにヒープマネージャには大きな変更が加えられました。 これについては別の資料で書きたいと思います。この資料では特に断りが無い限り、ヒープと言えば LAL を利用するヒープのことを指しています。 ちなみに、はじめにお断りしておきますが、この資料は主にこちらの Advanced Windows Debugging とインターネット上の情報をもとに、 私が動作確認をして記述しました。 可能な限りデバッガで動作確認をしていますが、私の理解不足などが

マイクロソフトのフォーラムにて、例外 0xc0000374 でクラッシュする問題が取り上げられていました。 私はスレッドに乗り遅れタイムリーに返信することができなかったのですが、興味があったので試しに動作確認をしてみました。 デバッグの基本のところを含め、簡単に解説します。 この資料では Debugging Tools for Windows はインストールされているものとしていますので、まだお持ちで無い方はインストールしてください。 例外 0xc0000374 でクラッシュする (落ちる) 例外 0xc0000374 は ntstatus.h にて STATUS_HEAP_CORRUPTION、メッセージテキスト "A heap has been corrupted" (ヒープが壊れています) と定義されています。 (日本語メッセージは私が訳してます) すなわち、0xc0000374 で

MongoDB の C# ドライバーの入手 C# のコードから MongoDB にアクセスするには、 MongoDB の C# ドライバーを入手します。 ダウンロードしたら、適当なディレクトリに展開します。 C# から MongoDB ドライバー (MongoDB.Driver) を利用する 参照設定 ここでは Visual Studio C# 2010 Express で MongoDB を利用するコードを書いてみましょう。 プロジェクトを作成したら、参照の設定で MongoDB.Driver.dll を指定します。 すると、MongoDB.Driver 名前空間が利用できます。 db.things に含まれるドキュメントを列挙する MongoDB に接続して、things コレクションを取得。それに含まれるドキュメント (データのこと) を列挙するコードは次のようになります。 コードは