astamuse Lab

astamuse Labとは、アスタミューゼのエンジニアとデザイナーのブログです。アスタミューゼの事業・サービスを支えている知識と舞台裏の今を発信しています。

Pythonでコレスポンデンス分析をやってみた

ご挨拶

はじめまして。
このブログで初登場となります、エンジニアのaranです。
今年の1月よりアスタミューゼにジョインしました。
どうぞよろしくお願いします。

ここ4ヶ月間ぐらい、水素水にハマっていましたが
水素水生成機のフィルタ交換作業にちょっとだけ疲れ
次なる健康食品を探しています。
体にいい健康食品などありましたら、是非教えて下さい。

それでは、はじめさせて頂きます

前書き

先月、お世話になっている方とお会いした際に
アンケートから顧客の好みを視覚化できないかなぁ?
って悩んでいたので
コレスポンデンス分析ならできるかもって安易に答えたら
「じゃ、よろしくね!」って言われ、知らぬ間にやることに。。
言ったことをほんの少しだけ後悔しつつも
対応した内容を今回のブログにまとめました。

コレスポンデンス分析とは

細かな定義はwikiや各書籍にお任せするとして
クロス集計結果を散布図で視覚化すると分析手法と解釈しています。

大学院時代の恩師には

評価対象な質問の選択肢の関係をわかりやすく可視化し
アンケートから顧客の好みを分析する際に使える

と教えて頂きました。
間違えって覚えていたら、ごめんなさい

ここで、ちょっと話が脱線しますが、
コレスポンデンス分析って検索すると対応分析もヒットするので
何が違うの?と思って調べたところ同義語として使われているみたいですね。

今回の実行環境

コレスポンデンス分析は、Windows7 on R言語で試したことはあったのですが
今回はMacBook Pro on Python 3.6で挑戦したいと思います。
因みに.. Pythonは hello worldを書いた程度の初学者です。

では、早速はじめたいと思います。

下準備

コレスポンデンス分析を行うために、
mcaライブラリーを利用します github.com

このライブラリーはチュートリアル用データも用意されているので
大変・大変便利です!
ありがとうございまーす

まずは、新品のファミコンカセットに息を吹きかける儀式のごとく
mcaライブラリーをインストールしまーす

pip install --user mca

その他 matplotlibpandasライブラリーも併せてインストールします

pip install matplotlib
pip install pandas

データ準備

下準備が終わりましたので
次に分析対象のデータを用意します。

実際にはデータクレンジング等を行いますが
今回は、この部分は割愛させていただき
チュートリアルのデータをそのまま利用します。
https://github.com/esafak/mca/blob/master/data/burgundies.csv

実装

分析できるデータがそろいました。
それでは、コーディングに入りたいと(ドキドキ)

https://github.com/esafak/mca/blob/master/docs/usage.rst ここのチュートリアルは、サンプルコードも丁寧に書いてありますので
いろいろ試すことができます。

Pythonのお作法に四苦八苦しつつ
チュートリアルにそって、書いたコードをがこちらです

#! /usr/bin/env python
# -*- coding:utf-8 -*-

import mca
import matplotlib.pyplot as plot
import pandas as pd

cross = pd.read_table('data/burgundies.csv', sep=',', skiprows=1, index_col=0, header=0)

mca_counts = mca.MCA(cross)
rows = mca_counts.fs_r(N=2)
cols = mca_counts.fs_c(N=2)

plot.scatter(rows[:,0], rows[:,1], c='b',marker='o')
labels = cross.index
for label,x,y in zip(labels,rows[:,0],rows[:,1]):
    plot.annotate(label,xy = (x, y))

plot.scatter(cols[:,0], cols[:,1], c='r',marker='x')
labels = cross.columns
for label,x,y in zip(labels,cols[:,0],cols[:,1]):
    plot.annotate(label,xy = (x, y))

plot.show()

サンプルデータを実行するとこんな感じになります。

f:id:astamuse:20190612002433p:plain
実行結果

巨人に肩を乗っかると、ちょっとコード書くだけで
コレスポンデンス分析ができちゃいました。

R言語とは違い
Pythonでのコレスポンデンス分析は
情報量が少なく感じるので敬遠しがちかもしれません。

でも、チュートリアル読めば、Python初心者の私でも使えますので
皆さまも是非利用して、データ分析ライフをエンジョイして下さい。

