You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
各方式は対立するのか? ところでこれらの方式って、必ずしも対立するってわけじゃないんですよね。 JavaScriptのgeneratorはまだ使えるところが限られるけど、コールバックが不要で同期処理のように簡単に書けるのはやはり魅力的です。 一方で、ちょっとした非同期処理をReactive Programmingで処理するのはおおげさですが、ストリーム的に流れてくる複数のイベントを合成したり、時間的な操作をしたりする場合には圧倒的に便利です。 なので、適材適所で使い分けるのがよさそうです。(なんの解決にもなってない!) promise, co, RxJS さて、使い分けると言っても、方式が異なるものを混ぜて使うことは可能でしょうか? 実は、それぞれの方式は対立しないどころか、連携することも可能です。 各方式の代表的な実装であるpromise, co, RxJSを例にみてみましょう。 まず、
<div id="capture" style="padding: 10px; background: #f5da55"> <h4 style="color: #000; ">Hello world!</h4> </div> html2canvas(document.querySelector("#capture")).then(canvas => { document.body.appendChild(canvas) });
HTML5 の Web Speech API をご存知でしょうか? ブラウザベースで音声認識とテキストの読み上げを実現する API です。 今回はこの Web Speech API について試したことをまとめてみました。 ちなみに少し前の Chrome では Speech Input API という INPUT 要素に x-webkit-speech という属性を記述するのみで、手軽に音声認識を実現できるという機能がありましたが現バージョンでは廃止されてるようです・・・ Web Speech API の対応ブラウザは Can I Use よりご確認ください。 テキストの読み上げを行う Speech Synthesis API Speech Synthesis API を使用すると、指定したテキストを PC に読み上げさせることできます。 使い方は非常に簡単で、new SpeechSynth
2011年2月21日 追記 $script も新規参戦してきました。高々 643 バイトで、非同期読み込みや依存性の制御などができるそうです。いずれ紹介したいと思います。← 「新参の超軽量JavaScript非同期ローダー3種を徹底比較」で紹介しました! これらのローダーのうち、LABjs の作者が 「On Script Loaders」 で HeadJS と ControlJS について意見をしていて、面白そうです。そのうち日本語訳や各ローダーの比較を行ってみたいと思います。 ローディング・スクリプトをめぐる議論 さてさて、本エントリーの本題は前述のローダーではありません。「Prefer asynchronous resources」 や Google Analytics のスニペット に示されているような、ローディング・スクリプトの変遷をまとめてみます。 これらのスクリプトのごく初期は
_ループやswitch以外のブロックを脱出するbreak JavaScriptでは、breakにラベルを指定できて、通常は多重ループを抜ける場合に用いられるような説明がなされていると思う。しかし、ラベル付のbreakは、ループやswitch以外の文を終わらせることもできる(Javaもそう)。 例えば以下のようなプログラム。 document.writeln("A"); L1: { document.writeln("B"); L2: { document.writeln("C"); break L1; // L1の文を終わらせるので、D、Eは実行されない document.writeln("D"); } document.writeln("E"); } document.writeln("F"); 【実行結果】 A B C F 多重ループを一気に脱出する場合は、それなりに用途を思いつくが、
Welcome to SlickGrid Find documentation and examples in the wiki. UPDATE: March 5th, 2014 - I have too many things going on in my life right now to really give SlickGrid support and development the time and attention it deserves. I am not stopping it, but I will most likely be unresponsive for some time. Sorry. UPDATE: This repo hasn't been updated in a while. https://github.com/6pac/SlickGrid/wik
Capture, share, & collaborate on knowledge internally. Yesterday, we announced the redesign of our blog and the addition of our engineering channel. This is the first post related to engineering detailing a walkthrough of what we've built, and what better than to blog about rebuilding our blog on our new blog? How meta. It started with an engineering blogA few months ago, I took up a de facto role
ScrollMagic helps you to easily react to the user's current scroll position. It's the perfect library for you, if you want to ... animate based on scroll position – either trigger an animation or synchronize it to the scrollbar movement (like a playback scrub control). pin an element starting at a specific scroll position – either indefinitely or for a limited amount of scroll progress (sticky ele
Googleの新UX「Material Design」のアナウンス以降、波紋のエフェクトを数多く紹介してきました。例えばこれとかRiiple Click EffectとかWavesとか。 それらとは一味違い、WebGLでリアルな波紋を描くjQueryのプラグインを紹介します。 jQuery Ripples Plugin -GitHub ↑ファイルサイズを軽減してます。実際はもっと本物の水面です。 jQuery Rippleのデモ jQuery Rippleの使い方 jQuery Rippleのデモ デモはChrome, Safari, Firefox, Opera, IEは11+で、OpenGL 2.0対応のビデオカード内蔵のPCでご覧ください。 ページ上をクリックすると、そこから波紋がどんどん増えます。 jQuery Rippleの使い方 Step 1: 外部ファイル 当スクリプトとjq
(Last Updated On: 2023年12月8日) 追記:最近のOWASPガイドの更新でJavaScript文字列はUnicodeエンコードで安全性を確保するよう変更されました。元々このブログでもUnicodeエスケープのまま利用するように書いています。他の言語のユーザーはUnicodeエスケープを利用しましょう。PHPもASCII領域の文字をUnicodeエスケープするようにした方が良いと思います。これは提案して実現するように努力します。 JSONはJavaScriptのオブジェクトや配列を表現する方式でRFC 4627で定義されています。メディアタイプはapplication/json、ファイル拡張子はjsonと定義されています。 PHPにJSON形式のデータに変換するjson_encode関数とjson_decode関数をサポートしています。 JSON関数がサポートされている
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
JavaScript を PNG に圧縮するツールを作りました。JS_Packer demoscene は最近 WebGL を使ったものも多くなってきています。 demoecene は基本的に ローカルにファイルとして存在しているものを使う そのファイル容量は 1 バイトでも少ないほうがいい (容量制限がある分野がある) という文化です。そして JS ファイルを圧縮する手法の一つに、JS を PNG 画像にして、それをデコードする、という手法が存在します。 JS の性質JS のコードは基本的にアスキー文字の集まりです。アスキーコードは、小文字/大文字のアルファベット、数字、スペースといった 128 種類しか存在しません。 PNG8 の性質8 ビット PNG は 256 種類の色をパレットに持っています。 PNG は可逆圧縮(ロスレス)形式の画像です。圧縮しても失われるデータはありません。
Electron (旧atom-shell)を使えば、JSやモダンなWeb技術を活かしてクロスプラットフォームなPCアプリを作ることができる。 APIが充実していて、Webページをただ移植しただけの単純なアプリだけでなく、割と手の込んだUIも実現できるかもしれない。 たとえば、Gyazoのようなスクリーンショットを撮るための領域選択のUIを作ることができる。 実装方法 画面の全体に透明なウィンドウを作って、その上の透明なWebページでmousedownなどのイベントにあわせて必要なUI要素を描画する。 https://github.com/uiureo/electron-crop-rect/blob/master/main.js app.on('ready', function () { const Screen = require('screen') const size = Scree
世界一誤解された言語javascriptとecmascriptの話。 ──この誤解に関して、私は真に驚くべき証明を見つけたが、このブログはそれを書くには狭すぎる。 JavaFXはじめました。 題のとおりです。本当にこれだけなんで他に話すことが無いですが説明しないとわからないと思うので説明しようと思います。「知ってるよ!」って人は恐らく今回は新しく得るものはないでしょう。 Object.create()はprototype.jsが元で追加されましたが、アレとは挙動が違います。クラスベースを模倣するために使っているかと思われますが、確かにObject.create()はクラスベースを模倣します。しかし、不完全です。むしろダメダメです。それがObject.create()を使ってはいけない理由です。 なぜダメか、簡単なことです。prototypeプロパティとconstructorプロパティを変更
ゴール: getter/setterを含むクラス定義をエコ楽に記述できる(get/set) クラスの継承もエコ楽に正しく記述できる(extend) とにかく長いキーワードや余計なものはプログラマには書かせない constructorの代わりに、newを使える様にする prototypeも__proto__もプログラマには見せない書かせない Object.definePropertyやObject.setPrototypeOfなども見せない書かせない ついでに外部からアクセスできないprivateな変数も使える様にする ※npmにbase-class-extendとして登録しました。 ※参考: [JavaScript] そんな継承はイヤだ - クラス定義 - オブジェクト作成 この記事のゴールは、以下の様にクラス定義がエコ楽にできること。 // animal-ex.js 'use stric
JavaScript のオブジェクト作成においてクラス定義で継承を実装する方法はいくつかあります。 正しい継承はどうあるべきか、基本から検証しながら考えてみたいと思います。 ※正しくクラス定義がエコ楽にできる様に追加記事書きました。 [JavaScript] getter/setterも使えるエコ楽なクラス定義 - もちろん継承も - private変数も 一番簡単なオブジェクトの作成方法 典型的な JavaScript のオブジェクトを簡単に作成してみて、それらを確認してみましょう。 var obj1 = {x: 12, y: "ab"}; var obj2 = new Object; // または new Object() obj2.x = 34; obj2.y = "cd"; // obj < Object var obj3 = [12, "ab"]; var obj4 = new
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く