2013年12月20日金曜日

Windows UpdateのCPU使用率が長時間100%になる

これは、ここ数ヶ月間の WindowsXP の月例 Windows Update で起きている、CPU使用率が長時間 100% になる現象です。この問題は WindowsXP をシングルコアCPUで使用している環境で発生するようで、長時間 CPU 使用率が 100% の状態が続き、その間のPC動作が非常に重くなり通常操作が困難な状態になってしまいます。またこの現象は Windows Update が終了すると収まります。

先月までは「古いPCだから仕方が無いなぁ」と諦め状態でこの現象を受け入れていましたが、今月の症状は、先月に増して長時間に感じたので解決策を調べてみました。分ったことを次月に役立てることができるように書き留めておきます。

原因は

「Internet Explorer の累積的なセキュリティ更新プログラム」の検出処理に起因する問題とされています。

対策は

「Internet Explorer の累積的なセキュリティ更新プログラム」を事前に単独インストールすることで回避できるようです。

方法は

実際に私が行った手順を次に掲げます。

  1. Windowsの自動更新を無効にする

    自動更新が始まるとSvchost.exeの CPU 使用率が 100% になってしまい操作に支障をきたすため一時的に無効にします。

  2. 適用する更新プログラムを取得する

    1. マイクロソフトのセキュリティパッチ情報

      マイクロソフトのセキュリティ TechCenter のウェブサイトに行き最新セキュリティ情報から、適用する更新プログラムの情報を調べます。項目のタイトル名は、例えば当月なら「2013 年 12 月のセキュリティ情報」です。

      セキュリティ TechCenter:
      http://technet.microsoft.com/ja-jp/security/bb291012.aspx

    2. 当月の「Internet Explorer 用の累積的なセキュリティ更新プログラム 」の番号を調べる。

      例えば、2013年12月の場合は

      Internet Explorer 用の累積的なセキュリティ更新プログラム (2898785) このセキュリティ更新プログラムは非公開で報告された 7 件の Internet Explorer に存在する脆弱性を解決します。・・・(以下省略)
      なので、番号は2898785です。

    3. 該当する更新プログラムを取得する。

      更新プログラムは Microsoft Update カタログか、Microsoft ダウンロード センターから取得します。

      例えば、更新プログラム番号が2898785WindowsXP用を検索するなら、キーワードにKB2898785 XPと入れて検索します。

      検索結果は複数表示されます。使用している CPU が x86 か x64 でファイルが違います、さらに適用する Internet Explorer バージョンでも IE6 IE7 IE8 用でファイルが違うので注意が必要です。ここから、使用環境に適合した更新プログラムをダウンロードします。

  3. 個別にIEの更新を適用する。

    先ほどダウンロードした更新プログラムを単独で実行しインストールします。

  4. Windowsの自動更新を有効に戻す。

    自動更新を行うため有効にします。

  5. 自動更新を行う。

    Microsoft Updateを実行し通常の自動更新を行います。事前に「Internet Explorer 用の累積的なセキュリティ更新プログラム 」を個別インストールしておくことで、自動更新がスムーズに進みました。

少し手間がかかりますが、今月はこの方法でうまくいきました。WindowsXP の残り期間も後わずかなので、そろそろ Windows7 へ移行する準備に取り掛かろうと思っています。



参考
「Windows XP や Windows Server 2003 環境において、Windows Update 実行時に Svchost.exe の CPU 使用率が 100 % となる、時間を大幅に要する」:日本マイクロソフト セキュリティ サポート部門 WSUS 担当チームのブログ

2013年12月16日月曜日

Firefox26.0 がリリースされました。

デスクトップ版Firefoxのダウンロード
http://www.mozilla.jp/firefox/download/
デスクトップ版Firefoxのリリースノート
http://www.mozilla.jp/firefox/26.0/releasenotes/

デスクトップ版Firefox、今回の更新では

新機能では、Flashを除くすべてのプラグインの起動にクリックが必要になり、webサイト上でプラグインを有効にするかどうかを選択できるようになりました。 他のプラグインの場合も同様に、アドオンマネージャで「実行時に確認する」を設定することで管理できるようになります。



開発ツールの更新と追加された機能では



インスペクタ

CSS擬似要素のプロパティを見ることができるようになりました。



デバッガ

キャッチされなかった例外でデバッガを一時停止できるようになりました。



webコンソール

webコンソールでのテキスト選択が容易になりました。



レスポンシブデザインビュー

3つの機能が追加改良されています。

  • タッチイベントのシミュレート:
    マウスイベントをタッチイベントに変換します。必要な場合はページを再読み込みします。
  • スクリーンショット:
    レスポンシブデザインビューのスクリーンショットを保存します。
  • 精密なリサイズ:
    Ctrlを押しながらマウスを操作することで精密なリサイズが可能になります。


開発ツール画面の拡大縮小が可能になりました。

