react.jsで広告テンプレートを作りたい #scripty03

©2015 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止

React.jsで広告テンプレートを

作りたいリッチラボ株式会社

穴井宏幸(@pirosikick) !

SCRIPTY#3 2015/03/10


React.jsで広告テンプレートを

作りたいリッチラボ株式会社

穴井宏幸(@pirosikick) !

SCRIPTY#3 2015/03/10

リッチ広告


穴井宏幸リッチラボ株式会社エンジニア

@pirosikick(ぴろしきっく)

JavaScript, React.js, Flux Golangを始めたい


話すこと

• リッチ広告でReact.jsを使いたい

• 検証のためいくつか書きなおした

• よかったことや

• あんまりよくなかったこと・実戦投入への課題など


/** * "Hello! ${ 入力内容 }"と表示するだけのサンプル */ import React from "react"; !let HelloApp = React.createClass({ getInitialState () { return { name: this.props.defaultName || '' }; }, ! render () { return ( <div className="wrapper"> <h1>Hello! { this.state.name }</h1> <input type="text" onChange={this.onChange}/> </div> ); }, ! onChange (e) { this.setState({ name: e.target.value }); } }); !React.render(<HelloApp defaultName="pirosikick" />, document.body);


• View専門

• Virtual-DOM

• JSX（別に使わなくても書けるけども）


リッチ広告

ちょっとデモ


リッチ広告

• ユーザイベントで変化させてリッチな感じに

• ex) scroll, deviceorientation, touch, etc…

• CTRや広告の印象が良かったりする


なんでReactで作りたいか

• DOMを組み立てていく様が普段の開発と似ていてなんか相性良さそう

• 単純に新しいことをやりたい


React.jsで書き直してみた

バナープラススクロールしている間だけ大きく表示される


比較


Before 163行（独自ライブラリ除く）


'use strict'; 'use es6'; !import React, { PropTypes } from 'react'; !let Banner = React.createClass({ propTypes: { src: PropTypes.string.isRequired, width: PropTypes.number.isRequired, height: PropTypes.number.isRequired, margin: PropTypes.oneOfType([PropTypes.string, PropTypes.number]) }, ! render () { let props = this.props; let style = { width: props.width, height: props.height, margin: props.margin || '0 auto', position: 'relative', background: `transparent url(${props.src}) no-repeat 50% 50%`, backgroundSize: 'contain' }; ! return <div style={style}>{props.children}</div>; } }); !let Extension = React.createClass({ propTypes: { src: PropTypes.string.isRequired, width: PropTypes.number.isRequired, height: PropTypes.number.isRequired, offsetTop: PropTypes.number.isRequired, offsetLeft: PropTypes.number.isRequired, shown: PropTypes.bool }, ! render () { let props = this.props; let style = { width: props.width, height: props.height, position: 'absolute', top: props.offsetTop, left: props.offsetLeft, zIndex: 100000, opacity: props.shown ? 1 : 0, background: `transparent url(${props.src}) no-repeat 50% 50%`, backgroundSize: 'contain', pointerEvents: 'none', webkitTransition: '-webkit-transform 0s linear', webkitTransform: 'translate3d(0, 0, 0)', webkitTransitionDelay: `${props.show ? 0 : 200}ms` }; ! return <div style={style}></div>; } }); !let Anchor = React.createClass({ propTypes: { href: PropTypes.string.isRequired, width: PropTypes.number.isRequired, height: PropTypes.number.isRequired, clickTracking: PropTypes.string }, ! render () { let props = this.props; let style = { position: 'absolute', width: props.width, height: props.height, top: 0, left: 0 }; ! return <a href={props.href} onClick={this.onClick}></a>; }, ! onClick () { if (this.props.clickTracking) { var img = new Image(); img.src = this.props.clickTracking; } } }); !export default React.createClass({ displayName: 'BannerPlus', ! propTypes: { param: PropTypes.object.isRequired, option: PropTypes.object }, ! getInitialState () { let param = this.props.param; let option = this.props.option || {}; let state = {}; state.link = param.link; state.width = option.width || 320; state.height = option.height || 100; state.banner = { src: param['banner'], margin: option['margin'] || '0 auto' }; state.extension = { src: param['extension'], width: option['extensionWidth'] || 320, height: option['extensionHeight'] || 200, shown: false, }; state.extension.offsetTop = -(state.extension.height - state.height) * 0.5; state.extension.offsetLeft = -(state.extension.width - state.width) * 0.5; state.clickTracking = option['clickTracking']; state.researchTracking = option['researchTracking'] || []; ! return state; }, ! render () { let state = this.state; ! return ( <Banner src={state.banner.src} width={state.width} height={state.height} margin={state.banner.margin}> ! <Anchor href={state.link} width={state.width} height={state.height}></Anchor> ! <Extension src={state.extension.src} width={state.extension.width} height={state.extension.height} offsetTop={state.extension.offsetTop} offsetLeft={state.extension.offsetLeft} shown={state.extension.shown}></Extension> ! <div ref="hoge"></div> </Banner> ); }, ! showExtension () { if (!this.state.extension.shown) { this.state.extension.shown = true; this.setState({ extension: this.state.extension }); } }, ! hideExtension () { if (this.state.extension.shown) { this.state.extension.shown = false; this.setState({ extension: this.state.extension }); } }, ! showExtensionDuringScroll: (function() { let timerId; return function () { this.showExtension(); ! if (timerId) clearInterval(timerId); ! timerId = setInterval(this.hideExtension, 200); } })(), ! componentDidMount () { document.body.addEventListener('touchmove', this.showExtensionDuringScroll); window.addEventListener('scroll', this.showExtensionDuringScroll); }, ! componentWillUnmount () { document.body.removeEventListener('touchmove', this.showExtensionDuringScroll); window.removeEventListener('scroll', this.showExtensionDuringScroll); } });

