第4回 図形のクリックを検出しよう─JavaScriptで外積の計算 | gihyo.jp
以前gihyo.jpの特集で、Nゲージのエディタを取り上げたことがあります。このエディタでは、レールをドラッグ操作で動かせるようにしました。 レールの始点または終点から、x, y共に±3以内だったら端点と見なすことで、端点をドラッグすると変形になる処理が実現できます。これは簡単ですね。ifの条件で書くと ((sx - 4 < x)&&(x < sx + 4)&&(sy - 4 < y)&&(y < sy + 4)) のようになります。 では、レールの上をドラッグしたら移動になる、という処理はどう書けばよいでしょうか。レールは直線ですが、水平や垂直ではなく斜めにもなります。もちろん、1ドット幅を正確にクリックしないといけないのでは実用になりませんから、ある程度の幅を持たせる必要があります。高校で「点と直線の距離」を習った記憶がありますが、ルートが出てくるなど計算が複雑なため、たくさんの線があ
CrossStorage - クロスドメインで使えるlocalStorage
HTML5で追加されたAPIの一つにlocalStorageがあります。特定のサイト内で使える簡易的なストレージですが、一つのサイトでしか使えないのが難点です。時に別なサイトでも使いたいと思うことがあるでしょう（特にサブドメイン）。 そこで使ってみたいのがCrossStorageです。クロスドメインで使えるストレージです。 CrossStorageの使い方 使っているところです。外部ドメインにあるlocalStorageを使えます。 別なドメインからも。 CrossStorageではハブになるドメインが一つ必要です。そこではアクセスできるドメインを指定し、さらにパーミッションを設定できます。そして外部ドメインからはiframeを使ってメッセージを交換する仕組みになっています。原理はシンプルですが面白い仕組みです。 CrossStorageはJavaScript製のオープンソース・ソフトウェ
一から始めるJavaScriptユニットテスト - Hatena Developer Blog
この記事は、はてなエンジニアアドベントカレンダー2016の5日目の記事です。 こんにちは、はてなでアプリケーションエンジニアをしている id:shiba_yu36 です。先日、buildersconにおいて、現在所属しているプロジェクトでJavaScriptのユニットテストを導入した知見について、「一から始めるJavaScriptユニットテスト」というタイトルで発表しました。 speakerdeck.com この発表は、実際にJavaScriptのユニットテスト環境を作ってみると非常にハードルが高いと感じたので、そのハードルを少しでも下げられればという思いで、非常にシンプルな例で一から環境を作る例を紹介しました。アジェンダは次のとおりでした。 カクヨムのJS環境 JSのテストツールを整理する 通常の関数のユニットテスト DOM操作する機能のユニットテスト カクヨムのJS環境や、JSのテスト
HTMLタグで本格VRコンテンツが作れる！ Mozillaが開発した3DライブラリA-Frame - ICS MEDIA
HTMLタグで本格VRコンテンツが作れる！ Mozillaが開発した3DライブラリA-Frame WebXRフレームワークの「A-Frame」を使えば、JavaScriptを記述することなく、HTMLにタグを追加するだけでVRコンテンツが作成できます。 次のデモはA-Frameを用いてt作成したオリジナルのVRデモです。中央の円状のカーソルを牛の3Dモデルに重ねることでアニメーションします。 ※パソコンではドラッグ、スマートフォンではジャイロセンサーが検知した傾きで視点が変わります。右下のアイコンをクリックすると、HMDで閲覧できるモードへ切り替わります。 デモを別ウィンドウで開く HTMLをマークアップするようにVRコンテンツを作成しよう VRコンテンツをHTMLのマークアップのように作成するには、JavaScriptライブラリ「A-Frameエー・フレーム」を使用します。「やっぱりJa
console.logまとめ 2016年夏 - Qiita
console.log関連についてまとめました。 モダンブラウザであればどれも使用できると思いますが、基本出力結果等はchromeで確認したものです。 console.hogehogeのいろいろ 基本 引数を入れることで出力結果をカスタマイズできます console.info、console.warn、console.error それぞれで見た目を変えることができます。 console.assert 式を評価してfalseの場合にログ出力します。 console.count ログの出力結果が同じ場合にカウント数が自動的に増えていきます。 console.dir オブジェクトのプロパティの中身をログに出力します。 console.dirxml HTMLとかXMLの要素を渡すと、下の要素が全部見れるようになります。 console.group、conosle.groupCollapsed co
D3.jsで作成したグラフ(SVG)を画像として保存する | Tech-Sketch
先日公開した D3. jsをつかってData-Drivenにリッチなグラフやチャートを作成しよう の記事ではD3.jsをつかってグラフを作成しました。本記事ではD3.jsで作成したSVG形式のグラフをPNG形式の画像として保存する方法をご紹介します。 D3. jsにはCSVやJSONなど 様々なデータ形式を扱う為の便利なメソッド が用意されており、アプリケーションへの組み込みが容易です。しかしアプリケーションへの組み込みとなると、「X月X日の状態のグラフを保存しておきたい」、「グラフを資料に添付したい」といった要望も出てくるのではないでしょうか。 単純に画面のスクリーンショットを取得する以外では Phantom.js を利用してキャプチャを取得する方法や Apache Batik を利用してSVGを変換する方法などが考えられましたが、クライアントサイドだけで完結しない上、実装が少々手間です
Three.js OrbitControls.js - Three.jsを使って、作ってみた
今回は、Three.jsの「OrbitControls.js」について書きます。 OrbitControls.jsは、マウスドラッグによる視点移動と、マウスホイールによるズームが可能になるクラスです。簡単に言いますと、マウスで視点がグルグル回せるということです。 以前に、「TrackballControls.js」というやつを書きましたが、それと少し似ています。 今回は、実際にやってみたほうが、分かりやすいと思います。 OrbitControlsは、Three.jsに記述されている標準クラスではなく、「OrbitControls.js」に書かれています。 ファイルの場所は、Three.jsダウンロードフォルダ内の examples/js/controls/OrbitControls.js にあります。 では、OrbitControlsの読み込み方を書きます。基本的にTrackballCon
ES6 チートシート | POSTD
日々の仕事の中で役に立つES2015（ES6）のティップス、コツ、ベストプラクティス、プログラムの見本をご紹介します。コントリビューション歓迎です！ 目次 var vs. let / const IIFEからブロックベースへ アロー関数 文字列 デストラクチャリング モジュール パラメータ クラス シンボル マップ WeakMaps Promises ジェネレータ Async/Await var vs. let / const var の他に、値を格納する let と const という識別子が新たに追加されました。 var とは異なって、 let と const はクロージャのスコープ内で最初に記述されることはありません。 var の使用例です。 var snack = 'Meow Mix'; function getFood(food) { if (food) { var snack
旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～ - Qiita
はじめに ネットには様々な情報が溢れており、JavaScriptに関する情報も多数存在しております。 その中には、「今時こんな書き方しねえよ…」と思わずツッコミを入れたくなるような、本当に、本当に古い内容について書かれている古文書も存在します。 そんな罠記事の情報に囚われてしまって、いつまで経っても現代的なJavaScriptが書けない皆さんのために、このシリーズの記事では、各セクション毎に分けて、旧石器時代の記述と、現代の記述を紹介する形で、文明開化をしていきたいという思いで記述する。 最初は、現在比較的メジャーなブラウザで一通り動作する「ECMAScript 5」までの内容に関してポエムを書き連ねていき、最終的には一連の内容を読むだけで「ES6(ES2015)」による新機能や、絶賛提案中の「ES7」の一部提案内容についても把握し、おおよそ現代人を育成することを目標とする。 …なんてめっ
[JavaScript] 不思議なダンジョン迷路をHTML+JavaScriptで作る - YoheiM .NET
こんにちは、@yoheiMuneです。 今日は、生成するたびに変化する迷路をJavaScriptで作ってみたいと思います。 完成版はこちらです 今回作成した迷路は、以下のGithubにアップしています。気になった方はご参照いただけたら幸いです。 ソースコード - maze.html - maze1.js サンプルアプリケーション http://yoheim.net/work/01_maze/maze.php 迷路の作り方 迷路の作り方はいろいろとあるみたいですが、今回は比較的簡単な「棒倒し」というアルゴリズムでの迷路作成を行いました。 棒倒しの考え方については以下のサイトがわかりやすかったので、そちらをご参照ください。 - 迷路自動生成アルゴリズム 迷路の作り方（JavaScript編） 上記の内容をHTMLとJSで表現したいと思います。JavaScriptについては150行もないくらいで
![[JavaScript] 不思議なダンジョン迷路をHTML+JavaScriptで作る - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/d2db3c452c75bf2563596e363c4cb9e8394a7ee1/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F385.jpg)
いろんなセレクタ指定方法＋α
ずいぶん以前にセレクタについて書いたのですが、今回はセレクタの種類を抜粋して、記述例と説明書きにまとめてました。「セレクタとは？」という方は、まず下記記事を読んでみて下さい。 jQueryを使ってみよう。(基本編 セレクタ１) ＋αというのはトラバース(走査)系のメソッドです。「この要素を抜き出したい！」と思ったときにセレクタだけでは抜き出しにくい場合があります。そういうときにトラバース(走査)系のメソッドを使うと、簡単にできたりするので覚えておくと便利なものです。 「こういう書き方をすると、こういう要素が選択される」という例で説明を添えていますが、数が多いので説明書きは、ほんとうに添えた程度です。説明だけではわかりにくいと思うので動作サンプルを用意しました。動作サンプルを眺めながら、ちらっと説明書きをチェックしてもらえれば「なるほど！」となるはず。。。ご利用ください。 jQuery セレ
HTML5/Javascriptの画像処理ライブラリまとめ
HTML5(Canvus)、Javascript向けの画像処理ライブラリについてまとめたので紹介します。 続きを読む
[JS]CSS3アニメーションを使ったページが簡単な記述で面白いように実装できるスクリプト -AniJS
スクロールするとヘッダがアニメーションで移動したり、コンテンツが次々とスライドして表示されたり、ページのロード時にふわっと表示したりなど、スクロール、ロード、クリック、ホバー、フォーカスなどのさまざまなイベントをトリガーにCSS3アニメーションを適用できるスクリプトを紹介します。 jQueryなどの他のスクリプトは不要です。 AniJS -CodePen こちらのデモでは、ロード時にぶらぶら揺れて表示し、ヘッダのクリック、フッタのクリックにもアニメーションが仕込まれています。 AniJSの使い方 Step 1: 外部ファイル 当スクリプトを</body>の上、アニメーション用のスタイルシート「animate.css」をhead内に記述します。 <head> ... <link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss
Tempura：機械学習をJavascriptでやってみる - Qiita
私が所属している研究室の先輩方が去年作成したJavascriptの機械学習ライブラリTempura (https://github.com/mil-tokyo/tempura) を試してみる。 私もGMM周りで少しだけコミットしていますが、全体的に把握できているわけではない。 主に線形識別器やクラスタリング用の手法が用意されており。デモとドキュメントが英語でしっかり書かれているので，解読しながら少し遊んでみる。 インストール まずはインストール サブモジュールとしてJavaScriptの行列演算ライブラリSushiが使われているため，追加する。 cd your-workspace git clone git@github.com:mil-tokyo/tempura.git cd tempura git submodule init git submodule update python c
[JavaScript] 猿でもわかるクロージャ超入門 １ 問題 - DQNEO起業日記
問題です。 問題： 呼び出すたびに、1,2,3,...を返すような関数 f( )を定義せよ。 f(); // 1 f(); // 2 f(); // 3 この問題、解けますでしょうか？ 普通の関数では、できないと思います。 しかし「クロージャ」というのを使えば、このようなことができます。 クロージャって何だ？ 「クロージャ」という言葉を、プログラムの本やサイトで目にすることがありますよね。 私が最初に見たのは続・初めてのPerl 改訂版（アルパカ本）でした。 まったく理解できませんでした。 その後、404 Blog not foundやnaoyaさんのブログなどで「クロージャ」という単語を目にしました。 やはり、まったく分かりませんでした。 とどめの一撃はWikipediaの解説記事。 クロージャ (クロージャー、Closure) は、プログラミング言語において引数以外の変数を実行時の環境
![[JavaScript] 猿でもわかるクロージャ超入門 １ 問題 - DQNEO起業日記](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f7de7c0278993661a11fbc3637f96292ba773aa/height=288;version=1;width=512/http%3A%2F%2Fdqn.sakusakutto.jp%2Fimages%2Fkali.jpg)
JSCompress - The JavaScript Compression Tool
About JSCompress JSCompress is an online JavaScript compressor that allows you to compress and minify all of your JS files by up to 80% of their original size. Copy and paste your code or you can upload and combine multiple files and then compress. We use UglifyJS 3 and babel-minify for all JavaScript minification and compression. Why You Should Compress JavaScript There are a number of reasons wh
JavaScript と iframe で注意点 - sugilogのブログ
メインのHTML（親frame）の中に子のiframeをつくるとき、その2つのframeの操作について ぶっちゃけ、そんな都合のいい話はない、というお話。 SameOriginPolicy (同一ドメインポリシー） 操作しようとする2つのwindowやframeのoriginが違う時のポリシー。 originは、プロトコルxホストxポート の組合せ。 http://sugilog.hatenablog.com/ と、 http://sugilogtest.hatenablog.com/ はoriginが異なる。 http://sugilog.hatenablog.com/ と、 http://hatenablog.com/ はoriginが異なる。 http://sugilog.hatenablog.com/ と、 https://hatenablog.com/ はoriginが異なる。
子ページから親ページ（別ドメイン）の iFrame の大きさを操作する | バシャログ。
近いうちに大型の台風が来ると聞いてソワソワしている kimoto です。ここ数年で最強とか言われると身構えちゃいますよね…。 さて、今回は tips です。 別ドメインのページを iFrame 内に表示した際に、想定よりページの縦幅が大きくて、iFrame にスクロールバーが出てしまう…。 最初の表示時に大きさ合わせたけど、iFrame 内でページ遷移すると中のページの大きさが変わっちゃうので下に空間ができたり逆にスクロールバーが出たり… みたいな事を回避するための tips をご紹介します。 postMessage を利用するので、古めのブラウザでは動かない可能性があるのでご注意をば。 postMessage による値の受け渡し 他のページへのメッセージの受け渡しは window.postMessage() を使います。書き方は以下。 window.postMessage("value"
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://blog.asial.co.jp/sample-page/
ソニック速報
