人気ブログランキング |
Studio TA Subsite の案内とお知らせ

タグ:インターネット ( 16 ) タグの人気記事

価格.comを見るなら「Kakakuom Viewer」なんちゃって

2018年 07月 28日

暗背景に対応した「Kakakucom Viewer」


眼の疲れを意識すると、刺激性の少ない画面デザインを求める様になります。 その観点から「Kakakukom Viewer」を明るさを少し落とした配色にするオプションを追加しました。 また、アレンジを通じて点検して行くと「縁側」がSSL化していました。 昨今SSL導入が遅れる大型サイトが問題になっていますが、価格.comもそのひとつです。 巨大なシステムは小回りが利かないのでしょう。

下は「暗背景オプション」を設定した「Kakakukom Viewer」の画面です。 白黒の反転まではできない(後述)のでグレーに輝度を落とした配色になっています。 この配色はデフォルトとなり、暗背景オプションを無効にすると従来の明背景になります。

a0349576_16422457.png

下は画像ビューアの様子です。

a0349576_16421558.png

ウインドウ幅を740pxに抑えていること、「縁側」のページにも対応している点が、新しい「930」タイプとの違いです。


「Kakakucom Viewer」のセクション構成


最新の「Kakakucom Viewer ver.2018.07.23」は 16セクションの構成です。

セクション1 フォント・基本背景

セクション2 全てのタブ画面 基本CSS

セクション3 フロートタブ部 機材詳細の非表示

セクション4 価格比較タブ画面 追加CSS
      (中古価格比較・買取価格・スペック情報・オークションの各タブ画面)
セクション5 レビュータブ画面 追加CSS 

セクション6 クチコミ写真ビュー画面 基本CSS

セクション7 クチコミコメント編集画面・レビュー編集画面 基本CSS

セクション8 レビュー編集画面 追加CSS

セクション9 縁側 基本CSS

セクション10 縁側編集画面 追加CSS

セクション11 白熱スレッドランキング 基本CSS

セクション12 PHOTOHITO 基本CSS

セクション13 マイページ 基本CSS

セクション14 掲示板 コメント枠可変オプション

セクション15 暗背景オプション「レビュー」「クチコミ」画面のみ

セクション16 背景色指定チュートリアル


●「セクション3」「セクション14」「セクション15」はオプションです。
●セクションの適用先が「次で始まるURL」の場合は「有効」、「URL」等の場合は「無効」になります。 スタイル編集画面でセクションの適用先を変更して「保存」を押すと、オプションの「有効/無効」が反映されます。
●「Kakakucom Viewer」の導入手順は、このページの最後を参照ください。



いちから作りなおした「Kakakucom Viewer 930」


暗背景対応でこれまでの「Kakakukom Viewer」を見直して、コードが入り混ざって整理されていない印象を強く感じました。 価格.comは大編成のページ構成で、テーマランドが幾つも組み合わさった様な印象です。 とても全部を調べ尽くせず、こんなページ、あんなページとアレンジを継ぎ足していく内に、共通化出来るコードを何度も書いていたり、しだいに雑然さが不満になって来ました。

で、これまでの「Kakakukom Viewer」の反省を踏まえ、新しいビューアーを最初から造りなおしました。

● 従来は740px幅に縮小していたが、新しいものは930pxのままアレンジする。
● サイドバーを削除せずに生かす。(少し煩いが有用な情報もある)
● Table表のリストをスクロール化する必要が無くなり、表は見易くなった。
● アレンジ目的は、眼に優しい表示とする事に重きを置く。(明配色なし)
● 対応ページの拡張を考慮し、コードを整理して、共用化を心がける。

価格.comは930pxのページ幅を基準としているので、幅縮小作業が省けた点は楽でした。 その代わり、背景の輝度を落とす配色を全面に適応したので、全てのパーツをそれに最適化する作業が主になりました。

価格.comはユーザーのアバター、各種マーク、タイトルなどにグラフィックを多用しています。 試されると判りますが、これが足枷になり黒背景等の反転アレンジが困難です。 このことから、白色背景の輝度を落としてグレー化するというアレンジに落ち着きました。 しかし背景配色の変更は、各種の矩形枠の表示で様々な問題を引き起します。

角を丸めた矩形表示は、全てグラフィックパーツで行う旧い方式です。 下は意図的に構成パーツを離して表示していますが、赤枠のパーツが全てグラフィックです。

a0349576_16520349.png

これらのパーツは、矩形枠内の背景色を変更すると、そぐわない状態になります。 配色アレンジでそれらはほぼ使いものにならず、グラフィックを非表示とし、「border-radius」「overflow: hidden」で描き改める必要がありました。

背景指定がない枠も多く、濃い背景が露出して文字が読めなくなります。 それらは適当な背景色の指定で済む場合が多い。 ただ、枠内に白背景を前提のグラフィックがある場合、背景をグレーにするとミスマッチで苦労します。 まあ、体裁を納得できる範囲にするには、相当の艱難辛苦があります。


デザインの概観


各ページの幅は930px基準です。 背景は濃い藍色、殆どのパネル色はグレーか淡いグレーを使っています。 コメント欄の文字色は読み難くなるのを防ぐために、完全な黒としてコントラストを稼ぎました。

a0349576_16510876.png

明らかに不要なADは省き、ページに関連した製品情報は残しています。

下は、コメント添付の画像を開くページで、元の白背景に比べると見易いと思います。 このページは930px幅に合わせるため、本来より少し画像が小さくなっています。(必要なら拡大表示が使えますから)

a0349576_16545715.png

下はテーブルを使用した表があるページで、表の幅はそのままのサイズです。

a0349576_16553142.png

主要な掲示板と並ぶページ以外では、現在のところ「白熱スレッドランキング」「マイページ」を930px幅アレンジとして追加しています。

a0349576_16560821.png
a0349576_16563865.png

コードを整理したくてここまで来ましたが、740px幅の初代はサイドメニューを省いた潔さが好ましく感じます。 ウインドウ幅を狭めるとサイドバーが消えるアレンジもあるなぁと、改めて考えてしまいます。