After 185行（本体除く）

• ちょっと増えた • 体感的にはそんなには書いていない

• propTypesの記述 • JSXを読みやすくするために

改行を多く入れたのが原因？ • 実際はrequireとかで分けるだろう


イベント処理記述

設定に基づきDOM構築

• ユーザイベントでstyle属性を書き換えるような処理

Before 全体の構成


/** * DOMの構築 */ function $elem (elemName) { return $(document.createElement(elemName)); } !// CSSは使えないので直接style属性に定義 var banner $elem('div').css({ 'width': config.width, 'height': config.height, 'margin': config.margin, 'position': 'relative', 'background': `transparent url(${config.banner.src}) no-repeat 50% 50%`, 'backgroundSize': 'contain' }); !var extension = $elem('div').css(/* 割愛 */); !var anchor = $elem('a').css(/* 割愛 */); !anchor .attr('href', config.link) .on('click', function () { ... }; !banner.append(extension, anchor);

Before

※注）実際のコードは晒せないのでjQueryで似たようなコードを書きました


import React from "react"; !let Banner = React.createClass({ propTypes: {/* 割愛 */}, ! render () { let props = this.props; let style = { width: props.width, height: props.height, margin: props.margin || '0 auto', position: 'relative', background: `transparent url(${props.src}) no-repeat 50% 50%`, backgroundSize: 'contain' }; ! return <div style={style}>{props.children}</div>; } }); !// 上とstyle以外ほとんど一緒なので割愛 let Extension = React.createClass({/* 割愛 */}); let Anchor = React.createClass({/* 割愛 */});

After

• そんなに変わらない


※注）実際のコードは晒せないのでjQueryで似たようなコードを書きました

Before/** * ユーザイベントに合わせてstyle属性の書き換え */ !var isExtensionShown = false; var timerId; !// 大きいバナーを表示する処理 function showExtension () { extension.css({ /* 割愛 */ }); isExtensionShown = true; } !// 多きバナーを隠す処理 function hideExtension () { dom.extension.css({ /* 割愛 */ }); isExtensionShown = false; } !// スクロール時に表示・非表示 $(window).on('scroll', function () { !isExtensionShown && showExtension(); ! if (timerId) clearInterval(timerId); ! timerId = setInterval(function () { hideExtension(); }, 200); });


/** * 外側の大きいバナーのComponent */ !let Extension = React.createClass({ propTypes: { /* 割愛 */ }, ! render () { let props = this.props; let style = { ! /* 省略 */ ! /** * props.isShownで表示・非表示 */ opacity: props.isShown ? 1 : 0, ! /* 省略 */ ! }; ! return <div style={style}></div>; } });

After


良い点


• JSX HTMLを書く感じで心地良い

• 全体の見通しがよくなった

• Componentに見た目と振る舞いの定義があるから

• 単体テストしやすい

• this.props

• React.addons.TestUtils


実戦投入への課題


うまく実装できなかったこと

• 広告を挿入する要素の外側への処理

• ex) expand時にbodyに要素を付け替え

• 実装できてもあんまりいいやり方では無さそう

• 2回React.renderを呼び、予めbodyに要素追加

• Reactの外から要素を移動して戻す


サイズがデカイ

• react.min.js v0.12.2 128KB

• 大体10KBに収まるように心がけているので、めっちゃでかい。。。

• 他のVDOM系もそれなりのサイズ感

• deku.min.js 9.9KB

• virtual-dom 28KB(uglifyjs)


まとめ


• リッチ広告への実戦投入は現状出来なそう🙅

• 容量が小さいものが欲しい

• 書いている時の気持ちよさ👏 （JSXに限る）

• コードの見通しがよく感じた👍


Thanks:)

@pirosikick(ぴろしきっく)

react.jsで広告テンプレートを作りたい #scripty03

Technology