とらのあなラボのOSSへの取り組み

とらのあなラボのOSSへの取り組み

Transcript

1. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. とらのあなラボの OSSへの取り組み 1
2. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 自己紹介 2 本業: ねこ様の従者 副業: 虎の穴ラボのエンジニア 服部 和哉(はっとり かずや) 2020年8月 とらのあなラボ入社 技術 フロントエンドからインフラまで何でもやりま す。自動化が好きです。 最近良く触るものは Terraform、TypeScript、Ruby
3. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. とらのあなラボ について 3
4. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. とらのあなラボについて 虎の穴ラボ株式会社(※)は、 「コミックとらのあな」や「Fantia」等を運営する 株式会社虎の穴のグループ企業です。 主に虎の穴が運営しているWebサービスの開発をしてい ます。 ※会社の正式名称は漢字の「虎の穴ラボ」ですがこのスライドでは「とらのあなラボ」と表記します。 4
5. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 「とらラボ」で検索！ とらのあなラボについて とらのあなラボのHPでは 技術ブログや素材集など を公開しています。 5
6. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. とらのあなラボについて 6 ここから！ ブログやってます！
7. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. とらのあなラボについて 7 ここから！ 素材集あります！
8. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. とらのあなラボは フルリモート＆地方勤務可能！ 日本全国から勤務可能です！ ※入社後、2週間は秋葉原事務所にて勤務 （宿泊費・交通費は会社負担） ※2週間経過後、地元からフルリモートで勤務可能 もちろん、入社してから地方へ移住もOK！ 京都 兵庫 三重 鹿児島 メンバーの住まい 東京 千葉 埼玉 茨城 北海道 福島 長野 とらのあなラボについて
9. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 自宅以外に好きな場所で 業務を行うことができます 連続30日まで利用可能 実家からの勤務 旅行先からのホテルなどから勤務 など とらのあなラボについて ワーケーション制度も導入しています。
10. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. とらのあなラボについて 開発している主なプロダクト 10 とらのあな通信販売 Fantia とら婚コネクト
11. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. とらのあなラボで作成しているOSS とらのあなラボについて 11 WBS Tool Tora Viewer
12. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 本日はとらのあなラボで取り組んでいるOSS についてご紹介します。 12
13. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. アジェンダ 1. 企業が行うOSS活動とは？ 2. Fantiaビューアーから生まれた Tora Viewer 3. 社内ツールから生み出されたWBS Tool 4. その他OSSへの取り組み 13
14. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 企業が行うOSS活動とは？ 14
15. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 企業が行うOSS活動とは？ • OSSとして成果物を公開する ⇒ 公開している成果物として Tora Viewer、WBS Toolをご紹介します。 • OSSにコミットする ⇒ 自社製以外のOSS活動についてご紹介します。 15
16. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 企業が行うOSS活動とは？ とらのあなラボがOSSへ取り組む理由 • コミュニティへの貢献 • 外部のエンジニア文化に触れる • とらのあなラボのブランディング 16
17. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. コミュニティへの貢献 • 普段はOSSを享受する側 ◦ Ruby/Rails ◦ Spring ◦ その他ミドルウェアなど • 少しでもエンジニアとして還元したい 企業が行うOSS活動とは？ 17
18. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 外部のエンジニア文化に触れる • 内部でレビューしていると気がつかない視点 • プロダクトは使ってもらうことに価値がある ◦ 外部でも使ってもらえるプロダクトの品質を目指す • 作法的な部分の勉強 ◦ Pull Requestの運用など 企業が行うOSS活動とは？ 18
19. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. とらのあなラボのブランディング • とらのあなラボを知ってもらいたい ◦ 技術力アピール • 社内のアウトプット文化形成 ◦ 各メンバーのアウトプット ▪ 各メンバー単位でのブランディングにつながる 個々人が業界で一流と言われるエンジニアを目指す 企業が行うOSS活動とは？ 19
20. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生 まれたTora Viewer 20
21. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer 今回ご紹介するOSSの1つTora Viewerは 漫画や写真集などの画像一覧を閲覧できるビューアーを作成できるライブラリです。 NPMまたはCDNで利用可能です。 21 npm i @toralab/tora-viewer <script src="https://cdn.jsdelivr.net/npm/@toralab/tora-viewer"></script>
22. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer Fantiaはとらのあなが運営、とらのあなラボが開発しているサービス クリエイター支援サービス（ WEB）2016年5月サービス開始 クリエイターの自由な作品発表 創作活動のための資金獲得 これらを叶える クリエイター支援プラットフォーム クリエイターやユーザーの皆さまの声を聞きながら、様々な機能 を開発しています。 https://fantia.jp/
23. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer FantiaビューアーはFantiaの機能の一つです。 アップロードしたデジタル商品(画像ZIPとPDF)を ブラウザで閲覧できるようにする機能です。 23
24. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer Fantiaビューアーのブラウザで視聴部分が Tora Viewerの元になっています 24
25. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer Fantiaビューアー作成に至った経緯
26. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer やりたいことの一部Pickup 26 ダウンロード商品をス マホユーザーでも簡 単に閲覧できるように したい 漫画や写真集をブラウザで閲覧 できる機能は他のシステムでも 使い回せたらいいな 最近マイクロサービス が多くなってきたから マイクロサービス作る ときはよく考えないと 画像処理は重いので既 存のFantia機能に影響 がでないようにしたい 早めにほしい OSSやりたいよね
27. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer Fantiaでは常に様々なやりたいこと・課題があります。
28. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer やりたいことの一部Pickup 28 ダウンロード商品をス マホユーザーでも簡 単に閲覧できるように したい 漫画や写真集をブラウザで閲覧 できる機能は他のシステムでも 使い回せたらいいな 最近マイクロサービス が多くなってきたから マイクロサービス作る ときはよく考えないと 画像処理は重いので既 存のFantia機能に影響 がでないようにしたい 早めにほしい OSSやりたいよね ディレクターサイド エンジニアサイド 管理サイド サポートサイド
29. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer やりたいこと・課題から機能開発案件が生まれます。 Fantiaビューアーもその一つです。
30. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer 最終的にはこのような構成になり ました。 • 処理の大部分はFantia本体 外のサーバーレス環境で行 う。 • 将来的にマイクロサービスな どに切り出しやすいようにシ ンプルな設計にする。 1つ1つをシンプルに！ 30
31. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer Fantiaにはビューアークライアント が組み込まれています。 ※この部分がTora Viewerの元 になった部分 31
32. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer 1つ1つのLambdaはシンプルな 役割の処理になっており、 AmazonSQSで各Lambda間の 結果伝達をしています。 32
33. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer 最終的にはAmazonSNSで Fantia本体に結果を通知し、 Fantiaで閲覧が可能になります。 33
34. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer Fantiaビューアーのデータは Fantia内で管理してます。 ※将来的にマイクロサービス化する場 合はデータはFantia外に出す予定で す。 34
35. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer Fantiaビューアーの クライアント部分の利用技術 Viteをモジュールバンドラとして TypeScriptとJSXで作られています。 JSXを使っていますが、React等のフレームワークはリッチすぎるので採用しません でした。 Fantia以外のプロダクトでも使うつもりでシンプルに作りました。 35
36. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer Fantiaビューアーの クライアント部分の利用技術 利用技術の採用理由は以下の通りです。 • 描画後、スクロール等の動きはあるが要素の変更については少ないため React等のフレームワークだと高機能過ぎた。 • バンドル時のサイズを少なくしたかった。 • IEをサポートしなくて良くなったのでブラウザ標準APIが使いやすい。 36
37. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer Fantiaビューアーの クライアント部分の利用技術 工夫したところ。 • Fantia以外の社内プロダクトで使えるようにNPMモジュールとして利用できる ように作った。 ◦ 内容的に一般公開しても問題なかったのでOSSとして世に出すことにし た。 37
38. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer やりたいこと 38 ダウンロード商品をス マホユーザーでも簡 単に閲覧できるように したい 漫画や写真集をブラウザで閲覧 できる機能は他のシステムでも 使い回せたらいいな 最近マイクロサービス が多くなってきたから マイクロサービス作る ときはよく考えないと 画像処理は重いので既 存のFantia機能に影響 がでないようにしたい 早めにほしい OSSやりたいよね そういえばこんなのあったな ディレクターサイド エンジニアサイド 管理サイド
39. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 「OSSやりたいよね」の背景 ３つの考え：エンジニア/管理サイドの共通認識 • コミュニティへの貢献 • 外部のエンジニア文化に触れる • とらのあなラボのブランディング Fantiaビューアーから生まれたTora Viewer 39
40. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer ビューアー部分ならOSSとして公開することが出来るかもしれ ない。 こうしてTora Viewerが生まれました。
41. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer 動作のデモ https://toranoana.github.io/tora-viewer/ 41
42. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer 実装方法はとても簡単です。 42 <script src="https://cdn.jsdelivr.net/npm/@toralab/tora-viewer"></script> <script> toraViewer([ 'https://example.com/1.png', 'https://example.com/2.png', 'https://example.com/3.png', 'https://example.com/4.png', ]); </script>
43. 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
44. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer OSS化にあたってやったこと • READMEの内容詳細化。 • 一部社内でしか使わない機能修正 • NPMモジュールとしての登録 44
45. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. Fantiaビューアーから生まれたTora Viewer • サーバーサイドもクライアントサイドも1つ1つシンプルにを 心がけた。 • シンプルに実装した結果、一部の処理の切り出しがしやす かった。 • あらゆるところをシンプルにしたので、最も切り出しやすいク ライアント部分をライブラリとして公開することができた。 45
46. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 社内ツールから生み出さ れたWBS Tool 46
47. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 社内ツールから生み出されたWBS Tool 紹介するもう1つのOSS、WBS Toolは ブラウザ上でガントチャートを作成することができるツールです。 このツールはとらのあなラボ社内で利用しています。 47
48. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 社内ツールから生み出されたWBS Tool WBS Toolが作られた経緯 作業スケジュールを管理するツールとしてガントチャートが作れるものがほしい。 ↓ 当時、無償ツールで良いものを見つけられなかった。 48
49. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 社内ツールから生み出されたWBS Tool WBS Toolが作られた経緯 • 有償ツールを検討したが、内製できるのではないかと技術的に興味が湧いたメ ンバーが作成した。 • 別途、内製していた作業時間を記録するアプリケーションとも連携できる可能性 があったので内製に踏み切った。 49
50. 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
51. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. WBS Tool 実演 51
52. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 社内ツールから生み出されたWBS Tool WBS Tool Back側の利用技術 言語はRust、APIはGraphQLで実装されています。 52
53. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 社内ツールから生み出されたWBS Tool GraphQLとは API向けに作られたクエリ言語、 及びその実装を指します。 クライアント側から取得する情報を 柔軟に指定できます。 53
54. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 社内ツールから生み出されたWBS Tool Rustとは 安全で高性能なコンパイラ言語です。 高いメモリ安全性を持ち、 並列処理、非同期処理にも対応しています。 54
55. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 社内ツールから生み出されたWBS Tool WBS Tool Back側の利用技術 利用技術の採用理由は以下の通りです。 • 作るものが複雑になりそうだったのでGraphQLを使いたかった。 • GraphQLを使うため、型付けができる言語を採用したかった。 55
56. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 社内ツールから生み出されたWBS Tool WBS Tool Front側の利用技術 言語はTypeScript、 フレームワークはVue.js(Vue2 + Composition API)で実装しています。 56
57. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 社内ツールから生み出されたWBS Tool WBS Tool Front側の利用技術 利用技術の採用理由は以下の通りです。 • Front側も型付けできるようにしたかった。 • 別プロダクトで Vue2を使っていたが、当時Vue3は正式リリースされていな かった。 • Vue3の先取りができるComposition APIを試したかった。 57
58. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 社内ツールから生み出されたWBS Tool • 元々は社内ツールとして活用するために作られた。 • ツールとしての完成度をより高めるため、多くの人に利用し てもらうためソースを公開した。 • 社員の技術向上のための場としても活用している。 ◦ 技術向上 ▪ 新しい技術習得 ▪ プロダクトに入れる前の練習 など 58
59. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. 社内ツールから生み出されたWBS Tool WBS Tool の改修する様子をYouTubeで公開しています。 59 https://youtu.be/6iaVWh8SZEM 他にもラジオなどやっています！
60. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. その他OSSへの取り組み 60
61. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. その他OSSへの取り組み 61 利用している製品へのContribute も実施しています
62. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. その他OSSへの取り組み 62 denoについてのLT会、「toranoana.deno」を 毎月開催しています。 https://yumenosora.connpass.com 開催日程については、とらのあなラボの connpassページを是非ご確認ください
63. Copyright (C) 2020 Toranoana Inc. All Rights Reserved. ご清聴ありがとうございました 63