とりあえず使える様になったので、今後の拡張や修正を前提でアップロードします。


「Kakakucom Viewer 930」のセクション構成


Kakakucom Viewer 930 ver.2018.07.28」は 12セクションの構成です。

セクション1 価格.COM 全ページ共通

セクション2 タブ画面(レビュー・クチコミ以外の全て)

セクション3 レビュー タブ画面

セクション4 クチコミ タブ画面

セクション5 画像ビューア画面 

セクション6 コメント・レビュー・ピックアップリスト 作成画面

セクション7 プロフィール画面

セクション8 掲示板・レビュー 総合ページ

セクション9 外部リンクへ移動時の警告画面

セクション10 マイページ

セクション11 白熱スレッドランキング

セクション12 PHOTOHITO



Kakakucom Viewer / Kakakucom Viewer 930 を使用するには


① ブラウザにStylusを導入する


ウェブページのアレンジには、拡張機能(アドオン)の「Stylus」が必要です。 これは、Chrome用とFirefox用があり、使用中のブラウザに合わせて導入します。

  Chrome版  Stylusの入手先
  Firefox版   Stylusの入手先


➁ Kakakucom Viewer / Kakakucom Viewer 930 をインストール


「userstyles.org」はスタイル投稿サイトです。 私はこのサイトに「Kakakucom Viewer」や「Kakakucom Viewer 930」を登録しています。 これらのスタイルは Chrome版 / Firefox版 どちらの「Stylus」でも使用出来ます。
必要なビューアを以下のリンク先のぺージでインストールしてください。 比較のために両方のビューアをインスールする事は問題ありませんが、同時使用はデザイン崩れを生じる場合があります。「Stylus」でどちらか一方のみを有効にして使用してください。

  「userstyles.org」 Kakakucom Viewer (Chrome/Firefox)
  「userstyles.org」 Kakakucom Viewer 930 (Chrome/Firefox)

スタイルのインストールは、サンプル画像の右下の Install Style を押すと、一瞬で Stylus にインストールされます。 この際、無関係なアプリの「Download」ボタンなどが同ページにあり、紛らわしいので注意ください。




この記事はカテゴリ「コンピュータ」にトラックバックしています。



by Ataron | 2018-07-28 17:47 | PC環境(ハード/ソフト) | Trackback | Comments(0)

価格.com掲示板をアレンジする(1) / ユーザースタイルシート

2017年 12月 29日

価格.com掲示板をアレンジ


Stylus の最も一般的な使用方法は、ネット上のページのルックスをユーザーライクに変更してしまう事でしょう。 価格.com掲示板のカメラ板を良く見に行きますが、情報満載のページ構成は良いのですが、実際に見る所は決まってます。 そこで、掲示板自体のコメント機能を重点として、余り関係ない表示を省きました。 下はアレンジ前のサンプルページです。

a0349576_19011509.png

右サイドにAD要素が多く、アレンジはこれらを非表示にしました。 ただ、右下の検索やPHOTOHITOのリンクなどは時々利用しますが、これが必要な場合はブラウザのStylusアイコンから一時的にスタイルをOFFにすれば良いだけです。

また、本来はページ幅930pxが基準のデザインで、右メニュー等を省いた幅に纏めるために、かなり多くの要素幅を縮めています。 困ったのは、上図中央のカテゴリタブです。 この幅を減らすために、タブの幅を縮小したアコーディオン型を採用しました。



アレンジ後のデザイン


下は、アレンジを適用した、ページ上部の様子です。

a0349576_19571083.png

AD部を省いたので落ち着いた画面になっています。 上図の青枠の部分のカテゴリタブは、下図の様に必要なタブにマウスを乗せると幅が広がるアコーディオン型です。

a0349576_15545998.png


フロート表示のカテゴリタブ


価格.com掲示版はページの下方にスクロールすると、フロート表示で機材詳細+カテゴリタブが表示されます。 これを小幅にアレンジしましたが、機材詳細の高さが増えてしまいました。

a0349576_20592661.png

上図はフロート表示ですが、青枠の機材詳細は少し邪魔なので、オプションを3種作って選択可能としました。

◎機材詳細を非表示(カテゴリタブのみ表示)
◎カテゴリタブを非表示(機材詳細のみ表示)
◎フロート部を全て非表示

下はカテゴリタブのみ表示とした状態です。

a0349576_21103227.png


その他のアレンジ


全体の背景色を淡いグレーにして、眩しさを抑えています。 背景色は好みに変更可能です。 幅を780px程度に抑えているので、文字が小さく読み難い場合に、普通のモニターでもブラウザ表示を150%程度まで拡大可能です。 またウインドウ幅を節約したので、コメント入力時等の2画面表示が楽に行えます。

コメント編集ページ、添付画像ビューワー、レビューページ、レビュー編集ページなど、掲示板と連携するページは、同じページ幅に収まるアレンジをしています。 この事で、他ページへの移行がスムーズに行えます。
また、カテゴリタブの別ページにもアレンジが適応されますが、おうよそ表示に問題はありません。



アレンジを実現する方法



① ブラウザにStylusを導入する


ウェブページのアレンジには、拡張機能(アドオン)の Stylusが先ず必要です。 これは、Chrome用とFirefox用があり、使用中のブラウザに合わせて導入します。

  Chrome版  Stylusの入手先
  
  Firefox版   Stylusの入手先


➁A userstyles.org から Kakakucom Viewer をインストール


以下のリンク先は、スタイル投稿サイト「userstyles.org」に私がこのスタイルを登録したページです。 スタイルの名前を「Kakakucom Viewer」としています。 このスタイルは Chrome版 / Firefox版 どちらのStylusでも使用出来ます。
スタイルのインストールは、サンプル画像の右下の Install Style を押すと、一瞬で Stylus にインストールされます。 この際、無関係なアプリの「Download」ボタンなどが同ページにあり、紛らわしいので注意ください。


