Web

Firebaseがすげー便利でびっくりした

なるべくBlogに記事を書いていきたいと言ったので積極的に「良い!」と思ったことは記事にしたいりっくんですこんにちは。

とりあえず、進捗はこんな感じです。

Firebaseいいかもしれない

先日の記事で、Firebaseを使おうと思う、でもここまで手を広げていくと大変かなぁとか言ってましたが、
React.js(やっと)使ってみてる | SteadyWorX

firebase
バックエンドは書かなくていいかなぁなんて思ってたんですが、この感じだと適当にAPIサーバーくらい作ったほうが良いかもとなって、もういっそfirebase試すか!って感じになっています。で、ググってたところで整理がてらBlogにまとめてる。
firebaseもちょっとだけ触ったんですけど、RDBばかり触ってたのでNoSQLはまともに触ったことがなくて、どういうDB設計にしたら良いかからちょっと記事を読んでる段階です。
Firebase Realtime DBを実践投入するにあたって考えたこと – Qiita
でもこうやっていろいろな技術に手を加えていくと、だんだんわからないことの許容量が増えて死ぬというミライが見えますね、ツライ。

実際に触ってみたら結構簡単で、且つやりたいことがそのままできそうなのでこのまま採用しようと思いました。という話です。

Realtime Database

FirebaseのDB機能、NoSQL系だってことしかしらなくて、よく見たらRealtimeって入ってるんですね。
で、そこから色々見ていったら、やっぱし更新を検知することができるっぽいんですよ(というか、そういう使い方がメインなのかな?)

ということで、現在のリロール状況を保持しつつ、更新があったらstateを変更する感じのコードを買いてみました。
実際の動きがこちら

これはいいですね、これならチームごとに更新をリアルタイムに取ってこれます。

後はこの辺に所持チャンプ情報周りもすべて格納していけば結構いい感じになるんじゃないかなぁというのが今のところの感覚です。
楽しくなってきた!!!!

React.js(やっと)使ってみてる

ちょっと体重がやばい感じになっていてゆるくダイエット中のりっくんですこんにちは。
Blogの更新、いよいよちゃんとやっていきたいので最近やってることでも書いておきます。

React.js触ってる

  • 作りたい物
  • 作る時間
  • モチベーション

全部がないとなかなか新しい技術がさわれません。
すげー広くの分野でHello Worldレベルは触ってるんですけど、なかなか理解できないですね。

2周遅れくらいではあるものの、Reactは触りたかった技術の一つなのでこれを気にちょっと使ってみています。

こんなの作ってる


League of Lgendsっていう神ゲーがあるんですけど、いま一緒にゲームをしている人はARAM(All Random All Mid)をよくやるメンバーで、5人を超えると8人、ないしは10人頑張って集めてカスタムゲームを開催しています。
ですが、カスタムゲームのARAMではリロールが出来なくて、しょうがなくドラフトピックのARAM(Randomではない、ハウリングアビスマップのドラフトピックというだけ)を行っていました。
※リロール = 完全にランダムだとツライので、最高2回、自分のチャンプをまた振り直すことができる。

それを雑にWebアプリ化すればなんとかならんかなぁと思ってふらーっと休日、夜間にポチポチ作っているという状況です。

わからんことだらけでつまりまくって入るんですが、これが結構面白いですね。
jQueryで作ったらまぁ形はできるんだろうけど、データがごっちゃごっちゃになるので今回はReact.jsを使っておいてよかったような気がします。

eslint

後ついでに、eslintも入れてAirbnb JavaScript Style Guideも適用させてます。
これはTwitterに書いたんですが、

でもこの大リーグボール養成ギブス的な感じ、好きだわ。出来上がったコードも読みやすいし。

です

機能が足りない・・・

で、まぁとりあえずリロールできるところまで来たんですが(くっそ見にくいけど、名前の横にREROLLボタンが有る)話していて

  • やっぱし自分が持ってないキャラが出て来るのって微妙だよね
    ユーザー管理と所持チャンプ登録したい
  • この状況を共有できないとめんどいよね
    これは、URLで共有できるようにしたい、パラメーターに全部突っ込んで的な
  • デザイン、案はあるけどちょっとまともにしないと

等々、色々課題があります。

firebase

バックエンドは書かなくていいかなぁなんて思ってたんですが、この感じだと適当にAPIサーバーくらい作ったほうが良いかもとなって、もういっそfirebase試すか!って感じになっています。で、ググってたところで整理がてらBlogにまとめてる。

