Slide 1

Slide 1 text

Tiny Mouse 蔵書管理アプリを作りました Mobile Act NAGOYA 2019/12/13

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

ISBN から書籍情報を取得する l 国立国会図書館のデータベースサービス →CD や DVD の情報が登録されていない l 楽天ブックスのデータベースサービス →登録して API キーを貰う必要あり l Amazon の検索ページ →スクレイピングする。やりすぎるとブロックされる

Slide 8

Slide 8 text

サーバサイドに Google Apps Script を使う 「ウェブアプリケーションとして公開」 GET メソッド、POST メソッドを受けて JSON などでレスポンスできる

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

l 蔵書を楽に登録したい

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

手入力できる

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Google Drive を使って OCR する navigator.camera.getPicture( function(image){ $.ajax({ url: “https://script.google.com/macros/s/○○○○○○○○/exec”, type: 'POST', data: { filedata: image, }, }) function doPost(e) { var data = Utilities.base64Decode(e.parameter.filedata, Utilities.Charset.UTF_8); var title = Utilities.formatDate(new Date, 'Asia/Tokyo', 'yyyyMMddhhmmss'); var blob = Utilities.newBlob(data, MimeType.PNG, title); var folder = DriveApp.getFileById(ActiveSpreadsheet.getId()).getParents().next(); var file = Drive.Files.insert({ title: title + ".png", mimeType: 'image/png', parents: [{id: folder.getId()}] }, blob, { ocr: true, ocrLanguage: 'ja' }); var doc = DocumentApp.openById(file.getId()); var text = doc.getBody().getText();

Slide 18

Slide 18 text

l スマホアプリでも登録内容を見たい

Slide 19

Slide 19 text

スマホアプリでも登録内容を見たい

Slide 20

Slide 20 text

l スマホアプリでも登録内容を見たい l 蔵書を楽に登録したい

Slide 21

Slide 21 text

タブを使って画面を切替する UI

Slide 22

Slide 22 text

タブ切替は今風な UI でない?

Slide 23

Slide 23 text

FAB を使って新規登録する UI

Slide 24

Slide 24 text

手入力、バーコード読取した上で保存する

Slide 25

Slide 25 text

l 登録済の内容をスマホで修正したい

Slide 26

Slide 26 text

登録済の内容をスマホアプリで修正したい

Slide 27

Slide 27 text

l 置場を登録できるようにしたい

Slide 28

Slide 28 text

タグ情報を登録できるようにする 複数選択できるコンボボックス

Slide 29

Slide 29 text

複数選択できるコンボボックス

Slide 30

Slide 30 text

タグ一覧を登録できるようにする ドラッグ&ドロップで入替する

Slide 31

Slide 31 text

ドラッグ&ドロップで入替する

Slide 32

Slide 32 text

l 連続して登録できるようにしておきたい

Slide 33

Slide 33 text

連続して登録できるようにしておきたい

Slide 34

Slide 34 text

蔵書管理アプリを作った ちゃんとモバイルアプリを作ったよ!