html5

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月とかにあるみたいなので、その時また!

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

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

[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にて公開されてるポリフィル)

メモ:第39回 HTML5とか勉強会+日本Androidの会 2013年5月定例会 #html5j

こんにちはHTML5とかAndroidの勉強会に参加して来ましたりっくんです。とりあえずアップしますけどこれメモをほとんどそのままアップしてるので誤字脱字がひどいと思います・・・。それでも読む人はどうぞ・・・!


飲食禁止!!
初の2つのコミュニティによる合同イベント

DSC_0169

「最近のHTML5はどうなっているのか」

最近坊主にした。Google I/Oで禿げたイケメンを見て目指す。

HTML5

マルチプラットフォーム
マルチデバイス
技術的な成熟

技術的な成熟
「7つの◯◯Web」

オフライン(電波がなくてもOK、[アプリケーションキャッシュ、Web Storage、Indexed Database API、File API]
リアルタイム(Web Socket、GoogleSplish Sheet、Twitter、Facebook[Web Socket, Server-sent Event(Commet), Web RTC]
レスポンシブ([CSSメディアクエリ レスポンシブイメージ、グリッドレイアウト]
セマンティック(何かしらの意図を持ってマークアップする、その意味を込めることができる。
するとそれをプログラムから取得できて、Webが大きなDBになる。[html5 Semantic Elements, Html5 Microdata, RDF/RDFa/RDFa Lite, Microformats]
スピーディ(SPDY、TCPIPのReconnectをなんとかする。[SPDY, HTTP/2.0, オフライン技術]
プラットフォーム(TIZEN,Chrome OS とくにモバイルプラットフォームのWeb、Webがプラットフォームとして浸透している
インプレッシブ(白石作 感動的な)(3dのグラフィックスやシンセサイザーを作るだとか、そういう今までできなかったすごいもの。すごい、もの。ROME([Web GL, HTML5 Canvas, SVG, Web Audio API

Webアプリ VSネイティブ

どちらも一長一短である。

「AndroidとChromeの統合について」丸山

Webアプリの変化(Rich Cliant

Webアプリといえばサーバーレンダリングを送り出すというもの。これが変わろうとしている。
サーバーサイドのWebアプリとAndroidはあまり連携されない、つまりAndroidはまだ単体で動く系アプリである。AndroidのブラウザのHtml5対応遅れが存在した。

今はサーバーサイドのWebアプリのスタイル見直しが行われているHTTP/2.0とかSPDYなど。かなりWWWが臨界点に近づいている。
もう一つ、クライアントの性能がかなり向上してきている。

WebアプリはサーバーサイドのWebアプリと、クライアントサイドのWebアプリに分岐してきたと言える。

Packaged Web Appとは
基本的にはWebアプリ。
・ネットワーク接続を必要としない
・Cloud enabled by default
・デバイスのハードウェア、OSリソース変おアクセス。
・Packagedの形でアプリ配布が可能
・新しい、Contents Security Plicyを採用する。
この背景にあるのは、サーバーとクライアントの役割を見直し仕様。Rich Clientなどなど。

◯Rich Client
クライアント側がリッチになった。
サーバーの負荷増大
ネットワークトラフィック増大
プログラムとViewの分離の難しさ
 すべてがサーバー側でコントロールされていて難しい
 プログラマはデザインの変更を嫌い、デザイナーはプログラムの変更を嫌う
8CoreAndroid時代の始まり(Rich Client ,GalaxyS4

◯Thin Server Architectrue
Webアプリケーションフレームワークの慢心と複雑さに対する反応
プレゼンテーション層をクライアントへ移そうとする。(←これが重要
サーバーはViewを管理しなくて良くなる。
クライアントが分離して開発するので開発が容易に。
→ Rich Client Thin Server Architectureはネイティブアプリまで内包する考え方。

AndroidとChromeの統合

AndroidでのWebアプリ開発の遅れ、ChromeのHTML5の対応が遅い。
Androidのスペックが悪い。Chromeが乗ったことでマシになってきた。
これからはPCとAndroidのバージョンを同じにして同時に提供するようにする。Chromeが動くAndroidは50%
基本的にはiPhoneとAndroidの牙城を崩そうとしている形(第三のOS

統合とは
AndroidのChrome標準ブラウザ化
AndroidへのPackageed Web Appの導入

そのタイミングはAndroid5.0だか、Chrome29とか・・・

AndroidとChromeマーケットの統合もあり得るはず

Chrom Packaged Appの開発スタイル

ブラウザベースではなくランタイムへ。WebViewは使わない。

AndroidとChromeの統合と開発者

飛躍になるだろう
iOSアプリユーザーの3-5倍以上、ユーザーが存在するAndroid。
日本はGooglePlayのアプリ登録数がやばい。2位、米国を抜いた。
知識と技術の偏在のグラフ、表
50$携帯でNext Billionへ。

日本のAndroidアプリ開発者の課題は
Cloud enabled by default

「ハイブリッドアプリの設計」Hidaka Kazuaki

アプリの開発の流れ
端末スペック向上
HTML5の仕様が固まってきた
iOSのUI面での審査が緩くなってきたなど

ハイブリッドアプリのタイプ

ハイブリッドアプリとはHTML5を生かしたアプリ
公式マーケットで配布できる。
複数プラットフォーム対応しやすいメリット
ハイブリッド=技術を組み合わせる

◯タイプ1  WebViewをラッピング
アプリはWebViewを包むだけのもの。
コンテンツはサーバーに置く。
Webアプリをそのまま移植できる。

◯タイプ2 WebViewをラッピング
1とは違いHTMLはアプリに埋め込む
サーバーとはAPI通信を行い連携
ローカルでもある程度動かせる、アプリの実装の代わりにHTML5を使う

◯一部の画面でWebViewを利用する
基本的にはNative
WebViewを利用することでメリットのある画面はWebViewを使う。CyberAgentのやつとかNikkei Bussiness

アプリの設計

大事な方針
とりあえずHTMLではなく、どちらでやったほうが価値がある画面なのか。
価値とは→ 出来上がるものの品質、実装コスト、運用コスト(ここはなにか有りそうだからHTMLつまり汎用性が高いもので)

WebViewが適さないもの
・リストやギャラリー画面
Nativeのリストが持つViewの再利用・画像キャッシュ・開放などのメリットが大きい。
・起動時の画面
表示するコンテンツ以外に付加情報を取得したい画面
データ量を減らしたいし、バージョン見て動かしたいとか。

WebViewが適すもの
・詳細画面などのコンテンツ
・HTMLのレイアウト能力の高さはNativeのそれより高い。回り込み、枠付、リンク挿入など
・特に更新されていくコンテンツの運用では当初の想定外の見せ方が可能

実装例1
WebViewの進む戻る推移と、Nativeの画面偏移の問題が起きやすい。
→ WebViewでのりんく偏移はさせない方針 or 遷移はWebViewで行い、Native部分はダイアログ展開。
実装例2
・長押し処理・フックの処理はjavascriptで行い、Native側に通知
・Call:, Mailto:などのリンクは定番なので対応しておく
・Cookieでログイン状態を連動させる。

忘れがちな違い。
HTMLでの遷移は画面遷移ごとにサーバーから取得する。
NativeならAPI通信で選択できる。

Cookpadはなぜハイブリッドアプリか

もともとWebサービスでコンテンツがサーバーにある。
PC、タブレットと常に同期しているものも多いのでローカルで管理するのは微妙。
更新が多い、リアルタイム性
特定の機能を提供するアプリというより総合アプリという立ち位置。

ローカルで行なっているのは
アプリ関連形容のアカウント情報管理
レシピを載せる機能全般(投稿系
各種ダイアログ
検索時の候補、音声検索、ウィジェット

運用上の理由
細かく仮説・検証が行われているChanko bit.ly/cookpad2012
A/Bテスト、一般ユーザー向けテストをするための環境が整っている。
・スマホサイトとAndroidでコンテンツを共有化

まとめ

ハイブリッドアプリの幅は広い
WebViewのメリット・デメリットを把握しよう
運用は大切
仲間も大切

「ハイブリッドソーシャルアプリの現場」

ポケラボ(6年目のそしゃげ 作る会社

ポケラボとはどんな会社か

社員200名位。
Androidではあまり高い順位をとれていない、そこにハイブリッドの課題があるのではないか。

なぜハイブリッドアプリを採用したのか

ガラケー向けアプリ開発がもともとだったので、Web開発者が多かった。
投資先がWebが最終的にかつんじゃねーの?って言った。

負のログインボーナス

もともとFlashだったのでNativeでのアプリケーションがつくれなかった。
初めはSwiffy(Android動かないものもある)、今はCreateJSを使う。

実際どうなの?

今はiOSもAndroidの両対応が可能。
Nativeは映画を作ってるイメージ。ソーシャルゲームはテレビ局の視聴率を常に高い視聴率を取らないといけない、そういうイメージ。

Flashを使ってCreateJSで書きだす。

WebViewって遅いんじゃないの?
画像とかは一度しかキャッシュしないようにするとか、そういうことをやってる。

◯発生した問題点
アバターをBoneで動かしたい→AS、オブジェクトを無理やり配列に入れてJSにする。
スキルが110、画像データとかJSとかサウンドとかヤバイ。→ require.jsを使うとか。Webの動作が重い。

ポケラボエンジニアがAndroidで目指すこと

ポケラボエンジニア100人
「より早くより快適に動作して楽しんで貰いたい」

ハイブリッド固定メニュー

アプリに重要なヘッダー・フッターの固定メニュー
けどoverflow: scrollとposition:fixedが動かない
→ ネイティブで実装

ハイブリッド高速アニメーション

基本的にCreatJS
多少遅いこともあるので自分で作る。
基本的にハイブリッド(WEBからの指定)
リソースは使いたい
快速アニメーション

→2段階変換
Flash→JS→Nativeと変換させる。独自コマンドをAndroidのCanvasに変換し、描写。
CreateJSの3倍くらいのフレームレート

iOSとのUUID連携

AndroidのUUIDが発行できん。重複しない一意な値。
ただしアプリをアンインストールすると同時に削除されてしまい別UUIDが生成されてしまう。

1端末1IDの為にサーバーを介して管理するようにしている。端末、アプリ、関係なくコラボ連携可能になる。
外ではAndroid、家ではiPadを使って遊べる。

Androidが課題。

「パネルディスカッション」

丸山:今年中にPackaged Web Appsの統合の形を見せる何かしらのAndroid、Chromeに関するものがでそう。

佐々木:TIZENとか、海外ではS3はLowEnd機種的なイメージ。S4はやばい。
でかいWebGLのアプリとかChromeなら結構動くけどスマホだと辛い。S4だとスペック的に結構追いついてきた、2−3年もすると今のChromeで体験できてることがスマホでも体験できるかもしれない。
今の興味はTIZENアプリ

白石:ChromeとHTML5のセッション見てた、多かった。しかしすごい目新しい機能とかはないけども、例えばパフォーマスンスの高速化だとか、
Packaged web app store v2?? Web Components(Polymerというフレームワーク) ネイティブにはあったけどWebになかった、それが出来そう。

WebアプリケーションのプラットフォームとしてAndroidやモバイルデバイスのこれから

丸山:AndroidのHTML5対応が遅すぎた。ChromeがなくてもChromeランタイムがアレばWebアプリが動くような世界を考えている。ネットワークと解する感じではなく、アプリとしてローカルにインストールするようなものがPackaged web apps。まだよくわからない。PWAはデバイス依存をなくそうとしている。

佐々木:HTML5で今のリッチな3Dゲームは作れないけど、そうでないアプリなら作れるような状況。
適材適所で使い分ければどちらでもいいかなぁと。iOSとAndroidで動いてるC++なものを、TIZENに2日で移植できた。
iOSはWebをスクリプトとってきてランタイムエンジンを動かすのを禁止している。しばらくはOpenGLが重要になるのではないか。
Q:今まではWebが遅かったからだめだったけどなの?
A:そうではなく、結局はレスポンスを求めるならNative、そうでないのはWeb。これは適材適所という考え方。
Q:遅いのはグラフィックとロジックにワケられる。ではどのくらい遅いのか?
A:Chromeじゃないとリッチなゲームは作れない、そういうレベルの違い。Chromeと同じ物がAndroidなどで動けばまぁいけるかもしれない。

白石:2,3年くらい前から感じるのは、Webアプリはスマホの機能を使い切れない、けどDeviceAPI群から色々できるようになるのかなぁと思っていた、けどそういう時代の流れではなく、インストール型の(Pakaged we appsとか)ものがこれから増えてきてる。ホステットはあまりできないという状況になってきた。時代の流れ。
今後はインストールできるものではデバイスの機能が使えるようになってくるんだろうなぁと
Q:インストール型と従来とでは違いは?
A:多分ものが違ってくるんじゃないか。カメラが使えないとか。

丸山:PWAはもともとキャッシュを使おうってところから来てる。
W3CとかのものとTIZEN、FirefoxOSとかはもう別々。別のものPWAとしてはものが違う。
デバイスレベルでのSMLは標準化が必要だ。現実的にはまだ世の中に出てないのだからまだ進んでない、なので市場に出て、競争が起きるような状況に、下方レイヤーでは出来たほうがいいだろう。

HTML5のCanvasやSVGに対して、OpenGLやネイティブアプリの動向は

佐々木:WebGLを使う、Canpas使わない理由はCanpas表現を超える表現が欲しくなり、WebGLを使いたくなる。速い、できることも多い。iPhoneではWebGLが動かない。自分でJSコアとかを書いてパッケージングして配信する会社が増えてきている。
でもS4とかは早くてもう十分かもしれない。古い端末をどうするか、結局それはランタイムエンジンを書いたほうがいい。
あとはCoronaとかUnityを使うと結構リッチなものが作れてさくさく動くようになっている。

白石:Canvasについてどう思っているか。一般的なWebサイト作りではそこまでのパフォーマスンスを求められることはあまりない。白石氏的にはCanvasは最終手段。Android2.x時代の悪夢。
Q:チャートとかを作るライブラリだとJSだと遅いCanvas。けどGPUに乗ると100倍速いんだけどそうでないときはめっちゃ遅い。そういう蓄積が必要(GPUに載せる

Canvasリアルタイム書くのが微妙。けどGLSX.JSとか使ってみたらWebGLが速い。今はその体験談からWebGLにフォーカスしてもいいかもしれない。

Webアプリ≒ハイブリッドアプリの進化とは

丸山:エンタープライズとWebアプリはインパクトを与え続けている。エンタープライズは重要
クライアントで処理するなら便利な方を使えばいい。まだ完全にHTML5だけでかけってのは難しいのかもしれない。
しかし最終的にはPackaged web appsみたいな1ソースでいろいろ使えるものにフィックスされるのではないか???????

佐々木:これからはドンドンブラウザが早くなっていく、だからネイティブは要らなくなるかもしれない。C++技術者少ないつらい。

白石:Webアプリにも出来ないことがいっぱいあるって言った。最後に「そこをどうにかしよう」と考えている人がいっぱいる→つまりこれは解決されるのではないか?新野淳一Blog
asm.jsがFirefoxOSとChromeで動かして違いがないとか。なのでWebアプリの未来は明るい。

あまりつよく望んでないAppleがどこまで足を引っ張り続けるのかなぁと

丸山:AndroidがWebプラットフォームが世界で一番大きなプラットフォームだと感じている。

明日からWireless Japan、日本Androidの会でるよーーー。

自分的まとめ

濃い内容の話だった。一介の学生にはとても刺激的になるものでした。
やっぱり開発・運用コストとかの関係でクロスプラットフォームなものに収束せざるを得ないんだろうなと思いつつも、例えばAppleとGoogleみたいなプラットフォームの親玉は”独占”を目指してるはずだと感じてる(もちろん独禁法に引っかからないレベルで、寡占に置き換えてもいい)。でもITの世界ってオープンソースが特に良い例だと思うけど、結構今までの産業とは違って秘匿していく事がすべてじゃない流れができてるから当てはまらないのかもね。

分かる話もあったけど、用語とかでわからないのもちょいちょい出てきてて、メモがミスッてる可能性いっぱいあり。でも現場はこのレベルなんだなぁとしれてすごい良かった。

また興味があるテーマで開催されたら参加しよう!

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

どうも、朝から地域のお祭で公園に作っていた神酒所の解体作業を行い、結構ばてばての日曜日をすごしておりますりっくんですこんにちは。もう肉体労働系はダメです僕・・・(‘A`)

さて、去る9月8日、慶応大学日吉キャンパスで行われた、HTML5 Conferenceにボランティアとして参加してきました。その時の写真と感想とか(一応セッション見れましたので)思ったこととか書いていきます。

続きを読む

第30回 HTML5とか勉強会に参加してきました! #html5j

水曜2限に出ることができない・・・、りっくですこんにちは。これは非常にまずい、月曜も火曜も朝いけるのに水曜日だけいけないとはこれいかに。・・・、早く寝ないのが全部悪いんですよ。来週から本気だす。

そしてこの勉強会いつだっけ・・・?w 遅くなりまくりだけど一応アップしよう><

 

第30回 HTML5とか勉強会に参加してきました!

場所は六本木ヒルズのGoogleオフィス。六本木ヒルズ・・・、初めて入りました綺麗だしいいところだな・・・。あんな所で働いてみたいものですw

 それぞれの発表の細かい内容などは別の参加者の方のBlogがすごく良かったので、そちらを参照させてもらいます。

Shinya’s Daily Report – [勉強会][HTML5]第30回 HTML5とか勉強会に参加してきた #html5j 
とても良いまとめ!

ということで早速まとめ

今回のテーマは「モバイルフレームワーク」ってことで、僕としてはjQueryMobileについてもうちょっと学べたら、というのとそれ以外の選択肢も把握して比較できたらなぁという思いを持ち、参加していました。

一応今回のアジェンダと、すごく適当に書いたメモを。

おばかアプリ選手権 2012 夏

jQueryMobile
     エディタ     Subline Text2
      jQueryMobileGallery
     ThemeRoller
     Download Builder Tool(公開予定・一部のみ乗っける)

SenchaTouch
     www.sencha.com/apps/
     SenchaArchitect2
     Microloader(Localstorage, ApplicationCache
 
その他のFramework
     KendoUIMobile
     jqUi     jQ.MobiをつかったUIフレームワーク
     app-UI     横スライドすることに特化

 

おばかアプリ選手権はかなりゆるいモノらしく、WebアプリだろうがAndroidだろうかiPhoneだろうがなんでもいいみたいです。ITMediaの方でやってるみたい?なのでかなりあほなアプリでも作ってみようかなと思います!

 

感想等々。

今回はMobileFrameworkってことで、身近なものがテーマだった。実際にjQueryMobileは使ってみていて、AndroidでPullDownな形にするとびっくりするほどパフォーマンスが悪かったり、いやでもそれは初代ペリアだったからなのかなぁとか思ったり、とにかく最新事情を知ることができてよかった。

さらに最後の懇親会はこんな感じの様子で、年上の方と会話する機会もでき、同い年の方もいらっしゃってとても楽しい会でいろいろと刺激になりました。これからもちょいちょい興味があるテーマだった場合は参加していきたいです!

最後に、レポート遅くなってすみませんでした><
(html5とか勉強会の宣伝的な意味で)