エムスリーテックブログ

エムスリー(m3)のエンジニア・開発メンバーによる技術ブログです

GAE/Goで技術書典むけのダウンロードカードアプリを作った

f:id:juntaki1:20190325094426j:plain
写真はサンプルなのでがんばって読み取っても何もダウンロードはできません

エンジニアリンググループの滝安(@juntaki)です。 技術書典6で頒布する「エムスリーテックブック#1」の「第5章 GoでAPIサーバをはやくつくる」を担当しています。紙書籍と合わせて電子版としてダウンロードカードも頒布する予定です。

techbookfest.org

担当した章では、Webアプリのアーキテクチャの話や、GoとgRPC-WebでAPIサーバーをコード自動生成を活用して作っていく方法について説明しています。いま仕事で作っているGo製Webアプリの設計ドキュメントになる予定だったものを、サンプルアプリを題材に変えて書いたものなので、Go初心者〜中級者まで、役に立ちそうなノウハウが入っていると思います。

さてここからは、サンプルアプリとして作ったダウンロードカード作成のためのアプリの機能を紹介します。(中身の解説はぜひ書籍で確認してください!)

github.com

ダウンロードカードの要件

ダウンロードカードはトップ画像にあるようなカードのことで、表面のQRコードを読み取ると電子版がダウンロードできる、というものです。加えて、ダウンロード数の管理や、失効ができるように作っておくと面白そうですね。

ぱっと思いつく実現方法として、以下の組み合わせが考えられそうです。

  1. 全部同じQRコード、同じファイルにする
  2. カードの枚数分ファイルをアップロードして、別々のURLを作る
  3. ダウンロードURLを複数作って、1つのファイルに紐付ける

読み取れるURLが全部同じだと印刷は楽ですが、カードごとの失効などはできません。 また、誤植の修正などで差し替えをすることを考えるとカード枚数分アップロードはそれなりにめんどくさいでしょう。 「ダウンロードURLを複数作って、1つのファイルに紐付ける」ができると良さそうですので、サンプルアプリはそれを実現しています。

アプリの使い方

READMEにある手順でAppEngineにデプロイできます。 失効はDatastoreの該当レコードの削除、ダウンロード数はLoggingを適当にフィルターすれば見れます。

cp src/app.yaml.sample src/app_production.yaml
emacs src/app_production.yaml

下記のコマンドでデプロイします。

QRCODE_PROD_PROJECT=<your-app-engine-project-name> make app-deploy-production 

デプロイできたら、下記のURLにアクセスすると、管理画面がみえます。

https://<your-app-engine-project-name>.appspot.com/admin/

ダウンロードさせたいPDFのURLを反映した後に、「QRコードの追加」をクリックして、リロードすればQRコードが表示されます。URLは、Google Driveの共有URL(直接ダウンロードのリンク)にすれば差し替えも簡単でよいと思います。QRコードは1クリックで50個追加されます。

また、電子版のファイルサイズや頒布数にもよりますが、そこまで大量のリクエストを捌くわけではないので運用コストは無料枠内でいけると思います。

印刷のコツ

エーワン マルチカード 名刺用紙のサイズに合わせて印刷できるように作っています。100%で縮小拡大なし、上下左右の余白はプリンターのクセに合わせてチューニングしてください。普通紙に出して透かしてみるとズレがわかります。出力したサイズが正しいか見るには、QRコードの角同士の間隔が91mmと55mmになってるかを見ると良いです。

裏面はラベル屋さんというエーワン公式のWebアプリが提供されているのでそれで作るとピッタリです。

f:id:juntaki1:20190325094337p:plain
ラベル屋さん10

まとめ

まだ当日までにアプリは少し直すかもしれませんが、もう基本的な機能は使える状態になっています。 ご自身の頒布物でも活用してもらえるとうれしいです。 技術書典当日には「エムスリーテックブック#1」のQRコードを読みとりにきてください!

We're hiring!

エムスリーでは、Go/GAEを使ったプロダクトも作っています。 Goエンジニア募集中ですので、ぜひ以下からご応募ください。

m3.recruitment.jp

関連記事

www.m3tech.blog www.m3tech.blog