Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

⾃⼰紹介 RiLi, inc. 取締役 CTO RailsGirls Tokyo 5-11th coach          7th organizer ͠ͳ΋Μ(ยࢁ ைඒ) @sinamon129

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

RiLi,inc.について • 「⾃分らしいスタイルを叶える選択肢」を提案する、メディアお よびコミュニティを運営する会社です • 趣味・趣向が近いユーザーが集まるコミュニティをベースとする ことで、最適なコンテンツを提供する、新しいメディアの形を⽬ 指しています

Slide 7

Slide 7 text

2018年7⽉⼊社

Slide 8

Slide 8 text

私が⼊った時の状態 • Super Crowds inc.（デザイン会社）から⽣まれた会社 • モノのデザイン・動くフロント強い • Wordpress・スプレッドシートでのシステム構築等はできる • バックエンドエンジニア不在 • クリエイター集団＋編集部メンバーで計8名程 • （ちなみに⼊った時は取締役じゃなかったよ！）

Slide 9

Slide 9 text

なんで⼊ったの？ • 社⻑といつか⼀緒に仕事がしたいと思っていた • 会社の⼈たちが作るものが好き！ • ビジョンへの共感 • ⼤学時代からファッションに近い領域のサービスを作りたかった • 「1通りどうにかなるかな」ぐらいは⾊々経験してきた

Slide 10

Slide 10 text

今⽇の話 • ガチスタートアップの技術選択の⼀例 • 同僚マジでありがたい • プログラミングから⼿を引くときの⼼境 • スタートアップ興味あるけど怖そうで踏み出せない⼈へ

Slide 11

Slide 11 text

作ってきたシステム

Slide 12

Slide 12 text

⼊社前〜 • SpreadSheetでステータス管理していたものをRailsで管理画⾯化 • 「仕事を⼀緒にやってみる」お試し • 働くことが想像つかなかったりする • まず副業とかでやってみるとお互い安⼼ • 0から作るリハビリ

Slide 13

Slide 13 text

既存のメディアのフルリニューアル • ⼊社直後からはじめたプロジェクト • WordPressで動いていたメディアサイト • メインはデザインリニューアル • 10⽉のポップアップストアを⾒据えて • （物販だけど）プロモーションもできるといいね • 将来的な機能追加を視野に⼊れて

Slide 14

Slide 14 text

フルリニューアルの 技術選択と実装

Slide 15

Slide 15 text

ざっくりどう⾔うものを作ったか

Slide 16

Slide 16 text

主な構成 • Ruby • Ruby on Rails • ActiveStorageを利⽤ • webpack (not webpacker) / vue.js / sass / slim / browser-sync • GCP

Slide 17

Slide 17 text

Static Storage
 Cloud Storage Database Server
 Cloud SQL Kubernetes cluster -# *OHSFTT $POUSPMMFS .FEJB 4FSWJDF "ENJO 4FSWJDF 1PE 1PE 1PE 1PE -# *OHSFTT $POUSPMMFS $SPO+PC

Slide 18

Slide 18 text

縛り • 技術⾯での縛りは特になし • 「⾃由に決めて」と⾔われた • ⼀緒に作る⼈とお互い作りやすいようにしたい • 10⽉までにシステムの切り替えが完了している必要あり

Slide 19

Slide 19 text

考えていたこと • エンジニアを集めづらいサービスなので後のち登壇ネタに • 0から作るので⾃分がやったことないことにチャレンジしたい • スピードもいるので、やったことないことだらけにすると⾟そう • 「現実的な」構成

Slide 20

Slide 20 text

技術選択をする前に決めたこと • 開発のスコープ • 必要ページの内容とpath • 各ページの構成要素 • 上記を踏まえたワイヤー（プロトタイピングツールで画⾯遷移） • DBのテーブル設計（ER図ざっと引く）

Slide 21

Slide 21 text

