FL Bricksという電子書籍を簡単に配信できるサービスを使ってみよう！

技術書典が近いですね！

技術書典向けに作った紙の本を同時に電子書籍としても配信できるFL Bricksというサービスの使い方をまとめました。


## FL Bricksとは

https://www.bricks.pub


> FL Bricksは独自の出版サービスを展開したい出版者向けのマイクロサービスシリーズです。
> 機能単位で利用できるため、柔軟に独自の出版サービスを構築出来ます。

FL Bricksはクローズドベータ提供中で現在は問い合わせからしかユーザー登録ができません。

**FLB ROOT**

> FLB ROOTは、出版コンテンツを管理・制御するサービスです。
> 登録した出版コンテンツの書籍ファイル・書誌情報を誰がどのように使用するかを管理・制御します。

このサービスで電子書籍の管理や自分のアプリの登録をします。

**FLB BinB**

> FLB BinBは、出版コンテンツをWEBブラウザ上で閲覧可能にするサービスです。
> FLB ROOTで使用許可されたPDF ／ ePub 形式の出版コンテンツをコンバートし、BinB ビューワーで閲覧可能にします。

FLB BinBを使うとFLB ROOTに登録された電子書籍を配信できます。
[BinB](http://demo.binb.jp/website/binb/)はいろんなサイトでの実績がある電子書籍ビューワーです。

## FLB ROOTにログインしてみる
![](https://d2mxuefqeaa7sj.cloudfront.net/s_A346D60D4E2F292E7164E57CA9AC8B76C0CEF003D5D7D07BD31C13A4E33692FB_1552635244380_screencapture-console-root-bricks-pub-users-owners-2019-03-15-16_33_14.png)


ログインしました。
コンソールでは主にコンテンツオーナーとBrickの管理ができます。

**コンテンツオーナー**

> コンテンツオーナーとは、コンテンツを所有し管理する組織や個人です。例えば、○○出版、○○出版××編集部 等

**Brick**

> Brickとは、FL Bricksを使って構築されたサービスやアプリケーションです。

これを登録するとAPIキー等開発に必要な情報が取得できます。

## サンプルアプリを作ってみよう

技術書典向けに書いた本をTwitterやその他SNSから読めるようなサイトを想定してサンプルを作ってみます。


## 作業の流れ

サンプルアプリを作るにあたって全体の流れを確認しておきます。


1. Brick登録
2. コンテンツ登録
  1. コンテンツオーナーを登録する
  2. コンテンツの利用権限を設定する
  3. APIを使ってコンテンツを登録する
  4. APIを使ってファイルをアップロードする
  5. APIを使って画像をアップロードする
3. コンテンツ閲覧
  1. FLB BinBにログインする
  2. Brick情報を登録する
  3. APIを使ってコンテンツを読むためのリンクを生成する
  4. 読めました

## 1. Brick登録
![](https://d2mxuefqeaa7sj.cloudfront.net/s_A346D60D4E2F292E7164E57CA9AC8B76C0CEF003D5D7D07BD31C13A4E33692FB_1553241569316_screencapture-staging-console-root-bricks-pub-users-bricks-new-2019-03-22-16_59_05.png)


Redirect URIにはひとまずhttp://localhost を指定しておきます。

![](https://d2mxuefqeaa7sj.cloudfront.net/s_A346D60D4E2F292E7164E57CA9AC8B76C0CEF003D5D7D07BD31C13A4E33692FB_1552638158975_screencapture-console-root-bricks-pub-users-bricks-b0f3d189-9eb1-4077-87c5-ae547fc2e104-2019-03-15-17_20_27.png)


APIキーなどの情報を取得できました。

## 2. コンテンツ登録

**コンテンツオーナーを登録する**

![](https://d2mxuefqeaa7sj.cloudfront.net/s_A346D60D4E2F292E7164E57CA9AC8B76C0CEF003D5D7D07BD31C13A4E33692FB_1552637577160_screencapture-console-root-bricks-pub-users-owners-new-2019-03-15-17_12_44.png)


**コンテンツの利用権限を設定する**

![](https://d2mxuefqeaa7sj.cloudfront.net/s_A346D60D4E2F292E7164E57CA9AC8B76C0CEF003D5D7D07BD31C13A4E33692FB_1553649925835_screencapture-console-root-bricks-pub-users-owners-e721eb64-bfbf-4809-b2c2-a4015146619e-permissions-2019-03-27-10_25_09.png)


先程作ったBrickとFLB BinBに対してこのコンテンツオーナーが持っているコンテンツを使えるように許可を与えます。

**APIを使ってコンテンツを登録する**
以下の登録APIを使って登録します。
https://console.root.bricks.pub/docs/api/v1#owners-contents-create

    curl --location --request POST "https://api.root.bricks.pub/v1/owners/{あなたのコンテンツオーナーのID}/contents" \
      --header "Content-Type: application/json" \
      --header "X-API-KEY: {BrickのAPIキー}" \
      --header "Authorization: Bearer {Access token}" \
      --data "{
        \"title\": \"FL Bricksという電子書籍を簡単に配信できるサービスを使ってみよう！\",
        \"description\": \"FL Bricksという電子書籍を簡単に配信できるサービスを使ってみよう！\",
        \"authors\": [
            {
                \"name\": \"@shwld\",
                \"role\": \"著\"
            }
        ],
        \"image\": {
            \"filename\": \"cover.jpg\"
        },
        \"file\": {
            \"filename\": \"flb.pdf\",
            \"layout_type\": \"pre_paginated\",
            \"trial_range\": \"-5\"
        }
    }"

事前にイメージ画像とPDFファイルを用意しておくことをオススメします。

レスポンス：

    {
        "data": {
            "id": "xxxxxxxxxxxxxxxx",
            "title": "FL Bricksという電子書籍を簡単に配信できるサービスを使ってみよう！",
            "description": "FL Bricksという電子書籍を簡単に配信できるサービスを使ってみよう！",
            "owner_id": "{あなたのコンテンツオーナーのID}",
            "authors": [
                {
                    "name": "@shwld",
                    "role": "著"
                }
            ],
            "file": {
                "upload_url": "https://s3.ap-northeast-1.amazonaws.com/root.bricks.pub/content_files/eafd96f6-0c97-432a-a677-16dc306004ed/1d9338b0-dbd6-4944-8791-c8cfb5a8fda6.pdf?x-amz-acl=private&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAJLLXFHCUMKSFOTJA%2F20190327%2Fap-northeast-1%2Fs3%2Faws4_request&X-Amz-Date=20190327T005943Z&X-Amz-Expires=900&X-Amz-SignedHeaders=host&X-Amz-Signature=22214dd5895bd06cb70df338c1fcbcd63c954643a7c99c4fb9550964b69d6ff6",
                "layout_type": "pre_paginated",
                "trial_range": "-5",
                "size": null,
                "uploaded_stamp": null
            },
            "image": {
                "upload_url": "https://s3.ap-northeast-1.amazonaws.com/root.bricks.pub/content_images/eafd96f6-0c97-432a-a677-16dc306004ed/7a0c6027-50d5-49fe-8133-3d1dbf2f92cf/default.jpeg?x-amz-acl=public-read&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAJLLXFHCUMKSFOTJA%2F20190327%2Fap-northeast-1%2Fs3%2Faws4_request&X-Amz-Date=20190327T005943Z&X-Amz-Expires=900&X-Amz-SignedHeaders=host&X-Amz-Signature=dfe2e8de69df68d1049e578ebb43b0072bfa53c51a704d7372c37770aaf275b6",
                "size": null,
                "uploaded_stamp": null
            }
        }
    }

レスポンスが返ってきたら、fileとimageのupload_urlにそれぞれファイルをアップロードします。

**APIを使ってファイルをアップロードする**

    curl --location --request PUT "https://s3.ap-northeast-1.amazonaws.com/root.bricks.pub/content_files/eafd96f6-0c97-432a-a677-16dc306004ed/1d9338b0-dbd6-4944-8791-c8cfb5a8fda6.pdf?x-amz-acl=private&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAJLLXFHCUMKSFOTJA%2F20190327%2Fap-northeast-1%2Fs3%2Faws4_request&X-Amz-Date=20190327T005943Z&X-Amz-Expires=900&X-Amz-SignedHeaders=host&X-Amz-Signature=22214dd5895bd06cb70df338c1fcbcd63c954643a7c99c4fb9550964b69d6ff6" \
      --data-binary "@assets/book.pdf" -v

**APIを使って****画像****をアップロードする**

    curl --location --request PUT "https://s3.ap-northeast-1.amazonaws.com/root.bricks.pub/content_images/eafd96f6-0c97-432a-a677-16dc306004ed/7a0c6027-50d5-49fe-8133-3d1dbf2f92cf/default.jpeg?x-amz-acl=public-read&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAJLLXFHCUMKSFOTJA%2F20190327%2Fap-northeast-1%2Fs3%2Faws4_request&X-Amz-Date=20190327T005943Z&X-Amz-Expires=900&X-Amz-SignedHeaders=host&X-Amz-Signature=dfe2e8de69df68d1049e578ebb43b0072bfa53c51a704d7372c37770aaf275b6" \
      --data-binary "@assets/cover.jpg" -v
## 3. コンテンツ閲覧

**FLB BinBにログインする**

![](https://d2mxuefqeaa7sj.cloudfront.net/s_A346D60D4E2F292E7164E57CA9AC8B76C0CEF003D5D7D07BD31C13A4E33692FB_1553047468857_screencapture-console-root-bricks-pub-oauth-authorize-2019-03-20-11_04_06.png)


FLB ROOTのアカウントをFLB BinBで使うように許可します。

![](https://d2mxuefqeaa7sj.cloudfront.net/s_A346D60D4E2F292E7164E57CA9AC8B76C0CEF003D5D7D07BD31C13A4E33692FB_1553047543857_screencapture-console-binb-bricks-pub-users-bricks-2019-03-20-11_05_27.png)


ログインできました。

**Brick情報を登録する**

![](https://d2mxuefqeaa7sj.cloudfront.net/s_A346D60D4E2F292E7164E57CA9AC8B76C0CEF003D5D7D07BD31C13A4E33692FB_1553047854418_screencapture-console-binb-bricks-pub-users-bricks-new-2019-03-20-11_10_21.png)

![](https://d2mxuefqeaa7sj.cloudfront.net/s_A346D60D4E2F292E7164E57CA9AC8B76C0CEF003D5D7D07BD31C13A4E33692FB_1553048049610_screencapture-console-binb-bricks-pub-users-bricks-6-2019-03-20-11_11_49.png)


APIキーなどの情報を取得できました。

**APIを使ってコンテンツを読むためのリンクを生成する**

    curl --location --request POST "https://api.binb.bricks.pub/v1/contents/tokens" \
      --header "X-API-KEY: {APIキー}" \
      --header "Content-Type: application/json" \
      --header "X-CONFIRMATION-TOKEN: {Confirmationトークン}" \
      --data "{
      \"content_id\": \"{Content ID}\",
      \"exit_url\": \"{ビューワーを閉じたときに遷移するURL}\",
      \"continuation_url\": \"{最後のページまで読んだあとに遷移するURL}\"
    }"

APIの実行に以下の情報が必要です。

- Content ID
  - 先程API経由で登録したコンテンツのID
- APIキー
  - FLB BinBコンソールのBrick詳細画面で確認します
- Confirmationトークン
  - FLB ROOTコンソールのBrick詳細画面で確認します

※ **コンテンツが読めない場合APIを使ってコンテンツの状態を確認することができます**
https://console.binb.bricks.pub/docs/api/v1#contents-show

    curl --location --request GET "https://api.binb.bricks.pub/v1/contents/{Content ID}" \
      --header "X-API-KEY: {APIキー}" \
      --header "X-CONFIRMATION-TOKEN: {Confirmationトークン}"

**読めました**

![](https://d2mxuefqeaa7sj.cloudfront.net/s_A346D60D4E2F292E7164E57CA9AC8B76C0CEF003D5D7D07BD31C13A4E33692FB_1553655803819_screencapture-binb-bricks-pub-contents-eafd96f6-0c97-432a-a677-16dc306004ed_1553650912-speed_reader-2019-03-27-12_03_10.png)


今回は読むためのリンクを生成するAPIを使って書籍ビューワーを表示するサイトを作ってみました↓
https://fl-bricks.shwld.now.sh/

今回作ったサービスのコードはこちらです。
https://github.com/shwld/fl-bricks-sample