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

技術書典が近いですね！

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

FL Bricksとは

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

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

FLB ROOT

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

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

FLB BinB

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

FLB BinBを使うとFLB ROOTに登録された電子書籍を配信できます。
BinBはいろんなサイトでの実績がある電子書籍ビューワーです。

FLB ROOTにログインしてみる

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

コンテンツオーナー

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

Brick

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

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

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

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

作業の流れ

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

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

1. Brick登録

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

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

2. コンテンツ登録

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

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

先程作った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にログインする

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

ログインできました。

Brick情報を登録する

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トークン}"

読めました

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

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