2013年 12月 の投稿一覧

2013年振り返り

大掃除がようやくおわりましたりっくんですこんにちは。昨日今日と二日間まるまる掃除してた・・・、いろんな場所をやるから大変である。

まとめ

細かく振り返るほど暇でもないので(まだやることが・・・。)とりあえず適当に。

このBlogでよく書くようなIT分野の事に関しては、今年は契約したVPSを色々使えたなぁという年だった。いつから契約したか忘れたけど、Node.jsでTwitterbot作ってみたり、IRCに常時接続しておいてログを拾ってくるようなProxyも挟めて、ある程度便利な感じになった。特にNode.jsのほうは、プログラミングで自分の生活を楽に!みたいなものを実現できたのがすごいよかったなぁと。

最近のネタ IE6|IRCProxy | SteadyWorX
TwitterBotをNode.jsとntwitter使って運用中、参考記事紹介 | SteadyWorX
IRCbot | SteadyWorX

あとはGit。これもすごく大きかった。こひめ先生のお仕事をお手伝いすることがちょいちょいあって、毎回ファイルの共有とかがめんどくさかったんだけど、Gitのお陰で本当に楽になった。勉強してよかったと思えたなぁ!

Gitの共有レポジトリをCentOS 6なさくらVPSに作ってみた話 | SteadyWorX

そんでhtml5 conferenceかなぁ、本当に楽しませてもらってる。少しでも貢献できるよう(??ってわけでもないけど)知り得た知識で作ったのがついこの間のWeb Mancala beta。WebRTCおもしろいですね。ブラウザtoブラウザができるのが面白い。いろいろアイデアが出そうな感じだ。

[html5conf2013]HTML5 Conference 2013 ボランティア参加者側まとめ | SteadyWorX
Web Mancala beta | SteadyWorX

Web Mancalaの方はそのうちGithubにソースを公開していきます。あまり理解度が低い人はいろいろつまずくこともあるし、サンプルがあるとすごく助かるので(私のことです)

リアルはこれから本気出す。

※Blogエラーはいてるの見つけてしまった・・・うへ

バイト先で友達と書いた

バイト先で友達と書いた。

終わりに

ということで、今年も一年お疲れ様でした。
私に付き合ってくれた方々に感謝の言葉を述べつつ、良いお年をお迎えくださいとしめさせていただきます。

来年もどうぞ、よろしくお願いします。

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

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

MacbookAir11インチ購入!!!

どうもこんにちは、新しいMacbookAirの電池の持ちが良すぎて、一度空にする作業に手こずっておりますりっくんですこんにちは。そんなMacbookAirのお話をします。

macbookair11 iyh

MacbookAir11inch mid2013購入!!

うことで、MacbookAir11インチを購入しました!
今回もAppleStore(公式)から、カスタマイズしたものを購入しました。カスタマイズしたのは

  • メモリ 8GB
  • USキーボード

の二点です。
今まで使っていた13inchAirはメモリ4GBで、まぁそこまで大きな不満もなかったのですが、たまに1GBを切った時など、精神衛生上よろしくなかったので今回は余裕を持った構成にしようと思いました。
また、USキーボードも普段から使っているので、無料ですしカスタマイズしますよね。

カスタマイズしなかった点として、CPUとSSD(これは240GBにしなかったって意味で)ですが、モバイルPCでガッツリ動画をいじることもないですし、CPU起因できついと思ったことはほとんどないことから今回もカスタマイズはしませんでした。
同様に、SSDも自分でやりくりできる範囲に収まっていたので、わざわざ240GBのタイプを買う必要はないなぁッて感じです。

11inch雑感

MacbookAir良いなぁ!!

サイズ

小さい!!!
画面サイズが個人的な一番の不安だったのです。というのも、13インチを買ったきっかけが、11インチでは解像度が小さいなぁってもので、それを覆してまで11インチを購入しても良いものかというのはずっと悩んでいたのです。(いろいろな人に解像度の件をお聞きしました。答えてくれた方々、ありがとうございます)
バッテリーに関しては、Mid2011の13inch並に11inchも持ってくれそうだったので、本当に解像度だけだったのです。

で、まだガッツリ使ってないのですが、使ってみて気がついたのはそもそも13インチの解像度ですら中途半端に小さいと感じていたということです。どういうことかというと、結局モニター上にエディタとブラウザを両方表示することはできないので、基本はCommand+Tabで切り替えながら確認をするので、11インチだろうが13インチだろうが、結局その動作を必要としました。
あとは一目で入ってくる情報量ですが、コードを書いてる間はまぁなんとか・・・なるかなぁって感じ?ブラウジングは大丈夫でした。
トレードオフなので妥協できる範囲という感じでしょうか。一応外部モニターを前提にしていので、いざという時、この点は大丈夫でしょう。むしろ、Air自体が小さくなったことで、外部モニターが見やすくな入りました(私の環境で)

