quandlから日経225データを取得する

$ pip install quandl

ダブルインバース(1357)のデータを見てみる
>>> import quandl
>>> quandl.ApiConfig.api_key = ‘hogehoge’
>>> data = quandl.get(‘TSE/1357’)
>>> data
Open High Low Close Volume
Date
2014-07-16 5270.0 5280.0 5230.0 5260.0 43965.0
2014-07-17 5230.0 5270.0 5190.0 5260.0 52325.0
2014-07-18 5400.0 5440.0 5350.0 5350.0 125707.0
2014-07-22 5320.0 5320.0 5240.0 5270.0 71590.0
2014-07-23 5250.0 5290.0 5250.0 5290.0 19141.0
… … … … … …
2017-12-18 1285.0 1289.0 1267.0 1268.0 20980910.0
2017-12-19 1263.0 1274.0 1259.0 1272.0 8550773.0
2017-12-20 1277.0 1281.0 1266.0 1268.0 8632009.0
2017-12-21 1274.0 1290.0 1269.0 1274.0 10881922.0
2017-12-22 1275.0 1281.0 1268.0 1270.0 8738199.0

2017年末までのデータしか取得できない。

### 日経平均の取得
https://www.quandl.com/api/v3/datasets/CHRIS/CME_NK2/data.json?api_key=${api_key}

