Web制作案件で学んだこと その1

どうも、こや丸です!

今回は、Web制作のお話です。

半年以上、レガシーな技術のみしか使えない案件にいた僕が
久しぶりにモダンなWebサイト制作案件に携わらせていただくことができました。

久しぶりの案件でつまづいたり、レビュワーにご指摘いただいた箇所などをまとめてみます。

※自身の学習記録、備忘録的な面です。
ご了承ください。

commit時にはconsole.logを削除忘れない

これは諸々のコーディングや修正作業が完了し、納品目前となったタイミングで
ご指摘されました。

入ってても挙動としては問題ないのですが、
開発者ツールのconsoleに、コーディング中に確認用に仕込んでいたconsole.logが表示されるのは見栄えも良くないですし、納品時には不要ので削除した方がいいです。

タイミングとしては、gitでcommitする時に気がつくべきでした。

URL に # が含まれない場合、ブラウザのコンソールにエラーが表示される

TOPページから下層ページの特定のセクションにリンクする場合、
遷移先のsectionタグにid属性を付与します。

その際、jQueryでスクロールでの移動処理を書いていたのですが以下の部分。

   /**
    * URLの「#」記号の後の部分を取得
    * @type {script}
    */
   var hash = window.location.hash;

これURLに#(ハッシュ)がない場合、コンソールにエラーが出てしまうんですね。

対応として、存在のチェックを処理の前に挟んであげればよかったんだそうです。

  • lengthで存在の有無を確認
  • 3項演算子で条件分け
  • 有る場合はtopから該当sectionタグまでの距離を取得して、変数に代入
  • 無い場合は0を変数に代入
var position = $hash.length > 0 ? $hash.offset().top : 0;

YouTubeの関連動画について

YouTubeの埋め込み動画を実装したところ、再生終了時にクライアントと全く関連性のない動画が関連動画に表示されることをレビュワーにご指摘いただきました。

通常、一時停止や視聴終了時には、ユーザーの視聴履歴に基づく関連動画が表示される仕様らしいです。
クライアントのサイトと無関係の動画に遷移されると、回遊性が損なわれてしまう恐れがあるため、避けないといけません。

しかし、2018年9月にYouTubeの仕様変更で、関連動画の非表示ができなくなったとのこと。

URLの末尾に

?rel=0

を追加することで、再生した動画と同じチャンネルの動画を関連動画に表示できました。
これならクライアントの他の製品の動画を表示できることになるので良さそうです。

どうしても関連動画を表示させたくない場合は以下の選択肢があるとのこと
・1アカウントに1つの動画のみをアップロードする
・ループ再生させる

・公式
https://developers.google.com/youtube/player_parameters?hl=ja
・その他の参考記事
https://hirashimatakumi.com/blog/5849.html
https://www.serendec.co.jp/blog/youtube-kanrendouga/

テキストにグラデーション

下記のサイトで紹介されているように実装できました。

CSS3でテキストにグラデーションをかける方法 | mariweb
最近のWebデザインではグラデーションを取り入れたデザインが多くなっているように感じます。今回は、CSS3で文字にグラデーションをかけたり、おまけとして文字の塗りを画像にする方法を説明していきます。

ただし、 

-webkit-text-fill-color: transparent;

はIEでは効かないため、画像でおく必要がありました。
対応策として以下で対応しました。
・IEのときのみ、文字を透明にして背景画像で表示させる
・ブラウザ判定のJSライブラリを導入
https://caniuse.com/#search=text-fill-color
https://b-risk.jp/blog/2019/08/ie-grad/
https://qiita.com/gurigurico/items/bd19ed121bfdf77fced6

Pug で属性の定義を行うときは単一括弧で括る必要がある

HTMLを効率的にコーディングするために便利なテンプレートエンジンPug。

僕はclass属性やsrc属性を別々に指定していましたが、単一にする必要がありました。

img(class=v.class, src=v.src, alt=“”)

Pug の警告が表示されていたのですね。

submit しない button 要素には type=“button”を明示的に付与

年齢や氏名などをユーザーが入力して、押すタイプのボタンではない場合、
submitをしないため、type=”button”が必要とのことでした。

これは初知りでした。

button.topAboutVideo__button(type=“button”)

プラグイン導入時は注意

必要なもの、便利そうなものを見つけてすぐ導入してはいけないとのこと。

そもそもプラグイン導入はおろか、JavaScriptを触る機会がほとんどなかったこともあり、当然とされている以下については心に留めておこうと思いました。

  • クライアント的に利用して良いか確認(メンテコストもかかるのでNGだったりする)
  • メンテナンスされているものか確認
  • 広く使われているメジャーなもので信頼できるか(Githubのスターの数とか参考になる)

z-index値は1刻みにしないほうが無難

関連性の低い要素は値を離した方が良い(9999 と 5000など)とのこと。

関連性の高い要素についても例えば10刻みにする、などしてあげると変更が必要になった時に対応できる可能性の余地があって助かるケースがあるのだとか。

ファーストビューの全画面表示

ファーストビューを画面いっぱいに表示させる場合、特にスマートフォンには注意が必要です。

100vhで指定するとiPhoneではアドレスバーも含めた高さとなってしまうため、
jQueryでウィンドウの縦サイズを取得する方法で対応することで、
要素がアドレスバーに隠れたり、位置が意図通りにならない現象を防ぐ必要があります。

以下、参考サイト
https://hirashimatakumi.com/blog/5496.html

まとめ

というわけで、今回は

久々のWeb制作でつまづいた箇所の話でした。
今後も学習記録として、書いていければと思います。

では、また!

タイトルとURLをコピーしました