RailsにReactを導入する
現状: Rails4.x以上でサービスを稼働している。 フロントエンドは.erbで記述している。JSはassets/javascriptという普通の構成
開発リソース: １人
目的: 既存のUI資産を残しつつ、ECMAScript6 + React + Reduxに置き換える
前提: react-router,react-railsを使う
React(ES6)をbabelでコンパイルする必要があるので、frontend/src/javascript 以下にjsxを書いていく。 gulpfileはこんな感じ
var gulp = require("gulp"); var browserify = require("browserify"); var babelify = require("babelify"); var source = require("vinyl-source-stream"); var concat = require("gulp-concat"); gulp.task('compile-es6', function() { browserify('./frontend/src/javaxcript/**/*.jsx', { debug: true }) .transform(babelify) .bundle() .pipe(source('bundle.js')) .pipe(gulp.dest('app/assets/javascripts/components')) }); gulp.task('watch', function() { gulp.watch(__dirname + '/frontend/src/javascript/**/*.{js,jsx}', ['compile-es6']) });
コントローラー毎にレイアウトファイルを振り分ける作業があるんだけど、とりあえずHelloReactとか表示する。
// frontend/src/javascript/hello-react.jsx import React from 'react' export default class HelloReact extends React.Component{ render() { return( <div> <h2>Hello React!</h2> </div> ); } }
class HelloReactController < ApplicationController def index end end
# app/views/hello_react/index.html.slim = react_component 'HelloReact'
react_component はreact-railsに用意されているhelperメソッド。複数のComponentを表示すると react_component 'header' react_component 'main' react_component 'footer' みたいになっていく。
適当にrouteを設定し、urlを叩くと、ヘッダーとフッター部分が.erbで、Hello Reactの部分がjsxで書いたviewが混在したものが表示される。
気になったE3 2015動画まとめ①
METAL GEAR SOLID V: THE PHANTOM PAIN
アンチャーテッド4 A Thief's End
【PS4】
安定の
Final Fantasy VII Remake
www.youtube.com 【PS4】 超画質でサイバーパンクの世界を遊べる。キャラには興味ない。
サマーレッスン
VRゲームの技術デモで、日本に旅行中の金髪の可愛いミュージシャンに日本語を教えるゲーム。Project Morpheusまでのプロローグ。 最新技術がこの女の子の表情に詰まっている。 こういうの待ってたんだよ。 『サマーレッスン』E3 2015デモの紹介映像が到着！ シチュエーションも“ホームステイ中のミュージシャンに日本語を教える”海外出展仕様に【E3 2015】 - ファミ通.com 【Project Morpheus】
Horizon Zero Dawn
真のモンハンだと言われてる。機械化した動物を相手に戦うみたい。
Call of Duty: Black Ops III
【PS4】
ReCore
【PS4】 稲船敬二が関わってる新作というだけ
XboxのE3観たけどなんも覚えてない。
Trelloで参考にしているサイトを管理しながら開発するTips
Chromeで幾つものタブを管理しながら作業するのは効率が悪いCPU食うし、ブラウザは特にメモリ大好き。どのタブを開いているか覚えてくのも良くない。はてぶにぶち込んでおいてもどうせみない。だったらTrelloで管理すればいんじゃね。
[記事のタイトル](URL) という感じでコメント打つとリンクを生成してくれる。が、URLとページタイトルをいちいちコピペするのは面倒。なので同時にコピーできる拡張機能「Copy Title+URL to clipboard」をインストール。
https://chrome.google.com/webstore/detail/copy-title%20url-to-clipboa/hbnaclhngkhpmpgmfakaghgjbblokeeh
このボタンを押すとURLとタイトルを同時にコピーできる。だけどさっきの[記事のタイトル](URL) の符号を自分でつけるのもまた面倒。なので拡張機能をカスタマイズする。
~/Library/Application Support/Google/Chrome/Default/Extensions/hbnaclhngkhpmpgmfakaghgjbblokeeh/1.3.3_0
ディレクトリに移動
open .
copy.jsがあるのでこれをゴニョゴニョした。んだけど変更するとファイルが壊れてしまう。
copyToClipboard( tab.title + getSeps() + tab.url );
Product Huntのゲーム版のようなWebサイト作った。
機能的なものはほとんどなくて、投票数に応じて表示される。URLか説明文を書く。コンセプトとしてはインディーズゲームや良ゲーだけど知られていない製品を発掘することかな。
https://monster-hunt.herokuapp.com/
これから追加していくものは、コメントをツリー型にするのと、画像をアイキャッチに設定できるようにしたい。今の段階では必要ないけどコレクションのような機能や、メール配信なども考えてる。
これ作ってherokuに上げるまでの所要時間30分くらいだし、それ以上ユーザーいないのにモチベーションは上がらなかったから取り敢えずpushしといた。
ゲーム好きな人は投稿してほしい。コンセプト云々書いたけど、最初は見つけたゲームを記録していく感じでいいと思う。レトロゲームとか昔のRPGについても知りたいけど、そういうのも一緒にしていいものなのか。RogueとかUOとかDoomとかについて議論できる場みたいなのほしいよね。
聖書 読む
斜め読みでイマココ
創世記3章20節～24節 | 布忠.com
