読者です 読者をやめる 読者になる 読者になる

アラタナエンジニアブログ

aratana Engineer's Blog

<htmlday>参加レポート:フロントエンドエンジニアって何?って思ってるフロントエンドっぽい人たちが何か作ってみるカフェ祭りフェス in 福岡

f:id:miiitaka:20150618110859j:plain
<htmlday>今年もやってきたぞ!さあお祭りだ! アラタナエンジニアブログをご覧の皆様こんにちは。高見@フロントエンドエンジニアです。6月13日(土)に日本全国で行われました<htmlday 2015>に参加しましたので、そのレポートです。

<htmlday>とは?

f:id:miiitaka:20150618111023p:plain

<htmldayとは、日本全国でWebに関する多数のイベントを同じ日(6/13)に開催することで、日本のWebを一層盛り上げようという「お祭り」です(毎年6月の第2土曜日に開催しています。)。 <htmlday>に参加して、日本のWebを盛り上げよう!

公式サイトより抜粋

昨年は宮崎県でイベントに参加したのですが、今回は福岡県に場所を移しまして「フロントエンドエンジニアって何?って思ってるフロントエンドっぽい人たちが何か作ってみるカフェ祭りフェス in 福岡」というイベントをブランコ株式会社様と共同開催させて頂きました。会場までお貸し頂きましてありがとうございます。 それではイベント本題に。

何かを作って発表する

イベントを開始するにあたって、詩人でお馴染み(?)の弊社、宮崎ひびから今日行うことの説明。……というほどの説明もなく、作る→発表→投票で優勝者に優勝賞品を渡すという流れ。「フロントエンドっぽい」ということでバックエンドの技術は使っても良いけど採点基準に入れませんと宮崎君が3回以上言ってました。

10:30 - なかなか作り始めない

名刺交換会。さすが社会人の皆様、まずはご挨拶ですね。あまり県外のエンジニアの方と話す機会がない宮崎県民の私ですが、エンジニアは人見知りな人種だと勝手に思っておりまして。自分がそうだから。ですので、今回も県外のイベントということでドキドキしながら行ったのですが、福岡県のエンジニアは優しい。ほっとしました。「今日、何作ります?」「宮崎から福岡って移動が大変ですよね?」「宮崎さんは何故金髪なんですか?」

11:00 - プログラム開始

挨拶も終わり、さぁ!プログラムだ!と皆さん席について黙々とプログラミング。一切話すこと無く、会場に連れてきていた宮崎君の娘さんがタブレットで見ていたドラえもんだけが延々と流れ続けるだけの空間。皆さん、すごく集中してる。私はハッカソン的なイベントに参加したことがあまりなく正直どういう雰囲気になるんだろうと思っていたら、本当に集中して作業。普段からこういった集中力で仕事をされているのだろうか。福岡おそるべし。こちらも負けじと集中してプログラミングをしました。やばい、いつもより捗る。

f:id:miiitaka:20150616192053j:plain

12:00 - お昼休み

お昼は4人1組になってシャッフルランチに行きました。あ、ランチの様子の写真がない。

13:00 - 黙々と黙々と

ここからの時間が速かった。発表の時間までに間に合うか?そんな焦りもあってか午前中に増して皆さんの集中力がアップ!延々とドラえもんのび太君の会話だけが聞こえる空間が流れるのみ。ドラえもんの声が知っているドラえもんでなかったと思ったのは私だけじゃないはず。

f:id:miiitaka:20150616192157j:plain

16:30 - 発表の時間

発表の時間が来てしまいました。順番を決めるためのくじを作り、宮崎君がくじを引いて順番を決めました。以下、発表順と発表内容(ちなみに発表内容は順番が回ってきた時に初めて話す方式)

<発表順:敬称略>

  1. しか - D3.jsでエンジニアの既婚率を可視化
  2. 徳永 - Polymer1.0 使ってみた
  3. 我流 - スマフォ・タブレットで上下左右快適に動作するレスポンシブページ作成
  4. 岩本 - 話題のReactに作ってたアプリを乗せ換え
  5. 宮崎 - GoogleMapでイライラするゲーム
  6. 中島 - SVG × CSS3 で文字アニメーション
  7. nobkz - テキスト情報で音楽を鳴らす
  8. 姫野 - あなたのサイトをグリッドレイアウトで見える化
  9. 矢野 - 要素がクリック一つで落ちていくJS
  10. 浦上 - GoogleMap × Blog でグルメ情報マッピング in Milkcocoa
  11. 高見 - WordPress × D3.js × Angular.js で非同期グラフウィジェット追加プラグイン

