#author("2023-09-25T11:55:03+09:00;2023-09-25T11:45:40+09:00","default:inoue.ko","inoue.ko") #author("2023-09-29T09:51:25+09:00;2023-09-25T11:55:03+09:00","default:inoue.ko","inoue.ko") *Webブラウザについて ~ ブラウザとは、一般にWWWの情報を閲覧するためのソフトウエアで、HTTP[[ユーザーエージェント>Wikipedia:ユーザーエージェント]]のひとつです。SNSや様々なクラウドシステムが日常的なものになった今日、最も使用頻度の高いソフトウエアといえるでしょう。 世界のブラウザのシェアは以下で確認できます。 http://www.w3counter.com/globalstats.php Windowsでは、Microsoft Edge / Internet Explorer 、 Macでは、Safari が標準で搭載されています。無料で配布されているものとしては、 Chrome や Firefox が有名です。以下からダ ウンロードできます。 -[[Chrome>Google:Chrome]]：OnenSource （一部プロプライエタリ） -[[Firefox>Google:Firefox]]：OpenSource（Mozilla Public License） -[[Opera>http://www.opera.com/ja]]：プロプライエタリ・無料 //-[[Vivaldi>https://vivaldi.com/]]：プロプライエタリ・無料 ~ **ブラウザの種類 -[[Wikipedia:NCSA Mosaic]]（1993, Free） -[[Wikipedia:Netscape]] -[[Wikipedia:Microsoft_Edge]] --[[Wikipedia:Internet Explorer]] -[[Wikipedia:Safari]] -[[Wikipedia:Mozilla Firefox]] -[[Wikipedia:Google Chrome]] ~ ~ **ブラウザの活用 ブラウザは様々あるソフトウエアの中で、最も使用頻度の高いものです。 その使い勝手は、すべての作業の効率を左右するといっても過言ではありません。正しく理解して、使いこなして下さい。 ~ ***ブラウザでできること -Webサイトの閲覧 / 各種ファイルのダウンロード -画像（.jpg）、動画（.mp4）、音声（.mp3）等の再生 -クラウドドライブ上でのファイル管理 -文書、スプレッドシート、スライド、楽曲等の作成・共同編集・保存 ~ ***ブックマーク（お気に入り） 頻繁に利用するサイトはブックマークして、情報の活用効率を上げて下さい。 ~ ***様々な検索方法 -絞り込み検索：単語をスペース区切りで入力して絞り込み -マイナス検索： 検索したいワード ''-'' 除外したいワード [[Google: 北海道 -ツアー]] &small(広告は出るので完璧な除外はできません); -ドメイン指定検索：サーバーのある地域を限定した検索ができます [[GoogleImage:illustration site:.us]] [[GoogleImage: illustration site:.fr]] ~ ***様々な情報資源 -Wikipedia ：https://ja.wikipedia.org/ -WikimediaCommons：https://commons.wikimedia.org/ -Internet Archives：https://archive.org/ ~ ***履歴管理について -検索履歴はプライベートな情報です。共用パソコンを利用した場合などは、必要に応じて消去しましよう。 -Googleアカウントでログインした状態で検索したものは、自身で設定を変えない限り[[Google履歴>Goolge:Google履歴]]に残ります。 -Googleアカウントでログインした状態で検索したものは、自身で設定を変えない限り[[Google履歴>Google:Google履歴]]に残ります。 -Cookie の仕組みを知って、賢く対応しましょう。 [[Google: Cookieとは]] ~ ***インターネット利用の留意事項 -インターネットは匿名で利用できると思っている方が多いようですが、法的な手続きを踏めば、ある書き込みが誰によってなされたものなのか、大半は追跡可能です。''ネットに匿名性はない''と考えて行動するのが賢明です。 -例えば、アクセス元の IPアドレスは、サーバーのログなどから確認可能です。以下にアクセスして見て下さい。あなたがどこからアクセスしているかが先方に見えていることがわかります。 __[[確認くん>https://www.ugtop.com/spill.shtml]]__ -インターネットの利用には、ここには書ききれないほど多くのリスクがあります。以下のサイトで様々な脅威についてご確認下さい。 https://www.ipa.go.jp/security/10threats/index.html ~ ~ **ブラウザの設定 ***ホームページ 起動時、またHOMEアイコンをクリックしたとき表示されるページのことです。初期設定のまま使用するのではなく、自分にとって活用しやすい窓口サイトが表示されるように設定しておきましょう。 ~ ***ダウンロード先 デフォルトでは、「ダウンロードフォルダ」となっているものが多いのですが、そもそも「ダウンロードフォルダ」がどこにあるかがわかりにくいので、どこに落ちてきたのかわからず、それで困る方が多いようです。設定パネルにダウンロード先を定義する項目がありますので、確実に目に見える「デスクトップ」にすることをおすすめします。 ~ ***ツールバーのカスタマイズ ホームアイコンやブックマーク、その他のブラウザツールの表示・非表示・並べ替えが可能です。自分が使いやすいパターンを工夫しましょう。 [[Google:ブラウザ ツールバー カスタマイズ]] ~ ***アドオン（機能拡張）の管理 Web開発用のツール、FTPクライアント、サイトの一括ダウンロード（スクラップブック）など、便利なツールがオプションとして用意されています。活用して下さい。 ~ ~ **ブラウザの開発ツール ブラウザには、ソースコードの表示はもちろん、表示中のページの情報を詳細に分析する機能があります（特にFirefoxではこれが充実）。Webサイトの制作では、この開発ツールを用いたチェックを行うことで、作業を効率化することができます。 ~ ***開発ツールの起動 FirefoxやChrome、Safariには、開発支援ツールが標準で実装されています。 -Firefoxの場合 --ページ上で右クリック＞要素を調査 ※これが最も早いです --トップメニュー＞ツール＞Web開発＞開発ツールを表示 --右上のメニューボタン＞開発ツール＞開発ツールを表示 -Cromeの場合 --ページ上で右クリック＞検証 --トップメニュー＞表示＞開発/管理＞デベロッパーツール --右上のメニューボタン＞その他のツール＞デベロッパーツール -Safariの場合 --ページ上で右クリック(要カスタマイズ)＞要素の詳細を表示 --トップメニュー(要カスタマイズ)＞開発＞Webインスペクタを表示 --ツールバー(要カスタマイズ)＞Webインスペクタアイコンをクリック --''補足''：Safariはデフォルトが「素人モード」になっているので、開発系のメニューを有効にするには、環境設定で以下の操作が必要です。 ・環境設定＞詳細＞開発メニューを表示 にチェック この操作で、メニューバーに「開発」の項目が表示されるとともに、 コンテクストメニュー（右クリックで表示されるメニュー）にも 「ソースを表示」が出るようになります。 ・環境設定＞詳細＞スマート検索フィールド Webサイトの完全なアドレスを表示 にチェック -なお、開発ツールはショートカットでも出せます。 Firefox, Chrome とも [command]+[option]+[i]（Windowsは [F12] ） ~ ***開発ツールの使い方 &color(red){ここではFirefoxの例で説明します。どのブラウザもほぼ同様です。}; -まず、開発ウインドウの出し方について ウインドウ右上のアイコンで、ページの下・右・独立ウインドウなど、自分が使い易いタイプのものを選んで下さい。 -開発ウインドウ＞ 要素選択 ページ上の要素選択で、当該部分のHTMLソースがハイライト表示 -開発ウインドウ＞インスペクタ --HTMLソースに触れるとページ上の当該部分がハイライト表示されます。下左図は、<section> 部分の状態が示されています。 --CSSの各プロパティについて、その有無による表示の違い、さらに、値を変更した場合の表示の違いをシミュレーションすることができます。下右図では、<section> の height を 200px に変更した例です。 |#image(Browser/InspectorHTML.png) |#image(Browser/InspectorCSS.png) | -コンソール CSSやJSのエラーが行番号とともに表示されます。 --「警告」は、あくまで警告なので、そのままでも大丈夫です。理想は完全除去ですが、費用対効果の点で、無視することが多いです。 --JSパネルでエラー（赤字）が出ている場合は、その行で機能停止していますので、これは必ず修正が必要です。 ~ ***キャッシュのクリアについて ブラウザというソフトウエアは、ページの閲覧を効率化する目的では過去に閲覧したサイトの情報をローカル（あなたのPC）に蓄積し（これをブラウザキャッシュといいます）、再度そのページを閲覧する場合には、サーバーに再アクセスすることなく、キャッシュを使って再現することがあります。 サイトを書き直して再アップしたが、変更が反映されない・・という問題が生じる場合は、キャッシュを見ているのではないか？と疑う必要があります。 その場合は、まずブラウザの「更新ボタン」を押してみて下さい。 特に HTML以外のCSSやJSなど、リンクでインクルードするファイルについては、単にリロードしただけでは更新されない場合もあります。以下の方法で閲覧履歴(キャッシュ)ごとリフレッシュして見てください。 -Firefox：Shift + 「再読み込み」｜ Ctrl + F5 ｜Ctrl + R （Mac では ⌘ + R） -Google Chrome：Ctrl + Shift + R （Mac では ⌘ +Shift + R） -Safari： Shift + 「再読み込み」｜Ctrl + F5 or Ctrl + R （Mac では ⌘ + R） -Internet Explorer：Ctrl +「最新の情報に更新」｜ Ctrl-F5 ~ ~ ~