Firefox のアドオン ScrapBook で必要なリンクを抽出し、複数のページを一つにまとめる

1. リンクを含むページを保存し、編集する

複数のウェブページから、必要な部分を抽出し、一つのファイルにまとめるためには、Firefox のアドオン ScrapBook を利用する。

ScrapBook に保存したいウェブページが複数あり、そのリンクが１ページ中に含まれている場合、ScrapBook のリンクを抽出する機能を利用すると良い。

1. Scrapbook のアイコンをクリックし、サイドバーに Scrapbook を表示する。
2. 保存したいリンクが含まれるページを、一度 Scrapbook に保存する。
3. 保存したページから、必要なリンク以外を削除し、再度保存する。

 

2. ページからリンクを抽出する

1. 上記の保存したファイルを選択し、「ツール」ボタンより、「URL 一括保存」を選択する。
2. 「URL 一括保存」ダイアログにおいて、「URL 検出ツール」ボタンより、「ページ内のすべてのリンク」を選択する。
3. リンクが抽出されたら、「取り込む」ボタンを押す。
4. 取り込まれた複数のファイルを一つに結合する。

 

3. 保存したいリンクが複数のページに渡っている場合

保存したいリンクが複数のページにある場合、

1. 予め、保存したいリンクがあるページを ScrapBook に保存し、保存したいリンクだけ含まれるように編集しておく。
2. 編集した複数のページを結合した後、結合したファイルを対象にしてリンクを抽出する。

メガネの視界周辺が歪んで見える原因は、目の端からレンズまでの距離だった

1. 鼻あてを交換したら、視界周辺が歪んで見えるようになった

先日、メガネの鼻あてを交換してもらった。それ以来、見え方が悪くなった。まっすぐに前を見ているときは、問題ない。しかし、眼球を左右に動かすと視界が歪み、頭が痛くなる。

しばらくしたら見え方に慣れると思っていたが、一行に良くならない。

自分で鼻あての角度を調整したけれど、全く改善されない。角度をどのように変えても、レンズの縁辺りを見ると吐き気がした。

 

2. メガネを調整するときのポイント

自分ではこれ以上どうすることもできなかったので、メガネを購入した店で直してもらうことにした。

店員さん曰く、調整のポイントは、次の３点。

1. まっすぐ正面を見たときに、歪みなく見えること。
2. 目の中心から、レンズまでの距離が適正であること。
3. 目の端から、レンズまでの距離が適正であること。

最初に、メガネの両脇に付箋を貼り、正面を見たときの見え方をチェックした。

正面を見るときは、それほど見え方は悪くはなかったが、付箋をつけたらより違和感が軽減し、目が楽になった。

次に、目からレンズまでの距離がやや離れていたので、鼻あてをレンズに近づけてもらった。

しかし、相変わらず眼球を左右に動かすとクラクラする。何度も調整したが直らない。

 

3. フレームを曲げて目の端から距離を調整する

店員さんが「うーん…」と唸り、調整を諦めたかに見えた。自分もこれ以上は無理かなと思っていたら、「もう一つだけ試したいことがあります。」と言われた。

直してもらったのは、目の端からレンズまでの距離。大げさに表現すると、下図のように弓なりになっていたフレームを直線に近づけた。ただし、見た目には全く変化が分からない程度の調整。

これにより、視野周辺の歪みが消え、普通に見えるようになった。

メガネをぶつけて鼻あてが曲がった場合、自分で鼻あての角度を直すことはよくある。それでも、見え方が良くならない場合、フレームの歪みも考慮に入れなければならない。見た目には全く分からなくても、ちょっとの曲がりで見え方が全然違う。自分で応急処置をするときは、今回教えてもらったことが役に立ちそう。

Firefox で複数のリンクを一気に開く - FireGestures, Snap Links Plus

1. 複数のリンクを個別にバックグラウンドで開く

リンクをバックグラウンドで開く

インターネットの回線速度が遅い時代、ニュースサイトではタイトルを見て、読みたい記事を予めバックグラウンドを開いていた。

リンクを新しいタブで開くには、リンクを Ctrl キーを押しながらクリックする。リンクをバックグラウンドで開くには、

• オプション > タブ

において、「リンクを新しいタブで開いたとき、すぐにそのタブに切り替える」のチェックを外しておく。

 

マウスだけでリンクをバックグラウンドを開く

アドオン  Easy DragToGo+ を使うと、リンクを下方向に D&D することによって、バックグラウンドでリンクを開ける。

• cf. Firefox で文字列をドラッグして検索 - アドオン Easy DragToGo+

Easy DragToGo+ は、キーボードを使わず、マウスだけで操作できるところが良い。

 

2. 複数のリンクを一気に開く

FireGestures

FireGestures via kwout

複数のリンクを一気に開きたい場合、FireGestures の機能を利用する。

• Firegesture の設定 > 詳細

の「キープレスジェスチャ」において、

