読者です 読者をやめる 読者になる 読者になる

fnwiyaBlog

EmacsとかLispとか可視化とか

Javascript

pre-commitでeslintを走らせてコードを綺麗にしていく

linterがあるとコーディングスタイルが統一され無駄なdiffやバグの防止ができますが、 既存のアプリにあとから導入しようと思うといきなり大量のエラーがでてきて萎えてしまいます。 そこで自分が編集したファイルだけlintを実行して少しずつ直していくとい…

windows10でunixコマンドが打てるようになるらしいが7~8の人はcashがおすすめ

windowsがbuild2016でunixコマンドをサポートすると発表してから少し経ちましたが、 やはり衝撃的な発表でしたね。 近年のMicrosoftは以前のクローズドな文化とは打って変わってオープンな姿勢ですごくいいなと思います。 とはいえwindows7や8の方もunicコマ…

d3.jsのグラフをスマホ対応させるためのtips

今日思いついて比較てき汎用性高かったので。 たとえばd3.jsのグラフをレスポンシブ対応させる場合に、 windowサイズが欲しいわけですがその時に <div id="aaa"> <svg>...</svg> </div> となっているとして よくあるsvgコンテナを作る部分の var margin = {top: 20, right: 20, bottom: 40, …

d3.jsの散布図でアニメーションをいれる

d3.jsでアニメーションを使うときは アニメーション前の状態 アニメーション後の状態 をそれぞれ分けてかき、アニメーション後の状態に移る部分で その動きをeaseなどを使って表現します。 使えるアニメーションはこのあたりをみると参考になると思います。 …

d3.jsで複数の折れ線グラフを書く

基本的には他と同様データをバインドして描画するのですが、 複数グラフを書きたいときは引数に配列をとって描画のところをループしてあげるとDRYにかけると思います。 function drawLine(id, datasets) { // コンテナ var margin = {top: 20, right: 20, bo…

d3.jsで円グラフを書く(開始アニメーション/ラベルテキスト/色つき)

ネット上にd3.jsの情報はあるのですが、 どの部分で何をしているかわかりにくかったので まとまりごとコメントをいれてみました。 function drawPie(id, dataset) { // コンテナ var width = 300, height = 200, radius = Math.min(width, height)/2; var sv…

D3.jsで散布図を書く

d3.jsでグラフを書くためのステップですが、 おおざっぱに datasetを用意する。(多次元配列やオブジェクトの配列の場合がおおい) コンテナの用意 スケールの設定 データをバインドする データ描画する 軸の設定 というように分解できます。 実際のコードは以…

レーダーチャートが簡単に作れる(chart.js)

色々できるのですが僕はレーダーチャートに使っています。 github.com 使い方 html部 <div class="chart"> <canvas id="myChart" width="300px" height="300px"> </canvas> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="vendor/Chart.js/Chart.min.js">

webサイト内でkonamiコマンドを打ち込むと特定の動作をさせる(cheat.js)

webサイト内で特定のコマンド打つとJavaScriptが実行できます。 web上でエディターを作る時などに便利かもしれません。 github.com 使い方 <script type="text/javascript" src="js/cheat.js"></script> <script> cheat.add("konami", function() { alert("Hello from konami"); }); </script> 「下下上上左右左右エンター」 ↓ 「Hello fr…

画面サイズによってJavaScriptの動作を変える

画面サイズさえ取得できれば処理を変えるのは条件分岐で簡単です var _width = $(window).width(); if (_width <= 1023) { doSomething; } else { doSomething; }

スクロールすると出てくる「トップに戻る」

トップからスクロールするとひょこっとでてくる「トップに戻る」の実装法です。 html部 <p id="rippy"><a href="#"><img src="img/rippy.png"></a></p> css部 #rippy { position: fixed; bottom: -30px; right: 5px; z-index: 99; } #rippy img { width: 180px; float: right; } #rippy a { padding: 30px 0; display: bl…

レスポンシブなスライダーを簡単に実装する(slick)

日々お世話になってます。 kenwheeler.github.io 日本語解説はここが詳しい。 【jQuery】高機能で実装も簡単なスライダー-slick.jsの使い方-再生・停止ボタンも付けてみました | Snaplog [JS]レスポンシブにも対応した使いやすいカルーセルを探す時はこのス…

レスポンシブ対応なハニカム上のパネルを並べられるライブラリhoneycombs.js

ハニカム上にdivを並べられてマウスオーバーでオモテウラを切り替えられるライブラリです。 github.com 使い方(READMEより) <script src="honeycombs/js/jquery.honeycombs.js"></script> <link rel="stylesheet" type="text/css" href="honeycombs/css/honeycombs.css" /> <div class="honeycombs"> <div class="comb"> <div class="front-content"> <p>I am a front titl…</p></div></div></div></link>

タイプライター風のアニメーションを加えるt.js

自分のgithub.ioでも使っているt.jsを紹介します。 github.com 使い方 <div id="target"> sometext<br> <del>これはけされる</del>消されたところにこれが書かれる<br> 2秒待機<ins>2</ins>待った?<br> ...<ins>これは塊で一気に表示される</ins> </div> $(function(){ $('#target').t({ speed:30, speed_vary:true, delay:1, mis…

javascriptの即時関数はなぜあの書き方で即時関数になるのか

今日とてもわかりやすく説明してもらったので。 // 即時関数の基本の形 (function myFunc(){ doSomething; })() なぜこうなるのか。 ただの関数宣言 // 関数宣言 function myFunc(){ doSomething; } javascriptでは最初にfunctionがくると関数宣言だとみなさ…

underscore.jsソースコードリーディング(Collections)

underscore.jsのソースコードリーディングを始めたのでその記録です。 Collectionsのメソッドは以下 each map reduce reduceRight find filter where findWhere reject every some contains invoke pluck max min sortBy groupBy indexBy countBy shuffle sa…

東京Node学園#18行ってきた

今日はヒカリエDeNAで開催された東京Node学園に行ってきました。 nodejs.connpass.com 「Node.js v4.0 + io.js 総復習」 by @yosuke_furukawa 最初はV4.0の話。 実はいままでできなかったbufferのループとかREPLのヒストリーとかが実装され、 逆にutil.isXXX…

backbone.jsでSPA

昨日に引き続きbackbone.jsです。 今日は github.com に取り組みました。 メモ js/app.jsで各パーツごとに呼び出すファイルを指定。 MyApp.App = Backbone.View.extend({ el: '#app', tmpl: MyApp.Templates.layout, initialize: function () { this.$el.htm…

backbone.js学習メモ#01

backbone.jsの勉強を始めました。 今日はドットインストールで動画を見た後に github.com のソースコードリーディングをメインに行いました。 以下学習メモ modelで状態の定義 コレクション=モデルの集合 コレクションの記述後var Todos = new TodoList;で…