https://b.hatena.ne.jp/beth321/*javascript/ *javascriptに関するbeth321のはてなブックマーク (157) https://coliss.com/articles/build-websites/operation/javascript/js-draw-and-animate-underline.html beth321 2015-04-28T03:20:00Z コリス エフェクト jQuery UI JavaScript アニメーション あとで読む animation *JavaScript JS <blockquote cite="https://coliss.com/articles/build-websites/operation/javascript/js-draw-and-animate-underline.html" title="[JS]一見普通のアンダーライン、ホバーすると弦を弾くようにアニメーションし、音を奏でる美しいスクリプト -underlineJS"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fjavascript%2Fjs-draw-and-animate-underline.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/javascript/js-draw-and-animate-underline.html">[JS]一見普通のアンダーライン、ホバーすると弦を弾くようにアニメーションし、音を奏でる美しいスクリプト -underlineJS</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/javascript/js-draw-and-animate-underline.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/250291be54658510c93a3998d9a26a35b708bb4d/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015042703.gif" alt="[JS]一見普通のアンダーライン、ホバーすると弦を弾くようにアニメーションし、音を奏でる美しいスクリプト -underlineJS" title="[JS]一見普通のアンダーライン、ホバーすると弦を弾くようにアニメーションし、音を奏でる美しいスクリプト -underlineJS" class="entry-image" /></a></p><p>アンダーラインのデザインの美しさ、アニメーションの楽しさにこだわったスクリプトを紹介します。 ↓はアニメーションGIFなので音はありませんが、実際のデモでは弦楽器のような音を奏でます。 びよ～んとなるのが、かなり気持ちいいです。</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/js-draw-and-animate-underline.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/javascript/js-draw-and-animate-underline.html" alt="はてなブックマーク - [JS]一見普通のアンダーライン、ホバーすると弦を弾くようにアニメーションし、音を奏でる美しいスクリプト -underlineJS" title="はてなブックマーク - [JS]一見普通のアンダーライン、ホバーすると弦を弾くようにアニメーションし、音を奏でる美しいスクリプト -underlineJS" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/js-draw-and-animate-underline.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 43 https://codezine.jp/news/detail/8678 beth321 2015-04-25T00:13:03Z ライブラリ あとで読む shell github Atom Electron javascript デスクトップ 開発 *javascript <blockquote cite="https://codezine.jp/news/detail/8678" title="GitHub、JavaScriptでデスクトップアプリが作れるライブラリAtom Shellを、Electronに改称"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcodezine.jp%2Fnews%2Fdetail%2F8678" alt="" /> <a href="https://codezine.jp/news/detail/8678">GitHub、JavaScriptでデスクトップアプリが作れるライブラリAtom Shellを、Electronに改称</a></cite><p><a href="https://codezine.jp/news/detail/8678"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/1e4189ad535130136d742103e028dcddcc265bc7/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcodezine.jp%2Fstatic%2Fcommon%2Fimages%2Fczlogo4fb_ogp.png" alt="GitHub、JavaScriptでデスクトップアプリが作れるライブラリAtom Shellを、Electronに改称" title="GitHub、JavaScriptでデスクトップアプリが作れるライブラリAtom Shellを、Electronに改称" class="entry-image" /></a></p><p>米GitHubは、4月23日（現地時間）にJavaScriptによってデスクトップアプリケーションを作成できる、クロスプラットフォームのデスクトップアプリケーションシェルAtom Shellの名称を、Electronに変更した。今回の改称に合わせて、公式サイトのURLも変更する。 Electron（旧Atom Shell）は、もともとAtomエディタでChromi...</p><p><a href="https://b.hatena.ne.jp/entry/s/codezine.jp/news/detail/8678"><img src="https://b.hatena.ne.jp/entry/image/https://codezine.jp/news/detail/8678" alt="はてなブックマーク - GitHub、JavaScriptでデスクトップアプリが作れるライブラリAtom Shellを、Electronに改称" title="はてなブックマーク - GitHub、JavaScriptでデスクトップアプリが作れるライブラリAtom Shellを、Electronに改称" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/codezine.jp/news/detail/8678"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 153 https://gihyo.jp/dev/serial/01/crossbrowser-javascript/0009 beth321 2015-03-26T04:41:34Z jsstudy#09 あとで読む JavaScript JSON DOM クロスブラウザ webPG tips Security *Javascript <blockquote cite="https://gihyo.jp/dev/serial/01/crossbrowser-javascript/0009" title="第9回　実践DOMスクリプティング#2：DOMとHTML | gihyo.jp"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fgihyo.jp%2Fdev%2Fserial%2F01%2Fcrossbrowser-javascript%2F0009" alt="" /> <a href="https://gihyo.jp/dev/serial/01/crossbrowser-javascript/0009">第9回　実践DOMスクリプティング#2：DOMとHTML | gihyo.jp</a></cite><p><a href="https://gihyo.jp/dev/serial/01/crossbrowser-javascript/0009"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/84f2ba41f0972dbbe29103780a721a8cbae42cf5/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fgihyo.jp%2Fassets%2Fimages%2FICON%2F2010%2F582_crossbrowser-javascript.png" alt="第9回　実践DOMスクリプティング#2：DOMとHTML | gihyo.jp" title="第9回　実践DOMスクリプティング#2：DOMとHTML | gihyo.jp" class="entry-image" /></a></p><p>こんにちは、太田です。前回はHTMLとテキスト操作を解説しました。今回は、さらにHTMLの操作の実例を中心に解説していきます。 JavaScriptとエスケープ まず、エスケープについて確認しておきましょう。外部から入力されたデータを画面上に表示する際はクロスサイトスクリプティングに注意する必要があることはもはや常...</p><p><a href="https://b.hatena.ne.jp/entry/s/gihyo.jp/dev/serial/01/crossbrowser-javascript/0009"><img src="https://b.hatena.ne.jp/entry/image/https://gihyo.jp/dev/serial/01/crossbrowser-javascript/0009" alt="はてなブックマーク - 第9回　実践DOMスクリプティング#2：DOMとHTML | gihyo.jp" title="はてなブックマーク - 第9回　実践DOMスクリプティング#2：DOMとHTML | gihyo.jp" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/gihyo.jp/dev/serial/01/crossbrowser-javascript/0009"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 34 https://atmarkit.itmedia.co.jp/ait/articles/1206/01/news143.html beth321 2015-03-21T07:56:02Z web *JavaScript svg web制作 CSS デザイン javascript HTML あとで読む webdesign <blockquote cite="https://atmarkit.itmedia.co.jp/ait/articles/1206/01/news143.html" title="10分でわかるSVG 基礎編"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fatmarkit.itmedia.co.jp%2Fait%2Farticles%2F1206%2F01%2Fnews143.html" alt="" /> <a href="https://atmarkit.itmedia.co.jp/ait/articles/1206/01/news143.html">10分でわかるSVG 基礎編</a></cite><p><a href="https://atmarkit.itmedia.co.jp/ait/articles/1206/01/news143.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/58ad135f413f1c67f8d81fcaed2aad675a6e905a/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fimage.itmedia.co.jp%2Fait%2Farticles%2F1206%2F01%2Fr20image01.png" alt="10分でわかるSVG 基礎編" title="10分でわかるSVG 基礎編" class="entry-image" /></a></p><p>知って得する、Webブラウザ上で利用できるグラフィック関連技術。HTMLのような感覚で図形が描画できる「SVG」をハックしよう SVGドキュメントの書き方 本連載では、Webブラウザ上で利用できるグラフィック技術を分かりやすく紹介しています。第2回となる今回のテーマはSVGです。 ご存じの方も多いと思いますが、SVGはXML...</p><p><a href="https://b.hatena.ne.jp/entry/s/atmarkit.itmedia.co.jp/ait/articles/1206/01/news143.html"><img src="https://b.hatena.ne.jp/entry/image/https://atmarkit.itmedia.co.jp/ait/articles/1206/01/news143.html" alt="はてなブックマーク - 10分でわかるSVG 基礎編" title="はてなブックマーク - 10分でわかるSVG 基礎編" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/atmarkit.itmedia.co.jp/ait/articles/1206/01/news143.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 253 https://coliss.com/articles/build-websites/operation/javascript/js-liquid-image-fx.html beth321 2015-03-12T07:15:21Z *webデザイン コリス JavaScript *javascript jquery webdesign 画像 アニメーション webデザイン Ajax <blockquote cite="https://coliss.com/articles/build-websites/operation/javascript/js-liquid-image-fx.html" title="[JS]液体が流れるように画像を少しずつ表示するスクリプト -Liquid Image FX"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fjavascript%2Fjs-liquid-image-fx.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/javascript/js-liquid-image-fx.html">[JS]液体が流れるように画像を少しずつ表示するスクリプト -Liquid Image FX</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/javascript/js-liquid-image-fx.html"><img src="" alt="[JS]液体が流れるように画像を少しずつ表示するスクリプト -Liquid Image FX" title="[JS]液体が流れるように画像を少しずつ表示するスクリプト -Liquid Image FX" class="entry-image" /></a></p><p>Flashを使用せずに、液体が流れるように画像を少しずつ表示するスクリプトをWeb Reflectionから紹介します。 JavaScript Liquid Image FX demo 上記のデモでは、Firefoxのロゴが左から順に上下左右から液体が流れるように画像を少しずつ表示します。 また、動きを組み合わせたデモもあります。</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/js-liquid-image-fx.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/javascript/js-liquid-image-fx.html" alt="はてなブックマーク - [JS]液体が流れるように画像を少しずつ表示するスクリプト -Liquid Image FX" title="はてなブックマーク - [JS]液体が流れるように画像を少しずつ表示するスクリプト -Liquid Image FX" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/js-liquid-image-fx.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 89 https://ruby-rails.hatenadiary.com/entry/20150311/1426062668 beth321 2015-03-12T03:36:41Z () *javascript javascript あとで読む プログラミング系読み log 設定 console オブジェクト指向 *あとで読む <blockquote cite="https://ruby-rails.hatenadiary.com/entry/20150311/1426062668" title="JavaScriptの少し独特なオブジェクト指向についてまとめてみた - Rails Webook"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fruby-rails.hatenadiary.com%2Fentry%2F20150311%2F1426062668" alt="" /> <a href="https://ruby-rails.hatenadiary.com/entry/20150311/1426062668">JavaScriptの少し独特なオブジェクト指向についてまとめてみた - Rails Webook</a></cite><p><a href="https://ruby-rails.hatenadiary.com/entry/20150311/1426062668"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/97d597c65773a3964f0ace502d028e410ea6c596/backend=imagemagick;height=90;version=1;width=120/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fn%2Fnipe880324%2F20150311%2F20150311105033.jpg" alt="JavaScriptの少し独特なオブジェクト指向についてまとめてみた - Rails Webook" title="JavaScriptの少し独特なオブジェクト指向についてまとめてみた - Rails Webook" class="entry-image" /></a></p><p>Photo by Flickr: slworking2&#39;s Photostream 既にJavaやPHPなどオブジェクト指向言語を生業としてやっているが、その感覚でJavaScriptを少し扱っているて、いまいちJavaScript分からないという方を対象に、それらのプログラム言語とは違う、「少し独特なJavaScriptのオブジェクト指向」について説明します。 目次 オブジ...</p><p><a href="https://b.hatena.ne.jp/entry/s/ruby-rails.hatenadiary.com/entry/20150311/1426062668"><img src="https://b.hatena.ne.jp/entry/image/https://ruby-rails.hatenadiary.com/entry/20150311/1426062668" alt="はてなブックマーク - JavaScriptの少し独特なオブジェクト指向についてまとめてみた - Rails Webook" title="はてなブックマーク - JavaScriptの少し独特なオブジェクト指向についてまとめてみた - Rails Webook" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/ruby-rails.hatenadiary.com/entry/20150311/1426062668"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 335 https://coliss.com/articles/build-websites/operation/javascript/javascript-framework-rightjs.html beth321 2015-03-09T01:28:24Z *Javascript コリス javascript ライブラリ library ajax web フレームワーク RightJS Framework <blockquote cite="https://coliss.com/articles/build-websites/operation/javascript/javascript-framework-rightjs.html" title="[JS]高速で軽量なJavaScriptのフレームワーク -RightJS"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fjavascript%2Fjavascript-framework-rightjs.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/javascript/javascript-framework-rightjs.html">[JS]高速で軽量なJavaScriptのフレームワーク -RightJS</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/javascript/javascript-framework-rightjs.html"><img src="" alt="[JS]高速で軽量なJavaScriptのフレームワーク -RightJS" title="[JS]高速で軽量なJavaScriptのフレームワーク -RightJS" class="entry-image" /></a></p><p>RightJS RightJSと他ライブラリとの比較 IE, Fx, Op, Safari, Chromeの各ブラウザでのパフォーマンスは、jQuery、Prototype、Mootoolsなどの主要なJavaScriptのライブラリと比較して、概ね高速なパフォーマンス結果となっています。 デモではモーフィング、ハイライト、フェード、スライドなどのビジュアルエフェクトを...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/javascript-framework-rightjs.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/javascript/javascript-framework-rightjs.html" alt="はてなブックマーク - [JS]高速で軽量なJavaScriptのフレームワーク -RightJS" title="はてなブックマーク - [JS]高速で軽量なJavaScriptのフレームワーク -RightJS" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/javascript-framework-rightjs.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 73 https://jxck.hatenablog.com/entry/ajax-10th-anniversary beth321 2015-02-18T01:18:26Z *program Google flash ajax Web あとで読む 歴史 history *history *javascript <blockquote cite="https://jxck.hatenablog.com/entry/ajax-10th-anniversary" title="Ajax 誕生から 10 年とこれから - Block Rockin’ Codes"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fjxck.hatenablog.com%2Fentry%2Fajax-10th-anniversary" alt="" /> <a href="https://jxck.hatenablog.com/entry/ajax-10th-anniversary">Ajax 誕生から 10 年とこれから - Block Rockin’ Codes</a></cite><p><a href="https://jxck.hatenablog.com/entry/ajax-10th-anniversary"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/eed9a596c08c43adee2d6120a9f58b35c9a88251/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2Fb11481e0be90bbd835983b6dfd49f9b7fdb53b72%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttp%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252FJ%252FJxck%252F20150218%252F20150218010312.png" alt="Ajax 誕生から 10 年とこれから - Block Rockin’ Codes" title="Ajax 誕生から 10 年とこれから - Block Rockin’ Codes" class="entry-image" /></a></p><p>Intro 誕生と言うのが正しいか微妙だけど、多分誕生でいいと思います。 というのも、「Ajax」という名前の出典は以下の記事で、この記事が書かれたのが今日からちょうど 10 年前でした。 Ajax: A New Approach to Web Applications (当時から、 URL が一回変わっている) Web 初めてまだ 10 年たって無いんで、全部見てき...</p><p><a href="https://b.hatena.ne.jp/entry/s/jxck.hatenablog.com/entry/ajax-10th-anniversary"><img src="https://b.hatena.ne.jp/entry/image/https://jxck.hatenablog.com/entry/ajax-10th-anniversary" alt="はてなブックマーク - Ajax 誕生から 10 年とこれから - Block Rockin’ Codes" title="はてなブックマーク - Ajax 誕生から 10 年とこれから - Block Rockin’ Codes" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/jxck.hatenablog.com/entry/ajax-10th-anniversary"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 267 https://gihyo.jp/dev/serial/01/crossbrowser-javascript/0023 beth321 2015-01-28T23:20:32Z JavaScript UI スライダー js Slider HTML5 *Javascript tips Programming form <blockquote cite="https://gihyo.jp/dev/serial/01/crossbrowser-javascript/0023" title="第23回　JavaScriptによるUIの実装：スライダー | gihyo.jp"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fgihyo.jp%2Fdev%2Fserial%2F01%2Fcrossbrowser-javascript%2F0023" alt="" /> <a href="https://gihyo.jp/dev/serial/01/crossbrowser-javascript/0023">第23回　JavaScriptによるUIの実装：スライダー | gihyo.jp</a></cite><p><a href="https://gihyo.jp/dev/serial/01/crossbrowser-javascript/0023"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/84f2ba41f0972dbbe29103780a721a8cbae42cf5/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fgihyo.jp%2Fassets%2Fimages%2FICON%2F2010%2F582_crossbrowser-javascript.png" alt="第23回　JavaScriptによるUIの実装：スライダー | gihyo.jp" title="第23回　JavaScriptによるUIの実装：スライダー | gihyo.jp" class="entry-image" /></a></p><p>こんにちは、前回、前々回に引き続き、JavaScriptでUIを実装する方法を紹介していきます。今回は前回のドラッグと関連の深いスライダーを実装してみます。 基本のスライダー スライダーは簡単にいえば動きの制限されたドラッグです。 今回も、最初はなるべくシンプルに実装してみます。まず、基本となるHTMLは次の通りで...</p><p><a href="https://b.hatena.ne.jp/entry/s/gihyo.jp/dev/serial/01/crossbrowser-javascript/0023"><img src="https://b.hatena.ne.jp/entry/image/https://gihyo.jp/dev/serial/01/crossbrowser-javascript/0023" alt="はてなブックマーク - 第23回　JavaScriptによるUIの実装：スライダー | gihyo.jp" title="はてなブックマーク - 第23回　JavaScriptによるUIの実装：スライダー | gihyo.jp" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/gihyo.jp/dev/serial/01/crossbrowser-javascript/0023"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 47 https://gigazine.net/news/20150122-matter-js/ beth321 2015-01-23T01:02:05Z +参考記事 あとで読む 物理 *JavaScript javascript 技術 js *あとで読む スマートフォン <blockquote cite="https://gigazine.net/news/20150122-matter-js/" title="2次元物理計算エンジンをブラウザで実現する「Matter.js」"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fgigazine.net%2Fnews%2F20150122-matter-js%2F" alt="" /> <a href="https://gigazine.net/news/20150122-matter-js/">2次元物理計算エンジンをブラウザで実現する「Matter.js」</a></cite><p><a href="https://gigazine.net/news/20150122-matter-js/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/4ed1b441671e8fb0d53db019ab68c51ddcfb0626/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fi.gzn.jp%2Fimg%2F2015%2F01%2F22%2Fmatter-js%2F00-top.png" alt="2次元物理計算エンジンをブラウザで実現する「Matter.js」" title="2次元物理計算エンジンをブラウザで実現する「Matter.js」" class="entry-image" /></a></p><p>面白いアニメーションを作るために物理演算エンジンを使いこなせればとても便利ですが、自力で物理演算に取り組むには高度な知識と技術が必要となります。そんな扱いの難しい物理演算を手軽に導入できるJavaScriptのAPIが「Matter.js」です。 Matter.js - a 2D rigid body JavaScript physics engine http://brm.io/matt...</p><p><a href="https://b.hatena.ne.jp/entry/s/gigazine.net/news/20150122-matter-js/"><img src="https://b.hatena.ne.jp/entry/image/https://gigazine.net/news/20150122-matter-js/" alt="はてなブックマーク - 2次元物理計算エンジンをブラウザで実現する「Matter.js」" title="はてなブックマーク - 2次元物理計算エンジンをブラウザで実現する「Matter.js」" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/gigazine.net/news/20150122-matter-js/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 132 https://gihyo.jp/dev/serial/01/nodejs/0004 beth321 2015-01-19T00:58:18Z プログラミング c node.js MongoDB *javascript JavaScript nodejs *あとで node 基礎から学ぶNode.js <blockquote cite="https://gihyo.jp/dev/serial/01/nodejs/0004" title="第4回　Node.jsアプリケーションとMongoDBの連携 | gihyo.jp"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fgihyo.jp%2Fdev%2Fserial%2F01%2Fnodejs%2F0004" alt="" /> <a href="https://gihyo.jp/dev/serial/01/nodejs/0004">第4回　Node.jsアプリケーションとMongoDBの連携 | gihyo.jp</a></cite><p><a href="https://gihyo.jp/dev/serial/01/nodejs/0004"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/a87361fdeb5a0708b18a3a49555da0d5ce115fd3/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fgihyo.jp%2Fassets%2Fimages%2FICON%2F2012%2F951_nodejs.png" alt="第4回　Node.jsアプリケーションとMongoDBの連携 | gihyo.jp" title="第4回　Node.jsアプリケーションとMongoDBの連携 | gihyo.jp" class="entry-image" /></a></p><p>はじめに 前回から、いよいよNode.jsを使ったWebアプリケーションを作成しはじめました。前回はデータを保存および読み出す処理がなかったので、今回はデータベースとの連携を実装したいと思います。使うのはMongoDBです。リレーショナルデータベースに対して、MongoDBはドキュメント指向データベースという位置づけです...</p><p><a href="https://b.hatena.ne.jp/entry/s/gihyo.jp/dev/serial/01/nodejs/0004"><img src="https://b.hatena.ne.jp/entry/image/https://gihyo.jp/dev/serial/01/nodejs/0004" alt="はてなブックマーク - 第4回　Node.jsアプリケーションとMongoDBの連携 | gihyo.jp" title="はてなブックマーク - 第4回　Node.jsアプリケーションとMongoDBの連携 | gihyo.jp" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/gihyo.jp/dev/serial/01/nodejs/0004"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 40 https://gihyo.jp/dev/serial/01/bk/0001 beth321 2015-01-13T02:03:30Z () knowledge JavaScript bk IE learn tips programming *Javascript badknowhow <blockquote cite="https://gihyo.jp/dev/serial/01/bk/0001" title="#01　JavaScriptのバッドノウハウ | gihyo.jp"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fgihyo.jp%2Fdev%2Fserial%2F01%2Fbk%2F0001" alt="" /> <a href="https://gihyo.jp/dev/serial/01/bk/0001">#01　JavaScriptのバッドノウハウ | gihyo.jp</a></cite><p><a href="https://gihyo.jp/dev/serial/01/bk/0001"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/1424620904524f7c172928d2991bcd14efa68142/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fgihyo.jp%2Fassets%2Fimages%2FICON%2F2008%2F192_bk.png" alt="#01　JavaScriptのバッドノウハウ | gihyo.jp" title="#01　JavaScriptのバッドノウハウ | gihyo.jp" class="entry-image" /></a></p><p>今回から「BK通信」（⁠ビーケーツウシン）と題して、連載することになった高林と申します。以前連載していた「プログラミングの光景」ではデバッグ、コードレビューといった大きなテーマを取り上げましたが、今回の連載では日常的に遭遇するチマチマした「バッドノウハウ」（⁠Bad Knowhow）について書いていきたいと思い...</p><p><a href="https://b.hatena.ne.jp/entry/s/gihyo.jp/dev/serial/01/bk/0001"><img src="https://b.hatena.ne.jp/entry/image/https://gihyo.jp/dev/serial/01/bk/0001" alt="はてなブックマーク - #01　JavaScriptのバッドノウハウ | gihyo.jp" title="はてなブックマーク - #01　JavaScriptのバッドノウハウ | gihyo.jp" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/gihyo.jp/dev/serial/01/bk/0001"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 40 http://www.dtp-transit.jp/adobe/illustrator/post_2040.html beth321 2015-01-04T21:15:27Z Illustrator =プラグイン あとで読む *javascript スクリプト cc デザイン まとめ 便利 WEBデザイン <blockquote cite="http://www.dtp-transit.jp/adobe/illustrator/post_2040.html" title="Illustratorを使うとき、私が手放せない10個のスクリプト｜DTP Transit"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fwww.dtp-transit.jp%2Fadobe%2Fillustrator%2Fpost_2040.html" alt="" /> <a href="http://www.dtp-transit.jp/adobe/illustrator/post_2040.html">Illustratorを使うとき、私が手放せない10個のスクリプト｜DTP Transit</a></cite><p><a href="http://www.dtp-transit.jp/adobe/illustrator/post_2040.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/179f5ee6d13e28509ae5edfa0264021ccd9e06e8/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fwww.dtp-transit.jp%2Fimages%2FAi-howto-script.png" alt="Illustratorを使うとき、私が手放せない10個のスクリプト｜DTP Transit" title="Illustratorを使うとき、私が手放せない10個のスクリプト｜DTP Transit" class="entry-image" /></a></p><p>最近、セミナーでスクリプトを紹介すると評判がよいので、10個選りすぐってみました。 これらを提供してくださっている作者さんたちに感謝します。 はまりどころを見つけると「むちゃくちゃ早く終わる」「手作業ではムリ」なことが実現できるので、「ここでこういうことができると快適になるのに」をリストアップしてお...</p><p><a href="https://b.hatena.ne.jp/entry/www.dtp-transit.jp/adobe/illustrator/post_2040.html"><img src="https://b.hatena.ne.jp/entry/image/http://www.dtp-transit.jp/adobe/illustrator/post_2040.html" alt="はてなブックマーク - Illustratorを使うとき、私が手放せない10個のスクリプト｜DTP Transit" title="はてなブックマーク - Illustratorを使うとき、私が手放せない10個のスクリプト｜DTP Transit" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/www.dtp-transit.jp/adobe/illustrator/post_2040.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 891 https://coliss.com/articles/build-websites/operation/javascript/1504.html beth321 2014-11-26T02:14:21Z ユーザビリティ jQuery コリス JavaScript jquery フォーム form *javascript Web ril <blockquote cite="https://coliss.com/articles/build-websites/operation/javascript/1504.html" title="フォームの入力をより分かりやすくするスクリプト -Context highlighting | コリス"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fjavascript%2F1504.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/javascript/1504.html">フォームの入力をより分かりやすくするスクリプト -Context highlighting | コリス</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/javascript/1504.html"><img src="" alt="フォームの入力をより分かりやすくするスクリプト -Context highlighting | コリス" title="フォームの入力をより分かりやすくするスクリプト -Context highlighting | コリス" class="entry-image" /></a></p><p>Janko at warp speedのエントリーから、フォームの入力時に、ラベルと入力箇所をハイライトして、より分かりやすくするスクリプトを紹介します。 Building a better web forms: Context highlighting using jQuery デモ デモでは残念ながら、labelは使用されておらず、class名「row」のdivで囲まれた範囲にハイライトが...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/1504.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/javascript/1504.html" alt="はてなブックマーク - フォームの入力をより分かりやすくするスクリプト -Context highlighting | コリス" title="はてなブックマーク - フォームの入力をより分かりやすくするスクリプト -Context highlighting | コリス" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/1504.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 41 https://gihyo.jp/dev/serial/01/jaxer beth321 2014-11-15T00:47:54Z b-ajax ___連載物 !planning javascript Aptana jaxer webサービス Ajax *javascript gihyo <blockquote cite="https://gihyo.jp/dev/serial/01/jaxer" title="Aptana JaxerでサーバサイドJavaScriptを始めてみよう！ 記事一覧 | gihyo.jp"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fgihyo.jp%2Fdev%2Fserial%2F01%2Fjaxer" alt="" /> <a href="https://gihyo.jp/dev/serial/01/jaxer">Aptana JaxerでサーバサイドJavaScriptを始めてみよう！ 記事一覧 | gihyo.jp</a></cite><p><a href="https://gihyo.jp/dev/serial/01/jaxer"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/36e14a9d7fd2807704e2940d9f037b2818e7e4a3/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fgihyo.jp%2Fassets%2Fimages%2Fgihyojp-ogp.png" alt="Aptana JaxerでサーバサイドJavaScriptを始めてみよう！ 記事一覧 | gihyo.jp" title="Aptana JaxerでサーバサイドJavaScriptを始めてみよう！ 記事一覧 | gihyo.jp" class="entry-image" /></a></p><p>第4回サンプルアプリ（タスク管理アプリ）の作成 －タスクの編集・削除／入力値チェックの共有－ 栗栖義臣 2008-03-12</p><p><a href="https://b.hatena.ne.jp/entry/s/gihyo.jp/dev/serial/01/jaxer"><img src="https://b.hatena.ne.jp/entry/image/https://gihyo.jp/dev/serial/01/jaxer" alt="はてなブックマーク - Aptana JaxerでサーバサイドJavaScriptを始めてみよう！ 記事一覧 | gihyo.jp" title="はてなブックマーク - Aptana JaxerでサーバサイドJavaScriptを始めてみよう！ 記事一覧 | gihyo.jp" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/gihyo.jp/dev/serial/01/jaxer"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 47 https://gihyo.jp/dev/serial/01/crossbrowser-javascript/0004 beth321 2014-11-12T03:58:27Z プログラミング javascript *Javascript programming クロスブラウザ it dev history ecmascript あとで読む <blockquote cite="https://gihyo.jp/dev/serial/01/crossbrowser-javascript/0004" title="第4回　JavaScriptの基礎知識#1 | gihyo.jp"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fgihyo.jp%2Fdev%2Fserial%2F01%2Fcrossbrowser-javascript%2F0004" alt="" /> <a href="https://gihyo.jp/dev/serial/01/crossbrowser-javascript/0004">第4回　JavaScriptの基礎知識#1 | gihyo.jp</a></cite><p><a href="https://gihyo.jp/dev/serial/01/crossbrowser-javascript/0004"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/84f2ba41f0972dbbe29103780a721a8cbae42cf5/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fgihyo.jp%2Fassets%2Fimages%2FICON%2F2010%2F582_crossbrowser-javascript.png" alt="第4回　JavaScriptの基礎知識#1 | gihyo.jp" title="第4回　JavaScriptの基礎知識#1 | gihyo.jp" class="entry-image" /></a></p><p>こんにちは、太田です。前回はクロスブラウザのパターンについてまとめました。今回はより具体的にJavaScriptの基礎的な部分からそこそこJavaScriptに慣れた方でも間違いやすいポイントを中心に解説します。 JavaScriptの背景知識 JavaScriptは（未だに）誤解されがちな言語です。まずはJavaScriptの背景から解説してい...</p><p><a href="https://b.hatena.ne.jp/entry/s/gihyo.jp/dev/serial/01/crossbrowser-javascript/0004"><img src="https://b.hatena.ne.jp/entry/image/https://gihyo.jp/dev/serial/01/crossbrowser-javascript/0004" alt="はてなブックマーク - 第4回　JavaScriptの基礎知識#1 | gihyo.jp" title="はてなブックマーク - 第4回　JavaScriptの基礎知識#1 | gihyo.jp" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/gihyo.jp/dev/serial/01/crossbrowser-javascript/0004"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 55 https://gihyo.jp/dev/serial/01/crossbrowser-javascript/0003 beth321 2014-11-12T03:29:57Z javascript *Javascript クロスブラウザ _favorite IE browser 開発 プログラミング Tips *あとで読む <blockquote cite="https://gihyo.jp/dev/serial/01/crossbrowser-javascript/0003" title="第3回　クロスブラウザの傾向と対策 | gihyo.jp"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fgihyo.jp%2Fdev%2Fserial%2F01%2Fcrossbrowser-javascript%2F0003" alt="" /> <a href="https://gihyo.jp/dev/serial/01/crossbrowser-javascript/0003">第3回　クロスブラウザの傾向と対策 | gihyo.jp</a></cite><p><a href="https://gihyo.jp/dev/serial/01/crossbrowser-javascript/0003"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/84f2ba41f0972dbbe29103780a721a8cbae42cf5/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fgihyo.jp%2Fassets%2Fimages%2FICON%2F2010%2F582_crossbrowser-javascript.png" alt="第3回　クロスブラウザの傾向と対策 | gihyo.jp" title="第3回　クロスブラウザの傾向と対策 | gihyo.jp" class="entry-image" /></a></p><p>こんにちは、太田です。第1回は各ブラウザの特徴をまとめ、第2回は環境作りについて解説したので、ようやく今回からクロスブラウザの本題に入っていきます。まずはクロスブラウザ対応のパターンを整理し、そのパターンごとの対策をまとめます。 クロスブラウザとはなにか そもそも、クロスブラウザ対応とはどういうこと...</p><p><a href="https://b.hatena.ne.jp/entry/s/gihyo.jp/dev/serial/01/crossbrowser-javascript/0003"><img src="https://b.hatena.ne.jp/entry/image/https://gihyo.jp/dev/serial/01/crossbrowser-javascript/0003" alt="はてなブックマーク - 第3回　クロスブラウザの傾向と対策 | gihyo.jp" title="はてなブックマーク - 第3回　クロスブラウザの傾向と対策 | gihyo.jp" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/gihyo.jp/dev/serial/01/crossbrowser-javascript/0003"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 51 https://gihyo.jp/dev/serial/01/crossbrowser-javascript/0014 beth321 2014-11-08T06:40:00Z *Javascript () javascript prototype JS-資料 クロスブラウザ browser 継承 オブジェクト指向 帰りに読む <blockquote cite="https://gihyo.jp/dev/serial/01/crossbrowser-javascript/0014" title="第14回　プロトタイプと継承 | gihyo.jp"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fgihyo.jp%2Fdev%2Fserial%2F01%2Fcrossbrowser-javascript%2F0014" alt="" /> <a href="https://gihyo.jp/dev/serial/01/crossbrowser-javascript/0014">第14回　プロトタイプと継承 | gihyo.jp</a></cite><p><a href="https://gihyo.jp/dev/serial/01/crossbrowser-javascript/0014"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/84f2ba41f0972dbbe29103780a721a8cbae42cf5/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fgihyo.jp%2Fassets%2Fimages%2FICON%2F2010%2F582_crossbrowser-javascript.png" alt="第14回　プロトタイプと継承 | gihyo.jp" title="第14回　プロトタイプと継承 | gihyo.jp" class="entry-image" /></a></p><p>こんにちは、太田です。前回は総集編的な内容でしたが、今回は一転して基礎編に戻ります。JavaScriptにおける継承の方法とその仕組みについて、今回から数回に分けて基礎的な部分からきっちり押さえていきたいと思います。 JavaScriptとオブジェクト指向 JavaScriptはプロトタイプベースのオブジェクト指向プログラミン...</p><p><a href="https://b.hatena.ne.jp/entry/s/gihyo.jp/dev/serial/01/crossbrowser-javascript/0014"><img src="https://b.hatena.ne.jp/entry/image/https://gihyo.jp/dev/serial/01/crossbrowser-javascript/0014" alt="はてなブックマーク - 第14回　プロトタイプと継承 | gihyo.jp" title="はてなブックマーク - 第14回　プロトタイプと継承 | gihyo.jp" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/gihyo.jp/dev/serial/01/crossbrowser-javascript/0014"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 51 https://www.amazon.co.jp/gp/product/4048706691 beth321 2014-11-06T05:07:31Z デザイン jQuery 本 #書籍 jquery 本 *javascript amazon 入門 *本 <blockquote cite="https://www.amazon.co.jp/gp/product/4048706691" title="Amazon.co.jp: jQuery Mobile スマートフォンサイト デザイン入門 (WEB PROFESSIONAL): 西畑一馬, 鍋坂理恵: 本"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.amazon.co.jp%2Fgp%2Fproduct%2F4048706691" alt="" /> <a href="https://www.amazon.co.jp/gp/product/4048706691">Amazon.co.jp: jQuery Mobile スマートフォンサイト デザイン入門 (WEB PROFESSIONAL): 西畑一馬, 鍋坂理恵: 本</a></cite><p><a href="https://www.amazon.co.jp/gp/product/4048706691"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/14841baf7063508322857fb0cef43b0d77bec77c/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fm.media-amazon.com%2Fimages%2FI%2F51pD0T8C%2BGL._SL500_.jpg" alt="Amazon.co.jp: jQuery Mobile スマートフォンサイト デザイン入門 (WEB PROFESSIONAL): 西畑一馬, 鍋坂理恵: 本" title="Amazon.co.jp: jQuery Mobile スマートフォンサイト デザイン入門 (WEB PROFESSIONAL): 西畑一馬, 鍋坂理恵: 本" class="entry-image" /></a></p><p></p><p><a href="https://b.hatena.ne.jp/entry/s/www.amazon.co.jp/gp/product/4048706691"><img src="https://b.hatena.ne.jp/entry/image/https://www.amazon.co.jp/gp/product/4048706691" alt="はてなブックマーク - Amazon.co.jp: jQuery Mobile スマートフォンサイト デザイン入門 (WEB PROFESSIONAL): 西畑一馬, 鍋坂理恵: 本" title="はてなブックマーク - Amazon.co.jp: jQuery Mobile スマートフォンサイト デザイン入門 (WEB PROFESSIONAL): 西畑一馬, 鍋坂理恵: 本" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/www.amazon.co.jp/gp/product/4048706691"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 21 https://blog.jquery.com/2014/10/29/jquery-3-0-the-next-generations/ beth321 2014-10-30T06:48:05Z jQuery Developers jQuery IT JavaScript web *jQuery 名前 compatibility *javascript <blockquote cite="https://blog.jquery.com/2014/10/29/jquery-3-0-the-next-generations/" title="jQuery 3.0: The Next Generations | Official jQuery Blog"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fblog.jquery.com%2F2014%2F10%2F29%2Fjquery-3-0-the-next-generations%2F" alt="" /> <a href="https://blog.jquery.com/2014/10/29/jquery-3-0-the-next-generations/">jQuery 3.0: The Next Generations | Official jQuery Blog</a></cite><p><a href="https://blog.jquery.com/2014/10/29/jquery-3-0-the-next-generations/"><img src="" alt="jQuery 3.0: The Next Generations | Official jQuery Blog" title="jQuery 3.0: The Next Generations | Official jQuery Blog" class="entry-image" /></a></p><p>It’s hard to believe it’s been nearly eight years since jQuery was released. Web development has changed a lot over the years, and jQuery has changed along with it. Through all of this time, the team has tried to walk the line between maintaining compatibility with code from the past versus suppo...</p><p><a href="https://b.hatena.ne.jp/entry/s/blog.jquery.com/2014/10/29/jquery-3-0-the-next-generations/"><img src="https://b.hatena.ne.jp/entry/image/https://blog.jquery.com/2014/10/29/jquery-3-0-the-next-generations/" alt="はてなブックマーク - jQuery 3.0: The Next Generations | Official jQuery Blog" title="はてなブックマーク - jQuery 3.0: The Next Generations | Official jQuery Blog" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/blog.jquery.com/2014/10/29/jquery-3-0-the-next-generations/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 89