⾃分の状態 • Rails Application 4年弱やってた • すでにあるアプリケーションを機能追加・運⽤が多め • Rails newからインフラ設定までやったのは2016年が最後…？ • 興味の強さ度合い • サービスや組織を作る・運⽤する >> 新しい技術とか

Slide 22

Slide 22 text

どう⾔う順番で決めていったか？ • ⾔語・フレームワーク • Ruby, Ruby on Railsが⼀番好き（なのでそれ以外考えず） • 開発環境の構築（docker-compose でmysql・本番と同⼀imageのweb） • フロントエンド周りの整備 • 管理画⾯どうするか • インフラ

Slide 23

Slide 23 text

⼀緒に開発したメンバー • フロントエンドエンジニア（1⼈） • ワイヤー引く / 全般のHTML・CSS・JS周りの実装 • デザインはデザイナーが作ってくれる • Vue.jsを別件で使った経験あり • Railsプロジェクト経験もある（頻繁ではない）

Slide 24

Slide 24 text

⼀緒に作る上で話し合ったこと • 開発する上で欲しいと⾔われたもの • ES6 buildできる/SASS/Jadeもしくはそれに類するもの/ライブ リロード • SPAはお互いやったことがないのでMPAで⾏こう • スピード重視・01フェーズなのでまだ旨みがなさそう？ • VueはいけるとのことだったのでReactじゃなくてVueで進める

Slide 25

Slide 25 text

webpack(not webpacker) (1) • 初めてのモダンフロントエンド • 調査・噂を聞くにwebpackerは⼀癖ありそう • webpackも初だったので世に多く知⾒があるwebpackから • webpack -> webpackerは後でいけそう • ⼀旦sprocketsと共存しておく

Slide 26

Slide 26 text

webpack(not webpacker) (2) • js,css • /frontend/src以下に置く • webpackでjsはES6 build・SASSをcssにコンパイルしてそれぞれ別ファイル でapp/assets以下に • image, font • app/asset以下に配置（js,cssでのpath指定はasset_pathで指定） • ↑でbuildされてassets以下に配置されたファイルをasset compileする

Slide 27

Slide 27 text

みてください、この画像の枚数〜〜 • 画像がもりもりしている • 1ページ80枚以上ある • ぜんぶめっちゃかわいいので、動 作検証で開くとうっかり⾒すぎて 時間を吸われる

Slide 28

Slide 28 text

ActiveStorage • 昔、画像系gemはpaper clipを愛⽤していたが… • deplicateになってActive Storageを使えと書いてあった • 素直にActiveStorageを使うのかー！と思う（素直すぎる） • 導⼊はめちゃくちゃ簡単だった • しかし…

Slide 29

Slide 29 text

ざっくりActiveStorageの仕組み • viewで⽣成されたURLは画像のある場所ではない • RepresentationsController#show • ここで指定したストレージの画像URLにredirect • variantの指定で動的にリサイズできるが、そのタイミングで 画像のアップロードが⾛る

Slide 30

Slide 30 text

問題 • 画像のアクセス時に絶対にRails層を通る • 画像数が多いので、アクセスが同時に来ると詰まりがち • variantを指定した場合、Rails層で動的にリサイズが⾛るので、 新規画像が追加された後のアクセスで詰まりがち • CDNをはさみづらい仕組み • 公式でない（はず）

Slide 31

Slide 31 text

ちょっと遅い 後々やばそう

Slide 32

Slide 32 text

解決策 • のちに⼊社した同僚⽒がやってくれた • アップロード・モデルに紐づける部分 • ActiveStorageをそのまま使う • 画像加⼯・表⽰ • CDN(Imgix)を利⽤

Slide 33

Slide 33 text

具体的にいうと • ApplicationhelperにCDNのパスを返すhelperを追加 （production時
 
 
 
 
 
 画像のpath指定をurl_for(variant)からservice_url_for(variant)に

Slide 34

Slide 34 text

