Slide 1

Slide 1 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. とらのあなラボの OSSへの取り組み 1

Slide 2

Slide 2 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 自己紹介 2 本業: ねこ様の従者 副業: 虎の穴ラボのエンジニア 服部 和哉(はっとり かずや) 2020年8月 とらのあなラボ入社 技術 フロントエンドからインフラまで何でもやりま す。自動化が好きです。 最近良く触るものは Terraform、TypeScript、Ruby

Slide 3

Slide 3 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. とらのあなラボ について 3

Slide 4

Slide 4 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. とらのあなラボについて 虎の穴ラボ株式会社(※)は、 「コミックとらのあな」や「Fantia」等を運営する 株式会社虎の穴のグループ企業です。 主に虎の穴が運営しているWebサービスの開発をしてい ます。 ※会社の正式名称は漢字の「虎の穴ラボ」ですがこのスライドでは「とらのあなラボ」と表記します。 4

Slide 5

Slide 5 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 「とらラボ」で検索! とらのあなラボについて とらのあなラボのHPでは 技術ブログや素材集など を公開しています。 5

Slide 6

Slide 6 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. とらのあなラボについて 6 ここから! ブログやってます!

Slide 7

Slide 7 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. とらのあなラボについて 7 ここから! 素材集あります!

Slide 8

Slide 8 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. とらのあなラボは フルリモート&地方勤務可能! 日本全国から勤務可能です! ※入社後、2週間は秋葉原事務所にて勤務 (宿泊費・交通費は会社負担) ※2週間経過後、地元からフルリモートで勤務可能 もちろん、入社してから地方へ移住もOK! 京都 兵庫 三重 鹿児島 メンバーの住まい 東京 千葉 埼玉 茨城 北海道 福島 長野 とらのあなラボについて

Slide 9

Slide 9 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 自宅以外に好きな場所で 業務を行うことができます 連続30日まで利用可能 実家からの勤務 旅行先からのホテルなどから勤務 など とらのあなラボについて ワーケーション制度も導入しています。

Slide 10

Slide 10 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. とらのあなラボについて 開発している主なプロダクト 10 とらのあな通信販売 Fantia とら婚コネクト

Slide 11

Slide 11 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. とらのあなラボで作成しているOSS とらのあなラボについて 11 WBS Tool Tora Viewer

Slide 12

Slide 12 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 本日はとらのあなラボで取り組んでいるOSS についてご紹介します。 12

Slide 13

Slide 13 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. アジェンダ 1. 企業が行うOSS活動とは? 2. Fantiaビューアーから生まれた Tora Viewer 3. 社内ツールから生み出されたWBS Tool 4. その他OSSへの取り組み 13

Slide 14

Slide 14 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 企業が行うOSS活動とは? 14

Slide 15

Slide 15 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 企業が行うOSS活動とは? ● OSSとして成果物を公開する ⇒ 公開している成果物として Tora Viewer、WBS Toolをご紹介します。 ● OSSにコミットする ⇒ 自社製以外のOSS活動についてご紹介します。 15

Slide 16

Slide 16 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 企業が行うOSS活動とは? とらのあなラボがOSSへ取り組む理由 ● コミュニティへの貢献 ● 外部のエンジニア文化に触れる ● とらのあなラボのブランディング 16

Slide 17

Slide 17 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. コミュニティへの貢献 ● 普段はOSSを享受する側 ○ Ruby/Rails ○ Spring ○ その他ミドルウェアなど ● 少しでもエンジニアとして還元したい 企業が行うOSS活動とは? 17

Slide 18

Slide 18 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 外部のエンジニア文化に触れる ● 内部でレビューしていると気がつかない視点 ● プロダクトは使ってもらうことに価値がある ○ 外部でも使ってもらえるプロダクトの品質を目指す ● 作法的な部分の勉強 ○ Pull Requestの運用など 企業が行うOSS活動とは? 18

Slide 19

Slide 19 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. とらのあなラボのブランディング ● とらのあなラボを知ってもらいたい ○ 技術力アピール ● 社内のアウトプット文化形成 ○ 各メンバーのアウトプット ■ 各メンバー単位でのブランディングにつながる 個々人が業界で一流と言われるエンジニアを目指す 企業が行うOSS活動とは? 19

Slide 20

Slide 20 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生 まれたTora Viewer 20

Slide 21

Slide 21 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer 今回ご紹介するOSSの1つTora Viewerは 漫画や写真集などの画像一覧を閲覧できるビューアーを作成できるライブラリです。 NPMまたはCDNで利用可能です。 21 npm i @toralab/tora-viewer

Slide 22

Slide 22 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer Fantiaはとらのあなが運営、とらのあなラボが開発しているサービス クリエイター支援サービス( WEB)2016年5月サービス開始 クリエイターの自由な作品発表 創作活動のための資金獲得 これらを叶える クリエイター支援プラットフォーム クリエイターやユーザーの皆さまの声を聞きながら、様々な機能 を開発しています。 https://fantia.jp/

