JavaScript
前々回はドットで線を描画、前回はドットで矩形の描画とアルファブレンディングをやってみました。 どちらもループ処理で1ドットずつ打っていきました。例えばフルHDだとピクセル数は1920×1080=2073600になりますが、これだけの数を順番に1ピクセルずつ色を…
前回、「2Dグラフィックスのしくみ」という本を読んでドットで線を描いてみました。 今回は四角形を2つ重ねてみます！という日記です。 2Dグラフィックスのしくみ ――図解でよくわかる画像処理技術のセオリー (WEB+DB PRESS plus)作者:FireAlpaca開発チーム技…
「2Dグラフィックスのしくみ」という本が面白かったです。メモリのデータはどのように画面に表示されるのかという話がわかりやすく書いてあります。2次元に並んだピクセル上に直線や円を表示したりベジェ曲線を描いたり、画像を加工したりペイントツールの仕…
以前このブログでも紹介したWebブラウザでCASL2を動かすCASL2 Playgoundですが、バイトコードインタプリタの実装をTypeScriptからC++へ移植しWebAssemblyでJavaScriptから使うように実装してみました、という日記です。 github.com 実装してみた理由は、ただ…
書き出したら長くなってしまい4回分になってしまった日記です。 ReactとGoogle Sign-In ReactRouterを使ってGoogleログイン前と後で画面を変える ReactRouterを使ってGoogleログイン前と後で画面を変える（続き） 今日は、Google SignInでログインした後、自…
前回、前々回に引き続き、Google Sign-In をReactなSPAで使った時の日記です。 今回は、前回できなかった /login と /private のルーティングを実装する。 /login ログイン前: ログインページを表示 => ログインに成功すると / へ遷移 ログイン後: / へ遷移 …
前回に引き続きGoogle Sign-In をReactなSPAで使ってみた時の日記、2日目です。 今回はReactRouterを使って、ログイン前と後で画面を変えてみます。 ReactRouterを導入 ReactRouterを使う。バージョンは 4.2.2 。 $ npm install --save-prod react-router-do…
Google Sign-In をReactなSPAで使った時の日記です。 サーバーとの連携やセッションの管理について少し悩んだのでメモっておきます。ちょっと長くなりそうなので何回かに分けます。 Google Sign-In Google Sign-Inと言っているのはこれのこと。 developers.g…
地元の勉強会のための準備です。 yokohama-north.connpass.com 前提 $ node -v v8.2.1 $ npm -v 5.3.0 準備。 $ npm init MobX インストールします。 $ npm i mobx -D MobXを使ったストアのサンプル。このチュートリアル分かりやすいです。 MobX: Ten minute…
Githubのwikiで十分足りるんだけど、ちょっと欲しかったのでつくった！ Dropboxに保存したmarkdownをGFMに対応して表示したり編集したりするツール。 Markdown-box コードはこちら。 github.com JavaScriptでDropboxのAPIを叩いてるだけ。せっかくなのでReac…
前回、React Routerを使ったルーティング、サーバーとのデータ通信までできました。しかし、これまでECMAScript 5 (ES5) でJavaScriptを書いてきましたが、grails-react-boilerplateではECMAScript 2015 (ES2015) でJavaScriptが書かれています。 今回はBabe…
普段の仕事はサーバーサイドばっかりだったので、年末年始でフロントエンドの知識をアップデートしたいなぁ、ReactかVue.jsやろうかなぁと思ってました。それで、こちらの記事を読んでると... uehaj.hatenablog.com サーバサイドJavaをずっとやってきて、モ…
ちょっとタイミング遅れてるけど、ReactiveX (Rx, Reactive Extensions) を勉強してみました。 TwitterやWeb上の記事などでよく目にしてたので気にはなってたのだけど、先日やっと触ってみました。 備忘録です。メモメモ。 使ったRxJavaのバージョンは、1.0.…
jsCafe19でFabric.jsを触ってみた話をしてきました。 そのときのスライドです。 Fabric.jsを触ってみた 作ってみた簡易なゲームです。 Flappy Ball MV＊フレームワークとCanvas系のライブラリを一緒に使うとうまく書けないですよねー、って懇親会で話してま…
前回、D3.jsでレーダーチャート書いてて、enter() で何が起きてるのかよく分からなかったのでソースコードを読んでみました。そのときのメモです。 長くなりました。一番下の方にまとめもあります。 読んだD3.jsのバージョンは、3.4.2です。 読んでみたらent…
前回に引き続きレーダーチャートを書き続けます！とりあえず今回で終わりにします。 今日は頂点にラベルをつけてみるのと、チャートを色分けするのをやってみます。 ラベル 各頂点が何番目のパラメータが対応しているのかを表示したいです。 SVGのtextを使う…
前回の続きです！引き続き、D3.jsでレーダーチャートを書きます。 レーダーチャートは書くことはできましたが、SVG領域の大きさが100×100であることが前提でコーディングされてます。 たとえば、前回作成したline関数はこんな感じでした。 var dataset = [ […
今年からD3.jsに入門しました。 チュートリアル（D3 入門 | スコット・マレイ | alignedleft）を読み終えたので、作ってみたかったレーダーチャートを作ってみます。こちらのサイト（->svg要素の基本的な使い方まとめ）を参考にさせていただきました。 D3.js…
たまにやると忘れてるのでメモ。 Karmaはnode.jsベースのテストランナーで、ターミナルからテストを実行できて、複数のブラウザを立ち上げてテストを実行したり、ファイルの変更を監視して自動でテストを実行したりもできます。 RequireJSを使ってるJavascri…
この記事はJavaScript - Client Side - Advent Calendar 2013 17日目の記事です。 JavaScriptでモジュール管理を実現できるRequireJSですが、どんくらい使われてるのでしょうかねー？初めて触ったときは、すげー！って思ったのを覚えています。 でも、試しに…
都道府県とかで長いセレクトボックス嫌ですよね。セレクトボックスを使いやすくするjQueryプラグインを作りました。 ソースはGistに張りました。 セレクトボックスを選択しやすくするjQueryのプラグイン · GitHub 下のようにすればセレクトボックスが拡張さ…
