DLカードについて

  • 2026/1/3
  • 9-minute read

C107ではDLカード形式で頒布をしました。
DLカードとサイトを自作してみたので、備忘録を兼ねて概要を記載します。
詳細が必要な場合や、記載ミスやご指摘などありましたらDM等いただけると幸いです。

書かないこと

  • 仕組みとは関係ない要素(音源の内容などは別の機会に)
  • AWSの基本サービスの概要についてやITの基本用語の説明
  • 詳細な設定値（概要記載を目的としています）

モチベーション

  • 技術的好奇心。
  • 若年層がスマホメインになっている視聴環境にあることからアクセスしやすい手法。
    （音楽CDを買いに来る層はプレイヤーを持っているとは思いますが、ドライブがないPCなども多くなっている)
  • 売り手・買い手ともに保管に嵩張ることも地味に大きなポイント。

当日お手に取っていただいた方からも、すぐ聞けるので嬉しいと言っていただきある一定のニーズはあるのかなと思いました。
また一方で自分自身もCD自体のコレクション欲や、ブックレットなど含めた作品作りに大きな価値を感じているのでCDがダメとは全く思っていません。
一回やってみるかという気持ちです。

要件の整理

過去に頂いたDLカードの仕様などから、今回の要件を下記に決めました。

  1. スマホ・PC、どちらからもアクセスできること
    レイアウトが両方に対応できる必要があります。

  2. アクセス時にユーザに対して認証をかけること
    今回は有償での頒布であったため、URLを知っていれば誰でもということを避けたかったです。
    無償配布の場合は、必須ではないと思います。

  3. ユーザ毎に一意のパスワードが設定されていること。
    同一のパスワードでも良かったのですが、後々DL解析や異常に多いトラフィックを見極めたいなどのニーズに対応できるようにと考えました。

  4. DLできるものは、音楽ファイル、歌詞カード、ジャケットであること。

image1

大枠の必須項目としてこの辺りを抑えると考えました。
(他にも細々ありますがキリがないので記載は割愛します。)

作成方針

上記の要件をもとに作成方針を決めました。

物理カード

印刷は外にお任せすることにしました。
ポストカードサイズ・名刺サイズで悩みましたが、今回は予算見合いもあり名刺サイズとしました。
両面カラーで、表面がCDジャケットの面に相当するイラストとタイトルを配置し
裏面にモバイルからアクセスしやすようにQRコードとURL
認証情報を記載し、そこからユーザがアクセスできるようなイメージを考えました。

ソフトウェア面

サークルの諸々管理用にAWS環境を持っているのでそれを利用する方法としました。
できるだけマネージドを利用しコストを最適化しやすく、ベストプラクティスに乗っ取れるように考えました。

物理カード作成

印刷

ナレッジがなかったので、キンコーズさんのカード印刷プランで発注しました。
https://www.kinkos.co.jp/service/shop-card/
理由は

  • よく利用するサイトで発注までの手続きが明確であること
  • テンプレートが用意されていること
  • 年末まで空いていて、納期が短いこと

です。時間とプリンターがあれば、自分で用紙印刷してもいいと思います。

ジャケット表面

イラストを描いていただいたなみださんには、後ほどストリーミング配信に耐えらえるようにスクエアで1200×1200で描いていただきました。
それをテンプレートに合わせてトリミング・配置しました。
イラスト依頼時には、ある程度トリミングする前提でロゴの配置や全体デザインを調整させてもらいました。

ジャケット裏面

裏面には、簡単な情報とQR、URL、発行日を記載しました。
この時、シリアルコードはデザインに含めません。上記の印刷プランでは印刷全てが同じデザインになるからです。

デザイン時点では、配信用のURLを考えておく必要があります。
今回はサークル用のドメインから配信用のサブドメインを決めて、音源ごとにディレクトリを分ける設計にしました。
（今思えば都度サブドメイン払い出しても良かったなと）

https://dl.starlesstrilogy.com/<music-title>

他のCDを配信したい場合URLは、/titleA, /titleBで振り分けるイメージです。

これをQRコードにし、裏面のデザインを作成しました。
シリアルナンバーを個別に記載するように裏面にはスペースを設けています。 image1

シリアルナンバー

別途、印刷物にシリアルを記載する必要があります。
今回はヨドバシで家庭用のシール用紙を買い、シリアル情報を印刷しそれを切り貼りするというアプローチをとりました。
https://www.elecom.co.jp/products/EDT-NLL10.html

後々、コンビニの複合機でもシール印刷ができることを知ったのですが、
プリンタを持っていなければ、(割高ですが)こっちでもいいなと思いました。

シールを選ぶことで、印刷用紙から剥がれる・劣化して見えなくなるというリスクがあります。
その点は印刷枚数も多くないことから、お問合せいただき都度対応する方向で運用でカバーすることとしました。

1点失敗が、LとIといった見分けがつきづらいものがはっきりわかるフォントを選ぶべきでした。この辺りは次回の反省です。

