753Note

2. VAIO環境

2-6. Base Tools インストール

このページの内容

  1. Windowsアクセサリ
  2. 8GadgetPack
  3. Firefox (下記アドオンを含む)
    Local Filesystem Links
    UnMHT
    iCloud Bookmark
  4. iCloud for Windows
  5. Flexible Renamer
  6. Sizer
  7. TextSS
  8. WinMerge
  9. ゆっくりスクロール

1. Windowsアクセサリ

1-1

VAIOのデスクトップ。
デスクトップパターンは、ずっとデフォルトのままです。

1-2

「Windowsアクセサリ」は「アプリ」画面の右の方にあります。
使用したいアプリをクリックで起動します。

【電卓】

1-3: タスクバー
  電卓、メモ帳、Snipping Tool、ペイント
1-4

起動したアプリのアイコンがタスクバーに現われますので、常駐させるものはピン留めします。
画面サイズなどのちょっとした計算に、やはり「電卓」があると便利です。

【メモ帳】

1-5
1-6

ホームページのHTML文書の作成にも「メモ帳」を使っています。
「書式」は「右端で折り返す」にして、「フォント」は好みによると思いますが、このように設定しています。
HTMLには反映されませんので、作業上の見やすさだけの話です。

【Snipping Tool】

1-7
1-8

「Snipping Tool」もHTMLに貼り込む画像を撮るためにに欠かせないツールです。
「自由形式」「四角形」「ウィンドウ」「全画面」の領域切り取りが選択できます。
「Prt Sc」キーによるスクリーンショットは動作が不安定なので、こちらを使っています。
変な話ですが、実はこのSnipping Tool自身のウィンドウはSnipping Toolでは撮れません。 Bandicamというキャプチャソフトを利用しました。

【ペイント】

1-9: QuickTime Player
1-10: ペイント

「ペイント」もちょっとした画像編集のために欠かせないツールです。
例えば、QuickTime Playerに読み込んだPICT形式の絵をコピーして「ペイント」に貼り付け、サイズを変更してjpg形式で保存する、といった作業がスムーズに行なえます。

2. 8GadgetPack

Archives/VAIO Base Tools/8GadgetPack/
2-1
(断り書き)
実際の作業環境では、図の左上にある#付きのリンクをクリックすると対象のフォルダが開かれるので、視認しながらダイレクトに作業が進められて便利です。
ただし、Firefoxアドオン「Local Filesystem Links」の特別な機能であり一般のWeb環境では機能しないので、単なるディレクトリ表示と捉えてください。

【8GadgetPack本体のインストール】


v11とv25がありますが、v11の方が相性がいいようです。
「8GadgetPackSetup v11」を開いて、「8GadgetPackSetup.msi」をダブルクリックします。

2-2
2-3

セットアップウィザードが開くので、「Install」。

2-4

「Finish」。

2-5

現われたサイドバーを右クリックして「7 Sidebarを閉じる」。
各ガジェットも別のものに置き換えますので、それぞれ×印で削除します。
画面を右クリックして「ガジェット」を選択します。

2-6

「8GadgetPack」に 含まれているガジェットが3ページにわたって表示されます。
使用したいガジェットをダブルクリックすればそれがデスクトップに表示されます。
ここでは、パックに含まれていないお気に入りのガジェット4個を追加インストールします。

【お気に入りガジェットのインストール】


【S CLOCK-A】


「htSClockA.gadget」をダブルクリックします。

2-7

「インストールする」。

2-8: S CLOCK-A

デスクトップにガジェットが表示されます。
「ガジェット」の一覧には「S CLOCK-A」として追加表示されます。

【スクロールカレンダー】【CPU & MEM meter】【Sushi's DriveInfo】



2-9: スクロールカレンダー
2-10: CPU & MEM meter

2-11: Sushi's DriveInfo

同様に「htCalendar.gadget」「htCpuMem.gadget」「switch_driveinfo.gadget」から、
「スクロールカレンダー」「CPU & MEM meter」「Sushi's DriveInfo」を追加表示します。

2-12

好みに応じて設定を調整します。
モノクロで、透明化して・・・、こんな感じ。

3. Firefox

