nabeliwo note(旧)

5万人に1人になる。

やることリストからの進捗確認

進捗いかがですか?

以前書いたやることリストは以下。

  1. ポートフォリオサイト制作(フロントと管理側でアプリケーションをわけて、管理だけSPA)
  2. アメーバピグのクローンアプリ制作(React + ReduxとWebSocketとcanvasの勉強)
  3. なんかしらのSPA制作(Angular2の勉強)
  4. お絵描きアプリ制作(FRPの勉強)
  5. ペンタブを使ったお絵描き練習

進捗確認していこうと思います。

ポートフォリオサイト制作

ここに関しては終わりました。
結局、管理側をSPAで実装するって話はやめてgithub.ioで静的ページだけで作ることにしたのです。

nabeliwo.hatenablog.com

最優先項目がとりあえず終わってよかった。

アメーバピグのクローンアプリ制作

こいつに関しては、とりあえず一旦見せられる状態まではできた。正直1,2ヶ月でできるような規模感ではないんだけれど、一つのポイントにはたどり着いたって感じ。
とは言っても、ユーザー登録してチャット機能できて、人を黒丸としてcanvas上に表示するってだけだけれど。

AomidroPigg

とりあえず次やることとしては、現状までの部分の解説をするスライドの作成かなと。
これ使ってLTをやりたいのでそのための資料づくりって感じです。

ペンタブを使ったお絵描き練習

ちょっと飛ぶんだけれど、お絵描き練習に関しては全然できてない…。

ペンタブの練習。うつしがき

とりあえずずいぶん前だけれどピカチュウの写し描きをしてみた。
ペンタブは線を綺麗に描くってだけですごく難しい。まずは写し描きを通して基礎を学んでいかなきゃなって感じだ。ゆっくりでもこれは進めていきたいなあ。

残りやること

  1. アメーバピグのクローンアプリ現状の資料作り
  2. TodoアプリをVanillaJSで制作
  3. アメーバピグのクローンアプリ制作継続
  4. なんかしらのSPA制作(Angular2の勉強)
  5. お絵描きアプリ制作(FRPの勉強)
  6. ペンタブを使ったお絵描き練習継続

はい、さっきまでの話をふまえて変化しているんだけれど、しれっと2番にTodoアプリ制作が入ってます。
ちょっとTodoアプリをライブラリ頼らず自力で作る必要性が出てきたのでそいつを優先度高いタスクにしてます。
僕の実力が問われる制作になるので気合い入れていこうと思います。

まとめ

Angular2勉強用のSPAとかFRP勉強用のお絵描きアプリ制作とか、まだまったく手をつけられてないやつとかもあるので、ちょっと開発スピード早めてかないとまずいかもって感じでまとめとします
こちらからは以上です

ポートフォリオサイトを作りましてん

表題の通り、ポートフォリオを作ったんですよ。

見ておくれやす

f:id:nabeliwo:20160707024428p:plain

nabeliwo.me

注意事項

スマホのことをまだ何も考えておりませぬ。
とりあえずPCで見られれば良いかなということで。スマホの対応はしてないので表示崩れまくりです。
のちのち綺麗にしていこうと考えておりまする。

つくってみて

デザイン的な話をする。
音楽っぽさを出したくて、シーケンサーのかわいいボタンっぽいやつ置いてみたり、アンプのノブ回してレベルがピピピって上がったり、プレイヤーっぽい表示にして次のコンテンツ出してみたり、そこらへんを音楽っぽい見た目にしている。そんなつもり。

productsっていう項目がありまして、そこで僕が今まで個人的に作ってきたゲームを載せてるんだけれど、正直むかーーーしに作ったやつとかレベル低すぎて見せたら自分のマイナス評価につながりそうだなって思ったわけですがまあなんか懐かしさが凄まじくて、「ああー僕はここから始まったんだな」っていうノスタルジーに侵される感じが心地良かったので全部載せてみている。
そんなわけであまーーい目で見てほしいなとか思っている。

本日はただのご報告でした。以上。

やることリストとやらないことリスト

最近ちょっと優先順位がつけられていない。
楽しいことがありすぎてどこから手を付けていいのか自分でわかってない状態なのです。
というわけでリスト化してみる。

やることリスト

優先順位高いものから並べておく。
今日からとりあえず7月末くらいまでは可処分時間は全てこのリストのどれかしらにつぎ込む。

  1. ポートフォリオサイト制作(フロントと管理側でアプリケーションをわけて、管理だけSPA)
  2. アメーバピグのクローンアプリ制作(React + ReduxとWebSocketとcanvasの勉強)
  3. なんかしらのSPA制作(Angular2の勉強)
  4. お絵描きアプリ制作(FRPの勉強)
  5. ペンタブを使ったお絵描き練習

やらないことリスト