• Ctrl キーを押しながらジェスチャ: 「マウスが通過したリンクをタブで開く」

を選択する。

これにより、マウスジェスチャーを描く要領で、Ctrl キーを押しながら複数のリンクをなぞると、リンクがバックグラウンドのタブに開かれる。

開きたいリンクが並んでいるときは、個別にリンクを開くよりも素早く開くことができる。

リンクをなぞった後に、リンクを開きたくなくなったら、Ctrl キーを話せば良い。

 

3. Snap Links Plus

Snap Links Plus via kwout

 Snap Links Plus は、複数のリンクを開くための専用のアドオン。

FireGestures との違い

複数のリンクを開く操作が FireGestures と異なる。リンクを開くために、リンクを囲むように矩形の選択領域を指定する。

Google の検索結果を開くときは、タイトルのリンクが以外は開かない動作となっている。

 

リンクを開くための設定

FireGestures を併用する場合、リンクを選択する操作がバッティングしないようにすると良い。例えば、

• Snap Links Plus の設定 > 選択 > マウスボタン

の設定を「Alt, 右ボタン」にしておく。

Firefox の「進む」ボタンを常に隠す - ツールバーのアイコンの配置に影響を受けないように、Stylish で UI をカスタマイズ

1. 「進む」ボタンとロケーションバーの間にアイコンを配置すると、「進む」ボタンが隠れない

最近まで、Firefox の「進む」ボタンが消えることを知らなかった。

Firefox 10 の主な新機能を紹介します | Mozilla Developer Street (modest) によると、

… 「進む」ボタンは無効な時には表示せず、有効になった時にスライド表示されるようにします。無効時も常に表示するのではなく、「戻る」を押して有効になる時にだけ表示することで、「戻る」との対応も分かり易く、最重要ボタンから意識を反らすこともなく、ロケーションバーもより広く使えるようになります。

進む、戻る等のツールバーのボタンが表示されない| Firefox ヘルプ via kwout

これに気が付かなかった理由は、「戻る」「進む」ボタンとロケーションバーの間に、アイコンを配置していたため。この結果、「進む」ボタンが常時表示されていた。

ツールバーで小さいアイコンを使用した場合も、「進む」ボタンは表示される。

 

2. 「進む」ボタンを強制的に隠したい

「戻る」「進む」ボタンとロケーションバーの間に、アイコンを配置した状態で、「進む」ボタンを隠したい場合は、Stylish を用いる。

Stylish で新しくスタイルを作成し、適当な名前をつけて、以下の内容を貼り付け、スタイルを有効にする。

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
/* Conditionally hide the Forward button */ 
#forward-button[disabled="true"] {  display: none; } 

• cf. Forward button to become optional in Firefox • Mozilla Links
• Unhide Forward Button in Firefox 11 | Firefox Extension Guru's Blog

これにより、「進む」ボタンとロケーションバーの間にアイコンがあっても、「進む」ボタンが消える。

小さいアイコンを使った場合でも、「進む」ボタンは表示されない。

 

3. Stylish によるブラウザのカスタマイズ

上記のように、Stylish では、ウェブページだけでなく、Firefox の UI もカスタマイズできる。

ユーザスタイルシートによるカスタマイズ(2) - Stylish – えむもじら によると、

新規作成を選ぶと、名前をつけて新しいスタイルシートを定義できます。ウェブページ用と Firefox 本体用のユーザスタイルシートはそれぞれ userContents.css と userChrome.css を使い分けて分けていましたが、Stylish ではユーザスクリプトの先頭の名前空間の宣言で区別します。名前空間は編集画面の挿入ボタンから簡単に追加することができます。

Firefox の UI をカスタマイズするには、Stylish で、

1. 白紙のスタイルを作成し、
2. 「挿入」ボタンより、「XUL 名前空間を編集とする」を選択する。

カスタマイズできる UI については、以下を参照。

• userchrome.css - Mozilla Firefox まとめサイト
• デフォルトスキンの変更 – MDN
• XUL リファレンス - MDN

Google ドキュメント, Google Drive で文書に複数のタグを付ける

追記(2015/3/16): ⇒ Google Drive でファイルを複数のパス(フォルダ)に所属させる

---

1. Google ドキュメントでコレクションを利用する

Google ドキュメントで文書に対して、Gmail のように複数のラベルを付けたい場合、「コレクション」を利用する。

文書は、複数のコレクションに所属することができるので、タグ付のように扱える。

コレクションを作成する - Google ドキュメント ヘルプ によると、

コレクションを作成する方法は次のとおりです。

1. ドキュメント リストの左上にある赤色の [作成] ボタンをクリックします。
2. プルダウン メニューから [コレクション] を選択します。
3. 表示された画面で [新規コレクション] フィールドにカーソルを置き、名前を入力します。

文書をコレクションに入れるには、

