• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / ホームページ制作無料講座 / デベロッパーツール入門 / 7.デベロッパーツール応用編

7.デベロッパーツール応用編

池田祐太郎 | 2014年3月4日 公開

デベロッパーツール入門

目次

  • 1 目次
  • 2 FacebookのLikeBoxのデザインを変更する
    • 2.1 Facebook LikeBoxを取得
    • 2.2 CSSを追加修正する
  • 3 jQueryのデバッグ作業に使えるconsole.log
    • 3.1 エラーを確認する
    • 3.2 値などを確認したいとき
      • 3.2.1 ※今回デバッグで使用したコード
  • 4 どういう順番でファイルを読み込んでいるかがわかるNetwork
    • 4.1 読込が遅いページで力を発揮する
    • 4.2 読込エラーが発生しているのもひと目でわかる

目次

  1. デベロッパーツールとは何か
  2. デベロッパーツールのメリットとデメリット
  3. デベロッパーツールを使ってみよう
  4. デベロッパーツールでCSSを操作する
  5. 確認から制作まで即使えるCSSの機能(1/2)
  6. 確認から制作まで即使えるCSSの機能(2/2)
  7. デベロッパーツール応用編(現在のページ)
  8. その他のデベロッパーツールの紹介
サンプルサイトを用意しました:
デベロッパーツール用sample site

dev5_1-2

デベロッパーツールはこのような用途にも使える、という例をご紹介します。
今までよくわからなかった部分が解決するかもしれません。

FacebookのLikeBoxのデザインを変更する

【注意】2014年3月現在、Facebookの仕様が変わり今回説明しているCSSを使いカスタマイズする方法ができなくなりました。
jQueryのプラグインを使用するとできるようです。以下ご参考まで。
それでも、Facebook「Like Box」をカスタマイズしたかった。

ここではデベロッパーツールを使って動的に生成されいる箇所に対してCSSをかけるとこうなる、という認識としてご理解ください。

よく目にするFacebookのいいねボックス。
当サイトにも掲載しています。
dev7_1-3
このデザインをデベロッパーツールを使ってデザインを変更しましょう。

Facebook LikeBoxを取得

Like BoxよりLikeboxを表示させたいFacebookページのLikeBoxを制作します。

・URL
・横幅(今回はサンプルサイトに合わせるため700px)

を入力し、GetCodeをクリック。
dev7_2-3

1番目をbodyタグのすぐ下、2番目を表示したい箇所へコピペします。
dev7_3-6

無事表示されました。
dev7_4-2

CSSを追加修正する

デベロッパーツールを表示させ、Facebookを虫眼鏡で見てみましょう。
するとペーストしたdivの中身にiframe等が展開され、色々なタグやCSSが読み込まれていることがわかります。
dev7_5-6

デベロッパーツールの出番です。試しに背景やテキストの色を変えてみましょう。
dev7_6-11

簡単に変更することができました。
背景に画像を読み込んでも面白いかもしれません。

グリーンなイメージに。
dev7_7-2

躍動感あふれる感じに。
dev7_8-2

こんな感じで色々工夫次第で遊べるかと思います。

■画像例
参考例としてフリー画像を使用しました。
以下URL確認用:
1枚目:https://highfivecreate.com/sample/course/samplesite/dev/images/bg1.jpg
2枚目:https://highfivecreate.com/sample/course/samplesite/dev/images/bg2.jpg

【注意】2014年3月現在、Facebookの仕様が変わり上記のCSSを使いカスタマイズする方法ができなくなりました。
jQueryのプラグインを使用するとできるようです。以下ご参考まで。
それでも、Facebook「Like Box」をカスタマイズしたかった。

jQueryのデバッグ作業に使えるconsole.log

jQueryをやってみたものの、ちゃんと動いているのかわからないというところも確認ができます。
もともとは開発者ツールという名前だけあって、プログラマー向けに作られたツールですので基本はこちらがメインなのでしょう。
デバッグ…といっても簡単な確認も十分デバッグとよべます。

エラーを確認する

htmlソースの中にjqueryを読込む記述をして、jqueryを書いてアップ。しかしなぜか動かない…
そのときはデベロッパーツールを使って原因を探りましょう。

「Console」タブをクリックします。
dev7_9-10

エラー文章とエラーが起きている場所を指し示してくれています。
上記の場合、「Uncaught ReferenceError: $ is not defined」→「“$”が定義されていませんよ」と言っています。

右側の「エラーが起きている場所」がリンクになっているのでクリックしてみましょう。
dev7_10-2

書いたはずのjquery文章が効いていないですね。
ということは、jquery以前の問題。その前を疑ってみます。

もう一度みてみると…
dev7_11-6

ここでした。src属性のスペルが間違っています。
ここを修正して再アップしてみると
dev7_12-5

