KazumaLab.

流行りとリラックマと嵐が大好きです。

リモートでもローカルでもペアプロが行えるサービス"Pepro(β版)"をリリースしました

こんにちは。 かずまです。

saku氏とともにコツコツ作っていた、ペアプログラミングが行えるサービスをリリースしました。 それがPeproです。

www.pepro.me

まだまだスタートして間もないサービスですが、 ぜひとも使ってみてください。 * なお、若干つながりが悪いかもしれません。そういう場合はプログラムをCommand + Sで保存して、お互い再読込してみてください。

ペアプロとは

ペアプログラミングの略で、基本的に2人体制でプログラミングを行う開発手法です。 実際にやったことありますが、結構いいです。

  • めんどくさいところも絶対に進む
  • 詰まっているところが明確になる
  • その場でレビューもしてもらえる
  • お互いの開発のいい癖を盗める

デメリットとしては

  • 片方の作業が止まる
  • 1人じゃできない

が挙げられると思いますが、これら以外ではあまりデメリットはないイメージです。

Pepro

Peproの主な機能としてはペアプログラミングで大事な

  • 声に出すこと
  • 指差しすること
  • 一つのコードを一緒にみること

これらの機能を備えています。

声に出すこと

同じルームに入ると基本的に音声通話が始まります そこで話をしながら進められます。

指差しすること

今、ここのコードのことを言ってるんだよ!という確認や指示のときに使います。 基本的には画面をクリックしたところにポインターが当たるようになっています。

一つのコードを一緒に見る

Pepro を開くとエディタが一つだけあります。 片方がプログラムを書き始めると相手側の画面にもプログラムが同期されます。 (本来は同じ画面ですが...)

これでペアプログラミングを行うことができます。

おまけ

ペアプログラミングは喋って、頭を使って、プログラムを書きます。 その為、疲れてしまうのではないでしょうか?

Peproのルームを作る際にウェイティングページを準備しておりますので、その間にコーヒー等を一杯お持ちくださいませ。 準備ができ次第、ルームに入りましょう!

運営

Pepro開発ブログ

サービスURL

https://www.pepro.me

私にペアプロして!という感じの意味合い...!!

RailsでCSRFを無効にせずにAjaxからRESTなAPIを叩く

かずまです。

ここ最近Railsでサービスを作っている時にJavascriptをよく使います。 そのときにうーんこれはどうすれば良いのだろうと思ったので自分用にメモします。 初歩的なお話です。今回CSRFについては長くなりそうなので省略します。

始まり

  • 同じリソース内に定義したRESTのAPIJavascriptから叩きたい
  • RailsCSRF対策がされているので、AjaxでPOSTなどは400(InvalidAuthenticityToken)で弾かれる
  • RailsのController側でCSRFを無効に出来るが、あまり使いたくない

今回はこんな感じの流れだったと思います。

対策方法

今日たまたまAjaxを使った部分があって、 気になっていたので調べてみました。

blog.willnet.in

あら。すぐにありました。 Willnetさんのブログ。いつもお世話になっている...!! しかも、9年前だった...。

= hidden_field_tag "authenticity_token", form_authenticity_token

これであとはJS側でgetElementByIdとかjQueryとかでとってきてdataの中に組み込んであげれば良いのでめっちゃ便利。

Rails5になって...

techracho.bpsinc.jp

Formごとにトークンを発行できる仕様にできるみたい。 これで攻撃被害をすこしでもすくなくできるっぽいですね。

せっかくなのでみんなのウェディングアドベントカレンダーのみんなが書いたセンテンスを使ってみたい件

こんにちは、@kazumalabです。クリスマス、どうお過ごしでしょうか? この記事は2017年みんなのウェディングアドベントカレンダーの25日目(最後)の記事です。 25日間、皆さん完走お疲れ様でした!新卒一年目で、皆さんを煽って、アドカレやろうぜ、と言い出して、こんなに毎日続けることができたのは非常に嬉しいです!

昨日は、rinさんのプログラミングを始めるきっかけはもっと簡単でいいと思ったイブの日でした!確かに、僕もRuby on Railsを始めるときに本を買って、わーわからない...ってなったのを思いだしました。確かにRailsGirlsでハードルが下がるのはいいですね!

今回のテーマ

今日はせっかくみんながバラエティに飛んだ、記事を書いてくれたので、それを使って遊んじゃおうという企画です。 ちなみに、環境のセットアップから実装部分までを当日(25日)に行っていますので、間に合わない可能性がございますが、頑張ります。