1. 対象の文書を選択した後、右クリック > 管理
2. コレクションを選択するダイアログが表示される。
3. 所属させたいコレクションのチェックボックスを複数チェックする。

 

2. Google Drive で複数のフォルダを Ctrl キーを押しながら選択する

Google Drive をインストールすると、Google ドキュメントが Google Drive に置き換えられる。

ただし、Google Drive では、Google ドキュメントの「コレクション」を作ることができない。そのため、Google Drive では、コレクションの代わりに「フォルダ」を用いる。

Google ドライブでフォルダを作成、削除する - Google ドライブ ヘルプ によると、

Google ドライブ オンラインでフォルダを作成する方法は次のとおりです。

1. Google ドライブの左上にある赤色の [作成] ボタンをクリックします。
2. プルダウン メニューから [フォルダ] を選択します。
3. テキスト ボックスにフォルダ名を入力し、[OK] をクリックします。
4. フォルダが作成されます。このフォルダは、[マイ ドライブ] の下にあります。

Add or remove something from a folder - Google Drive Help によると、

To add something to more than one folder, hold the Ctrl key (⌘ command for Mac) and select multiple folders.

文書を複数のフォルダに入れるには、

1. 対象の文書を右クリック > 管理 を選択する。
2. フォルダを選択するダイアログが表示される。
3. フォルダを選択するときに、Ctrl キーを押しながら、複数のフォルダをクリックする。

Mac の場合、Ctrl キーの代わりにコマンドキーを用いる。

 

参考サイト

• Ctrl+Click To Multiselect Folders in Google Drive's Organize | devfuel.com

キーボードのチャタリングを回避する ccchattttter

1. 特定のキーを連続して入力していると、チャタリングが生じる

