Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Loading in …3
×
1 of 46

Related Books

Free with a 30 day trial from Scribd

See all

20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru

  1. 1. note スタートアップだからこだわったこと Shoei Takamaru (@takamario)
  2. 2. Agenda • 自己紹介・サービス紹介 • スタートアップだからこだわったこと • 最新技術を! • グローバルに! Copyright © Piece of Cake, Inc. All Rights Reserved. • イケてる! • etc… • まとめ 2
  3. 3. 自己紹介
  4. 4. Who are you? • 高丸 翔英 (たかまる しょうえい, @takamario)! • エンジニア (フロントエンド寄り?)! • 2008年4月 楽天 入社! • 2014年1月 ピースオブケイク 入社! • 趣味は、ジョギング・バンド活動・写真・料理・酒 Copyright © Piece of Cake, Inc. All Rights Reserved. 4
  5. 5. サービス紹介
  6. 6. Our Services • デジタルコンテンツ配信プラットフォーム Cakes (ケイクス) 2012年9月リリース https://cakes.mu/! • クリエイターと読者をつなげるサイト! • 週額150円 / 月額500円で全記事読み放題! • サブカルな記事が多いです (腐女子とか、恋愛工学とか、レズとか) Copyright © Piece of Cake, Inc. All Rights Reserved. 6
  7. 7. Our Services • note (ノート) 2014年4月リリース Copyright © Piece of Cake, Inc. All Rights Reserved. https://note.mu/! • 個人でコンテンツが100円から販売できる プラットフォーム 7
  8. 8. Got a lot of feedback Copyright © Piece of Cake, Inc. All Rights Reserved. 8 • リリース1ヶ月で2,000万PV、100万UU 達成
  9. 9. Got a lot of feedback • 芸能人アカウントも続々 GLAY HISASHIさん Copyright © Piece of Cake, Inc. All Rights Reserved. 9 伊集院光さん くるりさんロンブー田村淳さん
  10. 10. Copyright © Piece of Cake, Inc. All Rights Reserved. Quruli • くるり公式ファンクラブ 純情息子がnoteに移行 • 会報、オフショット、 未公開音源、チケット先行 予約案内など、 すべてがnote上で! 10
  11. 11. Great Hits • 山本さほさんのマンガ 岡崎に捧ぐがヒット! https://note.mu/sahoobb/m/ m6d7f0f032e74 • 深爪さんの、性の話から ドラマの感想まで書かれた コラムがヒット! https://note.mu/fukazume_taro • 今後は一般の方の作品が 爆発的に売れる可能性も! Copyright © Piece of Cake, Inc. All Rights Reserved. 11
  12. 12. Recent Releases • 2014年10月 iPhone/Androidアプリ リリース • PC版だけだったテキスト編集、 そして、ボイスレコーダー代わりに サウンドノート録音が可能に • プッシュ通知で 新しいコンテンツの更新を 見逃しません! Copyright © Piece of Cake, Inc. All Rights Reserved. 12
  13. 13. Recent Releases • クリエイターサポート機能" • いわゆる投げ銭です • Crowd Funding 的な 使い方もできる Copyright © Piece of Cake, Inc. All Rights Reserved. 13
  14. 14. スタートアップだから こだわったこと
  15. 15. 最新技術を!
  16. 16. Use new technologies! Copyright © Piece of Cake, Inc. All Rights Reserved. 16 Angular.jsを採用 • HTMLがそのままテンプレートに • インラインでイベントバインディング(ng-click等) インラインでviewとmodelのバインディング(ng-model) • Model 側であった変更が、View に伝わる View 側であった変更が、Model に伝わる (2-way Data binding)
  17. 17. Angular Style var noteApp = angular.module('noteApp',[]); ! myApp.controller('NoteCtrl', [ '$scope', function($scope, $http) { $scope.likeNote = function() { $http.post('like'); }; } ]); JS Copyright © Piece of Cake, Inc. All Rights Reserved. 17 <div class="note" ng-controller="NoteCtrl"> <div class="datetime">{{note.published_at | date:'yyyy/MM/dd'}}</div> <p class="talk">{{note.body}}</p> ! <button class="like-button" ng-click="likeNote()"> ! <div class="comment"> <input class="comment-form" ng-model="comment"> </div> </div> HTML
  18. 18. Angular’s Pros • HTMLにコード書くのはラク • 2 way-binding 激ラク データ更新を反映させるためのコード書かなくても、勝手に表示値が変わってくれる Copyright © Piece of Cake, Inc. All Rights Reserved. 18 「使ってみたかったかった」が一番の理由。 不安はあったが。。! デザイナーがHTML(haml)を作成/修正 エンジニアがng-xxxxを付ける/移動する スピーディーな開発
  19. 19. How about SEO? • たいていのボットは、JSでレンダリングされてものは 読み取れない • 対応しなければいけないのは、 Google と Yahoo! と Bing と。。? Copyright © Piece of Cake, Inc. All Rights Reserved. • Facebook? • はてな?Pocket?Google+? 19 SEO対策は?
  20. 20. Copyright © Piece of Cake, Inc. All Rights Reserved. OGP • 初期には、 Phantom JS で Angular を レンダリングする荒技を検討 • が、OGP bot ごとに対応が必要 • 2段階で来るbotも。。 • サーバサイドで返すように修正 しました (Googlebot以外) Phantom JS (w/ cache) 20
  21. 21. What's “note”? • 「note」で検索 (2014年11月7日時点) Copyright © Piece of Cake, Inc. All Rights Reserved. 21 2位 (良い◎)
  22. 22. What's “ノート”? • 「ノート」で検索 (2014年11月7日時点) Copyright © Piece of Cake, Inc. All Rights Reserved. 22
  23. 23. What's “ノート”? • 「ノート」で検索 (2014年11月7日時点) Copyright © Piece of Cake, Inc. All Rights Reserved. 23 6位 (そんなに悪くない)
  24. 24. Note is … Copyright © Piece of Cake, Inc. All Rights Reserved. • noteとは 24
  25. 25. Spam… • スパム投稿が増えた。。対策に追われた。。 • スパムが来る=注目されているとポジティブに考えた Copyright © Piece of Cake, Inc. All Rights Reserved. 25
  26. 26. Angular 1.3 • 2014年10月13日リリース https://github.com/angular/angular.js/blob/master/ CHANGELOG.md#130-superluminal-nudge-2014-10-13 • パフォーマンス向上! • データバインディングを一度だけにすることが可能に ⇒ 多量のデータバインディングは  レンダリングが超遅くなる (「もっとみる」ページャ系) Copyright © Piece of Cake, Inc. All Rights Reserved. 26
  27. 27. グローバルに!
  28. 28. Develop with Global Members • 元々、CTOがシンガポールにいる (それだけでカオス) • iPhoneエンジニアもシンガポールに いる(これまたカオス) • Framgia (VN) と連携 http://framgia.com/jp/case/poc.html • ElasticSearch対応や Bayesian Filterの開発など 得意な分野(ロジカルなもの)を 担当! Copyright © Piece of Cake, Inc. All Rights Reserved. 28
  29. 29. Discuss Globally! ChatWork GitHub Copyright © Piece of Cake, Inc. All Rights Reserved. 29
  30. 30. イケてる雰囲気を!
  31. 31. Looks so cool! Copyright © Piece of Cake, Inc. All Rights Reserved. 31 • 元々は、ファンクラブに 近いUIだった • クリエイターまたは有名人が ファンと深い交流を行うSNS
  32. 32. Looks so cool! • ピボット。何でもできて面白い雰囲気を! • うちのデザイン部長がズバッと作った! Copyright © Piece of Cake, Inc. All Rights Reserved. 32
  33. 33. Looks so cool! Copyright © Piece of Cake, Inc. All Rights Reserved. 33 • MediumライクなWYSIWYG エディタ (contenteditable) • 生JSでDOMいじりばっかり バグ多い、ソースはカオス • 今はこういうライブラリ も。。 https://github.com/ daviferreira/medium-editor
  34. 34. IE makes happy? Copyright © Piece of Cake, Inc. All Rights Reserved. 34 IEを斬る!!
  35. 35. iOS 8 Support • アプリリリース間近のタイミングで、 iOS 8 がリリースされる。。 • 幸い修正範囲は少なかったが、 審査に時間がかかった。。 • やはり、対応して出したほうが 「おおっ!」だと思った Copyright © Piece of Cake, Inc. All Rights Reserved. 35
  36. 36. Dog Fooding!
  37. 37. Use note for our Daily Report • noteを使って日報を書く • 使いにくいところを 自分たちで見つける Copyright © Piece of Cake, Inc. All Rights Reserved. 37
  38. 38. 技術を追い求めること
  39. 39. Someone said… • 1年に1つのプログラミング言語は 覚えるべき(LotY) from The Pragmatic Programmer • 1つの言語を使い続けるより、 その場に合わせた 言語選択ができるように Copyright © Piece of Cake, Inc. All Rights Reserved. 39
  40. 40. New Tech is similar to Start Up • 最新技術はスタートアップに似ている • バグも多いが、改善されていく(成長)のが楽しい • 誰かに任せるのではなく、自分たちで考え検証して、 結果を出す Copyright © Piece of Cake, Inc. All Rights Reserved. 40
  41. 41. Future of JS • DHH は JS MVCフレームワーク嫌いらしい http://signalvnoise.com/posts/3697-server-generated-javascript-responses • HTML/JS分離の時代から、HTML + JSの部品の時代 • Google さんの時代 • Polymer → 部品化、再利用性の向上 • Dart → JSのパフォーマンス向上 • HTTP2.0 (SPDY) → セキュア、つなぎっぱ • Android Wear → どこでも、どのデバイスでも Copyright © Piece of Cake, Inc. All Rights Reserved. 41
  42. 42. メンバーにこだわる!
  43. 43. Our Dev Team Copyright © Piece of Cake, Inc. All Rights Reserved. • CTO (SGP) x 1 • エンジニア (JPN) x 2 (高丸を含む) • iPhone App エンジニア (JPN x 1, SGP x 1) • デザイナー (JPN) x 2 • and ディレクター、ユーザサポート(JPN) 43 愉快なサブカル野郎たち
  44. 44. ぜんぜ足りてまへん!
  45. 45. We’re hiring! ピースオブケイクではエンジニアを募集しています! • cakesとnoteを支えるサーバーサイドエンジニアを募集! https://www.wantedly.com/projects/10771 • Angular JSを使って開発したいエンジニア大募集! https://www.wantedly.com/projects/10789 • noteのiOS/Androidアプリをつくりたいエンジニア大募集! https://www.wantedly.com/projects/10784 Copyright © Piece of Cake, Inc. All Rights Reserved. 45
  46. 46. Thank you for listening!

×