About


自己紹介

en30と名乗っている事が多いです。Diver Down LLC.でウンコード書いてます。

もっと美しいものを作れるようになりたい。

やってきたこと

ウェブサービス研究会で二人で色々作ってきた。基本的にもう一人がサービスのアイデアを考えページの構成を考え、僕がそれに色々突っ込みをいれたり仕様を論理的に整理したり議論しながら実装したりして開発している。ウェブサービス研究会で作ったサービス一覧はあるが、僕自身の考えは書いていないので僕自身の考えやどんな技術的な課題を持って取り組んだかを一部のサービスについて書く。

Swindler

Head First Javaを読んで試しに書いてみたGUIアプリ。どうやって設計していいのかまるでわからずスパゲッティ。

サークル名鑑

CSSとPHPとMySQLをググりながら学んで、はじめて書いたWebアプリ。セキュリティ周りを勉強。フレームワークという概念すら知らなかったのですべてベタ書き。公開するということにものすごい恐怖を感じたが公開しても全く使われないということを学んだ。

オオギリジョー

どうやらRailsというものが良いらしいという話を聞いてRubyを学んでRuby on Rails 3 アプリケーションプログラミングを読んで試しに書いてみた初めてのRailsアプリ。Herokuで公開。はじめてのTwitterアカウントでの認証。

Apps Now

iTunesストアやGoogle Playで各国のアプリのランキング情報を収集して表示するアプリ。初めてのスクレイピング。なかなか行儀の悪いアプリだった。

ソーメン

PHPにも、RailsにインスパイアされたCakePHPというフレームワークがあるということを知り使ってみた。Twitter APIを利用。はじめてのAjax。

大事なことなので二回言いました

Twitter APIを利用して作ったジョークサイト。それまでのものに比べて結構使われて、使って楽しんでくれている人達を眺めるのが楽しかった。初めて利益がでたサービス。ものすごい少額とはいえ自分たちの力で稼いで(ほぼGoogleのおかげ)今まで味わったことのない達成感があった。

今日のスタンド

友人の思いつきからやっつけで作った割に、今までのアプリとは桁違いにバズったアプリ。多くの人に使われる喜びを知った。

即興小説トレーニング

それまでのものに比べるとサービスとしてはかなりよくまとまっていると思う。RailsやCakePHPを使ってみて学んだアプリケーションの構造化手法をすこし真似してオレオレフレームワークで書いたアプリ。なぜフレームワークがそのような構成になっているのかというのをよく理解せずに真似していたため結構酷かった。技術的負債。

細かすぎて伝わらない占い

はじめてのVPS。今までのレンタルサーバとは自由度が全く違い、自由さに恐怖と喜びを覚えた。Linuxサーバの扱い方、Chefを学んだり学ぶことが多かった。

はたらけミュージック

JavaScriptパターンを読んで学んだことを試したくて作った小さなSPA。SoundCloud APIを利用。非同期処理の書き方を理解していなくて妙な書き方をしていた。使っていたAPIが非公開になったので寄生サービスらしく終了。

アプリ☆メーカー

Twitterネタアプリのために同じようなプログラムを書かなくても済むように。そしてプログラミングが出来ない人でも多くの人に作われる喜びを知れるように。
これを書いている2014年11月はおおよそ月間1600万PV程度で最も使われているアプリ。そのためインフラやアプリケーションの最適化周りでかなり勉強になっている。インフラ周りは特に苦しんでいて、話をしたら全方位から椅子が飛んできて木っ端微塵にされそうな運用をしている。初めての複数台構成、redis、fluentd、ganglia、pgpool。

ペーパートーク

WebRTCを使ってみたくて作ったほぼWebRTCの簡易デモ的なSPA。とはいえWebRTCの部分はPeerJSを使っただけ。Observer パターンで少しだけ構造化する方法を学んだ。WebRTCってすごくワクワクするしアイデア次第ですごく面白いものを作れそうだけれど、実現されているものが同じなら、どんな技術を使っているかなんて利用者にとってはどうでもよいのだなというのを実感した。

書き出し.me

RailsのApplication Templateを利用した作成の効率化。初めてのメール配信。

Chrome Appでニコ生コメントビューア

Vue.jsと戯れる題材にちょうど良さそうだったので。gulpやbower, browserify等のフロントエンド周りのツールを触ってみるためでもあった。jQuery脳からデータバインディング脳に変わっていくのが快感だった。Promiseの気持ちよさを知った。ウェブアプリと違って状態があるということを意識する必要があって新鮮だった。ただpushしていない変更が結構ある状態でPCが壊れて作るモチベーションが無くなって非公開。最近全くニコ生を見ないので必要が無かった。現在の自分にとって価値のある問題じゃないと一人で作りきるのは難しいということも学んだ。

ブクマダイバー

Vue.jsを利用したSingle Page Application。クライアント側での状態の管理の苦しさを知った。今思えばFluxやReduxのような何らかの解決策を自分で模索するチャンスだったがなぁなぁにしてしまった。

アプリ☆メーカーの改善

サーバ台数増減用のAPIとconsulを組み合わせた簡単なオートスケーリングシステム構築等など。

アプリ☆メーカーのリニューアル

サーバ側はactive_model_serializersを利用してJSON API形式でデータを返し、クライアント側はReact + Redux。

技術的な面に関しては正直言って大失敗だった。
青写真では、HTMLを作るのは基本的にクライアント側で行い、History APIを利用しクライアントサイドルーティング。APIのエンドポイントは細かく分けて、ページ遷移した際には、まだ持っていない必要な情報のみをAPIリクエストする。通信はMultiplexingやヘッダ圧縮があるHTTP2で行う、という形だった。
Google Adsenseの規約の上ではHistory APIでの遷移時の更新がグレーなために、pushState等を使うのはあきらめなければならなかった(ある程度実装してから気づいた…)。このため共通部分でも読み込みごとにAPIリクエストをしていてSPAである意味が全くないものになった。
新しい技術を使ってみる対象としては大きすぎた。ブクマダイバーで状態管理に苦しんだことを考えるとReduxはかなり良いものに思えたが、Reduxを使った上で実際の実装をどうするかが手探りで無駄に時間がかかった上にメンテナンスコストがかなり高いものを作ってしまった。別にインタラクティブ性の高いサービスでもないので、増える手数に見合うメリットがほとんどなかった。
HTTP2を実装しているWebサーバでHTTP2を使う場合httpsにするのが前提になっている。しかしhttpsにすると、Adsenseではない広告は出稿数が少ない影響で収益が大きく減ることがわかり、こちらも利用を諦めざるを得なかった。
😇

Diver Down LLC.公式サイト

ほぼ内容がないが無駄にReactを使ったSPAになっている。static-site-generator-webpack-pluginを使ってサーバサイドレンダリングしたものを置いてる。

アニメーションにはPaper.jsを使っている。APIはシンプルで良いのだけれど、どこでどんな副作用が起きてるのかがわかりにくい作りで凝ったものを作るのには向いていないかもしれない。

今主にやっていること

これからやりたいこと