➁B 手作業で Kakakucom Viewer をStylusにインストール


以下に掲載する「Kakakucom Viewer」(Mozilla Format)のCSSを、手作業で Stylus に登録することができます。 方法は、以下のリンク先を参照ください。 登録後の機能は➁Aと同じです。



スタイルのCSSとセクション構成


以下のCSSコードは Mozilla Format で、8セクションが適用先指定と共にコンパイルされています。

セクション1  価格.com 掲示板 基本CSS

セクション2   写真ビューワー画面 基本CSS

セクション3  コメント編集画面・レビュー編集画面 基本CSS

セクション4  レビュー編集画面 追加 基本CSS

セクション5  フォント メイリオ指定 / 画面背景色

セクション6  フロート部 機材詳細の非表示オプション

セクション7  フロート部 カテゴリタブの非表示オプション

セクション8  フロート部 全体の非表示オプション


●「セクション5」はCSSの扱いが出来る人には、簡単にカスタマイズが可能です。

●「セクション 6, 7, 8」の「有効」「無効」の切り替えで、フロート部の表示を選択出来ます。

● 初期設定は、「セクション1~6」を有効、「セクション7, 8」を無効に設定しています。

●セクションの適用先が「次で始まるURL」の場合は「有効」、「URL」等の場合は「無効」になります。 編集画面で適用先を変更して「保存」を押すと、オプション設定が変更されます。


価格.com 掲示板アレンジ 基本CSS  ( Mozilla Format )



@-moz-document url-prefix("http://bbs.kakaku.com/bbs/"), url-prefix("http://kakaku.com/item/"), url-prefix("http://review.kakaku.com/review/"), url-prefix("http://kakaku.com/auth/prdevaluate/") {
/* 2018.01.03 価格.com 掲示板 基本CSS */

/* ページ上部 機種説明 */
#contents930 {
width: 740px !important; }

#header {
width: 740px !important; }

#header .headerR {
display: none; }

.path.btmPath {
width: 740px; }

#itmOther {
display: none; }

#itmBoxMax {
width: 740px !important;
background-size: contain !important; }

#titleBox {
width: 720px !important; }

#titleBox + .bookmarkAdd3 {
right: -3px; }

#productInfoBox span.morelinkbox {
width: auto !important; }


/* カテゴリタブの小幅化 */
#main ul.tab li {
border-radius: 7px 7px 0 0;
overflow: hidden;
width: 65px;
box-shadow: 0 1px 2px 0px #00000080;
transition: .5s }

#main ul.tab li:hover {
width: 84px; }

#itemviewFixedTab ul.tab li {
border-radius: 7px 7px 0 0;
overflow: hidden;
width: 65px;
box-shadow: 0 1px 2px 0px #00000080;
transition: .5s }

#itemviewFixedTab ul.tab li:hover {
width: 84px; }


/* 標準タブ */
#main .tabArea {
width: 740px;
background-position: center bottom !important; }

#main .h3Area {
width: 720px;
background-size: contain; }

#main .h3Area + img {
width: 740px; }


/* フロート部 全体 */
#itemviewFixedTab {
width: 740px; }


/* フロート部 機材詳細 */
#itemviewFixedTab .fixedTabItemLines {
display: grid; }


/* スレッド表示順 ボタン列 */
.box04.change01 {
width: 116px; }

.box04.change05 {
width: 240px; }


/* NEW 新製品紹介 */
.newmodel h4 span,
.oldmodel h4 span {
width: 720px; }

.newmodel .newmodelInfo,
.oldmodel .oldmodelInfo {
width: 720px; }

.newmodel .valuebox,
.oldmodel .valuebox {
width: 300px; }


/* 右メニュー */
#mainRight {
display: none; }


/* レビューページ */
div#revbox {
width: 740px; }

#revbox .totalbox.clearfix {
width: 736px !important; }


/* 下部 ADブロック */
.sqTwoWrapper,
.sqTwo {
display: none; }

.fixedRightAdContainer {
display: none !important; }
}

@-moz-document url-prefix("http://bbs.kakaku.com/bbs/"), url-prefix("http://review.kakaku.com/review/") {
/* 写真ビューワー画面 基本CSS */
#contents {
width: 740px; }

#camera .h1Area {
width: 740px; }

#imageView {
margin: 0;
width: 740px; }

#imageViewInner {
margin: 0;
width: 740px; }

#imageView .imgAreaShadow {
width: 740px; }

#imageView .imageArea {
padding: 10px;
width: 718px; }

.imageArea a > img {
width: 718px; }
}

@-moz-document url-prefix("http://kakaku.com/auth/bbsnew/"), url-prefix("http://kakaku.com/auth/prdevaluate/") {
/* コメント編集画面・レビュー編集画面 基本CSS */

/* ページ上部 機種説明 */
#contents930 {
width: 740px !important; }

#header {
width: 740px !important; }

#header .headerL {
width: 270px; }

.prText iframe {
display: none; }

iframe.loginSearchFrame {
width: 460px !important; }

#main .bbsBar {
width: 740px;
overflow: hidden;
background-position: center bottom !important; }

#main .h3Area {
width: 720px; }

#main .h3Area + img {
width: 740px; }


/* 入力欄 */
table.tblInput.ver2 {
width: 740px; }

#main .tblInput.ver2 .commentTextarea {
width: 600px !important; }

#main .tblInput.ver2 .nicknameChoice {
width: 592px; }

#main .tblInput.ver2 #file_up .step {
width: 602px; }

#FrmInput .agreementFrame,
#FrmUpload .agreementFrame {
width: 738px; }


/* 下部クチコミ参照枠 */
#main .box08 {
border: none; }
}

@-moz-document url-prefix("http://kakaku.com/auth/prdevaluate/") {
/* レビュー編集画面 追加 基本CSS */
#main .tblInput.ver2 td {
padding-right: 0; }

#main .tblInput.ver2 .tblInput02,
#main .tblInput.ver2 .tblInput03 {
width: 590px !important; }

