第4回 Node.jsとは何だったのか | gihyo.jp
すでにチケットが売れ切れてしまったLL Planetsですが（※）、蓋を開けてみると今年はJavaScriptに関連したセッションが目白押しになっています。このように再びJavaScriptが注目を集めることになった理由は何だったのでしょうか？ 今回のLL Planetsでは、現在日本で活気を集めているNode.jsコミュニティとその周辺コミュニティの人達をお招きし、JavaScriptの再ブームの理由について再検証していく予定です。 ※） LL Planets チケット完売御礼 http://ll.jus.or.jp/blog/archives/233 JavaScriptプログラマのための全方位的完全武装ガイド まず午後一のセッションでは、最速インターフェース研究会の名称で有名なmalaさんに「JavaScriptプログラマのための全方位的完全武装ガイド」と題して45分間の基調講演
ServiceWorkerでモックサーバーを作る - Qiita
実験環境は Chrome Canary 43.0.2314.0 だけど動かしてる分は現時点の安定版(40)でも動くはず やりたいこと http://localhost:3000/api/* へのリクエストを全部serviceworkerに任せたい。 先行実装として Jxck/response-injection がある。 やり方 sw.js(になるsw.coffee) console.log 'worker started' self.onfetch = (event) -> console.log 'onfetch', event.request.url if event.request.url.indexOf(location.origin+'/api') > -1 event.respondWith new Response '{"foo": "bar"}', status: 200
Polymerで作る次世代ウェブサイト
HTML5 Conference 2015 でお話した「Polymer で作る次世代ウェブサイト」のスライドです。途中にライブコーディングを挟むため、動画もご覧下さい。http://youtu.be/qzh56Ja1eaw?t=3h20m16s
第22回 JavaScriptによるUIの実装：ドラッグ | gihyo.jp
こんにちは。前回に引き続き、JavaScriptでUIを実装する方法を紹介していきます。 要素のドラッグ ウェブアプリでよく使われるインタフェースのひとつ、ドラッグを実装してみます。ドラッグを使用するケースは幾つかありますが、今回は投稿用フォームをドラッグで移動できるようにするという使い方を想定してみます。 投稿フォームで入力する際、そのページのコンテンツを見ながら入力したいということはよくあります。フォームを好きな位置に移動できればそれが実現できます。 ドラッグの基本HTML <div class="js-drag" id="js-drag-1"> <form class="js-drag-form" onsubmit="return false;"> <textarea></textarea> <input class="submit" type="submit" value="送信"
第7回 JavaScriptとHTMLとDOMの基本#2 イベント編 | gihyo.jp
こんにちは、太田です。前回はJavaScriptからみたHTMLの基本を中心に解説しました。今回はまず、イベントについて解説します。JavaScript、DOMにおいてイベントは極めて重要です。ブラウザ上のJavaScriptでは必ずといってよいほどイベントが絡んでいますし、ウェブアプリケーションをコントロールする根幹的な技術と言えるほどです。 JavaScriptとイベント ブラウザはscriptタグで指定されたJavaScriptを解釈して実行します。その時、関数などを定義するだけにして、実際にその処理が行われるのはユーザーがボタンをクリックした時や、何かを入力した時など、ユーザーの何らかのアクションに関連付けてJavaScriptを実行させることができます。さらには、ユーザーのアクションだけでなく、ページの読み込みや通信処理の完了後など、ブラウザ上で起こるあらゆるイベントについて処理
資料を公開しました（食べログ×クックパッド合同勉強会） - クックパッド開発者ブログ
2011年8月5日（金）に、クックパッドにて食べログ様と合同勉強会を開催いたしました。 そのときにクックパッドエンジニアが使用した発表資料を公開いたしますので、ぜひご覧くださいませ。 当日お忙しい中お集まりくださった皆様、Usteramでご覧になった皆様、どうもありがとうございました。 ●高田悟史（@satoship） いかにしてユーザ体験を保証するか [slideshare id=8835134&w=425&h=355&sc=no] View more presentations from Satoshi Takada ●太田昌吾（@os0x） Javascript integration (3) [slideshare id=8892178&w=425&h=355&sc=no] View more presentations from cookpadtech Ustreamはこちらから
「実況解説つき！ペアプロでわかるJavaScriptテスト入門」レポート | gihyo.jp
2014年1月17日、ベルサール新宿グランドにて開催された「エンジニアサポートCROSS 2014」の中の1セッション「実況解説つき！ペアプロでわかるJavaScriptテスト入門」をレポートします。 エンジニアサポートCROSS 2014とは 「複数の技術を身につけなければWebサービスは作れない＝クロスしないと生きていけない」をテーマに、「エンジニアサポート新年会2012 CROSS」として第一回が2012年に開催された勉強会イベント、それがCROSSです。今年で3回目になります。 「実況解説つき！ペアプロでわかるJavaScriptテスト入門」 このセッションは「JavaScriptで書かれたよくあるコードをベースに、ペアプロでテストコードを足していく様子を解説者が説明する」という内容になります。 それでは、さっそくセッションの模様を見ていきましょう。 登壇者 本セッションの登壇者
jQueryでaリンクにイベントを設定するモダンな書き方を教えてください リンクにクリックイベントを設定するとき 最初 <a href="#" onClick="jump(1);">ページ１<…
jQueryでaリンクにイベントを設定するモダンな書き方を教えてください リンクにクリックイベントを設定するとき 最初 <a href="#" onClick="jump(1);">ページ１</a> <a href="#" onClick="jump(2);">ページ２</a> function jump(page) { location.href = 'http://hoge' + page; } としてましたが、なんとなくjQueryでロード時にイベントを設定する方が良いのかなと思って、以下のように直しました $(function(){ $("#one").click(function(){ location.href = 'http://hoge' + 1; }); $("#two").click(function(){ location.href = 'http://hoge' +
本当にあったTouchEventの怖い話 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 事前知識: ブラウザ毎の差異 Android 2.x, 3.x 2.x, 3.x では伝統的に TouchEvent がまともに使えません。 経験上、一部端末でdocument.createEvent('TouchEvent')するとNOT_SUPPORTED_ERRを吐くなどの現象が見られ、seleniumのこのコードでも、MouseEventsを利用して無理矢理回避しています。 4.x (Stock Browser & WebView) 4.x では、やっと TouchEvent が利用できるようになります。 が、 イベントの初期化
nodeconf.eu 1日目 (Future Node.js, microservices, hapi) - from scratch
さて、 nodeconf.eu に来ています。 当たり前なんだけど、nodeconf.eu ではnode.jsを使っているユーザーが多くて、外人ばっかり。 会う人会う人に「お前の国ではNode.jsは流行ってるのか?」って聞いてるんだけど、とりあえずの理解では、「サンフランシスコ、シアトルとかアメリカでは流行ってる。Dublin、ロンドンとかのアイルランド、イギリスでもまぁまぁ流行ってる。スウェーデンでは全く流行っていない。」っていう感じ。 日本ではどうなんだ?って聞かれたから「MatzのおかげでRubyがめっちゃ流行ってるよ、Node.jsも一時期流行ったけどRubyほどじゃない、最近だとGoとScalaが流行ってるよ」って応えてる。 ちなみにサンフランシスコだと、Node.jsめっちゃ流行ってて、Goがちょっと前のNode.jsみたくぼちぼち流行ってる、エッジな人たちがRust使い始め
WEB+DB PRESS Tech Meeting ［資料＆動画］｜gihyo.jp … 技術評論社
当日の講演資料と動画を公開です。 動画はニコニコ動画を利用して配信しています。ニコニコ動画のアカウントをお持ちでない方でも，gihyo.jp上で動画を再生できます（コメントの書き込みはできません）。 動画の最後でニコスクリプトを使ったアンケートを行っていますので，ニコニコ動画のアカウントをお持ちの方はご協力いただければ幸いです。動画をクリックすることでニコニコ動画の該当ページへアクセスすることができます（ニコニコ動画のマイリストはこちら）。 今回の動画公開にあたって，gihyo.jp用に新たなニコニコ動画プレーヤーを作っていただきました。この場を借りてニコニコ動画の方にお礼を申し上げます。 JavaScript Tips & Technique IT戦士amachangが最近のJavaScriptのテクニックやTipsについてご紹介します。
FullCalendar - JavaScript Event Calendar
npm install @fullcalendar/angular import { Component } from '@angular/core' import { CalendarOptions } from '@fullcalendar/angular' @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { calendarOptions: CalendarOptions = { initialView: 'dayGridMonth', events: [ { title: 'event 1', date: '2019-04-01' }, { title: 'e
超会議3の超チューニング祭の感想
さて、超チューニング祭が終わったので、感想を書こうと思う。すでに、参加者の中で、感想を書いている人もいる。 レポート - 超チューニング祭で努力賞(最速賞)をとるためにやったこと - Qiita ニコ動 超チューニング祭で最優秀賞もらいました 超チューニング祭に参加した - masarakki's blog JavaScript - 超チューニング祭に参加＆表彰した - Qiita kmizu/slide_cho_tuning また、いつの間に行ったのか、優勝者に取材したところもあるらしい。 『ニコ超3』の超チューニング祭で、“創世神”戀塚昭彦氏を上回ったカップルが見せたバランス感覚 - エンジニアtype さて、筆者の視点からみた超チューニング祭はどうだったか。 そもそも、私がスタッフとして配置されるブースは、超時空ニコニコ研究所であるはずだった。しかし、超会議にさかのぼること三週間前、
JavaScriptのテストを開発工数に入れてもらうには？
2013年4月27日、六本木ヒルズ森タワーのグーグルにて「第38回HTML5とか勉強会」が開催された。HTML5とか勉強会とは、HTML5に関心のあるエンジニアやWebデザイナ向けの勉強会だ。今回のテーマはJavaScriptのテストフレームワーク。別室のサテライト会場を用意しなくてはならないほど会場は多くの参加者であふれた。テーマへの関心の高さがうかがわれる。テストフレームワークを使いこなす現場のプロたちの解説により、その最新事情と基本的な使い方が分かった。 JavaScriptテストの必要性と最新事情 サイボウズの佐藤鉄平氏は、JavaScriptのテストの基礎知識と全体像について語った。 公開スライド 佐藤氏は、結合テストやユニット（単体）テスト、そのほかにユーザビリティテストなど、そもそもテストにはどんな種類があるのかを解説した後、ユニットテストの重要性を強調した。技術面で開発チー
クライアントサイド JavaScript のパフォーマンス改善には backburner.js が便利！ - tricknotesのぼうけんのしょ
DOM 処理や Ajax など、JavaScript が外の世界とやり取りする部分というのは、一般的に待ち時間を多く必要とします。 パフォーマンスを改善しようと思った時に、ロジック部分でコツコツと節約するより、まずコストが高い処理を行わないようにするということで、驚くほどの効果を経験をされたことはありませんか？ 今までパフォーマンス測定をされた方であればピンとくる部分があることと思います。 そんな時に役に立つのが、今回ご紹介する backburner.js です。 ebryn/backburner.js - GitHub backburner.js って? backburner.js とは Ember.js の run loop モジュールから切りだされたとても小さなライブラリで、短時間に集中的に発生するメソッド呼び出しの回数を制限したい場合などに利用することができます。 backburn
jQuery 1.9 のソースマップ対応で圧縮版でもデバッグが簡単になった話
jQuery 1.9 がリリースされました。1.9 の新機能の中ではあまり注目されていませんが、ソースマップに対応したのが地味に便利そうです。 というのも、圧縮版の jquery.min.js を使っていると 何か問題が起きたときにスタックトレースを眺めても jQuery の部分が意味不明 デバッガーで jQuery のソースにステップインしても意味不明 といった理由で、開発中には非圧縮の jquery.js を使うことが多かったわけです。 それが、1.9 からはソースマップに対応したので圧縮版のままでのデバッグが簡単になってます。 超簡単な使い方 ソースマップに対応したブラウザーは現時点では Google Chrome のみなので、Google Chrome の手順を説明します。 (Firefox はソースマップへの対応を計画中らしい) 事前準備を忘れずに Google Chrome で
ちょっと高度にJavaScript／クロージャでイベントハンドラを作る | DevelopersIO
前回の解説では、クロージャの「変数が保持される」「変数が隠蔽される」という特徴を使って、アクセサメソッドを作りました。 今回は、「呼ぶたびにクロージャが生まれる」特徴を使ってみます。 繰り返し処理内でイベントハンドラを作る まずは、何の工夫もなくやってみます。今回はjQueryも使います。 $(function() { var data = [ {label:'リンク１', value:1}, {label:'リンク２', value:2}, {label:'リンク３', value:3}, {label:'リンク４', value:4}, {label:'リンク５', value:5} ]; var ul = $('<ul/>'); for(var i = 0, l = data.length; i < l; i++) { var item = data[i]; var li = $('
Touch Eventを実装したらいろんなサイトがぶっ壊れた
Life with Web Browser Engine (Gecko, WebKit and etc), Mobile and etc. 以前からMozTouchってのがFirefoxのWindows版だけサポートしてたんだけど、Firefox 18 (Windows版)で、W3C Touch Eventのサポートをするコードを突っ込んだ。僕がイニシャルコードを書いて、jmartinsに直してもらったんだけど。なのでWindows 7以降でタッチイベントをサポートしたデバイス (ThinkPad T400sとか) だとデスクトップ版でもタッチイベントが使えるようになった。(ChromeのWindows版も最近のバージョンからサポートしてるよ！) これを実装したら、地図がマウスでスクロールできない（意味がわからない）、スクロールバーが表示される（意味わからない）、ビデオが再生できない（意味
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Perfume 5th Tour 2014「ぐるんぐるん」
Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.
