タダケンのEnjoy Tech

楽しみながらラクに成果を上げる仕組みを考える

サンプルデータ投入済みのPostgreSQL環境をDockerを使って作成する

f:id:tadaken3:20180402204001p:plain こんにちは!
タダケン(@tadaken3)です。

SQLの練習やSQLのサンプルコードを書くときに、手軽なサンプルデータがはいったデータベースが欲しくなることってありますよね?ボクの場合、ブログでSQLの記事を書く時に、SQLのコードを試す環境があればいいのになと思う時があります。

ということで、Dockerを使ってPostgreSQLチュートリアルのサンプルデータを投入したDockerイメージを作成しました。Dockerイメージの作成手順をまとめています。1

作成したDockerイメージはDocker Hubにアップロードしていますので、データ投入済みのDockerイメージを利用したい場合は、記事の最後にあるを「データ投入済みのDockerイメージを取得する」の部分をご覧ください。

ベースとなるPostgreSQLのコンテナを作成する

まずはベースとなるpostgreSQLのコンテナを作成します。

docker runコマンドで postgreSQLのイメージからコンテナが作成しましょう。ローカルにイメージファイルがない場合は、最新版がダウンロードされます。今回はsampledbという名前でコンテナを作ります。

$ docker run --name sampledb -d  postgres

コンテナができたら、中身を確認しましょう。コンテナの中を確認するには、docker execコマンドを使います。

$ docker exec -it  sampledb /bin/bash

コンテナの中に入ったら、psqlコマンドでpostgreSQLの中身を見ていきましょう。

psqlはpostgreSQLを操作するためのコマンドです。Uオプションでユーザー名を選んで、データベースに接続します。ユーザー名をpostgresにして、データベースに接続します。

$ psql -U postgres

すると、このような感じで、psqlコマンドでデータベースと対話的に問い合わせを行えます。

f:id:tadaken3:20180402202037p:plain

psqlコマンドの使い方は以下のサイトを参考にしてみてください。

dev.classmethod.jp

Postgreチュートリアルからサンプルデータをダウンロードする

ここからは、一旦コンテナから抜けて、ホスト上で作業をします。

サンプルのデータを用意して、それをコンテナ内に設置していきましょう。サンプルデータはPostgreSQLのチュートリアルサイトからダウンロードしてきます。チュートリアルサイトにはDVDレンタルショップのデータが用意されています。サイトからzipファイルでダウンロードしましょう。

www.postgresqltutorial.com

zipファイルをダウンロードしたら、ファイル解凍します。

$ unzip dvdrental.zip

中にはdvdrental.tarというファイルが入っていいます。このファイルをリストアして、データを再現します。dvdrental.tarの中には、DVDレンタルショップにまつわる15個のテーブルが格納されています。データのテーブル間の関係を表すER図はこちらです。

f:id:tadaken3:20180331075035p:plain
DVD RENTAL SHOPのER図

ホストとコンテナ間でファイルをやり取りするにはdocker cpコマンドを使います。今回はホストからコンテナにdvdrental.tarファイルをコピーします。

# コンテナ名:ディレクトリを指定することでホストのファイルをコピーする
$ docker cp dvdrental.tar sampldb:/tmp/dvdrental.tar

これで、dvdrental.tarファイルがホストからsampledbコンテナ内の /tmpディレクトリにコピーされます。

データベースの初期化設定をする

データベースの初期化時の設定する内容は/docker-entrypoint-initdb.dにシェルスクリプトかSQLで保存します。/docker-entrypoint-initdb.d.sqlファイルや.shファイルを置いて置くことで、初回起動時に実行してくれます。

今回はcreate_db.shというファイルを用意しました。中身は以下のとおりです。

#!/bin/sh

# psqlコマンドでdvdrentalというデータベースを作成する
psql -U postgres -c "create database dvdrental"

# dvdrental.tarからリストアをする
echo "import dvd rental data..."
pg_restore -U postgres -d dvdrental /tmp/dvdrental.tar

先程、/tmpディレクトリにdvdrental.tarをコピーしたの同様に、create_db.shをコンテナにコピーします。

# create_db.shを/docker-entrypoint-initdb.dにコピーする
$ docker cp create_db.sh sampldb:/docker-entrypoint-initdb/create_db.sh

作成したコンテナからデータ投入済みのイメージを作成する

コンテナからDockerイメージを作成するには、docker commitコマンドを使用します。sampledbというコンテナをもとに、tadaken3/postgres-dvdrental-databaseというイメージを作成します。

$ docker commit sampledb tadaken3/postgres-dvdrental-database

では、作成したイメージ(tadaken3/postgres-dvdrental-database)を元にdvdrental-dbというコンテナをあらためて作ります。

$ docker run -d --name dvdrental-db tadaken3/postgres-dvdrental-database

先程、ご紹介したdocker execコマンドとpsqlコマンドを組み合わせて、きちんとデータベースが作られているか見ていきます。

$ docker exec -it dvdrental-db psql -U postgres -d dvdrental -c "\dt"

するとテーブル一覧が表示され、正しくサンプルデータが取り込まれていることが確認できました。

f:id:tadaken3:20180402202720p:plain

データ投入済みのDockerイメージを取得する

今回作成したDockerイメージはDocker Hubにアップしています。docker pullコマンドでイメージを取得することができますので、もしPostgreSQLのサンプルデータが必要な場合はぜひ活用してみてください。

$ docker pull tadaken3/postgres-dvdrental-database

Dockerfileと必要なファイルをまとめたものはこちらです。

github.com

まとめ

今回はDockerを使って、サンプルデータが投入された状態のPostgreSQL環境の作り方を紹介しました。

  • PostgreSQLのサンプルデータは、公式のチュートリアルからダウンロードできる
  • Dockerを使って、データベースの初期化設定をする場合は /docker-entrypoint-initdb.d を使う

こういった環境を用意しておくとSQLのコードを試すときに便利ですね。

読者登録をお願いします

本ブログではプログラミングについての記事を公開しています。よろしければ読者登録していただけると更新の励みになります。ぜひ一緒にプログラミングを学びましょう。

参考資料

dev.classmethod.jp

kakakakakku.hatenablog.com


  1. 本記事では、Dockerの詳しい説明やインストール方法はこちらをご覧になってみてください。https://www.ogis-ri.co.jp/otc/hiroba/technical/docker/part1.html

【Python】誰でも簡単に予測モデルが作れるProphetでTOPIXの予測モデルを作ってみた

f:id:tadaken3:20180324123817p:plain こんにちは!
タダケン(@tadaken3)です。

今回は時系列予測ツールProphetを使って、過去のデータから未来を予言する予測モデルの作成を試してみました。 ビジネスでは日々発生する時系列データ(DAU、売上など)に対する予測を作成する必要があります。

Prophetを使うことで、とても簡単に予測モデルを作ることができます。Prophetはオープンソースで開発されておりPythonとRのライブラリが公開されています。今回はTOPIXのデータを使用して、Python版のProphetの使い方を解説します。

Prophetを使ってあなたも予言者に

PorphetとはFacebookが作成した時系列データの予測ツール です。Prophetには、「Forcasting at Scale.」というコピーが掲げられており、このような特徴があります。

  • 分析のエキスパートでなくても、簡単に時系列データの予測ができる
  • 予測モデルの結果も視覚的に把握できる
  • ドメイン知識をもとにモデル調整も直感的にできる

データを用意するだけで精度の高い予測モデルを簡単に作ることができます。また作ったモデルを視覚的に把握することができるので、モデルのチューニングも行いやすいのがメリットです。

ちなみにProphetは予言者という意味になります。

TOPIXのデータを準備する

TOPIXのcsvファイルを取得する

実際のビジネスの現場ではDAUなどKPIの予測に使うことが多いと思いますが、今回はTOPIXのデータを使用して予測モデルを作っていきます。

TOPIXのデータはWall Street Journalのサイトからダウンロードできます。今回は2000年1月1日から2018年3月23日のデータを使用しました。

Quote Not Found - Wall Street Journal

期間を指定して「DOWNLOAD A SPREADSHEET」を押します。

f:id:tadaken3:20180324111619p:plain
Wall Street Journalのサイトからデータをダウンロードする

PandasでProphetに取り込むための前処理を行う

今回はGoogle Colaboratory(以下、Colab)を用いて分析をしていきます。

まずは先程、ダウンロードしたCSVファイルをColabに取り込みます。

#CSVファイルの読み込み
from google.colab import files
uploaded = files.upload()

Colabでローカルファイルを取り扱う方法については、こちらの記事を参考にしてください。

tadaken3.hatenablog.jp

続いて、読み込んだデータをデータフレームで扱えるようにします。

# 読み込んだデータをpandasのdataframe扱えるようにする
import io
import pandas as pd
import numpy as np

df = pd.read_csv(io.StringIO(uploaded['HistoricalPrices.csv'].decode('utf-8')))

# 中身を確認する
df.head()

f:id:tadaken3:20180324111914p:plain
データの確認をする