#main .tblInput.ver2 .commentTextarea {
width: 578px !important; }

#main .tblInput.ver2 #file_up .step {
width: 580px; }
}

@-moz-document url-prefix("http://bbs.kakaku.com/bb"), url-prefix("http://kakaku.com/ite"), url-prefix("http://review.kakaku.com/revi"), url-prefix("http://kakaku.com/auth/bbsn"), url-prefix("http://kakaku.com/auth/prdevalua") {
/* フォント メイリオ指定 */
* {
font-family: "メイリオ", "Meiryo" !important; }


/* 画面背景色 */
body {
background: #fafafa !important; }

#camera #header {
background: #fff; }

.h1deco {
background: #fff; }
}

@-moz-document url-prefix("http://bbs.kakaku.com/bb"), url-prefix("http://kakaku.com/ite"), url-prefix("http://review.kakaku.com/revi"), url-prefix("http://kakaku.com/auth/prdevalua") {
/* フロート部 機材詳細の非表示 */
#itemviewFixedTab .fixedTabItem {
display: none; }
}

@-moz-document url("http://bbs.kakaku.com/bb"), url("http://kakaku.com/ite"), url("http://review.kakaku.com/revi"), url("http://kakaku.com/auth/prdevalua") {
/* フロート部 カテゴリタブの非表示 */
#itemviewFixedTab .fixedTabArea {
display: none; }
}

@-moz-document url("http://bbs.kakaku.com/bb"), url("http://kakaku.com/ite"), url("http://review.kakaku.com/revi"), url("http://kakaku.com/auth/prdevalua") {
/* フロート部 全体の非表示 */
#itemviewFixedTab {
display: none !important; }
}



〔更新〕2018.01.03
 下部 ADブロック項目 追加  上記コードは更新済です。



この記事はカテゴリ「スキン編集」にトラックバックしています。



by Ataron | 2017-12-29 22:07 | PC環境(ハード/ソフト) | Trackback | Comments(0)

ログインできなくなった時の防備録 / エキサイトブログ

2017年 08月 08日
IE11のセキュリティ設定を色々触っていると、エキサイトブログにログインできなくなりました。 いや、正確に言えば、半分ログインしている状態です。

症状は明らかです。 ログインしていないと出来ない作業をしようとすると、エキサイトブログのトップページに飛ばされます。 要するにログインしろという事です。

a0349576_12094754.png

で「ログイン」を押してログインのページに入ると、既に「ログイン状態」になっています。

a0349576_12132613.png

この二つのページを往復しても、また一旦ログアウトしてやりなおしても、先に進めません。

これは、エキサイトブログ向上委員会のコメントの中で、時々見かけるトラブルです。 危機こそ好機なりと、かたっぱしから条件を変えてテストしてみました。



エキサイトのヘルプでは「Cookie」の削除を解決策の最初に書いています。


〔Cookieのリセット〕
IE11の「歯車マーク」から「インターネットオプション」を起動。

a0349576_12173232.png

最初のタブページ「全般」→「閲覧の履歴」で「削除」を押すと、下のダイアログが出ます。

a0349576_12212724.png

「クッキーとWebサイトデータ」にチェックを入れて(他は不要)、下の「削除」を押します。



〔サイトのプライバシー管理〕

次に書かれた対策です。「プライバシー」のタブページを開き、「サイト」をクリックします。

a0349576_12275176.png

ここで開くダイアログで、「exblog.jp」「excite.co.jp」の2ヵ所のドメインネームが登録されている必要があります。 ドメイン表記で、上の太字の通りでないとダメです。

a0349576_12313939.png



〔信頼済みサイトの登録〕

今回、これが効果がありましたが、IE11を起動すると初回だけはトップページに飛ばされる症状が残りました。「セキュリティ」のタプページで、一番上のゾーン選択で「信頼済みサイト」のアイコンをクリックします。 このページの設定は、4つのゾーンで別個の登録になっていますから、どのゾーンの設定か混乱しないでください。

a0349576_12380920.png

デフォルトで「信頼済みサイト」は下方の「保護モードを有効にする~」にチェックがないはずで、チェックが入っていたら外しておきます。 その上で、上図の「サイト」ボタンを押します。

信頼済みサイトのダイアログが開きます。 ここで〔サイトのプライバシ管理〕と同様に「exblog.jp」「excite.co.jp」を登録。 登録後に一度ダイアログを閉じ、もう一度開くと下図の様に「*.exblog.jp」「*.excite.co.jp」に変わっていました。 この登録枠はURL形式なので、適した形に変えられた様です。 下の「サーバーの確認」は、この形の登録なのでチェックなしです。

a0349576_17050569.png


これで一応ログインができる様になりましたが、妙な事にIE11を起動してから初回だけトップページに飛ばされる症状が残りました。 2度目編集画面に入る時は、問題ないのです。 しかし、元はトップページに飛ばされる事など無かったので、まだ変なわけです。



ここで、もう一度挑戦しました。

〔サイトのプライバシー管理 登録削除 そして 再登録〕

私のこの「プライバシー」の登録、実は最初から登録していました。 その状態での不具合だったので、「信頼済みサイト」の方を登録したのです。 しかし未だ完全ではないので、一度「プライバシー」の登録を削除してみました。 IE11を一旦閉じて再起動し、この「プライバシー」の登録をやりなおした所、トップページに飛ばされることが全くなくなりました。

最初から、この作業だけで良かったのかも知れません。 先ほどの「信頼済みサイト」の登録は削除しましたが、問題なくログインが出来る本来の状態になりました。



今後SSL化で、再び登録の内容が問題になるかも知れません。 またログインできなければ、なんとでも出来そうな気がします。 一度ひねくれてしまったシステムをいかにリセットするか、そんな問題に思えます。 今回の私のアガキ方、難儀している方の参考になれば幸いです。




この記事はカテゴリ「ブログ」にトラックバックしています。



