【個人開発】読みたい本を秒で見つける！会社の技術書管理アプリケーション「BookMark」を一般公開しました！

![bookmark_qiita.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250884/ed21cb4b-6003-8976-3e6d-609a821eaa09.png)

個人開発した会社の書籍管理アプリケーション「BookMark」を一般公開しました！
下記URLから見ることができます。（PC推奨）
~~URL：https://bookmark-tm.herokuapp.com/~~ (※heroku無料プラン廃止により閲覧不可)
GitHub：https://github.com/wallkickers/bookApplication


情報は入力済みなのでログインをクリックするとログインできます。
■ユーザー側
ログインURL:~~https://bookmark-tm.herokuapp.com/login~~
■管理側
ログインURL:~~https://bookmark-tm.herokuapp.com/admin/login~~

本記事では作ったアプリケーションの概要や機能の紹介など書いております。良かったら使っていただいて感想などもらえると嬉しいです。

# ■なぜ作ったか
<img width="882" alt="アプリ開発きっかけ.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250884/ba49b3fe-c3db-f09e-7c47-88ed83f7624b.png">

まず、**本棚に自分の見たい本があるのか分からない。** 会社にはたくさんの技術書があるのですが、ジャンル分けなどされていないので本を探すときには本棚の端から端まで見る必要がありました。

次に、**書籍貸し出しが紙で管理されている。**
会社で本を借りるときには書籍貸し出しリストに名前を書いて管理部の人に署名をもらう必要がありました。そのため、管理部の人が帰宅していると本を借りることができません。そもそもこれは紙で管理する必要があるのかという疑問がありました。

そこで作ろうと思い立ったのが今回の **「BookMark（書籍管理アプリケーション）」** です。

# ■BookMarkとは
<img width="1440" alt="トップ.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250884/133adde0-bca2-7f49-d70f-7eed44686cb3.png">
BookMarkは **書籍の管理と貸し出し申請をウェブ上で行うことができるアプリケーション** です。ユーザーは書籍名での検索、ワンクリックで書籍の貸し出し申請ができます。管理者は書籍情報のcsvをアップロードすることで書籍の登録ができたり、貸し出し申請があった際のslackへの通知設定ができたりします。

# ■主な機能
BookMarkにはユーザー側の画面と管理側の画面があります。

### ユーザー側
```
1. 会員登録
2. 書籍の検索
3. 貸し出し申請
```

#### 1. 会員登録
<img width="1440" alt="会員登録.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250884/bf55fcbe-71b9-f450-b2ee-cec53dd52745.png">

会員登録は必須です。会員登録には「名前」「メールアドレス」「パスワード」の設定が必要です。

#### 2. 書籍の検索
<img width="1440" alt="検索.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250884/5d23a49e-0b17-6be4-13c3-4b9d6a5f5c7c.png">

書籍名をカタカナで検索できます。

#### 3. 貸し出し申請
<img width="1440" alt="申請.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250884/4358e39d-8238-a4ec-e38d-12e7e638b783.png">

書籍の詳細画面から貸し出し申請画面に遷移できます。

### 管理側
```
1. 書籍の登録
2. 利用ユーザーの一覧表示
3. 書籍の一覧表示
4. 貸し出しがあった際の通知設定
```

#### 1. 書籍の登録
<img width="993" alt="csvファイル取得.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250884/6e8701b0-bcfb-d57d-d84a-a94d844d5ab6.png">

書籍の登録に必要なCSVファイルは「蔵書マネージャー」というスマホアプリと、クラウドにデータを保存できる「Dropbox」を使用すると簡単に作成できます。蔵書マネージャーで書籍のバーコードを読み取り、Dropbox経由でパソコンにcsvファイルをダウンロードしてBookMarkへcsvファイルをアップロードするという流れです。

##### 準備
準備1. スマホに蔵書マネージャーアプリをインストールする
■蔵書マネージャー
・Androidはこちら：https://play.google.com/store/apps/details?id=com.bsy_web.bookmanager&hl=ja
・iPhone：https://apps.apple.com/jp/app/%E8%94%B5%E6%9B%B8%E3%83%9E%E3%83%8D%E3%83%BC%E3%82%B8%E3%83%A3%E3%83%BC-%E6%9B%B8%E7%B1%8D%E7%AE%A1%E7%90%86-%E6%96%B0%E5%88%8A%E6%A4%9C%E7%B4%A2-%E3%83%95%E3%82%A9%E3%83%AB%E3%83%80%E3%81%A7%E3%81%AE%E6%95%B4%E7%90%86/id1071740625

準備2. Dropboxのアカウントを作成する
下記URLからDropBoxのアカウント登録を行います。
URL：https://www.dropbox.com/

##### 1-1. 蔵書マネージャーとDropBoxを連携する
<img width="349" alt="クラウド選択.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250884/6daed09d-1b28-f265-eec3-20219c7d3433.png">
蔵書マネージャー内のメニューからバックアップ（クラウド）を選択し、DropBoxにログインを行います。「蔵書マネージャーがアプリへのアクセスを許可するか」という質問をされるので、許可をクリックします。

##### 1-2. 書籍のバーコードを読み取る
<img width="363" alt="バーコード.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250884/7b20fc74-ed6a-b587-3719-68d0b0923694.png">
蔵書マネージャーで「登録」→「カメラでバーコード」をクリックするとカメラが起動してバーコードの読み取り状態になります。カメラで書籍のバーコードを写すと自動で書籍の情報を読み取り、アプリ内に保存してくれます。

##### 1-3. 書籍情報をDropboxにアップロードする
<img width="268" alt="csv.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250884/fb136924-3248-faec-c0fb-4391b229e0f3.png">
再びメニューから「バックアップ（クラウド）」を選択して、「DropBoxへのバックアップ」画面に遷移します。DropBoxと連携ができていれば→「Dropboxでの基本の保管場所」にDropBoxのアカウントが表示されます。表示されていない場合はDropBoxとの連携ができていないので1-1の手順から確認をお願いします。

問題なければ「開始」をクリックしてDropboxへcsvファイルのアップロードを行います。(wi-fi環境での実行がオススメです。)

##### 1-4. Dropboxからcsvファイルをダウンロードする
<img width="1115" alt="dropbox.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250884/2739baf2-c56c-66e6-3388-13f40e0dd1a1.png">

[Dropbox](https://www.dropbox.com/)にログインします。「/アプリ/蔵書マネージャー」から「dat_book.csv」を選択し、ダウンロードをクリックします。csvファイルがダウンロードされたら成功です。

##### 1-5. 管理画面からcsvファイルをインポートする。
<img width="1440" alt="書籍csvインポート.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250884/4bbb35c9-fd2a-d306-1577-48f8a86462c8.png">
<img width="1440" alt="書籍情報インポート_ファイル選択.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250884/333bdef3-51dd-bb96-cfaf-01cf0e8a4ba4.png">
<img width="1440" alt="書籍情報インポート_csv完了.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250884/5e823f76-6af7-a481-a5c0-86976157401e.png">

管理画面にログインを行い、メニューから「import」を選択します。「ファイルを選択」をクリック後、先ほどダウンロードしたcsvファイル「dat_book.csv」を選択します。「CSV登録が完了しました。」というメッセージが表示されれば成功です。

#### 2. 利用ユーザーの一覧表示
<img width="1440" alt="利用ユーザー一覧.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250884/2a87d4fc-e3d6-5c0e-286a-1b444d0c3746.png">

管理画面のトップ、もしくはメニューから「ユーザー一覧」をクリックするとユーザーの一覧を表示します。

<img width="1440" alt="ユーザー詳細.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250884/0007e707-1f37-fff9-0740-b160b25fd5dc.png">
ユーザーをクリックすることで、現在ユーザーが借りている書籍を見ることができます。ユーザーを削除したい場合、ユーザーが書籍を借りている状態だと削除できないようになっているので、書籍を返却してもらってから削除してください。

#### 3. 書籍の一覧表示
<img width="1440" alt="書籍一覧.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250884/eed3e17d-bc2b-d3de-7016-6c46533a7621.png">
メニューから「書籍一覧」をクリックすることで登録されている書籍の一覧を表示できます。貸し出し状態では無い書籍は削除することができます。

<img width="1431" alt="書籍詳細_ユーザー.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250884/34729c2c-ed02-e38c-6cd5-525e0093cfdc.png">
貸し出し状態の書籍の詳細画面では書籍を借りているユーザーを見ることができます。

#### 4. 貸し出しがあった際の通知設定
<img width="1217" alt="通知.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250884/d9662e98-57b9-8673-1128-da492b566aa5.png">
ユーザーから貸し出し申請があった際にslack通知を行うことができます。

##### 準備
Slackのアカウント作成を行う。
下記URLからSlackのアカウント登録を行います。
URL：https://slack.com/get-started#/
 
#### 4-1. Webhook URLを取得する。
<img width="1440" alt="webhookURL.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250884/a4a46d17-ba27-5ef0-dbc3-cf962e7bb601.png">
下記URLにアクセスしてWebhook URLを取得します。Slackにログインすると通知を送りたいワークスペースとチャンネルの選択をすることができます。

URL:https://slack.com/services/new/incoming-webhook

画像ではワークスペース「森山Dev」のチャンネル「#general」へ通知設定を行うという想定で設定しています。「Incoming Webhookインテグレーションの追加」をクリックするとWebhook URLが作成されます。

#### 4-2. 通知設定を行う
<img width="1440" alt="slack通知設定.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250884/b67faba6-13e7-be62-ffd2-429f33cac90f.png">

```
Slack Name:通知するアカウント名
Slack Icon:通知するアイコン
Slack Channel:通知先チャンネル名
Slack URL:発行したWebhook URL
```
管理画面のメニューから通知設定をクリックすると「通知アカウント名」「通知アイコン」「チャンネル名」「webhook URL」を設定する画面が表示されます。先ほど作成したWebhook URLは「Slack URL」へ入力してください。

### ■環境構築方法
環境構築の方法はgithubのREADME.mdに記載しました。
個人で利用したい方、会社で使いたい方はREADME.mdを参照してください。

GitHub：https://github.com/wallkickers/bookApplication

### ■今後
今後は自社で使ってもらってフィードバックをもらい、さらなる改善をしたいと思っています。

機能追加の要望や不具合、ソースコードのレビュー等いただけると、とても嬉しいです!