archive-com.com » COM » N » NITOYON.COM

Total: 757

Choose link from "Titles, links and description words view":

Or switch to "Titles and links view".
  • ファイル編集したら即ブラウザー再読込させる LiveReloadX を作った - てっく煮ブログ
    を読み込むと LiveReloadX サーバーに WebSocket で接続しにいく path to dir 配下のファイルを更新したら LiveReloadX サーバーはブラウザーに WebSocket で通知を出す 通知を受け取ったブラウザーは再読込する ということで ブラウザーに livereload js を読み込ませる方法が重要になってくる livereload js の読み込ませ方 4 通りあるので 好きなやつを選ぶことになる 手動で追加する ブラウザー拡張をインストールする PC 版 Safari Chrome Firefox のみ static モードで実行する proxy モードで実行する 前半の 2 つは LiveReload で提供されてる手段で 後半の 2 つはオリジナルだ 手動で追加する 既存の HTML ファイルに次の script タグ JavaScript スニペット を追加する それだけ script document write script src http location host localhost split 0 35729 livereload js snipver 2 script script 静的な HTML ファイルで開発してる場合とか 動的 HTML だけどテンプレートを編集するだけで済む場合は この手順が楽だろう ブラウザー拡張をインストールする ソースはいじりたくないよ という場合は How do I install and use the browser extensions LiveReload Help Support からブラウザー拡張を導入するとよい ただし 対応するブラウザーは PC 版 Safari Chrome Firefox のみに限られる 拡張の LiveReload ツールバーのボタンを押すと livereload js が表示中のページに動的に挿入されるようになる static モードで実行する 静的なサイトのときには これが便利かもしれない s か static オプションつきで実行する livereloadx s p 35729 path to dir static モードでは 静的 Web サーバー として動作する たとえば http localhost 35729 foo にアクセスすると path to dir foo index html からファイルを読み取って返してくれる ついでに script タグを自動で挿入して ブラウザーが livereload js を読み込むようにしてくれる proxy モードで実行する HTML をいじりたくないし ブラウザー拡張も入れたくないし 静的サイトでもないときは この方法が便利だろう y http example com か proxy http example com オプションをつけて実行する livereloadx y http example com p 35729 l path to dir proxy モードでは リバース プロキシー として動作する たとえば http localhost 35729 foo にアクセスすると 裏側で http example com foo からデータを取ってきてクライアントに返す ついでに script タグを自動で挿入して ブラウザーが

    Original URL path: http://tech.nitoyon.com/ja/blog/2013/02/27/livereloadx/ (2016-02-13)
    Open archived version from archive


  • Node.js+CoffeeScript でソースマップを使ってデバッグを楽にする方法 - てっく煮ブログ
    is a demo bar foo npm install source map support で source map support モジュールをインストールしておく 生の CoffeeScript がソースマップに対応してないので CoffeeScriptRedux を使って JavaScript に変換する CoffeeScriptRedux bin coffee js i demo coffee demo js echo sourceMappingURL demo js map demo js CoffeeScriptRedux bin coffee source map i demo coffee demo js map あとは普通に実行すれば スタックトレースには coffee ファイルの位置が出てくる node demo js demo coffee 4 bar throw new Error this is a demo Error this is a demo at bar demo coffee 4 19 at foo demo coffee 5 3 at Object anonymous demo coffee 6 3 at Object anonymous demo coffee 6 6 at Module compile module js 449 26 bar demo coffee 4 19 のところにご注目 本当だったら ここがコンパイル後の demo js 上の位置になってるはずなんだけど source map support モジュールのおかげで コンパイル前の位置が表示されている ここでは示してないけど Error を catch したときの error stack も coffee ファイルの場所になる CoffeeScript だけじゃなく TypeScript や JSX もソースマップには対応しているし 圧縮やファイル結合したきにもソースマップさえ吐いておけば このように変換前の位置情報を出力してくれるようになるので 便利便利である 仕組み 動作原理が気になったので source map support js のソースをざっと読んでみた 一番の肝は Error prepareStackTrace を定義して スタックトレースを書き換えているところ どうやら V8 エンジンの Stack Trace API というものがあるようだ また 未処理の例外のときに例外が発生した位置のソースを表示するために process on uncaughtException でがんばって処理している ソースマップの解析には Mozilla の source map モジュール を使っているようだ まとめ Node js でもソースマップが使えるよ 参考記事 Node js Source Map Support for Better Compiled JavaScript Debugging Badass JavaScript Tweet 2013年02月19日 編集履歴 JavaScript Node js 関連する記事 jQuery 1 9 のソースマップ対応で圧縮版でもデバッグが簡単になった話

    Original URL path: http://tech.nitoyon.com/ja/blog/2013/02/19/node-source-map/ (2016-02-13)
    Open archived version from archive

  • K-means 法を D3.js でビジュアライズしてみた - てっく煮ブログ
    クラスターの重心 印 が移動しながら 塊ができていく様子を確認できると思います D3 js と ActionScript 3 ここからはプログラミングの話です お気づきの方もいるかもしれませんが このビジュアライズは 4 年ほど前に ActionScript 3 で作った クラスタリングの定番アルゴリズム K means法 をビジュアライズしてみた の焼き直しです 同じものを D3 js と ActionScript 3 で実装してみて気づいたことがいくつかあります 実装のしやすさ ActionScript 版にくらべて D3 js 版では クラスタが変わるときの色の変化のアニメーション 重心が移動するときの線のアニメーション 新規作成のときのアニメーション を追加しています D3 js の data や enter といった API を活用すれば このようなアニメーションが簡単に実現できました ActionScript で同じことを実現するのは かなり面倒です data や enter の嬉しいところについては D3 js の Data Driven な DOM 操作がおもしろい で書いているので 興味があれば読んでください ただ D3 js で作る場合は

    Original URL path: http://tech.nitoyon.com/ja/blog/2013/11/07/k-means/ (2016-02-13)
    Open archived version from archive

  • タグ「ビジュアライズ」の記事一覧 - てっく煮ブログ
    操作がおもしろい 2013年10月24日 JavaScript ビジュアライズ 経路探索アルゴリズムの ダイクストラ法 と A をビジュアライズしてみた 2010年01月26日 アルゴリズム ビジュアライズ ActionScript 完 パーフェクトシャッフルは何回で元に戻るか AS3版 2010年01月22日 ActionScript ビジュアライズ 続 パーフェクトシャッフルは何回で元に戻るか AS3版 2010年01月15日 ActionScript ビジュアライズ パーフェクトシャッフルは何回で元に戻るか AS3版 2010年01月13日 ActionScript ビジュアライズ 3D版 K Means法 ビジュアライズしてみた 2009年04月13日 3D ビジュアライズ アルゴリズム ActionScript クラスタリングの定番アルゴリズム K means法 をビジュアライズしてみた 2009年04月09日 ビジュアライズ アルゴリズム ActionScript 郵便番号マップ作成記 3 経度緯度から動的に郵便番号を描画する 2009年03月20日 JavaScript ビジュアライズ 郵便番号マップ作成記 2 ジオコーディングで経度緯度を求める 2009年03月18日 JavaScript ビジュアライズ 郵便番号マップ作成記 1 郵便番号データをデータベースに入れる 2009年03月17日 JavaScript ビジュアライズ 郵便番号マップを作ってみた 2009年03月16日 JavaScript ビジュアライズ タグ一覧に戻る

    Original URL path: http://tech.nitoyon.com/ja/blog/tags/visualize/ (2016-02-13)
    Open archived version from archive

  • D3.js の d3.svg.line() を試してみた - てっく煮ブログ
    うまいこと計算してくれている 今回のサンプル というわけで 前回のサンプルを少し改善しつつ 各種の interpolate を試せるようにしたものを置いておく random push pop linear linear closed step step before step after basis basis open basis closed bundle cardinal cardinal open cardinal closed monotone 使い方 初期状態では 10 個の要素を持った配列を表示している 横軸が配列のインデックス 縦軸が要素の値 0 1 をあらわす random ボタンを押すと 配列の中身がランダムな値で置き換わる push ボタンを押すと 配列の末尾に要素を追加する pop ボタンを押すと 配列の末尾から要素を取り除く 選択欄で interpolate の値を変更できる ボタンを押すと アニメーションつきで見た目が変更するのを確認していただけるだろうか SVG をサポートしてる必要があるので モダンではないブラウザーでは表示できない HTML のソース div svg id sample width 300 height 300 style background white border 3em solid ccc svg div script src http d3js org d3 v3 min js charset utf 8 script button onclick random random button button onclick push push button button onclick pop pop button select id line interpolate option linear option option linear closed option option step option option step before option option step after option option basis option option basis open option option basis closed option option bundle option option cardinal option option cardinal open option option cardinal closed option option monotone option select script src d3js svg line js charset utf 8 script d3js svg line js のソース var svg d3 select svg sample attr width 300 attr height 300 style display block var polyline svg append path attr stroke red attr stroke width 1 attr fill transparent var values for var i 0 i 10 i values push Math random d3 select line interpolate on change update function update var n values length var s d3 select line interpolate node var interpolate s options s selectedIndex value var line d3 svg line x function d i return i 1 300 n 1 y function d i return d 280 10 interpolate interpolate var circles svg selectAll circle data values circles enter append circle attr cx line x attr cy 0 attr r 0 circles exit transition duration 300 attr cy 0 attr r 0 remove circles attr fill

    Original URL path: http://tech.nitoyon.com/ja/blog/2013/10/29/d3js-svg-line/ (2016-02-13)
    Open archived version from archive

  • D3.js の Data-Driven な DOM 操作がおもしろい - てっく煮ブログ
    DOM の作成処理は data enter 配列の中身を ul に追加するには D3 js では次のように書く ul shiritori list を選択 d3 select ul shiritori list その下の li を列挙 selectAll li それぞれに shiritori 配列の要素を割り当てる data shiritori data より li が少ない場合は 足りない分について enter li を追加する append li li の中身の文字を設定する text function d i return i 1 番目は d これを実行すると HTML はこうなる なりそうですよね ね ul id shiritori list li 1番目はりんご li li 2番目はゴリラ li li 3番目はラッパ li ul 再度同じ JavaScript 処理を走らせるとどうなるだろう li は 6 個になるだろうか 答えは ならない だ というのも enter 以降の処理は shiritori 配列に対応する li がないとき のみ実行される li の個数 shiritori 配列の要素数 である限りは何度実行しても enter 以降は実行されない では shiritori push パイナップル として配列側を増やしてから 再度 上の JavaScript を走らせてみるとどうなるだろう そうすると 新規追加分の パイナップル に対してだけ enter 以降の処理が実行される つまり HTML は ul id shiritori list li 1番目はりんご li li 2番目はゴリラ li li 3番目はラッパ li li 4番目はパイナップル li ul となる enter は配列の増加分に対して DOM を生成してくれるわけだ DOM の削除処理は data exit 次は shiritori 配列が HTML より小さくなったときに対応しよう exit で削除方法を書く ul shiritori list を選択 d3 select ul shiritori list select ul shiritori list その下の li を列挙 selectAll li それぞれに shiritori 配列の要素を割り当てる data shiritori data の数よりも多い li については exit 削除する remove はい これで終わり shiritori が減ってないときは何も起こらないし shiritori pop してから実行すると末尾の li は消える shiritori してから実行すると li は消えてなくなる DOM の更新処理は data 最後に更新処理 ul shiritori list を選択 d3 select ul shiritori list その下の li を列挙 selectAll li それぞれに shiritori 配列の要素を割り当てる data shiritori li の中身の文字を設定する text function d i return i 1 番目は d enter や exit なしにすれば 更新時の処理になる データが与えられたときに それぞれの要素をどのように表示すべきかを記述している 配列を書き換えて この処理を実行すると 中身の文字が適切に更新される ここでは text しか使ってないが jQuery 的な attr や style を活用すれば 柔軟な指定が可能である 全部まとめる 生成 削除 更新の処理をまとめてみる function update shiritori var s d3 select ul shiritori list selectAll li data shiritori 作成 s enter append li 削除 s exit remove 更新 s text function d i return i 1 番目は d 作成 のところで text を実行しなくなっているが そのあとの 更新 のところでまとめて設定できるのでご安心を 完成したソースを改めて見てみると 作成 増えたデータに対して DOM を追加 削除 減ったデータに対して DOM を削除 更新 データに対応する表示に更新 という処理がシンプルに書けているのが嬉しい 同じような書き方を

    Original URL path: http://tech.nitoyon.com/ja/blog/2013/10/24/d3js/ (2016-02-13)
    Open archived version from archive

  • タグ「LiveReloadX」の記事一覧 - てっく煮ブログ
    Grunt から使えるようにした 2013年07月29日 LiveReloadX Jekyll Node js てっく煮 LiveReloadX 0 2 0 公開 除外ファイルを指定可能になったよ 2013年03月25日 LiveReloadX ファイル編集したら即ブラウザー再読込させる LiveReloadX を作った 2013年02月27日 JavaScript 作った LiveReloadX Node js タグ一覧に戻る About Profile nitoyon にとよん 京都のベンチャー会社勤務 プログラマ たまに趣味でデザイン 詳細 Subscribe twitter nitoyon Facebook ページ RSS

    Original URL path: http://tech.nitoyon.com/ja/blog/tags/livereloadx/ (2016-02-13)
    Open archived version from archive

  • text-hatena.js を GitHub に移動した - てっく煮ブログ
    2005 年といえば Web 2 0 だとか Ajax という言葉がバズっていて ちょうどはてなブックマークが登場したあたりでもあった はてなブックマークは今よりも遥かに技術者寄りで ホットエントリーには 2ch まとめや NAVER まとめの姿はなく Ajax や JavaScript の話であふれていた それらの記事を目を輝かせながら読み漁っていた 自分もホットエントリーの仲間に入りたくて作ったものの 1 つが text hatena js だった 公開当時にそこそこ話題になったのもうれしかったが その後に層々たる人がプレゼン資料やブラウザー拡張に活用してくれたのがうれしかった もしかしたら 自分が作ったものの中で 一番 人の役に立ってるのかもしれない 2012 年の話 せっかく GitHub に公開するのだから ついでに 2012 年っぽく書き直してみることにした 実践したのは次の 3 つ QUnit で単体試験を定義 無名関数でグローバル変数を汚さないようにしつつ node js でも動くように Grunt でファイルを監視して lint QUnit 特に Grunt を組み込んだことで ファイルを変更するたびに自動で lint して単体試験が走るのが便利だ 設定を少し変えれば コード結合や minify もできちゃう 可能性を感じる 考えてみると jQuery や node js

    Original URL path: http://tech.nitoyon.com/ja/blog/2012/12/21/text-hatena-js-github/ (2016-02-13)
    Open archived version from archive



  •