あざらし備忘録。

渋谷ではたらく音ゲー大好きウェッブエンジニアがいろいろ思った事やった事を書いていくブログです

2016年ふりかえり

今年は何をやったかな?というのを書いてみる。

マイチュウニズムネットリリース

チュウニズマーのチュウニズマーによるチュウニズマーのための(ry

ちょうど一年前の今頃に、正月休みで帰省しているときにガッと作った記憶。

今では10000人ほどのユーザさんが使っていてくれていて嬉しい限りです。作ってよかった!

これのおかげで僕だいぶレーティング伸ばせたしめでたしめでたし。

Rails案件へ

部署内プロダクト異動みたいなものがあって、2015年10月頃からRailsを書き始めるようになり、2016年になってからはほとんどRails(or Ruby)書いてました。

もともと主に書いていたのはPHPフレームワークはSymfony2だったのでかなり流れが違うなぁと感じました。

フレームワーク的なところだとモデルに寄せやすいかサービスに寄せやすいかっていうのが一番違って感じたところかも?

まぁあとはやっぱりDSL的なところのRubyの強さ(よくわからないものが出来上がると弱さ)はすごいなぁと感じましたね。

去年の10月にこんな発表をババーンとしておいて、その直後からめっきりSymfony2を書かなくなってて疎くなって行ってたのは内緒w

shiro-goma.hatenablog.com

Pure Rubyなプロジェクトも

Pure Rubyなプロジェクトもサクサクっと進めたりもしました。

部署を横断して取り進めるものでなかなかこれまでとは勝手の違うタイプのプロジェクトで苦労もありましたが無事に進められてめでたしめでたし。

「ニュース記事を蓄積し、配信する」というような機能をもつ社内gemを開発して、API Gatewayを使ってシステム構築する、といったようなこともしてました。

techlog.voyagegroup.com

これ実質一人での実装だったのでなかなか寂しい思いをしましたが部署内のチームメンバーに支えられて良い感じに進められましたwありがたやありがたや

賞をいただくなど

2016年10月に開かれた全社総会で、ベストエンジニア賞なるものをいただきました。

正直こういった賞とかはまったく意識したことがなかったのでとてもびっくりしましたが、会社でやってきたことが評価されたというのはとても励みになりますね。

割と常に楽しんでやれるタイプなのでそうした安定感の中でコツコツお仕事出来たのが功を奏したのかなーと思います。

と同時にそういった雰囲気を作れている社内に圧倒的感謝?

これからも精進していきます。改めてありがとうございますmm

面接業

エンジニア業を初めて3年目、ありがたいことに社内グレードの昇格もさせていただき、面接業にも携わることが増えてきました。

人を見る目、じゃないですけどどんなことをやってきた人が良いかな、とかどんなことを考えている、大事にしている人と働きたいかな、というようなことを前よりもずっと考えることが多くなった気がします。

採用側に触れるっていうのはすごく見え方が違って学びが多いなーとしみじみ感じながら参加させてもらってました。来年も引き続き関わっていきたい!

DTM

大学の頃からずっとやりたいとは思っていながら出来ていなかった趣味のDTMにもだいぶ時間を割けた年だったかなと思います。

友人とも協力しつつ継続してやれて楽しかったです!

これは来年も引き続き時間作って進めていきたい。

お仕事ももちろん大事だけど、趣味の時間もそれと同じくらい大事。

忙しさに負けて一辺倒にならず上手く立ち回っていくぞ!

2017年に向けて

2016年はお仕事と新しい趣味は上手く進められたかなと思うけど趣味での開発、みたいなところは今ひとつ進められなかったかな〜と。

2017年はぼちぼち勉強会とかもまた参加したいし新しいものづくりもしていきたいのでそのあたりの時間も再び意識的に時間を増やしていきたいです!

意識的にやめていた毎日草生やし活動も2017年はもう一度再開してものづくりの習慣を作り直していこうかな〜。

2017年も頑張るぞい!

といって12/30からウイルス性腸炎とのことで寝たきり生活になっております...つらい...

まずは身体を元気にしてから、2017年も頑張るぞい...w

あなたにおすすめするWebSocketを用いた全く新しいOAuthのご紹介

この記事は、 Advent Calendar 2016 - VOYAGE GROUP techlog の16日目のエントリです!

みなさんこんにちは!

VOYAGE MARKETINGにてエンジニアをしている なかにしごう (@gomachan46) | Twitter です。

2014年より社内非公式サークルとして 音ゲー部 を立ち上げ、お昼休みは会議室のプロジェクターで音ゲー鑑賞、定時後はゲームセンターで練習と、現在もなお元気に活動しています。

さて、今回はタイトルの通り WebSocketを用いた全く新しいOAuth をご紹介したいと思います。

ご存知の方も多いとは思いますが、さらっと簡単に用語の説明をしていこうと思います。

WebSocket

WebSocket(ウェブソケット)は、コンピュータ・ネットワーク用の通信規格の1つである。インターネットの標準化団体であるW3CIETFがウェブサーバーとウェブブラウザとの間の通信のために規定を予定している双方向通信用の技術規格であり、APIW3Cが、WebSocket プロトコルIETFが策定に関与している。プロトコルの仕様は RFC 6455。TCP上で動く。

参考: WebSocket - Wikipedia

特性上、チャットなどのリアルタイム性を求められるようなケースに利用されたりしています。

ActionCable

Rails5系からの新機能で、 RailsWebSocket をつなぐために用意されたものです。

これを用いることで Railsの良さはそのままに、リアルタイム通信を簡単に扱えるようになりました。

github.com

OAuth

OAuth とは、 Otoge Authorization の略です。

Otogeとは

簡単にいうとリズムに合せて作成された譜面の通りにボタンを押して遊ぶゲームです。音ゲーです。

以前よりもだんだんと認知度が上がってきているように感じますね!

OAuth は、この音ゲーで対戦を行い、相手よりも高いスコアを出すことでログインすることが出来るという全く新しい認証方式です!!*1

今回はこの OAuth を、 ActionCable を用いて実装してみました!

デモ

早速ですが百聞は一見に如かずということでデモをどうぞ!(動画埋め込みだと小さいかもしれないです)

OAuth を用いたログインの流れを、とくとご覧ください。

f:id:shiro_goma:20161216001120g:plain

上から落ちてくるログインボタンを...

f:id:shiro_goma:20161216001054g:plain

タイミングよくクリック!頼む〜!ログインさせてくれ〜???

f:id:shiro_goma:20161216001408p:plain

勝者には真のログインボタンが与えられ、ここからログインすることができます。

使っている技術

重複もありますがざっと触った技術も書いておきますmm

全て触ったことのない技術でなんじゃこりゃ、という感じのまま気づけばブログ投稿2日前を迎えましたがなんとか動かすところまで出来てよかったですw

コードは闇を抱えていますがこちら GitHub - gomachan46/action-cable-oauth: OAuth

WebSocket

以下のような情報を WebSocket を用いてpushしあっています。

  • 対戦相手のjoin情報
  • プレイ開始情報
  • 各プレイヤーのコンボ情報
  • 各プレイヤーのスコア情報
  • プレイ終了時の勝敗

Rails5

Rails5 系で ActionCable を用いています。

enchant.js

enchantjs.com

もうしばらく更新が止まっていそうですがとりあえず雑にゲームっぽいのが動きゃいいんだよ!ということで突っ込んでいます。

Rails 上に突っ込むのが必要だったので以下の記事やスライドあたりを主に参考にしました。

qiita.com

speakerdeck.com

音ゲー

音ゲーを雑にでも実装する必要があったので、以下の記事を参考にしながら実装しました。

blog.bokuweb.me

参考記事の皆さん、大変助かりましたmmありがとうございましたmm

スピード感、リアルタイム感

意外と(?)割と普通に音ゲー出来たなと言う感じでした!

動画の音声も2ウィンドウで同時に再生されているわけなのですが、ほぼズレを感じることなく聞こえているのではないかと思います?

処理する物量が増えたときなどどうなってくるかは要確認ですが、ちゃんと作ったらそれなりに面白いものが出来る可能性を感じるなどしましたw

おわりに

いかがでしたでしょうか?

これが未来の認証方式、 OAuth です。

みなさんも WebSocketを用いた全く新しいOAuth をぜひサービスに盛り込んで最高のログイン体験を!!

明日の更新もお楽しみに〜?

関連

VOYAGE GROUP エンジニアブログ : あなたにおすすめするたった一つの最高のキーボード

shiro-goma.hatenablog.com

*1:これが言いたかっただけ。色々ツッコミどころはあるけどこまけぇこたぁいいんだよ!!←

どこかで埋めたフラッシュメッセージを特定のページに来たときに通知してあげる方法

f:id:shiro_goma:20161211150948p:plain

東京理科大学 Advent Calendar 2016 - Qiita の12日目のエントリです!

理科大野田キャンパスのOBです!

運河!なんもねーよな!神楽坂羨ましい!

今はVOYAGE GROUPというところでエンジニアやってます:) OB訪問的なのしたいみたいな理科大生さんいたらぜひぜひ!(番宣)

