はしくれエンジニアもどきのメモ

情報・Web系技術・Englishの勉強メモ・備忘録です。

JavaScript

GoogleBooksで読める、読んでおくと良さそうなJavaScript 書籍メモ

GoogleBooksで読める、読んでおくと良さそうなJavaScript 書籍メモ JavaScriptを勉強するにあたって、 読んでおくといいかもしれない本メモ。 GoogleBooks でプレビューできるもの優先でリストしておきます。 順番はテキトーです。 GoogleBooksで読める、読…

HTML5 WebStorage まとめ

HTML5 WebStorage まとめ WebStorage(sessionStorage、localStorage) についてまとめておきます。 HTML5 WebStorage まとめ 試したブラウザ環境 WebStorage とは ストレージの最大容量 対応ブラウザ WebStorage が対応しているかの判定コード WebStorage の…

2日でできる JavaScriptTraining」をやってみた(イディオムと感想)

「2日でできる JavaScriptTraining」をやってみた(イディオムと感想) mixi の「2日でできる JavaScriptTraining」をやってみたのでメモ。 今回は、ラストのイディオム編です。 github.com 「2日でできる JavaScriptTraining」をやってみた(イディオムと感…

「2日でできる JavaScriptTraining」をやってみた(モジュールの利用(bower))

「2日でできる JavaScriptTraining」をやってみた(モジュールの利用(bower)) mixi の「2日でできる JavaScriptTraining」をやってみたのでメモ。 今回は、モジュール(bower)の使い方についてまとめておきます。 github.com 「2日でできる JavaScriptTraini…

「2日でできる JavaScriptTraining」をやってみた(非同期通信)

「2日でできる JavaScriptTraining」をやってみた(非同期通信) mixi の「2日でできる JavaScriptTraining」をやってみたのでメモ。 今回は、非同期通信系をまとめておきます。 github.com 「2日でできる JavaScriptTraining」をやってみた(非同期通信) …

「2日でできる JavaScriptTraining」をやってみた(DOM操作)

「2日でできる JavaScriptTraining」をやってみた(DOM操作) mixi の「2日でできる JavaScriptTraining」をやってみたのでメモ。 今回は、DOM操作のみまとめておきます。 github.com 「2日でできる JavaScriptTraining」をやってみた(DOM操作) 環境構築 1…

JavaScript DOMのクリック時とキー入力時のイベントと発火順序

JavaScript DOMのクリック時とキー入力時のイベントと発火順序 クリック時とキーボード入力時のの発火するイベントと発火順序をまとめておきます。 JavaScript DOMのクリック時とキー入力時のイベントと発火順序 ブラウザ環境 マウスクリック時のイベント ク…

EaselJS のSpriteSheet, Sprite を使ってスプライトアニメーション [CreateJS]

EaselJS のSpriteSheet, Sprite を使ってスプライトアニメーション [CreateJS] png, jpg, svg などでスプライトシートを作っておけば、 SpriteSheetクラスとSpriteクラスでスプライトアニメーション を生成できる。 EaselJS のSpriteSheet, Sprite を使って…

EaselJS のプロパティやMatrix2D を使ってオブジェクトの変形 [CreateJS]

EaselJS のプロパティやMatrix2D を使ってオブジェクトの変形 [CreateJS] EaselJS 0.8.0 から仕様が変わっているようなのでメモ。 以下の記事が日本語で参考になります。 FN0811001 - 変換行列を数学的に捉える - Flash : テクニカルノート FN1308001 | Ease…

EaselJS の基準点(regX, regY) とtranslate をみてみる [CreateJS]

EaselJS の基準点(regX, regY) とtranslate をみてみる [CreateJS] Display Object の基準点(regX, regY) を変えている場合、 とMatrix2D.translate がその分ズレるようなのでメモ。 EaselJS の基準点(regX, regY) とtranslate をみてみる [CreateJS] Create…

CreateJS でSVG画像を扱う

CreateJS でSVG画像を扱う CreateJS でSVG を扱うときのメモ。 CreateJS でSVG画像を扱う CreateJSのバージョン CreateJSでSVGを描画 PreloadJSでSVGの読み込み 読み込み成功時のコールバック Bitmapインスタンスにして描画 Bimapインスタンスの生成 URI か…

SVGのpreserveAspectRaitoとCanvasのdrawImage

SVGのpreserveAspectRaitoとCanvasのdrawImage SVGの preserveAspectRatio と ブラウザによってCanvas のdrawImage の仕様が違ったのでメモ。 SVGのpreserveAspectRaitoとCanvasのdrawImage ブラウザ環境 SVG のpreserveAspectRatio preserveAspectRatioプロ…

CreateJS で読み込んだ画像をアニメーションさせる

CreateJS で読み込んだ画像をアニメーションさせる CreateJS で読み込んだ画像をアニメーションさせてみたのでメモ、 以下の記事を再現できるか試してみました。 gihyo.jp CreateJS で読み込んだ画像をアニメーションさせる サンプル メモ 画像を読み込む 画…

Canvas のライブラリCreateJS を試してみる

Canvas のライブラリCreateJS を試してみる Canvas を使いやすくするライブラリCreateJS を試してみたのでメモ。 公式サイト: www.createjs.com Canvas のライブラリCreateJS を試してみる CreateJS とは EaselJS チュートリアル PreloadJS チュートリアル …

oEmbed API の値を取ってくるjQuery プラグインを作ったよ

oEmbed API の値を取ってくるjQuery プラグインを作ったよ はてなブログを書くときに、URL をコピペすると、 URL のみのリンク タイトル付きリンク 埋め込みリンク が生成されると思います。 この機能が結構便利で、 はてなブログ以外でも使いたいと思ったの…

#(ハッシュ)で、Ajax でロードするページを切り替える

#(ハッシュ)で、Ajax でロードするページを切り替える リンクの #(ハッシュ)で、Ajax でロードするページを切り替えられることがわかったのでメモ。 やりたいこととしては、ページ内アンカーリンクのAjax版です。 #(ハッシュ)で、Ajax でロードするページを…

Canvas でフラクタル(コッホ曲線、フラクタルツリー)を描く

Canvas でフラクタル(コッホ曲線、フラクタルツリー)を描く Canvas で、フラクタルであるコッホ曲線、フラクタルツリーを描いたのでメモ。 Canvas でフラクタル(コッホ曲線、フラクタルツリー)を描く コッホ曲線 サンプル コード フラクタルツリー サン…

Canvas で自由落下運動、水平投射運動、斜方投射運動アニメーション

Canvas で自由落下運動、水平投射運動、斜方投射運動アニメーション Canvas で、 自由落下運動、水平投射運動、斜方投射運動アニメーションを作ったのでメモ。 Canvas で自由落下運動、水平投射運動、斜方投射運動アニメーション サンプル 共通の関数 自由落…

Canvas で東京電力の電力使用状況を可視化してみた

Canvas で東京電力の電力使用状況を可視化してみた Canvas の棒グラフ、円グラフの描画 + 東京電力の電力使用状況API を組み合わせて、可視化してみたのでメモ。 なお、他の電力会社の電力使用状況データを取得できないか調べてみたところ、 yahoo の電力使…

Canvasで棒グラフ、折れ線グラフ、円グラフをつくる

Canvasで棒グラフ、折れ線グラフ、円グラフをつくる D3.js を使う前の練習ということで、Canvas で棒グラフ、折れ線グラフ、円グラフを作ってみたのでメモ。 なお、目盛りはついてないです。。 Canvasで棒グラフ、折れ線グラフ、円グラフをつくる 棒グラフ …

JavaScriptで、Twitter APIであるTweet Web Intentを試す

JavaScriptで、Twitter APIであるTweet Web Intentを試す Tweet Web Intent を使うことで、 簡単に自分のWebページとTwitter を連携させることができます。 ツイート本文やハッシュタグなどを指定することができます。 JavaScriptで、Twitter APIであるTweet…

CSS3 のfilter で加工ソフトなしで画像に効果を加えてみる

CSS3 のfilter で加工ソフトなしで画像に効果を加えてみる CSS3 のfilter を試してみました。 CSS3 のfilter で加工ソフトなしで画像に効果を加えてみる サンプル 対応ブラウザ 使用できる効果 grayscale(グレースケール) sepia(セピア) saturate(彩度…

JavaScirpt でマウス座標(位置)を取得する

JavaScirpt でマウス座標(位置)を取得する JavaScirpt でマウス座標(位置)を取得方法をメモ。取得する方法は2 種類あるようです。 (clientX, clientY) と (pageX, pageY) の違いと、 (getBoundingClientRect().left[top], getBoundingClientRect().top) …

JavaScript で加速度センサーの値を取ってみる

JavaScript で加速度センサーの値を取ってみる motiondevice のイベントで取れる加速度センサーの値を取ってみました。 JavaScript で加速度センサーの値を取ってみる サンプル コード コード解説 X, Y, Z軸 加速度 accelerationIncludingGravity(生の加速…

BinarySearch(二分探索)を可視化してみる

BinarySearch(二分探索)を可視化してみる BinarySearch アルゴリズムの復習ということで可視化してみました。 BinarySearch(二分探索)を可視化してみる 可視化サンプル JavaScript C/C++ 参考リンク 関連リンク 可視化サンプル 可視化部分には、display:…

JavaScript で位置情報を取得してみる

JavaScript で位置情報を取得してみる JavaScript の位置情報取得API geolocation を使ってみたのでメモ。 JavaScript で位置情報を取得してみる サンプル コード geolocation について geolocation に対応しているかチェック getCurrentPosition watchPosit…

Canvas に図形を描画し、矢印キーで移動させる

Canvas に図形を描画し、矢印キーで移動させる 矢印キーを入力したら、clearRect(x, y, w, h) で描画をクリアし、移動した分を描画するというものです。 今回は、キーを入力したら再描画ですが、無限ループやsetInterval(setTimeout) で繰り返し描画するよう…

FileAPI でカメラを起動し、Canvas上に画像を描画させる

FileAPI でカメラを起動し、Canvas 上に画像を描画させる File API でカメラを起動し(今のところPC では画像選択のみ)、その画像をCanvas 上に描画させます。 なお、iPhone Safari では、カメラで撮影したような 2[MB]以上の画像は、そのままではCanvas に…

JavaScript でUserAgent を用いた端末判別

JavaScript でUserAgent を用いた端末判別 UserAgentを使ったモバイル、タブレット、PC を判別するものです。 なお、MDNでは、UserAgent は読み書きできるので、UserAgent による端末識別は推奨されてないようです。 <a href="https://developer.mozilla.org/ja/docs/Web/API/NavigatorID/userAgent" data-mce-href="https://developer.mozilla.org/ja/docs/Web/API/NavigatorID/userAgent">window.n…</a>

FileAPI で画像を読み取り、Canvas 上に画像を描画

FileAPI で画像を読み取り、Canvas 上に画像を描画 FileAPI で画像を選択またはドラッグ&ドロップで画像を表示 - はしくれエンジニアもどきのメモ の時は、<img> タグで画像を表示させてましたが、今回は、FileAPI で読み取った画像をCanvas 上に表示させてみます…