拡大はCtrl + +、縮小はCtrl + -、拡大縮小のリセットはCtrl + 0です。

2013年12月3日火曜日

TiddlyWikiをレスポンシブデザインぽくする

いろんなメモを手軽に書きとめておくのに、とても便利なツールが TiddlyWiki です。 使い始めて 2 年ほどですが、今では便利で手放せないツールになっています。

( 追記:Dec 22, 2014
   現在は最新版の TiddlyWiki5 と区別するため、 TiddlyWiki Classic と呼ばれています。
  http://classic.tiddlywiki.com/ )

半年前にノート PC を新調(Windows XP のサポート終了が近づき止むを得ず。)して、画面サイズがスクエア液晶からワイド液晶に変わったことで TiddlyWiki の使い勝手に影響が出てきました。 その理由は画面幅が広がったのをいいことに、ウインドウを左右に並べて使うことが増えたからです。

(余談ですが、そんなに広い画面ではありません。 14 インチ 1024 x 768 から 14 インチ 1366 x 768 に変わっただけなので、物理サイズでは縦寸法が狭くなり横に広がった感じです。使い始めの時は少し後悔しましたが最近はだいぶ慣れました。 Retina ディスプレイの 15 インチ MacBook Pro がほしいです。)

TiddlyWiki の画面レイアウトは標準で 3 カラム構成です。画面左から 「メインメニュー」、「tiddlerコンテンツ」、「サイドバー」 とレイアウトされています。画面幅いっぱいにウインドウを広げて使うときは問題ないのですが、ウインドウ幅を狭めて使うときには左右のカラムがとても邪魔になります。 というのも、画面幅に応じて変化するのは中央の「tiddlerコンテンツ」の領域なので、幅が狭くなると使いづらくなってしまうのです。 

幅 600 px だとこんなかんじです。 ウインドウ幅の半分以上がメニューとサイドバーに占領されてしまいます。

そこで、ウインドウサイズに合わせてカラム数を可変するようにしてみました。  方法は、カスタムスタイルシートに css を追加、メディアクエリーでウインドウ幅に応じたメニューの位置やカラム数を変更しています。 ブラウザは Firefox を使用しています、IE8 だとうまく動かないかもしれません。

手順

  1. サイドバーの隠し tiddler タブMore-Shadowedから「StyleSheet」を開きます。

  2. 開いた「StyleSheet」に以下の内容を追加します。

  3. /*{{{*/
    #sidebar {
        right: 10px;
    }
    @media screen and (max-width: 1000px) {
      .headerForeground {
        padding: 1em 0px 1em 1em;
      }
      .headerShadow {
        padding: 1em 0px 1em 1em;
      }
      #mainMenu {
        float: right;
        width: 20%;
        text-align: left;
        position: relative;
        line-height: 1.4em;
        padding: 1em 0.5em 1em 0.5em;
        font-size: 1em;
        margin-right: 5px;
        margin-top: 10px; 
      }
      #sidebar {
        float: right;    
        right: 10px;
        width: 20%;
        margin-top: 130px;
        line-height: 1.4em;
        padding: 1em 0.5em 1em 0.5em;
        font-size: 0.9em;
      }
      #displayArea {
        margin: 1em 1em 1em 1em;
        float: left;
        position: absolute;
        width: 75%;
      }
      img{
        max-width: 100%;
        height: auto;
      }
    }
    @media screen and (max-width: 760px) {
      .header {
        height: 50px;
      }
      .siteTitle {
        font-size: 2em;
      }
      .siteSubtitle {
        display: none;
      }
      #backstageButton {
        top: 22px;
      }
      #mainMenu {
        float: left;
        width: 45%;
        text-align: left;
        margin-left: 10px;   
      }
      #sidebar {
        display: none;
      }
      #displayArea {
          margin-top: 0px;
          float: left;
          position: relative;
          width: 97%;
      }
    }
    /*}}}*/
    

これで、ウインドウサイズに合わせてカラム数を可変できるようになりました。 ただし、このままでは「サイドバー」にアクセスしづらいのでメニュー表示用の tiddler を作成しておきます。


メニュー表示用 tiddler を作成

  • 新規 tiddler を作成します。
  • 作成する tiddler のタイトル

    menu
    

    コンテンツに以下を追加します。

    <<search>>
    
    <<closeAll>> <<permaview>> <<newTiddler>> <<newJournal "DD MMM YYYY" "journal">> <<saveChanges>> <<slider chkSliderOptionsPanel OptionsPanel "options »" "Change TiddlyWiki advanced options">>
    
    <<slider chkSideBarTabsPanel SideBarTabs "SideBarTabs »" "View SideBarTabs">>
    

上記 menu をメインメニューに追加します。

  1. サイドバーの隠し tiddler タブMore-Shadowedから、「MainMenu」を開きます。

  2. メインメニューに 「menu」 へのリンクを追加します。

  3. [[menu]]
    

