TechCrunch | Startup and Technology NewsLimited space! Get on waitlist to be the first to know when tickets go live!
Angular JSを使おう3 Directiveを作ろう « NAVER Engineers' Blog
こんにちは、こんばんわ、お久しぶりです。 NHN Japan ウェブサービス本部開発1室UITチーム 吉田徹生(@teyosh)と申します。 3ヶ月ぶりの登場です。 AngularJSって何？という方は第一回目の記事[Angular JSを使おう]を御覧ください。 さて、3ヶ月の間にstableは1.0.5と順調にアップデートしております。 ちゃんとアップデートがされると使っていても安心できます。 今回はAngularJSを利用していると気になるng-clickやng-repaeatなどAttributeに設定されているものについてです。 これはdirectiveの拡張でAngularが機能を設定してくれます。 Hello, World 以下のようなコードがあるとします。 <div ng-app='hello'> <div ng-controller='helloCtrl'> <
JavaScriptを楽しく学べるRPG CodeCombat
前回、Rubyを楽しく学ぶコンテンツのエントリで紹介したRuby Warriorが楽しいという声を幾つか見かけました。 オンラインでコーディングできるサービスは色々ありますが、デザインや音楽、ゲーム性が優れていて熱中しやすいのでしょう。 残念ながら私は参加できませんでしたが、今月のGinza.rbもRuby Warriorをみんなでやってみるという催しで盛り上がったようです。 RubyWarriorのBGMが中毒性高い。しばらく口ずさんでしまいそう。#ginzarb— Masatoshi Iwasaki (@masa_iwasaki) April 15, 2014 RubyWarriorに集中していてだれもツイートしてない^^; #ginzarb— 高橋 明 (@Talos208) April 15, 2014 今回は同様にゲーム感覚でJavaScriptを学習でき、日本語化もされているC
D3.js
D3The JavaScript library for bespoke data visualization Create custom dynamic visualizations with unparalleled flexibility
「超チューニング祭 ～ニコニコを超快適にしてみた～ in ニコニコ超会議３」の問題点 - Webパフォーマンスについて
来る2014年4月26日(土)・27日(日)に、「ニコニコ超会議3」が開催され、その中で「超チューニング祭 ～ニコニコを超快適にしてみた～」が開催されるそうです。 これは、現行のスマートフォンサイトのTopページのソースファイルを競技者がチューニングして、速度やデザイン・UIの改善をして、速度と使い勝手を競うのだそうです。 「これは面白そうだ! 会場は家から近いし!」と思って参加するつもりでいましたが、事前調査で計測してみた結果、フロントエンドのチューニングでは速くならないことがわかったので、その内容について説明します。 (主催者の方にも、フロントエンドのチューニングでは速くならないという情報は伝えてあります。) まずは、計測データ まずは実際のトップページ(http://sp.nicovideo.jp)の計測データを見てみましょう。 計測は、NTT DoCoMoとSoftBankの3G回
Sugar - A Javascript utility library for working with native objects.
Sugar is a Javascript utility library for working with native objects. It lets you do stuff like this:
直感的に使える便利なjavascriptライブラリ「Sugar」 - 世界中の羊をかき集めて
「Sugar」公式サイト http://sugarjs.com/ すごくいいです。 ネイティブオブジェクトを拡張し、便利なメソッドをたくさん使えるようにしたライブラリ。 Ajaxやアニメーション、Dom操作をするためのライブラリではありません。 Javascriptで面倒な日付操作や、配列、数値、文字列、オブジェクト等の操作を楽にするためのライブラリです。 もちろんクロスブラウザ対応されており、jQueryとも併用できます。 また、下でも書いてますが、日本語を考慮した処理がなされていて、日本人には嬉しいライブラリだと思います。 「Sugarの機能について」 http://sugarjs.com/features 「SugarのAPI一覧」 http://sugarjs.com/api もう、上のページを見れば、その便利さがすぐ分かると思います。 その中でも、便利そうなメソッドを見ていきまし
ECMAScript 6に向け、よってたかって進化が続くJavaScript
JavaScriptはEcma Internationalと呼ばれる標準化団体によって言語仕様の標準化が行われています。最新バージョンは、2009年12月に策定されたECMAScript 5th Editon。これが昨年4月にISO/IEC 16262 3rd Editionとして国際標準にもなりました。その後、昨年の6月には修正版のECMAScript 5.1が公開されています。 現在のWebブラウザがJavaScriptの仕様として参照しているのが、このECMAScript仕様です。 そして次期版ECMAScriptとして、ECMAScript 6th EditionもしくはES.nextもしくはProject Harmonyなどと呼ばれる仕様策定作業が進行中です。2013年末の策定完了を予定しているようです。 それまでまだ2年ありますが、すでに次期版ECMAScriptに関する情報が
プロトタイプ（prototype）によるJavaScriptのオブジェクト指向
はじめに JavaScriptはオブジェクト指向言語です。しかし、そのオブジェクトの性質は、他に良く知られているオブジェクト指向言語のJavaやC++と大きく異なっています。 そこでこの記事では、なぜそのような違いがあるのか、JavaScriptにおけるオブジェクト指向の言語思想を見ていくと共に、その違いの根幹であるプロトタイプについて解説していきたいと思います。 なお、この記事はJavaScriptの解説ですが、その内容は、標準仕様のECMAScriptで扱われる範囲に基づいています。従って、同じくECMAScriptを元にしている言語（JScript、ActionScript）でも通じる内容になっています。 対象読者 プログラミングの基本的な知識、ならびにオブジェクトやメソッドと言った基礎的な概念については、ここでは解説しません。最低限、オブジェクト指向プログラミングについて理解をして
第1回 ECMA-262 Edition5.1読書会
JavaScriptの言語仕様を知ってみよう！ 昨年9月、「ECMA-262 Edition5.1を読む」という書籍が出ました。非常に広く使われている「JavaScript」というプログラミング言語について、その仕様・規格について解説されている書籍です。 普段はその仕様を理解しなくても、検索して情報を得ながら、または実装しながら体感し、日々プログラミングしているかと思います。しかし、その言語仕様を知ることで、より深い理解を得ることができ、幅広い環境で動作するプログラムが書け、強いフロントエンドのアーキテクチャを作ることができるのではないでしょうか。 今回は、本書の著者である竹迫良範さんのご協力の下、読書会を開催します。 複数回に渡る予定ですが、初回のみ参加者に特典をご用意いただけることになりました。皆様のご参加をお待ちしております。 ※特典1：電子試読版PDFの事前ダウンロード（36ページ
"note"がAngularJSでどうやってSEO, Open Graphの対応をしているか｜和田 晃一良｜note
noteはAngularJSを使って、ブラウザで描写しているこの"note"というサービスはAngularJSを使って、JavaScript側（つまりブラウザ側）でノートの中身を公開しているみたいなのです。 それはブラウザでソースを見てみるとわかります。 例えばhttps://note.mu/sadaaki/n/nd921f3f7c635のノートのソースをChromeで見てみると・・・ まずhtmlタグにng-appのプロパティがついています。これはAngularJSを使うならば必要なプロパティで、ここからnoteはAngularJSを使っているんだなあと分かります。 AngularJSは簡単に言うと、サーバー側ではなくブラウザ側でHTMLを描写する仕組みです。これを利用するとどんな利点があるのか。僕の理解している範囲内だと、サーバー側はベースとなるHTML（上のソース）と各ノートのJSO
[CSS]デモが楽しい！要素にclassを与えるだけでさまざまなCSS3アニメーションを適用するスタイルシート -Magic
Slide, Math, Tin, Bomb Magicの使い方 Step 1: 外部ファイル 当スタイルシートを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="yourpath/magic.css"> </head> Step 2: 要素にアニメーションを指定 アニメーションはmagic.css単体で動作しますが、jQueryと組み合わせることでユーザーのさまざまなアクションをトリガーにすることができます。 まずはjQueryのセレクタで要素を指定し、例えばホバー時にアニメーションさせる時はこんな感じに。 $('.yourdiv').hover(function () { $(this).addClass('magictime puffIn'); }); 特定の時間、ループでアニメーションさせる時はこんな感じ。 setInt
Webアプリに高機能な音声認識を追加するWeb Speech API - Kesinの知見置き場
Microphone' by Juan_Alvaro, http://www.flickr.com/photos/31590610@N03/5408706936/ CC by 2.0 最近、にわかに音声認識というものが盛り上がっています。 スマートフォンに搭載されている、AppleのSiri、NTTドコモのしゃべってコンシェル、Googleの音声検索あたりが有名ですが、お掃除ロボやエアコン、カーナビといった家電にも音声認識機能が搭載されるようになってきました。 認識の精度や意識の問題（人前で機械に話しかけるのはちょっと恥ずかしい）などの課題はありますが、音声認識はアプリや家電のUIの一部としてこれから普及していくと思われます。 ですが、一般の開発者にとって音声認識機能を自分のアプリやウェブサイトに組み込むのはまだまだ難しいです。 Juliusのようなオープンソースの音声認識システムもありま
CoffeeScriptやSassなどの使用時にオススメのGruntプラグイン一覧
連載目次 前回の記事「ブラックなWeb開発現場の救世主、Gruntのインストールと使い方」では、Gruntについての概要とセットアップ、基本的な動作を確認してみました。 今回は、Gruntで使用できるいろいろな「プラグインモジュール」（以下、プラグイン）をインストールし、実際に動かして動作を確認してみましょう。 Gruntのプラグインとは、何ができるのか 前回の繰り返しになりますが、プラグインを使用すると、Gruntでいろいろなタスクを実行できるようになります。実行できるタスクの内容はプラグインによってさまざまですが、幾つか例を挙げると、下記のような作業が自動化できます。 CoffeeScript／TypeScriptをJavaScriptへコンパイル（変換） SCSS（Sass）／LESSをCSSへコンパイル（変換） ファイルの圧縮／結合／最適化 JSHintでJavaScriptの構文
HTML FormにPUT/DELTEは必要なのか、あるいはJSer界の分断 #桜JS - teppeis blog
先日、都内某所で開催された#桜JSに参加したので、個人の日記レベルの感想を書いてみる。 #桜JS - Togetterまとめ 桜JSでご飯を食べながらLT大会をした | Web scratch 細かいことはazuさんのまとめを見てもらうとして、個人的におもしろかったのがHTML FormのPUT/DELETEについての議論。 なぜ html の form は PUT / DELETE をサポートしないのか？ - Block Rockin’ Codes Jxckさんの経緯まとめを踏まえて、じゃあこれからHTML FormにPUT/DELETEを追加する必要あるの？っていう点で意見が割れた。 個人的には、この話を聞いたとき、確かに仕様としては欠けてる感じがするけど、いまさら実装されても自分はForm PUT/DELETE使うことはないだろうなと思っていた。理由は、FormでPUT/DELETE
JavaScriptの関数定義 - Nao Minami's Blog
こんばんは、south37です。 最近はEffective JavaScriptを読んでるのですが、知らなかった事がポロポロ出てくるので、とても勉強になっています。これからはちょいちょい、そーやって勉強した事をまとめていけたらいいなと思います。 って事で、今日は関数定義の話をしたいと思います。 関数宣言と関数式 JavaScriptにおける関数定義には、大きく分けて3つの方法があります。 function文を使う方法(関数宣言) function演算子を使う方法(関数式) Functionコンストラクタを使う方法 1と2が一般的によく使われる方法ですね。 // 方法1 function multi(x, y) { return x * y; } // 方法2 var multi = function(x, y) { return x * y; }; // これも方法2 var multi
jQueryで指定されたイベントの定義場所を取得する方法
jQueryで指定されたイベントの定義場所を取得する方法 セミナー時にHTML上のイベントが指定されている要素から、実際にイベントを指定したコードが書かれているJavaScriptファイルや場所を知りたいと質問を受けました。 調べたところ良さそうな方法があったのでシェアしておきます。 ちょっと動画に取ってみたので、動画でご確認ください。 なにをやっているかというと、まず、デベロッパーツールを開き、検証したい要素を選択します。 次に右クリックして「Add attribute」から適当なidを指定します。今回は「js_debug」というidを指定しています。 次にデベロッパーツールの右上のアイコンからコンソールを開き以下のコードを入力しEnterを押します。 $._data($("#js_debug").get(0), "events"); Object->click->0の順番に開いていき、
Introduction | Learn Javascript
Interactive online course for learning Javascript.Learn Javascript This book will teach you the basics of programming and Javascript. Whether you are an experienced programmer or not, this book is intended for everyone who wishes to learn the JavaScript programming language. JavaScript (JS for short) is the programming language that enables web pages to respond to user interaction beyond the basic
TypeScriptとは？ Visual Studioを使って開発してみよう
1.0正式版がリリース。TypeScriptは、Visual Studio上でも開発できる。C#などでコードを書いているVisual Studioユーザー向けに、その利用手順や特徴を解説。 連載 INDEX 次回 → TypeScriptとは TypeScriptとは、マイクロソフトが中心となって開発を進めているスクリプト言語で、コンパイル結果がJavaScriptコードになる、いわゆる「AltJS」と呼ばれる種類の言語である。AltJSにはTypeScript以外にもメジャーなものとして、CoffeeScript、Dart、Haxe、JSXなどがあり、TypeScriptはその仲間ということになる。 TypeScriptの公式ページ（英語） 日本時間の2014年4月3日、開発者向けイベント「Build 2014」で、バージョン1.0がリリースされた。「ついに1.0に到達した」といった感じ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptユーティリティライブラリの紹介
