Archive for the 'Web系' Category

【勉強会】アプリ開発勉強会!渋谷DeNA 2/12(火)

2013年2月12日(火)にDeNA渋谷オフィス(渋谷ヒカリエ)で行われた、「アプリ開発勉強会!/ソーシャルゲームFlash開発の現状/スマホ時代のWeb/個人サービスの作り方 」の勉強会メモです。

http://atnd.org/events/36367

アジェンダ
土濱 健太郎氏 ソーシャルゲーム業界におけるflash開発の現状
原 一成氏 スマートフォン時代のWeb制作術 Vol.2
菊本 久寿氏 ひとりでできるもん。〜個人サービスの作り方〜」

ソーシャルゲーム業界におけるflash開発の現状

株式会社クルーズの土濱 健太郎さんの発表で、ソーシャルゲームでflashをどのように使っているかや使う時の注意点などをお話されました。

デバイスに合わせてFlashを3種類作成

Flashを作成する際には、デバイスに合わせて3種類を作成し、flash非対応デバイスにはHTML5で再生できる形で対応しているそうです。

  • Android2系

    FlashPlayer7 actionscript7.0
  • ガラケー

    メモリなどの制約が多い
  • iOSやAndroidの非flash向け

    google swiffyで変換して再生
  • iOSやAndroidOS4向け

    flashが再生できないのでHTML5に変換

mobageプラットフォームのexgameは非常に便利

※画像の拡大や透過処理でパフォーマンスが落ちていたがiOS6ではさくさく

でもやっぱりJavaScriptやCSS,Canvasアニメーションが良い!!

ガラケーについて

・容量が100KBを超えると再生しない
・メモリが一瞬でも1024KBを超えると再生しない
・グラデーションの数が多いと再生しない
 ※イラストレーターから取り込んでいるのだが,,,
 カラーポイントは4個くらい,,,

スマホでのFlash利用について

・スマホの解像度を理解してあげる
 あらかじめ大きな画像を置くようにしている

・flashなどは予め使い回しが出来るように作成スべき
 差分を考慮する
 良質なアニメーションは良い設計から始まる

発表後の質問

・ベクター画像、ラスタ画像を埋め込むことは出来るのか?
 容量削減のためベクター画像を使っている
 Photoshopなどで作ったラスタデータを使うことはできるが
 メモリなどの消費量が多く、ベクター画像に偏ってしまった

・合成について
  3つのSWFを合成する際、サーバ側でSWFを1つに合成して実行している
 
・新機種が出た際に動かないSWFなどはどう対処するのか?
 最低ラインに合わせる
 最低ラインが動けばだいたい動く
 if ANDROIDだったらが4系から関係なくなって悲しくなった...

スマートフォン時代のWeb制作術 Vol.2

サイバーエージェントの原さんが、Node.jsでWebSocketを用いたリアルタイム通信のデモを通じてフロントエンジニアもサーバ側の知識が必要になってきますよというお話でした。

発表資料:http://www.slideshare.net/herablog

3つの役割

・Designer
 レイアウト
 高度なWebデザイン
 イラストレーションが専門
 インタラクションに関与

・FrontEngineer
 HTML/CSS/JavaScript
 プログラムの知識のモジュール化
 サーバ知識(Node.jsなど)
 コマンドライン操作
 
・ServerEnginner
 プログラム,サーバ知識
 API作成知識
 最適なインフラ構成構築
 JavaScriptなどHTML5関連

今までは、フロントエンジニアはデザイナーとの関係が深かったですが、これからはコマンドラインやサーバ側の知識が必要になってくるため、サーバ側との関係が深くなってくるよという内容でした。

ひとりでできるもん〜個人サービスの作り方〜

モーションビート技術開発部長である菊本さんのお話で、実際にこれから開発したいと思っている開発者に向けてひとりでもサービスが作れますよという自分の体験談を踏まえたお話と、宣伝とかの手伝いとかをやっていますというプロモーション的な内容でした。

今まで作ったサービス

・レンタルCTO スタートアップの方々にワーキングショップを行なっている
 シャチクのミカタ:http://shachikunomikata.com/
 告白の行方:http://auto-iloveyou.com/

儲からないのになぜやっているの?

 SelfBranding ・・・ 個人のブランディングのため

個人でやってはいけないもの

・仕様がでかい
・勉強でやってみる
仕様がでかすぎると途中で挫折してしまうし、勉強のためにやってみようは結局続かなくなってしまうのがオチ

まずは簡単な仕様でやってみることが大切

どうやって宣伝していくか?

