クーポンカード: デジタルコンテンツを頒布する技術

![ブースの様子.jpg](https://qiita-image-store.s3.amazonaws.com/0/1857/10bec981-682b-b013-d0a3-14f8fe44bdbf.jpeg "ブースの様子.jpg")

今年も技術書オンリーイベント「[技術書典](https://techbookfest.org/)」が盛り上がっていますね! 😆

弊社 ([YassLab](https://qiita.com/organizations/yasslab)) も毎回ブース出展させていただいておりますが、「クーポンカード」を使って電子書籍や解説動画などのデジタルコンテンツを頒布する方法が掴めてきたので記事としてまとめてみます :memo: 

今後、技術書典などのイベントで頒布する予定の企業・サークルなどのご参考になれば幸いです :pray: 

## 本記事の対象者

- 📕 デジタルコンテンツを頒布したい
- 💳 商品のデザインにもこだわりたい
- 💴 ブース出展時は現金で決済したい


## クーポンカードとは?

クーポンカードは、弊社がデジタルコンテンツを販売する際に使っている **名刺サイズのクーポンコード付きカード** のことです。

![クーポンカード.jpg](https://qiita-image-store.s3.amazonaws.com/0/1857/2a67d620-0bf1-a219-c27d-a346f803a45a.jpeg "クーポンカード.jpg")


弊社では [Gumroad 上でデジタルコンテンツを販売](https://gumroad.com/yasslab)していますが、Gumroad ではPayPalまたはクレジットカード決済に限定されており、これを現金でも決済できるようにしたいと考えたのがキッカケです。

特に、技術書典のようなイベントでは現金決済の需要が高く、デジタルコンテンツを販売している人にとってはこの現金決済がなかなかの鬼門です。また、いくらかのお金を払っていただいているのですから、できればコンビニで販売されている[iTunesカード](https://www.apple.com/jp/shop/personalize/itunes)ように、商品そのもののデザインにも多少こだわりたいです。

そういった背景から考えついたのが「クーポンカード」という仕組みです :credit_card: 


## 頒布からダウンロードまでの流れ

クーポンカードを使ってデジタルコンテンツを頒布する流れは次のとおりです。

1. カードに記載されているQRコードまたはURLから、クーポンコード入力ページを開く
2. 当該ページから、該当する商品名と表側にあるクーポンコードを入力
3. 入力後、「送信」ボタンを押してダウンロードページへ
   ![クーポンページ.png](https://qiita-image-store.s3.amazonaws.com/0/1857/1caadc32-0749-8f25-4ea7-f976df28920d.png "クーポンページ.png")
4. クーポンコードが正しければ価格が０円になり、クレジットカード情報を入力せずに商品がダウンロードできます
   ![クーポンコード.png](https://qiita-image-store.s3.amazonaws.com/0/1857/71ddddaf-7332-b4fa-4be2-d5a097b3b675.png "クーポンコード.png")

:memo: _NOTE: Gumroadで100%割引のクーポンコードを発行すると、クレジットカード情報を入力しなくても商品をダウンロードできます_


# クーポンカードの作り方

さて、本題です。上記のような流れで現金決済ができるようになりますが、そのためには少なくとも次の３つが必要です

1. クーポンを発行できるサービス (例: [Gumroad](https://gumroad.com/))
2. 名刺サイズで印刷できるサービス (例: [Kinkos](http://www.kinkos.co.jp/))
3. 商品やクーポンコードなどを入力する簡易サイト

１つ１つの要素を具体的に見ていきましょう :eyes: 

## 1. クーポンの発行

クーポンカードは、既に販売されているデジタルコンテンツを現金決済できるようにするためのものなので、何はともあれコンテンツを販売できる状態にする必要があります。

例えば Gumroad を使って動画を販売する方法については次の記事で説明しているので、公式ドキュメントや解説記事などを読んで、まずはデジタルコンテンツの販売準備を進めましょう。

Railsチュートリアルの解説動画を直販する技術
https://qiita.com/yasulab/items/63cb3dea01ebc89fa81c

ポイントは、 **クーポンを発行できること** と **クレジットカード入力が省略できること** です。Gumroad の場合は「価格が0円のときクレジットカード情報を省略できる」という仕様があるため、事前に 100% 割引のクーポンを発行しておくことで購入者が無用な情報を入力せずに済みます (現金で決済するため、クレジットカード情報は不要です)。

![オファーコード.png](https://qiita-image-store.s3.amazonaws.com/0/1857/ce2a9e8f-d25d-63fd-9c7d-279bff19d6f6.png "オファーコード.png")
図: Gumroadでクーポンを発行する例



## 2. カードのデザインと印刷

次に準備するのは、実際に頒布するカードのデザインと印刷です。デザインはこだわりどころかなと思いますが、情報としては次を押さえておけば良さそうです🤔💭

- QRコード
- QRコードのURL (念のため)
- ダウンロードの手引き
- トラブル発生時の連絡先
- クーポンコードを書き込む欄

参考までに、弊社では次のようなデザインのクーポンカードを使っています。ご参考になれば :pray:

![クーポンカード_両面.png](https://qiita-image-store.s3.amazonaws.com/0/1857/203e52ff-070b-c2c5-d5da-91841a0bcf02.png "クーポンカード_両面.png")

カードのデザインができたら、お近くの [Kinkos](http://www.kinkos.co.jp/) などに行って印刷してもらいましょう 🏃💨

ちなみに Kinkos の場合は素材も選ぶことができて、種類も結構豊富です。弊社の場合はエスプリコートAPを選んでいますが、あまり素材のノウハウを持っていないので適当に選んでいます :sweat_smile: 

![クーポンカード_素材.jpg](https://qiita-image-store.s3.amazonaws.com/0/1857/650c550d-9bd3-883e-bc3c-f0aece565cc3.jpeg "クーポンカード_素材.jpg")

印刷が終わったら、発行したクーポンを記載し、クーポンカードの完成です :credit_card: :sparkles: 


## 3. クーポンを入力する簡易サイト

最後は、クーポンカードから誘導したサイトの準備です。ここではカードに記載されたクーポンを入力してもらい、Gumroad などのダウンロードページまで導きます。

_NOTE: クーポンカードから直接 Gumroad ページに飛んでもらっても良いのですが、１つのデザインにまとめて印刷すると安くなるので、URLを組み立てる中間的なサイトをここで挟んでいます。_

といっても、やることはダウンロードページへのURLを組み立てるだけなので、特に難しいことは必要ないかなと思います 💭

参考までに https://railstutorial.jp/coupon のソースコードはこんな感じになっています (雑な実装でゴメンなさい💦)

```ruby
  def coupon
    code = params[:coupon][:code]
    if code.blank?
      flash[:danger] = "クーポンコードが空です。クーポンコードを入力してください。"
      redirect_to '/coupon'
    elsif code =~ /[^ -~｡-ﾟ]/
      flash[:danger] = "クーポンコードは半角で入力してください。"
      redirect_to '/coupon'
    else
      base_url = 'https://gumroad.com/l/'
      type_url = type2str(params[:type])
      redirect_to base_url + type_url + code
    end
  end

  def type2str(type)
    if type == 'guides'
      'railsguidesjp_ebook/'
    elsif type == 'seminar'
      'railstutorial_seminars/'
    elsif type == 'tutorial'
      'railstutorialjp_ebook/'
    else
      flash[:danger] = "入力が正しく読み込めませんでした。もう一度送信してください。"
      redirect_to '/coupon'
    end
  end
```

上記は Gumroad に特化していますが、Gumroad 以外でも似たような感じでURLを組み立てられるのではかなと思います🤔 (もし Gumroad 以外で似たようなアプローチを試している方がいたら共有してもらえると嬉しいです! 😆)


# まとめ

以上、クーポンカードを使ってデジタルコンテンツを頒布する流れを説明しました。いかがだったでしょうか?

今回説明したクーポンカードは、10月22日 (日曜) 開催の[技術書典３](https://techbookfest.org/event/tbf03)の **い05企** で実際に頒布しています ;)

よければお気軽にお立ち寄りください! 🏢🏃💨

![配置図_い05企.png](https://qiita-image-store.s3.amazonaws.com/0/1857/a86ff055-2b5e-1933-4b91-f7827518269f.png "配置図_い05企.png")