2016-12-07

AMESTAGE を支える Riot.js とその構成について紹介

この記事は Riot.js Advent Calendar 2016 の 7 日目の記事です!!


Riot.js で芸能人とあそべる生放送サービス AMESTAGE というのを作っていて、動画サービスだったり、芸能人と一緒に遊べるクイズやコメント・ランキングといった各種機能盛りだくさんなせいか、そこそこ規模が大きくなってきました!


是非遊んでみてください!!


そんな AMESTAGE での Riot.js との付き合い方について、どういう構成でやっているかをサーバー構成からビルド方法、Atomic Design というデザイン手法の導入、Flux な構成までザックリ紹介してみようかなと思います!


基本構成

Node.js で Web サーバーを建てて、API サーバーやログイン基盤とのやり取りをまとめています。API サーバーを直接ブラウザからは叩きに行かず、 Web サーバーに実装した API を必ず介してデータを取得しています。

最近あった「リクルートテクノロジーズのフロントエンド開発 2016」という記事のBackend for Frontend なサーバー構成に似た状態です。

サーバーサイドレンダリングはほぼやってませんが、ロボットからのアクセスに対して riot.js の機能を使って SEO 向けページを用意していた事もありました。
テンプレートエンジンは ECT を利用しており、Riot.js のレンダリングを待ちたくないヘッダー等の簡単なマークアップはそちらで済ませてしまっていたりします。

コーディング

Babel を使っています。eslint でコーディングルールを管理し、babelrc, eslintrc の設定に riot のプラグインなどを追加しています。あとは editorconfig も追加しています。(エディタはvimが多め)

ビルド周り

Riot.js は gulp を使ってコンパイルしたものをブラウザから読み込ませています。ファイルを分けている各 js は Browserify を利用して1つにまとめています。

Browserify を使うときは注意が必要で、今の構成でビルドするには Browserify + Babelify + Riotify だけで動きはするのですが、これだとファイルが増えていったときに watch しながら実装していると、1ビルド毎に何十秒もかかってしまい、開発効率が悪くなってしまいます。

なので差分ビルドができるように、 watchify というものを追加します。差分ビルドだと、import (require) しているファイルたちを毎回全部くっつけてた処理が、変更のあったファイルのみ再ビルドされるだけになるので2〜3秒とかほんの僅かな時間でビルド可能になります。これやらないと、本当に死ぬので是非お試しください。

ポイントは browserify で作るエントリーポイントを少なく(出来れば1つに抑える)構成すると開発もスムーズに行くと思います。今からやるのであれば、 WebPack を試してみるのも良いのではないでしょうか。

その他 gulp ではサーバー起動と watch からの js / css ビルド or minify 処理がメインです。sourcemap 作ったりとかとか。


Flux

Riot.js の Observable を使ったシンプルな flux を実現しています。Redux とかは使ってなくて、お手製です。でも Redux 等も良いと思います。
Riot.js を使ったコンポーネント志向な造りになるときは、Flux なデータの受け渡しはとても相性が良いです。ぜひ導入しましょう。

文章だけでは難しいですが、イベント名と紐付いた store を1つのオブジェクトに登録して、context みたいな形で riot.mixin してどのタグからでも同じデータを見れるようにして使っています。


Flux の実装については簡単に説明すると View から実行された action で API の結果だったり、渡したいデータを決まったイベント名で trigger して、dispatch にデータを渡します。

dispatcher に登録した store にそのイベント名で受けたデータを反映させ、 store にはデータが保存されるので、view では store のデータを引っ張ってきたり監視して変更を反映させたりするだけとなっています…

…がやっぱり分かりづらいので細かい実装などについては、直接ご相談いただければお話させていただきますのでお気軽にご連絡ください^^


Atomic Design と Style Guide

色んな勉強会などでお話させてもらってる Atomic Design ですが、こちらは components というディレクトリ以下に Atoms, Molecules, Organisms という単位でそれぞれを管理しています。以前会社ブログに書かせてもらったこの記事でも紹介していますが、具体的にはこんな感じ。

