javascript

A collection of 10 posts

grunt

grunt 管理下で Express(Node.js)を開発できるgrunt-init-express を公開しました

gruntで Expressを使った開発を行う環境を生成するgrunt-initテンプレートを公開しました。 grunt-init-express https://github.com/kamiyam/grunt-init-express 概要 grunt を使うとSass、LESSのコンパイルやWebSocketを使ったLiveReload、ファイルの圧縮など様々なことがことができますが、grunt-init コマンドを使うことでscaffoldingな構成を簡単に生成することができます。 すでに提供されているテンプレートを使用することもできますが、今回のようにベースとなるテンプレートを自分で作成することもできます。 公開されている grunt-init の 他のテンプレートについては過去記事を参照してください。 grunt-init-express はこんな機能があります。 gruntからNode.jsを実行 Node.jsをgruntのプロセスで管理するため gruntコマンドを使用します。Node.jsはsupervisorコマンドを使用しています。 SassとCoffeeScriptのコンパイル SassからCSSへ、CoffeeScriptからJavaScriptへ自動でコンパイルします。 HTML、CSS、JavaScript、View(ejs/jade)ファイルのファイル変更監視 public(private)フォルダのHTML、CSS、

  • kamiyam
    kamiyam
javascript

jQuery公式PluginRegistryに自作プラグインjqKeycodeBinderを登録したよ

概要 2013年1月17日、jQuery公式プラグイン・レジストリが公開されました。 The jQuery Plugin Registry http://plugins.jquery.com/ いままでの jQuery プラグインは、そのソースコード・実行ファイルが 作成者自身のサイトや Google Code / github などいろんな場所に置いてありました。 良さげな jQueryプラグインを見つけたその場でダウンロード出来ればいいのですが、時間が経って 「あのプラグインを紹介していたサイトはどこだっけ?」 みたいな話になることが多く、探すのも一苦労でした(よね?) jQuery公式でプラグインのインデックスを作って検索できるようにしよう。というのがこのサイトの目的だと思います。 実際のプラグイン本体はjQueryのサイトに配置せず、github に登録された Repository から指定されたファイルの内容を読み取り表示する。 というスタイルを取っています。 プラグインの開発者はプラグインを github の Repository にコミットし、任意のバージョンを指定するタグ(git

  • kamiyam
    kamiyam
grunt

Yeomanを使ってSass/LESSをもっと簡単スピーディに 〜導入編〜

概要 解説編でも書きましたが、Yeomanはビルドツールです。 ファイルの変更を監視してブラウザのリロードをかけたり、Sass LESSのコンパイルを行い、最終的に実行ファイル(プレーンなHTMLやCSSファイル)を出力したりする機能があります。 今回は Yeoman1.0 (beta) のインストールについて書きます。 (※ 2013/02/21時点で安定版 はv0.9.6、v1.0.0は beta の開発版です) Yeoman インストール Yeoman を利用するために、以下3つをインストールします。 $ npm install -g yo grunt-cli bower yo Yeoman本体です。 v0.9まで yeomanコマンド ですべて実行していたのですが、yoコマンドに変更されました。 grunt-cli

  • kamiyam
    kamiyam
javascript

jQuery Templateについてちょっと調べてみた

先日CSSNite LP18に参加したのですが、中でも一際気になったjQuery Templateの機能を掘り下げたいと思います。 jQuery Template? jQuery Template http://api.jquery.com/category/plugins/templates/ 利点 これを使うと何が嬉しいかというと、表示のためのHTMLとロジック処理のためのJacaScriptをきちんと分離出来るということが挙げられます。 (※ちなみに、まだbetaです) サンプル 例えば、こんなHTMLがあったとします。 サーバーサイドからある書籍のリストをAjaxでロードしてリスト表示します。 <div> <h4>書籍タイトル</h4> <dl id="bookList"> <!-- <

  • kamiyam
    kamiyam
JAVA

『WebSocket勉強会』で発表してきました

