Tweet
Tweet

Slide 1

Slide 1 text

怖くないオフライン機能開発 株式会社カミナシ　 ソフトウェアエンジニア 佐藤丈生 基本的な技術で実現する現場向けオフライン機能

Slide 2

Slide 2 text

自己紹介 自己紹介 佐藤丈生（Sato Tomoki） 2022/12 カミナシにジョイン。 入社以来ずっと、「カミナシ レポート」（後述）に開発に携わっている

Slide 3

Slide 3 text

会社 & プロダクト紹介 日常はITに溢れているのに、仕事場は紙ばかりで非効率。 今日も作業現場で働く人たちは、十分に才覚を発揮できていない。 そんな3,900万人の埋もれたエネルギーを、私たちが解き放つ。 誰もが享受するべき当たり前を、すべての現場の人たちに届けたい。 効率的な作業、見事な成果、腕のなる仕事、豊かな人生。 これらはきっとつながっているから。 ノンデスクワーカーの 才能を解き放つ Mission

Slide 4

Slide 4 text

プロダクトについて TBD https://corp.kaminashi.jp/business

Slide 5

Slide 5 text

プロダクトについて https://corp.kaminashi.jp/busines s カミナシ レポートのオフライン機 能についてお話しします

Slide 6

Slide 6 text

カミナシレポート 紙の帳票をノーコードでアプリ化 PWA/Native App & backend の API サーバー ノンデスクワーカーが作業記録を つけているイメージ

Slide 7

Slide 7 text

本発表について 「常時ネットワークが繋がらない」環境でのカミナシレポートの典型的な利用方 法を概観することを通し、それを実現するための仕組み・技術を紹介します。 加えて、実際に開発・運用する中で得られた気づき、注意点などにも触れる予定 です。 概要

Slide 8

Slide 8 text

本発表について 「常時ネットワークが繋がらない」環境での本格的なオフライン機能も、ユース ケースの切り取り方次第では、基本的な Web 技術などにより実現可能であるこ とを実感いただく。 想定聴講者 オフライン環境で利用される BtoB SaaS のユースケース、実装方法に具体的なイ メージを持ちたい方 ゴール

Slide 9

Slide 9 text

本発表について お品書き - 現場でのカミナシレポートの利用方法とその仕組み - オンラインの場合 - オフラインの場合 - 実現するための技術 - 考慮すべきポイント - まとめ

Slide 10

Slide 10 text

現場でのカミナシレポートの利用方法

Slide 11

Slide 11 text

現場でのカミナシレポートの利用方法 📶 オンラインでの利用方法 PWA/Native App

Slide 12

Slide 12 text

現場でのカミナシレポートの利用方法 📶 オンラインでの利用方法

Slide 13

Slide 13 text

現場でのカミナシレポートの利用方法 📶 オンラインでの利用方法

Slide 14

Slide 14 text

現場でのカミナシレポートの利用方法 ⛔ オフラインでの利用方法

Slide 15

Slide 15 text

現場でのカミナシレポートの利用方法 ⛔ オフラインでの利用方法

Slide 16

Slide 16 text

現場でのカミナシレポートの利用方法 ⛔ オフラインでの利用方法 （ at まだ事務所）

Slide 17

Slide 17 text

現場でのカミナシレポートの利用方法 ⛔ オフラインでの利用方法 （ at 現場）

Slide 18

Slide 18 text

現場でのカミナシレポートの利用方法 ⛔ オフラインでの利用方法 （ at 事務所）

Slide 19

Slide 19 text

現場でのカミナシレポートの利用方法 ⛔ オフラインでの利用方法

Slide 20

Slide 20 text

オンライン vs オフライン - オンライン状態では「API コール」やCDNへのアクセスにより情報の取得・ 更新 - オフライン状態では「端末のストレージ」へのアクセスにより情報の取得・ 更新 - 機能を利用するために必要なデータは、オフラインになる前にあらかじ め端末のストレージに保存しておく - 作成・更新されるデータは、端末のストレージに書き込んでいき、オン ラインに復帰したらアップロード 実現するための技術

Slide 21

Slide 21 text

実現するための技術 端末のストレージとは？ - ネイティブアプリ（React Native など） - 構造化データ:　 expo-sqlite など - 画像・PDF：　ローカルディレクトリ上のファイルとして保存 - Web アプリケーション（PWA） - 構造化データ、画像・PDFともに Indexed DB - ＊ PWA（Progressive Web Apps）化は、ほぼ必須となる

Slide 22

Slide 22 text

考慮すべきポイント 機能面 - データ同期（ダウンロード・アップロード）のトリガー - ネットワーク接続・切断の自動検知は鬼門 - ユーザーがアップロードまで確実に完遂できるようにするためのUX 非機能面 - ダウンロード・アップロードなどの信頼性・パフォーマンス - ストレージ容量逼迫の考慮 - 可観測性 などなど

Slide 23

Slide 23 text

まとめ カミナシレポートでの利用例を通じて、 一般的なネイティブアプリの機能や、Indexed DB などといった基本的な技術を利 用するだけでも、ユースケース次第で、本格的なオフライン機能を開発しうるこ とをご紹介してきました

Slide 24

Slide 24 text

終わり ご清聴ありがとうございました！ We are hiring !! カミナシ Entrance book エンジニア