去る2016年1月にブログを引っ越しました。
アナウンスがすっかり遅くなってしまいした。もう一年近く経つのですね・・・ このブログを定期的に見てくれている方がいらっしゃったらば、申し訳ございません。
新しいブログは、 shimar's blog がそれになります。 これまでは、Google Bloggerを使っていましたが、jekyll + Github Pagesに乗り換えました。
相変わらずの体でやっております。 よろしくお願いいたします。
2016/11/04
2015/07/31
[Electron] ElectronでHello,Worldアプリを書いてみる。
はじめに
ElectronっていうAtomエディタのベースを切り離してプラットフォーム化したものがある。コレを使うと、クラスプラットフォームなデスクトップアプリケーションが、HTML、CSS、Javacriptで書けるっていうんで、使っていこうかしらと思案しています。まずは、環境を作って、Hello,Worldでも。
ちなみに、環境は、
- ubuntu 14.04 LTS(32bit)
- node.js v0.12.6
Electronのインストール
npmでインストールする。
npm i -g electron-prebuilt
プロジェクトの初期化
プロジェクトっていうか、アプリのルートディレクリを掘って、npmコマンドで初期化する。
mkdir hello-electron && cd hello-electron
npm init
コード書く
browser(main)プロセス用のjavascriptコードと、rendererプロセスによって画面に表示されるhtmlを書く。 本家にあるコードそのままを試す。
動かしてみる
electronコマンドで起動する。
electron .
終わりに
とりあえずウチのへっぽこPCでも動いたので、いろいろ作ってみます。
2015/03/31
Epochでリアルタイムなチャートを表示する - Gauge編
前回の記事「Epochでリアルタイムなチャートを表示する。」の続き。前回は、D3.jsベースのチャート表示ライブラリ「Epoch」を使って、時系列なラインチャート、エリアチャート、バーチャートをリアルタイムに描画する方法について書いた。今回は、Gaugeと呼ばれるチャート?を描画する方法について。
Gauge?
gaugeは、カタカナで書くなら「ゲージ」で、「計器」を意味するらしい。実際、
使い方
gaugeを表示するには、
var gauge = $('#gauge-chart').epoch({
type: 'time.gauge',
value: 0.1
});
time.gaugeを指定する。ライン、エリア、バーと異なり、gaugeは時系列なチャートではないので、時間を指定せず、値のみ指定する。
そして、値を更新するには、
gauge.push(値);
終わりに
今回はEpochでGaugeチャートの書き方を書きました。後はHeatmapが残っているので、次回あるいはその次あたりに書きたいが・・・。
2015/03/19
Epochでリアルタイムなチャートを表示する。
html上のチャート、ラインチャートとかバーチャートとか、リアルタイムに更新したい、と思って調べていたら、Epochなるライブラリを発見したので、使い方を纏めておく。
Epoch
A general purpose real-time charting library for building beautiful, smooth, and high performance visualizations.とのこと。 で、
- javascriptライブラリ
- d3.jsベース
- Line, Area, Bar, Gauge, Heatmapの各チャートをリアルタイムに表示できる
- リアルタイムでない通常のチャートもいける
導入
Epochはjavascriptファイルとcssファイルを提供しているので、そいつらをページに引きこむ。Epoch - Getting Startedにあるようにd3.jsも忘れずに。
LineChart, AreaChart, BarChart
これらはx軸が時間、y軸は任意というチャートを描画する。見た目が違うだけでデータの構造は同じ。データの構造は、
var data = [
{ label: 'Series1',
values: [{ time: time, y: 100 }, { time: time + 1, y: 1000 }] },
{ label: 'Series2',
values: [{ time: time, y: 200 }, { time: time + 1, y: 200 }] }
];
a unix timestampである必要がある(故にEpochなのかなぁ)。で、これをEpochに与えるとチャートを表示してくれる。
<div id="line-chart" class="epoch" style="height:160px"></div>
var lineChart = $('#line-chart').epoch({
type: 'time.line',
data: data,
axes: ['left', 'bottom', 'right']
});
epoch関数のパラメータのtypeを、エリアチャートの場合はtime.area、バーチャートの場合はtime.barとしてやればよい。
で、初期データを食わせたチャートに、後から時々刻々とデータを追加していくことでリアルタイムなチャートになるんだけど、追加するデータの形式は、
var current = [
{ time: time, y: Math.random() * 1000 },
{ time: time, y: Math.random() * 1000 }
];
labelが要らない。この追加データを、
lineChart.push(current);実際に表示すると↓のようなチャートが表示される。
終わりに
Epochを使うと、他にもGaugeとかHeatmapもリアルタイムに描画できるけど、力尽きたので次回にまわします。それにしても、Epoch便利だわ。
2015/03/05
Animate.cssで簡単にDOM要素のアニメーションを実現する。
DOM要素にfadeとかslideとかのアニメーションをつけるのに、jQueryで書くのはまあ簡単ではあるけど、Animate.cssなるcss3のアニメーションライブラリを知ったので、使い方をメモっておく。シンプルなアニメーションがすごく簡単に実現できる。
Animate.css
animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects.とある、つまり、クロスブラウザに対応したクールで楽しいアニメーションの束、ってことっぽい。実際、cssを取り込むだけで、いろんな種類のアニメーションが簡単に実現できちゃう。
使い方
cssをダウンロードするなり、bower install animate.cssするなりして、HTMLにcssを埋め込む。
<head>
<link rel="stylesheet" href="path/to/animate.min.css">
</head>
で、アニメーションさせたいDOM要素にclass属性を与えてやる。と。例えば、とあるh2要素に対して、rubberBand(ビヨーーンプルンプルンプン)みたいなアニメーションをつけるには、
<h2 class="animated rubberBand">rubberBand</h2>
var target = $('h2');
var button = $('button#some-button');
button.on('click', function(ev) {
target.addClass('animated').addClass('rubberBand');
});
アニメーションの種類
- Attension Seekers
- Bouncing
- Fading
- Flippers
- Lightspeed
- Rotating
- Specials
- Zoom
当然本家のサイトでも試せるんだけど、ドロップダウンでいちいち選択するのが面倒に思って、これらを1つ1つ試すページをここに作ってみたので、よかったらどうぞ。
終わりに
animate.css、簡単に使えて効果でかいっていう感じがいいな、と思った。
登録:
投稿 (Atom)