ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 ＷＥＢ生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/704/room ーーーーーーーーーーーーーーーーーーーーーーー

1. 小規模Web制作会社でも
フロントエンドのスキルを磨く方法と実践
エンジニア 桟 義雄 / @katapad
Vol.2【実践編】

2. 桟 義雄@katapad
Bascule
スーパー肩パッド
http://unko.me
かけはし
2003
文系大学を卒業
2006 2007 2010
Web業界に入る
デザイン+コーディング
Flasher Bascule入社
• Flash
• iOSネイティブアプリ
• スマホHTML
• Adobe AIR

4. TVとスマホを連動させた番組を作ったりしてます。
広告キャンペーンやアプリも。
広告賞も多数いただいたりしてます。
「エモーション」という言葉をよく使ってます。
宇宙と未来のニューヒーローを目指す会社です。

5. 私の最近のお仕事
• TOYOTOWN http://www.toyotown.jp
• ポータル (HTML)
• CARS (HTML)
• IMAGINE エコドラ (Flash)
• THE DOOR (Flash + JS)
• PASSO AMIDA DRIVE (HTML + Canvas)
!
• YAHOO! 震災ビッグデータビジュアライゼーション (Flash)
• http://promo.search.yahoo.co.jp/searchfor311/

6. • http://www.toyotown.jp/amida-drive/
• AndroidでFPS20、iPhone4SでもFPS30
• CreateJS
• AngularJS
• イベント総参加者数 23万人！

7. http://bapa.ac/
バスキュールとパーティーで学校をはじめることになりました。
Both Art and Programming Academy, 略してBAPA。
!
もしひとりの人間がデザインとプログラミングを両方できるとしたら、
表現の可能性はもっと広がるはず。

8. 前回 根性論と精神論篇
のハイライト

9. 1. スキルとはなにか
2. スキルが身につかないひと
3. マインドセット
4. いまからできること
アジェンダ
小規模Web制作会社でも
フロントエンドのスキルを磨く方法と実践

10. 1. カンヌ広告祭などを見る
2. 一軍に上がる
3. Yesしか言わない
4. スマホの実装をする
5. ライバルを作る
6. サイトの感想文を書く
7. 効率よく情報を集める
8. 経験の量を増やす
9. 無駄なシェアをしない
10. 他人から盗む
いまからできること

11. 意識が
マジですごい
高くなる
ズルを覚える

12. 自分ではノリノリ

13. 録画を見た

14. ガチガチ！

15. 30分超えたあたりの
「クソサイト」「寿司」
のくだりはよかった

16. 私がシェアした寿司
いまからできること
いいね数: 6 → 8
(133%成長)

17. 超ノリノリでやります！
(シャブはやってません。SAY YES)

18. 1. 自動化基礎
2. PASSO AMIDA DRIVEでの事例紹介
アジェンダ
小規模Web制作会社でも
フロントエンドのスキルを磨く方法と実践

19. 授業のゴール
小規模Web制作会社でも
フロントエンドのスキルを磨く方法と実践

20. アップロードに
魂を込めない
Androidで
動かなくても
動じない
http://en.wikipedia.org/wiki/Nuclear_explosion

21. アップロードに
魂を込めない
Androidで
動かなくても
動じない
http://en.wikipedia.org/wiki/Nuclear_explosion
魂は込めるべきところに込めろ！

22. 自動化基礎

23. やること増えた
↓
自動化しよう
自動化基礎

24. 自動化って何すんの？
自動化基礎

25. • CoffeeScriptやCompassのコンパイル
• FTPアップロード
• テスト
とか
自動化基礎

26. 手動でFTPとか
2014年ではしない
自動化基礎

27. 同じ動作を繰り返すなら、
自動化
自動化基礎

28. やりかたを忘れても
コマンド一発で再現
$ grunt testup
自動化基礎

29. CI
(継続的インテグレーション)

30. Continuous Integration
（継続的インテグレーション）
継続的インテグレーションとは、ソフトウェア開発手法において、
プロジェクトメンバーがそれぞれ開発した結果を頻繁に結合し、
定期的にビルドやテストを行うことである。
!
問題点を早期に摘出することができ、効率的な開発に役立つ。
自動化基礎
IT用語辞典バイナリ http://goo.gl/8znSKb

31. Continuous Integration
（継続的インテグレーション）
要するに試す回数を増やす
自動化基礎
継続的インテグレーションとは、ソフトウェア開発手法において、
プロジェクトメンバーがそれぞれ開発した結果を頻繁に結合し、
定期的にビルドやテストを行うことである。
!
問題点を早期に摘出することができ、効率的な開発に役立つ。
IT用語辞典バイナリ http://goo.gl/8znSKb

32. ツール・サービス
• Jenkins
• Travis CI
• CircleCI
自動化基礎

34. • ローカルで使える
• Mac/Windows/Linux
• そのへんの余っているマシンに
入れるだけで、動く
つまりお手軽
自動化基礎

35. Jenkinsにさせていること
• ビルド
• アップロード
• メール通知
• (テスト)
大したことはさせてない
自動化基礎

36. !
#

37. ! #
$アップロード
ビルド
%
&メール通知

39. 理想
ビルドだけでなく…
• JSのテスト
• スタイルガイド
• JSドキュメント生成
• validation系
自動化基礎

40. 現実
とはいえ、けっこうちゃんとさせてます。
Flashでできていたことの延長線とかも。
自動化基礎