キーボードの `j’ を連続して入力していると、突然、jj と入力されるようになった。この現象はチャタリングと呼ばれる。

チャタリング – Wikipedia によると、

リレーやスイッチの接点が切り替わった際に、微細で非常に速い機械的振動によって、電気信号が断続を繰り返す現象である。

これに対して、以下の ccchattttter を利用したら、チャタリングがほとんどなくなった。

• ★Axfc UpLoader 小物板 -File_36757.zip-

DOWN-UP-DOWN の値は 100ms ~ 150ms に設定した。

 

2. スタートアップに ccchattttter を登録

Windows の起動時に ccchattttter が自動的に起動するために、スタートアップにショートカットを置いた。

起動したときに最小化するために、

• ショートカットのプロパティより、「ショートカット」タブの実行時の大きさ

において「最小化」を選択した。

 

3. チャタリングに気が付かなかった

チャタリングに気がついたのは、Tumblr で次の投稿を表示するために j キーを連続して入力していたとき。

ただし、j キーを入力して、すぐにチャタリングが起こるわけではない。連続して入力しているとチャタリングが不定期に生じた。そのため、長い間、Firefox が原因で表示がおかしくなると思い込んでいた。

LDRize や Google Chrome を使用しても同じような動作になるのを見て、やっとチャタリングに気がついた。 (+_+)

 

4. チャタリングを記録する

追記（2012/07/19）： キー入力のログを取るには、ccchattttter の設定画面で、「ログ」にチェックを入れる。

「チャタのみ記録」にチェックを入れると、チャタリングが生じたキーのみ表示してくれる。

記録を見たら、J キー以外にもチャタリングが起きていることが分かった。そろそろ、寿命なのかな… (+_+)

 

5. チャタリングが直った

キーボードを購入して４年ほど経過したので、買い換えないとダメかと思っていたので助かった。 ^^

• cf. Majestouch Tenkeyless の黒軸が気になる - コンパクトな英語配列のキーボード

追記（2012/07/20）： 突然、チャタリングが起こらなくなった。理由は良く分からない。

正常に動作する前に行ったことは、次の通り。

1. J のキーを外し、スイッチを直接手で押してチャタリング起こるか確認した。
2. その結果、チャタリングが生じなかった。
3. H のキーと J を交換して、チャタリングが起こるか確認した。
4. その結果、チャタリングが生じなかった。
5. 再び J のキーをはめて動作を確認したら、チャタリングが生じた。
6. J と H のキーを見比べても、全く違いが分からなかった。
7. ダメ元で、J のキーを裏返し、スイッチがハマる部分を、爪楊枝で突っついた。
8. その結果、埃も何もなかった。
9. しかし、なぜかこの後から、J キーが正常に動作するようになった。

キーのハマり具合が悪かった訳でもないから、不思議でならない。

 

参考サイト

• ccchattttter「っっちゃっっっったー。」 キーボードチャタリングキャンセラーソフト : モモンハン日記

関連記事

• 無線でもトラッキング能力が高いマウス - Logicool の Anywhere Mouse M905 | すぐに忘れる脳みそのためのメモ

McAfee SiteAdvisor でサイトが安全と評価されてない場合

McAfee SiteAdvisor － Web サイトの安全性評価と安全検索 とは、

マカフィーでは、大量のテスト コンピュータを使用して、ウェブにスパム、スパイウェア、フィッシング詐欺、ウイルスなどの脅威が存在していないかどうかテストしています。SiteAdvisorをインストールすると、検索結果とブラウザーのボタンに小さいサイト評価アイコンが表示されます。これにより、危険なサイトを事前に確認し、安全な閲覧を行うことができます。

McAfee SiteAdvisor をインストールすると、ブラウザで検索サイトを利用したとき、サイトの評価が以下のマークで示される。

McAfee SiteAdvisor － Web サイトの安全性評価と安全検索 via kwout

サイトが「安全」と評価されてない場合、以下を参照。

• 5．評価に関するお問合せ方法

例えば、サイトが「不明」と評価されている場合、

灰色の？マークは危険なサイトを意味するものではございません。サイトアドバイザーの評価が完了していないサイトを意味するものです。
再評価をご希望の場合は下記の情報をサポートセンターまでお伝え下さい。以下3点は必須項目です。

• お客様のご連絡先（メールアドレス）
• サイトのURL
• 現在の評価（灰）

サイトの評価をしてもらうために、

• その他のQ&A | マカフィー の 「6．お問合せ」

から問い合わせを行う。

ただし、評価を依頼した場合、評価が出るまでに相当時間がかかるようだ。

4．評価に関するQ&A によると、

新規評価、再評価問わず、評価結果が出るまでに数ヶ月のお時間がかかります。これはサイトアドバイザーの評価が厳正な評価プロセスを実施するための必要な期間であり、短縮することができません。

Firefox で「ウィンドウが非アクティブ」になるのは Flash Player が原因

1. Flash Player が埋め込まれているページで、ウィンドウが非アクティブになる

Firefox で Flash Player が埋め込まれたページを開くと、アクティブだったウィンドウが、非アクティブになる現象が生じた。

複数のウィンドウを開いていると、手前にあるアクティブなウィンドウが非アクティブになり、後ろにあるウィンドウが手前に来てしまう。

利用しているアプリケーションのバージョンは、

• Firefox 13.0.1, 14.0.1
• Flash Player v11.3.300.265
• Windows 7 64bit

Flash Player のバージョンは、以下で確認できる。

• http://www.adobe.com/jp/software/flash/about/

 

現象が生じるサイト例

Firefox frequently loses window focus によると、例えば、

• Fox News - Breaking News Updates

のようなサイトを開くと、ウィンドウが非アクティブになる。

 

解決方法

これを解消するには、次の選択肢がある。

• Flash Player の「保護モード」を無効にする。
• 古いバージョンである Flash Player 11.2 に戻す。
• 「非アクティブになったウィンドウ」をスクロールできるアプリケーションを使う。

最終的には利便性を考え、『Flash Player の「保護モード」を無効にする』ことにした。

 

2. 保護モードを無効にする

Flash Player の保護モードを無効にすると、ウィンドウが非アクティブにならなくなる。

Flash Player 保護モードのトラブルシューティング（Firefox | Windows） によると、

重要 ： 弊社では、保護モードを無効にすることを推奨しておりません。問題が改善され次第、保護モードを有効に戻すことを強く推奨します。

1. メモ帳などのテキストエディターを起動します。
2. 以下のいずれかのファイルを開きます。
   32 ビット版 Windows ： C:\Windows\System32\Macromed\Flash\mms.cfg
   64 ビット版 Windows ： C:\Windows\SysWOW64\Macromed\Flash\mms.cfg
3. 以下の文字列を入力します。
   ProtectedMode=0
4. ファイルを上書き保存します。
   注意 ： ファイルを上書き保存できない場合は、一旦デスクトップなどの場所に保存し、Windows エクスプローラーの操作で、手順 2. の場所に移動またはコピーしてください。

• cf. Active Window Suddenly Becomes Inactive • mozillaZine Forums
• 窓の杜 - 【NEWS】「Firefox」と「Adobe Flash Player 11.3」の相性問題、Adobeが解決方法を公開

保護モードとは、ニュース - Flash Playerの新版公開、脆弱性を修正してセキュリティ機能も追加：ITpro によると、

Windows版のFirefox向けFlash Playerでは、「保護モード（Protected Mode）」と呼ばれる新しいセキュリティ機能を追加した。これは、一般的には「サンドボックス」と呼ばれる機能。Flash Playerを「保護された処理環境（サンドボックス化された処理環境）」で実行し、ハードディスクへの書き込みなどをできないようにする。

これにより、脆弱性を悪用されてFlash Playerを乗っ取られた場合でも、ウイルス感染などを防げる。同社ソフトのWindows版Adobe Readerも、Adobe Reader X（バージョン 10.x）から同様の機能を実装している。

• cf. 窓の杜 - 【NEWS】「Firefox」で“保護モード”を実現する新しい「Flash Player Incubator」が公開

注意することは、64 ビット OS を使っていてもブラウザが 32 ビットの場合、32 ビット版の設定ファイルを変更すること。

• 追記(2015/2/25): Firefox 36 で Flash Player の保護モードを about:config で無効にする

 

3. その他

a. 古い Flash Player 11.2 をインストールする

古い Flash Player を利用すると、このような現象は生じない。しかし、セキュリティを考えるとお勧めできない。

最初に、

• コントロールパネル > プログラム > プログラムのアンインストール

より Flash Player をアンインストールする。

次に、アーカイブ版 Flash Player の提供について から、

• (4/13/2012公開) Flash Player 11.2.202.233 (159 MB)

をダウンロードして解凍する。

• 11_2r202_233_32bit\flashplayer11_2r202_233_win_32bit.msi

を起動してインストール。

これにより、Flash Player が埋め込まれたページを開いても、ウィンドウが非アクティブにならなくなった。

 

b. 背面のウィンドウをスクロールする

スクロールするときにウィンドウが非アクティブになる問題のみ解消したい場合は、「かざぐるマウス」を使えば良い。

このユーティリティは、「マウスカーソル直下のスクロール」することができる。そのため、ウィンドウが非アクティブになっても、ページをスクロールできる。

ただし、複数のウィンドウを開いている時に、後ろのウィンドウが手前に来る問題には対応できない。

 

関連記事

• Firefox で Flash Player からできるだけ足を洗う - Flashblock
• Flash Player のバージョンを 11.x から １０.x へダウングレードする

アクティブウィンドウ以外の領域を暗くすると、作業に集中しやすくなる - Ghoster

1. 複数のアプリケーションを開いていると気が散る

広い画面の PC を使い、複数のアプリケーションを利用していると、一つの作業に集中できない。

ブラウザとエディタを画面の中心に置き、左上には Twitter 専用アプリ。右隅には日付、時間、天気、PC の状態を表示するガジェットを配置。左下にはブラウザをもう一つ起動して、ラジオや動画を再生する。

この状態でブラウザで調べ物をしたり、エディタで文章を書いていると、周りのアプリケーションの変化が自然と目に飛び込んでくる。また、複数のウィンドウの重なりや、背後にあるアプリケーションの表示が気になる。

目の前のアプリケーションに集中したいのなら、作業しているウィンドウ以外のものを隠せば良い。Windows 7 の場合、エアロシェイクを利用する。しかし、この操作をするのは面倒。また、他のアプリケーションの状態を、現在行っている作業の邪魔にならない程度に把握したいという欲求もある。

そのためには、目の前のアクティブウィンドウに集中しやすい環境がほしい。

 

2. Ghoster で周囲を暗転する

Ghoster は、アクティブウィンドウ以外を暗くすることができるユーティリティ。

1 Hour Software by Skrommel - DonationCoder.com

1 Hour Software by Skrommel - DonationCoder.com via kwout

ブラウザ上で写真を表示するときに、写真以外の領域を暗くするツールがある。

• jQuery lightBox plugin

Ghoster はこのツールの動作に似ている。

周囲を暗転することにより、中心を浮き上がらせる。暗くした部分は、完全に見えなくするのではなく、何があるのか薄っすらと分かるエフェクト。

 

Ghoster の設定

Ghoster を起動すると、タスクトレイに常駐する。

デフォルトの設定では、暗転する領域が暗いので、少し明るくする。

• Ghoster のアイコン を右クリック > Settings…

を選択すると、設定ファイルが開かれる。

設定値の中で変更したのは、transparency の値のみ。

transparency=50

とした。

 

全てのウィンドウを隠した場合

タスクバーにあるデスクトップを表示するボタンを押した場合、タスクバーも消えてしまう。

この場合、

• Windows キー + D

を押すと元の状態に戻る。

 

3. シングルタスクで作業に集中

ほとんどの人は、複数のことを同時に行うと、パフォーマンスが低下する。

• cf. スーパー・タスカー：同時作業が得意な、レアな人々 « WIRED.jp Archives

スマートフォンやタブレットのアプリが使いやすそうに見えるのは、できることが限られている上に、目の前のタスクに集中できるため。

Tumblr や Pinterest などのサービスが使いやすいのは、シンプルな UI で、目の前提示される情報が少なく集中できるから。

人にとって対象を認識しやすく、集中しやすい環境は、今後より進化しそうなのでこれからが楽しみ。

 

4. 仮想デスクトップとの併用

たくさんのアプリケーションを使う場合は、仮想デスクトップを併用すると良い。

• 仮想デスクトップ に Dexpot - ホットキーの設定とタイトルバーへのマウス操作をカスタマイズ

仮想デスクトップは、作業ごとに画面を割り当てる使い方をする。

• 複数のアプリケーションを連携して使うとき、作業ごとに仮想デスクトップを割り当てる - WinDeskWide を使い、効率的にブログを書く

特定のアプリケーション専用の画面を用意すると、気が散ることがない。

• ウェブページの特定部分の更新をチェック - ShareOn の Comboo と仮想デスクトップを併用

ウェブページを印刷する前に不要な部分を削除する - Firefox の Print Edit と、Google Chrome の Live Page Editor

1. 不必要な部分を印刷前に削除したい

ウェブページを印刷する前に、不必要な情報を削除したい。

ブラウザにデフォルトで用意されている方法は、

1. 印刷したい範囲を選択する。
2. 印刷ダイアログで、印刷範囲において「選択した部分」を選択し、印刷する。

1ページの中に印刷したい箇所が複数に分かれている場合、対象を選択する操作を行うときに、Ctrl キーを押しながら選択すると、複数の部分を選択できる。

この方法の問題点は、微調整がしにくいこと。

 

2. Firefox の Print Edit を利用する

Print Edit via kwout

これに対して、Firefox では、アドオン Print Edit を利用すると、プリントする前に不要な部分を素早く削除することができる。

アドオンをインストールした後、印刷したいウェブページを開き、

• Firefox ボタン > 印刷 > Print Edit

を選択すると、編集画面が表示される。

a. ウィンドウの幅を広げておく

編集画面は、ウィンドウの幅が狭いと、Print Edit のメニューが全部表示されない。

幅を広げて、右端が「閉じる」ボタンであることを確認しておく。

 

b. 要素の選択方法

ウェブページの必要な部分を選択する方法は、

• 要素をクリック
• 範囲選択（クリックした後、ドラック）

要素をクリックするときは、文字のない適当な場所を選ぶと、必要な部分を上手く選択できる。

 

c. 印刷までの手順

Print Edit の典型的な使い方は、

1. Print Edit を起動する。
2. 必要な範囲をクリックして選択する。
3. 「他の要素を削除」ボタンを押す。
   

これにより、余白ができた場合、印刷対象の幅を調整する。そのために、

1. 余白部分をクリックし、「フォーマット」ボタンを選択。
2. 「コンテンツに合わせる」ボタンを押し、
3. Flags の「入れ子のサブ要素に適用」にチェックを入れ、OK ボタンを押す。
   

後は、残りの不要な要素を選択して「削除」し、最後に「プレビュー」ボタンを押して、印刷画面を表示する。

 

d. 背景も印刷する

印刷したいページの画像が編集対象になってない場合、

• Firefox ボタン > 印刷 > ページ設定

を選択し、「書式とオプション」タブのオプションの「背景色と背景画像も印刷」にチェックを入れておく。

 

3. Google Chrome の Live Page Editor を利用する

Live Page Editor via kwout

Google Chrome の場合、Live Page Editor を利用する。

1. Live Page Editor の Edit This Page ボタンを押す。
2. 不必要な部分を選択し、Delete キーを押す。

ただし、Firefox の Page Edit のように余白の調整はできないようだ。

 

4. 開発ツールを使う

上記以外に、Firefox, Google Chrome の開発ツールを利用すると、表示しているページを編集できる。

Firefox の場合、

1. ウェブページで右クリック > 要素を調査
2. 表示される HTML の要素を右クリック > ノードを削除

特に、3D ビュー モードで表示すると、要素を特定しやすい。

Google Chrome の場合、

1. 右クリック > 要素を検証
2. 表示される HTML の要素を右クリック > Delete Node

大抵、印刷対象のメインコンテンツの id, class には main… と名前が付けれている。それ以外は、header, footer, sidebar などの名前がついていることが多い。これを目安に要素を特定する。

サイドバーなどを削除すると、その部分に余白ができる。この余白をなくすには、必要なコンテンツの幅の調整をするために、対象要素の CSS を表示し、width 属性のチェックを外せば良いことが多い。

 

5. 印刷用の CSS が定義されているサイト

ところで、サイトによって印刷プレビューを確認すると、表示のされ方が違う。メインコンテンツを印刷用にデザインにしてくれるサイトから、印刷することを全く想定していないサイトまで様々。

例えば、マイナビニュース 、InfoQ、TechCrunch Japan などのサイトは、記事を印刷すると、コンテンツだけ印刷される。

これは CSS で印刷用のデザインが定義されているため。

• cf. CSS 概説 | Media Types in CSS

情報を提供するサイトは、ブラウザで表示されるだけではなく、印刷されることも想定して欲しい。

Pinterest のブックマークレットが使えない画像をピンする - Firefox に Pinterest Right-Click または Pin Image, Google Chrome に Taberareloo

1. Pinterest のブックマークレットでピンできない画像

Pinterest via kwout

ユニクロや資生堂が Pinterest に公式ページを開いている。

• ユニクロ、「Pinterest」にブランドページ公開：MarkeZine, 2012/06/27
• 資生堂、公式Pinterestページをオープン ：MarkeZine, 2012/05/07

そろそろ ZOZOTOWN のサイト内にも Pin It ボタンが配置されても良い頃だと思う。

 

ボードにピンするブックマークレット

Pinterest のボードに画像をピンするには、Pinterest に用意されているブックマークレットを利用する。

• cf Pinterest（ピンタレスト）の使い方徹底ガイド - nanapi Web

このブックマークレットは、大抵の画像をピンすることができる。しかし、ZOZOTOWN の商品画像のように、HTML 要素の

「背景として表示されている画像」

をピンすることができない。

追記(2014/8/4): 現在、公式ツールと Pinterest Pin Button を利用している。

• cf. Firefox で Pinterest の公式ツールをインストールできない場合 - Pinterest Pin Button を補助的に用いる

 

2. Firefox の場合

Pinterest Right-Click を利用する

Pinterest Right-Click via kwout

Firefox で画像をピンするには、アドオン

• Pinterest Right-Click

を使う。

• 通常の画像をピンするときは、画像の上で右クリック > Pin Image を選択。
• 「背景として表示されている画像」をピンするには、画像の上で右クリック > Pin Image Backgroud Image を選択する。

ただし、コンテキストメニューを選択するときに、なぜか Pinterest Right-Click の選択肢が消えてしまう。表示されるコンテキストメニューの中身に触れないようにマウスポインタを移動させ、Pin Image … を選択すると良い。

または、画像上で右クリックをした後、キーボードで `P’ を入力すれば Pinterest Right-Click の選択肢が選択される。

 