厳密には1日1時間までなら許可(甘いのはわかってる…。でも僕にはこの時間が必要なんだ!)

  • アニメ
  • ゲーム
  • 漫画

今日からこれを実践していくことにする。
万が一破ってしまった日は500円貯金をしよう。

そんなことを言っている間に

ドラクエ10を買ってしまいました。
僕は実はちゃんとしたMMOは初めてやります。小学生のとき父親のPCで風来のシレンのオンラインの変なやつをやっていた記憶があるけれどあれはMMOとは違うからやはり今回が初めて。 1日1時間という制約の中、冒険していこうと思う。

あとイカも。S+に到達しなければならないのだ僕は。

優先順位をしっかり決めてやるべきことを進めていくという当たり前のことを当たり前にこなせば良いだけのことのはず。

こちらからは以上です

JSON Web TokenとReduxとReactでのログイン認証と制御のお話

なかなか重たい技術記事を書いた

久しぶりにQiitaで記事を書いてみたのです。
それがこちら。

JSON Web Tokenを使ってReactとReduxのSPAでログイン認証をする

良かったら見てみてね。

経緯

最近作っているアメーバピグのクローンってやつがあって、サーバーサイドをNodeでクライアントサイドをReact + ReduxのSPAという構成で作っているんだけれど、SPAでしっかり認証を作ろうという気になったのが初めてだった。
今までやったのはSPAではなかったり、SPAだけど特に本気出してやらずに適当な感じの認証だったりした。

けれど今回はセキュリティーのこととか僕なりに考えたしベストプラクティスを目指した。つもり。
いろんな人に話聞いたりいろんなレポジトリ見たりして実装した。超頑張ったからどうせならということでgithubでexampleのレポジトリ立ててQiita記事書いた、という流れ。

頑張った。頑張ったからこそマサカリがほしい。
Qiitaで記事を書いていて、ストックはちょこちょこもらえているけれど未だにコメントをもらえたことがない。言及するほどのことではない記事しか書いていないということか。

まあそんなわけで何か言いたいことがあったらコメントしてくれたら嬉しい。

おわりに

今僕がやりたいことというか、やるべきことが本当にたくさんある。
一つ一つこなしていこうと毎日コードを書き書きしているわけだけれど、一つのことを終える前にそこから派生して新しいやりたいことが増えてって感じで無尽蔵になってしまっている。
優先順位をつけていくことが本当に難しいなあと思う。

明日はそこらへんしっかり考えてスケジュールたててみようかな。
「スケジュールを立てるからスケジュール遅れが発生するのだ。初めから予定など組まなければ予定に遅れるなどということはありえない。」がモットーの僕としては辛いけれど、今は優先順位付けとスケジュールの必要性に駆られている。

やってやるって!

そんなわけで。 こちらからは以上です

毎日モンスターを産み落とすことにしました

僕が将来的にやりたいこと

僕はOS Xしか持っていないです。Windows機がないのです。
だから多くのMMOができないのです。それはとても悲しいことなのです。

だから最近はWindows機を買おうとお金を貯めようと頑張ってる最中なわけですが、PCを買うってのはなかなか難しいことなのです。
だから僕は思いました。端末に依存しないMMOがあれば誰も不幸にならずに済むのに、と。

なので僕はいつかブラウザで動くMMOを作ってやろうと、そう心に決めてエンジニアをやっております。
人生をかけての目標だとかそんな大それた話ではなくて、webのエンジニアとして生きているこの人生の中で常にそのことを頭に置いておきたいなってだけです。だからそっち系の仕事をしたいわけではなくて、ゲーム開発にいこうとかは思ってないです。

ただただ業務以外の時間をそのための開発や勉強にあてたいというくらいのね。

やらねばならぬこと

MMOをつくるために僕が獲得しなければいけないスキルは山ほどあります。
一人でやらずにチームを作ってやれば僕が獲得する必要のある知識は減るわけですが、ただただ僕は全ての工程を自分でやってゆっくりでも想像力を働かして楽しい制作をしていきたいなあって、そんな風に思ってるのです。

だからとりあえず全部一人でできるようにやっていきたい。
なので、必要な知識として、

  • ブラウザ上でぬるぬる動くゲームを作るために必須なWebAssembly
  • ブラウザで3D表現をするためのWebGL
  • 大量のWebSocketのリクエストをさばくためのネットワーク・サーバー構築
  • ゲームのキャラクターやモンスターを描くためのキャラデザ
  • ゲームの設計

とかとかが今ぱっと思いつく。

仕事ではフロントエンドとしてばりばりやりつつも、趣味ではここらへんをやっていこうっってのが最近の僕です。

致命的な絵心

そして僕は何よりも絵が苦手です。
どれくらい苦手かというとこれくらい。

