【ウェブリブログ】本番環境でのトライ＆エラーを避けてローカルで動作検証する方法

雑記 ウェブリブログ コツ・工夫


フリースペースにjavascriptのコードやらをゴリゴリ入れてるウェブリブログ・・・ちょっとした構成やプログラムの変更ならいいけど、大きく変えるのには本番環境でトライ＆エラーするのは、かなり怖い・・・まずは、ローカルで動作検証したいんだけど・・・ちょっと簡単じゃないよね？　⇒いえ、そんなコトはありません（＾＾；）

ちょっとの手間で安全に出来ます。



自分でやってる方法のメモを整理


☆　まずは、自分のページを表示する。

　　トップ・ページ、記事ページ、テーマページ・・・それぞれを引っこ抜きます。


☆　ブラウザの「ソース表示」でHTMLソースを引っこ抜き、ローカルに保存する。

　　　view-source:http://yasumin001.at.webry.info/


☆　ローカルファイルのフリースペース部分のコードを置き換える。


# CSSもいじりたい場合は、以下も。


☆　CSSソースを引っこ抜いてローカルに適切な名前で保存する。

　　（コピー元：ウェブリブログの[設定]⇒[オプション]⇒[CSS編集(上級者向け)]）





フリースペース・コードを埋め込む

ローカルHTMLソースにフリースペースに埋め込んでいるコードを入れ込みます。

自分の環境の場合、

フリースペース２が左側で表示順３、

フリースペースが右側で表示順４、

の設定になってます。


この時の実際の通過ロジックは以下の通りになります。

# サイドバー表示項目設定の
#「フリースペース２(サイド用)」で通るコード

        ｜
　　　（省略）
        ｜

  <!-- utilities2 start -->
  <div id="utilities2" class="unvisible">
      <script type="text/javascript"><!--
        forced_disp_ad2_top();
      // --></script>
      <script type="text/javascript" src="/sidebar.js"></script>
      <script type="text/javascript">
      <!--
        load_sidebar_info('yasumin001.at.webry.info');
      // -->
      </script>
      <script type="text/javascript"><!--
        include_compo_top_left(1);
      // --></script>
      </div>
      <script type="text/javascript"><!--
        include_compo_top_left(2);
      // --></script>
      </div>

# 自分の場合、引数３番が「フリースペース２」
# この番号は「サイドバーレイアウト設定」の表示順と対応してない
      <script type="text/javascript"><!--
        include_compo_top_left(3);
      // --></script>
      </div>

       <script type="text/javascript"><!--
        include_compo_top_left(4);
      // --></script>
      </div>
      <script type="text/javascript"><!--
        include_compo_top_left(5);
      // --></script>
      </div>

          ｜
　　　　　（省略）
            ｜


# サイドバー表示項目設定の
#「フリースペース(サイド用)」で通るコード
  <!-- utilities start -->
  <div id="utilities" class="unvisible">

      <div id="sidenews"></div>
      <script type="text/javascript"><!--
        forced_disp_ad_top();
      // --></script>
      <script type="text/javascript" src="/sidebar.js"></script>
      <script type="text/javascript">
      <!--
        load_sidebar_info('yasumin001.at.webry.info');
      // -->
      </script>
# 自分の場合、引数１番が「フリースペース」
# この番号は「サイドバーレイアウト設定」の表示順と対応してない
# 表示On/Offで順番が詰まってるのかと思えばそういうワケでもない。

      <script type="text/javascript"><!--
        include_compo_top(1);
      // --></script>
      </div>
      <script type="text/javascript"><!--
        include_compo_top(2);
      // --></script>
      </div>
       <script type="text/javascript"><!--
        include_compo_top(3);
      // --></script>
      </div>

          ｜
　　　　　（省略）
          ｜



フリースペース群に突っ込んでるコードを上記の対応する部分に埋め込むとOKです。

埋め込む時には、下の塊をまるごと消してコードを入れ込む形になります。




      <script type="text/javascript"><!--
        include_compo_top(3);
      // --></script>
      </div>