firebaseもちょっとだけ触ったんですけど、RDBばかり触ってたのでNoSQLはまともに触ったことがなくて、どういうDB設計にしたら良いかからちょっと記事を読んでる段階です。
Firebase Realtime DBを実践投入するにあたって考えたこと - Qiita

でもこうやっていろいろな技術に手を加えていくと、だんだんわからないことの許容量が増えて死ぬというミライが見えますね、ツライ。

何にしても楽しい

実はいろいろあってこんなことしてる場合じゃないんですが、割りと楽しいです。
ぱぱっと作ってやることやらないと。

株式会社オプトが作成したクイズアプリを試した話

Hello 2017!! 今年もよろしくお願いしますという事で、年末は掃除、年始1日から仕事の対応でSQLを流しておりましたりっくんですこんにちは。

さて、その年始のお話です。

はじめに

今回は株式会社オプトが作成したクイズアプリを、実際に元旦に試したことを書いていきます。
主に使用感と、改善するなら~という点、躓いたところを書いていく予定です。

感想ですが、非常に良くできていて、親族全員で楽しめました。
このようなアプリケーションをMITで公開してくださったオプト様に感謝し、記事として残すことにします。

アプリケーションについて

会社の納会用にクイズアプリを作りました(React / TypeScript) - Opt Technologies Magazine
会社の納会用にクイズアプリを作りました(Akka HTTP) - Opt Technologies Magazine
opt-tech/noukai_quiz_app: オプトの納会でのクイズコンテンツのために作成したアプリを公開したものです。

これです。
詳しくはBlogとGithubのReadmeを参照してください。

react-akka-aws

環境

アプリケーションがWebSocketを使ったインタラクティブなクイズアプリだったので、自分のさくらVPSでは非力且つ、現環境を壊したくないなぁと思いAWSを利用しました。
t2.microのインスタンスを立ち上げ、Java8、Nginx、Node.js、その他もろもろのインストールを行って簡単に構築しました。

はじめ、Apache2.4でリバースプロキシを噛ませようとしましたがうまくいかず、フロントはNginxにしてあります。
また、キャッシュにより問題Jsonが更新されないことが多々あったため、キャッシュもOffにしました。

この辺は僕の知識不足に起因すると思いますので、(そもそも、Portを開けておけば、Javaの実行プロセスに直接アクセスできるんじゃないのか!!って思ってました。MacのローカルでテストしているときはLocalhost(HTTPサーバー無し)で動いていたので)うまくできる方はそちらでも良いと思います。

カスタマイズする部分について

こちらで変更する部分は

  • 問題用のJsonファイルの編集
  • ログイン時に”部署”を入力するようになっていたので、今回の親族でのクイズ大会という名目上、「○○ファミリー」という項目に変更してあります。
  • 「にゃーん」という音が出るボタンは、我が家用に「たらったらったー」という、まぁ身内ネタ用音声ファイルに変更してあります。
    ※この機能は最終的におまけで計測され、ランキング最後に発表されます。
  • 50位から表示されるが、デフォルトの名前が「開発 uryyyyyyy」となっていたので、点数と合わせて差し障りのない値に変更。(dev-server.es6)

上記の4点ほどです。

使用感

下準備

もともとは新しい家族が増えるにあたって、親族のことを少しで知ってほしいということで企画しました。
その為、問題は「自分・家族に関すること」に限定しておきました。
※半分くらいはドジ話とかだったような気がしますw

問題選定は、いろんなものを集めたかったので親族に頼み、はGoogleフォームに投稿できるようにしておきました。最終的に31問も集まってしまって、1時間弱はやっていたような気がします。
この辺は、せめて15問くらいに制限したほうが良かったですね。ただ、Googleフォームを使う選択は正解でした。

実際にやったときの事

うっかり写真を撮り忘れてしまったのですが(出題でテンパってて)、人数的には18人が接続し、大盛況でした!

AWSの無料枠でやろうと思っていたので、t2.micro(vCPU 1, Mem 1GB)で構築していたのですが、18人繋いだ時点でサーバーがハングしどうもSSHの画面も反応がない事態に・・・。
この点はAWSで良かったと思いましたね・・・。一度落として、すぐにm4.xlarge(vCPU4, Mem 16GB)に引き上げ、オーバースペックだなぁと思いつつもまぁ安定稼働するほうが優先、ということで最後まで動かすことができました。

うちの環境だったらこの方が良かった!ってやつ。

