しなくても出られる
オンライン上での楽曲やソフトウェア配布形態のひとつに、「シェアするとダウンロードリンクが現れる」というのがある。ああいうのを自前で作ってみたい。
デモ
See the Pen Pay to tweet dropdown by sanographix (@sanographix) on CodePen.
Reactは経験不足なので大目に見てください。なおこのコードは、拙作のサイト「Kitekure」で制作した一部をデモ用に加工している。
仕様と実装
仕様はこんなかんじ：
- 「Pay with tweet (share)」リンクをクリックすると、ドロップダウン内の表示が切り替わる
- シェア画面はスキップできる（＝シェアしなくても次の画面に進める）
- 企画意図や個人的な好みによる
- 記事タイトルと矛盾するが、タイトルに特に意味はない
- 本当にシェアしたかどうか厳密なチェックはしない
実装としては、下記のサンプルコードとやっていることは同じ。
「ログインしているか」を「シェアしたかどうか」に変えた。現在の状態によって表示内容を変えるところはほぼ一緒。
また、個人的にはシェアを強制したくないので、スキップするボタンを加えた。ちなみに実サイトのクリックイベント集計によると、シェアせずスキップしているケースもかなり見受けられるが、それは訪問者の自由なので別にいいかと思っている。
「シェアするとダウンロードできる」仕組みは、冒頭にも書いた通り楽曲や、あとはフォントなどの創作物で見かける。ToneDenでいうところのSocial Unlockです。
実際に制作してわかったことは、ページ訪問者に2種類の行動をまとめて促せるのが特に便利だと感じた。今回のようにランディングページだと「ダウンロード」と「シェア」の2種類のアクションを想定する場合が多い。別々の場所に設置すると、両方律儀に行うユーザーはあまりいないと思われるが、ひとつの場所にまとめることで自然にアクションを促すことができる。シェアしおわった画面で、お礼的な一言を載せられるのも便利。
（やる人はいないとは思いますが、）実際のお金の支払い等に関わる部分には向いてません。なんかアレンジが効きそうなのでいつか次のプロジェクトでまた試すかもしれない。