まぁ、外部ファイルにして取り込んだ方がスマートなのかも知れないけど（＾＾；）





ちょっと待って！　入れ込む箇所・・・みんな同じなの？？？

多分・・・違う可能性が高いとは思われます（＾＾；）

ここにヒントがあるんですが・・・結局コメントも半端なので良く分かりません。




https://webryblog.biglobe.ne.jp/include_logic.js



え～、じゃあ、どうやって、対応する箇所探すの？

闇雲に何番かなぁ～？って試すしかない？？？





軽く乱暴な方法で調べる（＾＾；）

ちょっと乱暴な確認方法があります。

ブラウザ上で[F12]キーを押すと、ブラウザがデバッグモードに入ります。

（ChromeもfirefoxもIEも同じ）



ウェブリブログでフリースペースのコードを実行する関数の箇所を特定する方法





上図の例のように下部のConsole画面に関数名と引数を打ち込みます。

画面上部にその実行結果が表示されます。



上の例だと、

include_compo_top_left(1)⇒カレンダー

include_compo_top_left(2)⇒テーマ

が対応して表示されてます。



更に、

include_compo_top_left(3)を入力すると、

左サイドバーに表示される内容が表示される・・・というコトになります。





（追記）もっと簡単な方法があった（＾＾；）

何か一度見つけた方法でずぅ～っとやってきたけど、

TOPページのソース中に下記のようなスクリプトソースがあり、

そこには正しいコメント付きで情報が生成されてた（＾＾；）




http://yasumin001.at.webry.info/index_css.js



実際に試さなくても大丈夫ですね。




☆
☆　TOPページ/テーマページで使われる
☆
# サイドバー表示項目設定の
#「フリースペース２(サイド用)」で通るコード