Firefoxでは、「Local Filesystem Links」と「UnMHT」という便利なアドオン(機能拡張)を使用したいのですが、そのためにはFirefoxのバージョンを52.7.3esrにしておく必要があります。
デフォルトの設定のままでは、Firefox本体もアドオン側も自動更新されてしまい、それらのアドオンが使えなくなってしまいます。
そのためインストールとインストール後の設定には注意が必要です。
以下、Firefox本体と3つのアドオンのインストールと設定を行なっていきます。
まず、インターネット接続を切ります。

【Firefox】

フォルダ内の「Firefox Setup 52.7.3esr.exe」をダブルクリックします。

3-2
3-3

「カスタムインストール」を選択します。

3-4
3-5

「Maintenanceサービスをインストールする」のチェックを外します

3-6
3-7

ここはデフォルトのままで構いません。

3-8
3-9

「設定をインポートしない」を選択します。

3-10
3-11

「Firefox の起動時に必ず確認する」のチェックを外して、「Firefoxを既定のブラウザーに設定する」を選択します。
「Firefox へようこそ」の画面は「×」で閉じます。

3-12

スタートページ画面。

3-13

「オプション」の「詳細」を開きます。
「Firefox の更新:」から「更新の確認は行わない」を選択します。
「次のソフトウェアを自動的に更新する:」の「検索エンジン」のチェックを外します。

【Local Filesystem Links】

「local_filesystem_links-0.99.62-an+fx.xpi」をFirefoxのウインドウにドラッグ&ドロップします。

3-15

「このアドインは壊れているため、インストールできませんでした。」と表示されます。

3-16

新しいタブを開き、アドレスバーに「about:config」と入力して、Enterキーを押します。
「危険性を承知の上で使用する」をクリックします。

3-17

「xpinstall.signatures.required」をダブルクリックして「値」を「true」から「false」に変更します。

3-18

再度「local_filesystem_links-0.99.62-an+fx.xpi」をFirefoxのウインドウにドロップして「インストール」します。

3-19

この画面が表示されます。
メニューバーに「Local Filesystem Links」のアイコンが追加表示されています。

3-20

「Windows」をクリックすると、ダウンロード画面が現われます。
このファイルは予めダウンロード済みなので「ファイルを保存」は不要です。


「native-app-setup.exe」をダブルクリックで実行します。

3-22
3-23

「Only current user」を選択して、「Next」「Next」。

3-24
3-25

「Install」「Finish」。

3-26

メニューバーのアイコンから「Change settings...」を選択します。

3-27

「自動更新」の設定を「オフ」にします。

3-28

「Local Filesystem Links」のその他の機能について説明しておきます。

「Enable links to local executable files」
今は「フォルダ」を対象に説明をしていますが、対象は「ファイル」でも構いません。
そして、対象ファイルを実行したい場合にはここにチェックを入れておくようです。

「Enable link icons」
チェックを入れておくと前の図に示したようにリンクの横にフォルダアイコンが表示されます。
ただし、このアイコンをクリックした場合には、リンク先のフォルダあるいはファイルが含まれる(一つ上層の)フォルダが表示されます。
誤作動?でフォルダが多重に開く場合があり、このチェックは外しておいた方がいいようです。

「Default link text click behaviour」
ここは、リンク(テキスト部分)をクリックした場合の挙動に関する設定です。
現在は「Open link directly」にチェックが入っているので指定したフォルダ自体が開かれます。
これを「Reveal link (open containing folder)」にするとリンク先のフォルダあるいはファイルが含まれる(一つ上層の)フォルダが表示されます。英文()内の説明どおりです。
ここも、現状の設定のままでいいと思います。

少し分かりにくいので、実際にやってみないと理解できないかも知れません。

【UnMHT】

「unmht-8.3.2-an+fx+sm+tb.xpi」をFirefoxのウインドウにドラッグ&ドロップします。

3-30

インストールの確認を求められるので、「インストール」。

3-31

インストールは瞬時に終わり、メニューバーにUnMHTのアイコンが追加表示されます。

3-32

右上にある設定メニューから「アドオン」を開きます。
「拡張機能」UnMHTの「詳細」をクリックします。

3-33

「自動更新」を「オフ」にします。

「Firefox」の「UnMHT」に固執している理由は、MHTからURLが容易に参照できる点です。
分かりにくいと思いますので、例で示します。

3-34