テーマは「みんなのウェディングのアドカレをとりあえずWord2Vecにかけてみたい」です。

ゴール

Word2Vecで単語を入力して、似たような単語が取れればOKです。 例えば、結婚式とか結婚を入力して、関連したものが取れればいいですね。

環境構築

今回の流れとして、

  • アドカレの記事を全部取ってくる
  • advent calenderをMeCabで単語に分割してデータを作成
  • Word2Vecで学習させる 
  • 単語を入力して似たベクトルの単語がかえってくるか確認してみる

THE・入門のような感じがしますが、古典的な方法でやってみたいと思います。

word2Vecとは?

word2vecはニューラルネットワークオープンソース化されている実装で、単語をベクトルに変換するために作られたものです。作者の主張によると意味的に関連が強い単語はベクトルが近くなるそうです。「王様から男を引いて女を足したものはなにか?」の問に対してのベクトルは女王に近くなると言った例が示されています。

セットアップ

まずはデータを準備します。 ここからすべてにアクセスして、内容をとっときます。こういった場合、スクレイピングがいいのですが、結構グレーゾーンなので、自力ですべてコピペします。(mwedのblogはスクレイピングしました、すみません...) 今回少しデータ量として足りないので、みんなのウェディングエンジニアリングブログの過去記事も少し入れておきます。

MeCabに入れる

word2vecに入れるためには単語に分割したほうがいいようです。 このタスクをわかち書きといい、そのためのツールがMeCabというわけです。 MeCabの導入は今回は省きます。

先程はblog.txtというファイルを作成しました。 まずはデータをRubyで整形します。 スペースは不要なのでgsub等で置換します。

データの整形ができたところでMeCabに入れてみます。

import MeCab

tagger = MeCab.Tagger('-Owakati')
f = file('blog_wakati.txt', 'w')
lines = open("blog.txt").readlines()
for line in lines:
    f.write(tagger.parse(line))
f.close()

これによってblog_wakati.txtという名前で以下のようなデータが出来上がりました。

みんな の ウェディング アドベントカレンダー の 3 日 目 です ! 今回 は サービス を 成長 さ せる ため に デザイナー が どんな 働き 方 を し て いる の か を ご 紹介 さ せ て いただき ます 。 実際 に みんな の ウェディング が 始め た 「 LINE 相談 」 サービス を 広げる ため に 、 私 が 取り組ん だ こと の 一部 を お話 し ます 。 みんな の ウェディング に は 相談 デスク という 、 式
場 探し の 相談 が できる ブライダル カウンター が あり ます 。 プロ の ウェディング アド
バイザー が 、 結婚式 にまつわる お 悩み に 答え て くれ ます 。 もともと 店舗 へ の 来店 以外 に も 、 電話 や メール で 相談 に 乗っ て い まし た が 、 より 気軽 に 相談 し やすい よう に LINE という 窓口 を 追加 し まし た 。 すべて 無料 で 相談 できる
...

このような感じなのですが、みんなのウェディングという単語が残念になっていたので、ここで辞書を使ってみます。 辞書はmecab-ipadic-NEologdを使います。この辞書はmecab-ipadic-NEologdをインストール後、先程のPythonのコードにオプションを追加します。

tagger = MeCab.Tagger('-Owakati -d /usr/local/lib/mecab/dic/mecab-ipadic-neologd')

そうすることによって以下のようになります。 この記事はここですね!

みんなのウェディング アドベントカレンダー の 3日目 です ! 今回 は サービス を 成長 さ せる ため に デザイナー がどんな 働き 方 を し て いる の か を ご 紹介 さ せ て いただき ます 。 実際 に みんなのウェディング が 始め た 「 LINE 相談 」 サービス を 広げる ため に 、 私 が 取り組ん だ こと
 の 一部 を お話 し ます 。 みんなのウェディング に は 相談 デスク という 、 式場 探し の
相談 が できる ブライダル カウンター が あり ます 。 プロ の ウェディング アドバイザー が
、 結婚式 にまつわる お 悩み に 答え て くれ ます 。 もともと 店舗 へ の 来店 以外 に も
、 電話 や メール で 相談 に 乗っ て い まし た が 、 より 気軽 に 相談 し やすい よう に
LINE という 窓口 を 追加 し まし た 。 すべて 無料 で 相談
...

これによってみんなのウェディングという単語を認識してくれました。 これで一応、word2vecに入れる準備が整いました。