お願い

最後になりましたが、アスタミューゼでは現在、エンジニア・デザイナーを絶賛募集中です!
興味のある方はぜひ下記バナーからご応募ください!!


参考にしたURL
http://vxy10.github.io/2016/06/10/intro-MCA/
https://qiita.com/nabesaan/items/f88bbacdd4f9217cd802

flyway + gitlab-ciで最新のテーブル定義を用いてdaoのテストをする

こんにちは、アプリケーションエンジニアのchotaroです。

最近RTA動画を見ることにハマっています。
最速ルートとリスクのどちらをとるのか?それはなぜなのか?また本番でしくじったときいかにその場でロスを少なくできるか?
特にイベントのアーカイブが解説ありで見応え満点です。是非。

さて今回は、チーム内で作ったCIのしかけについての紹介です。

解決する課題

  • そもそもテーブルの変更履歴を管理していないとその差分も追えず開発の負荷が高くなってしまう
  • daoとテーブル定義の差異をステージング環境で統合する前に確認したい

最終的な形(現状版)

  • テーブル定義の変更をflywayで管理する
  • flywayの設定とともにddlをgitで管理する
  • gitlab-ci上で,flywayを用いてDBを構築し、そこに向けてdaoの自動テストを行うようにする

実践

概要図

こんな形式(厳密ではないですが。)

f:id:astamuse:20190607095603p:plain

.gitlab-ci でやっていること

postgresql install

ubuntu向けのinstall

    - echo "deb http://apt.postgresql.org/pub/repos/apt/ stretch-pgdg main" >> /etc/apt/sources.list.d/pgdg.list
    - wget --quiet -O - https://www.postgresql.org/media/keys/ACCC4CF8.asc | apt-key add -
    - apt-get --quiet update --yes
    - apt-get --quiet install postgresql-10 sudo --yes
    - service postgresql start

set deploy key ~ git clone

ddlはgitlab上のinternalなrepositoryに配置しています。そのため、git cloneするにはdeploy keyを利用する必要があります*1

【事前準備】 * ddlを格納しているリポジトリにdeploykeyを設定する * deploykeyのペアになる秘密鍵をdao側のリポジトリに配置

【test時】 * sshの設定を行うscriptを実行。target-gitlab-hostにはgitlabのホストを入れて、そのホストのときにはこの鍵を使う、という設定を行います

    - mkdir -p ~/.ssh && chmod 700 ~/.ssh
    - ssh-keyscan -H <target-gitlab-host> >> ~/.ssh/known_hosts
    - chmod 400 deploykey
    - eval $(ssh-agent -s)
    - ssh-add deploykey
  • git clone target-repository でcloneする

flyway install

linuxの向けのflywayコマンドをインストールします

    - apt-get --quiet install tar wget sudo --yes
    - wget -qO- https://repo1.maven.org/maven2/org/flywaydb/flyway-commandline/5.2.4/flyway-commandline-5.2.4-linux-x64.tar.gz | tar xvz && ln -s `pwd`/flyway-5.2.4/flyway /usr/local/bin
    - flyway -h

完了後、flyway migrate でDBセットアップが完了します

あとはテストするだけ!

sbt test

効果

課題感が解消されたので、個人的にめっちゃ気が楽です。

gitlab-ciはpushされるたびにpipeline上で実行されるので、failしたらすぐわかります。
逆にいえば、successし続けられればデータベースアクセス上は問題ないことになるので、大変安心して進められています。

謝辞

ここで紹介した仕組みは私一人で考えることができたものではなく、チームメンバーでの改善の結果こうすることができた、というものです。
この場を借りて感謝申し上げます。いつもお世話になっております。これからもガンガンお世話になります。よろしくお願いいたします。

また、そもそもpostgresqlのイメージを使ったりすればいくらかciのymlファイル自体はスマートになるはず*2で、いわゆるベストプラクティスではない、とも考えています。

これからも走りながら地道にやっていくしかないとこではありますが、並走者も随時募集中ですので、気になられた方がおられればバナーからよろしくお願いいたしますー

それでは。

*1:refs: https://docs.gitlab.com/ee/ssh/#deploy-keys

*2:runner含めた設定が必要になってしまうので検証が足りておらず、仕掛けとして作れていません。

