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

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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide