HTML5で作るルービックキューブがすごい！「Tutorial: Rubik’s cube with HTML5 (CSS3 + JavaScript)」
HTML5で作るルービックキューブがすごい！「Tutorial: Rubik’s cube with HTML5 (CSS3 + JavaScript)」 HTML5という言葉が世に出てから、暫くたって多くのプロジェクトが発信されてきましたが、今日紹介するのはHTML5+CSS3+javascriptで作るルービックキューブ「Tutorial: Rubik’s cube with HTML5 (CSS3 + JavaScript)」です。 こちらはただ単にキューブを作って描画するだけではなく、ボタンやスマートフォン上でのフリック、マウスなど様々な方法でルービックキューブが遊べるようになるというものになっています。 詳しくは以下 原文には制作過程が順を追って公開されており、解説も英語にはなりますが、ソースコードともに詳しく記載されています。 WEB制作に携わっている人には面白いチュートリアル
Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8
Enhancing IE's selector engine Selectivizr adds support for 19 CSS3 pseudo-classes, 2 pseudo-elements and every attribute selector to older versions of IE. It can also fix a few of the browsers native selector implementations. JavaScript-knowledge: none Selectivizr works automatically so you don't need any JavaScript knowledge to use it — you won't even have to modify your style sheets. Just start
ページの目次ナビゲーションを自動で作ってくれるjQueryプラグイン「AutoAnchors」:phpspot開発日誌
AutoAnchors jQuery Plugin ページの目次ナビゲーションを自動で作ってくれるjQueryプラグイン「AutoAnchors」 見出しに<h3>なんかを使っていたとして、このプラグインを初期化すると次のような目次があらわれてクリックすれば指定の場所に移動できるという物が作れます。 h3で記事を書いておいてとりあえず後で見返してナビゲーションを作るなんていう作業をしたことがありますが、自動でやることで文書の変更にも対応できますね。 次のように、h3とか好きなタグは自分で選ぶことが出来ます。 ナンバリングもやってくれちゃいます。 関連エントリ ゴージャスなドロップシャドウをクロスブラウザで実現できるjQueryプラグイン「pShadow」 Twitter OAuth認証をポップアップで行うjQueryプラグイン ファンシーなデザインのカウントダウンタイマー実装jQueryプ
Closure Library を使うべき 10 の理由 - WebOS Goodies
WebOS Goodies へようこそ！ WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 先週 Closure Library で構築したドローウィジェット Closure Draw を公開しましたが、はてぶ数などを見る限りさほど多くの反響はなかったようです。まあ、機能が中途半端だったり作りが甘かったりというところが大きいのは間違いありませんが、 Closure Library 自体がまだメジャーではないのもあるのかな、とも思います。実際、ぐぐってもフ
CSSファイルやJavaScriptファイルを読み込むときの末尾にあるクエリー文字列は何のためにあるか
あちこちのウェブサイトのHTMLソースを見ると、CSSファイルやJSファイルを読み込むlink要素やscript要素のファイル名の末尾に「?xxx=123」のような、いわゆるクエリーがついているのを頻繁にみかけます。 例えばWordPressでjqueryを読み込んだときなど、 <script src="http://user-domian/wp-includes/js/jquery/jquery.js?ver=1.6.1"></script> と、jQueryのバージョン番号を示すクエリー文字列がついています。CSSファイルやJavaScriptファイルはCGIではないので、このクエリーを解釈して使っている訳ではありません。 知っている人は「な～んだ」って感じだと思いますが、この「?ver=1.6.1」の役割について紹介します。 １．キャッシュを制御する ページ読み込みと同時に読み込まれ
JavaScriptクィックスタート - builder by ZDNet Japan
Ajaxの登場は、JavaScriptと言う言語にとって凄まじい変革をもたらしました。 それまでは、Webページに多少の動きを持たせて利便性を向上する、といった程度でしか認知されていなかったJavaScriptですが、今やそうではありません。次のような理由から、ブラウザ上で動作するリッチクライアントを作成するための、最も一般的な言語として捉えられています。 主要なブラウザのほぼ全てが標準でサポートし、しかも最初から有効になっている 厳しいセキュリティの下で動作するため、ユーザにとって安全 簡潔で柔軟な言語仕様により、短いコードで多くを実現できるうえ、可読性も高い フレームワークの整備による生産性の劇的な向上 非常に長い歴史を持つ技術であり、開発者の人口が非常に多い しかし、近年におけるJavaScriptの変化は目覚ましいものがあります。筆者自身のJavaScriptコードを見ても、この数
A要素は文字列コンテキストではhrefプロパティ値で評価される - rikubaのブログ
window.openの第一引数にA要素（HTMLAnchorElement）をそのまま渡しているコードを見て、動かないんじゃないかと思って試してみると問題なく動いて驚いた。どうやらHTMLAnchorElementは文字列コンテキストではhrefプロパティの値として評価される、つまりtoStringがreturn this.href;のようだ。 この挙動はECMAScript Language Bindingに書かれていた*1。 HTMLAnchorElement objects in String expressions are evaluated as HTMLAnchorElement.href. 例えば、ページにある全てのリンクのリンク先URLを一覧表示するブックマークレットは、以下のようにシンプルに書ける（良い例が思いつかない）。 javascript:alert(Array.
ウェブサイト作成に役立つ35のwebサービス｜Webpark
ウェブサイトを作成する際に個人的に使っているWebサービスを紹介します。幅広く35個紹介しますので、新しい発見があれば幸いです。 フォント関係 wordmark.it パソコンに入っているフォントを一覧で見ることができます。フォントサイズも調整できます。 日本語フォント252種類を表示確認できます！フォントを探すならfonthack.jp。 日本語フォントの表示が確認できます。現在252種類あります。 PXtoEM.com: PX to EM conversion made simple. ベースのサイズ（px）を決めると、em, pt, %の値が表示されます。 カラー関連 ウェブ配色ツール Ver2.0 配色ツールは色々ありますが、日本語ですし、あまり考えなくても感覚的に使えるので楽しいです。 Color Scheme Designer 3 カラーパレットジェネレーターです。海外サイトで
jQuery言語入門 : tech.kayac.com - KAYAC engineers' blog
先月の社員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
ppBlog official
こんばんは、martinです。久しぶりの更新です。寒い日が続きなかなか暖かくなりませんが、春はすぐそこだと思います。今は横浜に住んでいますが、余震はここ１－２日はちょっと落ち着いてきた感じがします（油断は出来ませんが）。原発問題がはやく解決されること、そして被災地の一日でも早い復興をお祈りしつつ。 さてマイナーアップデートです。フォーラムの方で、記事の更新にやたらと時間がかかるというご報告があり、調べてみると、カテゴリー数が多いとその傾向が顕著になることが判明しました。記事投稿時の処理でカテゴリー毎の記事数を更新するというのがあるのですが、その処理がボトルネックになっていました。これを解決するために、category_id.ini.phpという定義ファイルを新たにownerディレクトリに作成するようにして、そこからカテゴリー別の記事情報を取得するようにしました。 utils_admin.p
HTML5の新要素をjQueryでappendとかするとIEでバグる件 - Webtech Walker
jQueryでsectionとかarticleとかをappendしたときにstyleが反映されなかったという話しを聞いたので調べた＆検証してみたメモ。 デモつくった 調べてみたところ、定義されていない要素をinnerHTMLしてappendChildすると、以下の例の場合IE8以下では開始タグ、テキストノード、終了タグの3つの要素として追加されるとのこと。（html5shivは読み込んでます） var div = document.createElement('div'); div.innerHTML = '<section>section</section>'; document.getElementById('box').appendChild(div); 以下のようにcreateElementすればいける。 var div = document.createElement('div'
HTML5.jsの中身を見てみよう
HTML5.jsって中でなにやってるの？ 自己紹介 かみやん (Twitter@kamiyam) システム開発会社 ほとんどWebのシステム Java・C# 最近はクライントサイド(HTML5・Javascript)の勉強をしてます。 HTML5.jsって何？ IE6/7/8でHTML5を使いたい時に便利なjavascriptライブラリ html5shiv - Google Code http://html5shiv.googlecode.com/svn/trunk/html5.js 使い方 HTML5.jsを読み込む IE9以前のIE6/7/8に適用させる <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"</script> <![endif]--> 使い方 cssを定義する
Google Libraries API - Developer's Guide - Google Libraries API - Google Code
Google Libraries API - Developer's Guide The Google Libraries API is a content distribution network and loading architecture for the most popular, open-source JavaScript libraries. Using the google.load() method gives your application high speed and global access to a growing list of the most popular, open-source JavaScript libraries. You can also use <script> tags to include the libraries. Table
WEBのお勉強とその他趣味的な感じで
警察から電話が来ました。 久しぶりの更新で、こんなタイトルですいません。 正確には、警察からではく、県警から委託を受けた企業からでした。 内容は、 「県警から、委託を受けて、電話による特殊詐欺撲滅のための・・・」 というような内容でした。 そのあと、お時間２～３分よろしいでしょうか？ ときました。 よく電話が来るのが、 「○○会社（業界大手）の特約店の▲▲（聞いたことがない会社）です。 電気代がお得になる・・・・」 とか 「NTTの特約店の××（聞いたことがない会社）です。 お得になる、フレッツ光の・・・」 と、同じパターンだと思い 明らかに怪しいと感じたので 「忙しいので、駄目です。」 と断ってしまいました。 通常ですと、それでもと、かなりしつこく来るのですが、 あっさりとあきらめてくれました。 気になったので早速、県警に電話しました。 しばらくコールしたら、忙しそうな感じで電話に出られ
JavaScript/DOM » JavaScript小技集 » ホバーウィンドウ | PHP & JavaScript Room
PHP、JavaScript、CSS、Webページ埋め込みによる音声・動画配信方法など、実用的なプログラミング・テクニックを解説ホバーウィンドウ ホバーウィンドウは、Webページが完全に読込完了時にスタイルシートで隠していた要素をページの最上部に、JavaScriptを使って 表示する擬似ウィンドウのことです。別名、スクロールウィンドウ、ドロップインウィンドウとも呼ばれています。 ホバーウィンドウは、ポップアップウィンドウと違い、別ウィンドウを立ち上げないため、 ブラウザのポップアップブロックに引っかかりません。 ユーザーがサイトにアクセスして際に、ホバーウィンドウを表示してメルマガ登録を促したり、広告を表示したり、様々な使い道があります。 ホバーウィンドウ表示のスクリプトは、以下のサイトから無料で入手できます。 参照元：Dyanmic Drive DHTML Scripts
Twitterのバッジ(Go2web20.net製)をサイトに貼っているサイト運営者の方々へ。 - WEB人
Twitterのバッジ(Go2web20.net製)をサイトに貼っているサイト運営者の方々へ。 公開：2009年12月 4日 02:33, 更新：2009年12月 4日 02:37 トラックバック(0) コメント(0) Twitterのバッジが原因でブラウザが落ちます。 Twitter "Follow" Badge for your site / blog 上記URLで配布しているTwitterバッジに含まれるJavaScriptが原因で、IE(Internet Explorer)のVer.7でのサイト閲覧時に、ブラウザごと強制終了で落ちる現象が起こっていました。IE6, IE8, Firefox3.5, Chrome4, Safari4(いずれもWindows版)については、閲覧に問題はありませんでした。 このTwitterバッジですが、他のサイトでも使っているところをよく見かけるので
ppBlog official
こんばんは、martinです。久しぶりの更新です。寒い日が続きなかなか暖かくなりませんが、春はすぐそこだと思います。今は横浜に住んでいますが、余震はここ１－２日はちょっと落ち着いてきた感じがします（油断は出来ませんが）。原発問題がはやく解決されること、そして被災地の一日でも早い復興をお祈りしつつ。 さてマイナーアップデートです。フォーラムの方で、記事の更新にやたらと時間がかかるというご報告があり、調べてみると、カテゴリー数が多いとその傾向が顕著になることが判明しました。記事投稿時の処理でカテゴリー毎の記事数を更新するというのがあるのですが、その処理がボトルネックになっていました。これを解決するために、category_id.ini.phpという定義ファイルを新たにownerディレクトリに作成するようにして、そこからカテゴリー別の記事情報を取得するようにしました。 utils_admin.p
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery.getとjQuery.getScriptの違い - maeshimaの日記