しかさん

f:id:miiitaka:20150616191821j:plain

最近はビッグデータやオープンデータが次々と発表されている中で、そういったデータを可視化するツールとしてD3.jsどうでしょう?というお話でした。確かに様々なデータを見える化するにはと考えた時にそのデータにあったグラフで表現する必要がある。そこでD3。すごく自然。結構前から発表されているライブラリなのに中々使えなかったのは、SVGで表現するからだろうか。最近のブラウザはSVG対応がほとんどだし、ようやく実践で使えるかなと。このデータビジュアライゼーションはすてきだ。

徳永さん

来ましたよ!Polymer!しかも先日リリースされたばかりの1.0での発表!新しい技術に触れてくる所がフロントエンドっぽいイベントに相応しいですね。Web Componentsやデータバインディングなど未来先取り技術もしっかり頭に入れていかねば。簡単に要素を増やしていくプログラムを組んでました。今までjQueryなどで実装されていた手法がなくなっていく、そんな予感。

f:id:miiitaka:20150616191020j:plain

我流さん

これはすごい。スマフォやタブレットのWeb開発をした方ならわかると思うのですが、フリックでの移動って大変なんです。上下左右になめらか〜に移動する。しかもレスポンシブ。ニュース等のRSSを読み込んで、ニュースを見る某ニュースネイティブアプリをWebアプリとして実装するところまで行きたかったようですが、動作は申し分ないなぁと思いました。もう時代はスマフォ・タブレットなので、ネイティブに近い動作をするWebサイト作成技術が必要ですね。ECサイトでも活用機会がありそう(※アラタナはECサイト制作会社です) ソースコード見てたら、スワイプ方向の厳密指定がしてあって、上下左右の感知範囲設定があったのがすてきポイントでした。

f:id:miiitaka:20150616191202j:plain

岩本さん

以前作っていた家計簿アプリをを話題のReactに置き換えるというもの。React友達になりたい。Reactもですが、彼は普段はAngular.jsなんかも触っているらしくJavaScriptでのMVC(MVW)の考え方も理解出来てる素敵エンジニア。さくさく動くなー。後から話をする時間があってAngular友達になってくれました。(宮崎県でAngularやってる人、友達になって下さい。聞きたいこといっぱいある。) 後から年齢聞いて20歳とわかった時の衝撃。

宮崎君

GoogleMapがあるとスクロールがGoogleMapに持っていかれませんか?そんな皆様にお送りするイライラゲーム。という謎のゲームを作ってました。GoogleMapをページ内に貼りまくって、その要素と要素の間をスクロールして下に下がっていくという。確かにイライラしそう。本人がデモ操作をしましたが一言。「あれ?思ったほどイライラしない」

中島さん

ブランコさんからの参戦。Illustratorで<htmlday>の文字列をSVGで出力し、それをCSS3アニメーションで動作させるプログラム。これは滑らかだ。アニメーションはJSからCSS3で動作させるのが当たり前になってきているので、そのアニメーションを駆使しての動作はとても美しかったです。こういうところを作るのがすてきだなぁ。

nobkzさん

これは未知の分野だったのですが、テキストボックスにテキストを入力すると音楽がなるというもの。テキスト情報によって音が変わる?テキストボックスが複数あって、それぞれに違う文字列を入れて同時に音楽を流すということをされていて「どうやっているんだろう?」と興味津津。お時間がなかったようで、発表が終わって退席されてしまったのでソースコードなどじっくり見れなかったのが残念。何かに応用できそう。

姫野さん

f:id:miiitaka:20150616191429j:plain
今回唯一の学生さんの参加だったのですが、すごい。福岡の学生おそるべし。URLを入力して表示したサイトをグリッドで分割するというもの。サイトはiframe内に読み込んで、その上に色付きのレイヤーを重ねて分割するようにしている。う〜ん、この短時間でここまで作るか。仕組みはシンプルですが、アイディアと実は地味に面倒なウインドサイズや幅を取得して分割する処理をしっかりやってある。すばらしい。