function include_compo_top_left(type) {
    switch (type){
      case 1:
        // カレンダー
        document.write("<div id=\"calendar\">\n");
        include_calendar();
        break;
      case 2:
        // テーマ
        document.write("<div id=\"categories\">\n");
        include_theme_category(theme_category_disp_num);
        break;
      case 3:
        // フリースペース２
        document.write("<div id=\"freespace2\">\n");
        include_free_space2();
        break;

# サイドバー表示項目設定の
#「フリースペース(サイド用)」で通るコード

function include_compo_top(type) {
    switch (type){
      case 1:
        // フリースペース
        document.write("<div id=\"freespace\">\n");
        include_free_space();
        break;
      case 2:
        // QRコード
        document.write("<div id=\"qrcode\">\n");
        include_qr_code();
        break;


☆
☆　記事ページで使われる
☆

# サイドバー表示項目設定の
#「フリースペース２(サイド用)」で通るコード
function include_compo_left(type) {
    switch (type){
      case 1:
        // カレンダー
        document.write("<div id=\"calendar\">\n");
        include_calendar();
        break;
      case 2:
        // フリースペース２
        document.write("<div id=\"freespace2\">\n");
        include_free_space2_news();
        break;


# サイドバー表示項目設定の
#「フリースペース(サイド用)」で通るコード
function include_compo(type) {
    switch (type){
      case 1:
        // テーマ
        document.write("<div id=\"categories\">\n");
        include_theme_category(theme_category_disp_num);
        break;
      case 2:
        // フリースペース
        document.write("<div id=\"freespace\">\n");
        include_free_space_news();
        break;





ローカルCSSと本番CSSはデバッグフラグで切り替える

本当ならば、最終的に




ウェブリブログの[設定]⇒[オプション]⇒[CSS編集(上級者向け)]に
ローカルCSSを反映する

というのが正しい方法なんですが、自分の場合は、

外部HP（FC2）とCSS共用の都合で、FC2にCSSファイルを置いてます。



ですので、

自分の場合は、後述のように、フラグで動的に切り替えるパターンとなります。



本当はここも整理しないと性能・レスポンスや、初期表示に影響するんだけど、

フリースペースコードが読まれてからCSSを再読み込みするという

むちゃくちゃな対応のまま放っておいてます（＾＾；）





お宅のサイト、最初の表示変だよね？

自分のサイトの初期表示、端末やネットが遅いと何か崩れた画面出ますよね？

それはこのせい。



原因は明らかに分かってるんだけど、



何かマトリックスっぽく見えて・・・ちょっとかっこよくない？？？

と（勘違いしながら）放っておいてます（＾＾；）





ちょっと話が逸れた。

デバッグフラグとトップページ、記事ページの判定フラグ

色々いじくる上で、記事ページとトップページの判定が必須です（自分には（＾＾；））

判定ロジックが強引ですが、まぁ、困らずに動いているので・・・






# 最初に読まれる「フリースペース２」にこんなコード

<script type="text/javascript"><!--

# ローカル・デバッグ時は１。
# 本番反映時は0にしてウェブリに貼り付け。

var isDebug=0;
    if(1==isDebug){

# フラグ反映忘れないように、デバッグ時はポップアップ表示。
        alert('Now in Debug Mode');
    }

# 次のコードはトップ・ページと記事ページの判断用。
# ブログ・テンプレートによってはこの方法は使えないかもしれない。
# 何か冗長なコードなのはスルーして（＾＾；）
    var isKiji=0;
    var o=document.getElementById('banner');
    if(null!=o){
    }else{
     var o=document.getElementById('subbanner');
     if(null!=o){
      isKiji=1;
     }
    }
    o=null;
// --></script>





CSSの動的切り替え

と言っても大層なモノではございません。






# CSSの切り替えはこんな感じで動的に（＾＾；）

if(0==isDebug){
document.write('<link rel="stylesheet" type="text/css" href="http://yasumin001.web.fc2.com/common/css/c01.css" />');
}else{
document.write('<link rel="stylesheet" type="text/css" href="file:///D:/03_BlogData/03_Fc2HpTop/common/css/c01.css" />');
}



javascriptもやってないし、CSSをちょっとだけローカルでいじりたい！という方は、

こんなコードをフリースペース２に入れればOKなのかな？

もちろん、file://の後は、自分で保存したCSSファイル名を指定する必要がありますね。





document.write('<link rel="stylesheet" type="text/css" href="file:///D:/03_BlogData/03_Fc2HpTop/common/css/c01.css" />');

そして、確認が終わったら、

ウェブリブログの[設定]⇒[オプション]⇒[CSS編集(上級者向け)]の画面にまるごと貼り付けて完了（＾＾）



パス名を作る小技

話は違うけど、パス名長いと作るの地味に面倒ですよね？



⇒エクスプローラのパスをブラウザにコピーしてブラウザで開いたら、そこに表示されるからそうでもない（＾＾；）

小技っていう程のもんじゃないけど・・・・





ローカル・テストでの相対パスがちとやっかい

大抵はベースURLが効くから問題無いんですが、





<base href="https://webryblog.biglobe.ne.jp" />



ウェブリの場合、CSS内のイメージが相対パス表記になってます。

CSSだけはfile:で絶対パス指定になってしまってるので、

そのパスが敬称されて存在しないイメージを指しているコトになってしまいます。



完全に見た目同一でローカル試験する為に、ワークコード挟んだり、

CSSを再設定で上書きしたり・・・気分でやり方変わってます。



行儀悪いけど（＾＾；）、ベースURI加えた絶対パスに変更してしまうのがラクチン。





background:url(../../images/article/random_eco_icon1.gif) no-repeat left bottom;

↓

background:url(https://webryblog.biglobe.ne.jp/images/article/random_eco_icon1.gif) no-repeat left bottom;



あ、ちなみに自分がブログ開設当初からベースにしているテーマの原本CSSはこれ。





自分で選んだブログ・テーマのCSS 
https://webryblog.biglobe.ne.jp/css/articles.new/random_eco_n.css 

 
更に上流の共通CSS 
https://webryblog.biglobe.ne.jp/css/articles.new/common.css



ブログ初めてなのに、TOPページと記事ページでイメージの高さが変わるという、

ちょっと面倒くさいテンプレートを選択してしまってたようです。

おかげで、ブログ始めた当時、ちょっとはまりました（＾＾；）

みる？　⇒CSSの#banner,#subbannerで画像を変えてはいけないデザインテンプレート

まぁ、ずっと使ってきてしまってたので今更変えるのが面倒くさい。

ぐちゃぐちゃにしてたCSSの整理に手をつけるハメになってしまうし（＠＠）





話逸れついでに・・・

！importantが指定されちゃってる！？

過去にCSSを色々いじってる内に、

どうにもCSSの変更が反映されないコトがありました。



なんでだぁ～？？？



!importantのせいでしょ？

そうなんだよ、ひなちゃん！　詳しかったの？？？



プログラム言語だと、=はイコールで「同じ」、!=はイコールの否定で「違う」って馴染んでたから、importantは「重要」だから、!importantは「重要じゃない！」って感覚になって違和感を覚えるくらい詳しいわよ？

まじか・・・





さて・・・しょうもない小劇場は終わりにしてと・・・



何かしら理由があるのでしょうけど、!importantが指定されている要素がちらほら。



なんぞコレ？

あちこち見て回ると、設定を変えられないようにする為の強制というような説明。



え～、それってどうしようもないの？



・・・と、試しに!importantで再度指定してみると・・・変えられた！



正確には、イージー・ミスで変更しないように、重要なポイントに指定するもの・・・

ってな感じなんでしょうか？



ただ!important自体を継承解除する方法が無いと結構面倒くさい。

階層構造の中で一時的に変更したい場合でも延々とそれを意識しなければいけない・・・



まぁ、通常はそうそう引っ掛かる問題でもないんですけど（＾＾；）





・・・と、ここまではTOPページでのローカル試験を前提にしてきました。

記事ページの場合

記事ページの場合、フリースペース(メイン用)(=freespace4)が増えますが、

このfreespace4は、すでにHTML内部に展開して埋め込まれているので、

ローカル確認用としては、何もする必要はありません。



TOPページ同様に、使っているサイドバーに対応するフリースペースを

置き換える作業だけすればOKです。



なんでfreespace4だけが生展開されているのか？

理由は分かりません。



ただ、こういう仕組みなので、




フリースペース(メイン用)だけ、変更反映が遅くなる　（バッチ処理？）

というコトにも繋がってるんだと思います。





# [サイドバー表示項目設定]⇒フリースペース(メイン用)
# 上記までのパターンと異なり記事下の本フリースペースは、
# freespae4としてソースに展開されています。

    <!-- free space E04 -->


　　　　　（ここの間にコードが展開されています）


    <!-- blog-foot start ?>
# 元テンプレートによっては、区切りと見なせる下のコメント行が違うかもしれません。




～おわり by yasumin001 (やすみん001) / 天人鳥のいる暮らし(Life with pin-tailed whydahs/vidua macroura)～












ブログ気持玉




クリックして気持ちを伝えよう！


ログインしてクリックすれば、自分のブログへのリンクが付きます。


→ログインへ









なるほど（納得、参考になった、ヘー）





驚いた





面白い





ナイス





ガッツ（がんばれ！）





かわいい










気持玉数 ： 0












この記事へのコメント






    




コメントを書く













この記事へのトラックバック



マトリックスっぽくて良いよね？　そう記事書いた舌の根も乾かぬ内に・・・

Excerpt: ブログの初期表示のゴミ・・・マトリックスっぽくて良いよね？　そう記事書いた舌の根も乾かぬ内に・・・だんだんと凄く気になってきたので思い切って直しちゃいました（＾＾；） 【ウェブリブログ】本番環境でのト..

Weblog: 天人鳥のいる暮らし

Tracked: 2015-03-05 21:28