voyagegroup.com

さて、今回は、Rails小ネタみたいなのを書こうかなと思います。

どこかで埋めたフラッシュメッセージを特定のページに来たときに通知する

んーなるほどわからん感がありますね。

例えば、ログインボーナスのような機能を実装するとして、要件が

  • ログイン状態のユーザがどこかのページに訪れたらログインボーナスの条件を満たしたことにしたい
  • 訪れたページで通知するのではなく、TOPページへ行ったときに大々的に通知したい
  • 通知は一度だけにしたい
  • ログインボーナスの条件を満たした直後にTOPページに行ったときだけ通知するのではなく、関係ないページを回遊した後でも

という感じだったときに使えるtipsです!

やり方は色々と考えられますが、今回はおそらく一番手軽で簡単なRails標準のflashを利用した実装方法をご紹介します!

flash

flash - リファレンス - - Railsドキュメント

説明的にはこのあたりを見ていただければと思います。

flashのキーは noticealert だけではなく、任意の物を使うことができます。(中身はただのhashです)

実装

簡単3stepです。

  • 通知するところで普通にflashから情報を取り出し表示する
  • 条件を満たしたところで普通にflashに情報を入れる
  • flash内の情報を適宜保持して引き回す←ポイント

通知するところで普通にflashから情報を取り出し表示する

