Studio TA Subsite の案内とお知らせ

価格.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」ボタンなどが同ページにあり、紛らわしいので注意ください。



[PR]
# by Ataron2 | 2018-07-28 16:17 | システム覚え書き | Trackback | Comments(0)