word2vecに入れてみる

今回word2vecに入れるためにPythonのライブラリgensimを使おうとしたのですが、文字コードの問題で、うまくいかなかったので、以下の方法で試しました。

$ curl -o word2vec.zip https://storage.googleapis.com/google-code-archive-source/v2/code.google.com/word2vec/source-archive.zip
$ unzip word2vec.zip
$ cd word2vec/trunk
$ make

makeの際にMacだと#include <malloc.h>がなくすでにstdlib.hで定義されているのでその行を削除しておきます。 demo-word.shの中で使っているtext8を先程作ったblog_wakati.txtに変更します。outputも変更します。

time ./word2vec -train ../blog_wakati.txt -output blog_vectors.bin -cbow 1 -size 200 -window 8 -negative 25 -hs 0 -sample 1e-4 -threads 20 -binary 1 -iter 15
./distance blog_vectors.bin

結果

結婚と入力したところギリギなところで夫婦と出てくれました。この記事から来ているのでしょう。

Word: 結婚  Position in vocabulary: 1032
Word       Cosine distance
------------------------------------------------------------------------
捉える           0.968204
結合度           0.796046
低い             0.760592
事象             0.756297
高い             0.749045
できよ            0.734944
持つ              0.720752
オブジェクト指向    0.674030
課題              0.654933
夫婦              0.643763

結婚式だとまた変わって、チャペルとか関連してそうな話題が出てきますね!

Word: 結婚式  Position in vocabulary: 844
Word       Cosine distance
------------------------------------------------------------------------
事業             0.631399
悩み             0.588279
業務委託          0.578773
チャペル          0.577366
楽               0.566613
いただく          0.564815
領域             0.557947
いえ             0.551238
お               0.549162
エンジニアリング   0.549011

思ったよりも関連データが取れた感じがします。(お ってなんだよって感じですが。) 他にもテストと入力すると失敗、落ちる、再など関連してそうな単語がでてきましたが、少し、テキスト量も少ないため、似た単語が出てくる部分は結構残念感があります。 今回は学習させるという部分には全く触れていませんが、詳細に関してはOReillyが出している、word2vecによる自然言語処理に書かれていて、今回はここを参考にさせてもらいました。

コーパスの部分をみんなのウェディングアドベントカレンダーに置き換えたという感じです。 雰囲気から検索してアドカレのブログをサジェスチョンしてもらおうとおもったのですが、そこまで間に合いませんでした。

最後に

2017年のアドベントカレンダーはこれで最後になります。最後まで見ていただきありがとうございました! ぜひ2018年もお楽しみに!&みんなのウェディングをよろしくお願いします!


みんなのウェディングでは、サービス開発や、ユーザーファーストを追求したいエンジニアを募集しています。19卒もエントリースタートしました!興味のある方は、Wantedlyからご連絡ください。または @kazumalab に直接連絡ください!

www.wantedly.com

www.wantedly.com

Wedding × VRのサービスと今後について語る

かずまです。

この記事はOculusAdventCalender16日目の記事です。 前回はblkcatmanさんのVR転職して開発の仕方が変わったこと(脱オレオレ開発)でした!

今日はWeddingとVRについて今年を振り返って行こうと思います! 技術的な話ではないです、はい。

このお話は個人的なお話なので、 所属している団体とは関係ありません!

2017年に出たWeddingのVRサービス

HugWedding

遠隔で結婚式に参列できるサービスですね。 ペッパーに取り付けたカメラにより、より現場にいる感覚になれるようです。 やってみたい!

二次元の美少女と結婚できるVRサービスです。

こちらは上とは対象にイケメンと結婚できるサービスです。 TGSで展示されていたみたいです。

  • 360度の動画で残すサービス

昨年はすぐ婚VRとかゼクシィの海外VRの映像やパノラマ写真でしたが、今年はいろんなVRコンテンツが出てきたように思えます。

今後どうなるのか?

ウェディング業界での課題はたくさんあると思います。

  • 海外ウェディングでの情報不足
  • ドレス着るのに一着30分以上と人が必要
  • いろんな種類があって、いっぱい式場は見たいけど、時間がない!

Hololensや、VRによって、少しでも解決できるのではないかと思っています。 技術によって、解決できることが増えるのはいいですね。

やりたかったこと

今回技術的な部分もやろうと思ったのですが、間に合わなかったです。ごめんなさい! 式場を3Dキャプチャして、ARとか、VRで見れるようにしよう!とおもったのですが、撮影が間に合わなかったです。 グリグリ3Dモデルを動かせるようにしたい!!