PinImage

追記（2013/02/10）： PinImage も画像の上で右クリックし、

• Pin Image

を選択することによって Pin It できる。ただし、 Pinterest Right-Click のような問題は発生しない。

 

tombloo

できればアドオン tombloo を使いピンしたかった。しかし、tombloo は Pinterest に対応してないようだ。

 

3. Google Chrome で Taberareloo を利用する

Taberareloo via kwout

Google Chrome の場合、Taberareloo を利用する。

• 通常の画像をピンするときは、画像の上で右クリック > Share > Photo
• 背景として表示されている画像をピンするには、画像の上で右クリック > Share > Photo Background Image

Post ボタンを押す前に、Pinterest をオンにする。

 

4. その他

追記（2012/07/12）： ファッションをコーディネートするサイトを見かけるようになった。Pinterest よりも集客力があるのだろうか？

• ファッションコーディネートサイトのiQONがZOZOTOWNと連携 - CNET Japan, 2012/07/12

Firefox でピン留めしたタブの読込みを遅らせる

0. 目次

• 1. 軽さを保ちたければ、タブをなるべく開かない
• 2. タブを選択したときにページを読み込む
• 3. 「ピン留めしたタブ」も選択したときにページを読み込む

 

1. 軽さを保ちたければ、タブをなるべく開かない

