たれぱんのびぼーろく

わたしの備忘録、生物学とプログラミングが多いかも

javascript

d3.jsとデータの書き換え

入力値やインタラクションの結果をデータとグラフに反映する仕組みはd3.jsに備わっているのか否か 結論 d3.jsには双方向バインディングに該当する仕組みがない. dataの取得・更新とrebinding、rebinding後の更新が必要. うーむ There’s no data-binding magi…

SVGのtextをその場で書き換える

下のtext要素をクリックしてごらん、なんと編集できるよ!! 私はtext要素。でも編集できるよ! (クリックしてみ) わかる人向け: 仕組みを一言でいうと contentEditableなHTML要素の下にtext要素を配置し、このセットをforeignObjectへ入れてSVG要素下に吊るす…

Javascriptの日時 (date & time)

Javascript標準で日時を扱うにはDateオブジェクトを使う. 使い方は割と簡単で、いくつか問題点はあるけどとりあえず使う分にはまぁ 概要 こんな風になっている inputはローカル時間 (日本時間とかアメリカ時間とか。時差のようなもの) の情報を持っているが…

JavaScriptのgenerator入門

generatorの概念 generator(という概念)とは、繰り返しを簡単に・見通し良く記述する仕組みである. generatorの利用 generatorを利用することによって 繰り返しオブジェクト(イテレータ)の容易な作製 見通しの良い非同期処理コード記述 が可能になる. gene…

Node.js プロジェクト開始手引き

git init npm init gitは.git directory, npmはpackage.json が命 これさえあればgitとnpmが消えても大丈夫(のはず) でもコード自体が吹き飛ぶと元も子もない. なのでGitHubのプライベートリポジトリをリモート. これで万事オッケー! 復旧したいときはGitHu…

Node.js stream

内部バッファ internal buffer, internal queue internal-bufferにデータがたまっていく. highWaterMark以下の場合、内部的にstream.read()がcallされる. 新しいstreamを作る際、read()をoverrideし、_read()内でstream.push(chunk)をcallすれば、internal-b…

node-auto-launch

electronのスタートアップ登録を可能にする不思議ライブラリ node-auto-launch ← node-winreg ← child_process.spawn github.com Child Process Node.js v0.11.11 Manual & Documentation node.jsはそもそもコマンドラインを叩けるらしい. 子プロセス云々. …

HoloLensの開発 with javascript

JSでホログラムは創れる (我ながらキャッチーな言葉) HoloLensを始めとした、Windows Holographicでアプリを作成する. 嬉しいことに、javascriptでそれが可能なんです。 Windows Holographic Windows Holographicsにおけるアプリ Windows Holographicのアプ…

プログラムを改修する

思いつきでガリガリ書いていたプログラムが、案外いい感じになり、リファクタリングしたくなった. 保守という概念を覚える前に書いたコードを、保守出来るようにしたい. こんなとき、どうすりゃいいのだろう. リファクタリング コードの保守・機能追加をする…

配列から特定の要素を取り除く ―ver. ES2016―

配列から特定の要素を乗り除く (例. [a, b, X, d] -> [a, b, d]) 方法を複数紹介する。 一覧 Array.filter (ES2016) Array.indexOf + Array.splice 詳細 Array.filter (ES2016) EcmaScript2016で新登場した、Array.filterメソッドを利用する方法. // ary配列…

d3.js version 4