ここからどうやって成長していくかって考えて、とりあえず毎日絵を描いてみることにした。
僕は基本的に三日坊主なんで続かない可能性はあるけれど、続く限りは続けていきたいのです。描いたやつはアップしていこう。

そんな感じで。
こちらからは以上です

Reduxプロジェクトのテンプレートを作った話

はじめに

redux-sagaに対しての感動がすごい。
Reduxをやってたとき、これややこしいなあー特にActionCreatorで非同期処理やりだすとほんとだるいなーーって感じだったのがredux-sagaによって解消されました。

Reduxって最初はとっつきづらいけれど慣れてくると責務の分割がほんとしっかりしててとても良いなってなる。まあいまだに大規模な開発で使ったことがないからなんとも言えないんだけれど。
フロントエンドのFWについての話はいろんなところで出ているけれど、やっぱ思うのはそのFWを使うことで解決することができる問題とかを本当の意味でわかっていない状態で流行りに乗ってFWを使ってしまっていると結局ツールに使われるだけで消耗していく人間になるんだなあーっていう。

僕はエンジニアリングについてはもちろんフロントエンドという領域の理解がまだ全然できていないなということを実感する日々なのでとにかく今はコードを書きまくりつつ人のコードを読みまくるということをしていきたいと。
そんなわけで環境構築のだるさをなくすためにReduxでSPA作るときのテンプレートを用意したよって話です。

Qiitaに書いた

redux(Middleware: redux-saga)プロジェクトのテンプレートを作った

そして実際に作ったテンプレートはここ。

redux-saga-boilerplate

良かったら見てみてください。

まとめ

Qiitaでの活動をはじめて約5ヶ月。ようやくContributionが100を超えた。
まだまだ全然誰かが作ってくれた道を進むだけの人間だけれど少しずつこの業界にコントリビュートしていきたい。

あとはGithub活動もばりばりしていきたいですね。
自分の開発物をのせるだけではなくてOSSへのコントリビュートを…。

とりあえずReactとかReduxの内部の動き追えるようにはなりたいなー。
読もう。ソースコードを読もう。

おわりです

Node.jsとWebSocketでチャットを実装するときの話

モチベーション


なんかこうMMO的なゲームをブラウザで作りたいなあなんていう気持ちがありまして。
そんなわけでWebGLのお勉強とかもしてるんですよ最近。そして同時にグラフィック的な部分以外の要素もしっかりやっていこうという思いがあるわけです。
ということで今アメーバピグのクローン的なものを作ってるわけです。

その名もアオミドロピグ。名前を言うのは恥ずかしい。
リポジトリはここです。

AomidroPigg

今チャットを実装しているのですが、実装に関して若干迷うなあーって部分があってそこがある程度自分の中でまとまってきたのでここに書いとこうということで今回の記事になります。

環境


package.jsonのdependenciesはこんな感じです。
全然関係ないのも混ざってますけど察してください。

"dependencies": {
  "body-parser": "~1.13.2",
  "config": "^1.20.1",
  "connect-flash": "^0.1.1",
  "cookie-parser": "~1.3.5",
  "crypto": "0.0.3",
  "debug": "~2.2.0",
  "ect": "^0.5.9",
  "events": "^1.1.0",
  "express": "~4.13.1",
  "express-session": "^1.13.0",
  "jsonwebtoken": "^6.2.0",
  "moment": "^2.13.0",
  "morgan": "~1.6.1",
  "mysql": "^2.10.2",
  "passport": "^0.3.2",
  "passport-local": "^1.0.0",
  "react": "^15.0.2",
  "react-dom": "^15.0.2",
  "serve-favicon": "~2.3.0",
  "socket.io": "^1.4.6",
  "socket.io-client": "^1.4.6",
  "socketio-jwt": "^4.3.4"
},
"devDependencies": {
  "babel-cli": "^6.8.0",
  "babel-eslint": "^6.0.4",
  "babel-plugin-syntax-async-functions": "^6.8.0",
  "babel-plugin-transform-regenerator": "^6.8.0",
  "babel-polyfill": "^6.8.0",
  "babel-preset-es2015": "^6.6.0",
  "babel-preset-react": "^6.5.0",
  "babelify": "^7.3.0",
  "browserify": "^13.0.1",
  "cssnano": "^3.5.2",
  "eslint": "^2.9.0",
  "eslint-config-airbnb": "^9.0.1",
  "eslint-plugin-import": "^1.7.0",
  "eslint-plugin-jsx-a11y": "^1.2.0",
  "eslint-plugin-react": "^5.1.1",
  "postcss-cli": "^2.5.2",
  "postcss-import": "^8.1.2",
  "postcss-nested": "^1.0.0",
  "postcss-simple-vars": "^1.2.0",
  "uglifyify": "^3.0.1",
  "watchify": "^3.7.0"
}

仕様


  • viewはReactを使う
  • 送信したメッセージは全てDBに保存された上で他の端末に表示される
  • メッセージ入力中は「入力中…」の文字を表示させる