Slide 23

Slide 23 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer FantiaビューアーはFantiaの機能の一つです。 アップロードしたデジタル商品(画像ZIPとPDF)を ブラウザで閲覧できるようにする機能です。 23

Slide 24

Slide 24 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer Fantiaビューアーのブラウザで視聴部分が Tora Viewerの元になっています 24

Slide 25

Slide 25 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer Fantiaビューアー作成に至った経緯

Slide 26

Slide 26 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer やりたいことの一部Pickup 26 ダウンロード商品をス マホユーザーでも簡 単に閲覧できるように したい 漫画や写真集をブラウザで閲覧 できる機能は他のシステムでも 使い回せたらいいな 最近マイクロサービス が多くなってきたから マイクロサービス作る ときはよく考えないと 画像処理は重いので既 存のFantia機能に影響 がでないようにしたい 早めにほしい OSSやりたいよね

Slide 27

Slide 27 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer Fantiaでは常に様々なやりたいこと・課題があります。

Slide 28

Slide 28 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer やりたいことの一部Pickup 28 ダウンロード商品をス マホユーザーでも簡 単に閲覧できるように したい 漫画や写真集をブラウザで閲覧 できる機能は他のシステムでも 使い回せたらいいな 最近マイクロサービス が多くなってきたから マイクロサービス作る ときはよく考えないと 画像処理は重いので既 存のFantia機能に影響 がでないようにしたい 早めにほしい OSSやりたいよね ディレクターサイド エンジニアサイド 管理サイド サポートサイド

Slide 29

Slide 29 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer やりたいこと・課題から機能開発案件が生まれます。 Fantiaビューアーもその一つです。

Slide 30

Slide 30 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer 最終的にはこのような構成になり ました。 ● 処理の大部分はFantia本体 外のサーバーレス環境で行 う。 ● 将来的にマイクロサービスな どに切り出しやすいようにシ ンプルな設計にする。 1つ1つをシンプルに! 30

Slide 31

Slide 31 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer Fantiaにはビューアークライアント が組み込まれています。 ※この部分がTora Viewerの元 になった部分 31

Slide 32

Slide 32 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer 1つ1つのLambdaはシンプルな 役割の処理になっており、 AmazonSQSで各Lambda間の 結果伝達をしています。 32

Slide 33

Slide 33 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer 最終的にはAmazonSNSで Fantia本体に結果を通知し、 Fantiaで閲覧が可能になります。 33

Slide 34

Slide 34 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer Fantiaビューアーのデータは Fantia内で管理してます。 ※将来的にマイクロサービス化する場 合はデータはFantia外に出す予定で す。 34

Slide 35

Slide 35 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer Fantiaビューアーの クライアント部分の利用技術 Viteをモジュールバンドラとして TypeScriptとJSXで作られています。 JSXを使っていますが、React等のフレームワークはリッチすぎるので採用しません でした。 Fantia以外のプロダクトでも使うつもりでシンプルに作りました。 35

Slide 36

Slide 36 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer Fantiaビューアーの クライアント部分の利用技術 利用技術の採用理由は以下の通りです。 ● 描画後、スクロール等の動きはあるが要素の変更については少ないため React等のフレームワークだと高機能過ぎた。 ● バンドル時のサイズを少なくしたかった。 ● IEをサポートしなくて良くなったのでブラウザ標準APIが使いやすい。 36

Slide 37

Slide 37 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer Fantiaビューアーの クライアント部分の利用技術 工夫したところ。 ● Fantia以外の社内プロダクトで使えるようにNPMモジュールとして利用できる ように作った。 ○ 内容的に一般公開しても問題なかったのでOSSとして世に出すことにし た。 37

Slide 38

Slide 38 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer やりたいこと 38 ダウンロード商品をス マホユーザーでも簡 単に閲覧できるように したい 漫画や写真集をブラウザで閲覧 できる機能は他のシステムでも 使い回せたらいいな 最近マイクロサービス が多くなってきたから マイクロサービス作る ときはよく考えないと 画像処理は重いので既 存のFantia機能に影響 がでないようにしたい 早めにほしい OSSやりたいよね そういえばこんなのあったな ディレクターサイド エンジニアサイド 管理サイド

Slide 39

Slide 39 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 「OSSやりたいよね」の背景 3つの考え:エンジニア/管理サイドの共通認識 ● コミュニティへの貢献 ● 外部のエンジニア文化に触れる ● とらのあなラボのブランディング Fantiaビューアーから生まれたTora Viewer 39

Slide 40

Slide 40 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer ビューアー部分ならOSSとして公開することが出来るかもしれ ない。 こうしてTora Viewerが生まれました。

Slide 41

Slide 41 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer 動作のデモ https://toranoana.github.io/tora-viewer/ 41

Slide 42