クイズに正解すると、画面が虹色にグラデーションします。
おそらくこれは、企業の納会用なので正解した人がわかりやすくなるような配慮だったと思うのですが、我が家の用途では、「選択肢と、回答、正解と、当たったかどうか」を表示してあげたほうが良かったと思います。

もしくは、ちゃんとプロジェクターを用意して、問題、回答用にスライドを作り、同時にめくってあげるとかでしょうか。

また、もし家族やコミュニティで利用する場合は「にゃーん」を絶対に変えたほうが良いです。
今回、我が家のテーマ(とも言えるような、謎の音楽 たらったらったー)の音源を利用しましたが、なかなかカオスな感じになります。

理想は2秒ほどのものが良いので、誰かに吹き込んでもらうのが良いかな。

終わりに

とてもとても、楽しめました!
特に実際やった感覚では問題は「経験した中で、やってないものを一つ選べ」が、今回うちのコンセプトとマッチしていました。(これなら3つは正解で、いろいろなことを伝えることができる)

また、AWSを使えばかなり小さい金額で行えるのも良いですね。
勉強がてらに触るのもありだと思いました。

再三になりますが、株式会社オプト様、ありがとうございました。
時間があれば上記した、Forkして結果画面のカスタマイズはやってみたいです(来年の課題として親族に言われてはいます・・・)

SlackからDiscordに移行した

引っ越してやっとこさ生活が落ち着いてきた感が出てきておりますりっくんですこんにちは。
ついにソファーも購入しまして、かなりゆったり生活できるようになりました。Chrome Castも勝ったので、ソファーでまったりTwitch、Youtubeを見る生活が確立しつつあります。

Discord

ずーーーっと、Slackいいよ!って言い続けていたわけですが、ゲームをするメンバーでVCを行うならばDiscordというメッセンジャーがかなり良さそうなので紹介です。

Discord – Free Voice and Text Chat for Gamers
discrod

すごく簡単に説明すると、VCがついたSlackクローンです。ほとんどSlackです。
チャットとかファイルを送る部分、あとモバイルアプリの出来等はSlackレベルですごく使いやすいです。

そこに、ボイスチャットの機能が付いているのでゲーマーとしてはすごくありがたい。
チャットの延長でVCがあるのは誰もが感じていることだと思うのですが、VCだけ別のツールを使うとチャットが分散される問題とかがありました。(ずっとSkypeの人たちはないかもしれませんが、私がMumbleという糞チャットなツールを使っていたので・・・)

discord_view
画面はこんな感じです。Slackでしょ。

VC部分はWebRTCを使っているようですが、ほとんど遅延や音質の悪さは感じません。重さも特に気にならないかな?
今時のVCツールにはある、ユーザごとの音量調整や、チャンネル移動機能、権限の管理ができるのでほとんどのVCツールから移行可能じゃないでしょうか。

また、SlackでいうIntegrationの機能もあります。当然APIもあります。
ユーザが作ったBotを、自分のチームに突っ込むことができるので、うちのチームではRSSを管理してくれるBotを入れて、LoL関係のブログ通知をそのBotにさせています。
Slackの時は無料プランだとIntegrationの数に制限がありましたが、Discordはどうなんでしょうね。

LoL eSportsのプロ観戦者になる為のSlack Bot作った | SteadyWorX

RSSの通知は、Slackの時はGoogle App ScriptとSpreadsheetsを使って投稿させていましたが、Botを使うことでURLの追加は
!rss add <url> の形式でよく、かなり楽です。他の人も簡単に追加できます。

他にも探すといろいろなBotがあって、
GitHub – Gravebot/Gravebot: An awesome bot for Discord
これなんか、サーバー、ユーザ名を指定するとその人の今のマッチゲーム情報を引っ張ってくれたり、現在のおすすめBanとかを教えてくれます。まぁ日本鯖まだ対応してないですけど。誰かPRしてあげt・・・・!

そんなわけで、SlackからDiscordに移行しました。
まだまだVCが必要ないチームはSlackを使っていますが、こうやって代替案が出てくるのはいいですね。丸パクリはどうかとも思いますけど。

ちょっとAPIとか調べて、遊んでみたい感じでした。

プレイ動画を見直す為の動画共有サービスを作りたい。