トップページのview(erb)
<p>top</p>
<% if flash[:login_bonus] %>
    <p><%= flash[:login_bonus]%> controllerでログインボーナス獲得したよ</p>
<% end %>

普通ですね! flash[:login_bonus] があればそれを出します。

条件を満たしたところで普通にflashに情報を入れる

class HogeController < ApplicationController
  def index
    flash[:login_bonus] = "hoge"
  end
end

普通ですね! flash[:login_bonus] に情報を入れてます。

これはリダイレクトしたいなーみたいなときでも同様で大丈夫です。

def index
  flash[:login_bonus] = "piyo"
  redirect_to fuga_path # リダイレクトでも
end

flash内の情報を適宜保持して引き回す←ポイント

今回のキモですね。

class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception
  after_action :keep_flash_login_bonus

  # flashメッセージを各actionでは引き回して保持し続ける
  def keep_flash_login_bonus
    return if controller_name == 'top' # 例えばtop_controllerでは出したいから引き回さないとか
    flash.keep(:login_bonus) if flash[:login_bonus]
  end
end

flash.keep() の使い方がポイントで、 通知したいところでは情報を引き回さないので次のリクエスト時にはflashが削除され、それ以外では情報を引き回して次のリクエスト時にもflashが引き続き使えるようにする みたいなことをやっています。