by Ataron | 2017-08-08 13:20 | PC環境(ハード/ソフト) | Trackback | Comments(0)

Stylist / Google Chrome 対象URLの指定方法の詳細

2017年 03月 02日
ブラウザ Google Chrome 上で、ユーザースタイルシート機能を管理する拡張機能 Stylist は、安定した動作で、機能も一般ユーザーには充分と思います。 Stylist の基本的な操作は、以下に纏めています。


このページは上記ページの補足で、「対象URL」の指定方法の少し詳しい説明です。



Stylist の「Style set」枠で「All site」を選択しなかった場合は、下図の赤枠で示した「対象URL」の指定枠が表示されます。 この指定枠は「add Rule」を押して幾つでも追加が可能です。

b0174191_14425987.png

その指定枠の左端に、上図の様に「prefix」「domain」「regexp」の3種の指定方法の区別があり、これらは自由に切り替えが可能です。 この3種の指定方法について、前ページでは説明を省略したので、以下に説明します。



インターネット上のサイトのURLは、エキサイトブログ向上委員会のページを例にすると、およそ以下の構成になっています。

b0174191_15492999.png

◎URLは「http」で始まる全ての部分です。

◎domain(ドメイン)名は「staff.exblog.jp」の部分です。
「exblog.jp」というドメインに対して「staff.exblog.jp」はサブドメインと呼ばれる形ですが、別個の独立したドメインとして扱われます。 本社と支社は別の住所ですと言う感じ。 左側に「.」を挟んで更に複雑な形で表す事も出来ます。

◎「/23689200」の部分はサブディレクトリと呼ばれます。 これは各支社内での部署みたいなものです。 右側に「/」を挟んで追記し、更に細分化したディレクトリ先を指定出来ます。

以上の事を理解していれば、3種の指定方法の区別は理解し易いでしょう。

prefix:URLの「先頭側から始まる一部分」を指定して、それが一致するURLなら適応する。

「prefix」は基本的な選択枝です。右枠内の記入の際に「http://」を省略せず、正しく記入する必要があります。 また、右側をどこまでで切るかで、対象となるURLの範囲が変わって来ます。
▪「http://staff.exblog.jp/23689200」と全て記入すれば、「23689200」の個別ページのみ指定されて、トップページの「http://staff.exblog.jp」は指定対象外となります。
▪「http://staff.exblog.jp」と記入すれば、トップページも「23689200」や他の個別ページも、指定対象に入ります。

domain:ドメイン名(またはサブドメイン名)を指定して、同じドメイン名のURLなら適応する。

「domain」の指定は、ドメイン名の指定だけでサブドメインも適応されます。
▪「staff.exblog.jp」と指定すると「exblog.jp」は指定の対象外となります。
▪「exblog.jp」と指定すると「staff.exblog.jp」「someone.exblog.jp」等も指定の対象になります。
▪「staff.exblog」や「staff.exblog.jp/23689200」などとすると正しいドメイン名でないので、エラーで無効となります。

regexp:URLの「一部の文字列」を指定し、同じ「文字列」が含まれるURLなら適応する。

「regexp」での指定は、上記の設定では出来ない文字列検索と同様の指定が可能になります。
▪例えば右枠を「ex」と指定すれば、「exblog.jp」「www.excite.co.jp」「http://www.tv-asahi.co.jp/news-ex/」等も指定対象となります。



以上が、3種の指定方法の違いです。 多くの場合は「All site」や「prefix」で事足りるはずですが、他の指定方法が便利な場合も考えられます。 特にサブドメイン構成になったサイトは多く、「domain」の使い所はありそうです。



by Ataron | 2017-03-02 17:56 | PC環境(ハード/ソフト) | Trackback | Comments(0)

PCを夜中に起動させない方法とLANのリセット

2017年 02月 20日
Win10にアップグレード後に、スリープに落としていたPCが、夜中に勝手に起動して困る話は良く聞きます。 Windowsやセキュリティアプリの自動アップデートやシステムバックアップ等を夜中に設定している場合なら、時刻指定を変えれば良いでしょう。 しかし、それらの指定を無視してでもとにかく起動させたくない場合や、起動の原因が不明な場合は、およそ以下の箇所の設定で対策をすれば良い様です。

b0174191_23433097.png



(1)スリープ解除タイマーの設定
「電源オプション」→「コンピューターがスリープ状態になる時間を変更」→「詳細な電源設定の変更」で以下の「電源オプション(詳細設定)」のウインドウが表示されます。 この「スリープ」の項の「スリープ解除タイマーの許可」の設定を、下図の様に「無効」に設定します。

b0174191_22160825.png

(2)ネットワークアダプター(NIC)の設定
「デバイスマネージャー」を開き、使用している「ネットワークアダプター」を右クリックし「プロパティ」を開きます。

b0174191_22205472.png

開いた「ネットワークアダプターのプロパティ」のウインドウで「詳細設定」タブを開き、下図の様に「Wake on Magic Packet」「Wake on pattern mactch」「WakeOnLAN From PowerOff」等のプロパティを「Disabled」に設定します。

b0174191_22331802.png

一般家庭のPCではこれらを「Disabled」としても問題ないでしょう。
更に「電源の管理」タブを開き、3項目(特に下側の2項目)のチェックを外します。

b0174191_22342940.png

但し、宅内LANで他PCの遠隔起動等をしている場合は、「Magic Packet」関係の機能を「Enabled」にする必要があります。

(3)マウスとそのほかのポインティングデバイスの設定
「デバイスマネージャー」を開き、使用している「マウス」を右クリックし「プロパティ」を開きます。

b0174191_22453391.png

開いた「マウスのプロパティ」のウインドウで「電源の管理」タブを開き、下図の様に2項目(特に下側)のチェックを外します。

b0174191_22455676.png

以上の(1)(3)の3ヵ所の設定が、スリープからの自動復帰をコントロールするポイントになります。



これらの設定を弄った後は、PCを再起動するべきです。 ところが、そのままスリープさせてしまったのが災いしたらしく、スリープから復帰後にネットワーク接続が不可能になっていました。