components/
├── Atoms
│   ├── follow-button
│   │   ├── _follow-button.scss
│   │   ├── follow-button.tag
│   │   └── example.tag
│   └── atom-component-name
│       ├── _atom-component-name.scss
│       ├── atom-component-name.tag
│       └── example.tag
├── Molecules (Atomsと同じ構成)
├── Organisms (Atomsと同じ構成)
├── styleguide
│   ├── style-guide-item.tag
│   ├── styleguide.html
│   └── style-guide.js
...

それぞれはコンポーネント本体、そのscss、example.tagには Style Guide での使われ方や表示に必要なテストデータが入ってます。
example.tag ファイルの実装は、Style Guideでの見え方の他に、サイズやその他種類など、同コンポーネントでの表示パターンをなるべく網羅するように記載しています。

今後はこのexample.tag のデータに紐付いてテストもまとめて書けたらなぁと妄想しています・・・(´・ω・`)

開発時は gulp style と実行すると style guide 用のサーバーが立ち上がり、コンポーネントの見た目を作るときはそれを見ながら実装できます。

Atomic Design と Style Guide については今までにも勉強会などで話させてもらった資料などを公開していますのでそちらも合わせて御覧ください!

勉強会に登壇した話とデザインエンジニアリングについて

Riot.js 勉強会を主催しました


スタイルの当て方について

riot.js の tag 内でも sass は使えるのですが、コンポーネント実装をやっていく上で複雑な動作があるものに関してはマークアップが長くなったりと色々不便があったり、スクリプトまで書くと全体的に長くなってしまうなという印象がありました。
なので sass ファイルを別にしています。あえて .tag 内に書いていません。

例えば、 atom-icon.tag みたいなコンポーネントがあったとしたら、_atom-icon.scss を同ディレクトリに置いて、そのタグ名で以下のようにスタイルを記述していきます。

atom-icon {
  height: 100px;
  width: 200px;
}

こうすることで直感的にこのタグ内でのスタイルだけに集中して書くことができるので、riot.js v3ではデフォルトになった scoped な書き方が出来ます。
class 名なども、コンポーネント間で完結するのでかぶること無く(もし被っても子タグclass 名の方が強いので問題になったことがない)BEMのような管理をしなくて済むのでとても見通しが良いです。

各 components の sass は gulp-sass と gulp-sass-glob を使って1つのファイルにまとめてから minify などしてます。共通して使ってる色や数値は変数にして共通して使えるように利用しています。


その他ライブラリについて

jQuery 系を使ってません。DOM 操作がそもそもそんなにやること無いのと、class の付け替えや DOM の切り替えなんかは riot.js の機能だけで十分出来てしまうからです。
無駄なファイル読み込みが減るので、思い切って使うこと自体をやめてみました。

あとは bugsnag でバグ確認したりとか、色々楽しく動くサービスだったりするので必要なアニメーション系ライブラリを導入予定です。anime.js とか。現時点ではコーナーやギフトと言われるアニメーションは css をコツコツ手付けでやってたりします。


テスト準備中。。

言い訳になるので理由は言いませんがテストが今無くて準備中です。。使おうと思ってるのは Riot.js でも使われてるので karma-riot を考えてます。

コンポーネント単位でのスタイル確認は Style Guide でやってます。まだ構想なのですが、今後はこの Style Guide 確認と一緒に karma のテストが書けたらなと思っています。
Style Guide 自体が今 AMESTAGE 用に作られているので、しっかり外部 module 化して、オープンソースにしたりとかも出来たら良いな…とかとか(妄想)React にある Storybook 的なやつがとても良さそうなので、それに近いものを…!


まとめ

ざざっと全体像を書くことになってしまったので、詳細について端折りすぎた感じが申し訳ないのでどこかで書くか発表するか、質問・リクエストくださいw

これらの構成自体は全然正解ではないし、このあともどんどん改良していこうと思ってるものなので意見があれば是非ご連絡ください!選定理由や細かい実装についての相談などもどしどしお待ちしてまーす^^


明日は cognitom さんの「 ES6 で書くRiot - Rollup編」です! Rollup も良さそうですよねぇ〜〜😋

2016-11-06

勉強会に登壇した話とデザインエンジニアリングについて


Forkwell さんの勉強会で登壇させて頂きました!フロントエンド最前線という感じの攻めた勉強会だったのですが、話した内容の反響がとても良かったというお話です。


撮っていただいた写真

資料について

こちらが発表した資料になります!


内容ですが、過去にも話した AMESTAGE で使っている Atomic Design について触れているものになります。

Web Components っていうのはかなりイケていて、 Atomic Design っていうのはコンポーネント志向で Web を作っていく上でとっても良い指標なので、みんな是非取り入れてみてくださいね!ツールに振り回されずに、もっと上のレイヤーでものづくりしたらよいのでは?という内容になっております。 

フロントエンド最前線な勉強会について思ったこと

資料の中にもありますが、JavaScript 界隈の技術の移り変わりはとてつもなくて本当に忙しないというか、追いかける気が失せる人が多いのも本当にわかります。
僕自身も、フロントよりもサーバーをずっとやってきて、リクエストを受けてレスポンスを返すだけの簡単なお仕事だなぁと思ってエンジニアしてきていたので、ちょっと辛かったのを覚えています。

そんな中、この資料を寝そうになりながら作っていて思ったのは、フロントエンドエンジニアというかWebエンジニアというか、見た目を作っていくエンジニアすべてに共通する認識として、我々はツールより、デザインについて考えることは沢山有るのではないかということです。

デザインエンジニアリング

僕はこういうものづくりについて、デザインエンジニアリングという考え方を持っています。デザインエンジニアリングというのは僕が今とても興味がある分野で、テクニカルクリエイターという物もCA社にはありますがそういう感じなのかなぁと思っています。

エンジニアなんだけどデザインについて知らないと出来ない世界。そっちに向けてスキルを伸ばせたらみんな幸せになれるのになぁという気持ちを込めて、今回呼ばれたフロントエンド最前線という勉強会のテーマについて考えました。フロントエンドを作っていく以上、ただ依頼されて作らないと駄目なもの以外はデザインについて興味がないっていうのは致命的なエラーなんじゃないのかっていうのを最近感じています。

まとめ

そんなこと言ってますが、フロントエンドで使う技術は使いやすいイケてるモノを選び、それを選ぶセンス自体はやっぱり今回の様な勉強会や日々のデザインについて語る機会がエンジニアにも必要だなぁと思います。なので勉強会に行くのは超重要。

でも見失わないでほしいのは、誰のためにいつまでに何を作っているのか?というのを常に考えて行くのがオナニーにならず、良いフロントエンドエンジニア人生なんじゃないかなと思った発表でした!ブーーーメラン!!!!!!!!!!!!!

2016-11-02

ハロウィンなのでLEDテープを使った工作をやってみました

今年もハロウィンが終わりましたね🎃



僕は昔は全然ハロウィンとかしなかったんですが、去年、一昨年と連続して楽しめるようになったクチです👻

仮装とかはあんまり気合いを入れていなくて、クリスマスの時に買った星の被り物がシンプルなのにキラキラしてて楽しい気持ちになれるのでお気に入りで良く被っています🌟

今回は前から使ってみたかったLEDテープを使ってこの星をバージョンアップさせ、去年よりより楽しい気持ちでハロウィンに臨むことにしました💪

早速ですが完成版はこんな感じです。



動画はこんな感じ。



星の周りにLEDテープを手縫いで縫い付けて、コントローラなどを星の中に安全ピンで固定しています。リモコン対応しているので、受光部を首元からこっそり出し、リモコン経由で16色と4パターンの点灯パターンに切り替える事が出来ます。


作り方紹介



LED周りで必要なパーツ類は以下のとおりです。

  • LEDテープ :今回はカラフルにしたかったのでRGBタイプのモノで2mのを買いました。4000円ちょっとくらい。
  • コントローラー:リモコン付きで、12Vの電源とつなげると色の制御をしてくれます。他にも音楽連動タイプとかもあって、そっちを買っておくべきだったなとちょっと後悔しました。これも2000円くらいだったような。。
  • 電池ボックス:今回は電源を持ち歩きたかったので12V出すために単三電池を8つ直列につなげて出力をまかないました。ちょっと重い。歩いてるときはパーカーを着てフードに入れてました。3日間ハロウィンで使ったけど夜だけつけたり消したりしてなんだかんだずっと8本だけで耐えられました。
電力が12V必要なのは、本来は車などでの利用を想定しているからっぽいです。タクシーのドアについてるやつとか。


LEDテープはこんな感じで等間隔でLEDが付いているのと、その間に4つ並んではんだがついている所で同じモノがつながっているだけです。


4つのはんだが並んでいるのと同じく、LEDテープの端には4つの穴が空いた端子があります。




電源側には同じく4本のピンがあり、先程の4つの穴に挿入できるようになっています。4本あるのはRGBへの電力供給3つと、GRDがあるからっぽいです。
LEDテープの反対側には同じピンがあって、間で増幅することで延長することも出来ます。



あとは電源がこんな感じで電線が出ているのではんだづけします。




最後は丁寧に一縫い一縫い地道に星の周りに縫い付けて行きます。。外周2mもあったのですが、アニメを見ながら2時間位で完成しました。


ハロウィンは光ると目立つ

友達のゾンビメイド達とPSVRで遊ぶ人の仮装の人(PSVRの人も自作してて強い)


去年一昨年と同じ星を付けて渋谷を歩いたときはちょっとシュールでただの雑な荒川アンダーザブリッジの星コスプレみたいになって生暖かい目で見られてましたが、今回は眩しいほどの光量とカラフルな発光パターンでテレビにも映ったらしいし街の反応もとても良かったみたいで良かったです。

みんな趣向を凝らした仮装が沢山あった中で、「あードンキで買ったのね。」みたいな感じになってしまっていたところを、こういった工作で少しだけグレードアップさせられたのはとても楽しかったです。

今回は使ってみたかったLEDテープの仕組みも分かったし、もっと高価なやつだとチームラボさんの展示とかでやってたみたいなプログラミング制御とかもできるみたいなので試してみたいなと思ったりしました。

はー色々忙しかったのにやったし酒飲みすぎて体調が悪い!しばらくはおとなしく過ごしたいと思います。。今度はクリスマスにお会いしましょう🌟

2016-10-09

LINE beacon で玄関に近づいたら天気教えてくれる LINE bot 作ってみた



LINE DEVELOPER DAY 2016 で貰った beacon 使ってなんかつくってみよ〜と思ったので、なんか作ってみることに。

良く家出る直前に「今日雨降るんだっけ?」と思って天気調べたりするのがめんどくさいので、玄関に置いた beacon に近づいたら LINE 通知で天気を教えてくれる bot を作ってみることにしました。

作り方


手順はこんな感じ

  1. LINE@ のアカウントを作る
  2. LINE の Developer Trial に登録して Message API を使えるようにする
  3. LINE@ アカウントを Bot 設定 ON にして API と連動させる
  4. LINE beacon の設定 URL から Beacon を LINE@ アカウントと連動させる
  5. サーバーを立ててやりたい実装しつつ、 Web hook (callback URL) を作って LINE@ に設定する
  6. Beacon の電源を ON する
  7. スマホの LINE 設定で beacon 利用を許可する
  8. 作った LINE@ と友達になる
  9. Beacon に近づけてみる…!
LINE@のアカウントを作って、開発権限とって、Beaconとそれぞれを連動させて、サーバー立てて動かすって感じです。かんたん!

大体はこのページの「 Messaging API をはじめる」 「Developer API を始める」の2つから設定とかを探していけばイケます!(他にも探したら同じような記事あるのでわからなかったら探してみてね)


(サーバーは https じゃないと駄目だったりしたので heroku で Node.js 書いて作りました。)

作った天気教えてくれる bot について

通常 Messaging API 連動した LINE@ アカウントと友だちになってメッセージを送ると "type": "text" みたいな形のデータが POST で届きます。Beacon に近づいたら届くデータの場合は "type": "beacon" になっているだけです。今回はこの beacon イベントが届いたときに OpenWeatherMap API を叩いて天気をとってきたりして返事しています。


おまけなんですが、OpenWeatherMap API で返ってくるデータが全部英語で、それを日本語に翻訳したものをかんたんにモジュール化して GitHub と npm に公開したので良かったら使ったり直したりしてください^^



LINE beacon の可能性

LINE が Beacon 事業をやるのは素晴らしいことだと思います。昔 BLE 買ってきて、連動するアプリを作ろうとしたことがあるんですが、やっぱり専用のアプリをインストールさせたりする手間などがかかったりするので残念でした。でもこれらを LINE がやるとなると話は別で、LINE は今日本人のスマホには大体インストールされているので Beacon 専用のアプリをインストールする手間がゼロになります。これがスゴイ。可能性が広がりまくりです。

そして LINE Beacon 自体の可能性ですが、現状"近づいたら通知する"という機能しかないのと(中の人いわく"離れたら通知する"機能も付けたいらしいけど)、それによって生まれる便利な生活のイメージはまだまだ未知数な気がしています。

今回作った「玄関に近づいたら今日傘がいるかどうか知る為に天気を教えてくれる」というものは、日々の生活の中で「いつも家出る直前に天気アプリ開いていて面倒だなぁ」っていう問題を解決できました。普通に天気アプリ開いたらいいじゃんってのも分かるんですが、決まった時間に通知するわけでもなく、玄関に近づいたら勝手に教えてくれるというのが気持ちいいわけです。

これからあるなぁって思うのは、ハチ公とかの待ち合わせスポットにBeacon仕込ませてもらって、待ち合わせ中の人たちに Beacon 経由で有用な情報を送りつけるとか、そういうことができるようになるんだと思います。新しい広告プラットフォームみたいな使い方。それ以外だと今回作ったみたいな生活をちょっと便利にする秘書的な、最近も発表があった Google Home みたいな使い方が増えてくるんじゃないでしょうか。

まとめ

LINE で bot を初めて作ってみたんですが、大体1〜2時間くらいで完成しました(実装は雑だけど)。このブログにまとめる時間のほうがかかっていたような気がしますw それくらいかんたんな LINE bot と Beacon の設定と開発。API もシンプルだし、"何をやるか"について考える時間をもっと割くべきだなと思いました。

賞金1000万の LINE bot のアワードもあるみたいだし、これからどんどん盛り上げて行きたいみたいなのでこのビッグウェーブに乗るのも結構いいかもしれませんね。なんか出してみようかなヽ(´ー`)ノ