データフレームをProphetにインプットする形に前処理をします。 ここで一つ注意があります。入力に使用するカラム名とデータの中身を以下の形式にする必要があります。

カラム名 備考
ds datetime 時系列情報(タイムスタンプ)
y 数値 実績値

また数字の変動が大きい場合は対数変換(log)をしておくと精度が上がります。 今回は、TOPIXの終値を使って、モデルを作成します。

カラム名やデータの形式をこのように変換します。 データはグラフで確認もしておきましょう。

# prophetでモデルを作成する際は、datetimeをdsカラムに、yに値を入れる。
# inputは必ずこの形式に。
%matplotlib inline
import matplotlib.pyplot as plt

df['ds'] = pd.to_datetime(df['Date']).dt.date #date型に変換
df['y']  = np.log(df[' Close']) #データの変化が大きいため、対数変換をする。
df['y'].plot()

f:id:tadaken3:20180324025829p:plain
TOPIXのデータ

これで準備が整いました。

データをもとに予測モデルを作成する

prophetのインストールとモデルの作成

まずはpipでprophetをインストールします。

!pip install fbprophet

インストールが終わったら、さっそく予測モデルを作成していきましょう。

Prophetではいろいろなパラメータをつかって予測モデルをチューニングすることができるのですが、今回はデフォルト設定で作成します。

from fbprophet import Prophet

#デフォルト設定でモデルを作成する
model = Prophet()
model.fit(df)

これで予測モデルができました。簡単ですね。

モデルをもとに未来予測をしてみる

では、作成したモデルを使って、未来予測をしてみましょう。 予言者の本領発揮です。

#モデルをもとに予測をする
# periodに期間を入れる。この場合365日分の予測値が出力される
future = model.make_future_dataframe(periods=365)
forecast = model.predict(future)
forecast[['ds', 'yhat', 'yhat_lower', 'yhat_upper']].tail()

結果はデータフレームでこのような形で返ってきます。

f:id:tadaken3:20180324113056p:plain
予測モデルの結果

yhatが予測値になります。対数変換しているので、e(約2.6)をyhatの値で乗算するともとに戻せます。 この場合、2019年3月23日の予測値は約7.48なので、実際にTOPIXの値としては、1786.46になります。

数値で見てもいいのですが、Prophetにはビジュアライズの機能もあります。

#予測モデルをグラフで表示
model.plot(forecast);

f:id:tadaken3:20180324025852p:plain
Prophetの予測モデル

黒い点が実際の値、青い濃い線が予測モデルになります。2013年以降上昇トレンドがつついており、2019年も上昇するトレンドが続きそうですね。

予測モデルの構成要素

トレンドや周期性についての分析結果は、model.plot_components()にて見ることができます。

#トレンドや周期性を表示する
model.plot_components(forecast)

f:id:tadaken3:20180324030010p:plain
構成要素のグラフ
上から、トレンド性、年周期性、週周期性のグラフです。 それぞれのグラフから以下のようなことが読み取れます。

  • [トレンド性] 2012年の年末から上昇トレンド。2013年のはじめからにトレンドが緩やかになっている
  • [年周期] 2月から5月にかけては上昇する周期性がある
  • [週周期] 土日が下がっているように見えるが、これは相場閉まっているため。

直感的でわかりやすいですね。

予測モデルの精度を検証する

検証用データの生成

では続いて、この予測モデルがどれくらいの精度があるのか検証していきます。

精度検証をするには、prophetのdiagnosticsクラスを使います。 diagnosticsは日本語で「診断」という意味になります。

#diagnosticsは日本語で診断
from fbprophet import diagnostics

#精度検証をする。horizonに検証したい期間を入力する
cv = diagnostics.cross_validation(model, horizon='365 days')
cv.tail()

f:id:tadaken3:20180324113757p:plain

詳しい説明は省きますが、cross_validationメソッドを使うと、交差検証法という手法で、訓練データとテストデータに分けて、何度か予測値の算出を行ってくれます。cvの中身をを簡単に説明します。yが実績値、yhatが予測値になります。この2つの差がどれくらいあるのかを計算してモデルの精度を検証します。

MAPE(平均絶対誤差率)を使って予測モデルの精度をはかる

今回はMAPE(平均絶対誤差率)という指標を使います。実績値に対して予測値にどれくらい誤差率があるのかという指標になります。

cvのデータをもとに以下のように計算できます。

def cal_mape(df):
    return((df['yhat'] - df['y']).div(df['y']).abs().sum()*(1/len(df)))
 
cal_mape(cv)

f:id:tadaken3:20180324115349p:plain
MAPEの計算。画像では他の指標も算出はしています。

今回モデルで365日の予測を行った場合のMAPEの値は2.8%でした。MAPEは小さいほど精度が高いということになります。

上記に加えて、100日、150日、200日、250日ごとにMAPEの値を計算するとこのようになります。

f:id:tadaken3:20180324115117p:plain

150日を超えたあたりから予測の精度が低下していますね。 実際はここからモデルを調整して予測の精度を上げていくことになります。

まとめ

Prophetの基本的な使い方を解説しました。 Prophetは簡単に時系列分析ができ、非常に強力なツールですので、ぜひみなさんも試してみてはいかがでしょうか。

今回、実施祭に使用したColabのノートブックはこちらになります。 実際に試してみたい方はぜひ参考にしてみてください。

drive.google.com

参考資料

facebook.github.io

d.hatena.ne.jp

data.gunosy.io

funyakofunyao.click

読者登録をお願いします

本ブログではプログラミングについての記事を公開しています。よろしければ読者登録していただけると更新の励みになります。ぜひ一緒にプログラミングを学びましょう。

↓Twitterもやっています。 twitter.com

免責事項:当ブログのご利用につきましては、全ては自己責任、自己判断でお願いいたします。何らかのトラブルや損失・損害等発生した場合、当ブログでは一切の責任を負いかねます。投資は自己責任で。

tadaken3.hatenablog.jp

すぐに使える! 業務で実践できる! Pythonによる AI・機械学習・深層学習アプリのつくり方

すぐに使える! 業務で実践できる! Pythonによる AI・機械学習・深層学習アプリのつくり方

Google ColaboratoryでTwitterのツイート数を可視化してみる

f:id:tadaken3:20180311235628p:plain

こんにちは!
タダケン(@tadaken3)です。

前回はGoogle Colaboratoryの使い方をご紹介しました。

tadaken3.hatenablog.jp

今回はGoogle Colaboratoryを使ってTwitterのデータからツイート数を時系列で集計し可視化していきます。

上記の分析を通して、本記事の中では、

  • Google ColaboratoryでローカルPCにあるデータを取り込む方法
  • Google Colaboratoryで分析した結果をローカルPCに保存する方法

といったローカルPCのデータをGoogle Colaboratoryで取り扱い方法をご紹介します。

データ分析においては機械学習や多変量解析といった手法ばかりが注目されがちですが、適切な課題設定とデータの前処理をきっちりと行なうことが非常に重要です。

ツイート履歴のCSVファイルを取得する

全ツイートの履歴は公式ページの設定から取得できます。

「設定とプライバシー」をクリックします。 f:id:tadaken3:20180311234319j:plain

画面下の方にあるコンテンツのところから全ツイートのデータをメールで送ることができます。 f:id:tadaken3:20180311234333j:plain

しばらくするとメールが送られきます。添付のZipファイルにTweets.csvというファイルがあります。この中にツイートの履歴データが入っています。 f:id:tadaken3:20180311234346j:plain

ローカルにあるCSVファイルをColaroratoryに取り込む

それではさっそく、取得したTweets.csvをColaboratoryに取り込んでいきましょう。

ローカルのファイルを読み込むにはgoogle.colabモジュールのfilesクラスを使います。google.colabはColaboratoryのためのモジュールです。filesクラスでは、その名の通りファイル関連をあつかうクラスとなります。

ローカルPCにあるファイルをColaboratoryにアップロードするにはfilesクラスのuploadメソッドを使用します。 Colaroratoryのセルに以下のようにコードを書いて実行してみてください。

# ファイルの読み込みも可能
from google.colab import files

uploaded = files.upload()

するとColaboratoryのセルの下にファイルをアップロードするためのボタンが表示されました。 ここからローカルのファイルを選択して、アップロードします。

f:id:tadaken3:20180311234659j:plain

ファイルを選択して、アップロードが終了すると、変数「uploaded」の中に

{ファイル名:コンテンツ}

という形で、ディクショナリとして、データが格納されます。

pandasで日付ごとにツイート数を集計していく

ここからは、Pythonのデータ分析ライブリPandasを使って、データを集計してきます。 まずは、読み込んだデータをPandasのDataframeで扱えるようにします。

以下のコードをセルで実行してみてください。

# 読み込んだデータをpandasのdataframeで扱えるようにする
import pandas as pd
import io

df = pd.read_csv(io.StringIO(uploaded['tweets.csv'].decode('utf-8')))

# 中身を確認する
df.head()

データがdataframeで扱えるようになっていますね。