・ソーシャル図鑑
・スタートアップ.jp
・つくログ
・Webサービス図鑑
・ツイートサービス
・個人ブログ
・コンテスト
 ※プレゼンまでもっていけると評価があがる
・Fasebook、Twitter
 ⇒ 継続的に全般していく
 企画段階のタイトルやコピーが重要
・Naverまとめ
 WordpressのSEOはすごい!!
 自分の作ったサイトよりWordPressのSEOの方が効果が高いようだ(経験談)
・インフルエンサーのブログ
 池田勇人さん など

・ネットニュース
 ライフハッカー
 ねとらぼ
 R25
 Yahoo!ニュース(2次掲載)
 はちま トレンドニュース マイナビ
 GIZMODO
 livedoorNews
 ※Web系の場合は連絡なしに掲載してくれる!

思いつきを実現できる環境を

500円でなんでもやってくれる

http://coconala.com/

以上とても刺激のある勉強会でした!

【勉強会】第7回Jenkins勉強会 Oracle 青山センター

2013年1月28日(月)にOracle 青山センターで行われた「第7回Jenkins勉強会」に参加してきた時のメモです。

http://connpass.com/event/1690/

今回の勉強会では、組み込み系が中心でC/C++のプロジェクトでJenkinsを利用している方などの発表でした。基本的には組み込み系であってもWeb系であっても裏側の構成は同じであるが組み込み系ならではの作りや注意点などのお話がありました。

最近作っているプラグインの紹介

Jenkinsのうみの親である川口さんの発表で現在開発中のプラグインについてお話されました。

データベースプラグイン

.目標:
 => 全てのデータをXMLで保存するスタイル
 でも,全てをXMLで保存するのは無理がある

 ・起動速度を向上させる
  ファイルサイズが大きくなりがちなデータ
  テストデータの実行時間履歴
  ファイル指紋(トラッキングに)
  コードカバレッジレポート

 Coreの方でDBに保存する
 ・プラグインでもDB
 Audit to Databaseプラグイン
 Jenkowプラグイン(ワークフローなどをJenkinsに入れてしまう)

 標準UI部品を提供
  再利用可能なGUI付きの部品を提供
  DBコネクタプラグインの提供

 テストのデータとかは大きくなっちゃうけどXMLを廃止するのは考えていませんよ!
 DBプラグインのCore部分が出来たので、みなさん使ってくださいよ!

レシピプラグイン

 Jenkinsで使っているプラグインの一部を取り出してそのまま取り出せるような仕組みにしているプラグイン

 背景:
  新しいプラグインを作ったけどどうやって使い方を説明したらいいかわからない!とか1からユーザに設定をさせるのは面倒だ!
 
 「Export Recipe」 ここから公開できる

 インストール ImportRecipe コミュニティーのレシピのカタログからプラグインを選べることが出来インストールできる
  新規プラグインを作るときに、足りていないプラグインの情報なども表示してくれる

 今後プラグインアップデートセンター的なイメージの場を提供して行きたい

遠隔ターミナル・プラグイン

 ターミナルアクセスを追加する
  ローカルでは動いていてもJenkins上では動かないときにJenkinsのせいにする場合がある
そんな時に、Jenkins上のバッチ処理のデバッグや対話的なスクリプト環境で簡単に試せる場を提供する

 「Interactive Terminal」
  ビルドと同じ環境で走っているターミナル
   これはスレーブで走っている

 ブラウザで出来るターミナル環境があるが
ssh にはバーチャルホストがないが、ssh.configに記入することで出来る
sshでジョブ名.localhostで入れる

 Jenkinsは,基本スレーブで動いている
 Jenkinsのリリース番号が500の大台に乗った!!

質問による解凍

☆画像の比較テストは半端な数になる
 ・500MBくらいの成果物が出てくる
 ・でかすぎてJenkinsのバックアップが取らなくなってきてる
   外部のサーバに閉まってリダイレクト出来るようにして欲しいとかの要望はある
 ・クーロンの代わりにJenkinsを使う機会が多い
  アイノードを食いつくっている 1分に1ジョブ回している

『組み込み業界よくあるJenkins環境構築例』

TechMatrixの天久さんによるお話で、品質に関わる製品を販売されていることからお客様方でのJenkins構築例などを紹介や自社内での導入事例といった内容でした。

静的テスト

・xUnitフレームワークを使ったテスト
 ツールのベンダー
  テストツールの実行環境にJenkinsをおすすめしている
  Jenkinsとテストツールを組み合わせた環境を構築したりしている
  既存の環境に導入することもある