Firefox でタブを常に 100 以上開いているタブジャンキーにとって問題なのは、開いたタブによりブラウザの動作が遅くなること。

特に、再起動した後、ブラウザを操作できるまでに時間がかかるとイライラしてくる。 (+_+)

 

a. タブをなるべく開かず、開いたら閉じる

これを回避するには、再起動する前に開いていたタブの内容を読み込まない設定にしておくことが重要。

もっとも、タブを開かないで置くことができるのなら、それが一番良い。

• cf. できる限りタブを閉じれば、激重のFirefox が劇的に軽くなる – アドオン OneTab で開き過ぎたタブをリスト化

 

b. ピン留めしたタブを読み込まない

追記(2015/3/10): また、不必要なときはタブを読み込まないようにしておくこと。デフォルトでは、ピン留めしたタブは自動的に読み込まれてしまう。

自分の場合、常に開いているウィンドウは 5 つ。ピン留めしてあるタブは 40 近くある。 PC に 12G メモリを積んでいるが、ピン留めしてあるタブが開くだけでかなりメモリを消費する。

例えば、Firefox を起動しない状態のメモリ使用状況を測ると 42%。しかし、ブラウザを起動するだけで 81% まで上昇してしまう。

これに対して、後述する設定により、ピン留めしたタブを自動的に読み込まないようにすると、56% にまで激減する。

 

