勢いで始めてみるNode.js Webアプリ開発（1/2） - ＠IT
特集：Windows開発者のためのNode.js入門 勢いで始めてみるNode.js Webアプリ開発 デジタルアドバンテージ 一色 政彦 2012/06/15 いまはやりのNode.jsを使い、とにかく早くWebアプリを作って、とにかく早くクラウドで公開したい！ そんな勢いだけでNode.jsプログラミングを始めてみた。実際に数時間でそれなりの機能を持つサイトが作成できたので、皆さんにその方法を紹介しよう。 ■Node.jsによるWebアプリのクラウド＆ローカル環境構築 ●Windows開発者だけど、「Node.js」って何？ 「Node.js」とは何か？ 「.js」という部分から想像が付くように、これはサーバサイドで動作するJavaScript実行環境で、そのエンジンにはGoogle Chromeと同じ「V8エンジン」が使われている。最大の特徴は、Webサイトなどで大量の同時接続を高速
【JAVA】（Javascript）ブラウザの閉じるボタンを押した時、メッセージボックスを押して、「はい」なら終了、「いいえ」な... - Yahoo!知恵袋
【JAVA】（Javascript）ブラウザの閉じるボタンを押した時、メッセージボックスを押して、「はい」なら終了、「いいえ」ならキャンセル処理を行いたい Wedブラウザの閉じるボタンが押された時、本当に終了しますか？「はい」「いいえ」のメッセージボックスを出力し、「はい」の時は、 終了。「いいえ」の時は、閉じるのイベントをキャンセルし表示画面に戻る（終了させなければいいです）。という処理を行いたいです。 ※画面には閉じるボタンを作成し、そのボタンを押下して終了できるようにしております。 下記に私が作りましたコードを貼りました。 キャンセル処理の時、リンク先に遷移しないで？とにかく終了してしまいます。 メッセージボタンの「いいえ」を押下した時は。アプリケーションを終了しないように実装できないでしょうか？？？イベントの取り消し方を教えて頂きたく。。。 ※ちなみに・・下記コードはIE8では動き
スクロール途中から位置が固定されるナビゲーションを作ってみる
ある程度スクロールすると、途中から位置が固定になるコンテンツを見かけたことはありませんか？ 今回はjQueryを使ってそれを作ります。 デモ1 デモ2 途中から位置が固定されるナビゲーションのデモ 1 & 2 ダウンロード 今回使うHTMLはこんな感じです。 <div id="header"> <h1>タイトル</h1> </div> <div id="container"> <div id="main">左カラム（メインコンテンツ）</div> <div id="sidebar"><!-- サイドバー --> <div id="nav">ここを固定する</div> </div> </div>#mainと#sidebarはfloat: leftしています。 これの#navが表示エリア上部から20pxの位置まで来たら位置を固定したいと思います。 position: fixedを使って固定する
ExtJS入門 タブパネルを閉じるときのイベント | ExtJSで楽しくRIA業務アプリ開発
タブパネルを閉じるときのイベントは少しややこしいので、簡単にまとめておきます。 以下のようなコードを使って、イベントの発火の順番をfirebugのコンソールに出力します。 要firefox + firebugです。 ・html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ExtJS名古屋勉強会 タブパネルのイベント</title> <!--Ext JS CSS--> <link rel="stylesheet" href="../js
非同期通信中に「Now Loading」アニメーションを表示する方法 - abe-tatsuya.com
jQueryを使った非同期通信（Ajax）処理中に、待機状態を示す「Now Loading」アニメーションを表示させる方法を解説します。シンプルなコードで、通信中にユーザーへ視覚的なフィードバックを提供できるため、利便性が向上します。 jQuery で非同期通信処理をしている間に「Now Loading」的なアニメーション画像を表示する、というのはよくあるパターンですが、その方法の解説です。 ローディング中の画像を表示するスクリプト 例えば、以下のような html の id="message" の内容を Ajax によって変更したい場合。 <p id="message">ここのメッセージが非同期通信後に変更されます。</p> <form method="GET" action="#"> <input type="button" value="ここをクリックでメッセージ変更" onclick
もう一度、ちゃんとJSON入門 - 檜山正幸のキマイラ飼育記 (はてなBlog)
僕自身も僕の周辺もJSONをよく使います。でも、細かい点でけっこうミスをやらかしています(苦笑)。このエントリーで、JSONを使う上で注意すべきこと／間違いやすい点をすべて列挙します。 内容 兼チェックリスト： 仕様原典さえ読めば完璧（のはずだが） 数値の前にゼロを付けてはいけない 16進数表記も禁止だよ 数値の前にプラスを付けてはいけない 小数点からはじまる数値はダメ 用語法が違うよ：プロパティとメンバー メンバー名には常に文字列を使う 空文字列""もメンバー名に使える 配列要素はキッチリと並べよう 文字列を囲むには二重引用符だけ 文字列内のエスケープが微妙に違う 仕様にないエスケープは構文エラー undefinedもNaNもありません ラッパーオブジェクトは使わないのが吉 型システムとtypeofに関する注意 最後に 仕様原典さえ読めば完璧（のはずだが） JSONは、小さくて簡単な仕様
Coda-Slider 1.1#5
eBiz Facts is reader-supported. When you buy with our links, we may earn a commission. Learn more. Welcome to my concise website slider guide. If you want to know: The pros and cons of using a slider on your website If your website already has built-in slider capability How to “roll your own” slider What happened to the original jQuery Coda Slider plugin Then you’ve come to the right place. Let’s
jQuery UIの Datepickerで日本語のカレンダーを表示する方法
（2010/07/05追記：年月選択のオプションと、その見た目の調整のCSSを追加した。） （2013/05/01変更：CSSがmin対応したので変更した。） 必要なJavaScriptとCSSは、全てGoogleがホスティングしてくれてた。 （2010/10/12追記：日本の祝日を表示するGCalendar HolidaysだけはGoogleはホスティングしていない。） サンプルコード <!DOCTYPE html> <html lang="ja"> <head> <title>Datepicker</title> <!-- jQuery UIのCSSファイルの読み込み --> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.min.cs
jQuery UIのDatepickerでカレンダーから楽々日付入力
フォーム入力で日付を扱うことあると思いますが、数字だけの割にはいろいろと制御が面倒な部分でもあります。 入力フォーマット、年・月・日の制御など、作る側としてはかなり見えない部分の仕事が増えます。 入力するユーザの立場としても、フォームがドーンとあっただけでは入力に迷いますし、こういう局面ではカレンダーなどで曜日や日にち間隔を確認しますよね。 この両者の不便さを解消する方法として、jQueryのプラグインである「jQuery UI」の１機能、「Datepicker」で解消できます。 Datepickerを使用することで、フォームへの日付入力の際、カレンダーを表示して入力補助をするインターフェースを、簡単に実装できます。 jQueryを用意するjQuery UIはjQueryのプラグインであるため、jQuery本体が必要となります。 jQuery本体の準備は以前「「CrossSlide」写真や
ページ遷移前に確認ダイアログを出す onbeforeunload - xykの日記
編集中に別のページに遷移しようとした時に確認ダイアログを出したい。 以下のように onbeforeunload イベントを使えばOK。 window.onbeforeunload = function (e) { var e = e || window.event; // For IE and Firefox prior to version 4 if (e) { e.returnValue = 'Any string'; } // For Safari return 'Any string'; }; jQueryの場合 $(window).bind('beforeunload', function(event) { return 'Any string'; }); ただし、IEの場合は以下のような遷移しないaタグでもonbeforeunloadが発生してしまう。 <a href="jav
(Spry実践)１つのページ内で複数の表示を切り替えるタブメニュー
下準備〜コーディング Adobe Labsから、Spryフレームワークをダウンロード （要Adobe ID） （注）本記事でのSpryのバージョンは1.6.1です。 Adobe Labs - Spry framework for Ajax http://labs.adobe.com/technologies/spry/ ダウンロードしたフォルダの中の、widgets >> tabbledpanel が、タブパネルのライブラリです。 ライブラリ読み込み方法 SpryTabbedPanels.html を開いてみると、<head>で２つのファイルを読み込んでいるのが分かります。 <link href="SpryTabbedPanels.css" rel="stylesheet" type="text/css" /> <script language="JavaScript" type="tex
jQuery Text Change Event を使って twitter をインクリメンタル検索するサンプルを書いた - mollifier delta blog
jQuery Text Change Eventってのを見つけた。jQuery のカスタムイベントを定義するプラグインで、テキストボックス、テキストエリアの内容が変わるたびにイベントが発生するようになる。 キー入力をイベントで処理するのってかなりめんどくさいんだけど、これで「テキストボックスに入力があるたびに何かする」みたいなことが簡単にできるようになる。 イベント一覧 具体的には以下の3つのイベントが発生するようになる。 textchange テキストの内容が変わったときに発生するイベント hastext テキストが空の状態から何か入力されたときに発生するイベント notext テキストが空でない状態から空になったときに発生するイベント 使い方はこんな感じ。 $('#inputbox').bind('textchange', function(event, previousText) {
テーブルソート、テーブル操作｜jQuery plugin｜Ajax｜PHP & JavaScript Room
テーブル、リスト、段落など要素内のデータを簡易検索するjQueryプラグイン。 指定した文字列にマッチしたデータを持つ要素だけを絞り込んで表示することができます。 オプションのパラメータで簡単にカスタマイズすることができます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="C
jQueryでTwitterの自分のつぶやきを表示する
jQueryでTwitterの自分のつぶやきを表示する すでに多くのTwitterライブラリがあるので必要があるかは微妙なところですが、jQueryを使用してTwitterの自分のタイムラインを表示してみます。 文字情報だけを取得することができれば、自由にスタイルが設定できるのでデザインとかも統一できるじゃないですか！？ 投稿日2010年07月04日 更新日2012年10月12日 ※2012.10.11現在Twitter API変更によりこの方法は使用できなくなりました。 新API（var1）に対応した方法は下記をご覧ください。 2012年10月 Twitter APIの変更によりjQueryでつぶやきが表示できなくなったので解決策 まずは読み込むべきデータの確認をしてみましょう。 下記のURIで自分のタイムラインの情報を見ることができます。[USERNAME]には自分のアカウント名に置き
ウェブサイトの使い方を目の前でアニメーションして説明するスクリプトをどんなサイトにでも埋め込める「Embedded Help System」
目の前でマウスカーソルを動かして説明すると理解してもらえるという場合に使えるのがこのjQueryのプラグインとして動作する「Embedded Help System」です。どのようなサイトにでも埋め込んで使うことが可能となっており、最大の特徴は実際のフォームやチェックボックスなどを操作する様子を目の前で見せてくれるという点。 一体何を言っているのかわからないと思いますが、これは実際に目の前でデモを見てもらうのが一番わかりやすいです。 デモは以下から。 Embedded Help System http://embedded-help.net/ デモを見るにはこの「Usage」ページにまずはアクセスします。 次に「Search database」をクリックするとこのようにしてクリックして使う順番の数字がふわっと浮かび上がります。これだけでも割とわかりやすいのですが、ここからが真価を発揮すると
AjaxZip 2.0
Kawa.netxp AjaxZip 2.0 - Ajax郵便番号→住所自動入力フォーム（CGI不要版） AjaxZip2は、昨年公開した 『ajaxな住所入力フォーム』 の新バージョンです。 郵便番号を入力すると、該当する都道府県名・住所が自動的に入力されます。 Ajaxと JSON フォーマットを利用するJavaScriptライブラリとして公開しました。 JavaScript のみで稼動するため、サーバサイドで稼動するCGIプログラムは不要です。 郵便番号→住所変換処理は全てクライアントサイドのJavaScriptで行います。 既存 HTML の住所入力フォームをたった3行書き換えるだけで利用できます。 簡単に設置できるため、プログラムに詳しくない方でも導入していただけると思います。 以下の住所入力フォームに、7桁の郵便番号を入力してみてください。 【2007/12/09 追記】 jQ
2点間の距離を計算する関数
つづいて、2点間の距離を計算する関数です。 cc_huu_tools_bp_20081024.calcDistance = function(x1,y1,x2,y2) { var a, b, d; a = x1 - x2; b = y1 - y2; d = Math.sqrt(Math.pow(a,2) + Math.pow(b,2)); return d; }; ピタゴラスの定理を利用して、距離を求めます。 ピタゴラスの定理は「直角三角形の直角を挟む2辺の2乗の和は斜辺の2乗に等しい」です。 なので、x座標の差の2乗とy座標の差の2乗を足した値のルートをとって、返します。
Twitterのブログパーツ | つぶやきをブログに表示するJavaScript:めぐみのいずみ
このブログの右側のメニューの一番下にあるような、Twitter（ツイッター）のつぶやきを表示するブログパーツです。JavaScriptのみなので様々なサーバーで使えます。 余計なものは一切なく、ツイッターのタイトル部分とそのリンク、最新のつぶやきだけを表示します。表示するつぶやきの件数やつぶやき１件あたりの文字数を指定できます。 下記をブログやホームページの埋め込みたい場所にコピー＆ペーストし、青文字の部分を書き換えて完成です。 <div id="MyTwitter"> <script type="text/javascript"><!-- var MyName = "めぐみのいずみ on Twitter"; document.getElementById("MyTwitter").innerHTML = MyName; var MyTwitterID = "Megumi_no_Izum
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Domain Details Page
Loading...