1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして！こんにちワン！ スマートフォン版Amebaプラットフォームでフロントエンドの開発を担当している2012年入社の鳥山と申します。 そこで今回は、Node.jsを始める上で知っておくと便利な知識を現場での開発例を交えて紹介させていただきたいと思います。 想定している読者は、 ・普段HTML、CSS、JavaScriptなどのクライアントサイドの開発をしている方 ・Node.jsに興味があり、始めてみたいと思っている方 ・サーバサイドプログラミングと聞くと身震いしてしまう方 です。 ※今回は、記事にも制限があるので、Node.jsについての説

年末年始に書いていた本「HTML5モバイルアプリケーションフレームワーク Sencha Touchパーフェクトガイド 」が遂に出版されました！ 共著で私は主に7章、8章あたりを担当させていただきました。メイン担当はありますが、もちろん他の部分もレビューし、全体的に参加しています。 Sencha Touch 2についての本は意外と少なく（日本語書籍では2冊目）、これだけのボリュームのある書籍は世界でも希です。（現時点では）まさにパーフェクトといえる内容だと自負しています。 特に3部の実践では、実務で役に立つ内容がてんこ盛り！実際に使った人が悩むポイントやはまり所などが詳しく解説されています。私も非常に勉強になりました^^; しかし、まだまだ書き足りないと思うところがあるのも事実。。特に Ext のユーティリティメソッドに関してはほとんど触れられなかったのが少し残念です。（そのあたりは後述の

IE10が出たそうで。 IE10でjsdoitのPortfolio見ると… — げこたん さん (@GeckoTang) 2013年2月27日 さっそくインストールしたらしい人柱をTLで目撃。きになる。 @geckotang スクショ — Tenderfeelさん (@Tenderfeel) 2013年2月27日 スマホにまみれた生活なのでプレビュー版から華麗にスルーしています。 インストールももちろんしてないので丁重にお願いしてみた。 @tenderfeel こんなんす #jsdoit twitter.com/GeckoTang/stat… — げこたん さん (@GeckoTang) 2013年2月27日 おやおや… jsdo.itのWorksはフレキシブルボックス（display:box）を使ってる。（とこれで知った） @geckotang え、flexible box未対応？それと

というわけでKonachaです。https://github.com/jfirebaugh/konacha なにこれ、粉茶？ JavascriptのテスティングフレームワークとしてはJasmineやらMochaあたりがメジャーどころのようだけど、セットアップが難しかったりして「これだ！」というものがなかった。個人的には。 で、今回、よーし、お父さんCoffeeScript書いちゃうぞー！というタイミングにあたって、もう一回いろいろ探してみたところ、これが一番スジがいいっぽかった。 KonachaはRailsでMochaとchaiを使いやすくしたGemらしい。Mochaとchaiは使ったことなかったけど、公式を5秒ほどみたところ、nodeでうごくrspecライクなテスティングフレームワークということでJasmineとかとあんまかわらないんじゃないかと推測。chaiはマッチャーのライブラリのよ

http://jsdo.it/defghi1977/eqLg の発展形． そのままでは点線を徐々に描画するのは難しいが，mask要素と組み合わせることで実現することが出来る． （stroke-dasharrayはcssで操作することもできるのでcssアニメーション化することもできます．） 追記）でもこの方法だとパスの交差部がちょっとアレに見えるねー． <!--smil varsion--> <svg width="200px" height="200px" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> <defs> <!--ベースとなるパス図形--> <path id="path" d="M 124.5,17

do (win = window, doc = window.document, exports = window) -> $ = (selector) -> doc.querySelector selector $$ = (selector) -> doc.querySelectorAll selector class Ball vx: 0 vy: 0 x : 0 y : 0 r : 4 angle: Math.PI * 360 color: '#c00' constructor: -> draw: (context) -> context.save() context.fillStyle = @color context.beginPath() context.arc @x, @y, @r, 0, @angle, true context.fill() context.closePat

2013年2月25日(月) に開催されました TechBuzz 第4回.js系開発技術勉強会で発表させていただきましたスライドになります。内容は Backbone.js の入門となっております。

Result 簡易的なものなので汎用性は高くは無いかも。 jQuery(function($) { $.fn.toc = function(o, p) { p = $.extend({ title: "タイトル" }, p); //見出しを入れるボックスを生成 this.prepend('<div id="toc-list"><strong>' + p.title + '</strong><ol></ol></div>').children(o).each(function(i) { i = i + 1; //IDを合わせて見出しへのページ内リンクと目次へのページ内リンクを生成 $(this).attr('id', 'section-' + i).nextUntil(o).after('<a href="#toc-list">Topへ &uArr;</a>'); $('<li><a hre

twitter facebook hatena google pocket スマホで画像やコンテンツをスワイプさせて見せられると多くのコンテンツを遷移も少なくて良いかもしれません。 jQueryプラグインのslideToucherなら水平、垂直の両方向にスワイプさせられ便利です。 sponsors 使用方法 Yuripetusko/slideToucher ? GitHubからファイル一式をダウンロード。 <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript" src="slideToucher.js"></script> <script type="text/javascript"> $("document").ready(function(){ $

はじめに “Web Speech API”をサポートした「Google Chrome 25」のベータ版が公開 - 窓の杜 2013/01/14 公開の Google Chrome v25.0.1364.29 beta-m から Web Speech API が実装されました。これで JavaScript から音声認識が出来ると言うわけで、ユーザビリティ改善やゲームへの応用など夢が広がりますね。 簡単に調べてみましたので備忘録的にメモしました。 作業/動作環境 Chrome Release Channels - The Chromium Projects 上記サイトより beta 版、もしくは dev 版をインストールします。私は以下のものを使用しています。 Chrome 26.0.1386.0 dev デモ 雰囲気を掴んでもらうためにデモを用意しました。ミクさんがディクテーションした結果を