Nuxt.jsのライフサイクル覚書

デザイン部でフロントエンドエンジニアをしているkitoです。React.jsとVue.jsの登場で、JS界隈は一時期の混沌とした時代から落ち着いてきましたが、今や両者それぞれのエコシステムが豊かになるフェーズに移行しています。jQueryがデファクトスタンダードになり、盛んにプラグインが開発されていた頃を彷彿とさせます。
Vue.jsのエコシステムのなかでもNuxt.jsは、完成度の高さからVue.jsのサーバーサイドレンダリングのフレームワークとして広く利用されようとしています。

今回は、そんなNuxt.jsを実際のサービスで使うさいに欠かせないライフサイクルの知識について書きたいと思います。といっても、私自身、最近までNuxt.jsのライフサイクルついて十分に理解していたかというと、心もとないところがありました。公式サイトのライフサイクルダイアグラムをみてわかったようなわからないような気になっていたのです。

そのひとつの原因としては、Nxut.jsは、Vue.jsのサーバーサイドレンダリング用のラッパーのようなものなので、それぞれのライフサイクルを頭に入れ「どこからこどまでがサーバーサイドのライフサイクルなのか?」「どこからがクライアントサイドなのか?」を把握しなければならないからでしょう。
今回、曖昧だった疑問を整理し、Vue.jsとNuxt.jsをひとつにつなげたライフサイクルとして図を作成しました。

Nuxt.jsとVue.jsのライフサイクル

早速ですが、下記がライフサイクルの図になります。

f:id:astamuse:20190529112056p:plain

nuxtServerInit

nuxtServerInitは、Nuxt.jsのライフサイクルの最初にくるメソッドで、サーバーサイドから直接データをstoreにセットしたいときなどに使います。ログイン認証でセッションIDをstoreに保存したいときはこのメソッドで行います。まだブラウザのwindowオブジェクトにアクセスできないので、localStorageにデータを直接保存することはできません。

middleware

次に、nuxt.config.jsに記述されているmoduleやmiddleware、pluginが呼び出されます。もし、severMiddlewareとしてexpress.jsを使っている場合もここで呼ばれます。 図では省略していますが、クライアントサイドでnuxt-linkをクリックして遷移したときは、ここまで戻って実行されます。

validate

validateは、動的ルーティングしているcomponentsのパラメータをバリデーションします。

asyncData or fetch

asyncDataでは、外部APIからのデータをサーバーサイドレンダリングしたい場合は、ここでaxiosなどを使って取得します。 fetchは、asyncDataとよく似ています。異なるのはfetchは、値をstoreにセットできますがcomponentsに値をセットできない点です。

render

renderでcomponentsがレンダリングされるわけですが、ここはサーバーサイドとクライアントサイドの境界にあり、beforeCreateやcreatedは両方から利用できるメソッドになっています。

クライアントサイド

これから下はクライアントサイドのみの領域になり、Vue.jsのみのライフサイクルに入っていきます。beforeMonuntはVueインスタンスがマウントされる前に呼ばれ、mountedはマウント直後に呼ばれます。DOMにアクセスしたいならここで。

ライフサイクルの重要性

ライフサイクルへの意識が特に必要になるのは、ログイン機能をつけるときでしょう。ユーザー認証のためにtokenを一定期間保持しなければなりませんが、asynDataではまだブラウザのcookieやlocalStrageにはアクセスできません。最初のリクエスト時、nuxtServerInitでtokenをStoreにセットしておくことが必要になるでしょう。 また、DOMを直接触ろうとするなら、クライアントサイドのライフサイクルに入ってからでないと不可能です。

まとめ

Nuxt.jsなら、モダンなフロンエンド開発に欠かせない設定が隠蔽されているので、容易にサーバーサイドレンダリングされたWebアプリが作成できます。 しかし、ログイン機能のような少し複雑な機能を追加しようとすると、途端にライフサイクルやVuexの状態管理の知識が必要になります。 今後、Nuxt.jsが選択されることが増えていくと思われます。Nuxt.jsへの技術的投資は、さらに重要になっていくのではないでしょうか。

アスタミューゼでは、エンジニア・デザイナーを募集中です。ご興味のある方は遠慮なく採用サイトからご応募ください。お待ちしています。

Copyright © astamuse company, ltd. all rights reserved.