タグ

ブックマーク / gunmagisgeek.com (16)

  • node.jsでファイル監視を手軽に行えるモジュール「chokidar」

    node.jsにはファイル監視を行えるAPI「fs.watch()」や「fs.watchFile()」がありますが、なんだかんだいろいろめんどくさかったりします。 【参考】Node.js の fs.watch() と fs.watchFile() の違い – てっく煮ブログ そういったメンドクサイ部分を綺麗にラップしてファイル監視を手軽に行えるようにしたモジュールが「chokidar」です。 サンプル スクリプトを起動したカレントディレクトリ(子ディレクトリを含む)を監視して、ファイルの追加や削除、編集などが行われたら通知します。 var chokidar = require('chokidar') var watcher = chokidar.watch('.', { //watch対象ディレクトリorファイル ignored: /[/\]./, //無視する対象 persistent:

    node.jsでファイル監視を手軽に行えるモジュール「chokidar」

  • 1784

    argvオブジェクトを作成してrunメソッドを実行すると、引数をオブジェクトとして取得することができます。

  • [Fabric.js]SVGをcanvasに転写する

    Fabric.jsは、canvasを操作するためのJavascriptライブラリです。 同様のライブラリは多数ありますがFabricの特徴は、内部にSVGパーサーを持ちsvgからcanvasへのインポートおよびcanvasからsvgへのエクスポートを行う機能があります。 //canvas要素の取得 var canvas = new fabric.Canvas('canvas'); canvas.setWidth(300); canvas.setHeight(300); //SVG要素取得 var SVGstring = document.getElementById('wrapSVG').innerHTML; //SVGをcanvasへ転写 fabric.loadSVGFromString(SVGstring , function(objects, options) { options.t

    [Fabric.js]SVGをcanvasに転写する

  • 【D3.js】 Satellite Projection（衛星俯瞰図）てすと

    D3.jsには上記のような地図を表示するためのProjection(投影法)関数が用意されているのですが……なかなか思うように使いこなせません。 投影法を指定する際の一番難しいポイントは正しい数値を指定しないと、すぐ地図が画面外へ消えてしまうところですね。 Satellite Projectionの各値(rotateやtiltなど）を変更すると、どのように地図の見え方が変わるのか確認するためにテストをつくってみました。 var path, map, xy; var map = d3.select("body").append("svg:svg").attr("width", 960).attr("height", 600); //地図用のステージ(SVGタグ)を作成 d3.json("japan.geojson", function(json) { map.selectAll("path"

    【D3.js】 Satellite Projection（衛星俯瞰図）てすと

  • 【D3.js&Three.js】各都道府県の人口に合わせて高さを変えてみた（3D地図）

    example 昨日の記事の続きです。 各都道府県の人口データを元にMeshの厚みを変えてみました。 人口の多い県ほど高く表示されます。 サンプル d3.json("japan.geojson", function(json) { d3main(json); }); function d3main(json) { var container; var camera, scene, renderer; var mesh; initScene(); function initScene() { container = document.createElement('div'); document.body.appendChild(container); //シーンの追加 scene = new THREE.Scene(); //カメラの設定 camera = new THREE.Perspec

    【D3.js&Three.js】各都道府県の人口に合わせて高さを変えてみた（3D地図）
    typista
    typista 2014/11/21
    【D3.js&Three.js】各都道府県の人口に合わせて高さを変えてみた（3D地図）
    リンク

  • 点集合を包むパスを描画する（hull.js + D3.js）

    表示されている点の集合を包むパスを作成します。 D3では、「d3.geom.hull」というメソッドを使用することでシンプルな凸包を作成できますが、今回は凹面を含むパスを作成したいのでhull.jsを組み合わせて使ってみました。 Hull.js サンプル とりあえずhull.jsにあった馬のサンプルをD3.jsを使ってsvgで描画してみました。（元はcanvas上に描画) 青色のパスがhull.jsで算出したものです。 example //馬ポイントデータ var horse13k = [[135,141], [132,142], [134,143], [141,144], /* 省略 */ [958,272], [959,277]]; var svg = d3.select("svg"); //ポイントを表示 var point = svg.selectAll(".point") .da

    点集合を包むパスを描画する（hull.js + D3.js）

  • 【node.js+D3.js】RSSリーダーを作る

    feedparserの仕様が変わったため現在動きません。 Googleが酷いことをしたので自前のRSSリーダーを作成してみます。 フィードを読み込んでリストとして表示するだけの、最低限の機能しかありません。 node.jsでRSS取得サーバーを作成 フィードの読み込みには「feedparser」ライブラリを使用します。 var FeedParser = require('feedparser') , request = require('request') , fs = require('fs') , http = require('http') , url = require('url'); http.createServer(function (req, res) { var pathname = url.parse(req.url).pathname; var queryData =

    【node.js+D3.js】RSSリーダーを作る

  • iPadでプログラミング＆デバッグ（Web系）

    メインで使用していたMacBook Air のキーボードがご臨終なされたので、すっかりHulu Viewerと化していたiPadを本格的にプログラミングに使用してみることにしました。 ある程度使える感じになってきたのでメモ。 （ただし、ぶっちゃけ無理やりです） ■アクセサリ キーボード やはりオンスクリーンキーボードでコーディングを行うのは大変なので外付けキーボードがあると良いですね。私は「ロジクール ウルトラスリム キーボードカバー」を使用しています。 親指入力でコーディングすることに抵抗がないのであれば、外付けキーボードが無くてもオンスクリーンキーボードを分割して使用すると捗るかもしれません。 iPadのソフトウェアキーボードを分割して、手に持ったままでも文字入力をしやすくする ■サーバー iPadではローカルに仮想環境を作って作業するといったことができません。 コーディングはすべてサ

    iPadでプログラミング＆デバッグ（Web系）

  • 画像からExif情報(GPS)を取得する node.js or Javascript EXIF Reader – GUNMA GIS GEEK

    var ExifImage = require('exif').ExifImage; try { new ExifImage({ image : 'test.jpg' }, function (error, image) { if (error) console.log('Error: '+error.message); else console.dir(image['gps']); }); } catch (error) { console.log('Error: ' + error); }

    画像からExif情報(GPS)を取得する node.js or Javascript EXIF Reader – GUNMA GIS GEEK

  • [GMaps API v3] ストリートビューを使う。

    ストリートビュー、２７市町村も対象に　グーグル　群馬 グーグル グッジョブ! (￣∇￣ﾉﾉ”ﾊﾟﾁﾊﾟﾁﾊﾟﾁ!! これまでは「ストビューなんて使えるのは、所詮一部の都会人だけ」と手を出さずに拗ねていましたが、これから心を入れ替えて勉強しようと思います。 とりあえず基本から。 <!DOCTYPE HTML> <html> <head> <title>GMap Streetview example</title> <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <script src="index.js"></script> </head> <body onload="initialize()"> <h2>GMap Streetview API　テスト </h2> <div> <div i

    [GMaps API v3] ストリートビューを使う。

  • JavaScriptで最短経路探索 – GUNMA GIS GEEK

    経路探索アルゴリズムを勉強中。 解説できるほど、まだ理解が及んでいないのでソースだけ載せています。 最短経路探索（テキスト） 最短経路探索（enchant.js) 参考 ダイクストラ法 A*

    JavaScriptで最短経路探索 – GUNMA GIS GEEK
    typista
    typista 2014/01/11
    JavaScriptで最短経路探索
    リンク

  • [windows 8アプリ]プレゼンテーション用のスライドも作成できるMarkdown Editor「md」がシンプル便利

    正確には「スライド表示ができる」だけれども。 windows8アプリのMarkdown Editor「md」をインストールしてみたところ、とても便利だったので紹介します。 とくにwindow8タブレットを使っている方にお勧めです。 Markdown Editor「md」 ・シンプルなMarkdown Edoitor 左がエディタエリア、右側がプレビューエリアになります。 書いた文章が即座にプレビューに反映されます。 window8タブレットは横幅の比率が大きいのでエディタ／プレビューエリアで２分割されてもちょうど良い感じです。 ベーシックなmarkdownのシンタックスに加えgithub flavorシンタックスも使用できます。 ・スライド(プレゼンテーション)機能 書いた内容を即座にスライドとして表示できます。 これが非常に便利。 タブレットでささっと書き上げて即プレゼン、なんてことがで

    [windows 8アプリ]プレゼンテーション用のスライドも作成できるMarkdown Editor「md」がシンプル便利
    typista
    typista 2013/08/10
    プレゼンテーション用のスライドも作成できるMarkdown Editor「md」がシンプル便利
    リンク

  • 【D3.js】 データビジュアライゼーション事例

    New York TimesやGitHub Visualizerなどの可視化で使用されているD3.jsですが「気になったデータビジュアライズ作品のソースを覗いてみたらD3.jsで作成されていた」という事が最近増えてきました。 最近見つけた中で、「これは凄い！」と感嘆させられた作品を３つほど紹介します。 World Bank Global Development Sprint | visualizing.org オープンデータで「食の日本地図」　家計調査（2005 – 2012年）より:オープンデータ情報ポータル Out of Sight, Out of Mind: A visualization of drone strikes in Pakistan since 2004 【追記】 まとめサイトを作ってみました。 D3.js 事例 – NAVER まとめ

    【D3.js】 データビジュアライゼーション事例
    typista
    typista 2013/04/30
    ぽけったー 【D3.js】 データビジュアライゼーション事例
    リンク

  • ゴールデンウィーク中にD3.jsを学びたい方にお勧めな厳選まとめ

    「データビジュアライゼーション（D3.js）を学ぶための教材まとめ」も大分量が増えてきて、初めてD3.jsを学ぶという人にはどこから手をつけて良いものか解りづらくなってきました。 そこで、ゴールデンウィーク中にD3.jsを学んでみたいという方に、いくつか厳選してお勧めしてみたいと思います。 スライドを眺める まずはD3.jsがどんなライブラリなのか把握しましょう。 ・about d3.js チュートリアルを学ぶ とりあえず分量・内容的に下記のチュートリアルがお勧めです。 ・D3 チュートリアル｜スコット・マレイ｜alignedleft 余裕があっていろんなレイアウトのグラフを描いてみたいなら、下記サイトを。 ・svg要素の基本的な使い方まとめ コード共有サイトを使って実践 チュートリアルを手軽に試すなら、コード共有サイトを利用するのが楽チンです。 jsdo.it, jsfiddle, Tr

    ゴールデンウィーク中にD3.jsを学びたい方にお勧めな厳選まとめ
    typista
    typista 2013/04/30
    ぽけったー ゴールデンウィーク中にD3.jsを学びたい方にお勧めな厳選まとめ
    リンク

  • Google Map上にヒートマップを表示する

    国土数値情報サイトからダウンロードした都道府県地価調査データ(点)を元にGoogle Map上に群馬県の地価データをヒートマップで表示しました。 国土数値情報からダウンロードしたデータをKMLにコンバートし、さらにJavascriptの配列に変更(手動)してます。 （ぶっちゃけJPGIS(XML)から、直接JavaScriptの配列に変換した方が楽だったような気も…） KML形式への変換の仕方は以下の記事を参照してください。 Google Map上に学校区情報（国土数値情報）を表示する ※追記 Quantum GISでgeoJSON形式で出力することができるので、そっちを使う方がらくでした。 データさえできてしまえば、ヒートマップを表示するのは簡単です。 HeatmapLayerを使用するには、libraries=visualizationを付加してGoogle Map APIを読み込んで

    Google Map上にヒートマップを表示する
    typista
    typista 2013/02/25
    ぽけったー Google Map上にヒートマップを表示する
    リンク

  • 【Waypoints】特定のHTML要素にスクロールイベントを設置するjQueryプラグイン

    ちょうど、スクロールイベントを制御するシンプルなライブラリを探していて見つけたプラグインです。 「このdivタグより下にスクロールしたらイベントを発生させて関数を呼ぶ」といったことが簡単に行えます。 その他、１つのHTML要素に複数のスクロールイベントを設置したり、オプションのoffset値を使えば、「この要素から下に100pxスクロールしたらイベントを発生させる」など細かい指定も可能です。 パララックス効果を使ったWEBサイトを作成する際などに便利ですね。 jQuery Waypoints ■サンプル

    typista
    typista 2013/02/07
    ぽけったー 【Waypoints】特定のHTML要素にスクロールイベントを設置するjQueryプラグイン
    リンク
  • 1

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.