d3.js初心者が3時間でRails5.1に複数のグラフを実装した際に参考にした記事
最新版は v4 ですが、参考になる資料がまだ潤沢ではないので、 v3 を使いました。
作ったグラフを行動軌跡図と棒グラフです。
References
Path
Grouped Bar Chart
既存プロジェクトをRails5.1にアップデートしたので、webpackerを使って、楽できる感じの JS(ES6)とRailsの開発環境を構築してみた
経緯
環境を以下のようにアップデートしたので、webpackerを導入しました。 - Rails 5.1.3 - Ruby 2.4.1
既存プロジェクトにwebpackerを導入する
- 基本的に README を見れば問題ないです
- またのコマンドを打てば、サンプル（大元になるガイド）ファイルも出力してくれるので、乗っかればやりやすいです。
gem 'webpacker', '~> 2.0' # OR if you prefer to use master gem 'webpacker', git: 'https://github.com/rails/webpacker.git' gem 'foreman'
bundle install
./bin/rails webpacker:install
vueを導入
- elmやreactも導入するコマンドがあります
./bin/rails webpacker:install:vue
const { env, settings } = require('../configuration.js')
const isProduction = env.NODE_ENV === 'production'
const extractCSS = !settings.dev_server.hmr
module.exports = {
test: /\.vue$/,
loader: 'vue-loader',
options: {
extractCSS: isProduction || extractCSS
}
}
既存環境との両立
- 既存の古いJSもたくさんあったので、一気にwebpacker環境に持っていくのは大変そうだったため、共存させつつ、少しずつ移行していくことにしました。
- webpacker環境のファイル構成を
app/frontend以下に構築します。 app/frontend/packs以下のファイルを、public/packs以下に、Compileした後に出力します。
default: &default source_path: app/frontend source_entry_path: packs public_output_path: packs cache_path: tmp/cache/webpacker . . .
// Note: You must restart bin/webpack-dev-server for changes to take effect
const webpack = require('webpack');
const merge = require('webpack-merge');
const sharedConfig = require('./shared.js');
const { settings, output } = require('./configuration.js');
module.exports = merge(sharedConfig, {
devtool: 'cheap-eval-source-map',
output: {
pathinfo: true
},
.
.
.
});
viewファイルからのインクルード
= stylesheet_pack_tag 'hoge/style/main' # /public/packs/hoge/style/main.css を読みます = javascript_pack_tag 'hoge/main' # /public/packs/hoge/main.js を読みます = javascript_include_tag 'http://d3js.org/d3.v3.min.js' # おなじみのタグも使えます
開発の為の工夫
webpacker環境下のファイルを編集したらブラウザがライブリロードされてほしい
rails sと合わせて、 webpackerもwatchしたまま走らせたい- formanを使って、両方を一つの npm run script で叩く
web: bundle exec rails s # watcher: ./bin/webpack-watcher webpacker: ./bin/webpack-dev-server
{
"scripts": {
"dev": "bundle install && bundle exec foreman start -f Procfile.dev",
"build": "bundle exec rails webpacker:compile",
},
}
開発の際は
yarn dev を叩いて開発
eslintを入れる
yarn add babel-eslint eslint eslint-config-standard eslint-friendly-formatter eslint-loader eslint-plugin-html eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard --D
module.exports = {
test: /\.(js|ts|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
options: {
formatter: require('eslint-friendly-formatter')
}
}
でもwebpackerに乗せたくなかったので、コメントアウトしておきました。
.eslintrc はいい感じに
UnityのTutorialを1つこなしてみた
前置き
- Unityはじめました（今日から）
- 早速作りたいものを作ろうとしたけど、Unityの操作に自信をなくしてTutorialからやり直すことにしました
やったこと
Tutorialの中でも一番最初にやるであろうものに取り組みました。
ビデオレクチャーになっていてショートムービーを8本見て、簡単な玉転がしアプリを作りました。
学んだこと
感想
- 今のところ難しく感じませんでしたが、今後どうなるかって感じです
- 物理関係のロジックや、ゲームロジックに関してはUnityであってもなくても同様に実装できるっぽいので、問題なさそうです
- むしろライブラリが整ってて楽かも？
- C#ってこんなに書きづらかったっけ？というモヤモヤ…
わんこを見て癒やされます
作りたいものが決まったので、ひとまずUnityをインストールしてみた
前置き
ここ半年くらい結構他のことで手一杯で、CourseraのMachine Learningくらいしかできなかったのですが、やっと落ち着き始めたので、前から作ろうと思っていたものを作り始めようと思います。
何を作るのか
仕事でVRや3D関係のことをやっていて、プライベートと仕事では機械学習とデータ解析をやっているので、それ関係にしようかなぁと思っていましたが、そもそもわんこが大好きなので、ワンコ関係にしたいと思います。
詳細はおいおい。
何はともあれ
データ解析や機械学習、WebGL関係の環境は整っているのでそのへんは置いといて、ちゃんと3Dアプリを作ろうと思ったので、Unityを入れようと思いました。
Unityは以前使ってみたことはあるのですが、PCを移行してからはインストールどころか、動向のチェックさえしていなかったので、見てみました。
オシャレになっている….? Σヽ(｀д´；)ﾉ
色々合ったんだねぇ〜
インストールします
別に難しくありません。
普通にできます。
iOSとAndroidとWebGLにExportしたいので、その辺を選択して、Download And Install Unilityを走らせます。
立ち上げます
SignInしますー
Licenseを選択しますー
Activateしますー
立ち上がりましたー
ここまでは何一つ苦労なく、簡単でしたー
最後に
ああ、たくさんのかわいいわんこともしゃもしゃしたい・されたいです(´･ω･)(･ω･｀)
Three.js入門 4 - OrbitControlsを使って地球を回してみる
👇の様にオブジェクトをグリグリするのが目標です。 今回は👇のコードをforkさせて頂き、自分の環境で動作させてみます。
結果としては以下の様にできました。
光までついてきてしまったり、途中で回転がとまってしまったりと問題もまだありますが、それらはこれから調整してみます。
OrbitControls.jsはthree.min.jsにはいっていない
最初なんで動かないのかわからなくて困りましたが、three.min.jsは最小限のもので、より様々なライブラリがthree.jsのプロジェクトにはあります。example以下に多いようなので適宜使ってみるといいかもしれません。
dat.gui
これはとても便利でした。
画面右上のパネルですが、ここで様々な値を調整できます。
ちゃんとした使い方などはまた後で。
Three.js入門 3 - Three.jsとCANNON.jsを組み合わせて、地面を作ってみる
なにはともあれ地面を作ってみます。
参考にするのは👇 blog.codecamp.jp
three.jsとcannon.jsを組み合わせて、地面を作ってみます。
Download
three.js
👇らへんから落としてきます。 three.js - Javascript 3D library
pugファイルに追記します。
script(src='vendor/js/three.min.js')
npm scriptを追加
cpxを yarn add cpx -D して入れます。そして、three.jsを適当な場所に配置したら、それらをpublic以下にコピーするようにします。
"build:copy": "cpx \"./src/vendor/**/{*.html,*.js,*.eot,*.svg,*.ttf,*.woff,package.json}\" ./public/vendor/",
また👆はyarn startに追記します。
cannon.js
👇を見ていれます。 基本的にはthree.jsと同じことをします。 www.cannonjs.org
yarn startして、three.min.jsやcannon.min.jsがDLされていたらOKです。
なんやかんやでできたもの
空間に地面を設置出来ました！
詳しくはまた。
Three.js入門 2 - 開発環境を整える
👆をcloneして動かします。
とはいえ、yarnを入れる必要があったので、入れます。
yarnって何かいまいち言葉にできないので、それはこれから勉強します。
これでとりあえず、大枠は出来ました。
http://localhost:3355
にアクセスして、画面が表示されたら動いたということで。
階層を自分仕様に
いじるコードをsrcの中に入れる
- src -> src/js
- styles -> src/styles
.postcssrc.jsonを一部修正
"input": "src/styles/main.css",
webpack.config.jsを一部修正
module.exports = { entry: "./src/js/main.js",
テスト
$ yarn start
jade(pug)を使う
インストール
$ yarn add pug pug-cli -D
src/html/index.jade(pug)を作成
npm scriptを修正
"build:html": "pug --hierarchy -o public/ src/html/",
"watch:html": "pug -w --hierarchy -o public/ src/html/",