すっかり忙しくてまともにゲームも出来ておりませんりっくんですこんにちは。ゲームはできなくてもBlogだけは・・・!というわけで、ひっさびさに更新します。
(´・ω・`)

容量はそんないらんから限定公開したい

もう、すっごくニッチな需要だってわかってるんですけど,私のほしい動画共有サービスが無くて困っております。
具体的に挙げますと

  • 時間制限なし
  • 全体のストレージは2GBとかでいい
  • つまりすぐ消えてもいいから、1本は見れるようにしたい。
  • 動画の再生コントロールをしたい
    誰かが再生したら全員が一緒の時間で再生されるみたいな事。
  • コメントが残せればなお良い(非同期的に見直したい)

まぁぶっちゃけ、ゲームの見返しをしたいんです。復習がしたいのです。
動画の見返しって結構大事で、プレイしてる時には気づかなかったこととかが結構見えてきます。 正直周りを見きれてない場合も多いですし。

そういう時に見返したいのですけど、そこが・・・こう・・・・!

今は開始するときに「せーのっ!」とか言って開始してるわけです。
これを全力で自動化したい(ぶっちゃけ恥ずかしい)

実際、シークがめんどくさいとかもあるわけです。
「MM:SSから開始したい」とか、すごいめんどくさいんですよ、ホント。

でも何とか出来そう。

でもよく考えたら動画プレイヤーって、JSで制御できるじゃないですか。
なので、プッシュ的な形で同時再生って実装できると思うんですよねぇ。

video.js
とりあえずVideo.jsを使ってみようと持ってます。

そんなわけで、やります。
WebSocketとか使うのが本筋かもしれないけど、まぁWebRTC使えばいいかなぁと思ってます。
SkyWayありますし、一回やってるし。

WebSocketを使える環境も自分のサーバーに作りたいんだけども、というかNginxをフロントにおきたいんだけども時間がなくて設定できない・・・。

そいうわけで

とりあえずLoLを想定して、プレイ動画の見直しができるようなものを作ります。
まぁ完成したら簡単に配布できるようにしようかなぁと思ってます。

いつになるか・・・、書いたからにはやりたい。

誰か手伝って。

では!

HTML5 Conference 2015にボランティアスタッフとして参加してきました!

久々の早起きで眠気がピークに達しておりますりっくんですこんにちは。
約1年ぶり3度目のHTML5 Conferenceに、ボランティアスタッフとして参加してきました!もはや恒例になりつつあるのですが、面白いです。

あまり写真は撮ってないのですが、数少ない写真と一日について書いていきます。

朝6時おき、7時出発

8時に東京電機大学 北千住キャンパスについて今回のスタッフTシャツがオレンジだということを知りました!
私はオレンジがかなり好きな色な訳ですが、今まで「白」→「黒」→「オレンジ」と変わっておりまして、そろそろ事前に告知してほしいと思う次第であります。
IMG_20150125_092853

そんな感じで、

  • 私は一番初めのオープニングトークのタイムキーパー
  • セッションの1コマ目は展示をふらふら見て、
  • 2コマ目『WebRTC/ORTCの最新動向まるわかり!』(スタッフとして)
  • 3コマ目で『HTTP/2の現状とこれから』(スタッフとして)
  • 4コマ目は『Web Audio API、 Web MIDI API を使ったサウンドプログラミング
  • 5コマ目『Polymer で作る次世代ウェブサイト

と、結構ガッツリと見てしまいました。
それでは、その辺をそれぞれメモ代わりに書いておきます。

WebRTC/ORTCの最新動向まるわかり!

WebRTCは以前からちょいちょい興味を持ってました。
もともと、サーバーサイドのアプリケーションを書いた経験がなかった私が、WebRTCを使えばフロントのJSだけでいろいろできんじゃーん、P2Pサーバーいらないじゃーん!みたいなところから手を付けた技術だったりします。
(※なんだかんだでサーバーは必要です。)
特に、講演者の仲さんの所属するNTTコミュニケーションズが公開している、SkyWayは、このBlogでも何度か取り上げてる気がします。まぁ、ちょっと間違った使い方をしているような気がしますが、WebSocketでヤレって感じではありますな。
SkyWay – WebRTCを簡単&柔軟に使えるプラットフォーム

このセッションもその次もですが、非常に盛況でした。
自分が多少曖昧に覚えていたICEの仕組みなどを解説してくれたので、良かったと感じてます。

他にも、Native Appで実装できそうとかいろいろ教えていただき、少しこの分野もやり直したいなぁと思ってます。

HTTP/2の現状とこれから

HTTP2も興味がありました。
これはVPSでCentOSを動かし始めてLinuxに触れ、実際にApacheやNginxを動かす機会が増えたからだと感じてます。

SPDYの頃から少し興味を持っておりましたが、HTTP2はかなり良い感じに進んでいるなぁと、素人的には感じているので、積極的に取り入れていきたいなぁと思いますね。
ただ、自分のサーバーはあまりちゃんと整備しきれていないので、まずはNginxをフロントに置くところからやり直したいなぁと思っております。

Web Audio API、 Web MIDI API を使ったサウンドプログラミング

ギターをやっていたこともあって、結構興味あるんですよWeb Audio API。
これ、案外色々楽しめると思うんですよね、遠隔でセッションとかMixとか。しかも波長を計算出来る環境は整っているのであとは独自に組んでいけば良いみたいな状況になってるっぽいです。(ただしブラウザ間差異あり)

コレを聞いてて思ったのが、ボイスチェンジャー付きなボイスチャットが、WebRTCと組み合わせて作れないかなぁってところでしたね。
何とかできないかなぁ・・・。


閑話休題

IMG_20150125_160253

「レッドブル」と「ビン・カン」で分ける意味がわからない。


Polymer で作る次世代ウェブサイト

Google 北村さんの講演。
一番びっくりしたのは結構Sublime Text2時代、活動していたと記憶していた北村さんが、Atomに乗り換えたと語った瞬間かもしれない。

正直にいうと、あまりPolymerの凄さを実感できていない。
というのも、SPAなどのガッツリJSみたいなものは作らず、基本趣味で作っているレベルで見た目レベルのものしかやっていないからだろうと思ってます。

ただこれも、Web Audio APIの話を聞いた後だと、むしろエフェクターを組み合わせる、みたいな部分にPolymerが使えるんじゃないかなぁって感じますね。
それなら、エフェクターを開発者が作って、Web Componentの技術を使って切り貼りすると好きな音作りができるみたいな(DTM界では一般的だと思う)、やってみたいなぁと思うわけですw

IMG_20150125_171914

で、スペシャルセッション

スペシャルセッションで行われたクイズ、全問正解して8位でした!!!!!(タイム激遅)
で、頂いたのがこれ。

IMG_20150125_185936

Firefox OSベースの開発者向けクリエイティブプラットフォームを開発 | 2014年 | KDDI株式会社

FireFox OSが入っているコンピュータ。HDMI出力が標準であるので、さして即使うってことができそう。
箱がかなりしっかりしていて、磁石でちゃんととまってるんですよ。

うーーー、時間があるときにどうしてもさわりたいなぁこれ!!!!
KDDIさん、ありがとうございます!

やっぱり楽しんでしまった。

毎年のことだけれども、やっぱりすごく楽しんでしまいました。
ボランティアスタッフとしてはかなり楽しんでいると思います!!!!

朝が早かった(夜も遅かった)のですごく今眠いのですが、忘れないうちに記事にしようとこんな時間に・・・。
写真、楽しみにしてます。
みなさま、お疲れ様でした。また来年!


そんなこんなで懇親会がなかったので、お疲れ様会。
IMG_20150125_193248

懇親会が2月とかにあるみたいなので、その時また!

明治大学「楽農」4HクラブのWebページ制作った。

どうもこんにちはすっかりBlogを放置しっぱなしのりっくんです。
久々の更新ですが、新規でWebページを作ったのでその報告でもと。

「楽農」4H

明治大学 「楽農」4Hクラブ 公式Webページ
楽農4HWebSiteTop

今回製作した明治大学のサークル、「楽農」4Hクラブとの関係は、バイト先のお友達つながりなのですが、実はその前のWebサイトも僕が作りました。2年前の12月になるのかな?当時ちょうどWebページを作り始めたくらいでMacbookAirを初めて買って制作したものだった気がします。

2年前、それもWebページをようやく作れるようになったくらいの私が作ったページなので、それはそれはなかなか今見ると恥ずかしいようなサイトだったわけです。
確か当時Ajaxとか言われて、言われさるかなぁってタイミングだったような感じで、自分でもページ推移の少ないWebページをつくろう!って言って、ようやく覚えたJavaScriptとjQuery(最強のプラグインかと思った)を駆使して、ググってなんとか完成させたサイトだったなぁと。

思えば、誰かに頼まれて作った一番初めのWebサイトでしたね。自分みたいなペーペーに作らせて頂いて、ほんとに感謝。

しかしあのデザインは・・・

自分もまだまだデザインとか苦手なのですが、前のサイトのデザイン、個人的にすごく不満が残っておりました。当時それだけの技術がなかったので仕方ないのですが、だんだん、ちょっとずつできることが増えてきて、あのままではアカンなぁと思っていたわけです。

当時、自分にサイト制作を頼んだ人はもう卒業してしまっていたのですが、その後輩がバイト先には入っていて、お友達なわけです。で、更新って形で作っておりました。

どういうことを考えて作ったか

おおまかに2個、考えなくてはいけない点がありました。

  1. スマホ対応、タブレット対応はどうするか
  2. 更新性の担保
  3. デザイン

スマホ対応

大学生とかスマホがメイン端末でしょ?

まずスマホ対応。これは必須かなぁと思っております。
このサークルのページは、部員が見るというよりも、新歓期に新入生が情報収集として訪れるページだと聞きました。実際に、Webページをみて入部した部員さんも少なからずいるそうです。
そして大学1年生、PCで見る人がメインなわけがないなぁと思って、これはスマホ用にデザインを作るべきだろうという結論に至りました。

私個人は、切り替えできるようにしてほしいなぁと考えているわけですが、今回はコンテンツの表示数をPC、モバイルで減らない(隠すとかしない、どちらも同じコンテンツが表示される)ので、良いかなぁと。

ということでHTML5で。まぁ今更XHTMLとか使う必要ほとんど無いと思うんだよねぇ・・・。マークアップしかしないなら対応もクソもほとんど関係ないような感じだし。IEも7までは切っていいでしょ・・・?w

レスポンシブWebデザイン初挑戦

で、いざ作り始めたわけですが、構造が簡単だったこともあり、一人で好きなツールを使って開発できる環境でSassをガンガン使い、結構らくらく作れました。まずはPC版作って、スマホに対応させていく感じでいじっていきましたね。

デバッグはPCにてChrome,firefox,IE8-11、モバイル系はiPad, iPhone5, iPhone5S, XperiaA, Nexus7 2012
あとSharpとPanasonic系のAndroid標準ブラウザで、heightの解釈が他のと違う現象が起きて、そっちでも一応確認したのかな。多分大丈夫だと思う。部員でバグったら教えてと入ってある・・・w

更新性

あまりうまい仕組みを作れなかった・・・

CMSがあるわけでもない、ただHTMLとCSSとJSを返すくらいのWebサーバーで、権限もさっぱりわからないような場所だし、依頼者の方に聞いても絶対わからないだろうから、・・・いろいろかんがえたけど更新性は悪いと言わざるをえない。

一応、毎年変わる“幹事長とか副幹事長、書記”を書く部分については、周りのタグを消さないようにすれば 大丈夫って伝えてあるので、名前だけ交換してくれると思う・・・。

ただ、Blogの最新エントリをGoogle Feed APIをつかって取得するとか、Flickrにアップする部員の画像をその都度取得して表示するとかそういう機能を作ったので、多少は更新されていくページになったと思う。

デザイン

背景画像拡大がやりたくて仕方なかった。

こういう、なんとなく今どきっぽいページを作ってみたかった。1ページのWebサイトにしたのは、あまりコンテンツ数が無いのがわかっていたから。

ただ、拡大もあまり簡単ではなかったのかもしれない。CSSでイケルと思ったら、iOS系でなんか変な動きをするとかで、結局JavaScriptを使ってWindowサイズの変化を見て、動的に背景画像を置く要素の大きさをイジってる。

あとはスクロールに合わせて背景画像を変えてる。こういうのも面白いなぁと思って。
ちなみに、waypoint.jsっていうライブラリが、ある要素が画面の一番上に来たってのを簡単に取得していじれるのでおすすめ。

完成して

完成したなぁと。前のページはさぞアレだったなぁ・・・・w
まだまだ、うーん、なんと表現していいかデザインがぼけてる部分があるとは思ってるんだけどまだ自分の力不足かなと。

でも一人で作った割にはある程度の成長が見れたので、作ってよかったという感じが結構、達成感なのかな?

これからもちょいちょい作っていきたいね!

Web Mancala beta

どうも、学校の図書館がすでに冬休みに入っていて資料を漁れないという状態になり困っておりますりっくんですにちは。こればっかりはしかたない、なんとかしないと。

WebMancala

jsでマンカラ

Facebookでは少し書いた気がするんですが、マンカラってゲームが僕のバイト先近辺ではやっておりまして、んで、それをJavaScriptで作ってたんですよ。せっかくなので対戦機能を付けたいなぁ、サーバーサイドどうしようかなぁとか考えてたんですが、そうだWebRTCがあるじゃん、と。

そしたら12月の頭くらいに発表されたSkyWayを思い出しまして。

SkyWay – WebRTCを簡単&柔軟に使えるプラットフォーム

WebRTCって言うと、ビデオチャットってイメージがとても強いんですが、普通にテキストチャットも作れるし、さらに言えばファイル交換もできる結構なすぐれものだったりします。しかもPeer2Peerで接続してくれる。

実際に、これをしっかりしたゲームにするには改変とかされないようにするためにサーバーで管理しないと行けないとは思いますが、知り合いどうしと対戦するみたいなものなら、WebRTCでつないじゃったほうがフロントでjs書いてれば何とかなるし良いかなぁと。

あ、マンカラについてはググってください。

マンカラ – Wikipedia

動画

ってことで、作ってみた動画をYoutubeにアップしたのでどうぞ。

とりあえず接続して、そこからあとはjsonをやりとりする感じにしてます。まだしっかり設計してないですけど・・・。バグもいっぱいあるんですけど見えないようにしてますけど。見えてる部分のデザインも全然つめてないですけど・・・。

WebRTC面白い

しかしWebRTCがすごく面白い。こういう対戦ゲーム、リアルタイムなものは難しいけどターン制なら結構いけるんじゃないかな!
再接続処理とかその辺をどうしたらいいかは・・・、しょうじきわからんのですが、まぁいろいろ考えていこうかなぁと。

多分そのうち公開します。

参考サイト

いろいろあるんですが、Web先端技術味見部の資料が参考になりました。

Y-NAKA/skyway_ajimibu

ありがとうございました。

[html5conf2013]HTML5 Conference 2013 ボランティア参加者側まとめ

どうも締め切りに追われていて大変ですりっくですこんにちは。

HTML5 Conference 2013についてのまとめ記事を書きます。とりあえず日付が変わるまでに書き終えたい・・・・!!

NTT研修センター的な

「Blogを書くまでが勉強会」

昨日2013/11/30に行われた「HTML5 Conference 2013」に、今年もボランティアスタッフとして参加してきました。

HTML5 Conferenceにボランティアで参加してきました! | SteadyWorX

HTML5のいろいろなものに興味が有ることと同じくらい、前回のスタッフの経験が楽しかったことが今回参加する要因になっていて、また楽しい時間をすごすことが出来ました。

メモアップロード

memo style

ひとまず「Blogを書くまで勉強会」ということで、時間的に余裕があってメモできた部分を共有します。

[html5conf2013]ようこそHTML5裏APIの世界へ memo | SteadyWorX
[html5conf2013]LightningTalk memo | SteadyWorX

裏APIの話は輝かしいHTML5の闇に潜む、怪しい、というか使いにくいであろうAPIについて実演も含めてのセッションでした。
実はこのセッションの講演者であります、羽田野太巳さん、前回のConferenceでも見させていただきました。
HTML5マークアップ珍プレー集 – HTML5 Conference 2012 – YouTube

発表自体も旨いのですごく面白かった記憶があります。今回も実際にすごいと感じる部分や、笑わせるところや、そのようなメリハリがしっかりしていて、あまり「裏API」がわからない僕も楽しませていただきました。

それ以外では聞いていたけどメモは取れなかった、ICSの池田 泰延 (clockmaker)さんの「Canvas/WebGLを活用したインタラクティブ表現 〜CreateJS、Three.js、Away3D.js」とかを見ることが出来ました。

LTは、特に会場の無線LAN構築の話がすごく面白かった。前回の反省からかなりしっかりしたものができていたように感じます。

スタッフをしていて一度部屋のネットワークが落ちたことがあったのですが、知らせるためにシーバーを持ったhtml5jのスタッフさんに話しかけると

「伝えておきます、もう治ってると思いますけど」

と、不思議な説明がw
で、iPadでネットワークの確認をしてみるともう治っているという素敵な状況。LTの最中にどのような監視を行っていたかもちょろっと説明してくださいましたが、あそこまでしっかりしていると不満もあまりありませんでしたね!!(最後にほとんど不満の声(手?)を上げる人がいなかった)

ボランティア

前回も参加していた方がちらほらいらっしゃって、なんか久々にお話できて楽しい感じになりました。また、今年から参加という人にもたくさん出会え、刺激的な一日になりました。

きっとチャーリー@きのこの山さんはSurfacePro2を有効活用して世に素晴らしいアプリを出してくれることでしょう。

ルーム

今回も前回同様のルームと言う担当で、5セッションのうち3個のコマでルーム内の整理などを行っていました。

希望通りのセッションは比較的聞けて、ついでに仕事ができるみたいな感じ。

スタッフTシャツ

今回はこんなスタイルでした。ボールペンは必須。あと裏に配布してあったステッカーが詰まってます(笑)あとあのレッドブルは配布されてたレッドブルの中に入っていたやつです、飲んだ本数つけていきました。(後述)

staffTシャツ

前回から参加しているボランティアスタッフの間で話題だったのは、去年よりTシャツの質が良いという点。あと黒だってわかってたら黒のインナー着なかったのに!!みたいなところですw なんか「黒に黒でロンTみたいですね」というお言葉を頂きました。・・・赤いインナー着てた人のかっこよかったなぁ。

レッドブル

red bull
こんな感じでした。1200本だと思ったら1200セットで、2400本来たとかそういう話だったみたいです笑
とりあえず2本飲んで、担当の場所に行って帰ったらなくなってるみたいな不思議な状況だったんですけど、なんかいろいろなところで配った成果ではけたんですかね?すごかったなぁあれ。

MacbookAir

11インチ持ってる人がいて、その人は13インチがほしいといい(RetinaPro)、僕は11インチがほしい。MBAに関しては11インチと13インチのないものねだり感がすごいというのを再認識。あと最後のLTでも言ってましたが、会場のMac率すごいです。Web系ってホントMacのほうが楽ですし、そもそもかっこいいし・・・。

Apple教みたいな言われ方がありますが、僕は普通にコスパ高いと思います。みんな情況だし・・・。余談ですけど!!!

Conferenceの終わりと懇親会

end of conference
end of conference
end of conference
end of conference

ってことで終わりました。最後のクイズはきのこの山さんに完全に持ってかれましたけどなんなんですかねあれ、いいんですか彼でw

懇親会、会場が食堂って聞いてなんかあまりちゃんとしてないのかなぁと思ってましたが(ごめんなさい)

懇親会会場
なんかすごく綺麗・・・。さすがNTT。

いろいろな人とお話できました。

終わりに

今回Conferenceも大変楽しく参加させていただきました。

前回のConferenceの説明でたしか白石さんがおっしゃってたのですが、「ボランティアも参加者の一部としてConferenceに参加してください」という旨の説明をされました。今回同様の説明があったかはじつは確認してないのですが、おそらく同じようなものだと(勝手に)解釈し、最大限楽しませてもらいました。

様々な知識が集まって、たくさんの情報が飛び交い交換され、人と人がつながって拡大していく素敵な会だったと実感しております。

これからも続けば、続くのならばぜひまたボランティアとしてConferenceに参加したいと考えています。

最後に、スポンサー、スピーカー、スタッフ、ボランティア、ゲスト、すべての会に関わった皆様、お疲れ様でした!!

[html5conf2013]LightningTalk memo

どうもこんにちは、HTML5 Conference 2013明けなりっくんです。そのときメモしたものをとりあえずアップします。メモレベルなので大したことないですが。

image

LT


ここまでの分抜けてます。


@tomo_watanabe

information Electronics(iE)
いろいろなものがつながるんじゃないか

組み込みとWebはだんだん近づいてきている。2009年にはAndroidにより近づき、HTML5によりさらに近づく。
モバイルが高性能化した
ハードとHTML5で注目される
node.js + websocket

JavaScriptで動かせるハード。PWM.ADCなどの制御
konashi HDKforHTML5

M2M(Machine to Machine)
Push型車載ナビを作った

ポケットマネーで買おう。

@nunnun

HTML5 Conference 2013のネットワークの話

去年の反省点

  • Nocを作らなかった。
  • APが全然たりない

今回はネットワークの監視を行っていた。1秒毎

CGNっていうすごい機械を借りていた。
大きなNAT、Max2万

Apple 69%!(1:10)
ケーブルの総延長2.5km
AP 946台
瞬間最大61% IPv6

@iizukak

Knockout
MVフレームワーク

データバインド = モデルとビューの結びつけ

それをラクにするのがMVフレームワーク。
MVフレームワークはデータバインドを楽にするものだと考えている。

Knockoutについて

  1. データバインドが読みやすい
  2. データバインドが書きやすい
  3. 組み込みのデータバインド系が良く出来ている。
  4. 拡張が用意
  5. 公式チュートリアルがイケてる。

@なかゆうすけ

WebRTCにハマっている。

デモ

WebRTCは世界的には流行ってる。
意外と簡単、やってみるといいよ!!

高橋智宏

レーザーレンジスキャナーとWebGL

雪を計測したい。除雪費用200億円

Cyber Physical System
現実世界と情報世界を相互に接続

赤外レーザーにより距離を計測する機械。
回転しながら