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

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

Compass でスプライト画像を作ってみる Compass では、画像から自動でスプライト画像を作ってくれる。 実際に試してみたのでメモ。 Compass でスプライト画像を作ってみる スプライト画像生成（自動クラス割り当て） Sass スプライト画像 CSS マジックセレク…

Compassメモ（Colorヘルパー関数、ImageDimensionヘルパー関数） Compass で使える、色関係を計算してくれるColorヘルパー関数と、 画像サイズを計算してくれるImageDimensionヘルパー関数についてまとめておく。 Compassメモ（Colorヘルパー関数、ImageDime…

Compassメモ（Reset CSS、compassモジュール、CSS3モジュール） Compass では、Reset CSSやベンダープリフィックスを補完してくれるような便利なmixin が使える。 Compassメモ（Reset CSS、compassモジュール、CSS3モジュール） Reset CSS compassモジュール…

Compass インストール・プロジェクト設定・コンパイル Compass のインストール、新規プロジェクトの作成、プロジェクトの設定、コンパイルについてのメモです。 Compass インストール・プロジェクト設定・コンパイル Compass とは インストール環境 インスト…

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

Sass 応用（ファイル分割(@import)、関数(@function)、継承(@extend)、@mixin, @include, @content） Sass の醍醐味であるファイル分割(@import)、関数(@function)、継承(@extend)、@mixin、@include、@content についてまとめておきます。 Sass 応用（ファ…

Sass の基本操作2（条件分岐、繰り返し、リスト） Sassでは、一般的プログラミング言語にあるような 条件分岐、繰り返し、リストを扱うことができます。 Sass の基本操作2（条件分岐、繰り返し、リスト） @if（条件分岐） Sass CSS @for（繰り返し） Sass CS…

Sassの基本操作（コメント文、ネスト、親セレクタの省略、演算、変数、標準で使える関数） Sass の基本操作である、コメント文、ネスト、親セレクタの省略、演算、変数、標準で使える関数についてのメモです。 Sassの基本操作（コメント文、ネスト、親セレク…

Sass のインストールとコンパイル(Windows) 今更ながら、Sass を使い始めたので、Sass の基本的な使い方をメモしていきます。 今回はインストールについてです。 Sass のインストールとコンパイル(Windows) Sass とは Ruby のインストール Sass のインストー…

ワイヤーフレーム、フローチャートなどの無料ドローイングツール「draw.io」 を使ってみる 最近は、ドローイングツールのWebサービスがあります。 その中で、使い勝手がいいという「draw.io」を使ってみました。 ワイヤーフレーム、フローチャートなどの無料…

CSS3 のみでMaterial Designライクなripple effect を試してみた 先日、Material Design Lite がリリースされました。 Material Design の中にripple effect という、ボタンをクリックすると波紋が拡がる効果があります。 こちら http://www.getmdl.io/compo…

Google Adsense 報酬とはてなブログPRO版への移行について考えてみる（2015年07月10日時点） ※2015年07月10日時点の情報です。 前回で無事登録できたので、どのくらい報酬がもらえるのか見ていきたいと思います。 Google Adsense 報酬とはてなブログPRO版へ…

無料版はてなブログでGoogle Adsense を試してみる(2015年07月09日時点) ※2015年07月09日時点での情報です。 Google Adsense についてのメモです。 はてなブログPro版でしかGoogle Adsense をできないようなブログを見かけますが、 無料版でも多少制限があり…

SVG1.1 SVG 内部でJavaScirpt を動かす SVG では、内部にJavaSciript(JS) を書くことができます。 したがって、animate などよりも複雑なアニメーションなどを行うことができます（その分重くなると思いますが。。）。 SVG1.1 SVG 内部でJavaScirpt を動かす…

SVG1.1 で変形・アニメーション SVG も、CSS3 で扱えるようなtransoform やanimate を使うことができます。 それらについて、まとめておきます。 SVG1.1 で変形・アニメーション 変形(transform) サンプル コード アニメーション animate サンプル コード an…

SVG1.1 グループ化について(g, symbol, defs) 前回は、SVG で扱える基本図形の話でした。 今回は、SVG1.1 で使えるグループ化についてのメモです。 SVG の各図形は、パワポのグループ化のように、まとめて扱うことができます。 SVG1.1 グループ化について(g,…

SVG1.1 の基本図形のメモ 昨今のレスポンシブ時代に見直されている SVG ファイルの基本的な図形描画を試したので、それについてのメモです。 SVG1.1 の基本図形のメモ 簡単な概要 対応環境 SVG ファイルの読み込み 基本図形 四角形(rect) サンプル コード 表…

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

「chrome-extension://XXX/cast_sender.js net::ERR_FAILED」エラーの対処 chorme のコンソールでデバックしてたところ、 「chrome-extension://XXX/cast_sender.js net::ERR_FAILED」のエラーを見つけたのでメモしておきます。 以下のエラーです。 「chrome…

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

Git Bash の文字化けを解消してみる 成功したのでメモとして残しておきます。 Git Bash の文字化けを解消してみる 環境 Git Bash 日本語化 文字化け 「?」表示の解決 「豆腐文字」の解決 まとめ 参考リンク

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

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

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

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

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

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>

heroku コマンドで「Your version of git is X.X.X.. Which has serious security vulnerabilities.」という警告の対処 heroku コマンドを打ったところ、以下の様な警告が出た。 単刀直入に言うと、msysgit のversionが古くてセキュリティ的によくないらしい…