f:id:tadaken3:20180311234856j:plain

あとは、このデータを使って、グラフを表示するところまで一気にやってみましょう。 データを可視化するにはmatplotlibを使います。

import matplotlib.pyplot as plt

# timestampをもとにdate列を作成
df['timestamp'] = pd.to_datetime(df['timestamp'])
df['date'] = df['timestamp'].dt.date

#日付ごとの集計する
tweets_cnt = df.groupby('date').size()

# グラフを表示する
tweets_cnt.plot()

上記のコードを実行するとグラフが表示されます。

f:id:tadaken3:20180311233750p:plain

2017年の初め頃に、スパイクしていますね。暇だったのか、Botが暴発したのでしょうね(適当)

作成したグラフを画像ファイルとしてローカルに保存する

では、作成したグラフをローカルPCに保存してみましょう。 google.colabモジュールのfilesクラスのdownloadメソッドを使うことで、ファイルをダウンロードできます。

# グラフを表示する
tweets_cnt.plot()

# ローカルにグラフを保存する
filename = 'tweet_cnt.png'
plt.savefig(filename)
files.download(filename) 

コードを実行するとダイアログが表示されるのでファイルの保存場所を指定します。

f:id:tadaken3:20180311233725p:plain

指定したフォルダにtweet_cnt.pngが保存されます。 今回は画像ファイルをダウンロードしましたが、CSVファイルなどももちろんダウンロードできます。

まとめ

今回は以下のテクニックをご紹介しました。

  • Google ColaboratoryでローカルPCにあるデータを取り込む
  • Google Colaboratoryで分析した結果をローカルPCに保存する

Google Colaboratoryを使っていろいろと分析してみるとおもしろいですね。 ぜひ、いろいろ試してみたください。

2018年3月21日追記

Google Colaboratoryで、ツイートの内容のテキストマイニング(Wordcloud・Word2vec)を試されたからあげさん(id:karaage)の記事です。 こちらも参考になるかと思います!

karaage.hatenadiary.jp

読者登録をお願いします

本ブログではプログラミングについての記事を公開しています。よろしければ読者登録していただけると更新の励みになります。ぜひ一緒にプログラミングを学びましょう。

参考リンク

ツイート数の可視化ネタは、以下のブログ記事を参考にさせていただきました。

temcee.hatenablog.com

Google Colaboratoryを使えばブラウザ上でPythonの実行環境が簡単に手に入る

f:id:tadaken3:20180308192136p:plain こんにちは!
タダケン(@tadaken3)です。

Googleが機械学習の教育や研究用に提供しているGoogle Colaboratoryを試してみました。ColaboratoryはJupyter notebookを基盤としたオープンソースプロジェクトです。Chromeのデスクトップ版で動作します。

Colaboratoryを使えば、Chromeブラウザ上で無料でPythonの実行環境を手に入れる ことができます。今回は、Colaboratoryの使い方を解説します。

バリバリのデータ分析者にも、Pythonでプログラミングを学んでみたいと思っている初学者にもおすすめのツールです。

そもそもJupyter notebookとは

Jupyter notebookはPythonの対話型実行環境をより便利に拡張した環境です。Pythonのプログラムをすぐに実行し、結果を表やグラフですぐに確認できるため、データ解析や機械学習など、試行錯誤しながら、データを扱う場合に、とても役立つツールです。

Jupyter notebookについては、以下のブログを参考にしてみてください。

news.mynavi.jp

Jupyter notebookは、対話しながらPythonプログラムを実行できるので、試行錯誤しながらコードをかくことができます。

そのため、Python初心者にも最適だったりするのですが、いかんせん、Pythonの環境を用意した上で、さらにJypyter notebookをインストールしたりしないといけません。ほかにも、Windowsで日本語を扱おうとすると文字化けしたりなどもします。

プログラミングを学ぶ上では最適なのですが、環境構築に若干難があり、プログラミングが全くの初心者には、敷居があるのが事実です。いわゆる環境構築の壁です。プログラミングを学ぶ前に環境構築で躓いてしまうパターンです。

ですが、Google Colaboratoryであれば、ブラウザひとつで、Pythonの実行環境が作れてしまいます。

f:id:tadaken3:20180308190518p:plain
実際のGoogle Colaboratoryの画面

Google Colaboratoryを起動する

さっそく、Google Colaboratoryを使っていきましょう。

Google ColaboratoryのサイトにChromeブラウザでアクセスするだけです。

https://colab.research.google.com/

はじめて起動すると、チュートリアル用のnotebookが開きます。初回以降は、直近に開いていたnotebookが立ち上がります。

f:id:tadaken3:20180308183653p:plain

notebookを新規作成するには、「ファイル>Python 3 のノートブックを新規作成」をクリックします。Python 2 とPython 3の違いはPython自体のバージョンの違いです。

f:id:tadaken3:20180308184407j:plain

すると以下のようにまっさらなnotebookが立ち上がります。

f:id:tadaken3:20180308183723p:plain

ここにコードを書いていきます。

Google ColaboratoryでPythonのコードを実行する

Colaboratoryには、セルという概念があります。複数行のコードを実行し、その結果を見て、コンピュータとあたかも対話しながら、コードを書いていくことができます。

さっそく、この部分に

f:id:tadaken3:20180308183900j:plain

print('Hello Colaboratory')

と入力してみて、「Shift + Enter」を押してみてください。すると「Hello Colaboratory」が実行結果として返ってきます。

f:id:tadaken3:20180308183929p:plain

セルはどんどん足していくことができます。では、セルを追加してみましょう。セルを追加するには、「コード」をクリックします。すると新しいセルが追加されました。

f:id:tadaken3:20180308184104j:plain

追加されたセルに以下のコードを打ち込んで、さきほどと同様に「Shift + Enter」を実行してみてください。

import datetime

today = datetime.date.today()
print(today)

今度は今日の日付が表示されました。

f:id:tadaken3:20180308184127p:plain

Colaboratoryはセル単位でコードを実行できる点が特徴です。ファイルを読み込んだり、集計したデータを加工したり、グラフに表示したりといったこと、少しずつ確認しながらすすめることができ、データ分析の環境ではよく使われています。

試行錯誤しながらコードを書くことができるので、Pythonの学習にも最適です。

セルを削除するには、セルの右上にあるメニューから「ゴミ箱」ボタンを押すと削除されます。

f:id:tadaken3:20180308184254j:plain

作成したnotebookを保存する

notebookの名前は左上でのタイトル部分で直接編集できます。

今回は「first_step.ipynb」という名前で保存します。

「.ipynb」という拡張子は、Jypyter notebookがもともとIPython Notebookだったことによるものです。

f:id:tadaken3:20180308184429p:plain

notebookを保存するには「ファイル>保存」をクリックします。

f:id:tadaken3:20180308184545j:plain

notebookはGoogle Drive上に保存されます。無事にnotebookが保存されていますね。

f:id:tadaken3:20180308185859j:plain

まとめ

Google Colaboratoryの基本的な使い方をご紹介しました。Google Colaboratoryには

  • Google ColaboratoryはJupyter notebookベースのPythonの対話型実行環境
  • Google ColaboratoryはChromeブラウザがあれば無料で利用できる
  • コードはセル単位で実行し、結果を確認しながらコーディングできる
  • ファイルはGoogle Driveに保存

といった特徴があります。次回は、Twitterのデータを使ってGoogle ColaboratoryでローカルPCにあるファイルを取り込む方法をお伝えします。

tadaken3.hatenablog.jp

読者登録をお願いします

本ブログではプログラミングについての記事を公開しています。よろしければ読者登録していただけると更新の励みになります。ぜひ一緒にプログラミングを学びましょう。

↓Twitterもやっています。 twitter.com

tadaken3.hatenablog.jp

みんなのPython 第4版

みんなのPython 第4版

【SQL】CASE式を使ってアンケートのデータを集計する

f:id:tadaken3:20180223221620p:plain こんにちは!
タダケン(@tadaken3)です。

ふだん、データアナリストとして、いろいろなデータを集計し分析しています。 アクセスログなどはもちろんお客様から取得したアンケートのデータを集計することもあります。

今回はSQLを使ってアンケート結果を集計する場合の基本的な内容1をまとめてみました。

アンケートの中身を確認する

例えば、以下のようなアンケートがあったとします。

アンケート Q1. あなたの好きな食べ物は?(いくつでも)
1. バナナ
2. リンゴ
3. ぶどう

Q2. あなたの性別は?
1. 男性
2. 女性

Q3. あなたの名前は?(自由記述)

好きな食べ物に関するアンケートですね。 このアンケートの回答結果がこのようになりました。

SELECT * FROM answer;

f:id:tadaken3:20180223213832p:plain

バナナを好きと回答した人には、q1_1のカラムに1が入っており、 同様にリンゴを好きと回答した人には、q1_2のカラムに1が入っています。 nameには記載してもらった名前、genderには性別の情報が保存されています。

このデータをSQLで集計してみましょう。

単純な集計をする

