蔵書管理アプリを作り直した

by Tiny Mouse

Slide 1

Slide 1 text

Tiny Mouse 蔵書管理アプリを作り直した DevFest Nagoya 2022 2022/11/14

Slide 2

Slide 2 text

n @tinymouse_jp n SI 企業の SE n 日曜プログラマ n 二児の父 n 静岡県浜松市出身 n 東京都品川区在住。名古屋市在住。 n Windows 愛用。iPhone Android スマホ n Android の会浜松支部、Hamamatsu.js 、よちよちサンデープログラミングの会（名古屋） Tiny Mouse 自己紹介

Slide 3

Slide 3 text

蔵書のリストを作りたい l 置き場所（どの部屋かどの書棚か）記録したい l 多量の蔵書を一気に登録したい（読んだ都度でなく既存の蔵書を登録する） l スマホで入力してパソコンで管理したい

Slide 4

Slide 4 text

そんな蔵書管理ソフトが見つからないないなら作るか置き場所ごとに一気に登録できるスマホで入力してパソコンで管理できる

Slide 5

Slide 5 text

蔵書管理アプリを作る HTML＋JavaScript＋Cordova フロントエンドは・・

Slide 6

Slide 6 text

蔵書管理アプリを作る Onsen UI＋jQuery＋Vue.js フロントエンドは・・

Slide 7

Slide 7 text

蔵書管理アプリを作る Google Spreadsheet データベースは・・

Slide 8

Slide 8 text

蔵書管理アプリを作る Google Apps Script バックエンドは・・

Slide 9

Slide 9 text

サーバサイドに Google Apps Script を使う GET メソッド、POST メソッドを受けて JSON などでレスポンスできる

Slide 10

Slide 10 text

https://sites.google.com/view/tinymouse-zoshodaicho 蔵書管理アプリを作った

Slide 11

Slide 11 text

フロントエンドに Cordova を使うストアを使わないと導入できない

Slide 12

Slide 12 text

フロントエンドにブラウザを使う「ウェブアプリとして公開」機能を使う

Slide 13

Slide 13 text

https://sites.google.com/view/tinymouse-zoshodaicho 蔵書管理アプリを作り直す

Slide 14

Slide 14 text

蔵書管理アプリを作り直す JavaScript のコードはそのまま使う

Slide 15

Slide 15 text

バーコード表示を読んで登録する

Slide 16

Slide 16 text

ウェブアプリでバーコード読取する

Slide 17

Slide 17 text

Qiita に書いた https://qiita.com/tinymouse/items/6aa75c30f828fe3f0c42 ウェブアプリでバーコード読取する

Slide 18

Slide 18 text

バーコード表示があるとは限らない

Slide 19

Slide 19 text

ISBN コードを OCR できるようにする

Slide 20

Slide 20 text

ウェブアプリで OCR する

Slide 21

Slide 21 text

Qiita に書いた https://qiita.com/tinymouse/items/ec3a6dfae0b334c95894 ウェブアプリで OCR する

Slide 22

Slide 22 text

iOS の Safari でカメラ画像を表示できない Android の Chrome 、FireFox で OK なのに iOS の Safari 、Chrome でエラー Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

Slide 23

Slide 23 text

mediaDevices.getUserMedia() と iOS の Safari でハマった Qiita に書いた https://qiita.com/tinymouse/items/8b82f3578e167627d209

Slide 24

Slide 24 text

https://sites.google.com/view/tinymouse-zoshodaicho 蔵書管理アプリができた

Slide 25

Slide 25 text

苦労したこと n 使っていて、バグとか見つけたり、改善内容とか気づくと、修正するためプログラミングしてしまって、肝心の蔵書の登録できない

Slide 26

Slide 26 text

サーバサイドは開発者のリソースを使うよくあるウェブアプリとサーバサイドアプリ

Slide 27

Slide 27 text

開発者のプログラム一式を利用者に配付する

Slide 28

Slide 28 text

GAS のコードやドライブのオブジェクトを配付するボタン一つでコピーして公開する処理したい

Slide 29

Slide 29 text

Qiita に書いた https://qiita.com/tinymouse/items/352aa8582b6c2ef1ddf0 GAS のコードやドライブのオブジェクトを配付する

Slide 30

Slide 30 text

実は・・以前に書いたコードが動かなくなった直したこの顛末だけで一つの発表になる

Slide 31

Slide 31 text

実は・・事前に Google アカウントの設定を変更して貰わないといけない

Slide 32

Slide 32 text

実は・・処理の途中で実行を承認して貰わないといけない

Slide 33

Slide 33 text

実は・・配付できたスクリプトの実行を承認して貰わないといけない

Slide 34

Slide 34 text

苦労したこと n 他のユーザの Google ドライブにプログラムを配付して使用して貰うのが一苦労