b0174191_10413926.png

上図の様にWin10の「ネットワーク」の状態を示すアイコンに「×」印が付いて消えなくなったのです。

ネットワーク接続は「有効」になっていて、明らかにソフトウエアの問題なのに、トラブルシューティングは「LANケーブルが繋がっていない」と言うだけです。 PCの再起動、先の設定の一旦差し戻し、ネットワークアダプターのドライバー更新、デバイスマネージャー上からアダプターの一旦削除、ルーターのリセット、PCの電源断しPCの再起動、LANケーブルの繋ぎ換え、ついにはWindowsの復元などを行ったのですが、一向に「×」印が消えずネットワークが繋がりません。

ソフトウェア設定でアダプターが故障するのかと半分思いかけたのですが、一つ徹底していなかった事がありました。 PCの電源断だけでなく「PCのコンセントを抜く」という操作です。 PCのシャットダウン後にコンセントを抜き、10秒ほど経ってからコンセントを繋ぎPCを起動すると、ようやく正常に戻りました。

ネットワークアダプター(NIC)は、PCのシャットダウンとは無関係に通電して働いていて、これをリセットするにはPCのコンセントを抜く必要があったのですね。

LANのリセット手段として知っておくべき事として以下に纏めておきます。

●モデムやルーター類のリセットは、そのリセットボタンを押すか電源コードを抜く
●ネットワークアダプター(NIC)のリセットは、PCの電源コードを抜く





by Ataron | 2017-02-20 23:24 | PC環境(ハード/ソフト) | Trackback | Comments(0)

Chrome のフリーズと McAfee WebAdvisor の関係

2017年 02月 17日
2017年2月に入ってからと思いますが、Chromeが頻繁にフリーズする様になりました。 新しいページを開こうとすると「Chromeが応答していません」に陥り、Chromeを終了するしかなくなり、同時に他のブラウザも使えなくなります。 この状態を抜けるにはPCの再起動しかなく、再起動後はしばらく問題ないのですが、ページを往復している内に再びフリーズします。

これは一日に数回は経験し、並列して使用している2台のPCでほぼ同時に生じた現象なので、当初はインターネットルーター等を疑いましたが解決しませんでした。 その後、ネットの最近の情報で「McAfee」との関係を疑う記事があり、私も「McAfee」ユーザーでこの点に注目しました。



新しいページを開く際やその直後にフリーズするので、私は「McAfee WebAdvisor」を疑いました。「McAfee」は Chromeに対しては自動的に「McAfee WebAdvisor」というChrome拡張機能をインストールします。 その場合は、下の様なくすんだ拡張機能のアイコンが表示されます。

b0174191_17455430.png

この「McAfee WebAdvisor」がフリーズの原因なら、動作を停止するのは簡単です。 上のアイコンを右クリックして「拡張機能を管理」を押すと、下図の様にChrome拡張機能の管理ページが開きます。

b0174191_17523840.png

ここで「▢有効」のチェックを外すと「McAfee WebAdvisor」の機能が停止します。

この拡張機能は、ネット上の危険サイトのURLリンクを、ユーザーが開く前に察知して警告する機能です。 働かせた方が安全ですが、他の「McAfee」のセキュリティ機能は働いているので、私はチェックを外して様子を見ています。 この拡張機能がフリーズの原因ではない様なら、再びチェックを入れれば再稼働が可能です。



この記事は、2月17日の時点のものです。 現在のところこの対策でフリーズ再発がなくなり、一定の解決を見たと感じます。 同様の問題で困っている方の参考になればと、この「McAfee WebAdvisor」の対策を提案します。

しかしながら、「McAfee」あるいは「Chrome」によるアップデートで、このフリーズ問題は簡単に解決してしまう可能性があります。 また異なった原因により似た問題が生じている可能性も色々と考えられますので、その判断は各自にお任せします。



「McAfee」に原因する問題らしいという事が判って来ました。 以下のページに関連した情報がありました。

  バージョン更新後?クロームが頻繁に応答なしになる Google Chrome ヘルプ フォーラム

2月19日現在、「McAfee」側で対策したバージョンアップがされた様に書かれています。 既に解決済みの環境も多いと思いますが、もし再発がある様なら「McAfee」の「更新の確認」を押して手動で更新のダウンロードをして、PCの再起動を試してください。



by Ataron | 2017-02-17 18:09 | PC環境(ハード/ソフト) | Trackback | Comments(0)

Google Chrome のポップアップ禁止を解除する

2017年 02月 11日
G8を仕入れると、ボディ内手ブレ補正など新機能が導入され、今まで使って来た純正レンズのファームのバージョンアップが求められます。 ファームアップしないと新しいプラス機能が働かないだけで、従来の機能に問題はなく、ともすれば放置しそうな話ですけど。

で、Panaのファームデータを貰いにホームページに行き、新バージョンのデータを見つけてダウンロードしようとすると、Google Chrome では「blank(空白)」ページが開くだけでダウンロードできません。 これは以前にも覚えがある状態で、IEではサブウインドウが開いたので、そちらに逃げてIEでダウンロードしてました。

今回このままでは、我ながら進歩がないなぁと少し調べると、Chromeでポップアップブロックが働いているらしい。 その解除方法を調べると、サイト単位で「ポップアップ許可」を設定出来る安心設計でした。 だいたい、Panaサイトのデザインが問題という気もしますが、詳しい事は判らないので偉そうな事は言えません。


信用できるサイトを Chromeで訪れた際に、リンクが上手く働かないと感じた場合、ポップアップブロック禁止が働いている可能性があります。 ブロックが働くと、Chromeのアドレス窓の右隅に、下図の様な×印の付いたアイコンが出ます。

b0174191_12422716.png

小さな表示で気付き難いですが、これをクリックすると下の様なウインドウが出ます。

b0174191_14091029.png

