$30 off During Our Annual Pro Sale. View Details »

Notion の運用で感じた課題と、 それを解決する iOS アプリを作った話 (Notion ミートアップ #8)

Notion の運用で感じた課題と、 それを解決する iOS アプリを作った話 (Notion ミートアップ #8)

2020/05/21(Thu) に開催された Notion ミートアップ用の資料です。

YUJI TSUBURAYA

May 21, 2020
Tweet

More Decks by YUJI TSUBURAYA

Other Decks in Business

Transcript

  1. Notion
    Yuji Tsuburaya
    Notion ͷӡ༻Ͱײͨ͡՝୊ͱɺ
    ͦΕΛղܾ͢Δ iOS ΞϓϦΛ࡞ͬͨ࿩

    View Slide

  2. ʢ Φ ϯ ϥ Π ϯ Ͱ ऐ ͠ ͍ ͷ Ͱ ɺ ʣ
    ί ϝ ϯ τ ɾ ࣭ ໰ ɾ ײ ૝ ͓ ଴ ͪ ͠ ͯ · ͢
    ϋ ο γ ϡ λ ά # N o t i o n ෦ Λ ෇ ͚ ͯ π Πʔ τ
    ΋ ͠ ͘ ͸ Z O O M ͷ ν ϟ ο τ ཝ ʹ ί ϝ ϯ τ
    ͓ ئ ͍ ͠ · ͢

    View Slide

  3. Yuji Tsuburaya
    Yuji Tsuburaya
    " F r o n t e n d E n g i n e e r
    J - C AT C T O / e x . B i z R e a c h ( ~ 2 0 1 9 / 1 2 )
    M i n i m a l i s m / S p l a t o o n / N o t i o n
    @ _ _ _ 3 5 d
    ɾ େ ֶ ࣌ ୅ ͔ Β E v e r n o t e Λ 4 ೥ ͘ Β ͍ ࢖ ༻ 2 ೥ લ ʹ N o t i o n ʹ Ҿ ͬ ӽ ͠
    ɾ N o t i o n ྺ 2 ೥ ͘ Β ͍

    View Slide

  4. ࠓ೔ͷ࿩
    ࠓ೔ͷ࿩
    ̍ ɽ ๻ ͷ N o t i o n ͷ ӡ ༻ ͷ ঺ հ ͱ ɺ ײ ͡ ͯ ͍ ͨ ՝ ୊
    ̎ ɽ i P h o n e Ξ ϓ Ϧ Λ ࣗ ࡞ ͠ ͯ ղ ܾ ͠ ͨ ࿩ ʢ ͪ ΐ ͜ ͬ ͱ Τ ϯ δ χ Ξ ޲ ͚ ʣ σ Ϟ ͋ Γ
    ຊ ౰ ͸ ͜ Μ ͳ ࿩ ΋ ͠ ͨ ͔ ͬ ͨ … …
    ɾ N o t i o n B l o g ʢ N e x t . j s ʣ Λ ࣗ ෼ ࢓ ༷ ʹ Χ ε λ Ϛ Π ζ ͢ Δ
    ɾ ا ۀ ͷ υ Ω ϡ ϝ ϯ τ ɾ λ ε Ϋ ؅ ཧ π ʔ ϧ ͱ ͠ ͯ ͷ N o t i o n ӡ ༻

    View Slide

  5. ๻ͷӡ༻
    ๻ͷ Notion ͷӡ༻
    I n s p i r e d b y G T D ˍ ό Ϩ ο τ δ ϟ ʔ φ ϧ
    ɾ I N B O X ʹ ͱ ʹ ͔ ͘ ೖ Ε Δ
    ʢ Ξ Π σ Ξ ɾ λ ε Ϋ ɾ ྑ ͔ ͬ ͨ ه ࣄ … e t c ʣ
    ʢ i P h o n e ͔ Β ͕ ଟ ͍ ʣ
    ɾ P C Λ ։ ͍ ͨ λ Π ϛ ϯ ά Ͱ ɺ I N B O X ͷ ੔
    ཧ Λ ͢ Δ ʢ ϓ ϩ δ Σ Ϋ τ Խ ɾ ͦ ͷ ೔ ΍ Δ ͜
    ͱ ɾ ε τ ο Ϋ ৘ ใ Խ ʣ
    ɾ ͦ ͷ ೔ ΍ Δ ͜ ͱ ͸ ɺ σ Π Ϧ ʔ ϩ ά ͱ ͠ ͯ
    λ ε Ϋ ؅ ཧ ͢ Δ ɻ

    View Slide

  6. Latest Projects
    Evernote ࣌୅ͷӡ༻
    ͍ · · Ͱ ͷ ӡ ༻
    ΄ ΅ ಉ ͡ ӡ ༻ ɻ ͱ ʹ ͔ ͘ Ξ Π σ Ξ ࢥ ͍ ͭ ͍ ͨ Β ͢ ͙ ϝ Ϟ
    3 r d p a r t y ੡ ͷ Ξ ϓ Ϧ ΋ ซ ༻ ͠ ͯ ɺ ͢ ͙ ϝ Ϟ Λ औ Ε Δ Α ͏ ʹ ɻ

    View Slide

  7. Ҿӽ͠ޙɺײ
    ͡
    Ҿӽ͠ޙɺײ͍ͯͨ͡՝୊
    ౰ ࣌ ͷ π Πʔ τ ɻ ϊ ʔε α ϯ υ ͞ Μ ͔ Β ڭ ͑ͯ ΋ Β ͬ ͯ Δ ɻ স
    2 0 1 9 ೥ 8 ݄
    E v e r n o t e ͱ ൺ ΂ ͯ ɺ I n b o x ೖ Ε Δ · Ͱ ͕ ԕ ͘ ײ ͡ Δ ɻ ʢ 3 r d p a r t y ੡ Ξ ϓ Ϧ ͕ ͳ ͍ ɾ ى ಈ ஗ ʣ
    ๻ ͱ ͠ ͯ ͸ ɺ Ξ Π σ Ξ ࢥ ͍ ͭ ͍ ͨ Β ͢ ͙ ϝ Ϟ Γ ͨ ͍ ɻ ͦ Ε Λ ࣮ ݱ ͢ Δ ι Ϧ ϡ ʔ γ ϣ ϯ ͕ ͳ ͍ …

    View Slide

  8. Notion Ͱ΋΍Γ
    Ͳ͏ͯ͠΋ɺNotion Ͱ΋΍Γ͍ͨ
    ָ ʹ I N B O X ʹ ௥ Ճ Ͱ ͖ Δ ํ ๏ ͸ ͳ ͍ ͔ ʁ ఘ Ί ͖ Ε ͣɻ ɻ ɻ
    ࣗ ࡞ ͢ Δ ܾ ҙ Λ ͢ Δ ɻ
    2 0 2 0 ೥ 2 ݄

    View Slide

  9. ࠓ೔ͷ࿩
    ࠓ೔ͷ࿩
    ̍ ɽ ๻ ͷ N o t i o n ͷ ӡ ༻ ͱ ײ ͡ ͯ ͍ ͨ ՝ ୊
    ̎ ɽ i P h o n e Ξ ϓ Ϧ Λ ࣗ ࡞ ͠ ͯ ղ ܾ ͠ ͨ ʢ ͪ ΐ ͜ ͬ ͱ Τ ϯ δ χ Ξ ޲ ͚ ʣ
    ຊ ౰ ͸ ͜ Μ ͳ ࿩ ΋ ͠ ͨ ͔ ͬ ͨ … …
    ɾ N o t i o n B l o g ʢ N e x t . j s ʣ Λ ࣗ ෼ ࢓ ༷ ʹ Χ ε λ Ϛ Π ζ ͢ Δ
    ɾ ا ۀ ͷ υ Ω ϡ ϝ ϯ τ ɾ λ ε Ϋ ؅ ཧ π ʔ ϧ ͱ ͠ ͯ ͷ N o t i o n ӡ ༻
    Ͳ ͏ ࡞ ͬ ͯ ͍ ͬ ͨ ͔ ʁ ͷ ϓ ϩ η ε ʹ ͭ ͍ ͯ ͓ ࿩ ͠ ͨ ͍ ͱ ࢥ ͍ · ͢
    ࠷ ޙ ʹ গ ͠ σ Ϟ ΋ ͓ ݟ ͤ ͠ · ͢

    View Slide

  10. ߏ੒Λݕ౼
    ߏ੒Λݕ౼
    i P h o n e
    W e b α ʔ ό
    N o t i o n
    Ξ ϓ Ϧ
    ϝ Ϟ

    ϝ Ϟ
    A P I

    A P I

    View Slide

  11. ߏ੒Λݕ౼
    ߏ੒Λݕ౼
    i P h o n e
    W e b α ʔ ό
    N o t i o n
    Ξ ϓ Ϧ
    ϝ Ϟ

    ϝ Ϟ
    A P I

    A P I
    ͋ Ε ʁ ͦ ΋ ͦ ΋ ͜ ͜ ͬ ͯ ͍ ͚ Δ Μ ͩ ͬ ͚ ʁ
    ௐ ΂ ͯ Έ Δ ɻ

    View Slide

  12. Npedia ͞Μʹཔ
    Npedia ͞ΜʹཔΔ
    01
    02
    04
    06
    ͱ ʹ ͔ ͘ པ Δ [ 1 ]
    ͳ Δ ΄ Ͳ ɺ P y t h o n ੡ ͷ ϥ Π ϒ ϥ Ϧ ͕ ͋ Γ ͦ ͏ ͩ
    ͜ Ε ࢖ ͬ ͯ Έ Δ ͜ ͱ ʹ ͢ Δ ͔ ɻ
    · ͣ ͸ ٕ ज़ ݕ ূ Λ ͠ ͯ Έ Δ ͔ ɻ

    View Slide

  13. ߏ੒Λݕ౼
    ߏ੒Λݕ౼
    i P h o n e
    W e b α ʔ ό
    N o t i o n
    Ξ ϓ Ϧ
    ϝ Ϟ

    ϝ Ϟ
    A P I

    A P I
    ͍ ΍ ɺ ͚ Ͳ ๻ P y t h o n ॻ ͍ ͨ ͜ ͱ ͳ ͍ ͳ

    View Slide

  14. ਓʹཔΔ
    ਓʹཔΔ
    F a c e b o o k Ͱ P y t h o n ͕ Ͱ ͖ Δ ஌ Γ ߹ ͍ Λ ୳ ͢
    - > P y t h o n ͷ ج ૅ Λ ڭ ͑ͯ ΋ Β ͬ ͨ ɻ
    F l a s k ͱ ͍ ͏ W e b ϑ Ϩ ʔ Ϝ ϫ ʔ Ϋ ͕ ͋ Δ Β ͠ ͍
    ͦ ͷ ্ ʹ ϥ Π ϒ ϥ Ϧ Λ ࡌ ͤ Ε ͹ ಈ ͘ ͷ Ͱ ͸ ʁ
    ͱ ʹ ͔ ͘ པ Δ [ 2 ]

    View Slide

  15. ਓʹཔΔ
    ਓʹཔΔ
    ਓ ʹ པ Δ
    - > P y t h o n ͷ ج ૅ Λ ڭ ͑ͯ ΋ Β ͬ ͨ ͆
    F l a s k ͱ ͍ ͏ W e b ϑ Ϩ ʔ Ϝ ϫ ʔ Ϋ ͕ ͋ Δ Β ͠ ͍
    ͦ ͷ ্ ʹ ϥ Π ϒ ϥ Ϧ Λ ࡌ ͤ Ε ͹ ಈ ͘ ͷ Ͱ ͸ ʁ
    ͳ Μ ͔ ಈ ͍ ͨ ɺ ͍ ͚ ͦ ͏
    ͱ ʹ ͔ ͘ པ Δ [ 2 ]

    View Slide

  16. ਓʹཔΔ
    ਓʹཔΔ
    ಘ ҙ ٕ ɾ ਓ ʹ པ Δ
    - > P y t h o n ͷ ج ૅ Λ ڭ ͑ͯ ΋ Β ͬ ͨ ͆
    F l a s k ͱ ͍ ͏ W e b ϑ Ϩ ʔ Ϝ ϫ ʔ Ϋ ͕ ͋ Δ Β ͠ ͍
    ͦ ͷ ্ ʹ ϥ Π ϒ ϥ Ϧ Λ ࡌ ͤ Ε ͹ ಈ ͘ ͷ Ͱ ͸ ʁ
    ͳ Μ ͔ ಈ ͍ ͨ ɺ ͍ ͚ ͦ ͏
    ͱ ʹ ͔ ͘ པ Δ [ 2 ]

    View Slide

  17. ߏ੒Λݕ౼
    ߏ੒Λݕ౼
    i P h o n e
    W e b α ʔ ό
    N o t i o n
    Ξ ϓ Ϧ
    ϝ Ϟ

    ϝ Ϟ
    A P I

    A P I
    ͜ ͬ ͪ ͸ ͳ Μ ͔ ಈ ͍ ͨ ͔ Β ͍ ͚ ͦ ͏

    View Slide

  18. ߏ੒Λݕ౼
    ߏ੒Λݕ౼
    i P h o n e
    W e b α ʔ ό
    N o t i o n
    Ξ ϓ Ϧ
    ϝ Ϟ

    ϝ Ϟ
    A P I

    A P I
    ͜ ͬ ͪ ͸ ͳ Μ ͔ ಈ ͍ ͨ ͔ Β ͍ ͚ ͦ ͏
    R e a c t N a t i v e
    ಘ ҙ ͳ ٕ ज़ Λ ࢖ ͓ ͏

    View Slide

  19. ߏ੒Λݕ౼
    ߏ੒Λݕ౼
    i P h o n e
    W e b α ʔ ό
    N o t i o n
    Ξ ϓ Ϧ
    ϝ Ϟ

    ϝ Ϟ
    A P I

    A P I
    ͜ ͬ ͪ ͸ ͳ Μ ͔ ಈ ͍ ͨ ͔ Β ͍ ͚ ͦ ͏
    R e a c t N a t i v e
    ಘ ҙ ͳ ٕ ज़ Λ ࢖ ͓ ͏
    ͋ Ε ɺ ͋ ͱ ɺ ϫ Π Ϡ ʔ ɺ σ β Π ϯ ɺ ਐ ḿ ؅ ཧ ɺ Ϛ ʔ έ ς Ο ϯ άɺ ਃ ੥ ɺ υ Ω ϡ
    ϝ ϯ τ ɺ ຋ ༁ ɺ α ʔ ό ࣮ ૷ ɺ i O S ࣮ ૷ ɺ A n d r o i d ࣮ ૷ ɺ ɺ ɺ

    View Slide

  20. Hey ͞ΜʹཔΔ
    ਓ ʹ པ Δ [ 4 ]
    σβΠϯͷ͓ख఻͍
    Nita ͞ΜʹཔΔ
    ਓ ʹ པ Δ [ 3 ]
    React Native ࣮૷ͷ͓ख఻͍
    ख ఻ ͬ ͯ ͘ Ε ͯ ͋ Γ ͕ ͱ ͏
    @ryuki_kyoto
    @nitaking_

    View Slide

  21. ͻͨ͢Β։ൃ
    ͻͨ͢Β։ൃ
    ਐ ḿ ؅ ཧ : N o t i o n
    σ β Π ϯ : F i g m a
    " ࣮ ૷ : V S C o d e / R e a c t N a t i v e
    ։ ൃ ظ ؒ 2 0 2 0 ೥ 2 ~ 3 ݄
    Ί Ͱ ͨ ͘ β ൛ Ϧ Ϧ ʔε ( 4 / 1 )

    View Slide

  22. Fast Notion
    ͭ ͘ ͬ ͯ Έ ͨ
    4 / 1 F a s t N o t i o n v 1 . 0 Ϧ Ϧ ʔε
    ׬ શ ʹ ࣗ ෼ ͕ ΍ Γ ͨ ͔ ͬ ͨ ͜ ͱ Λ ղ ܾ ͢ Δ ͩ ͚ ͷ Ξ ϓ Ϧ ɻ
    ͪ ΐ ͜ ͬ ͱ σ Ϟ ͠ · ͢ ʢ ಈ ͔ ͳ ͔ ͬ ͨ Β ͝ Ί Μ ͳ ͞ ͍ ʣ

    View Slide

  23. ൓ڹͲ͏ʁ
    ϦϦʔε1ϲ݄Ͱ൓ڹͲ͏ʁ
    ɾϚʔέςΟϯάͯ͠ͳׂ͍ʹ͸ͦͦ͜͜ʁ
    ɾ414 μ΢ϯϩʔυ
    ɾ೔ຊ͕ଟ͍͚Ͳɺੈքʹ΋ͦͦ͜͜޿͕Γͭͭ͋Δ

    View Slide

  24. ͜Ε͔Β
    ͍͞͝ʹ
    ͜Ε͔Β΍͍͖͍ͬͯͨ͜ͱ
    ɾAndroid ϦϦʔεʢ΋͏Ұଉ…ʣ
    ɾෳ਺ URL ରԠʢ΋͏Ұଉ…ʣ
    ɾυΩϡϝϯτɾϚχϡΞϧͷ੔ཧʢ·͡Ͱશવग़དྷͳ͍ʣ
    ɾϚʔέςΟϯάʢ·͡Ͱશવग़དྷͳ͍ʣ
    ɾӳޠϒϥογϡΞοϓʢ·͡Ͱશવग़དྷͳ͍ʣ
    ΍Γͨͯ͘΋ɺͰ͖ͯͳ͍͜ͱ͕੝Γͩ͘͞ΜͰ͢ɻɻɻ
    ʢ։ൃ͸΋ͪΖΜɺ։ൃ͚ͩͰ͸ͳ͘ɺͷͲ͔͜Ͱɺ͓ख఻͍
    ௖͚Δํ͍Ε͹ DM ͍ͩ͘͞ɻɻɻসʣ

    View Slide

  25. ൃ ද ͸ Ҏ ্ Ͱ ͢ ʂ
    ͋ Γ ͕ ͱ ͏ ͝ ͟ ͍ · ͠ ͨ

    View Slide