www.autodesk.com iPhoneのカメラを使って、簡単に撮影をして、3Dモデルに落としこめるといいなと思っていましたが。

でき次第、ブログ追記します!

明日のアドカレは!!

ゆーとIPD62mm@VRファイルマネージャー (@yutoVR) | Twitter さんのVRでのインテグレーションのお話です! 楽しみ!

⛪️チャペルをASCII Artで表示してみたい

mwedアドベントカレンダー1日目の記事です。今年からみんなのウェディングでもアドベントカレンダーを始めました! 初日、初年ですので、少し肩を温めるネタ、やりたいけどやれてなかったことをテーマでいきたいと思います。

チャペル

みんなのウェディングは結婚式の口コミサイトを運営しているサービスです。 そこで、結婚式といえば、、、とりあえずチャペルでしょ!

ということでターミナル上にShellにログインするたびにASCIIArtでチャペルを表示していきます。

ASCII Art

Search · ascii art · GitHub

githubでAsciiArtと検索すると結構な数が引っかかります。 結構人力だった。笑

下ごしらえ

# .zshrc
export MYZSH=$HOME/.zsh

function loadlib() {
  lib=$1
  [[ -f $lib ]] && . $lib || echo "Could not load $lib"
}

function _main() {
  for zsh in $MYZSH/*.zsh; do
    loadlib $zsh
  done
}

_main

まずは起動時にzshrcが読まれたときに実行するスクリプトを記述します。

github.com ここを参考どころか、そのまま使わせてもらいました。

これであとは.zshディレクトリ配下にShell ScrpitをおいてあげればOKです。

はじめの一歩

文字を出力する

とりあえず読み込まれたらHelloWorldの文字を出す。

$ vim .zsh/sample.zsh
echo "HelloWorld"

f:id:kazumalab:20171130231823p:plain

いい感じですね。 しかし色がなくて寂しいですね。

色を変更する

調べて見たところ

\e[31mなどで色を変更できるらしいのでそれを使ってみます。 ちなみに今回はechoを使うのでそちらでも色を付けることができました。

echo "\e[31mHelloWorld"
echo "\e[32mHappyWedding"

f:id:kazumalab:20171130231725p:plain つけた場合こんな感じ。

チャペルを作る

f:id:kazumalab:20171201122142p:plain

ちょっとこれだと寂しいので色々中身をいじってみます。

やりたいこと

  • チャペルのASCIIART作成
  • 花火の色を読み込みごとに変更

これらをやるのにShellScriptを書きました。

ヒアドキュメントを使ってみる

chapel=`cat << Chapel
  (  \e[31mHappy Wedding!!\e[m )
   (_________    ___)                   \e[0;${col}m \ / \e[m
             \  /             _|_       \e[0;${col}m  *  \e[m
              \/               |        \e[0;${col}m / \ \e[m
                              / \       \e[37m  |  \e[m
                             /~~~\
                            /~[+]~\
                           /~~~~~~~\
                  \e[32m  $%&  \e[m /_________\
                  \e[32m #%$%$ \e[m |         |
                  \e[32m#$%&%$&\e[m |   ###   |
                  \e[32m &%&$& \e[m |   ###   |
          __________|_|___|___###___|_!-!_______
                          /          Minnna no Wedding AdventCalender!
Chapel`

こんな感じで、ヒアドキュメントをまずはcatで変数にぶっこんで、 それをあとでechoで表示させました。

GithubのShellScriptをみてみると意外とこの方法が多かったので採用しました。

で、せっかくなのでRubyも使ってみる

今回はヒアドキュメントを使って、ShellScript内にRubyのコードを展開して、 ランダムな値をArray Sampleを使って弾き出し、それを花火の色を毎回変更することにします。

terminalで使える色は以下を参考にしました。

stackoverflow.com

col=$(ruby << EOM
puts [31, 32, 33, 34, 35, 36, 37].sample
EOM
)

pickup random number from arrayはShellScriptで書けますが、Rubyを少し入れたかったのです。

リポジトリ

今回のリポジトリはこちらに作りました。

github.com

結果

今回はASCII ART初挑戦でした。 最終的にこのようになりました。

f:id:kazumalab:20171201141818g:plain

今後はもう少し頑張りたいですね。

明日12/2のmwedアドベントカレンダーまさくんRubyのI/Oクラスについて語ってくれるそうです! 楽しみですね!