よかった・うまくいったこと • フロントエンドエンジニアとの協業 • 開発着⼿できる状態を整えるのを第⼀優先で進めた • 開発環境構築にほぼ詰まらず • 開発⽤データ投⼊バッチ • Kubernetes • スケールしやすい状態に作れた

Slide 35

Slide 35 text

うまくいかなかったところ • ActiveStorageに⼤分悩まされた • おかげでめっちゃRailsのissueやPR・コードを読むことになっ た（から勉強になった） • ちゃんと調べてから使おう • 初GKE（初Kubernetes）だったので、試⾏錯誤に時間かかった • いい学習コストだった思おう…

Slide 36

Slide 36 text

2018年11⽉ エンジニアjoin! (@gomachan)

Slide 37

Slide 37 text

よかったこと(1) • ⾃分よりレベルが⾼くて尊敬できる⼈だから安⼼して背中を任せ られる • 隣で相談できるって素晴らしい！ • 1⼈で考えて⾎迷った選択をしなくなった • 「属⼈化」からの早期脱出できた…！

Slide 38

Slide 38 text

よかったこと(2) • ⼊社前に現状の事業周りを取り巻く情報と相談事項をまとめた • 「コードを読んでもわからないこと」をメインに • システム周りでいうと、「これは上⼿に実装できなくてこう なってる」を⼀緒に考えて解決できた • 遠慮したりカッコつけないで相談しまくる

Slide 39

Slide 39 text

⼊社してすぐやってくれてよかったこと • 定期⾃動gem updatePR⽣成 • rubocop/onkcopの導⼊ • CircleCIの整備 • ActiveStorageのCDN対応 • 頻出コマンドをmakeファイルにまとめて、`make`って打ったらhelpが出る • めっちゃドキュメントレスになる・迷わない・最⾼ • その他私が志半ば・トチ狂って実装してたものをキレイキレイ

Slide 40

Slide 40 text

よかったこと(3) • 私がエンジニアリングからある程度⼿を離す選択肢が取れた • 同僚⽒：エンジニアリング全般ゴリゴリやりたいマン • 私：開発が関係する仕様周り・組織的に回ってないところやる マン

Slide 41

Slide 41 text

プログラミングするの 減ったの⾟くないの？

Slide 42

Slide 42 text

⼿を離せるようになったので • とりあえず回ってない・⾜りてない部分を補うように動き出した • 会社を整えていく部分 • 今後やりたいことをできるようにするための意思決定を進める • 社⻑に「キャリアとしてエンジニア極めたいとかあれば無理にと はいわないけど、⼀緒に経営やらない？」って⾔われる

Slide 43

Slide 43 text

是⾮と返事したが、同時に考え始めた • 現状、⾃分が職域を超えて動く⽅が将来的にいいものが作れる会 社を作れそうだからやりたい • エンジニアリング以外の仕事は過去に同僚がやっているのを⾒た ことがあることも多いけど、やったことはほぼない • 経営するとはなんだ • 「組織最適化」を極めて動いた先に私はどうするんだ

Slide 44

Slide 44 text

プログラマとしての葛藤・不安 • コードを書くことにこだわりが無いと思っていだけども • プログラム書かない仕事はしたくないとかはないが • システム設計・実装・システムと⼀緒の時は楽しい • たとえバグが出ようが障害が起きようが • 技術的に置いていかれてる感

Slide 45

Slide 45 text

なんか漠然と不安に襲われたので • いろんな⼈に相談してみる • なんで不安なのか考えてみる • そもそも何がやりたかったんだっけ？

Slide 46

Slide 46 text

相談してみる • 例えば • 今後やるであろう仕事をやってる⼈ • エンジニアだけど⼀時的に職域外の仕事をしてた⼈ • 同じような境遇にいそうな⼈ • （余談）⾎迷ってると「⾃分どうしたらいいんですかね？」とか 相談してしまって、「何がしたいの？」って聞かれたりするw

