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やりたいよね」の背景
３つの考え：エンジニア/管理サイドの共通認識
● コミュニティへの貢献
● 外部のエンジニア文化に触れる
● とらのあなラボのブランディング
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