Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
蔵書管理アプリを作りました
Search
Tiny Mouse
December 13, 2019
Programming
0
630
蔵書管理アプリを作りました
浜松IT合同勉強会 2019/12/7
Mobile Act NAGOYA 2019/12/13
Tiny Mouse
December 13, 2019
Tweet
Share
More Decks by Tiny Mouse
See All by Tiny Mouse
今年がんばったこと
tinymouse
0
60
【LT会】インプット・アウトプットどうしてる?
tinymouse
0
32
今年がんばったこと
tinymouse
0
160
.NET MAUI+Blazor を使ってみた
tinymouse
0
160
【LT会】この技術書がすごい
tinymouse
1
170
蔵書管理アプリを作り直した
tinymouse
1
920
Windows アプリの開発手段の選択肢をまとめてみた
tinymouse
0
130
Google Apps Script アプリを配付する
tinymouse
0
110
蔵書管理アプリを作っています
tinymouse
1
520
Other Decks in Programming
See All in Programming
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
160
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
210
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
250
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
710
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
240
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
650
リッチエディターを安全に開発・運用するために
unachang113
1
260
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
510
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
470
LLMは麻雀を知らなすぎるから俺が教育してやる
po3rin
2
900
Strands Agents で実現する名刺解析アーキテクチャ
omiya0555
1
110
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
7
990
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Agile that works and the tools we love
rasmusluckow
329
21k
Gamification - CAS2011
davidbonilla
81
5.4k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Site-Speed That Sticks
csswizardry
10
720
How GitHub (no longer) Works
holman
314
140k
Being A Developer After 40
akosma
90
590k
Designing for humans not robots
tammielis
253
25k
Six Lessons from altMBA
skipperchong
28
3.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Transcript
Tiny Mouse 蔵書管理アプリを作りました Mobile Act NAGOYA 2019/12/13
n @tinymouse_jp n SI 企業の SE n 日曜プログラマ n 二児の父
n 静岡県浜松市出身 n 東京都品川区在住。名古屋市在住。 n Windows 愛用。iPhone Android スマホ n Android の会浜松支部、よちよち Android の会、 Hamamatsu.js Tiny Mouse 自己紹介
蔵書のリストを作りたい l 置き場所(どの部屋かどの書棚か)記録し たい l 多量の蔵書を一気に登録したい(読んだ都 度でなく既存の蔵書を登録する) l スマホで入力してパソコンで管理したい
そんな蔵書管理ソフトが見つからない ないなら作るか 置き場所ごとに一気に登録できる スマホで入力してパソコンで管理できる
蔵書管理アプリを作る Google Spreadsheet データベースは・・
蔵書管理アプリを作る Google Apps Script バックエンドは・・
ISBN から書籍情報を取得する l 国立国会図書館のデータベースサービス →CD や DVD の情報が登録されていない l 楽天ブックスのデータベースサービス
→登録して API キーを貰う必要あり l Amazon の検索ページ →スクレイピングする。やりすぎるとブロックされる
サーバサイドに Google Apps Script を使う 「ウェブアプリケーションとして公開」 GET メソッド、POST メソッドを受けて JSON
などでレスポンスできる
蔵書管理アプリを作る HTML+JavaScript+Cordova フロントエンドは・・
蔵書管理アプリを作る Onsen UI+jQuery+Vue.js フロントエンドは・・
https://sites.google.com/view/tinymouse-zoshodaicho 蔵書管理アプリを作った
l 蔵書を楽に登録したい
バーコード表示を読んで登録する
バーコード表示がある とは限らない
手入力できる
ISBN コードを OCR できるようにする
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();
l スマホアプリでも登録内容を見たい
スマホアプリでも登録内容を見たい
l スマホアプリでも登録内容を見たい l 蔵書を楽に登録したい
タブを使って画面を切替する UI
タブ切替は今風な UI でない?
FAB を使って新規登録する UI
手入力、バーコード読取した上で保存する
l 登録済の内容をスマホで修正したい
登録済の内容をスマホアプリで修正したい
l 置場を登録できるようにしたい
タグ情報を登録できるようにする 複数選択できるコンボボックス
複数選択できるコンボボックス
タグ一覧を登録できるようにする ドラッグ&ドロップで入替する
ドラッグ&ドロップで入替する
l 連続して登録できるようにしておきたい
連続して登録できるようにしておきたい
蔵書管理アプリを作った ちゃんとモバイルアプリを作ったよ!