この赤枠部分で、現在のページのポップアップの「許可/ブロック」を設定出来ます。「許可する」を選択すれば、このサイトを信用してポップアップが実行される様になります。(デフォルトで全サイトブロック設定の場合です)


普通はこれでOKですが、許可登録をしたサイトを元通のブロック設定に戻す方法を書いておきましょう。「許可」の設定は以下の場所に登録されていますので、そこにアクセスして登録を消します。

Chromeの「設定」画面を開き、一番下の「詳細設定を表示...」を押し、下図の「プライバシー」の「コンテンツの設定」を押します。

b0174191_14241135.png

開いたウインドウを下方にスクロールして「ポップアップ」の項目を探し、下図の「例外の管理」押します。

b0174191_14290063.png

ページ参照中にブロック表示アイコンで設定した「許可」は、開いた下図の「ポップアップの例外」に登録されています。

b0174191_14294102.png

上図でグレー反転しているのが許可設定した Panaのサイトですが、右端の「×」を2回押すとこの行が消え、許可の登録が抹消されます。


Chrome のポップアップのコントロールは、以上の場所でほぼコントロールできる様です。 セキュリティ関連はややこしくなりますが、仕方ないですね。




by Ataron | 2017-02-11 14:39 | PC環境(ハード/ソフト) | Trackback | Comments(0)

トラックバックはとらばーゆ?

2016年 10月 21日
時々気になっているのが、トラックバックの行方です。

リンクというのは、もはや知らない人を探すのが困難な機能ですが、トラックバックというのは使った事がない人も多いでしょう。 他の人のある記事に触発されて記事を書いた場合に、元記事にトラックバックを送るのですが、本来は礼儀にかなった丁寧な仕組みです。「勝手にリンクせず挨拶してリンクする」といった感じでしょうか。 しかし、ぱっと判りにくく皆んな使わないのも相乗して、もはや無くなりつつある機能にも見えます。

トラバについては、「トラックバックとは?」のページの説明が判り易い様です。

私なぞ、トラックバックを受けたらどうしようか迷いそうですが、無くしてしまうのもという気がして置いてます。(トラックバックはお返事は要らないんですけどね)

b0174191_03503327.png

しかし、これを実際に押してみると「旧編集画面」が出て来ます。 新管理画面に設定していても、トラックバックの編集はこの画面です。

b0174191_03530270.png

新しい編集画面でトラックバック欄に相手記事のトラックバックアドレスを書き入れ、本文に相手記事のリンクを入れても同じ事ですけど、それが面倒だからこのボタンがあるわけで...

旧管理画面のサポート中止なら、この画面も新しい編集画面に変えるべきでしょうが、旧画面を残せと言う意見もあって判断に悩んでいるのか、それとも単に忘れてるのか。 そして、スマホ版のアクセス画面にはトラックバックのスイッチを探しても見つかりません。 スマホユーザーはいらないよねと、エキサイトは判断した様に思えます。


ちなみに、PC版のブログ画面からトラックバックのスイッチは消す事が出来ます。
「設定」→「コメント・トラバ設定」から、下の様に「トラックバック禁止」を選択し「適用」を押すと、コメント欄のトラックバックスイッチが消えます。

b0174191_04130033.png

多分、それでトラックバック受信も拒否されるようになると思います。 一方的なリンクは拒否できないでしょうけれど。 もっとも、これは自分のブログの話で、トラックバックを許可している他の人に、トラックバックができなくなるのではありません。 ああ、ややこしい。

ややこしついでに、このトラックバック機能は表示の通りエキサイトユーザー間でしか通用しないんですが、世の中の他ブログやサイト等で外部トラックバックを受け付けるサイトってあるのか調べると、エキサイトのヘルプにちゃんと書いてありました。

  外部のブログへトラックバックする  エキサイトブログヘルプ

という事は、そういう外部サイトはあるに違いない。 そして、もう少し足を延ばすとブログ向上委員会のこんな記事が見つかりました。

  外部からのトラックバック受付再開しました  エキサイトブログ向上委員会

エキサイト自身は外部からのトラックバックに対応していたんですね。 2007年の時点でエキサイトは苦労してトラックバック機能をスパムから守った経緯が書かれてます。 これを読むと、トラックバック機能を軽視してはいけないのかもと思えて来ます。 ネットを調べると「ウチのブログもやっと外部トラックバックを受ける機能が出来た」と喜んでいる記事がありました。 使わなくても置いとけよ、と言われている気もしますが...





by Ataron | 2016-10-21 04:24 | PC環境(ハード/ソフト) | Trackback | Comments(0)

Chrome ユーザー調査を騙る詐欺

2016年 09月 06日
ブラウザのユーザー調査を騙る詐欺が頻発している様です。 私も、昨日ネット検索から調べものに行った先の、まともな個人サイトで出会いました。

そのページを開いてほんの少し後に、突然ブラウザ(私の場合はChrome)のウインドウが暗転し、下の様なもっともらしい画面が出ました。

b0174191_17310653.jpg

上はネットから戴いた昨年バージョンの様ですが、私の見た画像は更に「本物らしい」内容だった気がします。 しばし怪しいが「本物かもしれない」と考えてしまいましたね。 「~が当たる」などに先に目が行けば完全に疑ったはずですが、「Chromeユーザーの調査」という部分に気をとられました。 それは、まことしやかに「Google Chrome のユーザー調査」を訴えます。 私は結局、URLが見たことないので、後で確かめようとページを閉じて正解でした。 こういうの、セキュリティアプリはブロック出来なかったのです。

要するに、クレジット番号や個人データを狙う詐欺らしく、ページに設置された宣伝に隠れて、たまたまページを参照した人に表示される仕組みだとか。 ページの所有者も宣伝事業者すらも気付かない内に設置され、同じページに行っても2度目がなく、仕掛け場所の追跡をくらます様です。 宣伝を通じてこの様な仕込みを実行させる事態は、まともなサイトや有名サイトを開いただけで危険な窓口に立たされるという事で、困ったものだと思います。

