muzigram

山椒は小粒でもピリリと辛い

2013/05/29

第39回 HTML5とか勉強会+日本Androidの会 2013年5月定例会 を聞いて来ました #html5j #jag201305

タイトルの勉強会に参加してきた話

概要

勉強会のページ
http://kokucheese.com/event/index/90708/
togetter
http://togetter.com/li/510026

@ayumu83sが大体まとめてるので参照。
http://itochin2.hatenablog.com/entry/2013/05/29/023831

細かくまとめていらっしゃる方がいらっしゃるので、自分は大まかな雑感を。 話の流れとしては大きく3点があったかと思います。
  • html5の現状
  • 実際に作ってみてハイブリッドアプリはどうだったのか
  • 今後はどうなっていくのか、どうあるべきか、どうなると素晴らしいか

html5の現状

今後注目してもいいんじゃないか、という技術についてはGoogleIOの話もあって、WebComponent(Polymer.js)や
Dartなんかにも注目してもいいんじゃないかと思っています。

ハイブリッド

ハイブリッドアプリを語る際の文脈で外せないのは「何故その形を選んだのか」というのと「どういう問題があるか」
ということだと思います。クックパッドさんとポケラボさんのお話でもそこに触れていて
  • 更新のしやすさを重視
  • ローカルに保存するデータが少なかった
  • Webに強いエンジニアが多かったから
  • HTMLはもともとレイアウトを構築する言語なので自由度が高い
等が挙げられていました。
課題としては、
  • フォーカス管理、Webによる遷移を許すか、許さないか。Nativeはダイアログ的に使う。
  • ゲーム的な描画の速度に不満ー>自作ツールで改善中。
ポケラボさんの自作ツールは文脈がよくわからなかったのですが、
flash->jsからのAndroidネイティブで描画するから早いってことなのかな?それともpure javascritpで高速なのか。
lwfとかと比べるとどうなんだろうというはちょっと気になってます。(・∀・)
いろいろな意味で気になりますね。ポケラボさん

楽だよね!とか、簡単にできそう。という理由で選択すると火傷をするのがハイブリッドアプリ
というのはひしひしと伝わってきます。自分のプロジェクトでもハイブリッドを選択したはいいものの、
細かい問題がいろいろと出てきて細かく迷惑をかけてしまった感があったりました;

今後について

キャンバスが遅い!とか、WebGLで自作のエンジンを作るみたいのが流行ってるよ!
みたいな話やゲーム的な追求があるアプリじゃなければ結構行ける!
とか、パッケージ化して権限が増えてストアが拡充して、Androidのマーケットと連動すると…。とか
次のステップはDartがChromeに入った時だ。とか

感想

ハイブリッドアプリには「ガワネイティブ」と揶揄されるような粗雑なアプリがある一方、今回のように
便利、不便をキチンと把握し、特性を生かして開発しているところもあり、感銘を受けました。
「なぜその選択をするのか」ということをしっかり考えていくことが重要ですね。

