JavaScript | ひま缶

好きな文字をGoogle chromeブラウザのコンソールに表示させる方法

2017年2月18日2017年2月17日ひまぬし

facebookとかのサイトでブラウザ上のコンソール開いたことありますか？ STOP! って書かれているあれです。今回はあれの出す方法のメモ。やり方は簡単！以下を実行。 [crayon-60deef9573f5e51 […]

Google OAuth 認証を簡単にしてトークンを取得するツールを作ったのソースコード

2017年2月1日2017年1月30日ひまぬし

今回は「Google OAuth 認証を簡単に実行してトークンを取得するツールを作った」の内容です。では以下ソースコードです。

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<div id="oauth">
<h2>OAuth認証</h2>
クライアントID<br>
<textarea id="o_client_id" rows="1" cols="80"></textarea><br>
リダイレクトURL<br>
<textarea id="o_redirect_uri" rows="1" cols="80"></textarea><br>
スコープ<br>
<textarea id="o_scope" rows="3" cols="80"></textarea><br>
スコープ一覧は<a href="https://developers.google.com/identity/protocols/googlescopes">こちら</a>
<br>
<button id="oauth_btn">OAuth認証</button>
</div>
<div id="token">
<h2>TokenとRefresh Tokenを取得</h2>
コード<br>
<textarea id="t_code" rows="1" cols="80"></textarea><br>
クライアントID<br>
<textarea id="t_client_id" rows="1" cols="80"></textarea><br>
クライアントシークレット<br>
<textarea id="t_client_secret" rows="1" cols="80"></textarea><br>
リダイレクトURL<br>
<textarea id="t_redirect_uri" rows="1" cols="80"></textarea><br>
<br>
<button id="token_btn">Token取得</button>
<button id="token_btn">Token取得</button><br>
結果<br>
トークン:access_token<br>
<textarea id="t_result_token" rows="2" cols="80"></textarea><br>
リフレッシュトークン:refresh_token<br>
<textarea id="t_result_refresh" rows="1" cols="80"></textarea><br>
有効期限:expires_in<br>
<textarea id="t_result_expires" rows="1" cols="80"></textarea><br>
</div>
<script>
var googleOAuth = {};
( function(){
"use strict";
var oauthUrl = 'https://accounts.google.com/o/oauth2/auth?response_type=code&client_id=',
redirectUrl = '&redirect_uri=',
scopeUrl = '&scope=',
offlineUrl = '&access_type=offline&approval_prompt=force';
googleOAuth.init = function() {
if ( !_params()[ 'code' ] ) {
$( '#token' ).hide();
_textSet();
} else {
$( '#oauth' ).hide();
$( '#t_code' ).val( _params()[ 'code' ] );
_textSet();
}
};
function _textSet() {
$( '#o_client_id' ).val( $.cookie( 'o_client_id' ) );
$( '#o_redirect_uri' ).val( $.cookie( 'o_redirect_uri' ) );
$( '#o_scope' ).val( $.cookie( 'o_scope' ) );
$( '#t_client_id' ).val( $.cookie( 'o_client_id' ) );
$( '#t_client_secret' ).val( $.cookie( 't_client_secret' ) );
$( '#t_redirect_uri' ).val( $.cookie( 'o_redirect_uri' ) );
}
function _params() {
var vars = new Object,
params,
temp_params = window.location.search.substring( 1 ).split( '&' );
for( var i = 0; i < temp_params.length; i++ ) {
params = temp_params[ i ].split( '=' );
vars[ params[ 0 ] ] = params[ 1 ];
}
return vars;
}
function _createOAuthUrl() {
return oauthUrl + $( '#o_client_id' ).val() +
redirectUrl + $( '#o_redirect_uri' ).val() +
scopeUrl + $( '#o_scope' ).val() + offlineUrl;
}
$( "#oauth_btn" ).click( function( e ) {
window.location.href = _createOAuthUrl();
})
$( "#token_btn" ).click( function( e ) {
var postData = { 'code'          : _params()[ 'code' ],
'client_id'     : $( '#t_client_id' ).val(),
'client_secret' : $( '#t_client_secret' ).val(),
'redirect_uri'  : $( '#t_redirect_uri' ).val(),
'grant_type'    : 'authorization_code',
'access_type'   : 'offline' };
$.post(
"https://www.googleapis.com/oauth2/v4/token",
postData,
function( data ){
$( '#t_result_token' ).val( data.access_token );
$( '#t_result_refresh' ).val( data.refresh_token );
$( '#t_result_expires' ).val( data.expires_in );
}
).fail( function( data ) {
$( '#t_result_token' ).val( data.responseJSON.error_description );
$( '#t_result_refresh' ).val( '' );
$( '#t_result_expires' ).val( '' );
});
})
$( '#o_client_id' ).change( function() { $.cookie( 'o_client_id', $( '#o_client_id' ).val() ); });
$( '#o_redirect_uri' ).change( function() { $.cookie( 'o_redirect_uri', $( '#o_redirect_uri' ).val() ); });
$( '#o_scope' ).change( function() { $.cookie( 'o_scope', $( '#o_scope' ).val() ); });
$( '#t_client_id' ).change( function() { $.cookie( 'o_client_id', $( '#o_client_id' ).val() ); });
$( '#t_client_secret' ).change( function() { $.cookie( 't_client_secret', $( '#t_client_secret' ).val() ); });
$( '#t_redirect_uri' ).change( function() { $.cookie( 'o_redirect_uri', $( '#o_redirect_uri' ).val() ); });
})();
googleOAuth.init();
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

<h2>OAuth認証</h2>

クライアントID<br>

リダイレクトURL<br>

スコープ<br>

スコープ一覧は<a href="https://developers.google.com/identity/protocols/googlescopes">こちら</a>

<br>

<button id="oauth_btn">OAuth認証</button>

</div>

<h2>TokenとRefresh Tokenを取得</h2>

コード<br>

クライアントID<br>

クライアントシークレット<br>

リダイレクトURL<br>

<br>

<button id="token_btn">Token取得</button>

<button id="token_btn">Token取得</button><br>

結果<br>

トークン:access_token<br>

リフレッシュトークン:refresh_token<br>

有効期限:expires_in<br>

</div>

var googleOAuth = {};

( function(){

"use strict";

var oauthUrl = 'https://accounts.google.com/o/oauth2/auth?response_type=code&client_id=',

redirectUrl = '&redirect_uri=',

scopeUrl = '&scope=',

offlineUrl = '&access_type=offline&approval_prompt=force';

googleOAuth.init = function() {

if ( !_params()[ 'code' ] ) {

$( '#token' ).hide();

_textSet();

} else {

$( '#oauth' ).hide();

$( '#t_code' ).val( _params()[ 'code' ] );

_textSet();

}

};

function _textSet() {

$( '#o_client_id' ).val( $.cookie( 'o_client_id' ) );

$( '#o_redirect_uri' ).val( $.cookie( 'o_redirect_uri' ) );

$( '#o_scope' ).val( $.cookie( 'o_scope' ) );

$( '#t_client_id' ).val( $.cookie( 'o_client_id' ) );

$( '#t_client_secret' ).val( $.cookie( 't_client_secret' ) );

$( '#t_redirect_uri' ).val( $.cookie( 'o_redirect_uri' ) );

}

function _params() {

var vars = new Object,

params,

temp_params = window.location.search.substring( 1 ).split( '&' );

for( var i = 0; i < temp_params.length; i++ ) {

params = temp_params[ i ].split( '=' );

vars[ params[ 0 ] ] = params[ 1 ];

}

return vars;

}

function _createOAuthUrl() {

return oauthUrl + $( '#o_client_id' ).val() +

redirectUrl + $( '#o_redirect_uri' ).val() +

scopeUrl + $( '#o_scope' ).val() + offlineUrl;

}

$( "#oauth_btn" ).click( function( e ) {

window.location.href = _createOAuthUrl();

})

$( "#token_btn" ).click( function( e ) {

var postData = { 'code' : _params()[ 'code' ],

'client_id' : $( '#t_client_id' ).val(),

'client_secret' : $( '#t_client_secret' ).val(),

'redirect_uri' : $( '#t_redirect_uri' ).val(),

'grant_type' : 'authorization_code',

'access_type' : 'offline' };

$.post(

"https://www.googleapis.com/oauth2/v4/token",

postData,

function( data ){

$( '#t_result_token' ).val( data.access_token );

$( '#t_result_refresh' ).val( data.refresh_token );

$( '#t_result_expires' ).val( data.expires_in );

}

).fail( function( data ) {

$( '#t_result_token' ).val( data.responseJSON.error_description );

$( '#t_result_refresh' ).val( '' );

$( '#t_result_expires' ).val( '' );

});

})

$( '#o_client_id' ).change( function() { $.cookie( 'o_client_id', $( '#o_client_id' ).val() ); });

$( '#o_redirect_uri' ).change( function() { $.cookie( 'o_redirect_uri', $( '#o_redirect_uri' ).val() ); });

$( '#o_scope' ).change( function() { $.cookie( 'o_scope', $( '#o_scope' ).val() ); });

$( '#t_client_id' ).change( function() { $.cookie( 'o_client_id', $( '#o_client_id' ).val() ); });

$( '#t_client_secret' ).change( function() { $.cookie( 't_client_secret', $( '#t_client_secret' ).val() ); });

$( '#t_redirect_uri' ).change( function() { $.cookie( 'o_redirect_uri', $( '#o_redirect_uri' ).val() ); });

})();

googleOAuth.init();

</script>

これもtextにコピーす […]

Handsontableの入力時のバグ

2016年11月14日2016年11月13日ひまぬし

Markdown Table Editorで使用しているライブラリの「Handsontable」での入力時のバグについて。このライブラリはグリッドに値を入力するときに想定外の動きをします。。 Handsontable […]

LGTM画像を検索してコピペできるツールを作ったのソースコード3

2016年11月7日2016年11月6日ひまぬし

多分LGTM画像表示では最後の機能追加なお実際に使用出来るのはここだではソースコードの公開です。ソースコード

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.3/clipboard.min.js"></script>
<!--トレンド表示-->
トレンド検索：<input id="trending" type="checkbox">
<!--この辺で操作するタグ-->
<textarea id="word">cat</textarea>
<textarea id="limit">10</textarea>
<button id="btn">検索</button>
<!--このdivに表示される-->
<div id="lgtm_images"></div>
<button id="more_btn">もっと表示する</button>
<script type="text/javascript">
var lgiftm = {};
( function(){
"use strict";
var giphyRoot = "https://api.giphy.com/v1/gifs/",
apiKey = "dc6zaTOxFJmzC",
apiUrl = "&api_key=",
searchUrl = "search?q=",
trendUrl = "trending?",
limitUrl = "&limit=",
offsetUrl = "&offset=",
imgTag1 = '<img class="copy" data-clipboard-text="![LGTM](',
imgTag2 = ')" id="lgtm',
imgTag3 = '" src="',
imgTag4 = '">',
clipboardClass = ".copy",
lgtmId = "#lgtm_images",
offsetValue = 0;
lgiftm.setMoreGiphySearchImage = function(){
this.setGiphySearchImage( $( "#word" ).val(),
$( "#limit" ).val() +
offsetUrl + offsetValue)
};
lgiftm.setGiphySearchImage = function( word, conditions ){
var url = "";
if ( $( "#trending" ).prop( "checked" ) ) {
url = giphyRoot + trendUrl + apiUrl +
apiKey + limitUrl + conditions;
} else {
url = giphyRoot + searchUrl + word + apiUrl +
apiKey + limitUrl + conditions;
}
$.getJSON(
url,
function(data) {
var i = 0;
$.each(data.data, function( key, val ) {
$( lgtmId ).append(
imgTag1 + val.images.original.url +
imgTag2 + i + imgTag3 +
val.images.fixed_width_small.url + imgTag4
);
i++;
});
// クリックしただけでクリップボードに貼り付けちゃう便利ライブラリ
new Clipboard( clipboardClass );
}
);
offsetValue += parseInt( $( "#limit" ).val() );
};
lgiftm.clear = function(){
$( "div" + lgtmId ).empty();
offsetValue = 0;
}
})();
( function(){
"use strict";
// 初期表示用
lgiftm.setGiphySearchImage( "cat", 10 );
$( "#btn" ).click( function( e ) {
// 表示初期化してから検索画像を表示しまっせ
lgiftm.clear();
lgiftm.setGiphySearchImage( $( "#word" ).val(), $( "#limit" ).val() );
});
$( "#more_btn" ).click( function( e ) {
// 検索画像をもっと表示しまっせ
lgiftm.setMoreGiphySearchImage();
});
})();
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

トレンド検索：<input id="trending" type="checkbox">

<button id="more_btn">もっと表示する</button>

var lgiftm = {};

( function(){

"use strict";

var giphyRoot = "https://api.giphy.com/v1/gifs/",

apiKey = "dc6zaTOxFJmzC",

apiUrl = "&api_key=",

searchUrl = "search?q=",

trendUrl = "trending?",

limitUrl = "&limit=",

offsetUrl = "&offset=",

imgTag1 = '<img class="copy" data-clipboard-text="![LGTM](',

imgTag2 = ')" id="lgtm',

imgTag3 = '" src="',

imgTag4 = '">',

clipboardClass = ".copy",

lgtmId = "#lgtm_images",

offsetValue = 0;

lgiftm.setMoreGiphySearchImage = function(){

this.setGiphySearchImage( $( "#word" ).val(),

$( "#limit" ).val() +

offsetUrl + offsetValue)

};

lgiftm.setGiphySearchImage = function( word, conditions ){

var url = "";

if ( $( "#trending" ).prop( "checked" ) ) {

url = giphyRoot + trendUrl + apiUrl +

apiKey + limitUrl + conditions;

} else {

url = giphyRoot + searchUrl + word + apiUrl +

apiKey + limitUrl + conditions;

}

$.getJSON(

url,

function(data) {

var i = 0;

$.each(data.data, function( key, val ) {

$( lgtmId ).append(

imgTag1 + val.images.original.url +

imgTag2 + i + imgTag3 +

val.images.fixed_width_small.url + imgTag4

);

i++;

});

// クリックしただけでクリップボードに貼り付けちゃう便利ライブラリ

new Clipboard( clipboardClass );

}

);

offsetValue += parseInt( $( "#limit" ).val() );

};

lgiftm.clear = function(){

$( "div" + lgtmId ).empty();

offsetValue = 0;

}

})();

( function(){

"use strict";

// 初期表示用

lgiftm.setGiphySearchImage( "cat", 10 );

$( "#btn" ).click( function( e ) {

// 表示初期化してから検索画像を表示しまっせ

lgiftm.clear();

lgiftm.setGiphySearchImage( $( "#word" ).val(), $( "#limit" ).val() );

});

$( "#more_btn" ).click( function( e ) {

// 検索画像をもっと表示しまっせ

lgiftm.setMoreGiphySearchImage();

});

})();

</script>

解説今回の機能はランダムはめんどくさ […]

Markdown Table Editorのソースコード2

2016年10月28日2016年10月27日ひまぬし

はい今回はMarkdown Table Editorにテキストエリア追加したのでそのソースコードの公開ですう。 Markdown Table Editorはこちら Markdown Table Editor [cray […]

Markdown Table Editorのソースコード

2016年10月25日2016年10月24日ひまぬし

前に公開したMarkdown Table Editorのソースコードを解説する回まだまだ実用的ではないけど今後実装したい内容はこちら Markdown方式のテーブルをテキストにコピペしたらグリッドに反映される Mark […]

LGTM画像を検索してコピペできるツールを作ったのソースコード2

2016年10月20日2016年10月20日ひまぬし

暇だったので前回から「もっと検索するボタン」を追加した。これでさらにたくさんLGTMできる。なお実際に使用出来るのはここだソースコード

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.3/clipboard.min.js"></script>
<!--この辺で操作するタグ-->
<textarea id="word">cat</textarea>
<textarea id="limit">10</textarea>
<button id="btn">検索</button>
<!--このdivに表示される-->
<div id="lgtm_images"></div>
<button id="more_btn">もっと表示する</button>
<script type="text/javascript">
var lgiftm = {};
( function(){
"use strict";
var giphyRoot = "https://api.giphy.com/v1/gifs/",
apiKey = "dc6zaTOxFJmzC",
apiUrl = "&api_key=",
searchUrl = "search?q=",
limitUrl = "&limit=",
offsetUrl = "&offset=",
imgTag1 = '<img class="copy" data-clipboard-text="![LGTM](',
imgTag2 = ')" id="lgtm',
imgTag3 = '" src="',
imgTag4 = '">',
clipboardClass = ".copy",
lgtmId = "#lgtm_images",
offsetValue = 0;
lgiftm.setMoreGiphySearchImage = function(){
this.setGiphySearchImage( $( "#word" ).val(),
$( "#limit" ).val() +
offsetUrl + offsetValue)
};
lgiftm.setGiphySearchImage = function( word, conditions ){
$.getJSON(
giphyRoot + searchUrl + word + apiUrl +
apiKey + limitUrl + conditions,
function(data) {
var i = 0;
$.each(data.data, function( key, val ) {
$( lgtmId ).append(
imgTag1 + val.images.original.url +
imgTag2 + i + imgTag3 +
val.images.fixed_width_small.url + imgTag4
);
i++;
});
// クリックしただけでクリップボードに貼り付けちゃう便利ライブラリ
new Clipboard( clipboardClass );
}
);
offsetValue += parseInt( $( "#limit" ).val() );
};
lgiftm.clear = function(){
$( "div" + lgtmId ).empty();
offsetValue = 0;
}
})();
( function(){
"use strict";
// 初期表示用
lgiftm.setGiphySearchImage( "cat", 10 );
$( "#btn" ).click( function( e ) {
// 表示初期化してから検索画像を表示しまっせ
lgiftm.clear();
lgiftm.setGiphySearchImage( $( "#word" ).val(), $( "#limit" ).val() );
});
$( "#more_btn" ).click( function( e ) {
// 検索画像をもっと表示しまっせ
lgiftm.setMoreGiphySearchImage();
});
})();
</script>

100

101

102

103

104

105

106

107

108

109

110

<button id="more_btn">もっと表示する</button>

var lgiftm = {};

( function(){

"use strict";

var giphyRoot = "https://api.giphy.com/v1/gifs/",

apiKey = "dc6zaTOxFJmzC",

apiUrl = "&api_key=",

searchUrl = "search?q=",

limitUrl = "&limit=",

offsetUrl = "&offset=",

imgTag1 = '<img class="copy" data-clipboard-text="![LGTM](',

imgTag2 = ')" id="lgtm',

imgTag3 = '" src="',

imgTag4 = '">',

clipboardClass = ".copy",

lgtmId = "#lgtm_images",

offsetValue = 0;

lgiftm.setMoreGiphySearchImage = function(){

this.setGiphySearchImage( $( "#word" ).val(),

$( "#limit" ).val() +

offsetUrl + offsetValue)

};

lgiftm.setGiphySearchImage = function( word, conditions ){

$.getJSON(

giphyRoot + searchUrl + word + apiUrl +

apiKey + limitUrl + conditions,

function(data) {

var i = 0;

$.each(data.data, function( key, val ) {

$( lgtmId ).append(

imgTag1 + val.images.original.url +

imgTag2 + i + imgTag3 +

val.images.fixed_width_small.url + imgTag4

);

i++;

});

// クリックしただけでクリップボードに貼り付けちゃう便利ライブラリ

new Clipboard( clipboardClass );

}

);

offsetValue += parseInt( $( "#limit" ).val() );

};

lgiftm.clear = function(){

$( "div" + lgtmId ).empty();

offsetValue = 0;

}

})();

( function(){

"use strict";

// 初期表示用

lgiftm.setGiphySearchImage( "cat", 10 );

$( "#btn" ).click( function( e ) {

// 表示初期化してから検索画像を表示しまっせ

lgiftm.clear();

lgiftm.setGiphySearchImage( $( "#word" ).val(), $( "#limit" ).val() );

});

$( "#more_btn" ).click( function( e ) {

// 検索画像をもっと表示しまっせ

lgiftm.setMoreGiphySearchImage();

});

})();

</script>

まぁもっと表 […]

LGTM画像を検索してコピペできるツールを作ったのソースコード

2016年10月19日2016年10月19日ひまぬし

Giphy APIから画像取ってくるサンプルコードはこれだなお実際に使用出来るのはここだサンプルコード

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.3/clipboard.min.js"></script>
<!--この辺で操作するタグ-->
<textarea id="word">cat</textarea>
<textarea id="limit">10</textarea>
<button id="btn">検索</button>
<!--このdivに表示される-->
<div id="lgtm_images"></div>
<script type="text/javascript">
var lgiftm = {};
( function(){
"use strict";
var giphyRoot = "https://api.giphy.com/v1/gifs/",
apiKey = "dc6zaTOxFJmzC",
apiUrl = "&api_key=",
searchUrl = "search?q=",
limitUrl = "&limit=",
imgTag1 = '<img class="copy" data-clipboard-text="![LGTM](',
imgTag2 = ')" id="lgtm',
imgTag3 = '" src="',
imgTag4 = '">',
clipboardClass = ".copy",
lgtmId = "#lgtm_images";
lgiftm.setGiphySearchImage = function( word, limit ){
$.getJSON(
giphyRoot + searchUrl + word + apiUrl + apiKey + limitUrl + limit,
function(data) {
var i = 0;
$.each(data.data, function( key, val ) {
$( lgtmId ).append(
imgTag1 + val.images.original.url +
imgTag2 + i + imgTag3 +
val.images.fixed_width_small.url + imgTag4
);
i++;
});
// クリックしただけでクリップボードに貼り付けちゃう便利ライブラリ
new Clipboard( clipboardClass );
}
);
};
lgiftm.clear = function(){
$( "div" + lgtmId ).empty();
}
})();
( function(){
"use strict";
// 初期表示用
lgiftm.setGiphySearchImage( "cat", 10 );
$( "#btn" ).click( function( e ) {
// 表示初期化してから検索画像を表示しまっせ
lgiftm.clear();
lgiftm.setGiphySearchImage( $( "#word" ).val(), $( "#limit" ).val() );
});
})();
</script>

var lgiftm = {};

( function(){

"use strict";

var giphyRoot = "https://api.giphy.com/v1/gifs/",

apiKey = "dc6zaTOxFJmzC",

apiUrl = "&api_key=",

searchUrl = "search?q=",

limitUrl = "&limit=",

imgTag1 = '<img class="copy" data-clipboard-text="![LGTM](',

imgTag2 = ')" id="lgtm',

imgTag3 = '" src="',

imgTag4 = '">',

clipboardClass = ".copy",

lgtmId = "#lgtm_images";

lgiftm.setGiphySearchImage = function( word, limit ){

$.getJSON(

giphyRoot + searchUrl + word + apiUrl + apiKey + limitUrl + limit,

function(data) {

var i = 0;

$.each(data.data, function( key, val ) {

$( lgtmId ).append(

imgTag1 + val.images.original.url +

imgTag2 + i + imgTag3 +

val.images.fixed_width_small.url + imgTag4

);

i++;

});

// クリックしただけでクリップボードに貼り付けちゃう便利ライブラリ

new Clipboard( clipboardClass );

}

);

};

lgiftm.clear = function(){

$( "div" + lgtmId ).empty();

}

})();

( function(){

"use strict";

// 初期表示用

lgiftm.setGiphySearchImage( "cat", 10 );

$( "#btn" ).click( function( e ) {

// 表示初期化してから検索画像を表示しまっせ

lgiftm.clear();

lgiftm.setGiphySearchImage( $( "#word" ).val(), $( "#limit" ).val() );

});

})();

</script>

すごく簡素にしてます。空のindex.htm […]

[Javascript]Chartist.jsでクロスブラウザ対応のグラフを書こうよ

2016年10月12日2016年10月11日ひまぬし

今回はJavascriptのライブラリ「Chartist.js」をやっていきます。折れ線グラフ、棒グラフ、円グラフができます。 CDNにJSがアップされている親切設計です。では早速グラフを表示するソースコードはこちら […]