これで、画面左上のメインメニューのリンク「menu」から「サイドバー」にアクセスできるようになります。


画面レイアウト

ウインドウサイズを変えると、こんなかんじになります。


3 カラムレイアウト


2 カラムレイアウト


1 カラムレイアウト

追記:May 29, 2014
実際の動作がわかるように tiddlyspot に登録しました。 babooshka.tiddlyspot.com で確認できます。

追記:Jul 07, 2016
その後の改良版はこちら icm7216.github.io/MyTiddlyWiki/ に置いています。




改良その1:使いやすいタブメニューにする

上記のメニュー tiddler は、メニューコンテンツをひとつの tiddler に纏めただけなので見た目があまりよくありません。 そこで「tabsマクロ」を使って、タブメニューにしてみました。

TiddlyWiki の組み込みマクロ「tabsマクロ」は、タブを使って tiddler を表示するときに便利な機能です。 このマクロはとても便利なのですが、切り替えるタブごとに表示する tiddler を作る必要があります、そんなわけでチョト面倒です。 そんなときは「PartTiddlerPlugin」を併用すると、ひとつの tiddler だけでタブを実現できます。

上画像のタブメニューはこのような記述になっています。 前半部分は表示するタブのための記述、後半部分はタブを選択したときに表示する内容の記述です。 先ほど作った「menu」tiddler を書き換えて使います。

<<tabs txtMenuTab
  "file" "newTiddler  saveChanges" ./menu1
  "search" "search" ./menu2
  "SideBarTabs" "View SideBarTabs" SideBarTabs
  "about" "about" ./menu3
>>
<part menu1 hidden>
!File Menu
@@color:#000;background-color:#FFF;
<<newTiddler>> <<newJournal "DD MMM YYYY" "journal">> <<saveChanges>> <<closeAll>> <<permaview>> <<slider chkSliderOptionsPanel OptionsPanel "options »" "TiddlyWiki options">>
@@
</part>
<part menu2 hidden>
!Search Menu
<<search>>
</part>
<part menu3 hidden>
!about
[[TiddlyWiki|http://www.tiddlywiki.com/]] version <<version>>
</part>

同じタブメニューを「PartTiddlerPlugin」を使わずに、個別に tiddler を作るとこのようになります。

  • タブメニューmenuのtiddler
  • <<tabs txtMenuTab
      "file" "newTiddler  saveChanges" menu1
      "search" "search" menu2
      "SideBarTabs" "View SideBarTabs" SideBarTabs
      "about" "about" menu3
    >>
    
  • menu1の表示用tiddler
  • !File Menu
    @@color:#000;background-color:#FFF;
    <<newTiddler>> <<newJournal "DD MMM YYYY" "journal">> <<saveChanges>> <<closeAll>> <<permaview>> <<slider chkSliderOptionsPanel OptionsPanel "options »" "TiddlyWiki options">>
    @@
    
  • menu2の表示用tiddler
  • !Search Menu
    <<search>>
    
  • menu3の表示用tiddler
    !about
    [[TiddlyWiki|http://www.tiddlywiki.com/]] version <<version>>
    

タブが増えれば、同様に表示用の tiddler も増えることになるので、この「PartTiddlerPlugin」の便利さがよくわかりますね。

「PartTiddlerPlugin」はこのリンクからインポートできます。
abegoExtensions - UdoBorkowski's Extensions for TiddlyWiki


改良その2:タブメニューに、よく使うタグを登録する

TiddleWiki のタグ機能は tiddler の分類にとても便利です。 よく使うタグをこのメニューに登録しておけば、tiddler へのアクセスが便利になります。

たとえば、タグ名「memo」を登録する場合ならこのように記述します。 タグ名の一覧表示には「listマクロ」を使っています。

<<tabs txtMenuTab
  "file" "newTiddler  saveChanges" ./menu1
  "search" "search" ./menu2
  "SideBarTabs" "View SideBarTabs" SideBarTabs
  "about" "about" ./menu3
  "memo" "memo" ./menu4
>>
<part menu1 hidden>
!File Menu
@@color:#000;background-color:#FFF;
<<newTiddler>> <<newJournal "DD MMM YYYY" "journal">> <<saveChanges>> <<closeAll>> <<permaview>> <<slider chkSliderOptionsPanel OptionsPanel "options »" "TiddlyWiki options">>
@@
</part>
<part menu2 hidden>
!Search Menu
<<search>>
</part>
<part menu3 hidden>
!about
[[TiddlyWiki|http://www.tiddlywiki.com/]] version <<version>>
</part>
<part menu4 hidden>
!memo
<<list filter "[tag[memo]] [sort[-modified]]">>
</part>

タブメニューが、こんなかんじになります。 これでウインドウ幅が狭いときの使いにくさが改善できました。