この方法を用いているため、先程の 条件を満たしたところで普通にflashに情報を入れる 部分での flash[:login_bonus]flash.now[:login_bonus] でもどちらでも大丈夫です。

今回は簡単のためapplication_controllerに書いていますが必要に応じてmethod切り出しやmodule切り出しは行ったほうが見通しが良いですね。

実装としてはこれだけで良い感じに情報を引き回してくれます。

デモ

こんな感じです :)

f:id:shiro_goma:20161211144802g:plain

実装サンプル

今回用に作成したサンプルは以下から確認できます :)

github.com

おわりに

いかがでしたでしょうか?

ちょっとしたflashの活用法でした。ちょっとした一工夫でさらっと実装出来てなかなか良かったです :)

明日は stupid_student2 - Qiita さんが AtomでJavaの開発環境を整える エントリを出してくれるようです!

楽しみですね!Atomユーザもまだ使ってない人も必見!:)

HHKBをMac上に載せて快適に使うたった一つの簡単な方法[ネタ]

MacHHKBを乗っけて開発したいですよね。

えっしたくない?アーアーキコエナーイ

ただ普通に乗っけちゃうとMac側のキーボードが反応して大量の謎の文字が打たれてしまったり、運が悪いと電源ボタンを押されて強制終了とかされたり。つらい。

どうにか上手く快適に出来ないかなーと思ってググッてはみました。

jigsaw.hatenablog.jp

あーわかるわかる。良さそう。でもアクリルなんてないし注文するの面倒くさいな...

detail.chiebukuro.yahoo.co.jp

あーわかるわかる。良さそう。でも質問者と同じ感じで無効にするのはな〜って感じなんだよね...

そこで思いついてしまったのがこちら!!!!最高!!!

いやー本当いろはす最高ですよ。もう手放せません。(別にキャップはなんでも良い)

いろはすはいいぞ。

AmazonWebServices実践入門を読み進めている[AWS][GitBook]

発売当初買って、しばらく家に鎮座していた AmazonWebServices実践入門 を最近読みはじめた。

www.amazon.co.jp

業務であまりAWSを一からガッツリ触れておらず、このままだとAWSを微妙に使えるけどよくわかってない、みたいなよろしくない状態になってしまうなぁと危機感を覚えていて、良い機会なので読みながら実際に色々試してみている。

今後はHerokuで動いているサービスをAWSに載せ替える、とかやって遊びたいなぁなどと。

AmazonWebServices実践入門は、実際にマネジメントコンソールから色々と試しつつ、適宜解説を入れてくれる感じでなかなか読んでいて楽しい構成になっているのでオススメかもしれない :)

また、少し前に書いたエントリーでGitBookを使えるようになったので、今回の本を読んで得た知識はGitBookを通じてアウトプットするようにしてみた。

gomachan46.gitbooks.io

(以前書いたエントリーはこちら)

shiro-goma.hatenablog.com

やっぱりすごく書き味が良いのですぐ良い感じにHTML化できるしそのまま公開もできるので楽ちんで素晴らしいです。

今後主にはちょっとまとまったアウトプットはGitBookで書いて、それの告知みたいな形でブログを書く、みたいなスタンスになりそう。

まだEC2周りまでしか読めてないので、引き続き試しつつ一通り使えるようになりたいな〜

markdown文書をhtmlなどに変換して公開・共有できるGitBookを試してみた[Git][Markdown][GitBook]

f:id:shiro_goma:20160314033908p:plain

感想。めっちゃよかった。

実際に一通り使ってみた情報をまとめてGitBookで公開までしてみたので、詳細は以下のURLからどうぞ。

gomachan46.gitbooks.io

概要についてはgitbook.com側のページからでも見れて、htmlの他pdfでのDLとかも出来て便利!

www.gitbook.com