かの地東京で、以前から気になっていたWebSocket勉強会が開催されるという話を聞き、参加を考えていた所、発表者も募集されており、せっかくならと発表させていただきました。 初めてUSTREAMで発表している姿が配信されていたので、どうなる事かと思いましたが、特に意識せず話せたのではないかと思っています。 ただ、発表直前にスライドの内容を修正したのですが、デモで行ったアンケートの質問内容と回答の項目がおかしくなっていました。 慌てて修正するもんじゃないですね。 WebSocket Communication http://nantokaworks.com/demo/slide/20110528/ 今回、Webアプリケーションに携わる方の参加が思いのほか少なかったというのが一番の印象でした。 他の講師の方々が発表された内容はUSTREAMで閲覧できます。 WebSocketのプロトコル仕様から入力デバイスを利用したアプリケーション実例まで、非常に多種多様な内容の勉強会だったなと思いました。 WebSocket研究会110528 http://ustre.am/zbTo 当日#websocket_studyで上がっていたツイートへのフォローをいくつか。。。 GoogleAppEngineとWebSocket Jetty自体がJava用のWebSocketサーバというわけではなく、Websocketに対応しているのはJetty7からです。 GAEでは各言語(Java / Python)に対してサーバ一択で、(現在の所)WebSocketに対応していないJettyを採用しているGoogleAppEngineではWebSocketは使えません。 代わりにWebSocket(というかリアルタイム処理)

  • kamiyam
    kamiyam
javascript

WebSocket接続イベント登録用のライブラリを作ったよ

JavaScript Advent Calendar 2010 の23日目です。 最近WebSocketを色々試してました。 WebSocketはブラウザとサーバ間で双方向通信が出来るプロトコルです。 WebSocketChatやWebSocketSlideとかを作りましたが、Javascript側があまり慣れていないこともあってどうしても表示処理部分とWebSocketオブジェクトの管理がごちゃごちゃになりすぎるので、WebSocket接続イベント登録用のライブラリを作りました。 使う人は中身を知らなくてもwebsocketのイベント時の表示を考えるだけで大丈夫なように作ったつもりです。 表示部分がないのでライブラリファイルの使い回しが可能ですね。 本当ならecho serverを作って試してもらうとかする方が良かったんですが、すいませんタイムリミットです。 jWebSocketDelegate.js 使い方 <script type="text/javascript" src="js/jWebSocketDelegate.js"></script> <script type="text/javascript"> //デリゲートオブジェクト取得

  • kamiyam
    kamiyam
javascript

Postメソッドでwindow.openしたい

案件でPostメソッドでwindow.openするような場面があったので作りました。 この方のコードをちょっと変更。 → 『window.open()でPOST』 window.openの引数をちゃんとすべて指定できないですが、そのあたりは適当に。 function onClickSample() { //設定 var url = "sample.html"; var query = [ { key:"hoge", value:"fuga"}, { key:"test", value:"test"}, ]; //実行 PostWindow = window.openByPost( url, query, "_newWindow&

  • kamiyam
    kamiyam
javascript

Feedback: JGP 読書会1回目

8/21 JavaScript : The Good Parts の読書会に参加しました。 読書会は初めての参加です。 読書会とは特定の本を各自持ち寄り内容を読み進めていき、わからないところや、おもしろいところを共有しようというもの。 主催はTwitter@nine0527さん。 今回はJavascript本の良書 The Good Parts の1章~3章でした。 やはり、読み進めていくうちにその場ではわからないことも多々有り。 所々については宿題ということになったわけです。 全体の議事録はnine0527さんにお任せするとして・・・ 私は気になったところをピックアップ。 序盤ということもあって3章に疑問が集中しました。 3.1 オブジェクトリテラル ・プロパティ(連想配列)に関数を格納できる! Javascriptにおけるオブジェクトはキーによって整理された変更可能なデータの集合体。 関数や正規表現もオブジェクトであるとのこと。 つまり、こんな書き方が可能。 var inoki = { one : "イチ", two : "ニー&

  • kamiyam
    kamiyam
javascript

それ誰得?開いてから10秒で画面が閉じるjQueryプラグイン

jQueryで 『ページを開いたら10秒のカウントダウンが始まって0になると強制的にウィンドウを閉じるプラグイン 』をつくりました! ページを開いて10秒数えると勝手に画面を閉じちゃいます。 使い方はとっても簡単。 jQueryとjDTTenCountを読み込んで、 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jdttencount.js"></script> 実行します! <script type=

  • kamiyam
    kamiyam