アンケートを集計する際にはN表(回答数)と%表(回答割合)を集計することが多いです。 まずは単純にQ1のアンケート結果を集計するSQLを紹介します。

-- 単純集計 N表
SELECT
   count(CASE WHEN q1_1=1 THEN name ELSE null END) AS q1_1
  ,count(CASE WHEN q1_2=1 THEN name ELSE null END) AS q1_2
  ,count(CASE WHEN q1_3=1 THEN name ELSE null END) AS q1_3
  ,count(name) AS n
FROM answer

CASE式で、q1_1に1が入っている場合のみnameを集計します。 結果はこのようになります。CASE式を使ってデータの縦持ちから横持ちに変換します。

f:id:tadaken3:20180223213917p:plain

回答者数が5人で、

  • バナナ(q1_1)を好きな人が2人
  • リンゴ(q1_2)を好きな人が2人
  • ぶどう(q1_3)を好きな人が3人

ということがわかりました。

続いて、回答比率(%表)を集計してみましょう。

-- 単純集計 %表
WITH src AS (
SELECT
   count(CASE WHEN q1_1=1 THEN name ELSE null END) AS q1_1
  ,count(CASE WHEN q1_2=1 THEN name ELSE null END) AS q1_2
  ,count(CASE WHEN q1_3=1 THEN name ELSE null END) AS q1_3
  ,count(name) AS n
FROM answer
) 
SELECT
   q1_1 / n as q1_1
  ,q1_2 / n as q1_2
  ,q1_3 / n as q1_3
  ,n
FROM src

WITHでN数(サンプル数)を集計し、各回答結果をN数で割ってあげます。 Window関数などを使っても集計できますが、個人的にはWITH句を使ったほうが可読性が高いと思います。

結果はこのとおりです。

f:id:tadaken3:20180223214233p:plain

バナナを好きな人は、全体の約4割(2/5)です。

クロス表を集計する

続いてアンケートでよくあるクロス集計を行ってみましょう。 今回の場合、性別ごとに好きな食べ物に違いがないか集計してみます。

---クロス集計 N表
SELECT
   gender
  ,count(CASE WHEN q1_1=1 THEN name ELSE null END) AS q1_1
  ,count(CASE WHEN q1_2=1 THEN name ELSE null END) AS q1_2
  ,count(CASE WHEN q1_3=1 THEN name ELSE null END) AS q1_3
  ,count(name) AS n
FROM answer
GROUP BY gender

N表はこちらです。GROUP BYでgenderを指定してあげるだけでOKです。

f:id:tadaken3:20180223214358p:plain

回答者のうち、男性が3人、女性が2人ということがわかりましたね。

つづいて%表も見ていきましょう。

---クロス集計 %表
WITH src AS (
SELECT
   gender
  ,count(CASE WHEN q1_1=1 THEN name ELSE null END) AS q1_1
  ,count(CASE WHEN q1_2=1 THEN name ELSE null END) AS q1_2
  ,count(CASE WHEN q1_3=1 THEN name ELSE null END) AS q1_3
  ,count(name) AS n
FROM answer
GROUP BY gender
) 
SELECT
   gender
  ,q1_1 / n as q1_1
  ,q1_2 / n as q1_2
  ,q1_3 / n as q1_3
  ,n
FROM src

%表はこちらです。先程と同様にN数部分をWITHで集計し、各設問の回答数をN数で割ることによって比率を算出します。

f:id:tadaken3:20180223214459p:plain

まとめ

今回はSQLを使って、アンケートのデータを集計する方法をお伝えしました。

コツは

  • CASE式を使ってデータの持ち方をかえる
  • WITH句でN数を先に計算してから比率を集計する

でした。2

読者登録をお願いします

本ブログではプログラミング、データ分析についてボクが学んだことを公開しています。 よろしければ読者登録していただけると更新の励みになります。ぜひ一緒にプログラミングを学びましょう。


  1. Postgresql / Redshift / HIVEではうまく動作すると思います。

  2. 複数回答をデータを使っていますが、単一回答でもデータの持ち方が同じであれば、SQLはそのまま使えます。

SketchでMacアプリのアイコンを作成する

f:id:tadaken3:20180213235024p:plain こんにちは!
タダケン(@tadaken3)です。

最近、electron + ReactでMarkdown エディタ(Macアプリ)を作っています。 Reactの勉強用に作っているのですが、オリジナルのアイコンがあった方が気分が高まりますよね。

今回はSketchを使ってMacアプリのアイコンの作り方をまとめてみました。

Sketchでアイコン用の素材を用意する

アイコンの画像はSketchで作成します。 512 x 512pxのアートボードを用意し、そこに好きなようにアイコンを作成します。 とくに意味はありませんが、富士山を描いてみました。1

f:id:tadaken3:20180213225747p:plain

アイコンを作成するには以下のサイズの画像を用意する必要があります。

  • icon_512x512@2x.png (1024px)
  • icon_512x512.png
  • icon_256x256@2x.png
  • icon_256x256.png
  • icon_128x128@2x.png
  • icon_128x128.png
  • icon_32x32@2x.png
  • icon_32x32.png
  • icon_16x16@2x.png
  • icon_16x16.png

ちょっと大変そうですね。でも安心してください。

Sketchでは画像サイズを変更してexportする機能があります。

サイズを2xとすると、元のサイズの2倍に、256wと指定するとサイズを256pxでexportされます。ファイル出力時にPrefix/Suffixを指定することもできます。プリセットに登録すれば、これらの設定を再利用することも可能です。

f:id:tadaken3:20180213230328p:plain
exportの設定

実際の出力結果はこのとおりです。「XXXX.iconset」というディレクトリに保存します。XXXXの部分はアプリ名などを入れてください。

f:id:tadaken3:20180213230929p:plain

各サイズのPNGを合体させ、1つのアイコンファイルにする

さてPNGが揃ったら、あとはそれをアイコンファイル(.icns)にするだけです。

まずは、ターミナルを起動します。

Macにはicon作成用のiconutilというコマンドが用意されているので、先程画像を入れたディレクトリに対して、以下のコマンドを実行します。

$ iconutil -c icns XXX.iconset

すると、「XXX.icns」というファイルが作成されます。こちらがMacアプリのアイコン素材になります。f:id:tadaken3:20180213231631p:plain

electronのアプリにアイコン画像を設定する

アプリをパッケージングするのにはelectron-packagerを使用します。その際に、iconオプションでicon.icnsファイルの場所を指定するとアプリのアイコンがパッケージングされます。

$ electron-packager . sample --platform=darwin --arch=x64  --icon=images/icon.icns

一番下が今回作成したアイコンです。

f:id:tadaken3:20180213232522p:plain

まとめ

SketchでMacアプリのアイコン画像を作成する方法をお伝えしました。

  • Sketchで512 x 512pxでアイコン画像を作成する
  • Sketchのexport機能で必要な画像サイズを書き出す
  • Macのiconutilコマンドで一つにまとめる

オリジナルのアイコンがあるとそれだけでテンションが上りますね。 ちなみに作成しているMarkdown Editorはこちらです。プルリクお待ちしております。

github.com

読者登録をお願いします

本ブログではプログラミング、アプリ開発についてボクが学んだことを公開しています。よろしければ読者登録していただけると更新の励みになります。ぜひ一緒にプログラミングを学びましょう。


  1. 本職がデザイナーではない上、Sketchを使い始めたばかりなので、デザインセンスはご了承ください。

Redash Meetup #0.1に参加してきました!おまけもあるよ

f:id:tadaken3:20180201003906p:plain こんにちは!
タダケン(@tadaken3)です。

先日、 Redash Meetup #0.1 に参加してきました。 今回はRedash Meetupの内容をまとめていきます。

Redashとは

RedashはSQLさえ書けばグラフやカウンターを用いたビジュアライズがかんたんにできるOSSです。 作成したグラフをダッシュボードとしてまとめることもでき、データをかんたんに可視化するにはもってこいのツールです。

多様なデータソースにアクセスできる点も魅力です。

「Redash Meetup #0.1」の内容と学んだこと

「Redash Meetup #0.1」とは、id:kakku22さん、id:ariarijp さんが主催されているミートアップです。 今回はRedashの初心者を対象に、ハンズオン形式での開催でした。

実際に手を動かしながら、講師のお二人に質問しながらRedashの基本を学ぶことができます。

ちょうど昨年末に会社でRedashを使い始めたところだったので、実際に使っている人の声聞いてみたくて参加しました。

ハンズオンでは以下の資料をもとに学習を進めていきます。 Dockerを使っての環境構築から、サンプルデータを元にグラフ作成、ダッシュボード作成を一通り実践していきます。

github.com

資料がとてもわかりやすいので、これを見ながら、手を動かしていけばRedashの基本機能はおおよそ理解できると思います。1 が、わからない箇所があれば、すぐに講師の方にお聞きすることができるのがミートアップの良いところです。

今後も開催されるということなので、Redashが気になっている方はぜひ参加されるとよいかと!

