Phil K. Owen PhilOwen

Backbone.jsで、DOMとそのイベントをすっきり使ってみる。
テキストボックスのキー入力をキャプチャして、コンソールに出しつつ、サーバにポストしてみる（このGistにサーバのコードは入れていないので、エラーが出る）。また、Nextボタンを押すと、タイトルが変わる。

Backboneは、DOM操作をしやすくするための軽量ライブラリ。 AngularのようなMVCフレームワークでなく、ミニマルなツールを目指しているので、他のライブラリと衝突せず、簡単に組み合わせられる。

JSの依存関係を解決するRequireJSで、HTMLファイルも読んでみる。

JSだけでゴリゴリDOMを作るのは個人的にしんどい。 classなどに色々設定していくのは、自分でなくちゃんとしたデザイナがHTMLでやってもらいたい。
そこで、静的なHTMLファイルを作っておき、それをテンプレートとして、JSでは変数を流し込むような使い方をした。
RequireJSのtextプラグインでそれができる。

以下で実行。

HTMLやJSでデスクトップアプリを作れるElectronを使ってみる。
世界銀行のデータAPIを呼んで、ベトナムのGDPの変遷をD3.jsでグラフ化してみた。ついでに、アニメーションで、表示する年代を 1980-2000から1990-2010へぬるっと動かしてみた。

Electronでは、メインのプロセスと描画のプロセスが別れている。 D3は、描画プロセスのほうで処理する。

World Bank APIは、ブラウザからJSでデータを取ろうとすると、

JSのサーバサードフレームワークExpressを使ってみる。
/data/jpなどと国コードをつけてアクセスすると、その国の平均寿命をJSON配列を返すようなサーバを作った。クライアント側は、その配列をD3.jsでグラフ化している。

expressのフォルダ構造は、 express-generatorをnpmでグローバルにインストールした後、

express express-rest-d3-sample

などとすれば作れる

	import Data.Time
	import Data.Aeson
	import Control.Monad.Logger
	import Control.Monad.IO.Class
	import Control.Monad.Trans.Resource (runResourceT)
	import GHC.Generics
	import Network.Wai
	import Network.Wai.Handler.Warp

	import Servant

	import Control.Concurrent
	import Control.Monad
	import System.RaspberryPi.GPIO

	main :: IO ()
	main = withGPIO $ do
	let p = PinV1_13
	setPinFunction p Output
	forever $ do
	writePin p True

	import Html exposing (Html)
	import Svg exposing (..)
	import Svg.Attributes exposing (..)
	import Mouse exposing (..)

	main = Html.program
	{ init = init
	, view = view
	, update = update
	, subscriptions = subscriptions

	import org.openqa.selenium._

	class LoginPage(implicit val driver: WebDriver) {
	def load() {
	driver.get("http://localhost:8080")
	}

	def setId(id: String) {
	driver.findElement(By.name("id")).sendKeys(id)
	}

	module Lib(module Numeric.LinearAlgebra) where
	import Numeric.LinearAlgebra