Just Like You Do
Yahoo! PRESS から出版されている High Perfomance JavaScript を読んだメモ書きです。 Chapter 1: Loading and Execution JavaScript のコードを読み込むときは、ブラウザは <script> タグの中で DOM を書き換えるかどうかを予め判断できないので、別スレッドにはできない。 IE だと <script> タグに "deferred" 属性を付けることで読み込みを遅延させられる。 loadScript(url, callback) 関数だけを先に送り出してあげて、アプリケーションコードの本体は後から送信するようにする。YUI().use() など。 Chapter 2: Data Access Literal values, Variables, Array items, Object members へのアク
Web Frameworks: Pros And Cons Of Using Frameworks
Sometimes you should ask yourself, why you need to do the same thing everyday when there’s a new bridge to shorten the path. Think of web frameworks as bridges that will help you code faster and easier. Did you notice I didn’t include the word “better” in the last sentence? Faster and easier doesn’t always mean better, but we will get to that later. First things first, so what is a framework reall
どう書いていますか？JavaScriptのクラス - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） JavaScriptでのクラスの話は定期的に書いているネタな気がしますが、 自分でもなかなかスタイルが定まらないので、ちょっとメモなど。 基本的な形 プラグインとか書いた事もありましたが、 結局今は、こんなオーソドックスな形に収まっています。 var Person = function( name ){ /* コンストラクタ */ this.name = name; }; Person.prototype = { name : null, sayHello : function(){ console.log( "こんにちは！" + this.name + "です！" ); } }; var john = new Person( "まっは" ); john.sayHello(); // "こんにちは！まっはです！" プロパティにオ
all - Node.js Manual & Documentation
Synopsis An example of a web server written with Node which responds with 'Hello World': var http = require('http'); http.createServer(function (request, response) { response.writeHead(200, {'Content-Type': 'text/plain'}); response.end('Hello World\n'); }).listen(8124); console.log('Server running at http://127.0.0.1:8124/'); To run the server, put the code into a file called example.js and execut
node.js + express の記述でハマりがちなこと | Singen-Zaregoto
node.jsは注目されている新技術であると同時にマニュアルやエラー例が少ないので、 先行技術を利用するが故にはまったこと、トピックス的なことをかきためる。 expressなんて「ソース読めって言ってんのか！」みたいなマニュアルしかないし。 バージョンは暫く0.4.7を利用。バージョンアップがかかれば最新をおっかけていく。 相対パスの取得がうまくいかない ソース： [javascript] require(“src/util”) [/javascript] エラー： [shell] node.js:134 throw e; // process.nextTick error, or ‘error’ event on first tick ^ Error: Cannot find module ‘src/util’ at Function._resolveFilename
クラスもどきを作るライブラリを作ってみた - hogehoge @teramako
newを封印して、JavaScriptでオブジェクト指向する(1) - 泥のように newを封印して、JavaScriptでオブジェクト指向する(2) - 泥のように newを封印するべき4つの理由 - 泥のように あたりを読んで、たまにはライブラリ的なものを作ってみようと思い立って作ってみた。上記記事よりJavaScript的なクラスを作成できると思う。 コード https://gist.github.com/972456 jsdoc-tookitの練習としてコメントも入れているのもあって、最初は数十行で済ませるつもりが100行オーバーしてしまった。 一応、Firefox4.0とGoogleChromeで動作は確認したが、ECMAScript 5th 入りまくり、かつ、__proto__を使っているので一般Webではまだ使えないかも。(ダメじゃん) 特徴 特徴というほどでもないけど in
ryuone日記(2011-05-07)
■ [JavaScript] data.jsの1.5.2と1.6の差分 .dataメソッドは自動で、"data-"属性のデータをdataオブジェクトに設定しているが、これをHTML5の仕様に適合するように修正している。 "data-max-width-length='200'"という属性が設定されている場合、{maxWidthLength : 200}という形式で保存するようになった。 参加表明はここから。 前回途中まで読んだんだけど、1.6がリリースされたので、data.jsを最初から読みました。 data.js(1.5.2)は以前纏めたので、こちらを参照してください。1.5.2と1.6の差分に関しては、こちら。 data.jsは今回の一回のみで無事に終了。読むの確かに早くなってる。継続は力なり。 今回の読書会で、結構話題になっていたのが、正規表現の部分。 rmultiDash = /(
第4回 Webアプリを作ろう#1──Geolocation API、Notification API | gihyo.jp
目的地の設定と距離の算出 目的地の設定は、地図上をクリックすることによって行います。Google Mapsのクリックイベントから緯度と経度を取得することができるので、現在地情報の表示と同様にshowDestinationPositionメソッドで目的地の緯度、経度を表示します。また、同時にshowDistanceメソッドで目的地までの距離を算出して表示します。 /* * 目的地情報表示 */ function showDestinationPosition(lat, lng) { //目的地を表示 document.getElementById('dest-latitude').textContent = lat; document.getElementById('dest-longitude').textContent = lng; } /* * 目的地までの距離表示 */ functi
Learn web development | web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
立体感がいい感じの３Dギャラリー作成JSチュートリアル:phpspot開発日誌
How to make a 3D gallery using javascript ? Script Tutorials 立体感がいい感じの３Dギャラリー作成JSチュートリアル。 奥行きのある空間内を画像がダイナミックに動くギャラリーを作るチュートリアルです。 パッケージのダウンロードとデモが体感できます。 覚えておくとこうした演出がほしい場合にすぐ実装できそうですね。 最新のブラウザでみれば動きもわりとなめらかでストレスになりません。 関連エントリ CSS3をフル活用した立体的な画像ギャラリー作成デモ CSS3な背景パターンのギャラリーサイト「CSS3 Patterns Gallery」 HTML5を使ったサイトをまとめたギャラリーサイト色々 超カッコいいApple風スライドショーギャラリー作成チュートリアル
newを封印して、JavaScriptでオブジェクト指向する(1)
以下はプロトタイプ的継承だけで一通りの機能を実現できる、という一つの例です。もちろん他にも書き方はありますし、newを使うのがよくないと主張しているわけではないです。 (誤解を生みそうな文体が混じっているようなので追記: 2011/5/14) 春ですし、少し初心者向けの記事を書きます。タイトル通り、JavaScriptのオブジェクト指向について。ちょっと長くなるので目次です。 クラス（に相当するオブジェクト）を作る オブジェクトからオブジェクトを作る（インスタンス化） 単一継承 多重継承 privateは諦めましょう 親のメソッドを呼ぶ コンストラクタ instanceofに対応する ダックタイピングのススメ JavaScript標準のオブジェクト指向といえばnewやらprototypeやらを書く必要がありますが、これらは書くのが面倒臭い上に気をつけないといけない点がたくさんあります。Ja
History API - Dive Into HTML5 (日本語訳)
History API - Dive Into HTML5 (日本語訳) Manipulating History for Fun & Profit ❧ Diving In ブラウザのロケーションバーは世にある UI のなかで最もギークなもののひとつだろう。URL はビルボードや電車の車体、はたまたグラフィティにまで現れる。戻るボタン (ブラウザでもっとも重要なものだ) と組み合わせれば、Web と呼ばれる複雑に絡みあったリソースの集合を行き来するとても強力な手段となる。 HTML5 の History API はブラウザのヒストリ情報をスクリプトから操作する機能だ。この API の一部にはヒストリを行き来する機能があるが、これは以前の HTML の頃より存在していた。HTML5 では、ブラウザのヒストリにエントリを追加する機能、ページの更新なしにロケーションバーの URL を書きかえる機
HTML5 videoでリアルタイム顔認識 - 風と宇宙とプログラム
以前、、ビデオのリアルタイムなヒストグラム表示を作ってみたが、思ったより高速だったので、もっと処理の重いものをやったらどうだろうと思い、JavaScriptで書かれた顔認識ソフトを利用して、ビデオに対してどのくらい可能なのかを試してみた。 JavaScriptによる顔認識ソフトは以下のものを利用。 Face Detection in JavaScript via HTML5 Canvas | Badass JavaScript 中身を見ると、canvasにdrawImage()した画像をgetImageData()でピクセル情報を取得している。その際、モノクロ画像に変換してから認識している。また、動的にcanvasオブジェクトを生成してオリジナルの部分的な領域を抽出している。その先はちょっとブラックボックス。 で、ビデオのヒストグラム表示でやったときと同じように、ビデオを一旦canvasに
うのらぼ。 - 【JavaScript】jQueryの読み込み待ちとか関数の処理待ちとか遅延処理っぽいこと
っていう JavaScript を書いたとき、 func1 の処理が完全に終わってから func2 の処理を行いたい。 そんなことを考えてたわけなのですが。 どうにかしてうまいこと処理したい、そう思って調べてたら、 動的スクリプトローディング（さんざん既出だと思うけど｜IT戦記 こんな記事を発見。 jQuery が完全に読み込まれたのを確認してから実際の処理を行う、というものなのだったので一部拝借。 $(function(){ func1(); //func2(); //setTimeout で遅延処理 setTimeout(function(){ if(!func1()) setTimeout(arguments.callee, 100); else func2(); }, 100); }); var func1 = function(){ //処理 1 return true; //処
jQuery Mobileを使ったスマートフォン向けHTML5フレームワーク·The-M-Project MOONGIFT
The-M-ProjectはiOSやAndroidといったスマートフォン向けに特化したWebアプリケーションフレームワーク。 The-M-ProjectはJavaScript/HTML5製のオープンソース・ソフトウェア。Webアプリケーションが本格的に取り入れられるようになっている。AjaxなどによるWebアプリケーションの操作性向上に加えて、JavaScriptで実現しうる機能が増えていることに要因があるだろう。 サンプルのTodoアプリ そしてもう一つがHTML5の存在だ。PCブラウザ向けにはまだ全面採用は難しいものの、スマートフォンであれば採用できるだろう。そんなスマートフォン向けのWebアプリケーションを開発する際に使えるフレームワークがThe-M-Projectだ。 The-M-ProjectはHTML5を採用したWebアプリケーションフレームワークだ。iOSはもちろん、Andr
JavaScriptで遅延評価(?) - Hatena’s Kitchen
id:amachangさんが遅延評価とかでいろいろやっているのを見て，ついかっとなってやってしまった。 少し長いけど，ようするにフィボナッチ数列をHaskell風に cons(0, cons(1, zipWith(add, fib, cdr(fib))))と書きたかった。 以下が実装。 function Cons (car, cdr) { if (car == null || cdr == null) { throw "illegal object."; } this.car = car; this.cdr = cdr; } function Action (act) { if (act == null) { throw "illegal object."; } this.action = act; } function Thunk (any) { if (any instanceof T
jQuery « まどがいの技術メモ2
MooToolsのMenuMaticがあまりに格好よかったのでjQuery版を作りました。 すごいヌルヌル動くので触ってて気持ちいい感じ。 デモや説明はこちらからご覧いただけます。 Github https://github.com/madguy/jQuery.ui.smoothMenu Demo http://madguy.github.com/jQuery.ui.smoothMenu/ 今回はjQueryUIのフレームワークを利用しました。 jQueryUIフレームワークはui.coreとui.widgetなどを使用するもので、jQueryのウィジェットプラグインを標準に沿った形で簡単に作成できます。 ドキュメントはこの辺り。 http://jqueryui.com/docs/Developer_Guide
モバイルゲームの歴史を年代別にご紹介します。モバイルゲームの成長と今後について詳しく解説していきます。
モバイルゲーム 物凄い勢いで勃興したモバイルゲーム業界は、いろいろな課題や問題に直面しながらも巨大化し、今日の時点でのスマートフォン向けゲームの市場へと継承されていきます。 モバイルゲームの歴史 2001 Javaアプリと3Dゲームの登場 Javaが利用できるようになったことにより、ダウンロード型のゲームが供給できるようになりました。 2002 携帯電話端末の大容量化・3D化競争 Java搭載携帯電話端末が登場してからごく僅か1年の間に、アプリのサイズに関しては10倍に広大化し、表現方法も2Dから3Dにシフトし始めました。J-PHONEは『ゼビウス』や『スペースハリアー』などといった昔のアーケードゲームを、ドコモはSIMCITYなどパソコンで世界的規模のヒットを飛ばしたゲームを主力商品としていました。 2003 モバイルゲームの一般化 メモリの制限が厳しいJava仮想マシン上ではなく、OS
placeholder 実装マニアックス
placeholder 実装マニアックス 2010-11-20 nanto_vi (TOYAMA Nao) Application Engineer in Hatena Co., Ltd. Hatena Bookmark Team <input type="text" placeholder="Placeholder Text"> Supports Native Support: Firefox 4~ 108 implementations in Hatena Hatena.UgoMemo.Form.Placeholder <input name="channel-name" placeholder="チャンネル名を入力"> new Hatena.UgoMemo.Form.Placeholder(elem['channel-name']); Ten: a javascript framew
Front End Development Guidelines
What's Up, DOCTYPE? The absence of a DOCTYPE is a crime punishable by death. You may have relied on the following DOCTYPE in the past, but it's important to know that this is now being superseded by a leaner and meaner snippet. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Ideally, the HTML5 DOCTYPE should be used. It's suppor
BigtableをjQueryで操作できる「gaedirect」とは
BigtableをjQueryで操作できる「gaedirect」とは：クラウドとgaedirectでできる緊急対応マッシュアップ（1）（1/3 ページ） 緊急時の“クラウド”の有用性 このたびの東日本大震災で被災された皆さま、ご家族ならびに関係者の皆さまに、心からお見舞いを申し上げます。今回の大震災では、多くのWebサイトでアクセス不能状態が発生したのは、記憶に新しいところです。緊急時こそ、必要な情報を入手するために多くの人がWebサイトにアクセスするわけですが、このような切実に情報が必要とされるときに限って、トラフィック増大によるアクセス不能が発生してしまう状況が多々見られました。 しかし、このような緊急時対応サイトをGoogle App Engine（以後、GAE）などによってクラウド化しておけば、このような問題は解決できたといえます。クラウドを使用すれば、ユーザーアクセスが急激に増加
Messages for Japan に見る Google UI デザインの変化 - てっく煮ブログ
GoogleMapsAPIちょっと前になるが、Google が Messages for Japan - Home というサイトを公開した。世界中の人が日本への応援メッセージを投稿する Web サービスだ。 Messages for Japanメッセージは全て、日本語に自動翻訳されており、世界中からのメッセージに勇気付けられる。HTML5 バリバリではない一見 Flash を使ってるかのように見えるぐらいに派手な見た目なんだけど、Google の HTML5 押しの流れの延長で、JavaScript で組んである。Flash は一切使われていない。iPhone でも閲覧できるようなので、Flash は最初から選択肢に入らない。かといって HTML5 バリバリかと思いきや、実はそれほどでもない。たとえば、トップページの hover すると大きくなるアイコン。いかにも canvas を使ってそ
jQueryの参考にすべきSiteのまとめ - Y's note
基礎 jQuery日本語リファレンス http://semooh.jp/jquery/ 文法チェックに誰もが見るサイト。 jQuery速習講座 http://ascii.jp/elem/000/000/498/498710/ selector、命令、イベント、アニメーション、UIについての解説。初心者にとっては分かりやすい。 jQuery入門 http://www.openspc2.org/JavaScript/Ajax/jQuery_study/ver1.3.1/index.html jQueryの基礎的な内容についてのまとめ。 一日で学ぶjQuery http://blog.spicebox.jp/labs/2009/04/_jquery.html jQueryについてサンプルをまとめたサイト。 UI jQueryサンプル集 http://www.designwalker.com/20
RSSをパースするjQueryプラグイン「PaRSS」 | Web活メモ帳
「PaRSS」はRSSフィードを取得して動的に表示してくれるプラグインです。 Webサイトとは別にブログを持っている方に良さそうですね。 使い方 HTML JavaScript $("#feed").PaRSS( "http://www.your-blog.com/feed", // feed url 5, // 取得するアイテムの数 (optional) "M jS g:i a", // 日付のフォーマット (optional) true // descriptions (optional) ); 日付のフォーマットはPHPで使える形式であればほぼ使用できるようです。 見た目の変更方法 RSSは<li>タグで出力されるようですが、項目毎にclassが割り振られているようで、CSSをカスタマイズするだけで見た目の変更が可能です。 出力されるHTML ・タイトルが囲まれるタグ ・日付が囲まれ
[JS]jQueryのプラグイン33+1選 -2011年4月
Slider Kit スライドショー、コンテンツスライダー、タブコンテンツ、カルーセルなどさまざまなスライドコンテンツに対応。
初心者のためのスマートフォンサイトを作るときに見ておきたいサイト｜WEB Drawer -WEB制作に関するメモサイト-
スマートフォンサイトを本格的に作るようになってきたので、いろいろ基本的なことから調べてみました。 自分はコーディングがメインなので、HTML/CSS/JSが主になっています。 制作する前に仕様の確認 スマートフォンの仕様が載っています。一通り目を通すと、製作してる時に「これができない！」などの問題が回避できるかもしれません。 ASCII.jp：サイト制作の前に知りたいiPhone/Androidの仕様｜実践！iPhone＆Androidサイト制作ガイド ASCII.jp：サイト制作の前に知りたいiPhone/Androidの仕様｜実践！iPhone＆Androidサイト制作ガイド スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき iPhone iPad向けサイトを制作するためのいろ
CSS文字装飾のバリエーション(12パターン) - jsdo.it - Share JavaScript, HTML5 and CSS
<p>Normal</p> <p class="dropShadow">Drop Shadow</p> <p class="stroke">Stroke</p> <p class="outset">Outset</p> <p class="inset">Inset</p> <p class="block">Block</p> <p class="glow">Glow</p> <p class="blur">Blur</p> <p class="doubleStroke">Double Stroke</p> <p class="reflect">Reflect</p> <p class="deepInset">Deep Inset</p> <p class="gradient">Gradient</p> <p class="blind">Blind</p> body { background
「Google Code Playground」が凄い - 強火で進め
Google Code Playground http://code.google.com/apis/ajax/playground/ Google Code PlaygroundはGoogleが提供しているAPIのJavaScriptサンプルの実行環境です。サンプルソースは編集可能で、編集後のプログラムをそのままオンラインで実行出来ます。 機能説明 ボタン 機能 View Docs リファレンスを見れます Edit HTML HTMLの編集に切り替えれます。押しても「Edit HTML」の表示のままですが、もう一度押すとJavaScriptの編集画面に戻ります。 Export プログラム単体で実行します。 Save プログラムを保存します。ブラウザをリロードしても編集後のプログラムが表示されます。 ボタン 機能 Debug Code コードのデバッグを行います。デバッグ中にはFirebu
20 jQuery Animate Resources for Developers - DJ Designer Lab
Now-a-days jQuery has stolen all the limelight from Flash and all developers like it for unique features of jQuery. jQuery Animate is such a wonderful animation option for developers that they bound to think about opting out Flash. Today we are presenting a wonderful list of tutorials and plugins that can show you some wonderful animations using jQuery. Crafting an Animated Postcard With jQuery Bu
SVG with Javascript習作 - Kengo's blog
SVG女子が話題を呼んでいることもあり、連休中にSVGに触れました。作ったのはJavascriptで動的に図形を描画したり動かしたりするもの。ジャンルとしてはSRPGやタワーディフェンスゲームに近いと言えます。 forked from: SRPG Map (Hex, SVG) - jsdo.it - share JavaScript, HTML5 and CSS その他にもいくつか書きましたので、興味をお持ちの方はご覧いただけると嬉しいです。 http://jsdo.it/eller86/bCQH http://jsdo.it/eller86/4pKB http://jsdo.it/eller86/qcC9 以下、気づいたことをメモしておきます。なお開発環境はMac OSX 10.6.7 + Chrome 11.0.696.65でした。 SVGはjQueryとの相性が悪い 今回はjQuer
5 Cool CSS Hover Effects You Can Copy and Paste
Need a cool hover effect for something on your site? Look no further! We’ve created several custom examples that you can view live for inspiration. If you like the effect, steal it! We’ve got the CSS ready and waiting for you to copy. 2 Million+ Digital Assets, With Unlimited Downloads Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elem
YammerがNode.jsの運用で学んだこと
Node.jsのカンファレンス NodeConf 2011にて、YammerのリードエンジニアであるMatthew Eernisse氏がNode.jsの運用を通じて学んだことについての発表を行いました。発表のサマリーは5 Lessons Learned Running Node.js in Productionで読むことができます（スライドはまだ公開されていないようです）。 「コールバックを使ったスタイルのコードは、イテレーティブに開発をしやすいが、結果としてスパゲッティコードになりがち」という意見は他所でも見かけることがありますね。また、 物事は失敗すると仮定せよ コールバックは失敗すると仮定してデフォルトではエラーメッセージを出力するようにし、処理が上手くいった場合にエラーを取り消すようにする あとで原因を調査できるよう、すべてのエラーはログに記録しておくこと 可視性とメトリクス 初期
JSConf 2010 Slides | Guillermo Rauch's Devthought
For those of us who didn’t make it, I’ve compiled a list of slides + blog posts from the JSConf 2010 Track A speakers Alex Russell – “Google Chrome Frame” Post: http://alex.dojotoolkit.org/ Slides: http://alex.dojotoolkit.org/10/jsconf/gcf.html Francisco Tolmasky – “Socratic: Documentation Done Right” GitHub: http://github.com/tolmasky/socratic Slides: ? Aaron Newton – “Programming To Patterns
jQuery Mobile - Swipe Up, Down, Left, Right
jQuery Mobile natively provides us with the ability to capture the swipeleft and swiperight. It does not however offer us swipeup and swipedown out of the box. Adapting what the jQuery team has done for swipeleft and swiperight, we are able to create and capture those events in the same manner. See the following code to implement swipeup and swipedown: Note: I have now moved the plugin to GitHub s
あの日見たEDの雰囲気を僕達はまだ再現できない。 - jsdo.it - Share JavaScript, HTML5 and CSS
「あの花。」EDっぽく。 アニメ「あの花。」のエンディングの花が舞うのをCSSアニメで再現してみたかったのですが…。 サビ突入時のズームアウト+反転再現のためにsetTimeoutだらけです。 全画面にしてスクリーンセイバー的利用（向いてないとは思う）に落下と反転を繰り返す版もあります → http://jsdo.it/piyotori/edGr ※webkit only //----------------------------------------- // common alias var elm = function(arg){return document.getElementById(arg);}; var startTime = new Array(); var backImgSrc = new Array(); //----------------------------
モバイルゲームの歴史を年代別にご紹介します。モバイルゲームの成長と今後について詳しく解説していきます。
モバイルゲーム 物凄い勢いで勃興したモバイルゲーム業界は、いろいろな課題や問題に直面しながらも巨大化し、今日の時点でのスマートフォン向けゲームの市場へと継承されていきます。 モバイルゲームの歴史 2001 Javaアプリと3Dゲームの登場 Javaが利用できるようになったことにより、ダウンロード型のゲームが供給できるようになりました。 2002 携帯電話端末の大容量化・3D化競争 Java搭載携帯電話端末が登場してからごく僅か1年の間に、アプリのサイズに関しては10倍に広大化し、表現方法も2Dから3Dにシフトし始めました。J-PHONEは『ゼビウス』や『スペースハリアー』などといった昔のアーケードゲームを、ドコモはSIMCITYなどパソコンで世界的規模のヒットを飛ばしたゲームを主力商品としていました。 2003 モバイルゲームの一般化 メモリの制限が厳しいJava仮想マシン上ではなく、OS
Tips for Keeping Jacascript Libraries from Colliding
Namespacing Javascript libraries can often be used in ways the authors did not foresee. Global variables present many opportunities for conflict among Javascript libraries. Authors should use namespacing techniques and JSLint to avoid polluting the global namespace and thus avoid collisions with other libraries. The problem People who run Zendesk help desks like to integrate with other services. W
もうFLASH不要かも? HTML5アニメ作成ソフト｢Hype｣登場 iOSにも対応! 【増田(@maskin)真樹】 | TechWave（テックウェーブ）
[読了時間:1分] ウェブコンテンツに魅力的な動きを付与できるFLASH。しかし、Adobe社の公式オーサリングツールは高額で、デザイナーじゃないと手が届きにくかった。その対抗馬として注目を浴びている次期ウェブ標準仕様のHTML5をベースに、手軽にアニメやスライドを作成できるツール「Hype」が米時間の5月20日にお目見えした。 Mac OS X用ソフトとして既にApp Storeで販売中。価格はUSストアでは29ドルで、日本だと3500円と割高だが日本語ローカライズ版が入手できる。 ツールは、FLASHオーサリングツールなどを使用したことがある人なら、数分もあれば使い始められるだろう。始めてこの手の作品を手がける人は少し手まどうかもしれないが、チュートリアル動画があるので、これを一通り見れば見よう見まねでスタートできるだろう。また、今回のバージョンでどのようなことができるのかは、ギャラリ
美しすぎるギークと行くザッポスのオフィス
Zappos(ザッポス)は靴のオンラインショップとして始まり、高いユーザーの満足度を得る経営手法で脚光を浴びた企業です。ついには競合していたアマゾンが買収を申し入れるに至ったという事で知られているかと思います。またフォーチュンが選ぶ働きがいのある企業でトップ15に選ばれており職場環境が優れている事でも有名です。この会社のオフィスの様子が前回も紹介した求人サイトDice.com提供の動画番組、「Best Job Ever」で取材されていたものが面白かったので紹介します。 CTOのArun Rajanにインタビューするリポーターはもちろん美しすぎるギーク、ベロニカ・ベルモントです。 オフィスはオープンなタイプ。カメラの動きがあってキャプチャできなかったのですが、かなりユニークな飾り付けがたくさんされているオフィスです。オフィスを訪れた人をリクルーティングのチームが鐘を鳴らして歓迎する様子も映っ
PhoneGapのJavaとの連携方法-androidアプリ開発-｜(株)スーパーソフトウエア/東京オフィス
永友幸雄 2011年01月28日 HOME > テクノロジートレンド > PhoneGapのJavaとの連携方法-androidアプリ開発- TAG:java, PhoneGap phoneGapを使って開発していると、javascripだけではできることに限りが出てくる気がしました。 そこで、Javaとの連携ができればと思い、ソースを眺めていたらその方法がありましたので紹介です。 方法は至ってシンプルです。 まず、使用したいクラスを作ります。 public class HelloWorld { public WebView appView; public DroidGap mGap; // コンストラクタ public HelloWorld( WebView view, DroidGap gap) { appView = view; mGap = gap; } // 使用したいメソッド
How to Create Accordion Menu in Pure CSS3 - Designmodo
Step 1 – HTML Markup Create an unordered list with an anchor tag and a span tag. Add a different id for each list item and link to this id with the anchor tag. To be able to style and open the accordion when we click on it we need to use the :target selector. The target selector will only work if we will have a link that points to an id and when we click on that link the id becomes the target elem
jGD DropDown - select ドロップダウンメニューを違ったイメージで表示するjQueryプラグイン - jQuery
■動作環境 ◇ 言語：JavaScript（jQuery） ◇ ライセンス：GPLまたはMIT ■表示例： ■HTML例： <select id="example-01"> <option value="BR">Brasil</option> <option value="FR">France</option> <option value="DE">Germany</option> <option value="IN">India</option> <option value="JP">Japan</option> <option value="RS">Serbia</option> <option value="UK">United Kingdom</option> <option value="US">United States</option> </select>
わずか8KBで直感的にCanvasが使えるjQueryプラグイン「jCanvas」 | Web活メモ帳
円を書く ↑drawArcメソッドで円を書く事ができます。 オプション引数で座標位置とサイズ、色などを指定します。 $("canvas.test").drawArc({ fillStyle: "black", x: 100, y: 100 }); 短形を書いて回転させる ↑rotateCanvasで回転軸の座業と角度を指定します。 $("canvas.test").rotateCanvas({ angle: 45, x: 100, y: 100 }) .drawRect({ fillStyle: "#000", x: 100, y: 100, width: 100, height: 50 }) .restoreCanvas(); グラデーションを作成する ↑gradientメソッドでグラーデーションオブジェクトを作成し、 描画する際に指定するとグラデーションが適用されます。 var lin
forked from: 変体 - jsdo.it - Share JavaScript, HTML5 and CSS
forked from: 変体 Vertex3D(lib) Triangle3D(lib) Matrix3D(lib) Light(lib) FlatShader(lib) ExtraDisplayObject3D(lib) // forked from daijimachine's "変体" http://jsdo.it/daijimachine/1_hentai /** * 変体 * * HTML5 Canvasの挙動テスト。 * 即席3Dライブラリを作って、 * Canvasの処理速度、描画速度等々、 * もろもろの挙動を体感してみた。 * * 今回やってみて、Canvasの描画精度が、 * わりと低いという印象を持った。 * * @author Masayuki Daijima (ARCHETYP Inc.) * http://www.daijima.jp/blog/ * http
iPhoneのSafariでプレイヤーを立ち上げずに音を鳴らす方法 - 強火で進め
自分はiPhoneでWebで音を鳴らしたい場合には埋込みプレイヤーが表示されるかプレイヤーが立ち上がってしまうものだと思っていました。 しかし、9leapに投稿されたこちらの id:nanmo さんのJavaScript製のゲームをプレイするとiPhoneでも音が鳴っています。もちろん、埋込みプレイヤーが有ったり、プレイヤーが立ち上がる事も有りません。 9leap : よく振ってからお開けください by nanimosa http://9leap.net/games/83 ソースを読んでみると音を鳴らしている処理は以下の部分でした。 var open_can_audio = new Audio( "opencan.mp3" ); open_can_audio.load(); (中略) open_can_audio.play();new Audioでaudioオブジェクトを生成してロードと再
Appleのウェブデザインから学ぶ、ディテールを強化する9つのポイント
Designer Dailyの記事を参考に、Appleのウェブデザインからディテールを強化する9つのポイントを紹介します。 Creating beautiful web designs: 9 details that matter Apple [ad#ad-2] 下記は各ポイントを意訳し、Appleのサイトを例にしたものです。 ドロップシャドウ ドロップシャドウは、デザインに深さを与える素晴らしいテクニックです。しかし、計画的に使用しないと、とても素人くさい外見になってしまいます。 良いドロップシャドウを作るには、2つの重要なポイントがあります。 シャドウは繊細にする。 ページ内の光源は一貫したものにする。
ソフトウェアテスト技法いろいろ
シャノンに来てからはまだ1年半くらいですが、社会に出てソフトウェアテストしかやってないので、もう6年以上テストしてます。
HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)
Firefox Developer Conference 2011 in Osaka で使用したスライド http://mozilla.jp/events/2011/fxdevcon-osaka/ 公開用に一部修正やスライド追加しました
jQuery Mobileをマジメに使うならやっておくべきローカライズとかの設定
jQuery Mobileつかってますか？ jQueryでキャラを立てたいわけじゃないんですが...，たびたびのjQueryネタです．なんだかんだで需要が高く，最近は実案件で触る機会があったので情報を残します． いくらお手軽でも，まじめに使うならこれぐらいはやっておかないとダメじゃないかと思う設定のポイントを軽く紹介．Loading...とかデフォルト英語なラベルの変更とかです． 設定の初期化 デフォルトの文字表示やクラス名等の設定を変更するときは，Configuring Defaultsによると，jQuery本体とjQuery Mobileの間に初期化スクリプトを挿入します． <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script type="text/javascript"> $(docume
Ascensor.js
Ascensor is a jquery plugin which aims to train and adapt content according to an elevator system. It works with jquery >= 1.7. This plugin is entirely free to use, but you're always welcome to pay me a beer Download Ascensor.js Get the minified version → Implementation Basic implementation <div id="ascensor"> <div>Content 1</div> <div>Content 2</div> <div>Content 3</div> </div> <script src="jquer
ECMAScript5を使ってSameGameを書いてみた - ラシウラ
ECMAScript5の追加ArrayメソッドやObject.freeze/Object.createを使い、JavaScriptでSameGameを書いてみました。 2D Canvasによるデモ: http://dl.dropbox.com/u/14499563/samegame/samegame-view.html ソース: https://gist.github.com/984605 意識した部分 ピュアECMAScript5仕様の機能のみでゲームロジックを書く(HTMLの機能を使うUIは完全分離する) forループを使わず、forEachやmapを使う Object.createを適切に使用する ステップで盤面生成し副作用なしなので、すべてObject.freezeする。 for文を避けるため、Array(n).forEach(...)/map(...)は機能しない仕様(呼び出して
node.js アプリの負荷分散構成を考える - KrdLab's blog
node.js の負荷分散について考えてみました (フェイルオーバは考慮できていません)．個人レベルなので 1 台のハード上に仮想マシンを 5〜6 個立ち上げて実験しています． 見出し はじめに cluster で負荷分散 寄り道：cluster の仕組み 例えばこんな全体構成 おわりに はじめに node.js は設計上，大量のコネクションを省リソース (プロセス・スレッドをバカスカ生成しない) でさばきます．おそらく想定されているのは I/O バウンドな処理であり，この場合は基本的に非同期で処理されるため，I/O 待ちで他のリクエスト処理がブロックすることはまずありません． node.js は「サービスをつなぎ・組み合わせるためのハブ」的な位置づけが一番しっくりくるように感じます *1． ただ， 大量のリクエストをさばかなければならない ロジックが重くてコールバック処理に負荷がかかって
Titanium Mobileの暗黒ノウハウを公開します。主にAndroid編。 - このブログは証明できない。
すこし前の話になりますが、Titaniumを使ってiPhoneアプリとAndroidアプリを同時リリースしました。iPhoneアプリの方は、以前公開した暗黒ノウハウでわりと楽に作れました。問題は、Android。iPhoneとは違う暗黒ノウハウが必要となりました。 Titanium Mobileの暗黒ノウハウを公開します。 - このブログは証明できない。 今回は、ボリューム少なめです。もう少したまってから公開しようと思ったのですが、Objective-Cを使った開発に戻ったので、しばらくTitaniumは使わないだろうということで公開することにしました。そうそう、日本語でTitaniumの書籍が出るみたいですね。 Android対応 TitaniumはiPhone対応が先行していて、Androidだと機能がなかったりバグがあったりするそうです。私はわりとどうでもいいアプリしか作ってないので
Perl好きの女性Webエンジニア二人がIBM DB2を試してみた - はてなニュース
Webアプリケーション開発に欠かせないデータベース管理システム（RDBMS）。オープンソースの製品が広く利用される昨今ですが、無償で利用できる商用のRDBMSもあります。そんな製品の一つがIBMの「DB2」です。歴史が長く、実績はたくさんあります。そうはいっても使ったことない！ どんなもんだか試したい！ そう思った一人が、フリーランスのWebエンジニア女子、id:acotieさんでした。普段から開催している勉強会の番外編として、同じくWebエンジニア女子のid:aomushi510さんを呼び、無償で利用できる「DB2 Express-C」に触れてみることに。記事の終わりにはプレゼントのお知らせもあります。 （※この記事は日本アイ・ビー・エム提供によるPR記事です。） このたびの東日本大震災で被災された皆さまに心よりお見舞い申し上げます。皆さまの安全と一刻も早い復旧と復興を心からお祈り申し上
Web制作をする前にきちんとしておきたいお金の話し。 │ モノづくりブログ 株式会社8bitのスタッフブログです
株式会社8bitのスタッフブログです。こんにちは。株式会社8bitの高本です。 今回は以前からいつ書こうかとずっと思っていた、Web制作とお金にまつわるお話を書いてみたいと思います。 みんながみんなではないと思いますが、Web業界に携わっている方の大半は本当に良いデザイン、良いサイトを作りたい、という思いが強く、出来れば見積りや請求などのお金の話しには関わりたくない、縛られたくないという方が多いように思います。 どちらかというと私もお金の交渉からは、気持ち的にはできれば避けたいと思ってしまいます。 先日、さぶみっとというWeb制作マッチングサイトを先日見ていたのですが、契約や未払いの相談みたいなものが思いのほか多いのに驚きました。 https://hp.submit.ne.jp/qa いくら仲の良いお客さんでもお金の話しになるとシビアになりますし、支払い交渉はなんだか金金言って
Google App Engine / Python 上での開発で最初から知ってればよかった、ってことをいくつか - Masatomo Nakano Blog
ここ数ヶ月、Google App Engine/Pythonを使い、初めてちょっとしたものを作ってみているのだけど、開発初期から知っておけばよかったなー、と思うノウハウ/tips的なものをずらずらと書いてみる。 基本的な環境設定は、 以前書いた まま。 0. 公式ドキュメントを良く読む 言うまでもなく、だけど、 マニュアル はもちろん、 この辺 の下の読み物も、流し読みだけでもしておいたほうがいい。 datastoreとmodel的なところ 1. key nameを使いこなす key nameは、レコードの作成時に指定できる(RDBでいう)primary keyの別名みたいなもの。primary key自体は自動的で作成されるので開発者が指定できるのはkey nameだけ。 key nameをうまく使うことで、datastoreを使いやすくすることができる。特にdatastore上で"un
女性向けサイト等に使えそうなイラスト風の花・植物のPhotoshopブラシ集:phpspot開発日誌
Free Floral Photoshop Brushes | Professional photo gallery | Create and buy flash xml photo gallery 女性向けサイト等に使えそうなイラスト風の花・植物のPhotoshopブラシ集が色々まとまったエントリのご紹介です。 サイトに使うことでサイトがオシャレになったりしそうです。 これは絶対に使えそうですね。 関連エントリ ハイクオリティなPhotoshopブラシをダウンロードできるサイト色々まとめ 100以上のクールなPhotoShop用ブラシがダウンロードできる「getbrushes.com」 動物に関するPhotoshopブラシ色々 クリエイティブでカッコいいPhotoshopブラシセット５０
最近リリースされた高品質なフリーのデザインフォント -2011年4・5月
最近リリースされた高品質なフリーのデザインフォントを紹介します。 Elega 個人・商用利用無料。 Decani 個人・商用利用無料。 Dalle 個人・商用利用無料。 [ad#ad-2] Fabri
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vimmerの方へ：.vimrcでこれは入れておけというオプションは？ - ANS-prog
HTML5 - CSS - jQuery Flipbook | flip book animation without flash | Designscripting
IDEA * IDEA
http://www.lasical.com/tag/jquerymobile/
stefangabos - Overview
小さくで可愛いグラフが描けるjQueryプラグイン「Piety」:phpspot開発日誌
a list of slides from nodeconf 2011
http://www.css-lecture.com/sp/log/web-design/horizontal-scroll-website.html
http://websitesmaderight.com/2011/05/45-html5-media-players-tutorials-and-resources/
AT&T Developer EcosystemのEd Schmit氏とのインタビュー
http://www.webdesignish.com/fresh-and-best-jquery-plugins-for-free-download.html
IBM Developer
Good night, Posterous
IDEA * IDEA