以下のリンクに、最近の関連ニュースがあります。 他のブラウザ版もあるそうで、ご用心のほど。

  「ユーザー調査」、実はカード番号収集の詐欺 読売新聞(YOMIURI ONLINE)



by Ataron | 2016-09-06 17:50 | PC環境(ハード/ソフト) | Trackback | Comments(0)

掲示板に「MS Pゴシック」が優先上位に指定される理由

2016年 08月 23日
以前より疑問に思って来た事ですが、「価格.com」「デジカメinfo」等の大手掲示板で、Windows向けには今なお「MS Pゴシック」が表示フォントとして指定されています。 2007年にWin Vista で「Meiryo(メイリオ)」が配布されてから10年になろうというのに。

「価格.com掲示板」のページのフォント設定を調べると、

body {
font-size: 13px;
font-family: "MS Pゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3",
"Hiragino Kaku Gothic Pro", Osaka, arial, verdana, sans-serif; }

となってます。 これでは、Windowsユーザーは「MS Pゴシック」をアンインストールしない限り、「MS Pゴシック」で表示される設定です。

そこで色々と調べて見ると、『低解像度のモニターでは「MS Pゴシック」は識別度が優れている』という事が、その理由らしいと私には思えて来ました。 当方のモニターは24inch 96dpi 程度で、今や時代遅れかもしれず、ここのハードコピーで私の感覚が伝わるかどうか。 でもフォントの考察自体は無駄ではないでしょう。


他のブラウザも同様ですが、Chrome でブラウザ画面の拡大率を100%~200%と操作して行くと、画面上の文字は当然拡大しますが、これは100%時のレンダリング像をグラフィックアプリの様に拡大しているわけではありません。 元の文字サイズと拡大率から表示サイズを計算し、文字を逐次レンダリングしなおしています。 この際、拡大率に応じた常に滑らかで美しい文字を表示するため、TrueType 等のフォントが用いられ、「MS Pゴシック」も「メイリオ」もその類になります。

しかし、描画すべき文字サイズが小さくなって来ると、両者の文字表示の仕方が異なってきます。「MS Pゴシック」は一定の文字サイズ以下でビットマップ文字を代用として使い、「メイリオ」は一貫して計算による描画をする仕様です。 ここに今回の問題の根がある様です。

サンプルとして、「価格.com 掲示板」を Chrome で表示して見ました。 このコメント欄は最初に挙げた様に「MS Pゴシック 13px」で表示されます。 その様子のハードコピーを下図の左側に、そして Stylist で「メイリオ」に改めた状態を右側に並べています。
b0174191_21461224.png

13pxでは文字が小さくて判りづらいので、これを2倍に拡大したのが下図です。 低解像度モニター(画素が大きい昔のワープロの様なもの)では下の様に見えると思います。
b0174191_22092474.png

「MS Pゴシック」はビットマップ表示で、いわゆるドット絵です。 少ないドットで漢字を表すために線を間引いたり、形をデフォルメした印象がありますが、線はくっきりしています。 直線部の幅は常に1dotです。
一方「メイリオ」は、バランスが良くて露骨な間引きはなさそうですが、アンチエイリアス(滑らかにみせる処理)で全体にぼやっと見えます。

これが、低解像度で「MS Pゴチック」は識別度が優れているといわれる内容でしょう。 私自身が昔使用していたノートパソコンは、文字にアンチエイリアスが無く、確かにそんな印象だった事を思い出します。


さて、現在の私のモニターでは、13px 文字は小さ過ぎて、ブラウザ拡大率は150%程度が欲しくなります。 この状態では、計算上で文字サイズは20px弱になりますが、文字列の幅を調べるとブラウザはかなり正確にレンダリングしている様です。 下図は、最初と同様に画面の文字の状態を比較したものです。
b0174191_22484708.png

この拡大率では、「MS Pゴシック」は未だビットマップ表示をしていて、13pxの時よりドット数を増した大きな文字を表示しています。 しかし、文字の線が1dotで細いために、私には非常に見難く感じてしまいます。「メイリオ」の方は、線が太くてデザインも綺麗で、明らかに読みやすいのです。「MS Pゴシック」は、拡大率を175%まで上げた途端に太い TrueType の表示となりますが、これは余り美しいとは思えません。

ちなみに、上図を更に拡大して「MS Pゴシック」のドットを数えると「18×18dot」でした。
b0174191_22320669.png


以上の事をまとめると、掲示板のフォント設定は、「低解像度の環境からの参照を確保し、高解像の環境はそれぞれの対処にゆだねれば良い」という考え方に思えます。 その結果、対処をしなければ、かなり読み難いのを我慢させられる人も多いというわけです。

ちょっとウェブの実情を調べてみました。
「価格.com」はトップページなど、掲示板タイプのページを離れると「メイリオ」が先頭で最優先の指定になっています。「Yahoo!」のトップページでは「MS PGothic」ですが、その分岐に入れば「ヤフーニュース」「オークション」等では「メイリオ」が優先で指定されてます。「Google」は、検索結果表示や各種サービスで「arial,sans-serif」が常に指定され、これはユーザー側のブラウザ指定に委ねた感があります。

このあたりから推測できそうな事は、出来るだけ広い層を意識した時に「MS Pゴシック」を指定するという事です。 公共機関が万民に対して公平でなければならないとされる様に。 しかし、レストランやショップは流行や独自のセンスの側に重きを置くというわけです。

2チャンネルの様なアスキーアート(文字絵) が文化として定着した掲示板では、表示フォントの持続を要請する部分もあるでしょう。 私が知らない理由で、他にも「MS Pゴシック」を優先する理由があるかも知れません。 詳しい方はぜひ教えてください。 こんな問題、アルファベット等の簡素なフォントで済む文化圏では、どうなってるのだろうなと思います。 ページを構成する際に、漢字圏は英語圏よりフォントを大きくする傾向があるかも知れませんね。



by Ataron | 2016-08-23 23:32 | PC環境(ハード/ソフト) | Trackback | Comments(0)