Code Archive Skip to content Google About Google Privacy Terms
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく整列できてしまいます。 ↓↓↓↓↓↓↓↓↓↓ これを実現するのに必要なJavaScript コードは以下のように数行。これで実現可能です。 $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); この仕組みを使ってブログ等を表示するともっと面白いことになります。 新聞っぽくなりましたね。 ブラウザ幅を変える事でいろいろな見え方になるのも面白いです。 以下のエントリを参照してください。 jQuery Masonry ? B
ここのところ「iPhoneアプリのUIの大半(ひょっとしたらアプリすべて)をHTML+JavaScript+CSSで作ることはできないか?」に挑戦している私。 そのためにまずは部品作りからとりかかっているのだが、昨日から今日にかけて作ったのは、プログレス・バー、スライダー、トグルスイッチなどの「連続値・不連続値」を表示・入力用UIコントロールをウェブページ上で実現するためのJavaScriptライブラリ。 見た目(Look&Feel)はCSSを使って自由に指定できるように作りつつ、シンプルでありながらいろいろな場面で使い回しがきくライブラリを作りたかったので、何度もリファクタリングを繰り返してしまったが、なんとか形になってきた。 ということで、そのライブラリ(jTouchControl version 0.10)を使ったiPhone風トグルスイッチを公開。一応、Safari (4.0),
CSSHttpRequestはJavaScriptを使ったオープンソース・ソフトウェア。AjaxはWebシステムを進化させた凄い技術ではあるが、制約も色々とある。特に大きいのがクロスドメインによるデータの授受ができないという問題だろう。その問題を解決するため、JSONPをはじめとする様々な対抗技術が生み出されている。 デモ。文字表示やFlickr検索など GETリクエストの限定されるが、CSSを使ってAjaxと同じような動作を実現するというのがCSSHttpRequestだ。これは新しい視点で、なかなか面白い。CSS側の書き方も特徴的になるが、これはPHPをはじめとするサーバ出力によって自動生成すれば良い。 Ajaxで受け渡すデータを#c0、#c1といったIDを定義して、そのbackgoundプロパティでdata URIスキーマを使って受け渡す。data URI自体は柔軟なので、バイナリに
はじめに JavaScriptは簡単な言語のようでいて、実は奥が深く、初心者にとってなかなかその本質がわかりにくい言語です。ここでは、JavaScriptの言語的エッセンスを理解できるようなものをFAQ形式で書いてみました。ご意見や誤り等を指摘してもらえたら嬉しいです。 なお、JavaScriptの標準化であるECMAScriptは、今年末にEdition 5 がリリースされる予定です。このFAQは、現在のバージョンであるEdition 3をベースにしています。 ECMAScriptって何ですか? ECMAはEuropean Computer Manufacturer Association(欧州電子計算機工業会)の略で、標準化団体です。NetscapeのJavaScriptとMicrosoftのJScriptをベースに、純粋なプログラム言語部分を抽出したものをECMAで標準化したスクリプ
指の脂の表現に特に力入れた。 javascript:(function(d,s){s=d.createElement('script');s.type='text/javascript';s.src='http://www.rr.iij4u.or.jp/~kazumix/d/javascript/dragScroller.js?'+(new Date).getTime();s.charset='UTF-8';d.body.appendChild(s);})(document) 上記のコードをアドレスバーに貼り付けて実行すると、そのページがマウスのドラッグでスクロールできるようになります。 ※IEではこのはてなダイアリーを含め、一部のサイトで動作しません。とは言え今時のサイトならほとんど動きます。詳細後述。 ブラウザ対応状況(うちのPCで確認したもの) 問題無く動作するブラウザ Firefo
8月28日、Mac OSの最新版「Snow Leopard (Mac OS X 10.6)」 が発売されました(関連記事)。今回のJavaScriptラボでは、Snow Leopardに付属する「Quartz Composer」を取り上げます。 美しいモーショングラフィックを無料で作れる「Quartz Composer」 「Quartz Composerって何?」「JavaScriptとどんな関係があるの?」という方も多いでしょう。Quartz Composerは、視覚的にプログラムを作成できる開発ツールです。一般的なプログラム開発では難しいコードを書かなければなりませんが、Quartz Composerはいくつかの部品をマウス操作でつなげていくだけで、簡単にプログラムを作成できます。 中でもQuartz Composerが得意とするのは、モーショングラフィックス(映像)の作成です。Qua
先月の社員PVランキングは91番目でした。agoです。 たまに他言語開発者から「JSは何となくわかるけど、jQueryが特殊すぎてよくわからない」という声を聞きます。 個人的にjQueryを使う場合、「JSの中でjQueryを使う」と言うより、「jQueryの中でJSを使う」と考えた方が理解しやすいと思うので、今日は"jQuery言語"の書き方を紹介したいと思います。 文法 Traversing methodでインデントを下げて、.end()でインデントをあげます。 (Traversing以外のmethodはインデントを維持します) そして、末尾には開始行と同じ位置に「;」を置きます。 $('body') .find('a') .filter('.permlink') .attr('href', function () { return $(this).attr('href').repla
Update Due to copyright infringement with parts of its source code, the WireIt library has been removed from distribution. However, it is good news for WireIt and YUI developpers: the component might be adapted into a YUI widget in a close future. Subscribe to http://javascript.neyric.com/blog/ to keep in touch with the project. Eric, 6/19/08
RSAの公開鍵暗号方式でフォームのデータの暗号が行えるjQueryプラグイン「jCryption」 2009年08月10日- jCryption - JavaScript data encryption RSAの公開鍵暗号方式でフォームのデータの暗号が行えるjQueryプラグイン「jCryption」。 2048bit のRSAで暗号可能。Ajaxでのサブミットもサポート。 暗号化は既にしてあり、SSLも不要。インストール簡単という特徴があります。 ちゃんとしたプロダクトに組み込む際は、きちんとした検証が必要だと思いますが、面白い仕組みですね。 デモページで各種デモが見れます。 データを送信すると、以下のように jCryption をキーとして暗号化が行われていることがわかります。 decrypted POST で元データが取れていますね。 これはすごいです。
こんな感じです。というか、こんな感じでよいでしょうか?taizoooさん。 http://d.hatena.ne.jp/os0x/20090508/1241780936 thx!!! os0x 以下、自分のわかりやすいように書き換え中。 function 名まで入れればもっと、わかりやすくなるかな? source http://userscripts.org/scripts/review/8551 発火 ページの読み込み Greasemonkey起動(この辺は省略) AutoPagerize起動 SITEINFOの読み込み script に書き込まれている SITEINFO を試す[launchAutoPager(SITEINFO)] SITEINFO_IMPORT_URLS の SITEINFO を試す(wedata)[SITEINFO_IMPORT_URL.forEach(funcit
Magento Wizard | Lakewood Colorado Magento Web Design, E-Commerce, Online Marketing, SEO Lakewood Colorado Magento Web Design, E-Commerce, Online Marketing, SEO I am a Magento Certified Developer with over 6 years of experience building and maintaining Magento 1.x/2.x Community and Enterprise editions. With over 20 years’ experience supporting networks, computers support issues, eCommerce websites
*[hatefu:labs.yaneu.com/20090329/] blogのclient-side rendering 私は95年ごろに自分のホームページを作っていたころは、htmlを手打ちしていた。そのあと、IBMのホームページビルダーを使うようになった。いま考えてみるに、あれはあまり使い勝手の良いものではなかった。 それに比べるとブログは便利で、思いついたときに思いついたことを気軽に投稿できる。画像のアップロードは簡単だし、RSSだって勝手に配信してくれる。 これだけの仕組みを自分で構築するのはかなり大変で、いまさらホームページビルダーでもないだろうし、htmlタグの直打ちの時代でもないだろう。 大手ブログを利用にせずに、自分のサイトに簡単に記事を投稿できる仕組みはないものかと考えて、今回、やってみようと思ったのが、JavaScriptによる本文の自動整形である。 * JavaSc
こんにちは。普段からiPhoneを愛用している橋本です。 最近、「せっかくiPhone持ってるんだし、iPhone向けのアプリ作ってみようかしら?」と思い立ったのですが、iPhoneのネイティブアプリを作るには、"Objective-C"と、"cocoa Touch"というiPhone/ipodTouch向けのフレームワークを理解する必要があり、また、自分で開発したアプリを実機に入れて動かしてみるには、そこそこの費用と各種手続きが必要だったり(iPhoneエミュレータ上で動かす分には問題ないのですが…)と、何かと大変です。 「何かもっと手軽にiPhone特有の機能を活かしたアプリを作る方法はないかなぁ。。」と考え、思い立ったのがWebアプリ。Webアプリなら、今までの知識+αでアプリを作成することが出来るのではないかと。そこで、今回から数回に渡ってiPhoneとjavascriptを使って
ブログや開発者向けのWebサービスなどで、ソースコードのハイライトを行うケースはよくある。言語があらかじめ決まっている場合は良いが、言語がよくわからない場合や、JavaScriptとHTMLのように埋め込みで複数の言語が重なる場合もある。 各種言語に対応したハイライター そのような、特定の言語に依らずにソースコードをハイライト化したい場合に便利なのがこのライブラリだ。 今回紹介するオープンソース・ソフトウェアはGoogle Code Prettify、JavaScriptによるソースコードハイライターだ。 Google Code Prettifyの使い方は簡単だ。prettify.jsとprettify.cssを読み込んで、<pre class="prettyprint">または<code class="prettyprint">タグの中にコードを書き込めば良い。後はprettyPrint
jQuery 1.3が登場! jQueryはPrototype.jsと並んで最もポピュラーなJavaScriptライブラリの1つで、DOMの要素や属性に対する操作をメソッドチェーンで流れるように記述できるのが特徴だ。最近では日本語での情報も増えており、Webアプリケーションの開発で利用しているという開発者も多いのではないだろうか。 2009年1月、jQueryの最新のメジャーリリースとなる1.3がリリースされた。新たなCSSセレクタエンジンSizzleの導入やリファクタリングによる処理の高速化など、メジャーリリースに相応しい内容となっている。本稿ではjQuery 1.3での主な変更点や新機能を紹介する。 大幅な高速化を実現 jQuery 1.3は1.2系と比べ、大幅な高速化が実現されている。CSSセレクタエンジンがより高速なSizzleに置き換えられているほか、要素の追加やoffset()
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く