レスポンス結果
{“dataset_data”:{“limit”:null,”transform”:null,”column_index”:null,”column_names”:[“Date”,”Open”,”High”,”Low”,”Last”,”Change”,”Settle”,”Volume”,”Previous Day Open Interest”],”start_date”:”1990-09-26″,”end_date”:”2020-08-05″,”frequency”:”daily”,”data”:[[“2020-08-05”,22530.0,22555.0,22355.0,22395.0,-30.0,22390.0,22.0,6.0],[“2020-08-04”,null,22555.0,null,22435.0,135.0,22420.0,0.0,6.0],…// 省略

$ sudo apt-get install libpng-dev
$ sudo apt-get install libfreetype6-dev
$ sudo pip install matplotlib
$ sudo pip install ipython jupyter

$ python
Python 3.8.0 (default, Oct 28 2019, 16:14:01)
[GCC 8.3.0] on linux
Type “help”, “copyright”, “credits” or “license” for more information.
>>> import json
>>> json.dumps([‘foo’, {‘bar’: (‘baz’, None, 1.0, 2)}])
‘[“foo”, {“bar”: [“baz”, null, 1.0, 2]}]’

### quandlからデータ取得
app.py

# API
import requests
import json
import datetime as dt
# date
from dateutil.relativedelta import relativedelta
from pytz import timezone

# データ前処理、グラフ表示
import numpy as np
import pandas as pd
from IPython import get_ipython
ipy = get_ipython()
if ipy is not None:
    ipy.run_line_magic('matplotlib', 'inline')
import matplotlib.pyplot as plt

fig = plt.figure()

# エンドポイントを定義
url = 'https://www.quandl.com/api/v3/datasets/CHRIS/CME_NK2/data.json?api_key=hogehoge'

# json でデータ取得
catched_response = requests.get(url)
json_data = catched_response.json()


columns = json_data['dataset_data']['column_names']
values = json_data['dataset_data']['data']

df = pd.DataFrame(values, columns=columns)
df.loc[:,'Date'] = pd.to_datetime(df.loc[:,'Date'])
df.set_index('Date', inplace=True)

df.loc[:,'High'].interpolate(inplace=True)
df.loc[:,'Last'] = np.minimum(df.loc[:,'Last'].interpolate(),df.loc[:,'High'])

today = dt.datetime.now(timezone('Asia/Tokyo'))
t_year = today - relativedelta(years=1)
t_date = t_year.strftime('%Y-%m')

df_target = df.loc[:t_date,'Last'].sort_index()
df_target.plot()
df_target.rolling(window = 5).mean().plot()
df_target.rolling(window = 25).mean().plot()

fig.savefig("dist/img/225.png")

$ python app.py

トップページに嵌め込みます。

matplotlibのグラフはクーロンで日次でバッチ処理すれば良いですね。
景気動向指数の予定だったが、CIの各指標がAPIで公開されていないので、225のチャートで良しとするか。
致し方がない。

景気動向指数(CI)のAPI取得 その2

総務省統計局の景気動向指数統計データをJSON形式で取得をしたい。

※民間企業の勤務条件制度等調査を表示した例

– 統計表情報取得仕様
https://api.e-stat.go.jp/rest/3.0/app/json/getStatsList?<パラメータ群>

API仕様
appId, lang,surveyYears, openYears, statsField …

1. アプリケーションIDの発行
e-statマイページのAPI機能(アプリケーションID発行)から、appIdを発行する
*************

2. 景気動向指数のデータセット
景気動向指数
統計ID:00100406

-> Excelのみ、DB/APIは提供されていない
-> ExcelのファイルID(statInfId)の命名規則が分かればDL出来そうではある
-> 速報値は月次で5営業日に出している


-> RSSも見つけられない

### 日銀の機械学習による景気分析
「景気ウォッチャー調査」のテキストマイニング―
-> 少しだけ読んだが、テキストマイニングも先行指標の一部なので、テキストマイニングだけで景気動向指数として公表するのは抵抗がある。

別の方法を模索するか。

景気動向指数(CI)のAPI取得 その1

景気動向指数(composite indexes)をAPIで取得/自動更新したい

景気動向指数とは?
内閣府:景気統計
> 景気動向指数は、生産、雇用など様々な経済活動での重要かつ景気に敏感に反応する指標の動きを統合することによって、 景気の現状把握及び将来予測に資するために作成された指標

1.採用系列
(1)生産 (2)在庫 (3)投資 (4)雇用 (5)消費 (6)企業経営 (7)金融 (8)物価 (9)サービス

2.選定基準
(1)経済的重要性
(2)統計の継続性・信頼性
(3)景気循環の回数との対応度
(4)景気の山谷との時差の安定性
(5)データの平滑度
(6)統計の速報性

3.景気循環の考え方
先行(主に需給の変動)、一致(主に生産の調整)、遅行(主に生産能力の調整)

4.変動算出
対象変化率 = { (当月値 – 前月値) / ((当月値 – 前月値)/2) } x 100

5.採用系列
– 先行系列
最終需要財在庫率指数、鉱工業用生産財在庫率指数、新規求人数、実質機械受注、新設住宅着工床面積、消費者態度指数、日経商品指数、マネーストック(M2)(前年同月比)、東証株価指数、投資環境指数、中小企業売上げ見通しDI

– 一致系列
生産指数、鉱工業用生産財出荷指数、耐久消費財出荷指数、所定外労働時間指数、投資財出荷指数、商業販売額、商業販売額、営業利益

– 遅行系列
第3次産業活動指数、常用雇用指数、実質法人企業設備投資、家計消費支出、法人税収入、完全失業率、きまって支給する給与(製造業、名目)、消費者物価指数、最終需要財在庫指数

経済社会総合研究所の実績値数値はPDFで公開されているが、APIはないのかな。

色々見ていたところ、e-Stat開発者向けページがあるようです。
e-Stat API機能
なんか出来そうです。取り敢えず登録しました。

ChartJSでスマホ判定してyAxesの表示を変える方法

まずワイヤーを作成し、その後チュートリアルでチャートJSを埋め込んで、更にその後、ワイヤーに沿ってチャートを作成し、PC、SP版で表示を確認します。
最後に、SP版のyAxesの表示を調整します。

### ワイヤー
直近1年の受注件数を棒グラフか折れ線グラフで表現したい
ワイヤーはざっくり作っただけなので、作りながら調整する

### Chart.jsのCDN
公式サイトを覗きます: https://cdnjs.com/libraries/Chart.js
-> 2.9.3が最新で出てきます。圧縮版のmin.jsを使います。

### チュートリアル

<body>
	<h1>棒グラフ</h1>
	<canvas id="my_chart">Canvas is not supported...</canvas>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
	<script>
		(function(){
			'use strict';

			var type = 'line';
			var data = {
				labels: ['1月', '2月', '3月', '4月'],
				datasets: [{
					label: '売上高',
					data:[1200000, 1350000, 1140000, 1090000]
				}]
			};
			var options;
			var ctx = document.getElementById('my_chart').getContext('2d');

			var myChart = new Chart(ctx, {
				type: type,
				data: data,
				options: options
			});
		})();
	</script>
</body>

### 折れ線から棒グラフにカスタマイズ
– minを0からスタートにする
– optionを追加

<body>
	<h1>グラフ</h1>
	<canvas id="my_chart">Canvas is not supported...</canvas>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
	<script>
		(function(){
			'use strict';

			var type = 'bar';
			var data = {
				labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
				datasets: [{
					label: '売上高',
					data:[1200000, 1350000, 1140000, 1090000, 650000, 2300000, 990000, 950000, 1120000, 1340000, 750000, 1450000],
					backgroundColor: "rgba(63, 191, 191, 0.5)"
				}]
			};
			var options = {
				scales: {
					yAxes: [{
						ticks: {
							suggestedMin: 0,
							callback: function(value, index, values){
								return value + '円'
							}
						}
					}]
				}
			}
			var options;
			var ctx = document.getElementById('my_chart').getContext('2d');

			var myChart = new Chart(ctx, {
				type: type,
				data: data,
				options: options
			});
		})();
	</script>
</body>

これをトップページに入れ込む
PC

sp

### spの場合はyAxisを表示させたくない
UserAgentでiPhoneかAndroidを含む場合は、yAxesのdisplayをfalseにしたい

if(navigator.userAgent.match(/iPhone|Android.+Mobile/)){
				var display = false;
			} else {
				var display = true;
			}
			var type = 'bar';
			var data = {
				labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
				datasets: [{
					label: '売上高',
					data:[1200000, 1350000, 1140000, 1090000, 650000, 2300000, 990000, 950000, 1120000, 1340000, 750000, 1450000],
					backgroundColor: "rgba(63, 191, 191, 0.5)"
				}]
			};
			var options = {
				responsive: true,
				scales: {
					yAxes: [{
						ticks: {
							display: display,
							suggestedMin: 0,
							callback: function(value, index, values){
								return value + '円'
							}
						}
					}]
				}
			}

SP

やりたいことは出来た。

Bootstrap4のメニューでログアウトだけ右寄せ

右に寄せたいメニュー(ログアウト)は、ul navbar-nav mr-autoで作ったメニューからmr-autoを外して再度ul navbar-navを作る。
小技として、ログアウトはactiveを外して薄く表示させてみた。

<div class="collapse navbar-collapse" id="navbarCollapse">
				<ul class="navbar-nav mr-auto">
					<li class="nav-item dropdown  active">
						<a class="nav-link dropdown-toggle" href="/estimate" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">見積管理</a>
						<div class="dropdown-menu" aria-labelledby="navbarDropdown">
							<a class="dropdown-item" href="/estimate">見積一覧</a>
							<hr>
							<a class="dropdown-item" href="/estimate/input">見積登録</a>
						</div>
					</li>
					// 省略
				</ul>
				<ul class="navbar-nav">
					<li class="nav-item">
						<a class="nav-link" href="">ログアウト</a>
					</li>
				</ul>
			</div>

pc

sp

まあまあいいんじゃないでしょうか。

Bootstrap4でドロップダウンの区切り線を調整

まずヘッダメニューの雛形を作ります。

### classにcollapse navbar-collapseのみ

<div class="collapse navbar-collapse" id="navbarCollapse">
				<ul class="navbar-nav mr-auto">
					<li class="nav-item active">
						<a class="nav-link" href="/estimate">見積管理</a>
					</li>
					<li class="nav-item active">
						<a class="nav-link" href="/order">受注管理</a>
					</li>
					<li class="nav-item active">
						<a class="nav-link" href="/client">得意先管理</a>
					</li>
					<li class="nav-item active">
						<a class="nav-link disabled" href="">その他</a>
					</li>
			</div>

続いて、ドロップダウンをつけていきます。

<div class="collapse navbar-collapse" id="navbarCollapse">
				<ul class="navbar-nav mr-auto">
					<li class="nav-item dropdown active">
						<a class="nav-link dropdown-toggle" href="/estimate" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">見積管理</a>
						<div class="dropdown-menu" aria-labelledby="navbarDropdown">
							<a class="dropdown-item" href="/estimate">見積一覧</a>
							<a class="dropdown-item" href="/estimate/input">見積登録</a>
						</div>
					</li>
					<li class="nav-item active">
						<a class="nav-link" href="/order">受注管理</a>
					</li>
					<li class="nav-item active">
						<a class="nav-link" href="/client">得意先管理</a>
					</li>
					<li class="nav-item active">
						<a class="nav-link disabled" href="">その他</a>
					</li>
			</div>

悪くはないけど。悪くはないけど背景色とカラーを変えたい。(=悪い)

/src/scss/style.scss

.navbar {
	.navbar-nav {
		.dropdown-menu {
			background-color: #1e90ff;
		}
		.active {	
			a, a:focus, a:hover {
				background-color: #1e90ff;
				color: #fff;
			}
		}
	}
}

まあいいけど、操作性を考えると、区切り線を入れたい。
class=”divider”で上手くいかないので、hrで対応する。

<li class="nav-item dropdown active">
						<a class="nav-link dropdown-toggle" href="/estimate" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">見積管理</a>
						<div class="dropdown-menu" aria-labelledby="navbarDropdown">
							<a class="dropdown-item" href="/estimate">見積一覧</a>
							<hr>
							<a class="dropdown-item" href="/estimate/input">見積登録</a>
						</div>
					</li>
.navbar {
	.navbar-nav {
		.dropdown-menu {
			background-color: #1e90ff;
		}
		.active {	
			a, a:focus, a:hover {
				background-color: #1e90ff;
				color: #fff;
			}
		}
		hr {
			margin-top: 5px;
			margin-bottom: 5px;
		}
	}
}

pc

sp

想像してたより綺麗。これで、見積管理以外のドロップダウンも作り込んでいきます。

Bootstrap4のヘッダー色の変更

### navbar-dark bg-dark
bg-darkが背景色で、navbar-darkが明るめの文字色

<div class="wrapper">

		<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
			<a class="navbar-brand" href="/">Hanbai</a>
		</nav>

		<div class="container">
			<div class="top">
				
			</div>
		</div>
		<footer>
			<p>&copy; Hanbai All Right Reserved.</p>
		</footer>
	</div>

デフォルトがbg-darkなので、SAPを意識して水色に変更します。
また、ヘッダに合わせて、フッタの色も変更。バランスを見ながら細かな微調整をしていきます。

### background-colorで背景色指定
inline styleでbackground-colorを指定します。

<nav class="navbar navbar-expand-md navbar-dark fixed-top" style="background-color:#1e90ff">
			<a class="navbar-brand" href="/">Hanbai</a>
</nav>

おおお、なんかERPっぽい雰囲気が出てきました。

footer下固定のcss

/dist/login/html

<body>
	<div class="wrapper">
		<div class="container">
			// 省略
		</div>
		<footer>
			<p>(c)hanbai all right reserved.</p>
		</footer>
	</div>
</body>

/src/scss/style.scss

.wrapper {
	min-height: 100vh;
	position: relative;
	padding-bottom: 120px;
	box-sizing: border-box;
}
footer {
	width: 100%;
	background-color: #89c7de;
	color: #fff;
	text-align: center;
	padding: 30px 0;

	position: absolute;
	bottom: 0;
}

pc

sp

OK! 続いてTopページを作っていきます^^

あ、コピーライトはhtmlでは &copyでした。

		<footer>
			<p>&copy; hanbai All Right Reserved.</p>
		</footer>

ま、Djangoのインクルード時に修正すればいいのですが、気づいたタイミングで変えます。

cssのmozとwebkit

ベンダープレフィックスとは、ブラウザベンダーが独自の拡張機能を実装する際に、それが拡張機能であることを明示するために付ける識別子
/src/scss/style.scss

body {
	height: 100%;
	background-color: #fff;
}

.login {
	.card-container.card {
		max-width: 350px;
		padding: 40px 40px;
	}
	.btn {
		font-weight: 700;
		height: 36px;
		-moz-user-select: none;
		-webkit-user-select: none;
		user-select: none;
		cursor: default;
	}
	.card {
		background-color: #F7F7F7;
		padding: 20px 25px 30px;
		margin: 0 auto 25px;
		margin-top: 50px;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius: 2px;
		-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.3);
		-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
		box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
	}
	.profile-img-card {
		width: 96px;
		height: 96px;
		margin: 0 auto 10px;
		display: block;
		-moz-border-radius: 50%;
		-webkit-border-radius: 50%;
		border-radius: 50%;
	}
	.form-signin #inputEmail, .form-signin #inputPassword {
		direction: ltr;
		height: 44px;
		font-size: 16px;
	}
	.form-signin input[type="email"], .form-signin input[type="password"], .form-signin input[type="text"], .form-signin button {
		width: 100%;
		diplay: block;
		margin-bottom: 10px;
		z-index: 1;
		postion: relative;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	.form-signin .form-control:focus {
		border-color: rgb(104, 145, 162);
		outline: 0;
		-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.75), 0 0 8px rgb(104, 145, 162);
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgb(104, 145, 162);
	}
	.btn.btn-signin {
		background-color: rgb(104, 145, 162);
		padding: 0px;
		font-weight: 700;
		font-size: 14px;
		height: 36px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		border: none;
		-o-transition: all 0.218s;
		-moz-transition: all 0.218s;
		-webkit-transition: all 0.218s;
		transition: all 0.218s;
	}
}

うむ、まあまあいい感じ。

gulp卒業 -> webpack一本化 [フロント環境]

今までフロント構築時は、sassからcssへの変換およびサーバ起動はgulpでやってたんだけど、webpackで両方とも出来るということがわかったので、gulpは卒業してwebpackに一本化します。

### 前準備
$ node -v
v12.18.3
$ npm -v
6.14.6
$ npm -y init
$ npm -D install webpack webpack-cli
$ npx webpack -v
4.44.0
$ npm -D i sass-loader node-sass style-loader css-loader
$ npm -D i mini-css-extract-plugin optimize-css-assets-webpack-plugin

### webpack-dev-server導入
$ npm i -D webpack-dev-server

package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server"
  },

webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
	entry: {
		anyname: `./src/scss/style.scss`,
		main: `./src/index.js`,
	},
	output: {
		filename: "[name].js",
		path: path.resolve(__dirname, 'dist'),
	},

	devServer: {
		host: '192.168.33.10',
		port: '8000',
		contentBase: "dist",
		open: true
	},

	module: {
		rules: [
			{
				test: /\.scss$/,
				use: [
					{ loader: MiniCssExtractPlugin.loader },
					{ loader: 'css-loader' },
					{ loader: 'sass-loader' },
				],
			}
		],
	},
	plugins: [
		new MiniCssExtractPlugin({ filename: 'css/style.css'}),
	],
	optimization: {
		minimizer: [new OptimizeCSSAssetsPlugin({})],
	},
}

### サーバ起動
$ npm run start

/dist/index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/style.css">
	<script src="main.js"></script>
</head>
<body>
	<h1>hello</h1>
</body>
</html>

/src/style.scssや/src/index.jsを変更すると、ブラウザが自動更新されます。

gulp使ってると、まだgulp触ってるの?みたいな風潮があるからね。。
babel、linterとか他にも色々あるみたいだけど、とりあえず今回はこの環境でフロントを作り始めたいと思います。