モジュール Arrays (Statistics, Search, Transformations, Histograms) Axes Brushes Chords Collections (Objects, Maps, Sets, Nests) Colors Dispatches Dragging Delimiter-Separated Values Easings Forces Number Formats Geographies (Paths, Projec…

cognitoでログイン/セッション管理

ユーザーを限定するwebサイト・webアプリはログインの仕組みが必要になる. AWS cognito, 特にUser Poolsの機能でこれが実装できる. Cognitoとは何ぞ?という方はこちら一読を推奨. tarepan.hatenablog.com Cognitoを用いたセッション管理の大枠 インターネッ…

AWS Cognito 入門 -概要と詳細へのリンク-

Amazon CognitoとはIDサービスとデータ同期を提供する. Amazon Cognitoの機能 いくつかのサービスが関わりあって存在. 機能をジャンジャン追加するので名前の整合性が(ry Amazon Cognito Cognito User Pools (Your User Pools) Cognito Identity (Federated …

Cognito User Poolsの機能と使い所

Amazon Cognito User Poolsとはユーザー名簿管理サービスである. User Poolsの機能 User Pools単体を用いることで 名簿の作成・管理 ユーザーの追加・メール認証・削除 password管理 ユーザー属性の管理・呼び出し ログイン/セッション管理 などが出来る. 他…

AWS(クラウド)で手軽にwebアプリを作る

概要 webアプリ(ブラウザで動くアプリ)を思いついた、作ろう。 ブラウザで全部の処理させるのって、すごい大変そう。 サーバーを借りて色々する…のかな、難しそう。 →クラウド(AWS)で手軽にwebアプリが作れる! 具体的に アマゾン ウェブサービス / AWSを使…

Node.jsとAWS Elastic Beanstalk

パッケージのインストール package.jsonのdependencyに書いておけばEB側で勝手にインストール、すごいぞEB package.json ファイルがある場合は、Elastic Beanstalk では依存関係をインストールするために npm install が実行されます。 link アプリの起動 特…

javascriptと最大値 ver. 2016 - オブジェクトの配列も -

Math.max()が基本 最近増えた便利記法: スプレッド演算子 (...) Math.max() 引数の最大値を返します. 引数: 数字 (カンマ区切り, 配列不可) Math.max(1,2,4,7,3) == 7 配列の最大値 新しい方法 スプレッド演算子 (...) を利用. ES6から登場したスプレッド演…

データの更新・遷移・引き出し/D3.js

データの更新 Data(data, key)のkey指定を利用 nebuta.hatenablog.com データの遷移 transition treeの遷移 Interactive d3.js tree diagram - bl.ocks.org データの引き出し data() 引数無しでselectionの第1groupからjoinされたdatum配列を返してくれる. h…

有向非循環グラフの可視化

概要 有向非循環グラフの可視化(visualization)について手法と記事のまとめ。 有向非循環グラフ Directed Acyclic Graph architecture topolodical sort layer assignment vertex ordering within layers median vertex positioning within layers Sugiyama …

Node.jsとは

固いまとめ Node.jsとはJavaScript実行環境である。 Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. https://nodejs.org/en/ Node.jsはgoogle Chrome (webブラウザ)にも搭載されているV8エンジンを採用. Node.js自体は何の言語…

チェックボックス/ html5

input要素のtype="checkbox"で出来ます. 見本 checkbox これラベルつき、ここも押せるよ 仕様書 https://html.spec.whatwg.org/multipage/forms.html#checkbox-state-(type=checkbox) 属性 checkedで最初からcheckされている状態 イベント チェックされたら…

transitions/d3js

selection.transition() あるselectionに対してtransitionsを適用可能にするmethods. 返り値はselectionの特別なタイプ. Starts a transition for the current selection. Transitions behave much like selections, except operators animate smoothly over…

webGLとは

wise9 › WebGLとはなんなのか、ゲーム好きの大学生に説明してみる webGL 1.0 WebGL is designed as a rendering context for the HTML Canvas element. The HTML Canvas provides a destination for programmatic rendering in web pages, and allows for pe…

webと3Dモデル・アニメーション・ゲーム

webGL 基幹技術 WebGL - OpenGL ES 2.0 for the Web sketchfab 3Dモデル公開サイト&web viewer. webGLを基盤技術として、 各種3Dモデリングソフトのデータ→webGL を実現. 他のサイトに貼り込める3D viewer(ぐりぐり回したりできる)が凄い. Sketchfab - The p…

W3C DOM関連文書の年表

W3C standardsの策定年と依存関係 このサイトはよくまとまってる感じ. このサイトはとても詳しい. 以下は自分がW3CとWHATWGのspecificationをみてまとめたもの. DOM DOM3 core 正式名称: Document Object Model (DOM) Level 3 Core status: W3C Recommendati…

ローカルなURLスキーム/2015.11版

ローカルスキームとは、URLスキームのうち、リソースへの接続にネットワークを介さないスキームのこと。 A local scheme is a scheme that is one of "about", "blob", "data", and "filesystem". A URL is local if its scheme is a local scheme. URL stan…

webブラウザにおけるデータ保存

webブラウザのデータをローカルに保存・維持しておく方法は複数ある。 Web Storage sessionStorage localStorage Indexed Database API Web SQL Database(標準化打ち切り) FileSystem API(標準化打ち切りの後、新しい規格として標準化中) Cookie application…

d3js/覚えておきたいmethods

覚えておきたいmethods scale 数値のスケール変換関数. 変換のタイプ(linearとか)に合わせたコンストラクタっぽいので関数を作り、入力domainと出力rangeを関数のsetterでセットして完成。 var xScale = d3.scale.linear(); xScale.domain([0,100]) .range([…