2. タブを選択したときにページを読み込む

Firefox を再起動した後、再起動する前に開いていたタブを復元できる。そのためには、

• オプション > 起動 > Firefox を起動するとき

の選択肢において、「前回終了時のウィンドウとタブを表示する」を選ぶ。

再起動の直後に、「開いていたタブ」を読み込みたくない場合は、

• タブが選択されるまでページを読み込まない

のチェックボックスを選択する。

 

3. 「ピン留めしたタブ」も選択したときにページを読み込む

ただし、ピン留めしたタブは、再起動した後に自動的に読み込まれてしまう。

• アプリタブとは | Firefox ヘルプ

たくさんのタブを「ピン留め」している場合、再起動した直後、動作がもたつく。ピン留めしたタブも、選択されるまでページを読み込まないようにしたい。

そのためには、

1. ロケーションバーに about:config を入力
2. browser.sessionstore.restore_pinned_tabs_on_demand:true に変更する。

Firefox 12 の主な新機能を紹介します | Mozilla Developer Street (modest) によると、

アプリタブの読み込みを制御できる設定を追加しました

Firefox 8 でタブを選択してから読み込む設定を追加しました。Firefox 9 でアプリケーションタブは再起動時に常に読み込まれるようになりましたが、必ずしも読み込む必要はないというフィードバックを受け、Firefox 12 ではアプリタブを再起動時に読み込まないようにする隠し設定を追加しました。about:config で browser.sessionstore.restore_pinned_tabs_on_demand の値を true に変更すれば、アプリタブも選択後に読み込まれるよう、挙動が変わります。

