2012.06.25
11:37
author: taikiken
1件のコメント
Chrome CSSでベンダープレフィックスを付けたCSS3の-webkit-filterを使うと様々なエフェクトが使えるので試してみました。
残念ながら現Safari(5.1.7)では-webkit-filterはまだ使えません。
Safari 5.2では実装されるようです。
via: Apple gives developers new Safari, Xcode updates
caniuse.com: http://www.caniuse.com/#feat=css-filters
2012.06.25
03:33
author: taikiken
2件のコメント
Formパーツのradioやcheckboxがチェックされているかを調べたりをjQueryでの巻。
radioやcheckboxがチェック状態なのかどうかは属性値のcheckedがcheckedになっているかどうかを調べれば良さそうです。
$('#checkbox').on('change', function (e) { e.preventDefault(); e.stopPropagation(); var isCheck = $(this).is(':checked'); }); |
$(this).is(':checked')でチェックされたかどうかを調べられます。
true: チェック済み, false: チェックしていない。
チェックを強制的に付ける。
$('#checkbox').attr('checked', 'checked'); |
チェックを外す。
$('#checkbox').removeAttr('checked'); |
update
こちらもお読み頂くと吉です。
[JavaScript] ユーザーがチェックしたradio, checkboxのチェックを外したい
2012.06.07
11:15
author: taikiken
3件のコメント
「Canvas始めました」でCanvasのローレベルAPIを使って投稿をしてきました。
昨年(2011)9月にあるところで”Canvas”について話す機会があり、その時にお見せしたデモ・コードを再検証がてら記事にしてきました。
その時もお話ししたのですが、HTML 5(Canvas)を使ったインタラクティブ・コンテンツ制作はかなり大変、だということをあらためて、本当にあらためて実感しました。
Canvas API操作はJavaScriptを使います。
私のJavaScriptスキルやCanvas APIへの理解が心もとないせいだと言われれば反論のしようも無いのですが、ご興味があれば長文ですが少しおつきあいください。
繰返しになりますが、Canvasでインタラクティブなものを作るのは大変！
大変だと思った理由を書いていきます。
無知によるものもあるかもしれません、その時はぜひコメントなどで教えてください。
続きを読む →
2012.06.06
21:04
author: taikiken
2件のコメント
JavaScriptの配列判定にオレオレ関数を使っていたんだけど、ECMAScript 5にArray.isArrayなんてステキな機能が追加されてたの巻。
■オレオレ配列判定関数
function isArray (arr) { var result = false; if (typeof arr !== 'undefined' && arr.splice) { result = true; }; return result; } |
でもこれだと偽装した配列にはお手上げ。
var testObj = { splice: function (){}, length: 10 }; if (isArray(testObj)) { console.log('OK'); } else { console.log('No'); }; // console // OK |
偽装Objectに配列用のプロパティやら関数とか全部のせちゃうと「オレオレisArray」は無力と化してしまいます。
まぁ、１人プロジェクトで使ってる限り偽装（？）って話ですが…
続きを読む →
2012.05.22
13:21
author: taikiken
1件のコメント
JavaScriptでstyleタグをheadにオンザフライ（動的）挿入するメモ。
(function(window){ var document = window.document, css = document.createElement('style') rule = document.createTextNode('p{display:none}') ; css.media = 'screen'; css.type = 'text/css'; if (css.styleSheet) { css.styleSheet.cssText = rule.nodeValue; } else { css.appendChild(rule); }; document.getElementsByTagName('head')[0].appendChild(css); }(window)); |
毎回忘れてしまうのは以下の点。
・CSSの設定をcreateTextNodeで作るところ。
・createElementで生成したstyleインスタンスにcreateTextNodeで作ったstyle定義を追加するところ。
・styleSheetオブジェクトがあればcssTextに設定。
・無ければappendChildで追加。
2012.05.16
18:10
author: taikiken
1件のコメント
今やWeb制作で「刺身に醤油でしょ」とも言わんばかりにかならずくっついてくるJavaScript、どうやって開発してますか？
やっぱりライブラリを使いますよねぇ、楽ですから。
jQueryは便利です、大活躍しています。
Dojo ToolkitやMochiKit, Ext JS, prototype.jsも同じように便利です。
JavaScript開発でめんどうなのはEventの処理だと思ってます。
クロスブラウザ対応の一番めんどうなところはライブラリを使えば何も気にせずコードを書けるのはありがたい限りです。
普段はライブラリさんたちの助けを借りて開発しているのですが、お勉強もかねてライブラリを使わずにEvent処理をするとどうなるかを試してみました。
DOMが準備できたら関数を走らせる、を練習がてらコードを書いてみました。
jQueryだったら $(document).ready(function(){}); とあっさり書けてしまいますが、どうなることやら。
続きを読む →
2012.05.15
19:28
author: taikiken
0件のコメント
画像の一部をキャプチャして書き出すの巻。
画像の書出しは以前も行いました。
使用メソッドはcanvas.toDataURLです。
CanvasElementのメソッドで画像変換が可能なのですが、一部だけを画像にするオプションは用意されていないようです。
それで、書出し用のcanvasを別に用意しそこへキャプチャした画像を表示させるようにしています。
クロップ領域を表す破線矩形はマウスに追随します。
書出し用のボタンを配置しています。
どちらもマウスアクションにより操作するのですが、前回Canvas上で表示させて苦労したので今回はHTMLElemntで作成しCanvas上にのっけています。
2012.05.14
21:34
author: taikiken
1件のコメント
Canvasでインタラクティブなことをするためにボタンを作るの巻。
できたことはできたけど、完成にはかなり遠いところにしかたどり着けませんでした。
ActionScriptのSimpleButtonのような汎用性を目指しましたが途中で挫折しました。
作るにあたって懸念していたmouseoverの処理にやはり悩まされました。
Canvas Click Demo Vol.2 ボタンを作った
画面左上の「赤い四角」がボタンです。
もっとかっこ良くしたかったのは言うまでもないのですが、これ以上コードが増えないようにということで許して下さい。
・白いところをクリックするとその地点に丸が作られます。
・ボタンをクリックするとCanvas上の丸が消えます。
続きを読む →
2012.05.10
12:00
author: taikiken
1件のコメント
OS X LionのBoot CampへWindows XPをインストール。
LionからBoot CampはWindows 7以上しかサポートしなくなりました。
それでもWindows XPをインストールしたいったらしたいの巻。
Google大先生にお聞きするとLionのBoot CampにもXPはインストールできると先人の知恵を教えてもらえるのですが、ネット上の情報と現バージョン(10.7.3)では状況が違うみたいで同じように作業できませんでした。
・OS X 10.7.3(Lion)ではBoot Campパーティションだけ作るメニューが”Boot Camp Assistant”には存在しない。
・パーティションを作るにはWindows 7のインストール・ディスクを要求される。
＊条件付き
続きを読む →
2012.05.10
12:00
author: taikiken
1件のコメント
Canvasでアニメーションの2回目。
requestAnimationFrameを使ってみるの巻。
覚えたばかりのrequestAnimationFrameを使ってのアニメーションにマウスアクションを絡める。
マウスを追っかける、例のやつ。
Flash, ActionScriptの練習問題で何回も目にしたことのある古典的アニメーションをCanvasで再現。
ActionScriptに比べてコードが長くなったのはスキルが足りない自分のせい。
続きを読む →