ボクとしては、以下の内容が勉強になりました。

  • グループ名:ダッシュボード名で名前を作成するとグルーピングできること
  • パラメータの使い方
  • 結果にhtmlタグで色を付ける
  • Redashの結果データをAPI経由で取得する
  • スプレッドシートをデータソースにする方法

また、当日の詳しい内容は、id:kakku22さんご本人がブログにまとめられていますので、こちらもご覧になってみると雰囲気がつかめるのかと思います。

kakakakakku.hatenablog.com

終わりに

今年は「実戦投入力を高める」を目標にしているので、早速、会社で使用しているRedashのダッシュボードを整理しはじめました。 ひとに教えられるぐらい使い倒すぞー!

おまけ:よく見られているダッシュボードを集計する

redashはシステムの情報をmetadataとして、PostgreSQLに保存しています。 例えば、ユーザー情報、発行されたクエリの情報などが保存されています。

詳しくは以下の記事が参考になります。

qiita.com

metadataを使えば、よく見られているダッシュボードの情報を可視化することもできます。2 以下は、直近7日間でよく見られているダッシュボードを集計するクエリです。

SELECT e.object_id,
       d.name,
       count(e.id) AS view_count
FROM events AS e
--dashboardsのidはintgerになっているのでキャスト
JOIN dashboards AS d ON e.object_id = d.id::text
WHERE e.action = 'view'
  AND e.object_type = 'dashboard'
  AND e.created_at >= CURRENT_DATE - interval '7 days'
GROUP BY 1,
         2
ORDER BY 3 DESC

こんな感じで可視化できます。

f:id:tadaken3:20180131233326p:plain

読者登録をお願いします

本ブログではプログラミングについてボクが学んだことを公開しています。よろしければ読者登録していただけると更新の励みになります。ぜひ一緒にプログラミングを学びましょう。


  1. id:kakku22さんの資料は構成とかデザインとかきれいでとても見やすいしわかりやすいです。マネしたい。フォント何使っているのだろう。

  2. 実運用上ではスロークエリーなどを発見するの役立ちそうです。そのあたりをまとめようとしたら、すでにありました。こちらも参考に!redashに接続されるデータソースを運用する際に確認しておきたいredashのmetadata - Qiita

「Apps Script dashboard」でGoogle Apps Scriptのプロジェクトが一元管理できるようになった

f:id:tadaken3:20180126003010p:plain こんにちは!
タダケン(@tadaken3)です。

2018年1月11日に、Google Apps Scriptに新しい機能が追加されました。GASのプロジェクトを一元管理できる「Apps Script dashboard」です。今ままでは、GASのスクリプトがどこに保存されているか、わかりにくかったのですが、「Apps Script dashboard」ができたことによって、プロジェクト(スクリプト)の管理が格段にやりやすくなりました。

今回は「Apps Script dashboard」についてご紹介いたします。

Google Apps Scriptはプロジェクトの管理がとても煩雑だった

Google Apps Scriptには大きく分けて2種類あります。「スタンドアロンスクリプト」と「コンテナバインドスクリプト」です。

「スタンドアロンスクリプト」はその名の通り、スタンドアロンで実行される単体のスクリプトプロジェクトとなります。Google ドライブからGoogle Apps Scriptのプロジェクトファイルを新規作成していきます。

「コンテナバインドスクリプト」はスプレッドシート、ドキュメント、フォームといった親ファイルに紐づく形で保存される形式のスクリプトプロジェクトです。スプレッドシート、ドキュメント、フォームなどから新規作成します。

  • スタンドアロンスクリプト: 単体のスクリプト
  • コンテナバインドスクリプト: スプレッドシート、ドキュメント、フォームといった親ファイルに紐づくスクリプト

スプレッドシートの機能を使いたい場合などは、コンテナバインドスクリプトを使って、スプレッドシートに紐づけた形でスクリプトを書いていくケースが多いです。

「コンテナバインドスクリプト」は紐付いたスプレッドシートの情報を参照できるメソッド(getActiveSpreadSheet、getUiなどの)を使用することができる点がメリットでした。

一方で、スクリプトがスプレッドシートやドキュメントに紐付けられて保存されるので、どのスプレッドシートに、どんなスクリプトが書かれているのかは、自分で管理しておく必要がありました。

スクリプトが書かれたファイル名を自分で覚えておかないといけなかったり、いちいちファイルを開かないとスクリプトがあるかわからなかったりで、とてもとても不便でした。

でも、もう安心です。

Apps Script dashboardがあれば、「スタンドアロンスクリプト」であろうが、「コンテナバインドスクリプト」であろうが一元管理できます。

「Apps Script dashboard」を早速使ってみる

「Apps Script dashboard」にアクセスするには下のリンクをクリックします。

Apps Script – Google Apps Script

ログインをするとプロジェクト一覧画面が表示されます。

f:id:tadaken3:20180125214932p:plain
プロジェクト一覧


見ていただくとわかるように、すべてのGASプロジェクトが一覧で表示されています。プロジェクト名で検索することもできますし、dashboardから直接GASのファイルにアクセスすることもできます。メニューから「プロジェクトを開く」をクリックすると、スクリプトエディタが立ち上がります。 f:id:tadaken3:20180125222247j:plain

プロジェクト名の横にはアイコンが表示され、スタンドアロンなのか、スプレッドシート、フォームなどに紐付いているものなのかもひと目でわかるようになっています。

f:id:tadaken3:20180125221603p:plain
プロジェクト名


プロジェクトの実行状況をモニタリングする

Apps Script dashboardには、プロジェクトの実行状況を監視する機能もあります。これも使うのは簡単で、監視したいプロジェクトを選択して、メニューから「監視を開始」をクリックするだけです。

f:id:tadaken3:20180125234316j:plain

左メニューの「監視対象のプロジェクト」をクリックすると、監視対象となったプロジェクトの実行状況をモニタリングできます。

f:id:tadaken3:20180125235534p:plain

モニタリング画面では、直近7日間の

  • エラー率
  • スクリプトの実行数数
  • 実行ユーザー数

が確認できます。シンプルですが、とても便利ですね。

また、プロジェクトを監視対象としなくても、メニューの「実行数」から、すべてのスクリプトの実行状況がわかります。

  • 実行開始時間
  • 期間(実行にかかった時間)
  • 関数 (実行された関数名)
  • ステータス

などが確認できます。こちらは、プロジェクト名などでフィルターすることもできます。

f:id:tadaken3:20180125235746p:plain

時間主導型トリガーをつかって、定期的に実行しているスクリプトの状況も簡単に把握できるようになりました。

まとめ

「Apps Script dashboard」の機能をご紹介しました。「Apps Script dashboard」を使うことで

  • GASのすべてのプロジェクトを一元管理する
  • スクリプトの実行状況もモニタリングする

といったことが簡単におこなえるようになりました。これでGASの開発もはかどりますね。

読者登録をお願いします

本ブログではGoogle Apps Scriptについての記事を公開しています。よろしければ読者登録していただけると更新の励みになります。ぜひ一緒にプログラミングを学びましょう。

詳解! GoogleAppsScript完全入門 ~GoogleApps & G Suiteの最新プログラミングガイド~

詳解! GoogleAppsScript完全入門 ~GoogleApps & G Suiteの最新プログラミングガイド~

Reactを学ぶ上で理解しておきたいJavascriptの歴史

f:id:tadaken3:20180120205214p:plain こんにちは!
タダケン(@tadaken3)です。

Reactの開発を始める上で大変だと感じるのが、babel、ES6、webpackといった用語・ツールが多いことでした。

前回は、「create-react-app」を使ったので、このあたりを意識せず、開発環境を構築したのですが、実際に開発を進めたりコードを読む上で、こういった用語の意味やツールを使う背景を理解しておくにこしたことはありません。

tadaken3.hatenablog.jp

そこで、今回はReactを学ぶ上で理解しておきたいJavascriptの歴史を簡単にまとめてみました。

Javacriptの標準仕様について

JavaScriptの標準仕様はECMAScriptと呼ばれています。国際団体EcmaインターナショナルによってJavaScriptの中核的な仕様がECMAScriptとして標準化されています。

標準化される以前は、ブラウザごとに言語仕様の独自拡張が行われていたため、ブラウザ間の互換性が極めて低かったそうです。ECMAScriptが策定されたことにより、ブラウザ間での互換性が向上しました。

現在、大抵のブラウザは、ECMAScript 5.1以上に対応しています。ECMAScript 5.1は、略してES5と表記します。

そして、書店にあるJavascriptの入門書はES5に基づいて書かれていることが多いです。

イマドキのJavacript(ES6)

Javascriptの標準仕様なのですが、今までよりも大幅に進化したECMASCript 6th Editionが2015年に策定されました。ECMAScript 6th editionの6を取ってES6と呼ばれていましたが、2015年に標準化されたため正式名称はES2015になりました。

