equalize.js 高さや幅が不揃いのDOM要素を同じ高さ・幅にします。 height, width, outer-, inner- に対応
[JS]jQueryのプラグイン33+1選 -2012年10・11月
equalize.js 高さや幅が不揃いのDOM要素を同じ高さ・幅にします。 height, width, outer-, inner- に対応
ちょっと便利なJavascriptオブジェクトの作り方
今回は、ちょっと便利なJavascriptオブジェクトの作り方をご紹介します。いわゆるモジュール・パターンと呼ばれている方法です。 はじめに 最近、HTML5への注目と共に、Javascriptを使用する機会が増えてきました。以下のように適用範囲は多岐に渡っています。 通常のWebサイトでのユーザビリティ向上 スマートフォン用Webサイト開発 HTML5アプリによるクライアント・アプリ開発 スマートフォンのハイブリッドアプリ開発 Node.jsによるサーバサイド・プログラミング このように、Javascriptが基幹となる仕組みが広がっています。クライアント側とサーバ側を同じ言語で作れることは、開発側にとってはとても有難いことです（学習コストの低減、人的リソース配分の柔軟性など）。もちろん、発注者やエンドユーアにとっても開発速度などの面で利益が生まれます。 Javascriptプログラミン
[JS]ずっーとホバーしていたい、階段状に浮き上がるアニメーションがかなり気持ちいいナビゲーション -Stairway Navigation
ホバーすると、アニメーションで階段状に次々にアイテムが浮き上がるナビゲーションを実装するjQueryのプラグインを紹介します。 一応プラグインですが、エフェクトの要はCSS3です。 階段の反応する数が三つと四つ 実装 HTML HTMLはシンプルで、a要素でアイテムを実装しnav要素で内包します。 <div> <h2>One Step</h2> <nav id="example-one"> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Na
典型的なJavaScripter3+1種類と、それぞれの勉強法。 | Ginpen.com
一口にJSerといっても、色々な分野の人がいます。あなたはどんなJSerになりたいですか？ 方向性により学ぶべき事も変わってきます。目標を明確にしましょう。 というわけで、独断と偏見……というか主に偏見で三種類にまとめてみました。 追記: 「勉強法」とかタイトルに付けておきながら勉強法に触れてませんでしたので「勉強範囲」に修正しました。ひー。 三種類 アニメーションを作る人 アプリを作る人 サーバ側を作る人 基本的にプログラマ視点です。コーダー視点も最後に。 では、それぞれ見てみましょう。 アニメーションを作る人 Flashの代わりにJavaScriptやCSSを使う人。Flasherさんがシフトしてくる位置。 発注側が想定するJavaScripter。最近の携帯ゲームで需要がある。 お仕事 JSだけでなくCSSや画像を駆使して画面を描く。 UIだけならいなくても困る事はないけれど、UXま
サーバサイドJavaScript Node.js入門【委託】 - 達人出版会
サーバサイドJavaScript Node.js入門 清水俊博, 大津繁樹, Jxck, 小林秀和, 佐々木庸平, 篠崎祐輔, 高木敦也, 西山雄也 KADOKAWA/アスキー・メディアワークス 3,344円 (3,040円+税) 本書は、「スケーラブルなネットワークプログラムを簡単に作成するための方法を提供する」というNode.jsの日本初の解説書です。Node.jsの初歩から応用まで、すべてを学ぶことができます。 サポートサイト出版社による関連ページが公開されています。 サーバサイドJavaScript Node.js入門 (KADOKAWA/アスキー・メディアワークス) 書誌情報 著者: 清水俊博, 大津繁樹, Jxck, 小林秀和, 佐々木庸平, 篠崎祐輔, 高木敦也, 西山雄也 発行日: 2012-10-29 最終更新日: 2012-10-29 バージョン: 1.0.0 ページ数
[JS]単に縮小して表示するだけではない、レスポンシブ対応の画像ギャラリーのスクリプト -Gamma Gallery
単にウインドウのサイズに依存して縮小するのではなく、コンテナのサイズに応じてグリッドを最適化し、そのサイズに最適な画像を表示する画像ギャラリーを実装するスクリプトを紹介します。 Gamma Gallery: A Responsive Image Gallery Experiment デモページ Gamma Galleryのデモ Gamma Galleryの使い方 Gamma Galleryのデモ まずは、デスクトップで表示したデモからご紹介。 画像の配置にはMasonryを使用しており、高さが異なる画像を一定の隙間で配置します。また、無限スクロールにも対応しており、下部にスクロールするとローディングバーが表示されます。 デモページ：スマフォで表示 Gamma Galleryの使い方 Step 1: 外部ファイル Gamma Galleryのスクリプト自体はjQueryのプラグインではありま
Node.js で簡単に音声認識できるモジュールを作ってみた #nodefest - 凹みTips
はじめに この記事は東京Node学園祭2012 アドベントカレンダーの 23 日目の記事です。 現在、オープンソースの大語彙連続音声認識エンジン Julius を利用して音声による家電操作を行なっているのですが、どんな言葉を認識させるかの文法をゴリゴリ書いたり、コールバックの処理を C++ でゴリゴリ書くのが大変だったので、これらを簡単に実現してくれる Node.js のモジュールをつくってみました。 WEB 関連の話題で扱われることの多い Node.js ですが、C++ でネイティブモジュールを作成することによる Node.js の可能性を感じてもらえれば、と思います。 出来るようになること 以下のように音声認識させる言葉を登録、その文言を Julius が解釈できる形式にコンパイルして、Julius インスタンスを生成、スタートするだけで音声認識が可能になります。 var Julius
JSX / Haxe / TypeScript
前回の勉強会の内容が、C言語のハック的内容で、あまり役に立たないものだったので、今回は、C言語の基本に立ち返った内容にしました。 C言語のマナーとか書いているので、学校でC言語をやったよ、という人は、見ると得るものがあるかもしれません。 最後のほうには、オマケの内容も付けています。
JavaScriptのテストツール「testem」が素晴らしいぞ - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） JavaScriptユニットテスト一年生の私が、Nettuts+ のチュートリアルで知ったテストツール 「testem」のお陰で大変捗ったので是非お勧めしたく、ここで紹介してみます。 testem ってなに testem via GitHub : airportyh/testem Unit testing in Javascript can be tedious and painful, but Testem makes it so easy that you will actually want to write tests. 要するに、面倒なJSのユニットテストをより快適にしてみんなでハッピーにテスト書こうよ！というツールです。 testem自体はnode.jsベースで動作し、Jasmine/QUnit/Mochaに対応して
[JS]画像やコンテンツを水平・垂直に気持ちよくスクロールさせて表示することにこだわったスクリプト -Sly
水平・垂直に配置した画像やコンテンツを気持ちよくスクロールさせることと次に表示するアイテムのロジックにこだわったjQueryのプラグインを紹介します。 IE6にも対応してるのがびっくりです！ 特徴は気持ちのいいスクロールだけでなく、ナビゲーションのロジックも直観的で、次に表示するべきアイテムを自動的に先頭に配置します。クリックでアクティブにしたアイテムも常に保持します。 操作は上部のバー、FRAME上でホイール、パネルのクリック、下部のナビゲーションがあり、また下部のボタンでは前・次、最初・最後・中央などの操作もできます。 ナビゲーションでの操作は次に表示するアイテムを先頭に配置します。 デモでは、水平方向のスクロールだけでなく、垂直方向、無限スクロールもあります。
サーバサイドJavaScript Node.js入門 を執筆させて頂きました。 - Block Rockin’ Codes
intro 本当にお待たせいたしました。 出す出すといってなかなか出せなかった Node.js 本が、ついに出版されました。 共著の一人として、自分も書かせていただいています。 サーバサイドJavaScript Node.js入門 作者: 清水俊博,大津繁樹,Jxck,小林秀和,佐々木庸平,篠崎祐輔,高木敦也,西山雄也出版社/メーカー: アスキー・メディアワークス発売日: 2012/10/26メディア: 大型本購入: 31人 クリック: 803回この商品を含むブログ (6件) を見る これを書いてる時点では、 JavaScript 部門では 1 位、 プログラミング部門では 4 位 となっているようです。 それなりに、興味を持っていただけているようで良かったです。 自分の記録としても、少しだけ書かせて頂きます。 2 年間の執筆 書き始めたのは、かれこれ 2 年前になります。 その頃はまだ
HTMLでカーニング！手軽に文字詰めできる「FLAutoKerning.js」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、机に置いたおもちゃの日焼けが気になるもりたです。 今回は、前からちょっと気になっていたウェブフォントをカーニングできるJS「HTMLで文字詰めするタイポグラフィー用JS」を試してみました。 http://fladdict.net/blog/2011/02/auto-kerning.html ※現在はアクセスできなくなっています。 ご存知のとおり、jsを使わなくてもletter-spacingを使ってcssだけで設定しようと思えばできるんですが、ひと文字ずつの設定となるとhtmlもcssもすっきりしなくなる上にめんどくさい！ こうパッとガッとスッと設定したい！ そんな希望を叶えてくれるのが「FLAutoKerning.js」です！ ポイント1：導入が楽です 手順は簡単、サイトからファイルをダウロードしてjqeryと一緒に読み込ませて<head>内に設定を書くだけ。 入れてみたデモ
11歳の天才少女プログラマーも注目！ HTML5ゲームエンジン - 週刊アスキー
HTML5で、小学生でも簡単にゲームを作れてしまう、ゲームエンジン『enchant.js』（関連サイト）。オープンソースかつ無料での利用が可能で、enchant.jsで作られたゲームはすでに数多くリリースされています。このenchant.jsがいま、どれくらいすごいことになっているのか、開発元の株式会社ユビキタスエンターテインメントの清水亮代表取締役社長兼CEOにうかがいました。聞き手は角川アスキー総合研究所の遠藤 諭ゼネラルマネージャー。 なお、10月25日（木）から27日（土）まで、お台場・日本科学未来館で開催される『デジタルコンテンツEXPO』（関連サイト）で、実際にenchant.jsを体験できます。ぜひご来場ください！ ■アメリカでも大歓迎された、HTML5ゲームエンジン『enchant.js』 遠藤 先週、アメリカに行かれていたんですよね。 清水 一週間で5回ほど講演したんです
[JS]変更時のアニメーションが気持ちいい、レスポンシブ対応のかっこいいグリッドを生成するスクリプト -Grid—A—Licious
Masonryはかっこいいけどパネル移動のアニメーションがちょっとな、という人にぴったりな、レスポンシブ対応でレイアウト変更時のアニメーションもスムーズでかっこいいグリッドを生成するjQueryのプラグインを紹介します。 Grid—A—Licious Grid—A—Licious -GitHub Grid—A—Liciousのデモ Grid—A—Liciousの使い方 Grid—A—Liciousの実装例 Grid—A—Liciousのデモ まずは、Grid—A—Liciousのベーシックな動作が確認できるデモからご紹介。 アレンジは、下記のGrid—A—Liciousの実装例で。 ページいっぱいに高さの異なるパネルが同じ間隔で配置されています。 デモページ：スマフォサイズ Grid—A—Liciousの使い方 Grid—A—Liciousは2008年にリリースされた当時は単にグリッド状に
見えてきた「ECMAScript 6」。JavaScriptの生みの親が書く「Harmony of Dreams Come True」
見えてきた「ECMAScript 6」。JavaScriptの生みの親が書く「Harmony of Dreams Come True」 JavaScriptの標準仕様となっているのがECMAScriptで、最新バージョンは2009年12月に策定されたECMAScript 5th Editon。そして次のバージョンとなるECMAScript 6は、コード名「Harmony」もしくは「ES.next」や「ES6」と呼ばれています。 ECMAScript 6にはどのような機能が加わるのか、JavaScriptの生みの親であるBrendan Eich氏が、自身のブログに「Harmony of Dreams Come True」というエントリをポストし、その内容を紹介しています。PublickeyではEich氏の許可を得て日本語訳を掲載します。 （正確な翻訳に務めましたが、言語仕様やガベージコレクシ
[JS]スクロールするのが楽しくなる！多彩なパララックスのエフェクトを簡単に実装できるオープンソースのスクリプト -Jarallax
Loodsmedia ディスプレイ内のコンテンツもパララックスします。 Jarallaxの使い方 「Demo 3」を例に、実装方法を簡単に紹介します。 外部ファイル 「jquery.js」と当スクリプトをhead内に外部スクリプトとして記述します。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jarallax-0.2.3b.js"></script> HTML HTML自体は通常通りに実装し、アニメーションのエフェクトを適用するエレメントには参照できるようid, classなどを付けます。 <h1 class="logo">Jarallax</h1> <div class="container" id="slide1"> <h2>見出し：slide
JavaScriptエディタ「Scripted」をVMware/SpringSourceがオープンソースで公開
VMwareのSpringSourceが、JavaScript/HTML5対応のエディタ「Scripted」をオープンソースで公開しました。 Scripted自身がHTML5/JavaScriptで記述されているためWebブラウザ上でエディタとして動作し、HTML/CSS/JavaScriptのシンタックスハイライト、JSLintによる文法チェック、エディタのカスタマイズ機能などを備えています。エディタ部分の機能はEclipse Orionを再利用したとのこと。 Scriptedの全体画面。右側に別ファイルを表示しているところ。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
地獄のJavaScriptセキュリティ
Site Under Maintenance
deconcepter.jp