1. /
  2. IT

IT

[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

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

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

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の機能をつかえばいいじゃん？ｗ

Base64 utility methods

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

レベル4

The Screen Orientation API

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

Media Stream Recording

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

Web Animations 1.0

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

Markdown

どうもこんにちは体調が良くなりませんりっくんです。季節の変わり目には体調をくずすみたいなのがテンプレになりつつあります、昔はすごく健康的だったはずなのに、やっぱり運動なのかな・・・。

Markdownを試す

先日、dotinstallにてMarkdown記法についての講座が開講されました。

Markdown記法入門 (全8回) – プログラミングならドットインストール

以前Githubにアップするときにテストでちょっといじったっきりで、イマイチ理解していなかったのですが、このレッスンでとりあえずどういうものかは把握できた・・・気がする。

むしろ、使ってみるとこれは自分がBlog書くときに良いんじゃないかなぁと思い始め、とりあえずMac用MarkdownEditorのMouを入れてみて、現在記事を書いております。

wordpress + markdown

しかし、先程も書きましたが、自分の目標はWordpressの日記をMarkdownで書くことなので、まぁこのままEditorから変換して渡す感じでもいいんですけど、WP単体でできるようにしたいなぁとかは思っております。

とりあえず一番上の候補に上がったWP-Markdownは個人的に微妙だったのでスルー。C-bで勝手にBoldが適用されてた気がします、あれ消せたんですかね・・・。

ってことで今回はMarkdown on Save ImprovedをBlogの方に入れておいて、そっちにコピペすることにしました。理由はMouがかなり素晴らしいから。

Mou

Mouの素晴らしさを説明しにくいので、今書いてる状態のスクリーンショットを貼ります。

Workspace of Mou

こんな感じ。とにかく、右側に即時プレビューが出るのがすごくやりやすい。

まぁ、まだまだ全然Markdownを使いこなせてはいないんですが、HTMLを書くよりは格段にやりやすいですね、メニューからH2を選択するとかそういうのが必要ないっていうのはかなり良い。

画像をはりつけるときに、一度アップロードしてurlを確定させてから貼り付けるって手間があるんですが、Webのエディターを使うくらいならこっちの方がいいですね。

おわり

ということで、Markdown使っていきます。良いわ！

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

どうもこんにちは、体調を崩しており結構きついりっくんです。大体体調をくずすとBlogを書くみたいな悪しき習慣ができつつありますが、そこはまぁほっといて本題に入ろうかと思います。

これまでは基本一人でコードを書いて、それを他人に見てもらうくらいだったのでなんとかなっていたのですが、最近はコードを共有する必要がでてきて非常にめんどくさいなぁと思っていたところでした。よくよく考えれば、Gitって便利なものがあるじゃないか、ちょっと勉強しようってことで、さくらVPSにGitの共有レポジトリを作った話を書いてきます。

※あとから書いたので間違えてる可能性があります、自己責任でお願いします。

Git-Logo-1788C

VPS側

VPS側でやることは

  • gitのインストール（さくらのCentOSにははじめから入ってましたが、ソースから最新版を入れました。）
  • git用ユーザーを作る（必要あれば
  • git用グループを作る
  • git用のディレクトリを作る。
  • ディレクトリをgit用グループの所有に

って感じで進めました。

useradd git #ユーザーを作る
groupadd gitgroup #グループを作る
usermod -G gitgroup git#ユーザーをグループに追加
#複数のグループに入れる場合は
#usermod -G wheel,gitgroup git
#のように指定する。
mkdir /var/git
mkdir /var/git/testrepo.git #レポジトリ用ディレクトリを作る
cd /var/git/testrepo.git
git init --bare --shared=group #共有レポジトリ用にgitの初期化
chgrp -R gitgroup testrepo.git #testrepo.gitの管理グループをさっき作ったgitgroupへ

多少コマンド間違えてるまである・・・

ひとまず鯖側はこんな感じ。あと、このgitってユーザーも、自分の場合は秘密鍵認証でログインしたので、公開鍵の方を/home/git/.ssh内にauthorized_keysという名前で設置してあります。その辺はまぁ各自で。

クライアント側

私はMacから。

cd /Applications/MAMP/htdocs #MAMPのWeb用ディレクトリで開発するとして
git clone ssh://git@ADDRESS:PORT/var/git/testrepo.git #SSHで接続該当ディレクトリから持ってくる
cd testrepo.git

多分こんな感じでいけます。

ちゃんとグループの権限を与えてあげないとアップできなかったりになるので気をつけないといけないなぁと（詰まりまくった）
慣れてはいないけど、これ慣れたら多分少しは楽になるだろう。自然と使えるようになればなぁ。

MavericksとVagrant

台風が来ておりますが明日はバイトなりっくんですこんにちは。ここ2週間ほど、台風、雨といえば私のような、雨男っぷりを発揮しております。いうても！雨率高いからかぶりやすいものだと思うよ！まったく！

さて、この度MacbookAir 13 2011MidにMavericksを入れました。
せっかくなのでクリーンインストールからセットアップを始めて、色んな物を入れるて丸一日、まぁ大体同じことができるくらいにはセットアップが完了したところです。

これ、よろしくないね、もっと早くセットアップできないと・・・。

Mavericks

で、新OSのMavericksなんですが、ひとまず僕の方で問題はありませんでした。今まで使えてたものはだいたい同じように使えてます。その上で、これは良かった的なものは

  • マルチディスプレイ環境で、仮想デスクトップが別々に動くこと

なんというか、これに尽きるというか、このためにアップデートしたというか。
MacbookAir13インチなんですけど、外部モニターがあると結構色々違うもので、家にいる時でMacに長時間向かうときはだいたいつけっぱなしにするのです。

なんか作業してて、脇にコンソールを出しっぱなしにしておきたいんですが、メインで見てるモニターの仮想デスクトップを切り替えるとそっちも移動しちゃってうわーーーってなってたんですよね。それが解消されるってもう最高に嬉しいという。前回の発表の時、Mavericksの情報がでてその頃からそういえば待ち望んでたものでしたね。

半日待ってインストールするんじゃなくて、即インストールするべきだったか、私は。

その他、何やらメモリー使用量が減ったとか、電池持ちが良くなったとか言われておりますが、持ちだしてもいないので正直わかりません。まぁすこしは良くなってほしいなぁ。

（追記）
あとヘッダー部分？がマルチディスプレイで両方に出るのも良いね。

Vagrant

Vagrant

Vagrant。ドットインストールを見て知ったんですけどね。

Vagrant入門 (全13回) – プログラミングならドットインストール
Vagrant開発者 Mitchell Hashimoto氏に聞いた：「Vagrant」って何ぞ？（・o・） – ＠IT

いろんな環境で動く仮想環境を簡単にセットアップできる的なものみたいです。僕レベルの人間が使いこなせるかは微妙ですが、少なくとも僕のVPSを弄る前のテスト環境を整えられるのはすごくありがたいかもしれない・・・。（だいたい個人のサイトは本番でやっちゃうけど）

さっそく、VPSと同じ環境のCentOS 64bit版を突っ込んで、いろいろ試しております。
一度仮想環境を立ち上げてみてからは、vagrant sshで仮想環境にSSH接続して、そこでいろいろ遊んでます。Nginxを使ってみたいなぁと思ってたんですが、Apacheがいまうごいてるんでどうしようかなやんでたんですよね、ここで一度環境作ってからやってみたら行けるかもしれない。たぶん。

さー、ほぼ元通り！これからも楽しいMacbookAirライフを送ろう。

いらっしゃいXperiaAちゃん

どうもこんにちは、かき氷美味しい、詳しいことは言えませんりっくんですこんにちは。毒見も重要であると言わざるを得ない！！！

さて早速本題

Xperia A着弾

DSC_0726

ってことで、前回の「XperiaZちゃん、交換へ | SteadyWorX」でバキバキを公開したりっくんですが、まぁいろいろあって、交換で来たのはXperiaAちゃんでした。とりあえず細かいレビューはしないですが、Zよりも良いと思うところくらい上げていきます。

小さい

小さいです。いや、Rayサイズが本当はほしいんですけど無いので、あくまでZとの比較で小さい点が非常に良いです。というかZがデカすぎる。失敗したなぁと思います。

知らなかったんだけど、AはFullHDじゃないのね、正直一週間使ってて一切気になりませんでした。携帯にFullHDはいらないってことですね、Appleは本当にいらないと思ってるんでしょう。僕もそう思いました。

余談ですけど、マシンのスペックはだんだん我々には十分ってラインに近づきつつありますね。初期のAndroidは明らかにマシンスペック、OS性能が足りてなくて（iPhoneもそうだったね）、メモリーが足りないだとかDualCoreはよとか思ってましたが、今は正直細かいスペック気にしてないですね。
そういう、時間経過に伴う体感スペックって初期から現在にかけて逓減な曲線を描いてるんじゃないかなぁ。縦軸はUXで。

まとめ

小さくて最高です。スペックの違いは正直わかりませんでした！！！！！！

XperiaZちゃん、交換へ

最近の気温になかなか参っておりますりっくんですこんにちは。なんなんですかねーこの天気。クーラー無いと死んでしまいます・・・。

まぁいろいろあったんですけど、個人的には最高にショッキングな出来事について書いておきます。

XperiaZちゃんの液晶、割れる

どや？

DSC_0711 DSC_0714この影響で、上2/3のタッチパネルが死に、まともに操作もできない状況となっております。一応、横画面にして操作するという方法を教えてもらったので、それでテザリングをONにすることは可能となりました。しかし、LINEで任意のページを開くことは出来ず、ハングアウトでも同様の状態。Twiccaでリプライを飛ばすのは相変わらず困難な状況だったり・・・。

まぁもう仕方ないってことで、昨日docomoショップに向かって「ぶっこわしちゃったよーーー」って言って来ました。

Samsung製品とPanasonic製品

安心サポートは入っていたので料金は5250円だろうと。
とりあえずぶっ壊れてるということで、修理という選択肢もあったのですが、それは時間がかかりすぎる、且つお盆と重なってたのでさらにかかるという状況。整備品との交換のお願いをしました。

すると、XperiaZの在庫がない状況らしく（昨今の新しいスマホ登場までの周期が短いことが原因らしい）Samsung製品とPanasonic製品の、型番忘れました）との交換ができないのかと言われてですね。
当然、あんな個人的にダサいと思ってる端末を使うのは嫌だったので、「Sony製品はないの？Zの在庫が入ればそれになるのか？」的な質問をしてるうちに、Xperia Aに交換されることになりました。多分そろそろ届く。届け。

余談だけどアレ、エースって読むのね、しらなかった。

ラッキーとはいえ、こうなると逆に申し訳なくなってしまうのですがまぁそういうものらしいです。ありがたくXperia Aを使わせて頂こうかと！

ぶっ壊し経験

なんだかんだで、2010年にXperia（X10）を買ってから初めて修理レベルにぶっ壊したなぁと・・・。あまり携帯を落とすタイプではないので、そこそこ使えてたんだけどやらかしたなぁ・・・。

ちなみに原因は不明です。どうやってぶっ壊したのか覚えておりません。朝まで大丈夫だったのに、家をでるタイミングで見たら壊れていたので、おそらく何かの拍子に思いっきり踏みつけたとかそんなところでしょう。ぐぬぬ。

まぁなんにしても、使える状態を維持できるみたいでよかった。ありがとうdocomoさん。

 

ルービックキューブ

超余談ですが、説明書的なものを見ながら初めてルービックキューブを全面完成させました。ちなみに、説明書を見て4回失敗しました。

DSC_0710

CyberduckのIllegal sftp packet lenエラー対処法

どうも雨が降るはずだったのに降られなくて、荷物が増えたことに怒りが集中しておりますりっくんですこんにちは。今回はメモ、わんちゃん同じようなミスする人いると思うので。

cyberduck

エラーで接続できない！！

VPSにはSSHで接続しています。そこでCyberduckを使ったSftp接続を行おうとした時、タイトルのエラーがでました。まず公式にそれについてのQ&Aが存在します。

help/en/howto/sftp – Cyberduck

Illegal sftp packet len

The error message Illegal sftp packet len may indicate you have either:

  • An echo statement in your shell init script like .bashrc. Make sure it does not output any text.
  • Interoperability issue with Globalscape EFT Server. Issue #5308.
  • Enable ssh access on your server. Use the sftp command in a terminal to verify sftp username@domain_name. It’ll ask for your password. If you don’t have ssh access, you’ll get “Received message too long”, hence the error msg in Cyberduck.

この内、私のエラーは1個目の・です。
サーバー側の.bashrcに書かれていたものが、何かしらコンソールに出力するようなものになっていて、それをCyberduckが受け取っちゃってエラーになってたようです。ちょっと私のそもそもの理解度が低いのでよくわからないかもしれないですが・・・。

自分の場合はNode.jsを動かすために書いておいたnvm use v0.xx.xが勝手にコンソールに出力していたのが問題。

余談ですが、nvmは0.6以降のバージョンではデフォルトのバージョンを設定できるようになっているんですって、そんなこと知らずに書いちゃったのが行けなかったんだ・・・(‘A`)

nvm alias default v0.xx.x

 と、一度やっておけばOK。.bashrcにわざわざnvm use v0.xx.xと書く必要はないということ・・・(‘A`)

気をつけようね！！！

IRCbot

どうもこんにちは、E3とかWWDCとか見たせいですごく眠いりっくんですこんにちは。とりあえず11インチのAirが欲しいです、あとMac Proはダサいと思います。

さて未だにNode.jsを使ってるんですが、今でも動かしてるTwitterbotの他に、IRCbotがそこそこ完成したので、とりあえずログ残す的な意味でBlogにちょっとだけ書いておきます。

Nodejs_logo_light

Node.jsでIRCbotを作る方法的な

nvmとnpmはインストールしておいてください。

nvm use v0.8.3
npm install irc
npm install iconv

Nodeのバージョンはv0.8.3。v0.11.2だと何かのパッケージが動かなかった気がします。
パッケージの詳細についてはこちらより
https://github.com/martynsmith/node-irc
https://github.com/bnoordhuis/node-iconv

var irc = require('irc');
var iconv = require('iconv');

var conv = new iconv.Iconv("ISO-2022-JP", "UTF-8");
var conv2 = new iconv.Iconv("UTF-8", "ISO-2022-JP//TRANSLIT//IGNORE"); //TRANSLITとIGNOREを指定しておかないと落ちる
var client = new irc.Client('irc.hogehoge.net', 'YourNickname', {
    channels: ['#Channel']
});

client.addListener('message#Channel', function (from, message) {
  console.log(from,':',message);
  client.say('#Channel', conv2.convert('メッセージを受信しました！'));
});

単純にメッセージを返すだけならこれだけで動きます。IRCにつなぐだけなら1行目と5行目だけで接続できるねこれ・・・。うちの鯖がISO-2022-JPを使っていたので、その文字コード変換用にiconvも入れて変換してます。なんかやる時にアレした気がする・・・。

一応、今動かしてるのはmessageを見て、あるキーワード入ってたらWikipediaから情報拾ってくるbotになってます。それをやるにはRequestを使うんですけども。
https://github.com/mikeal/request
常用にするにはまだ少し不安定だけど、とりあえず結構簡単に作れますね。

前回も言ったかもしれないけど、foreverってのを使えばNodeのアプリケーションを簡単にデーモン化できるので、それで立ち上げっぱなしにするとか良いと思います。

ちょっと前に見たんだけど、Nodeって確かにこれだなってのを最後に貼って、このエントリは終わります。面白いです・・・。

メモ：第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を生かしたアプリ
公式マーケットで配布できる。
複数プラットフォーム対応しやすいメリット
ハイブリッド＝技術を組み合わせる

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

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

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

アプリの設計

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

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

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

実装例１
WebViewの進む戻る推移と、Nativeの画面偏移の問題が起きやすい。
→ WebViewでのりんく偏移はさせない方針 or 遷移はWebViewで行い、Native部分はダイアログ展開。
実装例２
・長押し処理・フックの処理は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の世界ってオープンソースが特に良い例だと思うけど、結構今までの産業とは違って秘匿していく事がすべてじゃない流れができてるから当てはまらないのかもね。

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

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