ES6(ES2015)では、以下のような機能が新たに追加されました。

  • let constキーワードによる変数宣言
  • class構文
  • 関数の引数のデフォルトパラメータ(Default Parameters)
  • アロー関数(Arrow Functions)
  • 分割代入(Destructing Assignment)
  • 配列展開(Array Spread)
  • 関数の可変長引数(Rest Parameters)
  • 関数のデフォルト引数
  • テンプレート文字列(Template Strings)
  • importとexportによるモジュール構文(Module)

簡単にまとめますと現在のjavascriptの標準規格としては

の2つが存在していることになります。

ES5とES6の違いは以下の記事などを参考にしてみてください。

qiita.com

そして、ReactではES6にそって、開発を進めていくことが推奨されています。

ES6をES5に変換するBabel

Reactは基本的にES6で開発を進めていくことになるのですが、ここでひとつ疑問が生じます。新しく策定されたES6は機能が追加されてコードが書きやすくなったのですが、ブラウザの対応状況はどうなっているのか?ということです。

2017年現在、主要なPC/MacのブラウザはES6に対応しています。一方、スマホ用のブラウザでは、ES6が限定的にしかサポートされていなかったりもします。

現在のインターネットの利用状況を考えると、スマホなどモバイル端末を無視することはできません。

ES6で書かれたJavascriptをES5に変換してしまうツールが登場します。これがBabelというツールです。1

ES6でかかれたReactのコードをES5に変換して、古いブラウザで使えるようにしようというのがイマドキのフロントエンドのお作法です。

まとめ

今回は、Reactを使う上で、理解しておきたいJavascriptの歴史を簡単にまとめました。重要なポイントは以下の点です。

  • JavaScriptの標準仕様はECMAScriptで定められている
  • ほんとどのブラウザが対応しているES5と2015年に新しく策定されたES6(ES2015)がある
  • ReactはES6で開発することが推奨されている
  • 現存するブラウザに対応するため、BabelをつかってES6で書いたコードをES5に変換する

次回もReactに関して学んだことをまとめていきたいと思います。

読者登録をお願いします

本ブログではプログラミングについての記事を公開しています。よろしければ読者登録していただけると更新の励みになります。ぜひ一緒にプログラミングを学びましょう。


  1. babel単体でも利用可能ですが、一般的にはwebpackというビルドツールと併用して使います。ほかにも、CSS、styleのローダーと組わせて使うことが多いからです。webpackについても今度まとめようと思います。

Reactを学ぶメリットとReactの開発環境を簡単に構築する方法

f:id:tadaken3:20180325115545p:plain こんにちは。
タダケン(@tadaken3)です。

今年はフロントエンドをきちんと学んで、個人開発でサービスをリリースしたいと考えてます。いろいろ調べてみて、その中でもReactの学習を進めたいなと感じました。

調べていく中で感じたReactのメリットとReactの開発環境構築についてをまとめます。1

tadaken3.hatenablog.jp

Reactとは

ReactはWebサイト上のUIパーツを構築するためのJavasciptのライブラリです。Facebook社が開発しておりで、Facebookを始め米国のいくつかの有名なWebサービスでも使われています。

Reactは「コンポーネント志向」という思想で設計されています。WEB画面は、ヘッダー、メニュー、商品一覧、ショッピングカートなどの様々なパーツに分かれて作らています。Reactではこららをパーツをひとつのコンポーネントとして扱います。様々なコンポーネントを組み合わせて、UIを構築します。

なぜ、Reactを学ぼうと思ったのか。 Reactを学ぶメリット

フロントエンド技術には、Reactの他にVueやAngularといったフレームワークやライブラリがあります。

Reactの特徴のひとつに「Learn Once, Write Anywhere」(一度学べば、どこでも書ける)という考えがあります。Reactには、プラットフォームをまたいでコードを活用できるエコシステムが存在しています。例えば、以下のような範囲でReactの知識を活かすことができそうだと感じました。

  • WEBフロントエンド: React
  • モバイルアプリ(iOS,Android): ReactNative
  • デスクトップアプリ(Mac,Windows): React + Electron
  • サーバーサイド: Node.js + React

学習の目標として、サービスをひとりで立ち上げたいなと思っています。個人で開発することを考えているため、学習や開発に使える時間が平日の仕事終わりや土日に限られています。

「Learn Once, Write Anywhere」の考えにより、Reactに加えて、Node.jsやelectronを学べば、javascriptでかなりの範囲をカバーすることができます。効率よく開発をすすめることが重要な個人開発において、非常に大きなメリットに感じました。

学習のための戦略

また、本業がデータアナリストであり、フロントエンドの業務経験は全くありません。自分のまわりに詳しい人がいるわけでもないので、基本独学で、Reactを習得していくことになります。

Reactはフロントエンドのライブラリとしては、比較的歴史があり、書籍やネット上の情報が充実している印象があります。このあたりもReactを学ぼうと思ったメリットです。

Reactを学習するための戦略としては、inkdropというメモアプリをひとりで開発しているTAKUYAさんのブログを参考にしました。

blog.odoruinu.net

上記のブログ記事を参考に

  • まず、入門書を写経して、基本を学ぶ
  • 基本が理解できたら、有名なプロダクトをForkして、開発のノウハウを盗む

という流れで学習を進めて行くつもりです。

Reactの開発環境を構築する

ということで早速、Reactの開発環境を構築していきます。

Node.jsのインストール

まずは、Reactの開発環境の土台作りです。Javacriptの処理系であるNode.jsをインストールします。Macを使用しているのでHomebrewを使っていインストールしました。

$ brew install node.js
$ node -v
v9.3.1

Javasriptのライブラリやツール類はnpmというパッケージ(ライブラリ)で配布・管理されています。npmパッケージのインストールはnpmコマンドで行います。npmコマンドはNode.jsと一緒にインストールされています。npmのバージョンを確認します。これで土台が整いました。

$ npm -v
v5.3.0

create-react-appを使って、Reactの開発環境を構築する

Reactの開発環境は、Facebook製ツール「create-react-app」を使うことにしました。コマンド一発でReactの開発環境を構築してくれるCLIツールです。参考にしたのは以下の記事です。

mae.chab.in

以下のコマンドでグローバルにcreate-react-appをインストールします。

$ npm install -g create-react-app


create-react-appがインストールできたら、create-react-appコマンドが使えるようになります。

create-react-appコマンドの後にこれから作成するプロジェクトのディレクトリ名を指定して、コマンドを実行します。

$ create-react-app my-first-app


create-react-appコマンドを実行すると、指定したディレクトリ名のディレクトリが作られ、その中に開発に必要なビルドツールや構文チェックツールがインストールされます。

作成されたプロジェクトのディレクトリに移動します。

$ cd my-first-app


以下のコマンドを実行してみます。

$ npm start

すると、サーバーが立ち上がります。 f:id:tadaken3:20180114010803p:plain

http://localhost:3000/にアクセスすると、以下のページが表示されます。

f:id:tadaken3:20180114010916p:plain

これでReactの開発環境が整いました。srcディレクトリ内のApp.jsを変更すると、ブラウザの画面が更新されます。さっそく、じゃんけんアプリを試しに動かしてみました。

f:id:tadaken3:20180114011638p:plain

まとめ

Reactを学ぶメリットとReactの開発環境についてまとめました。今後はReactの要素を学び、学習した内容をブログにアウトプットとしてきたいと思います。

読者登録をお願いします

本ブログではプログラミングについてボクが学んだことを公開しています。よろしければ読者登録していただけると更新の励みになります。ぜひ一緒にプログラミングを学びましょう。


  1. フロントエンドは全くの初心者なので、間違えなどありましたらご指摘いただけますと幸いです。

運動をつづけるために「運動報告部 for ぼっち」というLINE ボットを作ってみた

こんにちは。
タダケン(@tadaken3)です。

先日、運動を継続するために「運動報告部」というLINEグループを作った記事が話題になっていました。運動報告部をつくったことにより、運動が習慣化できたというお話です。

「運動報告部」というLINEグループを作ったら1年運動が続いた話

「運動報告部」の実践方法と効果について

「運動報告部」とは社会人になって運動をはじめる→挫折するを繰り返してきたライターの@HikaruYozaさんが編み出した方法です。ざっくり内容をまとめますと、

  • 仲の良い2〜3人で「運動報告部」というLINEグループを作成
  • そこで運動したことを報告する
  • 他の人は「えらい」と運動したことを褒める
  • 会話は基本「報告」と「えらい」に抑える

を実践し、一年間運動を継続できたということでした。

シンプルな運用ですが、とても効果的なようですね。また、運動以外にも応用が効きそうな点が素晴らしいなと感じます。

ただ、一点、問題があるとすると

「運動をする友だちがいないとできない」

ことです。そうです

ぼっちだと実践できないんです。

ボットを作って解決

「運動報告部がぼっちではできない」問題を解決するために、「運動報告部 for ぼっち」というLINEボットを作成しました。

使い方はとてもシンプルで

  • ジムに行ったら「ジム」
  • 走ったら「走った」

というように「報告」をするとボットが「えらい」と言ってくれます。1

f:id:tadaken3:20180107154830p:plain

