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

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

2015-07-01から1ヶ月間の記事一覧

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

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

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

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

Compass でスプライト画像を作ってみる

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

Compassメモ(Colorヘルパー関数、ImageDimensionヘルパー関数)

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

Compass(Reset CSS、compassモジュール、CSS3モジュール)

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

Compass インストール・プロジェクト設定・コンパイル

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

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

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 の醍醐味であるファイル分割(@import)、関数(@function)、継承(@extend)、@mixin、@include、@content についてまとめておきます。 Sass 応用(ファ…

Sass の基本操作2(条件分岐、繰り返し、リスト)

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

Sassの基本操作(コメント文、ネスト、親セレクタの省略、演算、変数、標準で使える関数)

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

Sass のインストールとコンパイル(Windows)

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

ワイヤーフレーム、フローチャートなどの無料ドローツール「draw.io」 を使ってみる

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

CSS3 のみでMaterial Designライクなripple effect を試してみた

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

Google Adsense 報酬とはてなブログPRO版への移行について考えてみる(2015年07月10日時点)

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

無料版はてなブログでGoogle Adsense を試してみる(2015年07月09日時点)

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

SVG1.1 SVG 内部でJavaScirpt を動かす

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

SVG1.1 で変形・アニメーション

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

SVG1.1 グループ化について(g, symbol, defs)

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

SVG1.1 の基本図形のメモ

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

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

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

「chrome-extension://XXX/cast_sender.js net::ERR_FAILED」エラーの対処

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