ちゃんとエラーがきえました!
「お問い合わせはこちらからどうぞ」という文言をクリックすると書いたjQueryがちゃんと動いてくれています。
dev7_13-2

値などを確認したいとき

今回はクリックすると「Thank you!!」と書かれているdivタグを表示するようなjqueryを書いています。
例えば、「このクリックして出てきたdivタグの横幅はいくつなんだろう?」という疑問があるとします。
今回は横幅なのでデベロッパーツールを使えば簡単に確認できるのですが、jqueryで表示している要素に対して値を確認する方法を確認します。

こちらがjquery文。
dev7_14

1.thisWidthという変数にクリックして表示されたdivタグの横幅を代入する。

2.console.logを使って変数を表示。

という流れです。console.logというものが変数に保存されている値をデベロッパーツールに表示してくれるメソッドです。
「今変数がもっている情報をみたい」というときはこのconsole.logを使ってデベロッパーツールに表示させましょう。

実際に見てみます。クリックしてjqueryを実行します。
dev7_15-3

ちゃんと表示されています。
他にも色々とつかえるconsole.logですので、簡単なところのデバッグから慣れていくのがオススメです。

※今回デバッグで使用したコード


どういう順番でファイルを読み込んでいるかがわかるNetwork

ファイルをどのような順番でどのくらいの時間を書けて読み込んでいるかがわかるツールがあります。それが「Netword」。
dev7_16-3

ここをクリックするとこのようなウィンドウになります。何も表示されていないと思うので一度この状態で再読み込みします。
dev7_17-15

画像で枠部分が比較的重要なエリアです。
上から読込み、下にスクロールすると順番に読み込んだファイルを表示しています。

読込が遅いページで力を発揮する

ページ読込が異様に遅い場合「どこがボトルネックになっているか」を発見するときに使います。

例えば、大きすぎる画像を読み込んでいるのが原因となっているケース。
dev7_18-9

明らかに画像の読込みに時間がかかっています。
これだとまだPCはいいですがスマホでは致命的ですね。特にサイトのユーザーがスマホが多いケースなどでは注意するべき点です。

読込エラーが発生しているのもひと目でわかる

読み込んでいたはずのファイルが読み込めていなかった…
そういうときもネットワークをみれば一目瞭然。
dev7_19-6

このように赤字で表示してくれるので、サイト公開前や大きめな更新を行った際には確認するとすぐに発見できます。
ちなみにこの場合はconsoleからでも確認できます。
dev7_20-2
「404(Not found)」と書かれているのが確認できます。

  1. デベロッパーツールとは何か
  2. デベロッパーツールのメリットとデメリット
  3. デベロッパーツールを使ってみよう
  4. デベロッパーツールでCSSを操作する
  5. 確認から制作まで即使えるCSSの機能(1/2)
  6. 確認から制作まで即使えるCSSの機能(2/2)
  7. デベロッパーツール応用編(現在のページ)
  8. その他のデベロッパーツールの紹介
メールコンサルティング
WordPress保守管理サービス

Filed Under: デベロッパーツール入門 関連タグ:css, HTML, jQuery

池田祐太郎

WordPressの導入を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在はWordPressの保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

この記事と関連する記事

これからはbxSliderを使わずに別のスライダーライブラリを使おう
2022年1月13日
タグ: bxslider, jQuery, Swiper
カテゴリー: WordPress
8.その他のデベロッパーツールの紹介
2014年3月4日
タグ: css, HTML
カテゴリー: デベロッパーツール入門
6.確認から制作まで即使えるCSSの機能(2/2)
2014年3月4日
タグ: css, HTML
カテゴリー: デベロッパーツール入門

人気記事

  1. git pull してもエラーが出てファイルが反映されないときの対処法
  2. 同一サーバー上に構築するWordPressのテスト環境の作り方
  3. WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
  4. サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  5. WordPress において PHP 8.1 に更新していいかどうか検証
  6. [便利]困難な判断を10秒で AI が客観的に導き出すツールを試してみた

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • [便利]困難な判断を10秒で AI が客観的に導き出すツールを試してみた
  • WordPress のクロスサイト・スクリプティング被害にあった事例を共有します
  • メール作業の生産性を向上させる最低限覚えておくべき Gmail のショートカットキー
  • タブ固定とタブ一発アクセスのショートカットキーの組み合わせでブラウザ作業の生産性を向上
  • メールフォームプラグイン MW WP Form を使いながら WP Rocket を使う場合にエラー回避する設定

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

Android BtoC CMS css elementor git google workspace Gutenberg HTML iPhone jQuery Mac MAMP php SEO SNS ssh SSL Sublime Text Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 アプリ クラウド クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン ツール ブログ プラグイン マーケティング リニューアル 保守管理 改ざん 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 情報セキュリティ基本方針
  • 特定商取引法に基づく表示
  • 転載/引用

© 2023 high five create All rights reserved.