日記、webデザイン、読書、写真など。SANOGRAPHIX京都を拠点に活動する佐野章核の個人ブログ。SANOGRAPHIXProfileFacebookBookmarkしなくても出られるオンライン上での楽曲やソフトウェア配布形態のひとつに、「シェアするとダウンロードリンクが現れる」というのがある。いうのを自前で作ってみたい。CodePen.Reactは経験不足なので大目に見てください。このコードは、拙作のサイト「Kitekure」で制作した一部をデモ用に加工している。(share)」リンクをクリックすると、ドロップダウン内の表示が切り替わるシェア画面はスキップできる(=シェアしなくても次の画面に進める)企画意図や個人的な好みによる記事タイトルと矛盾するが、タイトルに特に意味はない本当にシェアしたかどうか厳密なチェックはしない実装としては、下記のサンプルコードとやっていることは同じ。ja.reactjs.org「ログインしているか」を「シェアしたかどうか」に変えた。現在の状態によって表示内容を変えるところはほぼ一緒。個人的にはシェアを強制したくないので、スキップするボタンを加えた。ちなみに実サイトのクリックイベント集計によると、シェアせずスキップしているケースもかなり見受けられるが、それは訪問者の自由なので別にいいかと思っている。「シェアするとダウンロードできる」仕組みは、冒頭にも書いた通り楽曲や、あとはフォントなどの創作物で見かける。Knowledge実際に制作してわかったことは、ページ訪問者に2種類の行動をまとめて促せるのが特に便利だと感じた。今回のようにランディングページだと「ダウンロード」と「シェア」の2種類のアクションを想定する場合が多い。別々の場所に設置すると、両方律儀に行うユーザーはあまりいないと思われるが、ひとつの場所にまとめることで自然にアクションを促すことができる。シェアしおわった画面で、お礼的な一言を載せられるのも便利。(やる人はいないとは思いますが、)実際のお金の支払い等に関わる部分には向いてません。なんかアレンジが効きそうなのでいつか次のプロジェクトでまた試すかもしれない。(sanographix)グラフィックデザイナー・ウェブデザイナー。「身近な人のための実用品」をテーマに個人制作しています。4」バージョン4.2.1をリリースした今週末3/24(金)にイベントやります(配信あり)SANOGRAPHIXグラフィックデザイナー・ウェブデザイナー。「身近な人のための実用品」をテーマに個人制作しています。PROJECTSこれまで作ったものを紹介します。SANOGRAPHIX引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。