矢野さん

ブランコさんからの参戦。クリックした要素が落ちていくというJavaScriptFireFoxFirebug内にJSのコードを貼り付け、要素をクリックする(例えば画像や文字)とその要素が画面の下に落ちてなくなっていくというもの。どんなサイトでも実行可能なのが面白い。これ、普通に組み込んだらクラッキングと一緒だなw このネタが一番盛り上がりましたw

浦上さん

登録してある福岡のグルメブログの本文から住所があれば取得してGoogleMap上にピンを立てる。ここまででもおぉ〜っと思うのですが、このMap上のピンをクリックするとそのログをMilkcocoaに保存することができる。すごい。本人的にはHistoryAPIを利用してログを取ってブラウザ上でも自分のクリック履歴を確認できるところまで作りたかったそうなのですが、時間が足りずと。私は個人的にこれ好きです。

f:id:miiitaka:20150616191555j:plain

高見

トリ…… 最後は私、高見が発表。WordPressプラグインを作りたくフロントの技術と組み合わせて出来ないかなと思い、投稿数やタグの月ごとの統計情報を可視化するウィジェットを作りました。可視化ツールとしてD3.js(しかさんとかぶった)、非同期通信にAngular.jsを使用。ウィジェットのみにスコープを設定して、月のボタンをクリックするとAngularのコントローラー内でAjax通信する仕組み。出来上がったあと思ったのが「地味」 GoogleAnalyticsとの連携や、独自でPV数を計算したりして、表側にウィジェットとして、管理画面のダッシュボードに表示したりと応用は出来そう。もう少しリファクタして作りこみたいなぁ。

17:30 - 投票&表彰式

全員の発表も終わりいよいよ投票!一人2名ずつ用紙に名前を書いてもらい投票数の多い人が優勝ということで、名前を読み上げていきました。読み上げる度に沸き上がる歓声とどよめき。「正」の字を書く方も緊張。そして……

まさかの3人同得票数! 我流さん、矢野さん、姫野さんの3人が残りました。

そこで、決選投票を挙手で行うことに。 そしてそして結果……

我流さんが優勝!

f:id:miiitaka:20150616190557j:plain

優勝賞品を宮崎君より進呈。賞品は首相官邸で飛ばしたら怒られるあれです。

f:id:miiitaka:20150616190745j:plain

惜しくも2位となったお二人には<htmlday>オリジナルTシャツをプレゼント! まずは姫野さんに。

f:id:miiitaka:20150616190350j:plain

続いて矢野さんに。

f:id:miiitaka:20150616190205j:plain

18:00 - 懇親会

そのまま懇親会へ。場所など取っておらず、福岡がさっぱりわからない高見はお願いするばかり。(すみません)優勝した我流さんがお店を予約してくれるという…大人ってすてきだ。

居酒屋で明太子頂きました。だって福岡だもの。明太子の天ぷらというものを頂きまして、これが美味しい。 福岡の居酒屋はITが進んでいるらしく、メニュー表にFTP伝統!と書いてます。なるほど、File Transfer Protocol、わかります。

f:id:miiitaka:20150616183541j:plain

FTP(ふとっぱら)の略でした。

お店名物のラーソーメンが美味しかった。さすがラーメン文化福岡。これがやたら美味しい。

f:id:miiitaka:20150616183727j:plain

2時間飲み放題の中、色々な話を聞けました。エンジニアの意識がとても高い。中には専門学校などに講師として授業に行く方もいらっしゃいましたが、こういった人達に教えてもらえるのは幸せだろうなぁ、恵まれているなぁと感じました。社会人対象に教えている方もいて結構なスパルタぶりでやっている話を聞いて、教える人のレベルと意識が高いのはとても素晴らしいことだと感銘を受けました。宮崎でもこういう人達を増やしたい。

まとめ

イベントレポートはここにて終了です。イベント主催側だったはずなのですが、逆に学ばせてもらうことのほうが多く、やはりエンジニアは外に出て色々な方と出会い、そして刺激を受けるべきだと感じました。定期的に福岡でのイベントを行いたいなと思いましたし、それを宮崎に持ち帰って宮崎県のエンジニアのレベルアップになるような動きをしていければ良いなと思います。来年の<htmlday>は何を作ろうかな?(^o^)