「運動報告部 for ぼっち」をLINEで友だち登録する

友だち登録する方法は簡単です。以下のボタンを押すかQRコードを読み込んでいただくと、LINEアプリが立ち上がり、友だち登録できます。もしよかったら友だち登録して、試してみてください!

かがくの ちからって すげー!

こちらをクリックするか

友だち追加

QRコードで登録できます。
f:id:tadaken3:20180107152835p:plain

開発環境について

最初はGoogle App Engineでガッツリ作ろうかと思ったのですが、必要機能がとてもシンプルですし、あまり時間をかけたくなかったので、以下の記事を参考にGoogle Apps Scriptで作成しました。2

inside.pixiv.net

ざっくりとして手順はこのようになります。

  • LINE@のアカウントを開設
  • GASでWEBサーバーを作成
  • 返信機能を実装

実装自体は1時間程度でできましたが、どちらかというと、LINE@のアカウント設定に時間がかかりました。(アイコン画像やアカウント説明を書いたりなど)

Githubにコードをあげていますので、ご興味のある方はご覧いただければ!

github.com

ちなみにボク自身は以下の仕組みを利用して、運動を継続しています。よければこちらもご参考にしてみてください。

tadaken3.hatenablog.jp

おまけ

こんな風に励ましてもくれます。

f:id:tadaken3:20180107193351p:plain

読者登録をお願いします

本ブログではGoogle Apps Scriptに情報を公開しています。よろしければ読者登録していただけると更新の励みになります。ぜひ一緒にプログラミングを学びましょう。

詳解! GoogleAppsScript完全入門 ~GoogleApps & G Suiteの最新プログラミングガイド~

詳解! GoogleAppsScript完全入門 ~GoogleApps & G Suiteの最新プログラミングガイド~


  1. ネタで作ったところもありますので、不具合などございましたら、本ブログもしくはTwitterなどからお問い合わせいただけると幸いです。

  2. GASだとスケールできないので使ってくれる人が増えたらちゃんと考えます。

2018年は「実戦投入力を高める」を目標にする

f:id:tadaken3:20171231225349p:plain 2018年、あけましておめでとうございます。
タダケン(@tadaken3)です。

本年もブログ「Relax and Enjoy Programming」をよろしくお願い致します。

早起きして初日の出を見ました。 今週のお題「2018年の抱負」

2018年の抱負

2017の振り返り記事にちょろっと書いたのですが、「自分のプロダクト・サービスで生計を立てれるようなることが目標」です。

tadaken3.hatenablog.jp

幸いなことに今は恵まれた環境にいて、楽しく仕事させていただきています。ただ、ボクはゲーム業界に身をおいているのですが、ゲームは娯楽産業であり、当たれば大きいのですが、栄枯盛衰が激しく、いつ自分の置かれた環境が変わってもおかしくありません。

なので、自分自身のスキルを高めつつ、収益の柱をいくつか作っておきたいと考えています。これは転職を決めた時からずっと思っていることです。収益源がいくつかあれば、たとえ本業と同じ金額を稼げていなくても、いざという時の心理的なバッファーになります。

まだまだ抽象的ですが、起業して上場して一発当てるって感じではなく、ニッチな分野で価値提供できるようなサービスをコツコツ作りたいです。

実戦投入力を高める

サービスやプロダクトをリリースするには、「実戦投入力を高めていく」必要があるなとここ最近感じています。

昨年は本を読んで、サンプル動かして、終わりみたいなことがちょっと多かったので、今年は、ダサくても未熟でもどんどんリリースしていきたいです。

そう思ったのはid:a-knowさんの以下のブログ記事です。

blog.a-know.me

上記で紹介されている「Go言語によるWebアプリケーション開発」は自分も読んだのですが、読んで、動かして終わりになっていたので、上記の記事をみて、むちゃくちゃ反省しました。

同じ本を読んだのに、ここまでアウトプットできなかった自分が悔しいです。技術力に天と地ほど差がありますがそれを差し引いても、自分の中で全力でやれてなかったなと思いました。

または、「実戦投入力を高める」という言葉。これはid:kakku22さんの言葉なのですが、自分が感じてことをまさに言語化してくれていたと思い、拝借しました。

今年の目標は「実戦投入力を高める」です.実戦投入するからこそ深く知る必要があるし,絶対に困難もあるので,大きく成長できます.「実戦投入力」って言葉は凄く気に入っています.実戦投入力!
2015年の振り返りと2016年の抱負 - kakakakakku blog

@a-knowさんも、@kakakakakkuさんも実戦投入力を意識しているからこそ、今の技術力を身につけられたのではないでしょうか。

本業がエンジニアではないボクはスキル習得に使える時間も限られていますので、「実戦投入力」を強く意識して2018年は過ごしていくつもりです。

技術的には

  • React / Vue.js / Angularなどのフロントエンドをちゃんとやる
  • デザインの基礎を身につける
  • Sketchの使い方をマスターする

あたりを習得していきたいなと思っています。

読者登録をお願いします

本ブログではプログラミングについてボクが学んだことを公開しています。よろしければ読者登録していただけると更新の励みになります。ぜひ一緒にプログラミングを学びましょう。

Go言語によるWebアプリケーション開発

Go言語によるWebアプリケーション開発

2017年のタダケンを振り返る

f:id:tadaken3:20171230130425p:plain

こんにちは!
タダケン(@tadaken3)です。

2017年も残すところあと2日ですね。ボクはというと28日に仕事納めをし、これから大掃除をして、実家に帰る予定です。

年の終わりということもあり、2017年のタダケンがどうだったのかということを振り返ってみました。

転職して一年がたちました。

転職自体は2016年にしたんですが、入社日が11月15日だったこともあり、本格的に仕事をし始めたのは2017年からになります。

転職する前は正直、不安でいっぱいだったんですが、今は転職してほんとに良かったなと思っています。待遇も上がったし、裁量労働制になったので、出勤時間なども自由になったので、仕事のストレスがだいぶ減りました。このあたりは会社のマネージャさんがすごい良い人でよかったなってのも大きいです。

仕事方面では、データアナリスト兼リサーチャーということで、ゲームのログ分析をしたり、ユーザーリサーチ、市場調査なんかをやっています。仕事内容的には前職でやってきた経験や知識がそのまま活きています。

SQLを書いてデータベースからデータ取ってきて、PythonやR、エクセルで統計処理や可視化してレポートにまとめるという仕事をしています。

基本的な仕事の内容は前職とそう変わってないのですが、前職から変わったこととして、DBに入ってないようなデータも自分で取ってくることが増えました。外部のAPIからデータを取得したり、スクレイピングしてデータを取ってきています。

前職ではインフラ周りはほとんど携わってなかったのですが、最近は自由に使えるサーバーをもらったので、そこでRedashでいい感じにダッシュボードで作っています。チームのアナリストの方なども活用してくれていて嬉しい限りです。

Redashはほんと最近使い始めたばかりなのでもっともっといじり倒していきたいなと思っています。

副業を始めました

本業とは別に「いつも隣にITのお仕事」を運営するプランノーツという会社でシステム開発やブログ執筆の仕事をさせていただいています。

具体的な副業の内容については以前以下の記事にまとめました。

tadaken3.hatenablog.jp

僕の本業はアナリストであり、普段からちょっとしたコードを書いたり、社内向けのツールとか使ったりする経験はあるのですが、実際にお客さんがいるシステムの開発の経験はありませんでした。

コードを書くのはすごく好きなので、キャリアとしてはそちらの方向に進んでいきたいなと思う反面、すでにアラサーなので、未経験のままジョブチェンジするのは、色々思うところがあったところに、ちょうどプランノーツのパートナー募集のツイートを見つけて応募しました。

転職したばかりで、時間的にどれだけ貢献できるのか、本当にやっていけるのかなど、不安はあったのですが、応募して正解でした。というのも自分の中で今後のキャリアに活かせそうな様々なことを学べたからです。

プランノーツでは代表のタカハシさんの元で

  • ブログ執筆のイロハ
  • フリーランスとしての仕事の受け方(契約や受発注、見積り業務)
  • Google Apps Scriptを使っての開発業務

などを学ぶことができました。

「いつも隣にITのお仕事」のブランド力もあってこそですが、結構大きい会社さんからもシステム開発の受注があったりして、副業で確定申告が必要になるくらいは、お金をいただくことができました。

副業だったり、受託だったりするので安定的な収入ではありませんが、本業とは別にある程度まとまったお金を稼ぐことができたのは、自分としては大きな経験です。

自分が勤めている会社からの給料以外に収入があると、会社への依存度を下げることができ、いざという時にすぐに転職したりできる(と思える)ので、自分の中で自信になりました。

「会社に頼らずに生きていく術を身につける」ことを自分のテーマにしていたので、2017年はその一歩を踏み出すことができました。

ブログを本格的にスタートしました

「いつも隣にITのお仕事」であるブログ執筆のノウハウを学んだこともあり、自身のブログも作って見たいと思って6月頃からこのブログを本格的にはじめました。1