Slide 47

Slide 47 text

そもそもなぜ不安になるのか考えた • キャリアとして、これまで想像の範囲内だったところから完全に 外れた • 「これまで解決してきた問題」の派⽣から外れている • 意思決定のスコープが広がった • 「終わりが分かりやすい仕事」ではないことが多い • -> 想像できない・わからない・進んでない感が不安材料

Slide 48

Slide 48 text

私結局何がやりたかったんだっけ…？ • 「素敵だな」って思えるものにみんなが出会える世界にしたい • 私の個⼈的欲望としては「（⾃分が）かわいいと思うもの」の情 報に溺れながら、これだ！っていうものを⾃分の周りに置きたい • IT系からもファッション系からも納得できるものを作りたい • ファッションに関するデータがもっと活⽤できるような基盤を作り たい

Slide 49

Slide 49 text

考えた結果 • まずは会社を整えていくところに全⼒投⼊する • 「全体が⼀歩前進」を意識して⾏動する（迷いは⽌まる） • 「進んでるぞ！」って思えるように分解作業をする • 全員が「得意・やりたいこと」に専念できる組織を⽬指す • 整えて強み・やりたいことに戻る！

Slide 50

Slide 50 text

（余談）最近の私 • 経営周り • 採⽤・広報（5⽉から引き継げる！） • 労務・情シス周り⼀部 • （コンテンツ周り以外の）プロダクトオーナー • 社外連絡担当 • （たまに）gem update・bug fix・ちょっとだけ開発

Slide 51

Slide 51 text

スタートアップ興味ある けど 怖そうで踏み出せない⼈へ

Slide 52

Slide 52 text

（多分⼀般的な）⾒え⽅ • 出来上がっている会社 • すでに整っている • （割と）安定している • ⼩規模スタートアップ • 整ってない • 何が起こるかわからない

Slide 53

Slide 53 text

整っていないといいこと • ⾃分が⼊ることにより何か変わるのが「わかりやすい」 • ふつうのことがふつうにできることが重宝される • 超スーパーすごいエキスパートにならなくても • ちょっとの頑張りで⼤分変わる • ⾃分の本当にできること・できないことが⾒えやすい

Slide 54

Slide 54 text

整っていないといいこと • 意思決定の当事者になりやすい • これまでこうだといいと思っていたことを反映できる • 整っていることへの尊敬の念で溢れる • 制度等がなんのためにあるのか理解できる • それを実現するまでの道のりが当事者になって⼤変さに気づく

Slide 55

Slide 55 text

検討材料として⼤事そうなこと • 純粋に⼈として合いそうかどうか • メンバーの得意分野・不得意分野の把握 • パズルがいい感じにハマると気持ちいい • ⽬指している世界に対して共感ができるか • 今あるプロダクトがというより、どうしていきたいか

Slide 56

Slide 56 text

気をつけてること • ⾃分のモチベーションとメンタルは⾃分でコントロール • 他⼈の問題を解決している余裕がある⼈がいるとは限らない • 精神的に⼤丈夫な状態をできるだけ作る • （⾃⼰肯定感と健康のため）パーソナルトレーニングに通い始めました • 健康 • 死んだら終わるので、休める⽇は休む

Slide 57

Slide 57 text

スタートアップは楽しいぞ！ • 素敵な世界を作ろうとしている会社は沢⼭ある • これまでのいろんな知⾒を注⼊するチャンス • 新しい⽂化が⽣まれる瞬間に作り⼿として⽴ち会えるかも • （やらざるを得ないから）できることが増える • 毎⽇が⽂化祭前 • うまくいかなくてもそれは⼀つの貴重な経験

Slide 58

Slide 58 text

まとめ

Slide 59

Slide 59 text

今⽇話した話のまとめ • スタートアップの技術選択 • 同僚マジでありがたい • プログラミングから⼿を引くときの思考 • スタートアップはいいぞ！