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
蔵書管理アプリを作った
ちゃんとモバイルアプリを作ったよ！