cf. Firefox で開いたままのタブを自動的にアンロードする Auto Unload Tab - MemChaser, Tab Data でメモリ使用状況を確認

PC の画面が眩しいので、D-Filter で暗くする

1. 画面を暗くしたい

ディスプレイの「明るさ」を暗くするのには限度がある。暗い部屋の中では、ディスプレイを一番暗くしても、まぶしくて目が疲れる。

Windows やディスプレイのボタンで調整できるよりも、画面を暗くしたい。

 

2. D-Filter の設定

D-Filter を使うと、画面を極端に暗くできる。

1. D-Filter を起動し、タスクトレイより、D-Filter の MAINPANEL を選択する。
2. MAINPANEL の On ボタンをクリック。
3. 「濃さ」「透明度」を一番上にした後、透明度を少しずつ下げて調整すると良い。

これにより、真っ暗な部屋でディスプレイを見つめていても、目が疲れにくくなる。

追記（2013/11/13）： 類似したアプリケーションに プライバシーフィルター がある。ただし、D-Filter の方が一時的にオン・オフを切り替えやすい。

 

3. 二重起動に注意

追記(2014/8/10): 同一 PC 上では D-Filter を二重に起動することはできない。

ただし、ノートPC から デスクトップPC（モニターなし）をリモート操作している場合は注意が必要。ノートPC とデスクトップPC 上で D-Filter を同時に起動すると、画面が真っ暗になることがある。

Yahoo Pipes でXPath で指定した要素の直下にあるテキストを取得するためのパイプ - ノードテスト text() の代わりに content 属性を用いる

1. XPath のノードテスト text() でテキストを抽出する

XPath で HTML のタグで囲まれたテキストを取得するには、ノードテスト text() を利用する。

XML Path Language – Wikipedia によると、

text()

全てのテキスト （文字列） ノードを指定する。例: <k>こんにちは</k> の中の 'こんにちは'

例えば、Yahoo!Pipesのテスト のページにおいて、

<div name="hogepiyofuga">
<p>ほげ</p>
<p><b>ぴ</b>よ</p>
<p>ふが</p>
</div>

以下の XPath を指定すると、

//div[@name="hogepiyofuga"]/p/text()

タグで囲まれたテキストが抽出できる。

• cf. Firefox で XPath により要素を指定する - Firebug と FirePath を使って

 

2. Yahoo! Pipes でテキストを取得するには content 属性を利用する

Yahoo! Pipes には、XPath を指定できる XPath Fetch Page モジュールがある。

しかし、XPath Fetch Page モジュールの Extract using XPath フィールドに、ノードテスト text() を指定すると、

//div[@name="hogepiyofuga"]/p/text()

結果が出力されない。どうやら、単一の値を返せないようだ

ノードテスト text() を指定しない場合、

//div[@name="hogepiyofuga"]/p

パイプの content 属性に、ノードテスト text() で抽出したときと同じテキストが設定される。

ここでは、XPath Fetch Page モジュールにおいて、Use HTML5 parser にチェックを入れた。なぜなら、このパーサを使うことが推奨されているため。

New Module: XPATH Fetch Page | Yahoo! Pipes Blog によると、

Currently this module will extract the page and fix malformed tags using Tidy. You have the option to run the parser using support for HTML4 (by default) or checking the “Use HTML5 parser” checkbox to use the HTML5 parser. We recommend using the HTML5 parser when using this module for most cases.

 

sub-element モジュール

上記より、content 属性だけを抽出したい場合、

• Operator > Sub-element モジュール

を使い、item.content を指定する。

これにより、XPath で指定した要素の直下にあるテキストを抽出できる。

以上より、XPath で指定した要素の直下にあるテキストを取得するためのパイプを作成しておく。

• Pipes: XPATH.content

 

3. XPath で全てのテキストを抽出する

ところで、XPath では、指定した要素の子孫に当たるテキストを選択することはできる。

//div[@name="hogepiyofuga"]/p//text()

先ほどと違い、「ぴよ」の「ぴ」も抽出された。

Yahoo! Pipes で、同じ動作をするパイプを作ることは難しいようだ。