Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
How_To_ Introduce_TradingView
英 谷口
October 25, 2017
1
610
How_To_ Introduce_TradingView
英 谷口
October 25, 2017
Tweet
Share
More Decks by 英 谷口
See All by 英 谷口
plasma.pdf
akira_taniguchi
1
570
pycon mini osaka 発表資料:ethereum
akira_taniguchi
1
540
OAuth2の資料
akira_taniguchi
0
3.5k
zaifbotのlt
akira_taniguchi
0
95
pycon2016_zaif
akira_taniguchi
0
180
pyconjp 2016 ライトニング用(未確定)
akira_taniguchi
1
180
test pdf
akira_taniguchi
0
57
PyConJP 2015 スライド資料
akira_taniguchi
0
77
Featured
See All Featured
What's new in Ruby 2.0
geeforr
336
30k
Web Components: a chance to create the future
zenorocha
303
40k
No one is an island. Learnings from fostering a developers community.
thoeni
9
1.3k
Typedesign – Prime Four
hannesfritz
34
1.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
655
120k
Ruby is Unlike a Banana
tanoku
91
9.3k
The Pragmatic Product Professional
lauravandoore
19
3.1k
The Web Native Designer (August 2011)
paulrobertlloyd
75
2k
Design by the Numbers
sachag
271
17k
Happy Clients
brianwarren
89
5.6k
jQuery: Nuts, Bolts and Bling
dougneiner
56
6.4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
49k
Transcript
αʔόαΠυΤϯδχΞ͕ +BWB4DSJQUΛॻ͍ͯ 5SBEJOH7JFXΛಋೖͨ͠ ୩ޱӳ ౦ژ/PEFֶԂࡇ
ࣗݾհ
໊લɿ୩ޱӳ ϝΠϯݴޠɿ1ZUIPO Yܥ !IPSPCJ@HFOHFS "LJSB5BOJHVDIJ BLJSBUBOJHVDIJ
None
࠷ۙؾʹͯ͠Δ͜ͱ
ʮ4MBDL͕͚ͦͬͳ͍ʯ ͬͯݴΘΕͨ
+BWB4DSJQUͷܦݧ
ϑϧελοΫ ͱ ݴ͍͍͙ͬͯΒ͍ͷ͜ͱ Ͱ͖Δ͔ ɹ+2VFSZͱ͔ɺ3FBDUͱ͔Λ ɹͪΐ͍ͪΐ͍͏
࠷ۙ ݄ि͝Ζ ͔Β /PEFΛۀͰ͏Α͏ʹ ͬͯΔ͜ͱɿ ɹϒϩοΫνΣʔϯͷղੳ ɹτʔΫϯɾτϥϯβΫγϣϯൃߦ
ॴଐɿςοΫϏϡʔϩגࣜձࣾ
ɾ;BJG ɹ҉߸௨՟औҾॴ ɾNJKJO ɹϓϥΠϕʔτϒϩοΫνΣʔϯ ɾ$0.4" ɹ*$0ϓϥοτϑΥʔϜ
None
5SBEJOH7JFXͱʁ
None
ɹɹνϟʔτϥΠϒϥϦ ɾΠϯσΟέʔλ ɾ4/4࿈ܞ ɾΞΠσΞڞ༗ ɹͳͲͳͲɺͱΓ͋͑ͣଟػೳ
ຊޠͰղઆ͞Εͨࢿྉ͕ ΄΅ແ͍
ຊͷ࣋ͪؼΕΔใ ɾ5SBEJOH7JFXಋೖํ๏ ɾ1ZUIPOJTUB͔ΒΈͨ ɹ+BWB4DSJQUʹࢥ͏ͱ͜Ζ
5SBEJOH7JFXಋೖํ๏
̍ϥΠϒϥϦͷஔ ̎σʔλϑΟʔυ࡞ ̏νϟʔτىಈ
̍ϥΠϒϥϦͷஔ ̎σʔλϑΟʔυ࡞ ̏νϟʔτىಈ
None
None
HJUDMPOFIUUQTHJUIVCDPNUSBEJOHWJFXDIBSUJOH@MJCSBSZHJU DEDIBSUJOH@MJCSBSZ DQSGDIBSUJOH@MJCSBSZdQSPKFDUIUNM
̍ϥΠϒϥϦͷஔ ̎σʔλϑΟʔυ࡞ ̏νϟʔτىಈ
σʔλϑΟʔυͱʁ
5SBEJOH7JFXˡˠαʔό σʔλͷΓऔΓΛ͢ΔΫϥε
ಠࣗσʔλΛද͍ࣔͨ͠߹ ಠ࣮ࣗ͢Δඞཁ͋Γ
໊ؔ ࣮ߦλΠϛϯά ֓ཁ PO3FBEZ ىಈ࣌ શମઃఆσʔλऔಘ HFU4FSWFS5JNF PO3FBEZ࣮ߦޙ αʔό࣌ࠁऔಘ TFBSDI4ZNCPMT#Z/BNF
γϯϘϧมߋ࣌ γϯϘϧݕࡧ݁Ռσʔλऔಘ SFTPMWF4ZNCPM γϯϘϧܾఆ࣌ γϯϘϧৄࡉσʔλऔಘ DBMDVMBUF)JTUPSZ%FQUI HFU#BST࣮ߦલ σʔλಡΈࠐΈظؒઃఆ HFU#BST σʔλදࣔ࣌ PIMDσʔλσʔλऔಘ TVCTDSJCF#BST ॳճHFU#BST࣮ߦޙ ϦΞϧλΠϜσʔλऔಘ VOTVCTDSJCF#BST γϯϘϧมߋલ ϦΞϧλΠϜσʔλऔಘղআ HFU.BSLT HFU#BST࣮ߦޙ νϟʔτϚʔΫઃఆ HFU5JNFTDBMF.BSLT HFU#BST࣮ߦޙ νϟʔτԼ෦ϚʔΫઃఆ σʔλϑΟʔυඞਢϝιουҰཡ
ίϯετϥΫλ ˣ PO3FBEZ ˣ HFU4FSWFS5JNF ˣ SFTPMWF4ZNCPM ˣ DBMDVMBUF)JTUPSZ%FQUI ˣ
HFU#BST ˣ TVCTDSJCF#BST ˣ HFU.BSLT ˣ HFU5JNFTDBMF.BSLT ྫॳظදࣔ
TFBSDI4ZNCPMT#Z/BNF ˣ SFTPMWF4ZNCPM ˣ VOTVCTDSJCF#BST ˣ DBMDVMBUF)JTUPSZ%FQUI ˣ HFU#BST ˣ
TVCTDSJCF#BST ˣ HFU.BSLT ˣ HFU5JNFTDBMF.BSLT ྫγϯϘϧΓସ͑
αʔόଆ࣮͕ඞཁ ࠓճলུ جຊ KTPOΛฦ٫͢Δ8FC"1* ͖ͳݴޠͰͲ͏ͧ
ࠓճ&4Ͱઆ໌ &4Ͱେৎ
ίϯετϥΫλྫ ZaifChart = function() { this._datafeedURL = location.protocol + '//'
+ location.hostname + '/zaif_chart_api/v1/'; this._configuration = {}; this._callbacks = {}; this._initialize = function(){ var that = this; this._send(this._datafeedURL + 'config', {}) .done(function(response) { $.each( JSON.parse(response), function( key, value ) { that._configuration[key] = value; }); that._fireEvent('configuration_ready'); }) .fail(function(reason) { that.logMessage(reason); throw new Error(reason) }); }; this._initialize(); };
αʔό͔ΒશମઃఆΛऔಘ ɹɾશମઃఆKTʹॻ͖ͰՄೳ ɹɹɾͦͷ߹࣮ෆཁ
\ TVQQPSUFE@SFTPMVUJPOT< % % % 8 >
TZNCPMT@UZQFT< \ OBNFશ௨՟ WBMVF ^ \ OBNFओཁ௨՟ WBMVFlNBJO@DVSSFODJFT ^ \ OBNFτʔΫϯ WBMVFUPLFOT ^ > ^ ؆୯ͳશମઃఆͷྫ
IUUQTEFNP@GFFEUSBEJOHWJFXDPNDPOpH ؾʹͳΔํԼه"1*Λୟ͍ͯΈ͍ͯͩ͘͞
σʔλϑΟʔυ෦ؔͦͷ̍ɿϦΫΤετૹ৴ this._send = function(url, params) { var request = url;
if (params) { for (var i = 0; i < Object.keys(params).length; ++i) { var key = Object.keys(params)[i]; var value = encodeURIComponent(params[key]); request += (i === 0 ? '?' : '&') + key + '=' + value; } } this.logMessage('request url:' + request); return $.ajax({ type: 'GET', url: request, contentType: 'text/plain' }); };
σʔλϑΟʔυ෦ؔͦͷ̎ɿΠϕϯτൃՐ this._fireEvent = function(event, argument) { if (this._callbacks.hasOwnProperty(event)) { var
callbacksChain = this._callbacks[event]; for (var i = 0; i < callbacksChain.length; ++i) { callbacksChain[i](argument); } this._callbacks[event] = []; } };
σʔλϑΟʔυ෦ؔͦͷ̏ɿΠϕϯτػ this._on = function(event, callback){ if (!this._callbacks.hasOwnProperty(event)) { this._callbacks[event] =
[]; } this._callbacks[event].push(callback); return this; };
PO3FBEZྫ ZaifChart.prototype.onReady = function(callback) { var that = this; if
(this._configuration) { setTimeout(function() { callback(that._configuration); }, 0); } else { this._on('configuration_ready', function() { callback(that._configuration); }); } };
શମઃఆΛ5SBEJOH7JFXʹηοτ͍ͯ͠Δ ɹɾίϯετϥΫλͰશମઃఆΛαʔό͔Β ɹɹऔಘ͢Δ߹ɺػॲཧ͕ඞཁ ɹɾKTॻͷ߹TFU5JNFPVUͰғ·ͳ͍ͱ ɹɹ5SBEJOH7JFX͕ܯࠂΛग़͢ͷͰҙ
HFU4FSWFS5JNFྫ ZaifChart.prototype.getServerTime = function(callback) { this._send(this._datafeedURL + 'time', {}) .done(function(response)
{ callback(+response); }) .fail(function() { }); };
αʔό࣌ࠁΛ5SBEJOH7JFXʹઃఆ͍ͯ͠Δ ɹɾKTPOͰͳ͘Λͦͷ··͢
TFSDI4ZNCPM#Z/BNFྫ ZaifChart.prototype.searchSymbolsByName = function(userInput, exchange, symbolType, onResultReadyCallback) { this._send(this._datafeedURL
+ 'search', { user_input: userInput, symbol_type: symbolType }) .done(function(response) { var data = JSON.parse(response); onResultReadyCallback(data); }) .fail(function(reason) { this.logMessage('searchSymbolsByName error:’ + reason); onResultReadyCallback([]); }); };
ೖྗʹ֘͢Δ؆қγϯϘϧใϦετΛऔಘ ɹɾҾ ɹɹɹVTFS*OQVUɿೖྗγϯϘϧ໊ ɹɹɹFYDIBOHFɿೖྗऔҾॴ໊ ɹɹɹTZNCPM5ZQFɿೖྗγϯϘϧλΠϓ ɹɹɹPO3FTVMU3FBEZ$BMMCBDLɿઃఆ ɹɾΤϥʔͷۭ࣌ྻΛ͢
< \ UZQFNBJO@DVSSFODJFT TZNCPM#5$@+1: UJDLFSCUD@KQZ
EFTDSJQUJPOϏοτίΠϯຊԁऔҾ GVMM@OBNF#5$@+1: ^ \ UZQFUPLFO TZNCPM1&1&$"4)@+1: UJDLFSQFQFDBTI@KQZ EFTDSJQUJPO1&1&$"4)ຊԁऔҾ GVMM@OBNF1&1&$"4)@+1: ^ ɾɾɾɾɾɾɾ > ؆қγϯϘϧใϦετͷྫ
SFTPMWF4ZNCPMྫ ZaifChart.prototype.resolveSymbol = function(symbolName, onCallback, onErrorCallback) { this._send(this._datafeedURL +
'symbols', {symbol: symbolName}) .done(function(response) { var data = JSON.parse(response); onCallback(data); }) .fail(function(reason) { this.logMessage('resolveSymbol error:’ + reason); onErrorCallback('unknown_symbol'); }); };
Ҿʹ֘͢ΔৄࡉͳγϯϘϧใΛऔಘ ɹɾҾ ɹɹɹTZNCPM/BNFɿγϯϘϧ໊ ɹɹɹPO$BMMCBDLɿઃఆ ɹɹɹPO&SSPS$BMMCBDLɿΤϥʔϝοηʔδ ɹɾγϯϘϧ໊γεςϜશମͰ ɹɹҰҙͷͷʹ͓ͯ͘͜͠ͱ
\ UJNF[POF"TJB5PLZP TFTTJPO lOBNFCUD@KQZ UJDLFSCUD@KQZ UZQFNBJO@DVSSFODJFT
TVQQPSUFE@SFTPMVUJPOT< % 8 .> ^ ৄࡉ↓ https://github.com/tradingview/charting_library/wiki/Symbology#symbolinfo-structure ৄࡉγϯϘϧใͷྫ
HFU#BSTྫ ZaifChart.prototype.getBars = function(symbolInfo, resolution, from, to, onCallback, onErrorCallback)
{ var that = this; this._send(this._datafeedURL + 'history', { symbol: symbolInfo.name, resolution: resolution, from: from, to: to }) .done(function(response) { var data = JSON.parse(response); var noData = data.ohlc_data.length === 0; var bars = []; var barsCount = noData ? 0 : data.ohlc_data.length; for (var i = 0; i < barsCount; ++i) { var barValue = { time: data.ohlc_data[i].time, close: data.ohlc_data[i].close, open: data.ohlc_data[i].open, high: data.ohlc_data[i].high, low: data.ohlc_data[i].low, volume: data.ohlc_data[i].volume }; bars.push(barValue); } onCallback(bars, { noData: noData}); }) .fail(function(reason) { that.logMessage('getBars error:'+ reason); onErrorCallback(‘network error'); }); };
දࣔ͢Δ0)-$σʔλΛऔಘ ɹɾҾ ɹɹɹTZNCPM*OGPɿγϯϘϧใ ɹɹɹSFTPMVUJPOɿִؒ ͱ͔%ͱ͔ GSPNɿσʔλ։࢝࣌ࠁ VOJYUJNF UPɿσʔλओྗ࣌ࠁ
VOJYUJNF ɹɹɹPO$BMMCBDLɿઃఆ ɹɹɹPO&SSPS$BMMCBDLɿΤϥʔϝοηʔδ ɹɾҾඵ୯Ґ͕ͩɺPO$BMMCBDLʹ ɹɹϛϦඵ୯ҐͰUJNFΛઃఆ͢Δඞཁ͋Γ
\ PIMD@EBUB< \ IJHI
MPX UJNF DMPTF PQFO ^ \ IJHI MPX UJNF DMPTF PQFO ^ > ^
TVCTDSJCF#BSTྫ //ίϯετϥΫλͰνϟʔτσʔλΛߋ৽͢ΔΫϥεΛࠐΜͰ͓͘ ZaifChart = function() { ɾɾɾɾɾɾ this._barsPulseUpdater = new
ZaifChartDataPulseUpdater(this, 1000); ɹɹɾɾɾɾɾɾ }; ZaifChart.prototype.subscribeBars = function(symbolInfo, resolution, onRealtimeCallback, listenerGUID, onResetCallback) { this._barsPulseUpdater.subscribeDataListener(symbolInfo, resolution, onRealtimeCallback, listenerGUID, onResetCallback); };
ZaifChartDataPulseUpdater = function(datafeed, interval) { this._datafeed = datafeed; this._subscribers =
{}; this._requestsPending = false; setInterval(_update, interval); }; ZaifChartDataPulseUpdater.prototype.subscribeDataListener = function(symbolInfo, resolution, newDataCallback, listenerGUID) { this._datafeed.logMessage('Subscribing ' + listenerGUID); if (!this._subscribers.hasOwnProperty(listenerGUID)) { this._subscribers[listenerGUID] = { symbolInfo: symbolInfo, resolution: resolution, lastBarTime: NaN, listeners: [] }; } this._subscribers[listenerGUID].listeners.push(newDataCallback); };
ZaifChartDataPulseUpdater = function(datafeed, interval) { var that = this; var
_update = function() { for (var listenerGUID in that._subscribers) { var subscriptionRecord = that._subscribers[listenerGUID]; var resolution = subscriptionRecord.resolution; (function(_subscript) { that._datafeed.getBars(_subscript.symbolInfo, resolution, null, null, function(bars, updateBarsFlg) { that._requestsPending = false; var lastBar = bars[bars.length - 1]; var subscribers = _subscript.listeners; var isNewBar = lastBar.time > _subscript.lastBarTime; if (isNewBar) { var previousBar = bars[bars.length - 2]; for (var i = 0; i < subscribers.length; ++i) { subscribers[i](previousBar); } } _subscript.lastBarTime = lastBar.time; for (var i = 0; i < subscribers.length; ++i) { subscribers[i](lastBar); } }, function() { }, null); })(subscriptionRecord); } }; };
ϦΞϧλΠϜσʔλΛऔಘ ɹɾҾ ɹɹɹTZNCPM*OGPɿγϯϘϧใ ɹɹɹSFTPMVUJPOɿִؒ ͱ͔%ͱ͔ PO3FBMUJNF$BMMCBDL৽نσʔληοτ MJTUFOFS(6*%Ұҙͷจࣈྻ ɹɹɹPO3FTFU$BMMCBDLɿσʔλมߋ࣌ؔ ɹɾHFU#BSTؔΛఆظతʹ
ɹɹ࣮ߦ͢ΔΈΛ࡞͢Δ
VOTVCTDSJCF#BSTྫ ZaifChart.prototype.subscribeBars = function(listenerGUID) { this._barsPulseUpdater.unsubscribeDataListener(listenerGUID); };
ZaifChartDataPulseUpdater.prototype.subscribeDataListener = function(listenerGUID) { delete this._subscribers[listenerGUID]; };
ϦΞϧλΠϜσʔλऔಘॲཧΛఀࢭ ɹɾҾ MJTUFOFS(6*%Ұҙͷจࣈྻ
ͦͷଞ //औಘ͢ΔOHLCσʔλͷൣғΛมߋ͢Δ ZaifChart.prototype.calculateHistoryDepth = function(resolution, resolutionBack, intervalBack) { }; //νϟʔτϚʔΫදࣔ
ZaifChart.prototype.getMarks = function(symbolInfo, startDate, endDate, onDataCallback, resolution) { onDataCallback([]); }; //νϟʔτԼ෦ϚʔΫදࣔ ZaifChart.prototype.getTimescaleMarks = function(symbolInfo, startDate, endDate, onDataCallback, resolution) { onDataCallback([]); }; ৄࡉ↓ https://github.com/tradingview/charting_library/wiki/JS-Api#getmarkssymbolinfo-startdate-enddate- ondatacallback-resolution-optional
̍ϥΠϒϥϦͷஔ ̎σʔλϑΟʔυ࡞ ̏νϟʔτىಈ
<script type="text/javascript" src=“/js/charting_library/charting_library.min.js"> </script> ϥΠϒϥϦΛಡΈࠐΉ
<div id="trading-view-area"></div> νϟʔτΤϦΞΛઃఆ
(function() { TradingView.onready(function () { //४උ͕Ͱ͖͔ͯΒ࣮ߦ͞ΕΔ new TradingView.widget({ //֤ΦϓγϣϯΛઃఆ fullscreen:
true, symbol: ‘btc_jpy’, interval: 'D', container_id: 'trading-view-area', datafeed: new ZaifChart(), library_path: '/js/charting_library/', locale: 'ja', disabled_features: ["use_localstorage_for_settings"], enabled_features: ["study_templates"], charts_storage_url: 'http://saveload.tradingview.com', charts_storage_api_version: "1.1", client_id: 'tradingview.com', user_id: 'public_user_id' }); }); })(); ৄࡉԼه↓ https://github.com/tradingview/charting_library/wiki/Widget-Constructor ؔΛ࣮ߦ
fullscreen:booleanɺtrueͷ߹શը໘දࣔ interval:νϟʔτͷִؒΛࢦఆɺҰͷ߹D locale:jaenͳͲදࣔ͢ΔݴޠใΛઃఆ datafeed:σʔλϑΟʔυΫϥεΠϯελϯε locale:ݴޠઃఆ symbol:දࣔͤ͞Δ௨՟ϖΞ Φϓγϣϯྫ
͓ΊͰͱ͏͍͟͝·͢
ଞʹ ɾ"1*Λͬͯ֎෦͔ΒػೳΛݺͼग़͢ ɾΧελϜͯ͠ಠࣗΠϯσΟέʔλΛදࣔ ͳΜͯ͜ͱ͕Ͱ͖Δ ࠓ࣌ؒͷ߹Ͱলུɻɻ
ࠓͷ༰Լهʹهࡌ 2JJUB5SBEJOH7JFX֮ॻ IUUQTRJJUBDPN"LJSB5BOJHVDIJJUFNT BDEGGBECCCEGFE ʮRJJUB5SBEJOH7JFXʯͰάά͍ͬͯͩ͘͞
࠷ޙʹ 1ZUIPOJTUB͔Βݟͨ +BWB4DSJQU ͱ͍͏͔/PEF ͷࢥ͏ͱ͜Ζ
(PPE ҉߸௨՟ܥͷϥΠϒϥϦ͕ଟ͍ OFNTEL XFC
1SPCMFN ॻ͍ͨͱ͓Γʹಈ͍ͯ͘Εͳ͍ UIFO 1SPNJTFͷཧղ͕ඞਢ BXBJU BTZODόϯβΠ ׳ΕΕͳ͍
(PPE OQNͷήʔδ͕͔͍͍ͬ͜
ऴΘΓ