カテゴリー別アーカイブ: javascript

サイト訪問者がしばらく何もしてなかったり別のウィンドウに移ってしばらくした場合、 そのタイミングを知りたいケースがあります。 そんなライブラリを探してみたのですが、調度良いのがなかったので作りました。 jQueryを前提にしていますが、短いコードなので簡単に依存を切れると思います。

jQuery.supportを使ってIE7以下を判定するとき、 IE6,7でfalse,IE8以上でtrueを返すjQuery.support.styleを使っていたのですが jQuery1.6になってからこれがIE8でfalseを返すようになってしまいました。 jQuery1.6のjQuery.supportのプロパティの中でIE6,7でfalse,IE8以上でtrueを返すのは jQuery.support.tbody jQuery.support.hrefNormalized の二つです。 jQueryのバージョンを上げるときなど気をつけましょう。 jQuery1.6以前 IE6 IE7 IE8 $.support.style false false true $.support.tbody false false true $.support.hrefNormalized false false true ↓ jQuery1.6.2 IE6 IE7 IE8 $.support.style false false false $.support.tbody false false true $.support.hrefNormalized false false … 続きを読む →

Google Feed APIを使いましょう。 まずAPI-Keyを取ってきて、以下のサンプルを参考に組み立ててください。 下のサンプルでは、idが”feed”のHTML要素の中にRSS5件のolリストを作ります。 下のコードのループの中の”entry”のプロパティには以下のようなものがあります。 entry.title : 記事のタイトル entry.link : 記事本体のURL entry.content : HTMLを含む記事 entry.contentSnippet : 120文字未満の抜粋。HTMLを含まない。 entry.publishedDate : 記事の公開日時。new Date(entry.publishedDate)でパースできる。 その他のプロパティについてはリファレンスをご覧ください。 サンプルコード <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="https://www.google.com/jsapi?key=%API-KEY%"></script> <script type="text/javascript"> var feed_url = 'http://blog.ville.jp/feed'; var feed_num = 5; … 続きを読む →

jQuery.css()を使うと、特定要素に現在当たっているスタイルを取得することができます。 そこで、フォントサイズを探ろうとして、 var fontsize = $(‘#target’).css(‘font-size’); としてやるとDOMの構造やブラウザによってばらつきが出てしまいます。 実際の大きさよりもはるかに大きい値が返ることもあります。 なんとかならないかと思案したところ、簡単で計算量も少ない方法を思いつきました。 font-size:1em, line-height:1 の要素をそこに挿入して、要素の高さを計測するという方法です。 コードは以下のようになります。 function getFontSize(target){ var div = $(‘<div style="display:none;font-size:1em;margin:0;padding:0;height:auto;line-height:1;border:0;">&nbsp;</div>’); var size = div.appendTo(target).height(); div.remove(); return size; } display:none;で挿入して、最後にremove()しているので見た目を汚しません。

Windowsを使ってるプログラマーなら、ちょっとした作業をプログラムにやらせたいと思うことがよくあると思います。 WindowsにはJScriptやVBAScriptで扱えるシェルっぽいものとしてWindows Script Host(WSH)が用意されていますが、なぜかあまり使われていない印象があります。WSHは私も使ったことがありますが、目玉商品がファイルシステムにアクセスできるオブジェクトくらいでなんとなく地味なのです。 そこで、今回はもっと使われていないDMonkeyを紹介します。 DMonkeyとは SFjpの公式をみると「Delphiへの組み込みを目的としたECMAScriptエンジン」と書かれています。WEBプログラマーに解りやすく一言で説明するなら、javascriptで便利に使えるオブジェクトがたくさん詰まったものです。 例えばHTTPオブジェクトを使えば一行でHTMLを取ってくることができます。 var html = (new HTTP()).get(‘http://ville.jp’); 便利なオブジェクト群の他にもClassが使えたり、別のスクリプトをインポートできたり、GUIをつくることもできますので、がっつり作り込むことも可能です。 ※ここまで散々javascriptと書いてきましたがDMonkeyは正確にはECMAScriptのサブセットです。

こんにちは。中川です。 先日行われたカヤックさんとクックパッドさん主催の「技術者交流会 ～おいしいソースのつくり方～ 」のライトニングトークで発表させていただきました。 たくさんの技術者の方と交流でき、発表も聞けて料理もおいしく、非常に充実した時間を過ごせました。 関係者の皆様、このような機会を設けていただきありがとうございました。 さて、当日はHTML5のcanvasと、ドロネー三角形分割という技術を使って写真をポリゴンっぽくするデモを発表しました。 特徴点を手で打っておけば後は自動で面を生成します。 プレゼン資料： 　http://seeds.ville.jp/electriccafe/slides/ デモ： ※Firefox3.0.9、chrome2.0β でのみ動作を確認しています。 　 IEやSafari、chrome1.0では動きません。 　1)ドロネー分割 　http://seeds.ville.jp/electriccafe/demo/1/ 　2)擬似ポリゴン 　http://seeds.ville.jp/electriccafe/demo/2/ 補足説明 資料が簡素なので簡単に補足します。 デモの目標： 　実写の写真をポリゴンっぽくする。 方針： 　(1)特徴点は人間が打つが、あとはプログラムで頑張る。 　(2)三角ポリゴンへの分割はドロネー分割を使う。 　(3)全ての三角ポリゴンを重心の位置の色で塗りつぶす。 いろいろと改善の余地はありますが、書いたコードは300行程度の本当に小さなプログラムです。 ライセンスはNYSLで公開しますので好きなように使ってみてください。

こんにちは。中川です。 最近Javascriptが流行っているようで、関連する記事やコードを見かける機会が増えました。 最近になって興味を持ち始めた方、急に仕事でやるハメになった方、結構多いのではないでしょうか。 Javascriptは書式こそC言語やJavaに似ていて馴染みやすいように見えますが、中身はかなり違ってます。 はじめてJavascript特有の書き方に触れたときに戸惑ったことがある方も多いと思います。 私が他人のコードを見ていて一番最初に「なんだこれは？」と思ったのは、あるブックマークレットのコードを見たときでした。 どんなコードだったかは忘れましたが、書式はこうでした。 javascript:(function(){/* statements */})(); …[1] 最後の()はなんだろうか？ 関数は function f(x){/* statements */}; …[2] と定義するのではなかったか？ 定義した後に f(2); …[3] のように書いてコールするのではないのか？ 関数の中身は分かっても、なぜこれで動くのかが理解できませんでした。 そしてなぜこんな分かりにくい書き方をするのか。 この奇怪？な書き方には理由があります。 謎を紐解いていきましょう。