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

情報系技術・哲学・デザインなどの勉強メモ・備忘録です。

JavaScript

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 上に表示させてみます…

Canvas 基礎(線・図形・テキスト)

Canvas 基礎(線・図形・テキスト) Canvas を触ってみたのでメモ。 Canvas 基礎(線・図形・テキスト) 線・図形 ブラウザがCanvas に対応してるかチェック 四角形(塗りつぶしなし) 四角形(塗りつぶしあり) 一部clear する四角形 線の太さ(幅)を変え…

FileAPI で画像を選択またはドラッグ&ドロップで画像を表示

FileAPI で画像を選択またはドラッグ&ドロップで画像を表示 FileAPI を用いて、画像を選択またはドラッグ&ドロップで、画像を表示させるものをつくりました。 また、画像のwidth, heightとDataURLを表示させるもの FileAPI で画像を選択またはドラッグ&ドロ…

JavaScript で GoogleFeedAPI を使用して、RSS の記事を取得

JavaScript で GoogleFeedAPI を使用して、RSS を取得 JavaScript の Ajax 通信を行うと、サーバー側の同一ドメイン制約に引っかかり、 取得できません。GoogleFeedAPI を使用すると取得できるようになります。 Ajax 通信の同一ドメイン制約の話はまた今度に…

jQueryでつくる先頭ジャンプ

jQueryでつくる先頭ジャンプ jQueryで、クリックすると先頭へジャンプするようなボタンをつくったのでメモ。 jQueryでつくる先頭ジャンプ ソース 参考リンク ソース 処理としては, 最初は先頭ジャンプ用のリンクを消しておく。 ( $('リンク').hide();) ある…