Firefox の UnMHTを使用して、AppleのサイトからQuickTime 7.7.8をダウンロードした時のブラウザ情報がMHT(mhtファイル)として残っています。
そのファイルをダブルクリックして開いたところです。

3-35

urlの入力/表示欄にある「UnMHT」のアイコンから、このMHTの情報を見ることができます。
履歴として、ダウンロードした日時やダウンロード先のurlが残っています。
urlをクリックしてみます。

3-36

現在のサイトに飛んで、最新の状態を確認することができます。
バージョンが7.7.9のものがダウンロードでき、記事も更新されているようです。
ダウンロードを行なったら、またこのページを「MHTとして保存」しておくことができます。

【iCloud Bookmark】

「icloud_bookmarks-2.1.10-an+fx-windows.xpi」をFirefoxのウインドウにドラッグ&ドロップします。

3-38

インストールの確認を求められるので、「インストール」。

3-39

メニューバーにiCloud ブックマークのアイコンが追加表示されます。

3-40

設定メニューから「アドオン」を開きます。
「拡張機能」iCloud ブックマークの「詳細」をクリックします。

3-41

「自動更新」を「オフ」にします。

3-42

これでFirefoxの設定は終わりです。
Firefoxをタスクバーにピン留めしておきます。
ここで、インターネット接続を元に戻します。

以降、Firefoxをメインのブラウザとして使用します。

3-43

適当なhtml書類を選択して、右クリックから「既定のプログラムの選択...」を選びます。

3-44

Internet ExplorerからFirefoxに変更します。

3-45

同様に、mht書類に関しても、既定のプログラムにFirefoxを選択します。
Firefoxが表示されていない場合は「その他のオプション」から探します。

4. iCloud for Windows

ブラウザはFirefoxを既定(常用)のプログラムとし、IEとChromeを併用しています。
お気に入りの内容はスマホも含めて同期させておきたいので、iCloudを使用しています。
ただし、各ブラウザの使用状況や同期を行なうタイミングによってはうまく同期できない場合があるので、必ず以下のステップを踏むようにしています。

 1. Firefoxの「バックアップ」で、現状のブックマークをjsonファイルに保存
   (すでにリカバリー用にバックアップを作成してあればそれを使用)
 2. Firefoxを含むすべてのブラウザのブックマークやお気に入りを一旦すべて削除
 3. iCloudの「ブックマーク」をすべてのブラウザを選択した状態で「適用」
 4. Firefoxの「復元」で、保存しておいたjsonファイルを復元

尚、Firefoxのブックマークの「バックアップ」と「復元」はそれぞれ以下の場所にあります。
 "Alt"キーでメニューを表示
  ブックマーク/すべてのブックマークを表示/インポートとバックアップ/バックアップ
  ブックマーク/すべてのブックマークを表示/インポートとバックアップ/復元

その準備が出来ているとして話を進めます。


「icloudsetup.exe」をダブルクリック。

4-2
4-3

「・・・同意します」を選択。
自動更新のチェックは外して、「インストール」。

4-4
4-5

「終了」。「はい」。
VAIOが再起動されます。

4-6

 

「Apple ID」と「パスワード」の入力を求められます。


「Apple ID」と「パスワード」を入力して、「サインイン」。

4-8

「確認コード」を入力して、「次へ」。

4-9

「送信しない」。

4-10

iCloudの設定画面が表示されます。
「ブックマーク」の「オプション」から3つのブラウザを選択します。
「ブックマーク」以外のチェックは外して、「適用」「閉じる」。
Internet ExplorerとChromeがiCloudブックマークのインストールを求めて来たら、指示に従って機能拡張に追加します。

4-11

うまくいかない時もありますが、ブックマークのバックアップをとっておけば何とかなります。

5. Flexible Renamer

ファイル名を一括して変更する作業には欠かせません。


「FlexRena84.zip」をダブルクリックします。
デスクトップに作成される「FlexRena84」フォルダを(C:)の「Program Files」フォルダにコピーします。

5-2

「続行」。
ここで、デスクトップの「FlexRena84」フォルダは削除しておきます。
コピー先の「FlexRena84」フォルダ内の「Flexible Renamer.exe」をダブルクリック。

5-3

これだけで、すぐに使える状態になります。

5-4