組み込み業界でのJenkins

 みんなどうやっているのか知りたいという人が多い
 エンタープライズ系の話が多く組み込み系がないのがないという声が多い

 組み込みであっても一般的な環境がほとんど...
  利用プラグイン:Cpptest Plugin Jtest

 マスターが1つから
  スレーブでビルドを複数
  スレーブでテストをづく数(静的テストや単体テスト)

 ・どこが組み込みっぽいの?
  ※ビルドがクロスコンパイル
  違う環境でコンパイルを通すことで多様な環境に対応

  

静的テストだけではなく単体テスト

 開発者の人がテストを作ってやっているわけだが...
 ・シミュレーターで実施
 ・単体テストをホスト環境で行う(実際の開発環境でする)
  ⇒シミュレーターがない場合や実機で実施する場合には手間が掛かり過ぎる場合などにホスト環境で実施

 ブランチのマージやモジュールの作成は手動で行なっている

 クラウド上に環境開発を置くのが主流になっているが...
  組み込みのお客さんはコードを外に出すのはためらいがある
  AmazonEC2などに置く事例も

 まだやっていないこと
  Jenkinsから実機での単体テストの自動化
  ソースコードレビュー
   Gerritなど...

質問による回答

・自動での実機テストで構想はあるのかどうか?
・どういう理由で実機テストが拒まれているのか?
  用意するのが大変
  パフォーマンスの問題(実行速度や転送速度)重たくなりがち

 モバイルの人たちも苦労している
  AndroidはJenkinsで管理
  スレーブにiPhoneをつなげてチェックするなど

 Androidのテスト環境は進んでいるらしいが..

『キャノンにおけるJenkinsへの取り組み』

キャノン株式会社 デジタルシステム開発本部 ソフトウェア検証室の馬場さんのお話で社内にJenkinsを導入するまでに苦労したことや実際の構築内容をお話されました。

社内共通のデジタルシステム開発への導入

 社内共通のデジタルシステム開発に限定してJenkins導入の実施
  800名のうち約半分がソフトウェア屋さん

  2010年:Jenkinsの導入
  2011年:本部内向けにセミナー実施などして広めていった
  2012年:内製のプラグイン開発など

 SummaryReportプラグインについてなど

Jenkinsの環境について

 概ねチームごとにマスターを分散
  他のチームの影響を受けない受けない方が良い
   実行時のセキュリティー面を考慮
  ※うちも今1つのサーバ上で動いているけど分けたほうが良いんじゃないかな?本格的にテストを導入するなら

 基本的にマスターでビルド禁止(組み込み系の場合)
  マスターの構成は柔軟にしておく
  テスト実行環境に専念するため

 最近は、マスターを同じサーバに入れておく
  テスト環境はスレーブとして違う場所に

 ・LDAP?
 ・KVMベースのVMプール?

プラグインについて

・SummaryReportプラグイン
 ビルド全体のテスト結果のサマリー
  =>詳細は、デフォルトで吐き出す情報

 ツール×レポートの種類
  単体テスト エラー検出(メモリーリーク) コードカバレッジ 静的チェック コードメトリクス

 カスタムレポートプラグイン 

・Lcovの設定
 各種レポートのサマリーを表示

 htmlPubliシャブ
 ダッシュボードビュー
 履歴レポート

テスト結果の表示

 テスト結果として
  テスト成功数
  テスト成功数
  行カバレッジ
  行に対するステップ

 1つのジョブだけでなく複数のジョブのテスト結果をまとめて閲覧できるようにしている

 クリーンビルド?
  カスタムワークスペースの利用がけっこう多い
   成果物の受け渡しが足りていない

 テストファーストではなくてもテストセカンドで
  ※コードと同時にテストを書く
  ※テストラストにだけはならないように!

質問に対する回答

・事業部に展開できていない理由
  宣伝できていない部分も有るが....
  チームの数が多い
  事業部はある製品に人が多い

・テストやビルドが回っている感はあったが入れる前と後でなんか変わったことはあったか?
 Jenkins入れる前は内製のツールが合ったが情報がないしGUIが難しかった...
  Jenkinsは情報があるからユーザが自分から調べて出来る 
  興味が湧いてモチベーションが上がっていた

・環境を作るのに大変だったこと
 CentOSでマスター環境を用意
  Jenkinsの設定とworkspaceの設定など
  rsyncで実施

・Jenkinsボートはいつ公開されるの?
 ライセンスだけでも使えるようになればいいのになぁー^^
  財務の関係で厳しいw

『Jenkinsを使うようになったきっかけとEclipseでの簡単にビルド』

