コピー2018.06.11こんにちは。@toshiya_62です。今回、とある依頼でイベント告知用のランディングページを製作し、公開しました。自分の作ったものを大々的に公開するのは初めての経験だったので、普段一人で開発するだけでは気にしないような知識も勉強することとなり、いい経験になりました。この記事では、今回製作したランディングページで気にしたポイントを書き連ねていきたいと思います。今後、このようなランディングページを作る機会があったときに、気にするポイントを思い出せるよう、備忘録としてまとめます。製作したランディングページまずは、製作したランディングページをご紹介したいと思います。https://lazos-de-amistad.sitelazos-de-amistad.siteライブの告知サイトです。豪華声優陣による、歌とトーク。アットホームなライブになりそうで、今から楽しみです。以下のものがありました。)予約フォームをつけてほしい予約が入ったら自動返信メールを飛ばしてほしい予約のキャンセルもできるようにしてほしい質問・セリフリクエストコーナーに投稿する機能がほしいサイト全体の流れとしては、以下のようになります。メールは自前実装しました。基本的な方針としてデザインは作り込みたかったですが、バックエンド処理を自前で作り込むことは避けようと思っておりました。いうのも、日中にサーバーの面倒を見ることが難しい自分にとっては、できるだけ運用は世の中の便利なサービスにお任せしたかったというのがあります。その方が使い勝手のいいものが早く出来上がるとも思っていました。この前書いたこの記事にもありますように、機能要件を満たすため、フォーム周りは自前実装することにしました。(それでPHPの勉強ができたので、万々歳ではありますが)質問・セリフリクエストの受付はGoogleのサービスで要件を満たせたので、そこだけは独立させる形で製作。SNSで質問・セリフリクエストの宣伝をするときに、フォームのURLだけで宣伝できるので、独立させた方が使い勝手がよくなったと思っております(結果論)細かい実装の話(機能要件)ここからは、細かい部分で気にした点を書いていこうと思います。最近はSNSで宣伝が拡散されることが当たり前の世の中。スマホ対応していないなんて考えられません。本サイトでは、Bootstrapでレスポンシブ対応しました。今回は使い慣れているBootstrap3で実装したのですが、今後時間があれば4を試してみたいですね。フォーム送信jQueryでPOST送信しました。入力内容確認にモーダルウィンドウを使ったりして、徹底的にページ遷移を無くすと、使っていてストレスフリーな感じがします。メール自動返信PHPMailerを使いました。つまづいた件はこの記事に書いています。細かい実装の話(非機能要件)また、機能要件だけではなく、非機能要件にも目を向けなければなりません。個人情報を取り扱うのですから、必須ですね。個人情報を取り扱うので、きちんとプライバシーポリシーを明記しました。例文はネット上でコピペでOKなものを拝借。フォーム周りフォーム周りはバリデーションがあると親切ですね。type=”number”>)にするのか、セレクトボックスにするのかなど、場合によって使い分けるべきと思いました。CSRFやらXSSやら、、、フォームでの送信はきちんと対策すべきと思い、セキュリティについては色々と仕込んであります。まとめ実際に作ってみて、非機能要件に思ったよりも時間を費やしたなぁという印象です。今まで自分が、いかに自分都合だけの「動けばいいだけのもの」の勉強ばかりしてきたかということを思い知らされる、いい経験になりました。機能要件だけに捉われず、非機能要件にもきちんと目を向けることが、いいユーザー体験に繋がる第一歩になると思った今日この頃です。Programming.Tech関連記事PHP【PHP】PHPMailerでメールを送信する際に、6.0系からお作法が変わっていてつまづいた話ちょっと機会があって、PHPを触っております。今現在、とある依頼があり、この処理の実装を行おうとしているところであります。Scriptで作ってみた。Scriptで作ってみた。Scriptで作ってみた。APIUncategorizedVMWareVue.jsWordpressランディングページ(LP)タイトルとURLをコピーしました。