2016-07-28

Riot.js 勉強会を主催しました


今仕事でも使っている Riot.js 勉強会を、 「フロント界隈で一番イケてるのは AngularJS でも React でもなく Riot.js だという話」というブログでバズった @phi_jp さんを twitter でナンパして一緒に開催しました!

当日の connpass イベントのリンク(http://riotjs-jp.connpass.com/event/35724/)に詳細と、発表者の資料が公開されています!(まだ全員じゃないかも ※2016/07/27 23:35現在)

当日の僕の発表資料はコチラ↓

勉強会について

社内にも告知出そうと思ったら、いつの間にか情報公開したイベントが勝手に広まって一瞬で満席になってしまいました。かなり注目度の高い勉強会だったようで、開催できてとてもうれしいです!


今回の開催は首都圏で初めて行われた大きな勉強会ということで、ゲストスピーカーにコアコミッターの @cognitom さんをお呼びしました。
Riot.js の隅々まで知り尽くした方の基調講演レベルの発表も聞けて、とても充実した勉強会になったと思います。phiさんのハンズオンも実践的だったし、素晴らしかった。次回もやりたいなぁ。

発表内容について

最近頑張って黙々と仕込んでいたサイバーエージェントの新サービス、AMESTAGE (旧アメスタ) の Web ブラウザ版を作った話です。
サーバーからフロントまで、(というかフロントエンドエンジニアとしては初の仕事で) Riot.js + Web Components + Atomic Design な構成でガッツリ作ってみたよ〜という内容です。発表中のデモをやったんですが、同期のCA女子にお願いしてとても面白く出来たと思いますw

Riot.js のススメ

Riot.js はこれからフロントエンド開発が収束していくべき Web Components の考えに則り、React (使いたいし素晴らしいのだけど) のようなすべてのWeb製作者が使うには難しすぎるみたいなこともなく、一番シンプルに再利用可能なコンポーネントの作成を体験させてくれるステキなライブラリです。ぜひ使ってみてください!

謝辞

Riot.js を使って、Atomic Design に乗せて世に放った AMESTAGE。様々な人の助けを貰って開発できました。
近況報告じゃないですが、久しぶりに楽しく仕事させて貰ってます!Riot.js を始めるキッカケをくれた takusuta の皆さん、Atomic Design を社内に広めてくれていた goto さんをはじめ、いろいろな技術的な質問に答えて頂いた AbemaTV の皆様、役員の皆様、そしてチームメンバーの皆様、今の環境に感謝してもしたりないくらいです。
AMESTAGE成功させないとなぁ。。これからも頑張ります!!

2016-07-05

スマホブラウザで "アプリを開く" 的なボタンを用意する時に困ったことと対策

スマホのブラウザでアプリがインストールされている時はアプリが開き、インストールされていない時はストアが開く、みたいな実装をする事になっていろいろ調べたら困ったのでメモ。

アプリで開くリンク1つだけ用意する場合

もちろん Android と iOS で違う。
iOS はバージョンでも違う。
iOS 8 以下だと iframe 使ってカスタムURLスキームが生きているか判別できる。iOS 9 だと Apple に対策されちゃって出来ない。

Android ( http://nukokusa.hatenablog.jp/entry/2015/08/26/200000 ) と
iOS 8 以下ならこの記事の内容で出し分け出来る。http://qiita.com/ooyabuh/items/388ffb0427b2772a9c66

iOS 9 以降の対策

アプリで開く、という意味でのリンクは出し分ける方法が正式に無さそう。
いろいろあるけど、無理やり感がある。
http://qiita.com/makoto_kw/items/5a99e37f7172337ae4be

そこでUniversal Links

webと同じURLで、登録されていればそもそもwebを開かずアプリを開く。
http://qiita.com/mono0926/items/2bf651246714f20df626

Androidにもwebと同じURLでアプリを開く仕組みがあるけど、ブラウザで開くのか、アプリで開くのかをユーザーに選択させるのでちょっとイケてない。
http://qiita.com/nein37/items/3b69f85b97d0883eb1ca


結論

Android : 
アプリで開くボタンを用意して、インストールされていればアプリ、されていなければストアが開く。

iOS (8以下) : 
iframe でカスタムURLが生きてるかチェックして、ストアのURLを差し込んだりする。

iOS (9以上) :
Universal Links を使って、アプリが入っていればそのままアプリを開く、入っていなかったらストアへのリンクを用意した Web ページを表示する。


Universal Links だと、Twitter の告知からアプリ開いた時とか計測できないんじゃないの?とか思ったけど、その辺りはどうなんだろう。。


その他調べてて知ったやったいたほうが良いアレコレ

iOS9 の Search API に対応したら良さそう。

iOSカスタムURLスキームの注意点。(iOS9から開かなくなるらしいから要確認)

growth link がなんか計測もディープリンク対応もあっていい感じ。

他にも何か気をつけることとかあったら教えて下さい^v^

2016-01-04

2015年から2016年の79は何処に向かうのか



2015年の振り返りと2016年の行動指針について。タイトルはパクリw

2015年

パーティー元年



2015年は自分の中でパーティ元年。いきなり何を言ってるのか良く分からないが、パーティが好きになれた一年だった。本当によく遊んだ。変なイベントにも沢山行った。遅れてきた青春(ただの厄介)なのかもしれない。酒もたくさん飲んだし、健康診断は要精密検査が3項目あって、2月には2リットルの下剤を飲んで肛門からカメラを入れられる予定だ。

アニソンDJや廃校を借りたプールサイドDJ、新宿二丁目でのDJ、結婚式二次会でのDJなど、DJ活動も月2回以上のペースでやってた気がする。DJ79のOwndサイトもちゃんと更新してたけど、色々やってる中で良くこなしてたと思う。

残念だけど、誰かの曲を呼ばれて流すだけだと得られるものは少ない。公募に出したり、トラックメーカーか、自主イベントをやらない限りDJというものは広がりがないのだなぁと感じた。
と言いつつも呼んでもらったり、普通にやってる時や友達がいる前でやるのはすごく楽しい。自分の知った人を呼んで個人的にイベントやるのは良いかもしれない。何か機会があれば企画したいと思った。今年の三十路誕生日3/13とか!

筋トレ

筋トレが捗った一年でもあった。大学時代の58kgから、ついに70kgまで到達できた。体脂肪のコントロールも出来るようになってきたし、30代に向けての身体作りはしっかり出来てきたと思う。

 
こんな感じ(1枚目:大学時代、2枚目:最近)


2015年の活動と反省



社内ISUCON的なお祭りに嫌々参加したけど上位入賞出来たし、本を書いたのをキッカケに、GitHubのMeetupに呼んでもらって、社長とセルフィー撮ったりする機会もあった。
BaPAの二期も始まって手伝わせて貰ったりして、色々刺激も貰えて良かった。
真面目な活動といえばschooでのNode.js講座くらい。ブログもほとんど書いていない。デザインの仕事を受けたりしたけど、ドヤれるほどのクリエイティブな活動は全然出来ていなかった。
仕事でのジョブサイズももともと出来る仕事以上のモノに携わらなかったし、デザイン仕事やったくらいしか個人的には成長実感が無い。これは反省点。


2016年何処に向かうのか

大きく分けるとこの4つ。

  • 人間性を捧げる
  • デザイン
  • 英語・他プログラミング言語
  • せめて、大人らしく。


人間性を捧げる



2016年は人間性を捧げる年にしたい。これは僕の少ない友人の落合陽一がよく言っている言葉だ。年明け早々に出ていた彼のインタビュー記事を見て思った。毎年一年の振り返りをブログに書いてきたけど、(今年は面倒で月毎の出来事にはまとめてない)彼の成し遂げてきたこと、これから成そうとしている事の多さに色々気付かされた。
彼は天才かもしれないけど、昔から研究等にかける時間の量がとんでもなく多いのだ。もはやそれは人間のモノとは思えない。まさに人間性を捧げている状態なのだと思う。これを目指したい。

デザイン

デザインをもっとやりたい。
今まではエンジニアとしてサーバーサイドを入社以来担当する事が多かったけど、サーバーサイド技術の廃れ方が小さく経験での積み上げが多いのが好きだった。
見た目やUI・UXと言われるデザインも大学があるくらい、アカデミックなもので積み上げが出来る。だからやりたい。実際に勉強してても凄く奥が深い。答えが無いってのもあるけど。
クライアントサイドの技術も学びたいけど、積み上げた技能が丸ごと廃れたりするので、その都度その都度旬な物を触れる瞬発力だけ養っておく程度にしたい(ネイティヴアプリ周りはめちゃくちゃやりたいけど)。

サーバーサイドは、わかる。あとはデザインをしっかり理解して、作りたいものに合わせてクライアントサイドを学ぶ。そういう考えだ。

英語と他プログラミング言語

英語は去年全然上達しなかった。使う機会を持とうとあまりしなかったからだ。遊んでるだけじゃ上達しなくて、英会話やってみたり、お金を出して勉強しに行かないと自分は手を抜きがちな気がする。

あとは他言語を勉強して、使いたい。Node.jsは良い。今後もサーバーサイドで個人的に何か作るなら手軽だし選んでいくと思う。
ただ、仕事する上で使える機会で言うとそんなに無いんだなぁと業界全体を見渡して思った。あとはサーバーサイドやブラウザ以外の領域にも手を出さないとダメだなという危機感がある。新しい言語を沢山使いこなすっていう状態になりたい。

ということで1月は早速2週間ほど有給をとって、フィリピンはセブ島でScalaとかを使ったプログラミング仕事をしながら暮らしてみます。初海外仕事!!

せめて、大人らしく。

人間性を捧げるって書いたけど、捧げる程の人間性も今まで無かった(爆)ので人間性、というより大人らしさをもっと身に着けたいと思う。
今日まで変なイメージでずっと生きてきたけど、最低限の人間性を持ち、当たり前の事を当たり前にできる、大人らしい生き方をそろそろ30歳になるのでやろうと思う。

要はバランスなんですが、人間性を犠牲にしつつも子供のままじゃダメだなぁといういかにも三十路を目前に迎えた今更感たっぷりな目標でございます。

最後に

2016年は色々変わる年になると思います!昨年もお世話になりましたが、今後も皆様変わらずお付き合いいただければ幸いです!!