サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
アメリカ大統領選
yas-hummingbird.blogspot.com
JavascriptのEvent Handlerの引数で受け取るEvent、多言語で言うところの"EventArgs"をクロスブラウザに対応させる。 例えば、以下のようなイベントハンドラがあるとする。 function clickEventHandler(event){ alert('clicked.'); event.stopPropagation(); } このままではIEの場合、stopPropagationというメソッドはeventのメンバにないので、イベント伝播を止められない。 これに対応するために通常なら『event.cancelBubble = true;』を書き加えるだろう。 つまり、どう対応するかは予め決まっている。それならば、事前にそのような処理に書き換えれば良いのではないか?と考えた。 イベント伝播を止めるには以下のような処理を行う。 if(event.stopPro
イベントを理解するにはデリゲートも理解してないと話が進まない。 とは言っても、デリゲートは理解に苦しむことが一つある。 何がデリゲートを難解にしているのか、それは正しく「コールバック」。 勉強のためと自身でデリゲートのコールバックを使ったコードを書いても、忘れた頃に読み返すと「何がしたかったんだろうか?」と解読に苦しんだりする。まだ私が未熟ということもあるが、可読性という側面から見て、このコールバックこそが他者に理解しづらくさせる要因では?と思ってしまう。 とりあえず基本から delegate int del1(int x); static void Main(string[] args) { del1 lambda = x => x * x; del1 deldel = delegate(int x) { return x * x; }; del1 delMethod = Method1
まず、以下のようなデータ モデルあるとして、 class Foo(db.Model): index = db.IntegerProperty() Entityを取得するModel.all()を使用してEntityを取得する。 query = Foo.all() Model.all()によって返される値はQueryオブジェクト。 こんな風に取得しても良い。 query = db.GqlQuery('SELECT * FROM Foo') # or query = db.GqlQuery('SELECT __key__ FROM Foo') db.GqlQuery()によって返される値はGqlQueryオブジェクト(のインスタンス)。 「Entityを削除する」という目的の上ではどちらでも構わない。 Entityを削除する上記のような操作によって取得したGqlQueryオブジェクト、またはQu
インスタンスを生成します。 BackgroundWorker bw = new BackgroundWorker();ここからは「bw」という名前で生成したインスタンスを使い、話を進めます。 バックグラウンド処理を実行する DoWorkイベントにバックグラウンドで行う処理(イベントハンドラ)をフックします。 bw.DoWork += new DoWorkEventHandler(bw_DoWork); バックグラウンド処理を実行する。 bw.RunWorkerAsync(); 引数を渡す場合の例) bw.RunWorkerAsync(100); DoWorkイベントハンドラ内で渡された引数を使用する例) int arg = (int)e.Argument; DoWorkイベントハンドラの例) void bw_DoWork(object sender, DoWorkEventArgs e)
jQueryを触っていて、position:absoluteを指定した空の要素のhoverイベントを使用したかったのですが、IEだとhoverイベントが起こらない。 Firefox3とChromeではちゃんとhoverイベントは起こります。 いろいろとイジっていると、background-colorを指定することでhoverイベントが起こるようになった。 こんなこと知らないよ、ふつう… 私は都合上、見えない空要素に対してhoverイベントを起こしたかったのでopacityを0にしたが問題なくイベントは起こってくれる。 background-colorを指定する以外にbackground-imageを指定してもhoverイベントが起こる。 不思議なことに指定する画像は実際に存在する必要がない。 CSSで表すとこんな感じです。 #target{ position:absolute; backg
空白文字が2種類あることを知らなかったんですよね(^_^;) まず、空白文字についての話の前に、知っておくべきことから。 Javascriptで"a"という文字を表現する方法。 alert("a");//a alert("\x61");//a alert("\u0061");//a これを比較してみる。 alert("\x61" == "a");//true alert("\x61" == "\u0061");//true alert("\u0061" == "a");//true 正規表現ではどうだろう? var ret ret = /\u0061/.test("\x61");//true ret = /\u0061/.test("a");//true ret = /a/.test("\x61");//true ret = /a/.test("\u0061");//true ret =
個人的によく使う「jquery.color.js」に汎用性のあるメソッドを追加してリニューアルさせました。 内部的な動作は同じなので jquery.color.js と置き換えることが可能です。 修正点getRGBとgetColorのグローバル化 getRGB内部処理の見直し ネーム付きカラー全てに対応 parseColorCodeメソッドの追加 getRGBgetRGBは内部で使用されているものを外部からも使用できるようにjQueryオブジェクト直下に置き換えました。 getRGBは引数で受け取った色からRGB配列([red, green, blue])を生成します。 内部の修正点 正規表現をより厳密に行うよう修正しています。 数値に変換する処理をより速く行えるよう修正しました。 getColorこのgetColorも内部で使用されているものを外部からも使用できるようにjQueryオブジ
Google App EngineでPythonを触りながら、行き当たりばったりで学んだことをメモ。 pythonはnotを使用する TrueならFalse、FalseならTrueに反転させる >>> a = True >>> a = !a SyntaxError: invalid syntax >>> a = not a >>> a False typeで型を取得 >>> type({}) <type 'dict'> typesを使用して型を比較 >>> import types >>> type({}) is types.DictType True こんな書き方じゃダメなのか? >>> foo = {} >>> type(foo) is type({}) True import typesするの面倒とか言っちゃダメですか?。。。ρ(-ω- ) イジイジ 指定したkeyがないとKey
以下のような a要素に囲まれたimg要素はスタイル(CSS)を指定しないとブラウザによっては 2px の border が付けられることがある。 例) <a href="#"><img src="image.jpg"/></a> この img 要素の border-width を jQuery で取得し、違いを見てみる。 スタイル(CSS)での border 指定がない場合(defaultの状態)img 要素の border-width を取得する alert($('a > img').css('border-width')); 取得結果
jQueryでclickイベントを追加する場合、イベントを関連付ける要素のclassが『foo』とすると、以下のように記述します。 $(function(){ $(".foo").click(function(){ alert('Clicked!'); }); }); しかし、Webページを表示後のイベントで追加した要素に対してはイベントが関連付けられません。 ですから上記の場合だとページが読み込まれたときに存在している要素にのみclickイベントが関連付けられるので、Webページを表示後に追加した要素のclassが『foo』だとしても、このままではclickイベントは起きません。 サンプルを作成しましたのでこちらで確認して見てください。 sample:jQuery - Test イベントを関連付ける 新しく追加された要素にイベントを関連付けるにはどうすれば良いか『var elm = do
lightboxをはじめ、ウィンドウ内をレイヤー要素で覆うエフェクトがメジャーになりましたが、jQueryのプラグインで汎用性のあるモノではメジャーなところで『blockUI』というものがありますが、実際のところ、私にとってはボリュームがありすぎる。 例えば「ダイアログを表示するだけ」といった程度のことにこれだけのモノは必要ない。 あまり汎用性を求めれば、比例してコード量が増えたり、処理速度に影響したりするワケで、落としドコロが難しいのですが、私的にはもっと砕いて小さな部品が欲しいわけですよ。 つまり、「ページを覆うモノ」ただそれだけのモノが一つの部品(plugin)として存在した方が、より拡張性や汎用性があると思うワケです。 ということで、もっと軽くて使いやすい「ページを覆うモノ」が欲しくなったので自分で作ってみました。 ソースはこちら。
『Regex Selector for jQuery』にて、jQueryのセレクターでRegexするプラグインを投稿されていたので、どんなもんかとそちらで書かれているサンプルを全部試してみました。 id属性が『a,e,i,o,u』で始まる要素を取得します。 $(':regex(id,^[aeiou])'); class属性に半角数字が含まれている要素を取得します。 $('div:regex(class,[0-9])'); src属性に"jQuery"という文字列が含まれているscriptタグ(要素)を取得します。 $('script:regex(src,jQuery)');コードを見ると"i"フラグを使用しているため大文字/小文字を区別しません。 ですから『jquery』、『jQuery』共に取得します。 widthが100~399pxの要素を取得します。(原文では100 - 300pxで
Google Sites も以前に比べ、UIの一部変更と、そのほぼ全てが日本語化されたことにより、随分と使いやすくなった。 先ほど確認したのですが、テーマが50種類に増えました。\(^o^)/ ページを分割するレイアウトのバリエーションも以前に比べ増えているようですね。CSSが使えないのでうれしい変更です。 しかし、まだまだこの自由度の低い仕様に少々不満を抱く人も多いのではないだろうか。 そんな人へ、こんな使い方もあることをご存じ? スタイル(CSS)の適用 まずはそんなGoogle Sitesの仕様の一つ、スタイル(CSS)が適用できないことについて。 「どうしてもCSSを使用したい」という場合、HTMLの編集からタグのstyle属性に書き込むという方法もありますが、もう一つの方法として、「Google ドキュメントを使用する」という手も検討してみては如何だろうか。 Google ドキュ
ワザワザブログにブックマークに登録するボタンを設置しなくとも、SBM各サービスでツールバーにブックマーク登録ボタンを設置して簡単にブックマークできる機能(ブックマークレット)を提供しているため、今更必要ないかもしれないが、Bloggerのブログに各ソーシャルブックマークサービスのブックマーク登録ボタンを設置する方法を紹介します。 有名ドコロは抑えたつもりですが、『reddit』など、Iconをそのまま持ってくるのは如何なものか?というサービスは割合しました。 参考までに、どうしても『reddit』のIconが欲しい場合はここ。 『reddit』のブックマークボタン設置方法はここで。 Bloggerに設置する場合、こんな感じになります。 <a expr:'"http://reddit.com/submit?url=" + data:post.url + "&am
わりといい加減だった型判定について、確認の意味も込めてここに。 今後のためにも、頭の中を整理してみる。 型の判定に良く使用するもの === typeof instanceof constructor それぞれに利点があり、状況によって使い分けることになるが、処理速度は上記の順の通り、『===』が最も速い。 つまり、『===』<『typeof』<『instanceof』<『constructor』 下図はFirebugで計測した結果です。環境によって数値は変わると思われ、参考値としてご覧下さい。 100万回 for loopで回した処理に掛った時間 ※『*constructor』は後に説明します。 一部、扱う型によって処理速度に差が見られた。 その二つの例外を以下に説明します。 存在しない変数を参照した場合の『undefined』についてvar a; alert(typeof a); 通常は
これだけ知っていればGoogle Chartが使えるようになる、というレベルを目指して、Google Chartの使い方を説明したいと思います。 必須パラメータ必須パラメータは以下の3つです。 チャート データ(chart data) チャート サイズ(chart size) チャート タイプ(chart type) チャート図を作成するには少なくとも、この3つを指定する必要があります。 チャートデータのデータ形式Google Chartで扱えるデータ形式は3つあります。 テキストエンコード(Text Encode) 簡易エンコード(Simple Encode) 拡張エンコード(Extended Encode) テキストエンコード 通常の使い方をする場合、扱うことができる値の範囲は0.0~100.0までとなっています。 数値をそのままデータとして扱えるため、これが一番扱いやすいデータ形式と
10進数の「2」を出力してみます。 出力される結果を見やすくするため、2進数はPadLeftを使用し、4桁で揃えています。 int flag = 2; //0010 Console.WriteLine( "10進数 : {0}\n 2進数 : {1}\n\n", flag, Convert.ToString(flag, 2).PadLeft(4, '0') ); Result 10進数 : 2 2進数 : 0010 フラグの取得フラグが立っているか否かを調べます。 フラグを取得する式 x & yビット演算子「&」は"x"と"y"の両方のフラグが立っている場合に1となります。 Example 3 & 2 ↓ 0011 & 0010 ↓ 結果: 0010上記の場合、右から二番目の値だけが"1"なのでそれのみを残し、他は"0"となります。 これによってフラグの値のみを抽出できます。 Exampl
イベントにフックされているイベントハンドラを取得する方法例えば、フォームにbutton1というボタンがあり、button1のクリックイベントにフックされているイベントハンドラを取得して、何らかの処理を行いたい場合があります。 そのようなことを行うにはSystem.Reflectionを使用します。 using System; using System.ComponentModel; using System.Reflection; namespace WindowsFormsApplication1 { public class EventDatum { public static Delegate GetEventHandler(object obj, string eventName) { EventHandlerList ehl = GetEvents(obj); object ke
Aptanaを使っているならそれを使わない手はないだろうと、AptanaでGAEのライブラリを参照したり出来ないかと自力で試行錯誤していたが上手くいかず… webで情報収集したらあるじゃないですか! たまにはやるねぇ、Google! せっかくなので日本語でそのやり方を書いときます。 PythonのインストールとAptanaのプラグインであるPyDevが入っていることを前提に話を進めます。 Pydevプロジェクトの新規作成まず、新規 Pydevプロジェクトを作成します。
イントラネットや特定のユーザー間のみで使用するケースが多いのか、検索してもあまりヒットしないGoogle Sitesを利用したサイトですが、既に活用しているところが幾つかヒットしたので参考まで。 自然環境デザインスタジオ ここはAppsを使用しているのでしょう。 しゃべる - イントラネット版 Microblog Chromium Developer Documentation Google Sitesで紹介しているサンプルサイト一覧です。 実際に見て、触れて何が可能か、どんな機能があるのかを知ることができます。 このサービスを有効活用するために、既にあるGoogle グループというサービスとの違いを理解するだけでも良いのではないでしょうか。 Ski Club: Team Project: Company Intranet: Classroom: PlayGroup: Family web
PHPで文字列チェックしたくてちょっと調べた。 こんな感じでOK?みたいなものが以下のコード。 <?php function chk_alnum($text) { if (preg_match("/^[a-zA-Z0-9]+$/",$text)) { return TRUE; } else { return FALSE; } } ?>いろいろ出てきた情報を整理。 『preg_match』 — 正規表現によるマッチングを行うヒント: ある文字列が他の文字列内に含まれているかどうかを調べるためだけに preg_match() を使うのは避けた方が良いでしょう。 strpos() か strstr() 関数を 使う方が速くなります。だってさ。 preg_match("/パターン/", 調べる文字列);"/パターン/" //文字列の1行目のみを調べる "/パターン/s" //改行
以前、このブログでは画像閲覧用に『lightBox 0.5』を使用していたが、現在は『Highslide』を使用している。 その理由について、『lightBox 0.5』のバグ報告も兼ねて。 本当にそうなるのか実際に試したい場合は以下にサンプルがあるのでこれで試してみると良い。 [Enter] キーを押すと重ねて表示される『lightBox 0.5』の動作はWebページに表示されているサムネイルをクリックするとリンクされた画像をレイヤーを上から重ねたように表示するが、その状態で[Enter]キーを押すとまたその上にレイヤーを重ねるように表示してしまう。通常画像以外の背景は50%程度透過している(透過値は設定で変更可能)が、[Enter]キーを押し続ければこんなことになる。 画像表示中は[Enter]キーを無効にするか、もしくは画像表示中に[Enter]キーを押された場合は画像を閉じるといっ
『Google Page Creator』はHTML、CSSに関する知識がなくとも以下(下図)のようなサイトを開設できるよう設計されたWebサービスです。 Site Page Preview: HTMLのタグや内容を編集することも可能ですが、headタグに触れられないため、スタイルシートやJavaScriptをheaderで読み込むことは出来ないなど、少々制限された仕様となっています。 しかし、Bodyタグ内で読み込むという少々強引なやり方で実装可能となる場合もあります。 例えば、Adsenseを埋め込む方法はこちらで紹介されています。 利用可能な容量は100MBとなっています。 Google Page Creatorにログイン『Google Page Creator』を利用するにはGoogleアカウントが必要です。 以下からログインして、サイトを新規作成します。 Google Page
Bloggerのwidget(要素)を自由に配置できるようにする方法を紹介します。 [レイアウト] ⇒ [HTML編集]にてソースを拝見。 maxwidgets<b:section>タグ内の『maxwidgets』属性は各ブロック(wrapper)単位で追加できる widget の数を表しています。 「maxwidgets='1' 」とした場合、1つしかwidgetを配置できないということになります。 この値を2以上にすることで今まで配置できなかった Header ブロックにも widget の配置が可能となります。 showaddelement[レイアウト] ⇒ [ページ要素]にて 下記のような破線で囲まれた「ページ要素を追加」を見ることができると思います。 これを<b:section>タグ内の showaddelement 属性で 表示するか否かを設定することができます。 「showa
このページを最初にブックマークしてみませんか?
『humming bird』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く