タイプ感

タイピングの感じはほとんど違いがないですね。ファンクションキーのサイズが小さくなったことでちょっと押しにくくなった感じはありますけど、そこまで使うキーでもないので問題ないでしょう。

電池

・・・これがすごく持つんですよ。びっくりしてます。

公表値がすごく長くなっていたので期待していたのですが、手に入って一度空にしようと思ってるのになかなか空にならないんですよこれが(笑)むしろ困るという。

届いてから

環境の復元にTime Machineを使いました。これもすごく簡単でびっくりですね、届いてから30分くらいで環境がほとんど復元しました。
唯一、Googleドライブのみうまく行かなかったので、一度Googleドライブをアンインストール、フォルダを削除、再インストールの手順で復元しましたが。

timemachine便利

まとめ

11インチ、サイズが小さくて本当にすばらしい、これはiPadの代わりになるんじゃないかなぁと期待してます。(iPadはまだまだ使いますけど)

さーって、これでBlogも書いていこうっと!
さっそくウドラシール貼りました

[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
現実世界と情報世界を相互に接続

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

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

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

image


ようこそHTML5裏APIの世界へ – 羽田野 太巳 –

かなりマニアックな話をする。

マニアなAPI

モテ系APIとは

  • 鮮やか
  • 仕事になる
  • 情報がネットに溢れるなど
  • 視覚的にすごい

非モテ系API

  • 語れる仲間がいない。
  • 使っても凄さがわからない
  • 仕事になるかわからない
  • 仕様がなくなるかもしれない。(W3C)

レベル1


WebRTC DTMF

WebRTCとは

SkypeをWebで
映像音声データをP2Pで接続する
しかし、IP電話の知識が必要
通信業界でのみ熱い!!

Peer to Peer DTMF

Dual-Tone Multi-Frequency
ピッポッパッというダイアルトーン音を発生させるもの。
P2Pで繋げたあとに送るもの。
将来的に電話網につなげるようになった時に便利となるAPI。

Web Audio API

特徴

音声の生成や合成が可能
iOSでは複数音源の同時再生に重宝
getUserMediaを使ってオーディオストリームを音源にする

これはまだモテ系

非モテ

  • 遅延
  • 波形整形
  • ダイナミックレンジ圧縮
  • 音響効果
  • 各種フィルター
  • 立体音響 ←ヤバい

立体音響

PannerNode

あたかも動いてるかのようなものを作ることができる。
ドップラー効果のデモ

仕事になるかわからないw
が、モテ系に近い

Media Source Extension

特徴

HTTPアダプティブストリーミング配信
セグメントに分割されたビデオデータをVideo要素に流しこむだけのAPI

MPEG-DASH

Dynamick Adaptive Streaming over HTTP
MediaPresentaitionD—

MPD

なにもAPIがやってくれないので、プレイヤーを作るのに腕がかかわる。

GPAC MP4box
コマンドラインベースでセグメントファイルをつくる。

Streamingなので巻き戻らない。

Media Capture and Streams screen capture

全画面がキャプチャーできる。
WindowsでやるとOSごと引きずられて落ちる。

ちょいちょい監視するとかに使えるのではないか


レベル2


Encoding

デコードやエンコード

Web Cryptography API

IE11のみ?(Chrome)

暗号論的擬似乱数列の生成
ダイジェストの生成 などなど

DRMとかそういうところから来ている仕様。

ストレージにいろいろなデータを取得するが、それを暗号化しておきたという場合はもしかしたら使えるかもしれない。

DOM Matrix

行列計算

グラフィックス向けな座標変換
3×3 4×4が可能
回転、拡大、縮小などができる
もともとはCSS Matrixと言われていた。

Transferable objects

データ転送
通信ではなくWorkerに送りたい。 とき


レベル3


Clipboard API

コピーとかを取得できる。
今のところPasteだけしかできない。

でも、OSの機能をつかえばいいじゃん?w

Base64 utility methods

ASCII文字だけ
バイナリどころから日本語もだめ
利用シーンが思いつかない


レベル4


The Screen Orientation API

オリエンテーションを固定できる。
状態を把握、ロックできる。

Media Stream Recording

録画録音
Blobオブジェクトとして取り出せる
FirefoxAuroraがオーディオのみサポート

Web Animations 1.0

一つもブラウザが実装していない
タイムライン制御
アニメはCSSはSVGAnimationsで実現
連続処理と並列処理
ビデオ再生のように扱える
実装ブラウザーはない(けどGithubにて公開されてるポリフィル)