JavaScript開発に役立つ重要なランダムの数式まとめ - ICS MEDIA
プログラムで使うことの多い「乱数」。ゲーム開発やビジュアルアート、ウェブサイトのアニメーションにおいて乱数は非常に重要で、さまざまな用途で利用されています。プログラムで一般に乱数と聞くと、すべての数値が同じ頻度（分布）で出現する「一様乱数」と呼ばれる乱数をイメージする方が多いと思います。 多くの場合はこの「一様乱数」で取得した乱数を用いれば十分でしょう。しかし、場合によっては「一様乱数」ではなく、偏りのある乱数を用いることでコンテンツの見た目や現象の「自然さ」を演出することが可能です。 実は「一様乱数」に一手間加えることで、乱数の分布の偏りを制御できます。今回は乱数を使用して好みの分布を得るためのパターンをいくつか紹介します。 乱数分布のシミュレーションデモ （HTML5製） 次のデモはリアルタイムで乱数の出現頻度を計算し、グラフに可視化するコンテンツです。画面下のプルダウンで乱数の種類を
Electron の dialog モジュールを使ってみる - 機械人形の実験室
今回は、Electronのdialogモジュールを使って、いろいろとやってみます。 dialogモジュールは、各プラットフォームのネイティヴのダイアログを表示するためのモジュールです。 github.com 前準備 Electronアプリを動かすのに、必要なファイルをざっと作っていきます。 package.son { "name":"dialog-test", "version":"0.1.0", "main":"main.js" } main.js var BrowserWindow = require('browser-window'); require('crash-reporter').start(); var mainWindow = null; app.on('window-all-closed', function(){ if(process.platform != 'dar
Electronでアプリケーションを作ってみよう - Qiita
はじめに Electronをご存知でしょうか. Electron(旧称: Atom-Shell)は, Atomエディタを開発するために生まれたクロスプラットフォームデスクトップアプリケーションエンジンです. Node.js + Chromiumをランタイムとしており, Atomだけでなく, Slackや先日のBuildで発表されて話題となったVisualStudio CodeもElectronで実装されています. いわゆるWeb系の技術, Node.js + HTML + CSSでアプリケーションを作成できるのが特徴です. 類似した思想のフレームワークとして, node-webkit(NW.js)もありますが, アプリケーションのエントリポイントの考え方等が異なります. このエントリでは, Electronの使い方をサンプルアプリを実装しながら説明していきます. お題 このエントリのお題と
WebGLで抑えておきたいシェーダーの定番画像処理8選 – ICS MEDIA
WebGLのシェーダーGLSLでの画像処理の作り方（モノクロ、セピア、モザイク、渦巻き） WebGLを使うと画像処理が実現でき、HTMLコンテンツに多彩なグラフィカル表現をもたらすことができます。たとえば、表示をモノクロームやモザイクにするといった画像エフェクトは簡単に実現できます。 WebGLはGPUの恩恵を受けられるため高速に実行でき、他の代替手法（canvas要素Context2Dオブジェクトによる画像処理等）よりも負荷が軽いのが利点です。 今回はWebGLの定番JSライブラリ「Three.js」とGLSLというシェーダー言語を使った、9種類の画像処理の実装方法を紹介します。ソースコードは「GitHub」からダウンロードして読み進めてください。 サンプルを試してみよう 次のサンプルでは複数のシェーダーを適用できます。画面左上のチェックボックスで画像加工を選択でき、ラジオボタンから画像
JavaScriptだけでファイルの保存機能を実装する
こんばんは。ファガイです。本日はJavaScriptだけでブラウザのある情報のデータを保存する機能の実装方法について書こうと思います。 概要 ローカル上だけでファイルの保存ができるようになる方法になります。 自分が作っているMarkdown-F Editorはその機能を使って保存を実装しています。 今回利用する機能はHTML5の機能なので、ブラウザによっては実装されていない可能性がありますので、注意。 確認ブラウザ IE11 Firefox GoogleChrome にて確認を取ってます。IEに関しては独自関数を使っているため、前のブラウザでは対応されていない可能性があります。 ソースコード ソース自体は結構簡単です。 var text = "テキストデータ"; var blob = new Blob([text], {type: "text/plain"}); // バイナリデータを作り
Speed Up Web Page Loading By Deferring Javascript
Introduction Performance Level from BigStock Deferring JavaScript execution is an efficient approach to accelerate web page loading and improve user experience on reading. From the true experience, migrating our website to a Softlayer dedicated server (Xeon 3360 Quadcore 2.83GHz & 4GB RAM) from an economic VPS plan only speeds website up by 20%, but deferring JavaScript execution helps 50% increas
HTML Page Slide Without a Framework - DZone
I'm working on a little demo mobile application for an upcoming project, and I wanted to add sliding transitions between pages. Pretty simple, right? You just use jQuery, jQuery Mobile, zepto, or one of a bunch of other frameworks, and they handle this for you. I didn't want to. Part of my goal with this particular project is to challenge myself to work without a framework so that I can see how t
enchant.jsの画面を好きな場所に配置する。
enchant.jsでゲームを作って公開するとき、画面が左上に固定されてしまいます。 これはenchant.jsが最初にbody要素の直下にenchant-stageというDIV要素を作るので、レイアウトの変更は難しいのかなー？ とおもってソースを覗いてみると、どうもすでにenchant-stageというIDの要素がある場合は、そこに表示してくれるようです。 ということは、これを上手く使うとゲームだけじゃなくflash的な使い方をサイトで使えるかな？ 難点は必ずenchant-stageというID要素が必要になるので一つのページに複数のゲームを配置できないことですか。 なお、wordpressで設置するときの注意点ですが、game.preloadで画像をロードする際にパスを間違えないように注意。 サンプル（9leapに投稿したのをそのまま配置したので、スタートと終了の処理がおかしいです。）
Ajax : サーバー上のHTMLデータを読み込みページ内に表示する
■Ajax : サーバー上のHTMLデータを読み込みページ内に表示する サーバー上にあるHTMLデータを読み込みページ内に表示するサンプルです。これはサーバー側にCGIプログラムなどを必要としない最もシンプルなものと言えます。 まず、最初にサーバーと通信するためのXMLHttpオブジェクトを作成します。ここでは動作させるブラウザを Windows版、Internet Explorer 6、Firefox、Netscape 6以降、Opera 8 Macintosh版、Safari、Firefox、Netscape 6以降 としています。Windows版のInternet Explorer 6とそれ以外ではオブジェクトが異なるためサンプルの緑色の部分のようにtry...catchを使ってオブジェクトが利用できない場合にnullを返すようにしています。 次にHTMLデータをサーバーから取得しま
Dan Wahlin - Detecting HTML5/CSS3 Features using Modernizr
JavaScript/ES6, Node.js, Angular, HTML5, jQuery, Node.js, ASP.NET MVC, C# HTML5, CSS3, and related technologies such as canvas and web sockets bring a lot of useful new features to the table that can take Web applications to the next level. These new technologies allow applications to be built using only HTML, CSS, and JavaScript allowing them to be viewed on a variety of form factors including ta
[javascript] 選択文字列を取得する・改 | いわぶろ（ろてん）
2008-09-22 12:40 追記 下のコードだと，どうやら Safari で取得できなかったみたいですね． document.getSelection() || window.getSelection() の部分の document と window を入れ替えてみたところ，取得できました． ということで，ソースコードを修正しておきました． はじめに つまり 「あるページとそのページ内のテキストボックス・テキストエリアにおける選択文字列を取得する」 ということになりますかね． 岩家ぶろぐ » [javascript] bookmarklet で選択文字列を取得する件で 以前に書いたコードを見直したところ結構無駄があったので，書き直してみました． 書き直したソースコード var get_selected_text = function() { var ret = ''; try { /
HTML5でJavaScriptでiPhoneで画像をピンチ操作 - yprops.com/notes
ひどいタイトルですが、タイトルままです。 練習がてら、２本指操作で画像を移動回転拡大縮小できるサンプルを作ってみました。 iPhone3GSで確認しました。普通のPCでは動きませんすみません。 http://yprops.com/practices/pinchtest/ HTC Desire ってマルチタッチだっけ。動くんだろうか。 ■JSソース直リンク http://yprops.com/practices/pinchtest/pinchtest.js ■メモ 今回は毎回 TouchEvent.touches[0].pageX のようにタッチの情報を配列の位置を指定して取得したが、 使う指が増減する時など、Touch オブジェクトは配列上の位置を変えることもあるようなので、今回のやり方には脇のあまさが残る。 fingerA = touches[0] みたいに一度参照をとっておけば
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Most Recommended JavaScript Learning Resources
Edit fiddle - JSFiddle - Code Playground
So long...
Clarify Zepto's Stance on Version Compatibility · Issue #197 · madrobby/zepto
Loading...
JavaScriptでDOMを使って、ある要素の直後に兄弟要素を追加する - 行動記録
サービス終了のお知らせ
HugeDomains.com