ゲームに出てきそうな円形メニュー実装jQueryプラグイン「Pretty Pie Menu」:phpspot開発日誌
Pretty Pie Menu Demo ゲームに出てきそうな円形メニュー実装jQueryプラグイン「Pretty Pie Menu」 次のような円形のメニューを実装できます。アニメーションがカッコいいので実際に見てみましょう デモページ 使い方は以下のようにオプションを渡すみたいです。画像は自分で作れるので画像を変えれば全く印象の違ったものを作れそうです 関連エントリ リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」 かなりクールなjQueryのメニュープラグインやチュートリアル集 ページスクロールでついてくるメニューを実装＆色々カスタマイズできるjQueryプラグイン「stickyFloat」 通知件数表示付きのメニュー実装jQueryプラグイン「Notification Menu」 折り畳み可能なシンプルツリーメニュー実装jQ
Node.jsのためのasync必修パターン(1): 同期パターン
node.jsはnon-blocking処理を行うため、書き手の意図しない順序で処理が実行されることがあります。それでは困ることもあるため同期をとって処理を行うパターンについて書きます。例えばA、B、C、Dという処理があり、A、B、Cの3つが終わってからDが行われることを保証したい場合の必須のパターンです。 A、B、Cという3つの処理では、それぞれDBに問い合わせを行い、Dという処理では3つのDB問い合わせの結果を使って集計の処理を行いたいような場面を考えてみます。a(); b(); c(); d();上のように普通に書くと、node.jsでは折々の状況に応じてaからdまでの処理を非同期に実行します。dが一番最初に実行されるかもしれません。困ります。そこで、A、B、Cの3つの処理が3つとも完了した後にDが実行されるようにするパターンを書きます。// sync.js var wait = f
JavaScriptでバイナリデータを扱う時の動作を理解する - prog*sig
資料的な文章なので実用的な話という感じではないです JavaScriptで画像などのバイナリデータを読み込むという目的に沿って追っていく。 XHRを使用し取得した画像データはバイナリコンテンツである。その際にJavaScriptはデフォルトで受信したデータをユニコードとして扱うため、バイナリデータに制御文字*1を表すバイト列が含まれていた際に予期せぬ動作を引き起こすことがある。そのため、overrideMimeTypeメソッド*2を使いcharsetをx-user-definedとして受信データを特別なものとして扱うように設定する。 // overrideMimeTypeを設定するプログラム var req = new XMLHttpRequest();// XHRオブジェクト req.open('GET', URL, false); // 読み込むURLと方式 req.overri
node.jsとjQueryでスクレイピングするウェブアプリの作り方
やっぱ jQuery 便利ですよ(*´・ω・)(・ω・｀*)ﾈｰ セレクタ使って jQuery でダカダカやってると、DOM とか正規表現でネチネチやるのがバカらしくなっちゃいます。 と日頃から思ってたりしてまして、サーバサイド JavaScript がメインストリームになって、jQuery でウェブアプリをコーディングできれば超ラクできるかもと期待しています。 で、先日サーバサイドJavaScriptとjQueryでスクレイピングという記事をうpったところ、やっぱ Rhino じゃなくて node.js がえーんよ(´･ω･｀)というコメントを頂きましたので、node.js と jQuery でサーバサイド JavaScript スクレイピングしてみることにしました。 今回は node.js ですので、単にスクレイピングする（コマンドラインから実行する）スクリプトだけじゃなくて、スクレイ
node.jsは普及しそうに無い
ここ一ヶ月ぐらいからJavaScriptが注目されているようだ。理由は簡単で、GoogleのJavaScriptエンジンを使ったアプリケーション・サーバーであるnode.jsの性能が高いと主張されているからだ。 地味にブームになりつつあり、Ajaxのようにウェブ開発の現場に定着するかも知れない。多数のブログで紹介がされている。現状のその特徴を振り返りつつ、node.jsが普及するかを考察してみた。 1. JavaScriptは、ブラウザ発の人気スクリプト言語 JavaScriptは、LiveScriptとして1995年にNetscape Navigatorというウェブ・ブラウザに搭載されたのが始まりで、すぐに政治的な理由でJavaScriptに改名された。1996年には、その基本的な文法がECMAScriptとして、ECMA-262とISO/IEC 16262で定義されている。言語仕様が簡
リアルタイムWebハッカソンでハンズオンしてきました - 自分の感受性くらい
ATNDはhttp://atnd.org/events/8626、ハッシュタグは#riajyuです。 会場提供はGREEさまです。いつもありがとうございます。 今回は、なんか流れでいつの間にかに僕がハンズオンの講師という立場になってました。 で、一応資料としてはnode.jsのインストールからWebSocketを使った簡単なサンプルが動かせるところまでを用意しました。前回までのエントリがそれにあたります。 資料1. node.jsとnpmのインストール http://d.hatena.ne.jp/t_43z/20101013/1286957802 資料1補足. Cygwinや仮想化なしでnode.jsをWindowsへインストール http://d.hatena.ne.jp/t_43z/20101020/1287545238 資料2 ExpressとWebSocketを使ったWebSock
ExpressとSocket.ioを使ったチャットサンプル - 自分の感受性くらい
このエントリはリアルタイムWebハッカソンのハンズオン資料その4です。 前回の続きです。それでは次に簡単なチャットアプリのコードを見てみましょう。かなりの部分（特にデザイン面）をSocket.ioのチャットサンプルをパクって参考にしています。 サーバ側であるapp.jsはこんな感じです。 var express = require('express'), io = require('socket.io'), json = JSON.stringify; var app = module.exports = express.createServer(); // Configuration app.configure(function(){ app.set('views', __dirname + '/views'); app.use(express.bodyDecoder()); app.u
Node.jsでWebSocketを試してみる - Y's note
Nodejs サーバサイドJavascript。 V8 Javascriptを利用。 シングルスレッドの非同期処理環境。 処理を待たずにcallbackを実行するイベントループ、ノンブロッキングI/Oを実装。 nodejsの設定は簡単。パッケージ化されているし、buildしてもそれほど時間がかからない。 設定 macでinstallしてみる。以下のどちらか一方を行えば設定は可能だがportのversionは0.2.0、buildの最新は0.4.8。post installは少し時間がかかる。 port install $ sudo port install nodejs $ node -v v0.2.0 make install $ fetch http://nodejs.org/dist/node-v0.4.8.tar.gz $ tar -xzf node-v0.4.8.tar.gz $
jQueryでスクロールすると表示する系いろいろ
jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration
node.js + socket.ioでキーワードにマッチしたツイートを眺めるプログラム作ったよ。（技術解説編） - 小さい頃はエラ呼吸
2012.03.18追記 以下の記事は古くなっているため、最新版はこちらを参照してください。 node.js + socket.ioでTwitterのStreaming APIを使ってみる - 大人になったら肺呼吸 はじめに 先日、node.js + socket.ioを使って、指定したキーワードに関連するツイートをTwitterから検索してきて、画面に表示していくプログラムを作ってみました。 node.js + socket.ioでキーワードにマッチしたツイートを眺めるプログラム作ったよ。 - 大人になったら肺呼吸 このエントリでは、このプログラムの作り方とdotcloudにアップロードして動かすまでの手順を書いてみたいと思います。 はじめてのNode.js -サーバーサイドJavaScriptでWebアプリを開発する-posted with amazlet at 13.05.25松島
Node.js チュートリアル | Node ビギナーズブック
本書について 本書は、Node.jsでのアプリケーション開発を始めようとする皆さんに、 ”高度な”JavaScriptについて知るべきあらゆることを解説します。 よくある”Hello World”チュートリアルの、はるか上をいくものです。 ステータス 貴方が読んでいるのは、本書のいわゆる最終版となります。 つまり本書は、間違いが見つかった場合や、 Node.jsの新バージョンにおえる変更点を反映する時のみ、改訂されます。 最終更新日は2012年2月12日です。 本書内のコードのサンプルは、Node.jsのバージョン0.6.10でテストしています。 ターゲット読者 本書は、Ruby、Python、PHP、Javaのような、少なくともひとつのオブジェクト指向言語を理解しており、 JavaScriptについてはあまり経験がなく、Node.jsについては全く経験がないという、 著者と同じようなバッ
node.js+expressを体感してみる | SDアドバイザーズ開発室から
JavaScriptの実行環境はブラウザのみだと思っていて乗り遅れてしまっているエンジニアもまだまだ多いのでないでしょうか（というか、私は乗り遅れました。。。）。 実は、最近話題に上がりつつあるのがServer-side JavaScriptで、その中でもnode.jsはよく聞くようになりました。 JavaScriptは、最近流行のScalaのように（私の周りだけ？）関数型言語もサポートしており、強力なオブジェクト指向言語です。しかし、言語自体の歴史は古いが、ブラウザで実行することを前提としていたため、ファイルIOやコンソールといった機能がなくtoy languageなんて呼ばれることもあったみたいです（未だにかな？）。 言語自体に柔軟性がある分、なんとももったいないです。 そこで、2008年ごろから活発になってきたのが、CommonJSという標準API策定の動きです。 CommonJSの
node.jsとMySQLで割と普通のデータベースウェブアプリを作ってみるチュートリアル | さくらたんどっとびーず
2011年はサーバサイド JavaScript の年！ サーバサイド JavaScript の本命は node.js！ ということで割と普通のウェブアプリケーションを node.js で作るためのチュートリアルを書いてみました。WebSocket とか新しめの話題は結構見ますが、PHP とかで普通のウェブアプリ作ってる人向けのチュートリアルとかあんま見ないような気がしたので、って感じです。 チュートリアルの内容ですが、コード量が少なめで機能的にも分かりやすそうなモノということで、短縮 URL ウェブアプリケーションを作ってみることにしました。bit.ly とか t.co とか nico.ms みたいなアレです。短縮 URL のデータは MySQL に保存します。 結構長文になっちゃったので、先に目次置いときます。 node.js のインストール npm (Node Package Mana
vim で JavaScript の syntax check をする - すぱぶろ
vim での JavaScript の構文チェックは jslint.vim を使っていたけど、重かったり、表示が崩れたりしてストレスフルだったので、 最近 Syntastic に乗り換えた。多言語の構文チェック機能があり、JavaScript の構文チェックに限らず大変便利。 Syntastic is a syntax checking plugin that runs files through external syntax checkers and displays any resulting errors to the user. This can be done on demand, or automatically as files are saved. If syntax errors are detected, the user is notified and is hap
JavaScriptでオブジェクト志向的に、MVC的に書く - 憧れ駆動開発
完全に手続き的に書くというより、すこしMVCというかMVVC的な構造に切り分けてかいたらいいのではという内容。チラ裏に移動させた
サーバサイドJavaScriptの本命「node.js」の基礎知識
3/4補足 本稿を見ていただいた皆さん、はてなブックマークなどでコメントいただき、ありがとうございます。話題のNode.jsということもあり、はてなブックマークも1000ユーザーを超えました。私の力不足もあり、いろいろな方からご指摘をいただいておりますので、Nodeのインストール方法については、近日中に次回記事で補足・訂正させていただきたいと思います。ご指摘ありがとうございます。非常に勉強になります。 Node.js 0.4をインストールしてみよう 本稿では、Ubuntu 10.10に記事執筆時のNode.js 最新版（v0.4.0）をインストールします。 以下のコマンドをターミナルから実行し、Node.jsのソースコードをダウンロードします。
連載インデックス「Node.jsでサーバサイドJavaScript開発入門」 - ＠IT
連載インデックス 「Node.jsでサーバサイドJavaScript開発入門」 いま注目の「サーバサイドJavaScript」の実装の本命として話題を集める「Node.js」。Node.jsとは何かの概要からインストール、実践的な使い方まで解説する連載 サーバサイドJavaScriptの本命「Node.js」の基礎知識 Node.jsでサーバサイドJavaScript開発入門（1） いま注目のNode.jsの概要からインストール方法、Hello World!!の仕方、7つの便利なパッケージ、利用事例まで解説する
Node.js入門
1. Node.js 入門 2011 年 4 月 16 日 森 俊夫 @ 徳島 forest1040@gmail.com http://d.hatena.ne.jp/forest1040/ 1 2. 自己紹介 id:forest1040 です。 徳島で、フリーランスをやってます。 Web 系エンジニアです。最近は、 Java EE(JBoss Seam) と Ruby をよく使っています。 １年前に息子が生まれ、イクメン中です。 Node.js on Android をやってます。 2 3. アジェンダ 基礎編 Node.js とは 非同期 I/O とイベントループ Node.js のアーキテクチャ 実践編 インストール デバッグ環境 Node.js を使ったリアルタイム通信 3
見た目がクールなグラフ描画用jQueryプラグイン「Morris.js」:phpspot開発日誌
Morris.js 見た目がクールなグラフ描画用jQueryプラグイン「Morris.js」。 マウス位置に応じて情報を変えるなど、GoogleAnalytics風のインタラクティブなグラフが描画できます。 実際には次のようなグラフが描画できます。IE6+でも動くということで、そこら辺の心配も無しです サンプルコードも載っていたりするので簡単に使えそうです グラフの種類は線グラフのみですが、多機能すぎて馬鹿でかいよりもシンプルなのが逆にいいかもしれませんね。 関連エントリ HTML5で綺麗でインタラクティブなグラフが描けるライブラリ「Flotr2」 様々な時系列グラフを描画できるJavaScriptライブラリ「Rickshaw」 様々なインタラクティブ要素のあるグラフが描画できるJSライブラリ「Elycharts」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IBM Developer