悩んだところ


WebSocketの処理とDBの処理のフローどうするか問題

NodeとWebSocketを使ってチャットを作るっていうのは以前にもやったことがあるのですが、そのチャットのメッセージの永続化を今回はやってみたかったのでメッセージをDBに入れる処理が必要になりました。
そうなると、チャット入力欄をsubmitしたときに、DBに投げる処理とWebSocketとして投げる処理の2つの処理が必要になります。
この2つの処理を並列で同時に走らせるべきなのか、それともWebSocketでサーバーに投げてサーバー側でDBに入れてコールバックでクライアントにWebSocketを返すべきなのか、みたいな選択肢で悩みました。
DBの内容と表示されるチャットの内容が整合性保たれないとだめだから2つの処理は繋がりがないといけない気がするけれど、WebSocketはそのリアルタイム性が大事であることを考えるとDBに入れる処理を毎回挟むのはどうなのかなあとか悩んでました。
が、これは結局以下の問題を解決するときに必然的にやり方が決まりました。

まず、チャットの中身はReact Componentの中で、stateとして渡されたmessegeという配列の中身をmapで回して表示しています。
このように回すと、jsxの中でkeyというattributeをつけないと怒られてしまいます。しかし、keyはuniqueでなければならないため、配列を回したときのindexをあてるのは間違っている、ということみたいです。

React.jsの地味だけど重要なkeyについて

そうなってくるとこれはもうkeyはDBに入れたときのメッセージのIDを使う必要があるということになります。
そしてその前提を元に考えるとDBに入れる処理とWebSocketの処理を別にしてしまうとメッセージのIDを取るのが難しくなってしまうため、必然的にWebSocketの処理とDBに入れる処理を直列で繋ぐ必要があることがわかりました。

流れとしては、まずAさんがチャットのメッセージ入力欄からメッセージをsubmitします。
メッセージはWebSocketを使ってサーバーに渡されます。サーバー側でその値をDBに入れて今入れたメッセージのIDを取得しつつコールバックでWebSocketを使ってそのメッセージをBさんに渡します。
Bさんはメッセージを受け取ったらReact Componentの中で配列をmapで回して描画するわけですが、その際のkeyはメッセージのIDをあてます。

これで、悩んでいた部分の1つは解決することができました。

入力中を表示する処理はどうするか問題

facebookメッセンジャー等で見られる、チャットのメッセージ入力欄に文字を入れているときに相手には「入力中…」と表示される処理を実装したいってときに、上で述べたようなDB接続を挟む処理と一緒にやってしまうと、入力中情報はDBとかとは関係なく実装したいので上手くいかないなーってなってました。
なんか上手くやる方法ないかなあーって考えた結果、結局入力中情報を渡す処理と送信したメッセージを渡す処理は別の処理で実装することにしました。

入力欄に入力したときにWebSocketで入力中であることを送信します。
入力中情報に関してはサーバー側は何もせず、そのまま他のクライアントに渡します。受け取ったクライアントは「〇〇が入力中…」というメッセージを表示します。
メッセージをsubmitしたとき、もしくは入力をやめたとき、入力をやめたことを送信します。受け取ったクライアントは「〇〇が入力中…」というメッセージを非表示にします。
入力中の情報表示に関してはこんな感じ?

ということで、入力中ということを表示させる処理と、実際にメッセージを送る処理は別で分けて作っています。

入力中のイベントって一体どうやってハンドルするんだ

「入力中である」なんていうイベントの取り方がいまいち良い方法が思いつかなかった。
focus?いや、focusしてる間は入力中という判断にしてしまうとfocusだけされてる状態で放置してる状況のときも入力中扱いになってしまう…
keydownされたときに発火させる?うーん、keydownイベントは複数起きまくるしなあ…そしてkeydownにした場合に、途中で入力をやめて送信せずに消した場合はどうやってイベントを取るのか…
考えれば考えるほど想定しなければならないことが多いなあと実感する。

結論として、入力欄にfocusしている状態でのkeydownイベントを取得してinputのvalueが存在していたら入力中という情報を送り、2回目以降のkeydownイベントではinputのvalueが空にならない限りは何もしないでスルーする。空になった場合は入力中を非表示にする情報を送り、もしくはsubmitされた場合も入力中を非表示にする情報を送る。あとはblurのときも入力中を非表示にさせる。

こんな感じでカバーできるかな?とは思うけれど、いかがでしょうか。誰か何か意見あったら教えていただけるとありがたいです。

まとめ


こんな感じで悩みに悩みつつただ今Node.jsとWebSocketでチャットを実装している。まだ終わってはいないけれど。
上にあげたリポジトリを見てもらえれば現在の進捗がわかるのでもし興味がある人がいたら見てみてね。

こちらからは以上です。