クリックすると、広がる輪っか 「ちゃんとクリックできたかな？」と思う瞬間を助けたり 「あ、なんか面白い」と思って頂いたり 些細なところに目を向けることが好き DEMO / ダウンロード ライセンスフリーですので、ご自由にお使いください。 ※モダンブラウザのみ対応しています。
クリックすると、広がる輪っか 「ちゃんとクリックできたかな？」と思う瞬間を助けたり 「あ、なんか面白い」と思って頂いたり 些細なところに目を向けることが好き DEMO / ダウンロード ライセンスフリーですので、ご自由にお使いください。 ※モダンブラウザのみ対応しています。
こんにちは。最近、布団から出られません。井畑です。 今回はnejimaki-boxさんでご紹介されていた、jQuery「pointer.js」がかわいかったのでクリエイティブメモメモにも実装させていただきました。やったことを一応備忘録として残しておきます。 ※モダンブラウザのみ対応ですので、ご了承ください。対応していないものだと、輪っかが四角だったり、出なかったりします。
![[jQuery]クリックすると、ほわんと広がる輪っか。pointer.jsを実装してみた！](https://cdn-ak-scissors.b.st-hatena.com/image/square/e46b5f8e286a23d74a322f8f1b49359ca1658b7b/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fcreativememomemo.com%2Fwp00%2Fwp-content%2Fuploads%2F2012%2F02%2Fgaga.jpg)
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
HTML5とJavaScriptによるインタラクティブなWebアプリケーションの開発が注目される中、ゲーム分野では数多くのHTML5 JavaScriptゲームエンジン（ゲーム開発用のフレームワーク）が登場している。JavaScriptのライブラリーや情報をまとめているJSwikiによると、その数は70以上に上り、開発者はどのゲームエンジンを選べばいいのか判断が難しい状況だ。 本記事では、数多くあるJavaScriptゲームエンジンの中から、筆者がおすすめするライブラリーを紹介しよう。紹介するゲームエンジンはすべてMIT Licenseで提供されているので、個人はもちろん、商用でも利用できる。 Cocos2D JavaScript (http://cocos2d-javascript.org/) Crafty (http://craftyjs.com/) enchant.js (http:
はいどうも～。 雪の日は電車遅延でテンションが下がりがちなエンジニアの吉田です。 あたくし、通勤時間が通常だとだいたい1時間45分なのですが、 電車遅延があると、だいたい2時間を越える程度の通勤時間となり、 会社に到着した時点で、既にぐったりしていたり、していなかったり。 そんな中、家から最寄駅に着いて最初にげんなりするキッカケとなる のが、駅にある電光掲示板で誇らしげにチラついていらっしゃる 「【横須賀線 遅延】」というオレンジ色の掲示だったりします。 特に、家から駅までダッシュしたあとにお目にかかれたときなんかは、 凄まじい威力を発揮して頂けますね。洗練された脱力感を体験できる。 今回は、この電光掲示板を見た時にテンションが下がる気分を是非 共有したいと思い、HTML5のCanvasを使って表現してみます。 表現してみた結果、こんな感じのものが出来上がりました。 ※Windows7 +
オブジェクトの移動や拡大・縮小、不透明度の変更、CSS3のシャドウや角丸などを滑らかアニメーションで簡単に実装できるjQueryのプラグインを紹介します。 アニメーションのエフェクトは、31種類！ JSTween [ad#ad-2] JSTweenの特徴 JSTweenのデモ JSTweenの使い方 JSTweenの特徴 軽快に動作し、パフォーマンスに優れています。 アニメーションを使った複雑なインタラクションが実装できます。 フレームレートを使ったスムーズなアニメーション。 実装はjQueryベースで簡単。 簡単に始められ、シンプルに実行できます。 JSTweenのデモ
JQuery Narrative Select Plugin by gdakram From If this is , then you are . Date: To If this is , then you are . Date: Why, When Make your drop-down list look uniform cross-platform. Enables you to include a drop-down list as part of a 'narrative' form, where your user input fields look uniform. How <!-- CSS --> <style type="text/css"> @import url("/path/to/jquery.narrativeselect/jquery.narrativese
2008-05-07 カテゴリ: 雑記 タグ: JavaScript トラックバック ISO 僕も ISO 8601 形式は大好きなんだけど、 YYYY-MM-DDTHH:MM:SS 形式は思いのほか通用しないので気をつけましょう。 日付と時刻の正しい表現方法 - Web屋のネタ帳 日付と時刻を両方表現したい場合は 2008-05-16T11:25:30+09:00 つまり日付と時刻をTでつなげる。 これが世界的スタンダードとしてISO8601とRFC3339に定められた日付と時刻の表現方法。有名どころの言語やらデータベースその他ミドルウェアはすべてこれに沿った表記を解釈し入出力できるようになっている。 JavaScript とりあえず、JavaScriptではほとんど通用しません。 var timestamp = Date.parse('2008-05-16T11:25:30+09:00
capturejsはnode.jsを使ったWebサイトのスクリーンショット取得ツールです。JavaScriptを使って一部の変更ができます。 Webサイトのキャプチャツールは人気がありますが、capturejsはとても面白いツールです。まるごと画像化するだけでなく、DOMセレクタを使ったりJavaScriptを使ってコンテンツを改変した上で画像化できます。 まずセレクタを使った例です。 ヘッダー部分だけ画像化できています。 次はロゴをhiddenにした場合。確かに画像が消えています。 オプションとしてユーザエージェントを指定したり、Cookieファイルの指定、タイムアウト時間の指定、ViewPortの設定もできるようになっています。コンテンツの一部だけを画像化したいといったニーズにぴったりなソフトウェアです。 capturejsはnode.js/JavaScript製、MIT Licens
NVD3.js :: re-usable charts for d3.js 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 d3.jsという以前紹介したライブラリをベースに利用しているみたい。 グラフ描画のライブラリは色々ありますが、こちらのライブラリで描画するグラフのデザインもなかなかいい感じですね マウスとのインタラクティブなグラフ実装が可能で拡張も容易みたい サンプルページにはソースがついているので参考に組めば抵抗なくグラフが描けそうです 関連エントリ 見た目がクールなグラフ描画用jQueryプラグイン「Morris.js」 HTML5で綺麗でインタラクティブなグラフが描けるライブラリ「Flotr2」 様々な時系列グラフを描画できるJavaScriptライブラリ「Rickshaw」 クールなドアノブ風の％グラフを描画できるjQuery Knob
指定したパターンによるDate->String、String->Dateの変換を行うライブラリです。 ソース Ver 1.1 : 2008/04/02 dateformat.js サンプル 「パターン」を入力し、「フォーマット」ボタンを押下すると、現在時刻を指定パターンによる文字列に変換します。 「パース」ボタンを押下すると、「文字列」を「パターン」に沿ってパースし、Dateオブジェクトに変換します。 使い方 本ライブラリを読み込んだ状態で、パターンを指定してDateFormatクラスを生成し、format(Date->String)/parse(String->Date)関数により変換を行います。 var dateFormat = new DateFormat("yyyy/MM/dd HH:mm:ss SSS"); var str = dateFormat.format(new Date
jQuery Shadow Plugin ボックス要素に色んなタイプの影を簡単に付けられるjQueryプラグイン「jQuery Shadow」。 次のようにボックス要素に対して影を自由に付けられるプラグインです。$(elem).shadow(option); という風にするだけなので使い方は簡単ですね 単なるボックス要素があっというまにクールになりますね 関連エントリ selectボックスを超カッコよくするjQueryプラグイン「Chosen」 ブラウザ上でサインを書けるjQueryプラグイン「jSignature」 JSでのタイマー処理がもっと簡単になるjQueryプラグイン「timing」 スマホ用サイトに使えそうなドロップダウン実装jQueryプラグイン「DropKick」 ページめくりを実現するためのjQueryプラグイン集
はじめに 最近話題のimpress.js。とてもかっこいいプレゼンができそうなので、試しにimpress.jsのプレゼン資料を日本語化してみました。 本家のimpress.js impress.js | presentation tool based on the power of CSS3 transforms and transitions in modern browsers | by Bartek Szopka @bartaz 日本語化したimpress.jsのプレゼン資料 impress.js | モダンブラウザのCSS3によってダイナミックな変形・遷移を実現するプレゼンテーションツール | by Bartek Szopka @bartaz SafariとGoogle Chromeで動きます。日本語訳はわりとテキトーです。ニュアンスだけ感じ取ってください。 impress.jsの
cvpaper.challenge の メタサーベイ発表スライドです。 cvpaper.challengeはコンピュータビジョン分野の今を映し、トレンドを創り出す挑戦です。論文サマリ作成・アイディア考案・議論・実装・論文投稿に取り組み、凡ゆる知識を共有します。 http://xpaperchallenge.org/cv/
Apr 13, 2011 今までNode.jsの管理はnaveを使ってきたんですが、今日たまたま気が向いたのでnvmを使ってみたところ、こちらのほうがよい感じだったので乗り換えることに。 nvmがnaveよりもよいなと思った理由は、Node.jsをインストールすると自動的にnpmの最新版も自動でインストールしてくれるところと、変にシェルを多重起動しないところにあります。naveだとuseコマンドの実行時にシェルが再実行されて環境変数が2度読み込まれたりするので、なんだか気持ち悪いんですよね。 というわけで、nvmを使ってセットアップする方法をメモ。まずはGitHubからnvmを取得します。僕の場合はnaveを使っている時から、ホームディレクトリに.nodeディレクトリを作って、そこにインストールするようにしています。 $ git clone git://github.com/creatio
Thank You! Open Feedback Publishing System (OFPS) is now retired. Thank you to the authors and commenters who participated in the program. OFPS was an O'Reilly experiment that demonstrated the benefits of bridging the gap between private manuscripts and public blogs. Readers gained access to in-progress O'Reilly manuscripts and were able to communicate suggestions with the authors, follow others'
HTML5 Canvasで作った「シンプルペイント」。ペンの色とサイズが選べ、保存もできる。画像クリックでサンプルページを表示します（Firefox 3／Opera 10／Safari 4で表示可能） HTML5の新機能で特に注目を集めているのが、Flashなどのプラグインを使わずにWebブラウザー上でグラフィックを描画できる「Canvas」です。Canvasは、すでにInternet Explorer（IE）をのぞく、ほとんどのブラウザーに実装されていますし、マイクロソフトは現在開発を進めている「IE9」でHTML5を積極的にサポートするとしていますから、IE9にCanvasが実装される可能性は高そうです（ただし、現在公開されているPlatform Preview版ではCanvasは実装されていません）。すべての主要ブラウザーでCanvasが利用できるようになれば、画像処理を伴うWebア
HTML5のcanvasを使ったお絵かきツールを勉強がてら作ってみました。下記の画像リンクをクリックすればサンプルページにジャンプします。 サンプル 以下、サンプルのHTMLとJavaScript（jQuery）を使って、canvasのお絵かきツールについて解説します。 探しきれてないだけと思いますが、お絵かきツールのjQueryでの実装が見つからなかったので、自力で書いてみました。いろいろ間違ってたらすいません。 １．HTML サンプルのHTMLは次のようになっています。 <canvas width="500" height="400">お使いのブラウザはHTML5のCanvas要素に対応していません。</canvas> <ul> <li style="background-color:#000"></li> <li style="background-color:#f00"></li>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
