つかってみよう！Yeoman 〜HTML5 Webアプリ開発を効率化するツールの紹介〜Yeomanの基礎からちょっとした応用までを紹介。 Chrome+HTML5 Developers Live Japan #4 https://plus.google.com/events/c9p1aclqe3fhl6gpo9p5hj4a01g のライブ配信用スライドです。
YeomanでフロントエンドとREST APIサーバーを同時に開発する方法 - bathtimefish's blog
先月のHTML5など勉強会で、Yeoman超入門を発表したときに、Yeomanはフロントエンド開発専用にlocalhostサーバー立ち上げるからサーバーサイドとの同時開発はちょっと工夫がいるよね〜みたいな話題があって、参加されてたnode.jsに詳しい方からhttp-proxyつかってapiの部分リダイレクトかけたらいいよみたいな方法を教えてもらった。 なるほどそれは便利だなと思って実際書いてみたら手軽に使える感じにできたので書いておきます。ちなみに今週水曜日にGoogle Developers Liveに出演してYeomanのことを喋らせていただく機会に恵まれたので、その時の参照にも使えるかと思って。（ライブのスライドはこちら） Yeomanは $ grunt server で開発用のWebサーバーを起動することができる。デフォルトで http://localhost:9000/ 以降フ
第38回HTML5とか勉強会「Webアプリ×テスト最新事情」 - Yuji Blog
2012/4/26に行われた第38回HTML5とか勉強会「Webアプリ×テスト最新事情」に参加してきました。 JavaScriptのテストフレームワークについていろいろな話を聞くことができました。 遅れて参加したうえに、ノートパソコンの電源入れたとたんに電池切れ orz 途中の休憩時間にコンセントのある席へ移動したのですが、前半はメモれてないですｗ メモとるのが全然追いつけなかったので、コードとか省略してたり間違ってたりすると思いますが、雰囲気だけでも感じて頂ければと。 Sinon.jS 外村和仁さん テストしにくいもののダミーを作成する。 spy メソッドの代わりにダミーを作成できる。 // オブジェクト作成。spyはメソッドオブジェクト // これをテストしたいメソッドを上書きする感じで。 var spy = sinon.spy(); // 試しにメソッド読んでみる spy('foo'
高機能なHTML5お絵かきツールを実装できるjQueryプラグイン「jquery.deviantartmuro」:phpspot開発日誌
jquery.deviantartmuro by deviantART 高機能なHTML5お絵かきツールを実装できるjQueryプラグイン「jquery.deviantartmuro」 レイヤー機能、フィルタ機能の他、様々な機能が実装されており、１つのアプリケーションのような画像編集ツールを実装できます HTML5ベースではいまだかつてない程の高機能っぷりかもしれません。 サイトにお絵かき機能を実装したくなったら参考にしてみましょう 関連エントリ オープンソースのHTML5お絵かきウィジェット「Literally Canvas」 Canvasベースのお絵かきが実装できるjQueryプラグイン「Sketch.js」 お手軽にお絵かきアプリが作れるjQueryプラグイン「wPaint」
Tog on Hierarchical Menu
Khan Academy の開発者が Amazon.com の高速なメニュー切り替えを行う実装について、面白いブログを書いていたので、メモ。 BREAKING DOWN AMAZON’S MEGA DROPDOWN http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown 階層メニュー Amazon.com の department メニューや Windows のスタートメニューでお馴染みの、メインカテゴリーとサブカテゴリーというように階層になったメニューがある。Web UI 界隈では mega drop-down menu という名前が付いている模様だけど、Mac だと 80 年代から存在する。 UX 視点では 上下のメインカテゴリー移動 メインカテゴリーからサブカテゴリーへの移動 の2つのメニュー操作が肝。
JavaScript デバッグ環境の用意（JSDT + Firebug + Crossfire） | hiromasa.another :o)
前回に引き続きまして JavaScript の開発環境構築です。 今回は、少し大きなプログラムを作り始めるとなくてはならないデバッガを設定してみます。 JavaScript のデバッグ環境は、IE の開発者ツールや Firefox の FIrebug などでも準備できますが、ここでは Eclipse WTP/JSDT の環境のビューから直接ブレイクやウォッチをする方法をかいてみます。 WTP/JSDT についてはこちらです。 JavaScript 開発環境の用意（Eclipse WTP/JSDT） | hiromasa.another :o) Eclipse に含まれる Web Tool Platform（WTP）には、JavaScript Development Tools（JSDT）が含まれており、おそらくみなさんがインストールしているであろう、Eclipse for JavaEE
Chrome の拡張機能でogpとかを確認するのを作ってみた - めも帖
Chrome の拡張機能でogpとかを確認するのを作ってみました。 確認できる項目は、 ogp:title ogp:url ogp:description ogp:image canonical title description keywords ogpの状態を確認するのが、HTMLを見たり、facebookのツールで確認したり（これが一番確実なんですが）するのが面倒になりました。そこで、Bookmarklet（ブックマークレット）でやってみようとしていたんですが、Chrome の拡張機能の方が、見やすいかも？なんて思って作ってみました。 「WEB+DB PRESS Vol.72」に「Backlog/Cacoo開発ノウハウ大公開」という特集があり、何かあると「Chrome の拡張機能で...」という解決方法を見ると、これはこれでアリなのかなあ...と思っていました。問題解決の為にちょっと
なぜAmazonのメガドロップダウンメニューはスムーズに操作できるのかという秘密
日本のAmazonでも採用されているメガドロップダウンメニューについて、なぜAmazonのメニューはユーザーが使いやすくできているのかという秘密が明らかになりました。ユーザビリティを改善することが至上命題のネットショッピング系サイトにとっては非常に有益な知識となっています。 Breaking down Amazon’s mega dropdown - Ben Kamens http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown まずこれがAmazonの左上にあるカテゴリーを一覧化したメガドロップダウンメニュー。日本のAmazonにも同様のメニューが採用されており、マウスカーソルを上に持っていくと実にスムーズに動きます。 通常のメニューの場合、以下のようにして少し遅れてサブメニューが開くようになっています。 な
『スマートフォン向けJavaScriptライブラリchikuwa.js』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは！スマートフォン版Ameba（通称：デカグラフ）でフロントエンドの開発をしている2012年度新卒入社のオオシモと申します。 デカグラフでは、主にSNS機能（サークル・掲示板・メッセージ・写真など）のNode.jsからフロントエンドのJavaScriptを担当しています。ちなみにエディタはSublime Text 2を使用しています。とっても軽くて高機能でオススメです。jQueryを使用しているのではないでしょうか。 デカグラフでは、chikuwa.jsと呼ばれるスマートフォンに特化した軽量ライブラリを使用しています。このライブラリは弊社の首
JavaScriptとコールバック地獄 - Yahoo! JAPAN Tech Blog
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。JavaScriptでサンプルコードを書く機会があったので、どんなインターフェースで提供するのが便利なのか考えてみました。よく問題になるコールバックのネスト問題について、一般的な話をまとめてみます。 お題 突然ですが、次のような処理を行う必要があるとします。 「0」を出力する 1秒待つ 「1」を出力する 1秒待つ 「2」を出力する これをプログラムで書くとどうなるでしょうか？ シェルスクリプトの場合（同期） たとえばシェルスクリプトで素直に書くと、次のようになります。
blog.katsuma.tv
1/23に「すべての人に知っておいてほしい JavaScriptの基本原則」というデザイナさん向けのJavaScriptの本が発売されます。 「本職はJavaScriptなわけでもないのですが。。」と恐縮しつつ、業務の内容に一番近いjQueryの章の執筆をさせていただきました。 僕の担当した箇所は、こんな感じの内容になっています。 なぜjQueryが使われるのか jQueryの基本的な使い方 jQueryの応用的な使い方 jQuery高速化のポイント jQueryとスマートフォン Column jQueryの今後 デザイナさん向けということで、全体的に基本的な内容が多めにはなっていますが、それでもスマートフォンまわりの話なんかは僕も知らなかったことも多かったし、エンジニアにとっても最近のトレンドをざっと見渡すにはいい１冊になっていると思います。 ぜひ書店で見かけた際には、手に取っていただけ
AngularJS ハッカソ#1 参加しました。 - When it’s ready.
あけましておめでとうございます。 今年から、Bloggerに引っ越そうと思っているa2cです。 本日、Googleさんで開催されたAngularJSハッカソン#1に参加しました。 久しぶりのガッツリハッカソン系のイベントで、チーム分けしたり、デモ出来るレベルまで実装したり 全チーム発表を行ったりして、充実したイベントでした。チュータ役で参加だったので、どのチームにも 所属していませんでしたが、発表直前に@can_i_do_webさんといっしょにペアプログラミングでAngularの とっても便利な機能の１つng-classのデモを作成したので紹介します。 はてな記法を忘れてしまったので、Qiitaで書きました Qiita上でhtml編集したので、動かないかもしれないです。おかしかったら教えて下さい。 デモページ AngularJSについて AngularJSを触ったことない人はちょっと触って
Sinatra っぽく簡単に JS で Dispatch できる micro_dispatcher.js のご紹介 - tokuhirom's blog
Sinatra っぽく簡単に JS で Dispatch できる micro_dispatcher.js のご紹介 https://github.com/tokuhirom/micro_dispatcher.js javascript 用のシンプルな Dispatcher にはいくつかあるが、どうも満足いくシンプルな実装がなかったのでつくった(というか Caym というオレオレ JS Framework の中にうまっていたものをとりだした)。 特徴としては、 Dispatcher だけのシンプルな実装(本体はやや冗長にかいていて、40行程度) sinatra 的なシンプルな記法 といったところでしょうか。 使い方は以下のとおり。 var dispatcher = new MicroDispatcher() dispatcher.register('/', function () { })
JavaScript のスコープチェーンとクロージャを理解する - tacamy--blog
前回で JavaScript のスコープの基本がわかったので、今回はスコープチェーンとクロージャを勉強してみました。 Call オブジェクトとクロージャの理解がかなり大変でした・・。 変数オブジェクト JavaScript で変数の宣言と参照をするということは、変数オブジェクトを読み書きするということです。 変数オブジェクトというのは、key と value による変数管理専用のハッシュテーブルのこと key が変数名、value が値のセットになっているテーブルで、変数の数だけレコードができるイメージ 変数オブジェクトはプログラマが意識することのない、便宜的なオブジェクト グローバルオブジェクト JavaScript は、ブラウザが新しいページを読み込んだとき、内部的に新しいグローバルオブジェクトを生成して初期化します。 グローバルオブジェクトとは、グローバル変数やグローバル関数を管理す
最近の仕事
近況報告。 今年の 9 月中旬頃から、AQ でウェブ・アプリケーションを作るプロジェクトに参加しています。フロントエンド全般を担当していますが、とくに JavaScript と格闘し続けた数か月でした。 僕の今までの仕事はおもにウェブサイトの HTML と CSS を書くことが中心で、JavaScript は UI にちょっとしたインタラクションを加えるような、いわゆる jQuery プラグインっぽいものが多く、今回のようにアプリケーションのためにがっちりとスクリプトを書くのは初めての経験です。プロジェクトのはじめは「ウェブ・アプリケーション」というものがそもそも理解できず、ふだんどおりサイトを作るノリではじめたところ早々に行き詰まり、どうやら MVC とかいうものが必要らしいということで Backbone.js にたどり着き、毎日ググりまくりながら見よう見まねで試行錯誤、といった感じが今
[jQuery]デザイン系の人は、$(function(){})よりwindow.onloadを使ったほうがいいかも。|WEBプログラム覚書
HOME>WEBプログラム覚書>[jQuery]デザイン系の人は、$(function(){})よりwindow.onloadを使ったほうがいいかも。 [jQuery]デザイン系の人は、$(function(){})よりwindow.onloadを使ったほうがいいかも。 入門記事の多くで、基本的に $(function(){}); にコード書けと言われますが、 window.onloadを使ったほうが良いケースも結構あります。 たとえば、 画像を含む要素の高さを取得したい。 CSSで設定された結果に対して何らかの操作をおこないたい。 とか。 ページロード時のイベント 通常ブラウザでページがロードされて表示されるまでに、発生する主なイベントは2つあって(もっとあるんだろうけど)DOMツリーの構築が完了して安全に操作ができるようになった段階で発生するのがDomReady、 外部リソースの読み込
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blk.jp/archives/765
元タワレコ店員×Perl×Webサービス (PerlCasual #05)
【GDC 2013】任天堂、「Nintendo Web Framework」の仕様を公開 Wii Uを介して様々なWebサービスをリビングで使おう！
1216彩票-官网平台