ファイル、フォルダが選択できますが、ここではファイルを対象に使い方を説明します。
 1) 左カラムの階層ツリーから対象のフォルダを選んで、
 2) 中央部のカラムで名称変更のルールを設定して、
 3) 右カラムでファイル名がどのように変更されるかを確認する。
名称変更のルールには、文字列や数字の追加、削除、変換など数多くのメニューがあります。
一度に複雑なことをせずに、いくつかのステップに分けて確認しながらやるのがコツです。
例えば、まだ作業中で仮の名称の付いたファイルを、連番付きの正式名称に変える場合です。
まず、ファイル名の頭に01から始まる2桁の数字01,02,03・・・を付けておいて、
今までの文字列を削除して、新しい文字列を付ける、といった感じです。
確認しながらやればミスもなく、手打ちでやるよりはずっと早くできます。

6. Sizer

デスクトップに表示するウィンドウのサイズを指定して変更できます。


「sizer4_dev570.msi」をダブルクリックします。

6-2
6-3

「Start Sizer every time Windows starts」にチェックを追加します。

6-4
6-5

「Install」、「Finish」。

6-6

デスクトップに作成したショートカットやツールバーのアイコンをクリックしても、起動済みですと言われるだけで、操作や設定の仕方が分からない場合があります。
その場合にはタスクバー内に作成されている「Sizer」の十字の矢印アイコンを右クリックして「Configure Sizer...」を開くことができます。

6-7

「Menu」の「SizerMenu」には既にデフォルトで色々な画面サイズが並んでいます。
編集、追加、削除などで多様なカスタマイズが出来ますが、取りあえずブラウザ用に「Brawser 1440x900」、Explorer用に「Explorer 1280x720」という項目を追加しました。

6-8

ウィンドウの右上部にあるウィンドウアイコンあるいはウィンドウの縁を右クリックするとメニューが現われます。ここからも「Configure Sizer...」に行けます。
Explorer用に作成した「Explorer 1280x720」をクリックすると、ウィンドウがどのような状態にあっても、指定されたサイズで画面中央位置に配置されます。
カスタマイズで位置や移動量も指定できるようですが、取りあえずこれだけできれば十分です。
Firefoxのブラウザに対してもカーソルを左上か右下のコーナーに持って行き、斜め両向きの矢印を出した状態で右クリックすればメニューが表示されることを発見しました。
少しうれしい気持ちになりました。

7. TextSS

前述の「Flexible Renamer」がファイル名の一括変換を行なうのに対し、この「TextSS」はファイル内のテキストを一括変換するツールです。
このツールも、HTMLの編集作業にはたいへん役に立ちます。


「tss521.zip」をダブルクリックします。
デスクトップに作成される「tss521」フォルダを(C:)の「Program Files」フォルダにコピーします。
コピー先の「tss521」フォルダ内にある「TextSS.net.exe」をダブルクリックで起動します。

7-2

デフォルトの設定のままで「決定」とします。

7-3

これで、使える状態です。
あるフォルダに置かれたHTML書類に対して、語句の一括変換を行なう場合を想定します。
「拡張子」から「*.htm;*.html」を選択して、「フォルダの追加」をクリックします。

7-4

「3Books」というフォルダを対象にすることにします。「OK」。

7-5

「3Books」フォルダには25個のhtml書類があることが確認できます。
「次へ」をクリックします。

7-6

「Aladdin」とすべきところを誤って「Aladin」とした箇所をすべて修正したいと思います。
「検索する文字列」に「Aladin」、「置換する文字列」に「Aladdin」と入力して、「次へ」をクリックします。

7-7

デフォルトの設定のまま「開始」します。
「はい」。

7-8

最初の置換候補箇所が表示されますので、確認をして「置換する」を実行します。
「ファイル全置換」の選択も可能ですが、慣れないうちは一つ一つ確認する方が安全です。

7-9

置換が完了するとこの画面が出ます。「OK」。

7-10

2つのファイルに計11箇所の変更が加えられたことが分かります。

このように、どのファイルが対象かが分からなくても洩れなく検索してくれるので便利です。
ただ、気を付けなければならないのは非可逆性です。
"「Aladdin」とすべきところを誤って「Aladin」とした箇所をすべて修正したいと思います。"
「Aladin」のままでいい箇所まで変更してしまうと、それを探して元に戻すのは大変です。
このアプリにはその復元の機能もありそうですが、よく確かめてはいません。

