べにやまぶろぐ

技術寄りの話を書くつもり

JavaScript

Colored Hashtag for Trello を v1.0.5 に更新しました

どうも Trello のデザインが変わったせいか動作しなくなっていたので Colored Hashtag for Trello を更新しました。 Colored Hashtag for Trellochrome.google.com Chrome プラグインだと公開するだけで勝手にユーザの環境も更新されるから開発者的には有難…

Firefox で mousemove イベントが発火しなくなったときは preventDefault を確認しよう

自前のドラッグアンドドロップを実装していて、Chrome や Safari では発火している mousemove イベントが Firefox では定常的に上がってこないという事象に悩まされました。 色々調べてみたところ下記の stackoverflow で同じような質問をしている人が。 SVG…

Trello のハッシュタグをもとにカードに色づけしてくれる Chrome プラグイン "Colored Hashtag for Trello" を Yeoman を使って作ってみた(その3)

Colored Hashtag for Trello ↑ を作ってみたシリーズ、前回の記事 の続きです。 Yeoman の generator-chrome-extension でプロジェクトを作成すると /app/scripts/ 配下に background.js と chromereload.js という二つのスクリプトが生成されます。今回はこ…

Colored Hashtag for Trello を v1.0.3 に更新しました

こちらの Chrome 拡張ですが、 Colored Hashtag for Trello jQuery のセレクタで無駄に引き直しているところがあったのでそこを修正しました。また、Plus for Trello 拡張を意識して、複数のハッシュタグがある場合に先頭のものを使用するようにしました。 …

Trello のハッシュタグをもとにカードに色づけしてくれる Chrome プラグイン "Colored Hashtag for Trello" を Yeoman を使って作ってみた(その2)

Colored Hashtag for Trello ↑ を作ってみたシリーズ、前回の記事 の続きです。 タイトルにもありますが、今回初めて Chrome 拡張機能を作るに当たって、以前 勉強会 に参加してから気になっていた Yeoman の Chrome Extension Generator を使ってみました。…

Trello のハッシュタグをもとにカードに色づけしてくれる Chrome プラグイン "Colored Hashtag for Trello" を Yeoman を使って作ってみた(その1)

あけましておめでとうございます、今年もよろしくお願いいたします。 年末はインフルエンザで寝込んでいたのですが、休暇中に作りたいものも一杯あったのでちょこちょここんなのを作ったりしていました。何気に元旦リリースです。 Colored Hashtag for Trell…

July Tech Festa 2014 に参加しました #techfesta

今日は今年で二回目というこちらのイベント、July Tech Festa 2014 に参加してきました。たまたま FB で教えてもらって、日曜開催という日取りにも屈することなく行ってきたわけですが、かなり実りの多い勉強の機会となりました。 今回参加したセッションに…

JTF2014「フロントエンドで普及が進むビルドツールたち — Grunt、gulp ほか」の聴講メモ #techfesta

Swift のセッションに並んでこちらもフロント寄りのお話ということで、最近 Grunt あんまり活かせていないもやもやが解消するかなと思って こちらのセッション に参加してきました。そしたら時代は今や Gulp ですよという話に… 個人的に響いたこと Grunt か…

『【ヒカ☆ラボ】業務アプリケーション開発の「いま」を語る~最新トレンド技術YEOMANとは!?~ 』に参加してきました #hikalab

突然の雷雨で靴も靴下もパンツもびしょ濡れになりながら 【ヒカ☆ラボ】業務アプリケーション開発の「いま」を語る~最新トレンド技術YEOMANとは!?~ に参加してきました。 前々から薄々気になっていたヒカラボ初参加。ヒカリエ近いし帰りやすいし嬉しいで…

D3.js でロケールを設定してグラフ軸のラベルの表示を変更する

バージョン : D3.js 3.4.5 たとえば Multi-Series Line Chart のような時系列のチャートを描画するとき、元データの期間を見て勝手にラベル(X軸の "April" など)を振ってくれるのは良いんですが場合によっては『1月』、『2月』とか、あるいは『睦月』、『…

JSFiddle を埋め込んだときのデフォルト表示を Result に変える

完全にメモエントリーですが Embedding the fiddle — jsFiddle 0.5a2 documentation In example if to show the result as the first tab add result,js,html,css/ to the URL: src="http://jsfiddle.net/zalun/NmudS/embedded/result,js,html,css/" のよう…

SVG 要素のクラス操作は addClass()/removeClass() ではなく attr() で。

バージョン : jQuery 1.11.0 下の fiddle は SVG rect (赤い正方形の) クラス操作の例です。 addClass() を使う $("#rect").addClass("selected"); と(クラスを上書くので addClass () と等価ではないですが) attr() を使う $("#rect").attr("class", "sel…

D3.js で mouseover/mouseout のイベントがひたすら発火するときは mouseenter/mouseleft を試してみる

バージョン : D3.js 3.0.4 追加検証用のメモエントリーです。こちら適当なサンプルを組んでみた*1のですが で左側の赤いのは mouseover/mouseout イベント、右側の青いのは mouseenter/mouseleave イベントを捉えるようにしてあるのですが左だと四角形の中を…

D3.js で rect を描くと辺の太さが均一にならない

表題の通りなのですが rect を append して下記の svg タグが生成されたとき、 <rect x="0" y="0" width="190" height="200" stroke="#008080" fill="white" stroke-width="5" style="stroke-opacity: 0.5;"></rect> 表示が のようになってしまって明らかに右辺と下辺が太くておかしくなってしまいました。 どうしたものかと調べたところ rect borders are not sharp Try changing your origin…

「エンジニアのためのデータ可視化[実践]入門 ~D3.jsによるWebの可視化」は D3.js を使わなくてもあらゆる KPI を扱う Web 屋さんにオススメな一冊

エンジニアのための データ可視化[実践]入門 ~D3.jsによるWebの可視化 (Software Design plus)posted with amazlet at 14.03.03森藤 大地 あんちべ 技術評論社 売り上げランキング: 894Amazon.co.jpで詳細を見る 技術評論社のサイトには電子版の販売もありま…