HTML5は着々と「アプリケーション化」の道を辿っている感じがします。
あと2,3年もするとネイティブ、Webの境目は更に薄くなっていく気がします。
現状でもNaCl(https://developers.google.com/native-client/?hl=ja)とかあったりするし。
自分としては、アプリも見つつ、WebComponentやDartの辺りを中心に精進して行きたいと思います。

2013/05/24

久々にhubot動かしたら「Connection got "close" event」

■ 事象

ローカルにサーバーを立て、部屋と発言を指定するとbotが発言する。という習作
https://github.com/mogeta/VOICE というhubotのスクリプトを久々に動かして見たところ、以下のエラーが発生。バージョンは以下

node -v
v0.10.0

error

sh start.sh
24 May 11:59:45 - Connection got "close" event
24 May 11:59:45 - Disconnected: reconnecting
24 May 11:59:45 - Waiting 2000ms before retrying
24 May 11:59:45 - Connection got "end" event

■ issueを発見

https://github.com/martynsmith/node-irc/issues/160
issueに従い、以下を修正
node_modules/hubot-irc/node_modules/irc/lib/irc.js 内
creds = {};

creds = { rejectUnauthorized: !self.opt.secure };

■ひとまず動作

ひとまず、投稿。
何がどうなってるのか、調査はこれから。

今、Web Componentを試す2つのアプローチ。sample動作編。polymer.js & dart:web_ui

■ Web Componentについて

GoogleIOのセッション(https://developers.google.com/events/io/sessions/324149970)
でWebComponentが紹介されたということで、WebComponent界隈が賑わって来ております。

具体的にはどういうことなの?というお話は詳しい解説が様々な所にあるのでお任せするとして。 http://steps.dodgson.org/b/2013/05/19/polymer-and-web-components/
http://www.slideshare.net/shumpei/web-component-14846079

今回は話題になってきている「polymer.js」とDartの「web_ui」によるHello Worldをやってみたいと思います。

■ polymer.jsをとりあえず試す

使用ツール
■ git
■ python SimpleHTTPServer

#polymer.jsとその他もろもろ。
git clone git://github.com/Polymer/polymer.git --recursive
#toolkit 使用例とか
git clone git://github.com/Polymer/toolkit-ui.git --recursive
python -m SimpleHTTPServer 8080
--recursiveでgitのsubmoduleもcloneしてきています。

スクリーンショット 13 05 23 17 13

で、おもむろにsimpleServerを立て http://localhost:8080/toolkit-ui/workbench/menu.html,等にアクセス。
web componentの書き方や機能を確認してみましょう。なんか見慣れないimportやタグがあるかと思います。

animation/components.html
スクリーンショット 13 05 24 0 16
こんなんとか

■ Dart:web_uiをとりあえず試す

使用ツール
■ dart editor
  • こちらもおもむろにDart Editorを起動してnew applicationを選択
  • Sample content内、Generate sample contentにチェックを入れ
  • スクリーンショット 13 05 23 23 18
  • Web application(using the web_ui library)を選択
  • 作られたサンプルにある「build.dart」をRun!

  • スクリーンショット 13 05 24 0 21
  • ちょいと待つとout/というディレクトリ配下にファイルが生成される。
  • 生成されたhtmlを右クリックして「Run in Dartium」
  • Web Componentが書かれたサンプルを拝見!
次回以降は何か作ってみて、自分なりに解釈してみたいと思います。

2013/05/20

[Dart] dartでWebアプリっぽいものを試作している話。 #dartlangjp

■ channelAPI + Dart + dart2jsを試している

プロジェクト
https://github.com/mogeta/dotsync
アプリ
http://muzigen.appspot.com/

こんなかんじのドット絵もどきの工程をを他ユーザーとsyncするアプリをテスト中です。 gaeのchannelAPIを使ってjsonのデータを渡しています。

■ dart2.jsの使い方

Dart Editorから入力する方法

出力したいdartファイルを指定し、tool->Generate Javascriptでおk。 [mac](shift+command+G) スクリーンショット 13 05 20 17 27

コマンドラインツールから

http://www.dartlang.org/docs/dart-up-and-running/contents/ch04-tools-dart2js.html
Basic Usageにあるように
$DART_SDK/bin/dart2js --out=test.js test.dart
てな具合で使えます。

■ dart2jsはとりあえず楽(小並感

dart2jsで変換できるよ!という話「だけ」を聞いた際は、
「とは言え、全部のファイルを変換して、同じ場所に配置して、HTMLの読み込みも変換して gruntあたりでそういうビルドやるとはいえめんどくないですかねぇ。」
とか思ってたんですが、変換して出来る「hogehoge.dart.js」
を同じディレクトリに配置するだけというカンタン作業でした。

ライブラリの依存や複数ファイルにまたいだdartアプリであろうと、1ファイルにまとめてくれる上
  • dart.jsがdartに対応しているかをチェック
  • してない場合はhogehoge.dart.jsを読みに行く
と言った動作をしてくれる為、htmlファイルの変更は一切必要ありません。つまり、
dartアプリを記述するだけで、余計な作業無しにモダンなブラウザに対応したアプリが記述できる。
というのが、強みの一つではないかと思います。
とは言え、dartだからの強みかというとそこまででもなくて、他言語でも同程度に便利な機能、ツールはあるのでどっこいどっこいですね。

■ Debugging

上記のページの焼き増しですが、Chromeの場合
Chrome dev toolを開いて、右下の歯車をクリック。 スクリーンショット 13 05 20 17 36 2 Enable source mapsにチェック。 スクリーンショット 13 05 20 17 39
後は適当な場所にブレークポイントをかけてみましょう。

2013/05/11

jenkinsでclang_static_analyzer

Obj-cの静的解析してみたいのでやってみた。

Download

http://clang-analyzer.llvm.org/installation.htmlでパッケージを取得
The latest build is: checker-274.tar.bz2 (built April 23, 2013)

設定箇所

Jenkins -> 設定
スクリーンショット 13 05 10 19 46 に名前とpathを設定。
後はBuildの手順に加えればOK

2013/05/08

jenkins Tips 環境変数の使い方 #jenkinsja

JenkinsにAndroidのパスを設定した

■ 登録の仕方

スクリーンショット 13 05 08 18 18

■ 使い方

「$」で呼び出すのがポイント。
前、これを知らずに使えない!使えない!って喚いた記憶ある。 スクリーンショット 13 05 08 18 20

2013/05/01

yeomanインストール後のgrunt serverで起動失敗する。

■ 目標:yeomanを動かしてみよう

http://yeoman.io/
yeomanがなんなの?という人はこちらを見ると手っ取り早いと思います。
https://plus.google.com/events/c9p1aclqe3fhl6gpo9p5hj4a01g

■ しかし、動かない

以下の様な文言が発生

■ エラーメッセージ

Running "livereload-start" task
... Starting Livereload server on 35729 ...

... Uhoh. Got error listen EADDRINUSE ...
Error: listen EADDRINUSE
    at errnoException (net.js:863:11)
    at Server._listen2 (net.js:1008:14)
    at listen (net.js:1030:10)
    at Server.listen (net.js:1096:5)

■ 対策

Sublime text2のlive reloadがかち合ってました…;
一旦Sublime text2の方をどかしたら動くようになったよ!
要はlive reloadが同じportを見に行ってるからlisten出来ない!と文句を言っていたわけですね。