インフラ構成

下記の構成としました。

image2

ストレージ部分

音源などのDLさせたいオブジェクトの保管場所はS3にしました。
パブリックアクセスはさせず、OACでCloudFront経由からの通信のみに制限させました。
静的ホスティングも無しです。
管理上バケットは1つとし、１階層目にURLのパスと同じフォルダを作成しオブジェクトを配置するようにしました。

s3://Download用のバケット/title/index.html
s3://Download用のバケット/title/css/...
s3://Download用のバケット/title/audio/...
s3://Download用のバケット/title/img/...
s3://Download用のバケット/title/pdf/...

といった配置にしました。

CDN

S3で静的配信せずに、CloudFrontで受けるようにしました。
オリジンをS3とした上で、ビヘイビアをパス単位に作成しオブジェクトのパス単位(*ではなくTitle単位）で作成しました。

認証

今回は実装が比較的容易なCloudFront FunctionsでBASIC認証を実装しました。
本当は認証画面をきちんと作りたかったのですが、 ここは過去に触ったこともあるという点、実装が容易でユーザーの頻繁な追加などがない前提のためこの方法にしました。 （認証部分は他にもいいソリューションがありそう）
作成したFunctionをビヘイビアに紐付けしました。

WAF

基本的にはCloudFrontのマネージドルールを適用しました。

名前解決

AWS上でドメインを管理していたので、Route53のCNAMEを設定しました。
CLoudfrontの代替ドメインをCNAMEに設定しました。
同じくACMで証明書を管理していたので、カスタムSSL証明書を設定しました。
この辺りはAWSで管理しているので楽でした。

フロントエンド

簡単なHTMLとcssを作成しs3に配置しました。
ブラウザによって再生とダウンロードの振る舞いが違うのでそこをボタンで明示的に分けるようにしました。

gamen

インフラ部分は簡単でしたがフロントが苦手だったので今回Geminiに頼ってかなり助かりました。

最後にフロントとバックエンドがうまく動いているかの稼働確認として URLアクセスからDLできるか、他のパスでエラーになるか、不正な認証でエラーにならないかテストをしました。

作ってみて

  • AWSのベストプラクティスに則ったので構成自体はシンプルにまとまりました。
    一度作ってしまえば構成は簡単なので、使い回しはできるなという感じでした。
  • 認証画面はもう少し作り込みたかったです。
  • IT面がわからない人でも、認証の要素が必要なければGoogleDriveなどの共有リンクを貼ってカードは作りやすいと思います。
  • 同人はいろいろなことを手作りする楽しみがあるなと思うので是非作ってみてください。
    また、やってみたいがわからない！という人がいれば、私でよければ相談にのりますのでお気軽にDMください。

おまけ：費用面について

少しだけ考えてみます。簡単化のために音源ファイル1つ50MB、リクエストは10000req/月とします。

S3：0.03825$/月*12=0.459$/y

  • ストレージ：0.025GB（スタンダード）*0.05GB=0.00125$/月
  • アクセス：基本GETだけなので0.0037$(1,000*10)=0.037$/月

Cloudfront:0$/y

  • インターネットへのデータ転送：従量課金で1ヶ月あたり最初の1TBまで無料のため、そこに収まる想定です。
  • HTTP メソッドのリクエスト:こちらも無料枠に収まるだろうという想定です。

Route53:21$/y

  • ホストゾーン: 0.50$/月*12=6$
  • ドメイン管理料:自分の持っているドメインが15.00$/y (ただし実際はこれ専用ではないので、純粋に計上はできない。)

ACM:

  • 無料

WAF: 8$/月*12=96$

  • ACL:1つあたり5$/m
  • ルール:1つあたり1$*3ルール=3$/m

合計:117.459$*160円=18,793円/年

意外と年額にするとかかりますね。 ただ支配的なのがWAFの96$(15,360円)なのでAWSで染めなければ、（Cloudflareに移するなど）でコストは大幅に抑えられるかなと思います。
そもそも配布用なのでWAFまでいるのかという部分もありますので、この辺りはサークル規模や用途によるかなと思います。
（少なくともうちみたいな小規模サークルの用途ではオーバースペック）
また、WAFはディストリビューション単位なため、同じ仕組みを再利用する場合は計上されません。
（同一ドメインの設計としているため）

お約束事項

  • あくまで物理メディアの代替としておりDLカード自体の頒布は同人即売会のみの頒布としています。カードやシリアル情報のオンライン販売はいたしません。
  • 音源のダウンロード販売は東方同人音楽流通を介して後日、各種媒体からリリースいたします。
  • 本記事はナレッジの共有や、体験の記録を目的としており、 当ブログに掲載している情報は可能な限り正確な内容を提供するよう努めていますが、その正確性や完全性を保証するものではありません。
  • 当ブログの情報を利用したことによって生じたいかなる損害についても、運営者は一切の責任を負いません。
Tech