7-11

あと私の場合、このアプリを(C:)の「Program Files」に入れた関係で、ある時からこのようなエラーが出るようになってしまいました。

7-12

「tss521」内にある「TextSS.net.exe」の「プロパティ」を開いて、「互換性」の「管理者としてこのプログラムを実行する」にチェックを入れました。
これで、エラーメッセージが出なくなりました。

「TextSS」の使い方は公式サイトに詳しく解説してあります。
 [参考情報]TextSS.net - 公式サイト

8. WinMerge

「WinMerge」は2つのファイルやフォルダを比較して相違部分を識別表示するツールです。
バックアップしているデータと現在作業中のデータを一括で比較したい場合などにも便利です。
このツールも、HTMLの編集作業にはたいへん役に立ちます。

【インストール】



「WinMerge-2.16.22-jp-1-x64-Setup.exe」をダブルクリックします。

8-2
8-4

「次へ」。「次へ」。

8-4
8-5

「次へ」。「次へ」。

8-6
8-7

「次へ」。「インストール」。

8-8
8-9

「次へ」。「完了」。

8-10

インストールが完了して、使える状態になりました。

【使用例1】 2つのファイルの比較


この「753Note」ではページの表示形式を2つのスタイルシート(CSS)で使い分けています。
その違いを調べてみることにします。
比較対象とするの2つのcssファイルを「ファイル」メニューから開くだけです。

8-11

2つのファイルの内容が左右に並び、差異のある行のみが色付きで表示されます。
さらにそれらの行の中で異なっている部分が薄い色で表示されます。
2つのスタイルシートについて、違いのある要素とその具体的な値やプロパティを把握できます。

【使用例2】 2つのフォルダの比較


現在VAIO上で作業中の「VAIO-Macs」というフォルダとバックアップディスクに置かれた同名のフォルダの内容を比較してみます。
ちなみに、各フォルダにはHTMLだけではなくJPGやMHTのデータも入っており、フォルダ数は56、ファイル数は約2,000です。
操作は使用例1と同様で、2つのフォルダを「ファイル」メニューから開く(指定する)だけです。

8-12

2つのフォルダに含まれるすべてのフォルダとファイルが表示され、差異のあるものは色付きで表示されます。
色付きのフォルダをダブルクリックしてみます。

8-13

フォルダの中身が展開されますので、差異のあるファイルにまで辿りつくことができます。

8-14

差異のあるファイルをダブルクリックで開くと、使用例1の場合と同様の表示になります。
htmlに限らず、jpgやmhtに関してもバイナリやテキストベースで差異が表示されます。

9. ゆっくりスクロール

「ゆっくりスクロール」は、この「753Note」の全ページに使用しています。
シーマンさんの「WEBページ作成 リファレンス」のサンプルを参考にさせていただきました。
JavaScriptに関する知識のない私にも、よく分かるように解説してあります。
 [参考情報]ゆっくりスクロール - シーマン

【インストールと使い方】


この現在のページを例に「ゆっくりスクロール」をどのように使用しているかを説明します。


「smooth-scroll.js」が、ページ内リンク先にゆっくりとスクロールを行なうJavaScriptです。

9-2

これは、このページのHTMLのヘッダー付近です。
  <script type="text/javascript" src="./js/smooth-scroll.js"></script>
このHTMLの一つ上の階層にある「js」フォルダに「smooth-scroll.js」を置いています。

9-3

その下に以下の記述があります。
  <button type="button" onClick="cmanLinkScroll('a9')"/>9</button>
例えば「9」というボタンを押すと「a9」というリンク先にスクロールします。
ボタンは各ページの右上に「Top」「1」「2」・・・「10」「Bottom」の順に並んでいます。

9-4

これは、「9. ゆっくりスクロール」付近のHTMLです。
  <table id="a9" class="t9"><tr><td>
id="a9"という形でリンクの飛び先に指定されています。

以上です。
記事を読んでいて、今居る場所が分からなくなる場合がよくあります。
そのような時に「TOP」でページの先頭に戻って見出しを確認できるのが嬉しいです。
シーマンさん、ありがとうございます。


Copyright 2022 WaterFront111 All rights reserved.