LogoMark.png

WebDesign/ProblemFinding

ProblemFinding

HTML+CSS+JavaScriptのコーディングと問題の発見について

はじめに

デザイン行為において最も重要なことは「問題を発見する」ということです。問題が特定できて、何をすべきかという「課題」が設定できた時点で、ほぼ7割は解決したといってもいい・・。それぐらい重要なことです。

Webデザインにおいては、次元の異なる以下のような「問題」があります。

ここでは3つめの技術的な問題について、授業中によく見かける現象を念頭におきながら、その対処方法のヒントを説明します。

menu


本当にコードの問題ですか?

何かおかしい、というとき、まず疑うべきは、ほんとに書いているコードに問題があるのか?ということです。初心者の方が陥りやすい事項を列挙しますので、まずは、それを確認してみましょう。

あなたのページだけが異常ですか?

めったにないことですが、ブラウザそのものの異常で正しくレンダリングされていない・・ことがあります。他のサイトも同様に正しく表示されない場合は、ブラウザの問題であって、あなたの作り方の問題ではありません。

再読み込み(リロード)しましたか?

ブラウザは一定の期間、キャッシュ(表示歴のあるページのデータ)を保持しているので、ブックマークなどからページを開いた場合、そのキャッシュを見ていることがあります。サーバーにアップし直した場合は、ブラウザのリロードボタンを押すということを忘れないようにしましょう。
 ただし、HTML以外のCSSやJSなど、リンクでインクルードするファイルについては、単にリロードしただけでは更新されない場合もあります。その場合は、閲覧履歴(キャッシュ)を消去してみましょう。

Chrome では、開発コンソールの表示中はリロードボタンにオプションがつきます。「キャッシュを消去してリロード」が可能なので、JSの開発などでは、これを用いると作業が楽になります。

編集中のファイルと、チェックしているファイルは同一ですか?

ファイルやフォルダの場所に無頓着なPC初心者の方が最も陥りやすいミスで、実習中にはこのケースが結構あります。開発過程のフォルダが複数ある場合、編集中のファイルとブラウザでチェック中のファイルとが別フォルダのものになってしまう勘違い。これでは、いくらコードを修正しても、ブラウザ上の表示には反映されません。落ついて一旦全部閉じる。あらためてフォルダを確認し、編集中のファイルと、チェックしているファイルが同一であることを確認して下さい。

別のブラウザで試してみましたか?

ブラウザを変えると正しく表示されることがあります。ということは、コードの問題というより、環境側の問題である可能性大です。
ただし、動くブラウザの方がおかしい(後述)ということもあります。その場合は、コードの書き方に問題があることになります。

問題はそこですか?

問題は他(注目対象の外)にあることが多いものです。画面に近づいて、そこばかり注目していると、他のところに潜んでいる根本的な問題に気付きにくくなります。どうしても「おかしくないはず」と思ったら、椅子を引いて、全体に目配せしましょう。

全角スペースが混入していませんか?

タイトルや文章以外のところに全角スペースがあると、タグやスクリプトが正常に動かなくなります。アルファベットしか使わない文化圏では発生することのないこの透明なバグ。日本のIT業界にとってやっかいな存在です。文字列検索([command]+[F])などで随時確認しましょう。

エラー箇所以外の場所をチェックしましたか?

開発コンソール(後述)にエラーが表示された場合、まずは当該行番号の場所を見るわけですが、文法エラーを除くと、問題はそこにはないことが大半です。

問題はCSSではなく、HTML、JavaScriptの方ではありませんか?

テンプレート作りでは、多くの学生さんがCSSの記述に時間を割いていることから、うまくいかないと CSS の方にばかり意識が向かいがちですが・・・

「動く方がおかしい」ということありませんか?

ブラウザ間の比較で動かないものがあると、私たちは通常「動かないブラウザに問題がある」という先入観で対応しようとするのですが、「動く方に問題がある」ということに気づかないと、問題解決できないケースがあります
 例えば、Mac の Safari でローカルの動作確認をしている場合、Photoshop画像(.psd)でも<img>タグで表示できてしまいます(他ではできません)。また、拡張子をPSDからJPGに書き換えた(やってはいけないこと)ものでも表示されてしまう・・など、通常はダメなものが表示されてしまいます(これは、ある意味ブラウザが気を利かせているのですが・・)。さらにまた、ローカルMacでは、拡張子の大文字・小文字を区別しないので、実際の画像の拡張子が大文字の JPG、コード上では <img src="〜.jpg"> と小文字になっていても、それを同一とみなして表示してしまいます。これはサーバー上では区別されるので、ローカルでは表示されるのに、サーバーにアップすると崩れる・・という問題になるのです。
 つまりこの場合、動かないブラウザに対策を施すのではなく、ファイルそのものや、コード上の拡張子の記述に間違いがあることに気づかなければならないのです。これは盲点になりやすく、問題解決に結構時間がかかります。
 で、結論。はじめからルールに厳しい環境で開発をする というのが賢明です。その意味では、OSはLinux*1、ブラウザは Firefox での動作確認をおすすめします。

ブラウザ間で差がある・・それは本当ですか?

ブラウザ間の違いではなく、たまたま開いている各ブラウザのウインドウサイズの違いが、表示に影響していた・・ということがあります。レスポンシブの確認以外ではウインドウ枠を動かすことを忘れがちですが、確認作業では常にウインドウ枠を動かしてみることが必要です。

私たちの視野は狭く、意識は偏見に満ちています(だから災害はいつも「想定外」のところからやってくるのです)。問題に気づくためには、椅子を引いて、視点を変えながら、あらゆる可能性に目配せすることが必要です。



ブラウザの開発ツールを利用する

開発ツールの出し方

FirefoxやChrome、Safariには、開発支援ツールが標準で実装されています。

開発ツールの使い方

ここではFirefoxの例で説明します。どのブラウザもほぼ同様です。

ネット検索の活用

同じ問題で悩んでいる人はたくさんいて、特にWeb開発については、関連する記事も多数存在します。現象の問題点を適切なキーワードで検索すれば、解決策が書かれたサイトを見つけやすくなります。例えば、「CSS スクロールバー 非表示」や、「CSS3 アニメーション ドロワーメニュー」など、対象を絞り込むキーワードを知っていると、問題解決は早くなります。

(書きかけです)



PAGES

GUIDE

DATA


*1 この環境を持っている人は2%程度なので少しハードルが高いのですが、本格的なWeb開発を目指す方は、ぜひ調べてみて下さい。こちらのページにも簡単に紹介しています。
添付ファイル: fileInspectorCSS.png 111件 [詳細] fileInspectorHTML.png 123件 [詳細]
Last-modified: 2019-07-05 (金) 20:51:24