Slide 42 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer 実装方法はとても簡単です。 42 toraViewer([ 'https://example.com/1.png', 'https://example.com/2.png', 'https://example.com/3.png', 'https://example.com/4.png', ]);

Slide 43

Slide 43 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer 詳しい利用方法ついては「Tora Viewer」で検索いただくか 下記のURLを参照してみてください。 https://toranoana-lab.hatenablog.com/entry/2022/10/05/100000 43

Slide 44

Slide 44 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer OSS化にあたってやったこと ● READMEの内容詳細化。 ● 一部社内でしか使わない機能修正 ● NPMモジュールとしての登録 44

Slide 45

Slide 45 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer ● サーバーサイドもクライアントサイドも1つ1つシンプルにを 心がけた。 ● シンプルに実装した結果、一部の処理の切り出しがしやす かった。 ● あらゆるところをシンプルにしたので、最も切り出しやすいク ライアント部分をライブラリとして公開することができた。 45

Slide 46

Slide 46 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 社内ツールから生み出さ れたWBS Tool 46

Slide 47

Slide 47 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 社内ツールから生み出されたWBS Tool 紹介するもう1つのOSS、WBS Toolは ブラウザ上でガントチャートを作成することができるツールです。 このツールはとらのあなラボ社内で利用しています。 47

Slide 48

Slide 48 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 社内ツールから生み出されたWBS Tool WBS Toolが作られた経緯 作業スケジュールを管理するツールとしてガントチャートが作れるものがほしい。 ↓ 当時、無償ツールで良いものを見つけられなかった。 48

Slide 49

Slide 49 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 社内ツールから生み出されたWBS Tool WBS Toolが作られた経緯 ● 有償ツールを検討したが、内製できるのではないかと技術的に興味が湧いたメ ンバーが作成した。 ● 別途、内製していた作業時間を記録するアプリケーションとも連携できる可能性 があったので内製に踏み切った。 49

Slide 50

Slide 50 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 社内ツールから生み出されたWBS Tool WBS Tool は back と frontに分かれています。 https://github.com/toranoana/wbs-front https://github.com/toranoana/wbs-back 50

Slide 51

Slide 51 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. WBS Tool 実演 51

Slide 52

Slide 52 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 社内ツールから生み出されたWBS Tool WBS Tool Back側の利用技術 言語はRust、APIはGraphQLで実装されています。 52

Slide 53

Slide 53 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 社内ツールから生み出されたWBS Tool GraphQLとは API向けに作られたクエリ言語、 及びその実装を指します。 クライアント側から取得する情報を 柔軟に指定できます。 53

Slide 54

Slide 54 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 社内ツールから生み出されたWBS Tool Rustとは 安全で高性能なコンパイラ言語です。 高いメモリ安全性を持ち、 並列処理、非同期処理にも対応しています。 54

Slide 55

Slide 55 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 社内ツールから生み出されたWBS Tool WBS Tool Back側の利用技術 利用技術の採用理由は以下の通りです。 ● 作るものが複雑になりそうだったのでGraphQLを使いたかった。 ● GraphQLを使うため、型付けができる言語を採用したかった。 55

Slide 56

Slide 56 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 社内ツールから生み出されたWBS Tool WBS Tool Front側の利用技術 言語はTypeScript、 フレームワークはVue.js(Vue2 + Composition API)で実装しています。 56

Slide 57

Slide 57 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 社内ツールから生み出されたWBS Tool WBS Tool Front側の利用技術 利用技術の採用理由は以下の通りです。 ● Front側も型付けできるようにしたかった。 ● 別プロダクトで Vue2を使っていたが、当時Vue3は正式リリースされていな かった。 ● Vue3の先取りができるComposition APIを試したかった。 57

Slide 58

Slide 58 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 社内ツールから生み出されたWBS Tool ● 元々は社内ツールとして活用するために作られた。 ● ツールとしての完成度をより高めるため、多くの人に利用し てもらうためソースを公開した。 ● 社員の技術向上のための場としても活用している。 ○ 技術向上 ■ 新しい技術習得 ■ プロダクトに入れる前の練習 など 58

Slide 59

Slide 59 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 社内ツールから生み出されたWBS Tool WBS Tool の改修する様子をYouTubeで公開しています。 59 https://youtu.be/6iaVWh8SZEM 他にもラジオなどやっています!

Slide 60

Slide 60 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. その他OSSへの取り組み 60

Slide 61

Slide 61 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. その他OSSへの取り組み 61 利用している製品へのContribute も実施しています

Slide 62

Slide 62 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. その他OSSへの取り組み 62 denoについてのLT会、「toranoana.deno」を 毎月開催しています。 https://yumenosora.connpass.com 開催日程については、とらのあなラボの connpassページを是非ご確認ください

Slide 63

Slide 63 text

Copyright (C) 2020 Toranoana Inc. All Rights Reserved. ご清聴ありがとうございました 63