今回の情報をまとめたリポジトリは以下。

github.com

所感

ちょっとGitBookの良さを活かして階層化とか無駄にして書いたので内容の割に長文化しましたが、とても簡単に、そして良い感じに文書の公開までを行うことが出来ました:)

使い方もはじめに要点だけ抑えてしまえばほぼ難しいことはないので、学習コストもほとんどかからない良いツールだと思います。

gitbook.comGitBookコマンドが良い感じに分離されているのも素敵ですね。

これから文書をちょっとまとめて書きたい時とかは使っていこうと思います!

React+Reduxでreact-dropzoneを用いてファイルアップロードを行うサンプルを作ってみた[JavaScript][ES6]

今回はフロント側だけでファイルアップロードのサンプルを作ってみた。

あとはサーバーにファイルの情報を送れば良いだけなのでいつも通りな方向に持っていけそう。

遊んでみたリポジトリはこちら。

github.com

ファイルアップロード用のライブラリとしてはreact-dropzoneを使ってみた。

github.com

パッと検索した限りだとこのライブラリと、あともう一つ名前のよく似たreact-dropzone-componentが目についたけど、今回はreact-dropzoneの方を選択。

github.com

理由はシンプルそうだったから。

後者の方はリッチな感じに仕上がっていたけどその分外部ライブラリに依存していたり、導入がちょっと面倒そう&メンテとか考えた時にうーんという感じになったので見送り。

実際今回使った方は1ファイルでできてる程度にはシンプルだったので中身はだいぶ見やすかった。

まぁまぁスムーズに行けそうな感じがつかめたので、趣味プロダクトにちょっと突っ込んでみて見ようかなーと思う。

以下、READMEの転載。

react-redux-file-upload-example

React+Redux環境に react-dropzone を入れてみてフロント側のファイルアップロードをして遊んでみるテスト

react-dropzone

https://github.com/okonet/react-dropzone

install

npm install --save react-dropzone

usage

import Dropzone from 'react-dropzone'

// ...

<Dropzone
  onDrop={func}
  onDropAccepted={func}
  onDropRejected={func}
  accept="image/gif,image/jpeg,image/png,image/jpg" >
    <div>
      ファイルを指定またはドラッグ&ドロップ
      <p>形式: gif/png/jpeg/jpg</p>
    </div>
</Dropzone>

ファイル選択後に実行するコールバックに関してはonDropプロパティで指定できる。

ファイル形式の制限もacceptプロパティを使ってカンマ区切りで行える。

ファイル形式の制限に選択したファイルが全て則っていた場合はonDropAcceptedプロパティにて指定されたコールバックを実行し、則っていないファイルが一つでもあった場合にはonDropRejectedプロパティにて指定されたコールバックが実行される。

今回は指定してないが以下のような設定も可能

  • 複数ファイルの選択を許可するか(multiple: デフォルトtrue)
  • ウィンドウをクリックした時にアップロードファイルを選択する画面を表示するかどうか(disableClick: デフォルトfalse)
  • プレビューを表示するかどうか(disablePreview: デフォルトfalse)

デザインに関しても外から好きに渡せるので、カスタマイズしてあげれば良さそう

  • style 基本のstyle
  • activeStyle acceptedな時のstyle
  • rejectStyle rejectedな時のstyle

の三種類のstyleを渡せるようになっている。

styleを基本として、accepted/rejectedなstyleがマージされて適用されるイメージ。

本体のソースもとても小さいものなので一通り見ると良さそう

https://github.com/okonet/react-dropzone/blob/master/src/index.js

所感

一通りいじってみたけど特段苦労はしなかった感じ。

あとは今回はサーバーと繋いで実際にファイルのやり取りを行うところまでいけてないのでそのあたりで躓かなければスムーズっぽい。

サーバーとのやり取りのところも公式のREADMEにSuperAgentを用いたサンプルが出ているので割と楽には出来そうな感じはある。