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

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

JavaScript

link要素でpreloadを使って非同期にファイルを読み込む

link要素でpreloadを使って非同期にファイルを読み込む link要素でpreloadを使って非同期にファイルを読み込むメモ. link要素でpreloadを使って非同期にファイルを読み込む preloadとは 現在の対応状況 resource hint 使用例 読み込み後,即時実行(Async Lo…

はてなブログの記事の最終更新日を取得

はてなブログの記事の最終更新日を取得 はてなブログの記事では, 最終更新日がデフォでは表示されないので,取得して表示しようというメモ. 最終更新日を追加 はてなブログの記事の最終更新日を取得 記事のhtmlの中には最終更新日が書かれていない 最終更…

JavaScriptで動的にschema.orgのJSON-LDを埋め込む

JavaScriptで動的にschema.orgのJSON-LDを埋め込む JavavScirptでschema.orgのJSON-LDを生成して,Google Botに読んでもらおうというメモ. JavaScriptで動的にschema.orgのJSON-LDを埋め込む なぜJavaScirptを使うのか そもそもGoogleはJavaScript実行後の…

GoogleBot上で動作するJavascriptメモ

GoogleBot上で動作するJavaScriptメモ ※2017年10月時点での実行結果. 2014年ごろから,GoogleはJavascript実行後の結果も見ているらしい. www.suzukikenichi.com ということで,GoogleBot上で動作するJavascriptの関数・演算子のメモ. GoogleBot上で動作…

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…