41. 普段やっているタスク
• jade/sass/coffeeのコンパイル
• 画像類のcopy
• jsのconcat, minify
• bower
• ローカルサーバー立ち上げる
• サーバーアップロード
• テスト
• lint系
自動化基礎

42. GruntのちょっとしたTips
• ビルドIDによるプチバージョン管理♥
• load-grunt-configで、そこそこきれいにGruntfileを書く
• context を作って、そこに動的な設定をわたす
自動化基礎

43. イケメン！
ここまで見たあなたは…
休憩します
ものすごく疲れてると思うので
リケジョ！

44. 質問
あなたが普段やっている
自動化を教えてください。

45. 実際の案件での話

46. スマホブラウザの限界に挑む
• TOYOTOWNのLINEアカウントからの誘導を有効活用
• シェアされたURLから「インストールなしですぐ遊べる！」
という手軽さで、いままで見たこともないようなリッチな体験
事例: PASSO AMIDA DRIVE
'

47. つくるフロー
ずっと検証しながらやっていた
最初
検証 + モック作成
中盤
検証 + モック作成
終盤
検証 + 仕上げ
事例: PASSO AMIDA DRIVE

48. なぜそんなに検証をしているのか
事例: PASSO AMIDA DRIVE
• FPSがまったく出ない
• Androidがクソすぎる
• 検証環境が多い
• iPhone4S/5/5S
• iOS6 / 7
• Safari / (Chrome)
• FB,Twitter, LINEのWebView
• GALAXY / Xperia…
• Android2.3 / Android4
• 標準ブラウザ / Chrome

49. イテレーション地獄
事例: PASSO AMIDA DRIVE
• あまりにも問題が多い
• 1つ実装すると、2つ問題が発生する
• いっぺんに確認しないといけないのが多すぎる
• BrowserSyncがうまくいかない
(キャッシュがききまくっていて、JSが更新されない)

50. 問題の例
事例: PASSO AMIDA DRIVE
• Android 標準ブラウザのみ、canvasのパスが閉じ
ない(ドーナツの描画時にバグった)
• Android4 標準ブラウザ のUserAgentに
「Chrome」と書いてある端末がある(GalaxyS4)
• Android4 標準ブラウザでのWebAudioが地獄

51. 問題の例
事例: PASSO AMIDA DRIVE
• Android 標準ブラウザのみ、canvasのパスが閉じ
ない(ドーナツの描画時にバグった)
• Android4 標準ブラウザ のUserAgentに
「Chrome」と書いてある端末がある(GalaxyS4)
• Android4 標準ブラウザでのWebAudioが地獄
こんなの知るか！バカ！
メイのバカ！もう知らない！

52. Androidと
うまく付き合うには？

53. 語尾に
「毎日が楽しい」
とつける

54. Androidマジむかつくわ∼。
ぜんぜん動かんやん。
あ∼、毎日が楽しいわ∼。

65. 質問
Androidとのうまい付き合いかたを
教えてください。

66. 描画面での課題
事例: PASSO AMIDA DRIVE

67. 描画面での課題
事例: PASSO AMIDA DRIVE
• ものすごく大量のオブジェクトを置いている
• 道路標示やパネル、ゴール、クルマ、
どこでもドア
• きちんとレンダリングの管理をしたらおk

68. 描画面での課題
事例: PASSO AMIDA DRIVE
引きの画面とズーム画面があって、ズルしないと描画できない

69. このままでは進まない

70. どこかでAndroidの
検証を諦める

71. ここを超えればまあ大丈夫、
というラインを決める
事例: PASSO AMIDA DRIVE
FPS30行けそうなラインを見つけた

72. どこかでAndroidの検証を諦める
事例: PASSO AMIDA DRIVE
• FPSが30出せる仕組みを作れたときに、
• Androidでおかしいところを
• ぜんぶ無視するようにした
• FPSが下がっても気にしない
(○

73. 一番使われている端末を優先させる
事例: PASSO AMIDA DRIVE
• どの端末が一番多いか
• → iOS
• ほとんどiPhone5以上
• → iPhone4は10%

74. ゴールが見えてきたら優先順位！
そしてブラッシュアップ！
事例: PASSO AMIDA DRIVE

75. Grunt

76. Gruntでの
動的な変数の受け渡し方
事例: PASSO AMIDA DRIVE

77. Gruntでの
動的な変数の受け渡し方
事例: PASSO AMIDA DRIVE
• <%= hoge %> みたいなやり方がめんどくさい
• grunt.context オブジェクトを勝手に作って、
自分でデータをほりこむ

78. 終わり！

79. 1. 自動化基礎
2. PASSO AMIDA DRIVEでの事例紹介
アジェンダ
小規模Web制作会社でも
フロントエンドのスキルを磨く方法と実践

80. まとめ

81. アップロードに
魂を込めない
Androidで
動かなくても
動じない
http://en.wikipedia.org/wiki/Nuclear_explosion
魂は込めるべきところに込めろ！

82. フロントエンドのひと
募集中
• バスキュールではフロントエンドのひとを募集しています。
• 「俺のほうが意識高い！」
• 「そんなズルはズルくもなんともない！」
• という人はぜひ来てください！

83. http://bapa.ac/
バスキュールとパーティーで学校をはじめることになりました。
Both Art and Programming Academy, 略してBAPA。
!
もしひとりの人間がデザインとプログラミングを両方できるとしたら、
表現の可能性はもっと広がるはず。

84. レポート課題

85. Androidと、
よいお付き合いの仕方を
教えてください。