@atottoさんによる発表で、Jenkinsの便利なプラグインについてやEclipseでビルドを実行するお話でした。

発表資料:http://www.slideshare.net/atotto/jenkins-study720130128

1開発のお話...

 C++のビルド&テスト
 Sphinxで快適ドキュメントビルド(ドキュメント自動化)
 ☆Twitterにある

 ビルド作業が手作業であった
  Jenkins入れるなら開発の初期でやったほうが良いよ!

 Jenkins = すごいCrontab
 Eclipse CDT
  C++のためのEclipse

 Java => AntとかMaven
 C++ => Makefile
  でも面倒...

 コマンドラインでプロジェクトをビルで出来る
  Eclipse CDT のHeadless Buildを使えば出来る

  http://htn.to/iyFo9q に書かれている

 ビルドマシンにはEclipseさんとJenkinsが入っているイメージ!!
 google testのコードを入れてそれもビルド&テスト実行
 カバレッジ計測は、gcovで行なっている

使っているプラグイン

・TO DO管理
 Task Scanner
  コード中にTODOタグを集計
   TODOタグをコードに埋め込むと表示されるようにしている

・ログ解析
 Warnings Plugin
  警告解析や自分で定義して解決できる

困っていること

 テストの完全自動化
  製品に組み込む(実機ベースになってしまうところ)
  シリアル通信

  WebインターフェイスはSeleniumの使用

 今後やりたいことお
  eXtreme Feedback Device
   楽しい開発を進めて行きたい

  RaspberryPi
   Jenkins + RaspberryPi + ?を使ってやりたい

以上、エンタープライズ系のお話が中心でしたがWeb系にも活かせるお話が盛りたくさんでした。
と同時に、自分にはまだまだ難しいと感じたため、もっとJenkinsについての勉強やそもそもテストの書き方について勉強していこうと感じることが出来た勉強会になりました。

まとめWiki:https://wiki.jenkins-ci.org/pages/viewpage.action?pageId=65670538

【勉強会】HTML5カンファレンス2012

2012年9月8日(土)に慶應義塾大学 日吉キャンパスで行われた「HTML5カンファレンス2012」に参加してきたときのメモです。

http://events.html5j.org/conference/2012/09/
HTML5カンファレンス2012のロゴ

既にまとめサイトが存在しておりますので、詳しくはそちらを御覧ください

 http://stocker.jp/diary/html5-conference-2012/

個人的に興味があった内容を下記に挙げていきます。

@yomotsu さんの発表でWebGL and Three.js

 http://www.slideshare.net/yomotsu/webgl-and-threejs
 ※HTML,JavaScript、CSSでここまで出来るのかと感動させられました。

mixiのあんどうやすしさんによるWebRTCとか勉強会

 https://docs.google.com/presentation/d/1MkvmX6Gvb1cRATdwF4RFBtol8NgdnblwlwikDnFhT10/present#slide=id.p

※ちなみに上記資料をもとに丸3日をかけて、WebRTCのまとめとデモを作りました!
 参考:http://megadreams14.com/?p=319
 ※残念ながら仕様変更によりデモは動いておりませんが、仕組みについてはほぼ同じなので参考になるかとは思います。

Hajime OgushiさんによるLT「ピンチとチャンス」

 http://www.slideshare.net/hajimeogushi/html5conference2012-lt
 デザイナーでノンプログラマーなHajime Ogushiさんのプレゼンのデザインセンスがうけました!分かる人にはわかるプレゼン資料です。

HTML5クイズ

 http://www.youtube.com/watch?v=4LBOZTtiEh8&feature=youtu.be
 某テレビ番組の大感謝祭のようなシステムでWebSocketやAjaxなどを使ってリアルタイムにクイズの集計を行い、HTML5カンファレンスの締めとしてふさわしい企画でした。

 こちら作成者様のブログで裏話なども見れるので良かったら是非
  http://georz.hatenablog.com/

 ※ちなみにこのシステムに憧れて自作でも現在作成中!
  Node.jsなどを使って裏側を作成しており残りは見た目と集計部分....
  出来上がったら公開します!!

とても刺激あるカンファレンスでした!
来年も是非!!

WebRTC GetUserMediaとPeerConnectionについて

WebRTCについて昨年9月にまとめた資料があったので公開しておきます。

現地点では仕様が変わっているようですが裏側で行なっていることは同じだと思うので参考になればどうぞ!

ちなみにNode.jsについても記載しておりますので、Nodeの環境構築など興味のある方は是非!

資料:WebRTCについてのまとめ http://peerconnection-video-chat.herokuapp.com/webrtc_report/webrtc_summary.html