今年執筆した記事は34記事で、週1回のペースを維持するようにしています。「いつも隣にITのお仕事」に寄稿した記事は25記事だったので、このブログと合計して、59記事、執筆しました。

以下の記事ははてブもある程度してもらえて、カテゴリ別のホットエントリに入ったのがうれしかったです。ホットエントリに入ったのはじめてだったので、最初はアクセス解析ツールを仕事中もチラチラ見ていました笑

tadaken3.hatenablog.jp

tadaken3.hatenablog.jp

tadaken3.hatenablog.jp

はてブ狙いで書いているわけではないのですが、こんな形でみなさんにみていだけるのは、やっぱりうれしいです。

自分のブログでは、結構思いついたことや自分で試してみたことを興味の赴くままに書いているところもあるので、来年は一定のテーマを持って執筆をしたいなと思いつつも、あまり自分でハードルを上げすぎて、ブログ投稿を負担に思ってしまうようでもあれなので、そのあたりはバランスを見つつアウトプットを続けていこうと思っています。

とりあえず、現時点での読者登録数が76人なので、来年は100人を突破するのが目標です!いつもブログを御覧頂いている読者の皆様には、感謝しています。本当にありがとうございます。

講演・LTにはじめてチャレンジしてみました

ブログ記事やTwitterをきっかけに講演やLTをさせていだく機会がありました。

tadaken3.hatenablog.jp

tadaken3.hatenablog.jp

まだまだ技術的には未熟なこともあり、ネタ的な内容ばかりになるのですが、人前で話すことに苦手意識があったのを克服するチャンスとなりました。

また、京都から東京に引っ越してきた理由のひとつとして「勉強会やコミュニティ活動に参加したい」という思いがあったのですが、まさかこんな形になるとは想像もしてませんでした。

講演やLTをやってみて思ったのですが、ただ参加するよりも、講演・LTをするほうが圧倒的に楽しいです。他の登壇者の方や参加者の方と深くつながることができますし、「人にわかってもらおう」と意識することで、自分の中であやふやだった知識を再確認したりもできました。

また、本業で社内向けのSQL講座なんかをやってたりしたのですが、講演、LTでの経験を活かしています。

今年を振り返ってみて

2017年は、転職をきっかけに、副業やブログ、講演・LTなどを開始することができ、自分の中で、様々な「新しい一歩を踏み出す」ことができた一年だったと思います。せっかく蒔いたタネなので、ゆっくり、じっくりと育てていきたいと考えています。

また、今年できなかったこととして「自分のプロダクト・サービスをリリースする・育てる」ということがあります。CLIツールやGASのライブラリは公開はしたものの、作ってほったらかしにしてしまったので、そのあたりは改善して行ければなと思っています。一応、ほったらかしにしているものを自戒をこめて晒しておきます。

tadaken3.hatenablog.jp

tadaken3.hatenablog.jp

将来的には「自分のプロダクト・サービスで生計を立てる」ということ考えています。なので来年は「まず人に使ってもらえるプロダクト・サービスを作り上げる」を目標にして、活動していく予定です。

上記のように思ったきっかけが「週休7日で働きたい」のTAKUYAさんです。TAKUYAさんはInkdropというMarkdownエディタを開発し、その収益で生活しようと、奮闘されています。TAKUYAさんみたいな生き方がかっこいいなと憧れつつ、自分なりのやり方を模索しているところです。

学ばなければいけないこともたくさんありますが、千里の道もよちよちあるきの一歩からだと思っているので、コツコツ頑張っていきたいます!

それでは2018年もよろしくお願い致します!

読者登録をお願いします

本ブログではプログラミングについてボクが学んだことを公開しています。よろしければ読者登録していただけると更新の励みになります。ぜひ一緒にプログラミングを学びましょう。


  1. このブログ自体は2014年に開設したのですが、ブログの書き方がわからず、ずっと放置していました。

「詳解!Google Apps Script完全入門」を読めばプログラミングを習得できるのか?

f:id:tadaken3:20180325125201p:plain こんにちは!
タダケン(@tadaken3)です。

先日、「ノンプログラマーのためのスキルアップ研究会」を主催されているタカハシさん(@ntakahashi0505)から、「詳解!Google Apps Script完全入門」を献本いただきました。この場を借りてお礼を言わせていだきます。

さて、今回は書籍の内容とGAS本を使ってのおすすめの勉強法をご紹介します。

「詳解!Google Apps Script完全入門」をうまく使えば、プログラミング未経験の方でも、Google Apps Scriptを習得できるのではないかと思います。

Google Apps Scriptとは

まず、「Google Apps Scriptって何?」って方もいらっしゃる方と思いますので、簡単に説明いたします。

Google Apps Script (略称GAS)は、Googleが提供するサーバーサイドのスクリプト言語です。GASを使えば、スプレッドシートやGmail、Googleカレンダーをプログラムで操作することができます。めちゃくちゃ大雑把に言いますと、エクセルのVBA・マクロのようなものです。

例えば、

  • Googleフォームで作ったお問い合わせフォームに自動返信機能を作る
  • スプレッドシートの内容をGoogleカレンダーに一気に登録する
  • 特定の条件に合致したGmailのデータをスプレッドシートに保存して分析する

といったことができます。

GASはVBAよりもできることがむちゃくちゃ多いので、業務の効率化・自動化などにかなり役立ちます。

また、Googleのクラウドサーバー上で実行されるため、自分のPCの電源が入っていなくとも、任意タイミングで実行することもできます。例えば、特定の時間になったら、サーバ上でスクリプトを実行するといったこともできます。

サラッと書いていますが、ちゃんとやろうと思うとサーバーなどを用意したりしないといけないので、けっこう大変だったりします。

待ちに待ったGAS本の発売

そんな便利なGASなのですが、マイナー言語のため日本語の書籍はほとんど存在せず、基本的には公式ドキュメントもしくはネット上の記事を参考にするしかありませんでした。

著者のタカハシさんは「いつも隣にITのお仕事」というブログを運営されています。日夜、「IT×働き方改革」をミッションに掲げ、ITを使って仕事を効率化するためノウハウを公開しています。その中でGASの記事も公開されておりました。

ボク自身はタカハシさんが運営するブログ「いつも隣にITのお仕事」のブログ記事を参考にしながら、四苦八苦してGASを習得しました。

ある程度のプログラミング経験があれば、公式ドキュメントやWEB上の記事からGASを理解することはできるかもしれませんが、プログラミング初心者の場合はさらに大変だと思います。

そこでこの本です。

「詳解!Google Apps Script完全入門」には

  • GASのベースとなっているJavascriptの基本文法
  • クラウドサーバーで実行する上のルールや癖
  • スプレッドシートや、Gmailなどの各サービスを取り扱う上でのポイント

などがまとまっており、この本を読めば、GASの基本的な要素は、網羅できる内容になっております。

ほんとにGASを習得した時の苦労は何だったのか。もっと早く出してくれればよかったのに!と思う内容です。

「詳解!Google Apps Script完全入門」を使ったおすすめの勉強法

「詳解!Google Apps Script完全入門」はとても素晴らしい本なのですが、ひとつ書いてないことがあります。

それは

「何を作れば良いのか」

ということです。

プログラミングを勉強したことがある方はわかるかと思うのですが、基礎的な文法などを理解したあと、悩みどころがあります。

「基本はわかった!ではこのあと、何を作ったらいいのか?」

こういったことに悩んで、プログラミングを挫折してしまうケースが多いように感じますし、自分も昔そうでした。

でも安心してください!著者のタカハシさんが運営する「いつも隣にITのお仕事」には沢山のレシピが公開されています。

こういったレシピを参考に、自分が作りたいものを作りながら、わからないところや自分なりに改良したい部分を本を参考して学習してくのが効率的です。

動くものが作れると学習のモチベーションにつながります。小さいスクリプトでも試しに作ってみると色々と改良したいところが出てきます。

そこで本を読みながら、自分なり改良してみます。最初はちょっとしたものしか作れないかもしれませんが、コツコツ続けていくと、ちょっと大きめのシステムが作れるようなっていきます。

ボクはこのように学習を進めながら、プログラミングを習得してきました。

「詳解!Google Apps Script完全入門」と「いつも隣にITのお仕事」はこうしたプログラミング学習の最初の一歩を踏み出すにはとても最適なコンテンツだと思います。

とくに年末年始はまとまった時間が取れると思いますので、プログラミングを習得するには最適です。ぜひ年末年始は「詳解!Google Apps Script完全入門」を読んで、GASの勉強をしてみてはいかがでしょうか。

詳解! GoogleAppsScript完全入門 ~GoogleApps & G Suiteの最新プログラミングガイド~

詳解! GoogleAppsScript完全入門 ~GoogleApps & G Suiteの最新プログラミングガイド~

読者登録をお願いします!

本ブログでは、Google Apps Scriptやプログラミングに関する記事を公開しています。(ときどき、それ以外のことも)読者登録してもらうと更新の励みになります。ぜひ一緒にプログラミングを学びましょう。