Google Chromeのタブ管理アプリ『Workona』が先日バージョンアップされ、お洒落な外観といくつかの機能が追加されました。
その機能のひとつアプリ連携を紹介します。

Workonaについては下記の記事もご参考ください。
Chrome拡張【Workona】でよく使うタブを目的別に整理、名前を付けて保存する
タブをグループ単位でまとめるChrome拡張Workonaの便利なショートカット基本の3つ

拡張機能『Workona』（無料）の追加はこちら（chrome ウェブストア）から。

Workonaのクラウドアプリ連携機能

Workonaをインストールした状態で、新規タブを開くと左側に最近使用したクラウドアプリ/サービスのアイコンが表示されています。

Chrome起動直後の初期画面ではこんな感じです。

アイコンをクリックすると、新規ファイル作成等、サービス毎に調整された様々な選択肢が表示されます。
Google Driveなら新規ドキュメントやスプレッドシート、プレゼンテーションファイルの作成、Asanaなら新規プロジェクトやタスクの追加、等です。

Slackの場合

アプリを変更してみる

表示されているアプリを変更してみます。

上部の雷のようなアイコンをクリックすると、現在登録されているアプリのリストが表示されます。

星マークを外せば左側のアイコンは非表示になります。

リストからも削除したい場合は、右端のボタンをクリックして「Remove App」を押します。

アイコンの順序はドラッグで変更可能です。

アプリを登録してみる

デフォルトのままでは「最近使ったサービス」が並び、実際の自分の利用頻度と合わない場合もあるので、自分でアプリを登録してみましょう。

まずは、自動表示の設定を外します。
ユーザーアイコンをクリックして、Preferencesをクリックします。

「ENABLING APPS」ラジオボタンのチェックを「Enable apps I use automatically」から「Enable apps manually」に変更します。

下部の「Add App」ボタンをクリックして、追加したいサービスを選択します。

海外の有名サービスがメインなので、もし登録してほしいサービスがあればリクエストが可能です。

アプリの順序

アプリの順序は自分が見やすい形が一番だと思いますが、Workona初期画面の「Find and Create」サーチボックスの横の＋ボタンを押した時の挙動に影響します。

Asanaを上にした場合。

Gmailを上にした場合。

まとめ

アイコンをクリックして開く選択肢の部分も編集できれば、かなり使える機能になると思います。
例えばAsanaであれば、自分が良く使うプロジェクトを登録、セクションなどもWakonaから出ずに選択し、タスクを追加する等です。
シンプルなサービスの場合はちょっとした手間（サービスを開く・新規作成する）が省略できて便利な機能だと思います。

投稿 バージョンアップした『Workona』のクラウドアプリ連携機能を使ってみよう！ は studioDoghands に最初に表示されました。

EvernoteにクリップでもPocketでもInstapaperでもChromeの「後で読む」でも、結局後で読まないあなたへ。
上記は私のことです。2010年からEvernoteを使い始め、「後で読みたいサイト」も保存していたのですが、全く後から読むことは無く、その後WEBサイトリンクの保存に関してはPocketに移行、それでも後から開くこともせず、恐らく数百サイトのリンクが溜まったままの状態です。

そんな中、リンクをSlackのダイレクトメッセージで自分宛てに送ると、結構読むことに気が付きました。
普段プロジェクトでSlackを使っている方が前提となりますが、「なにか他のことを始める時に目に入る」ことで、リンク先を見るハードルが低くなるからです。

WEBサイトのリンクをiPhoneでSlackに送る

スマホの場合は簡単です。
WEBサイトを開いた状態でシェアボタンをクリックし、Slackを選択します。
※Slackアプリをインストールしている前提です。
※画面はChromeですが、Safariでも同様です。

ワークスペースを選択し、自分宛てにダイレクトメッセージでリンクを送付します。

WEBサイトのリンクをPCのブラウザでSlackに送る

PC、またはMacから、Chrome拡張機能を使ってSlackに送ってみます。

「#Clicky for Slack」を使ってリンクを送る

chrome ウェブストアからインストールします。

ツールバーからアイコン（ダークモードだと分かりづらいです）をクリック、ダイレクトメッセージで自分宛てにリンクを送信します。

Slackで通知をONにしている場合はデスクトップに通知が表示されます。

無事、ダイレクトメッセージでリンクがシェアされています。

#Clicky for Slackのオプション画面。

「Share To Slack」を使ってリンクを送る

こちらもChrome拡張機能です。#Clicky for Slackより若干シンプルな印象です。機能はほぼ変わりません。
chrome ウェブストアでインストールします。インストール後、Slackとの連携が必要です。

ツールバーからアイコンをクリックしてリンクを送信します。
ひとことコメント欄が独立しているので、保存時にコメントを書く方はこちらの拡張機能が便利かもしれません。

「後で読む」のまとめ

保存したWEBサイトのリンクを後で読まないことに対する解決方法が無いかと模索していますが、読まないなら読まないで良い気もしています。
必要な時に検索すればWEB上にはその情報は存在しているし、今現在読んでいないということは、その情報をそこまで必要としていない、と自分が判断している可能性もあるからです。
とりあえずクリップし、後は忘れる。本当に興味のある情報はその場で見ているはず、と割り切ると、溜まってしまった「後で読む」リストもストレスにならずに済むかもしれません。

投稿 「あとで読む」つもりでも読まずに溜まる記事は自分宛てSlackに送ろう。 は studioDoghands に最初に表示されました。

普段、仕事やブログ関連でスクリーンショットを撮る機会が多くあります。
特にブラウザ内のWEBサイトのキャプチャを撮る事が多く、キャプチャ関連のChrome拡張機能は20~30個程度試しましたが、未だに決定的なものはありません。
※現在は「FireShot」を使っています。

ブラウザ以外では今までSkitchを利用していたのをSnagitにほぼ移行（別途記事を記載します）、ブラウザ内のWEB画面もSnagitに統一したかったのですが、「WEBページ全体のスクリーンショット」だけは難ありでした。

WEBページ全体のスクリーンショット

見えている部分だけでは無く、スクロールした縦全体のスクリーンショットを撮影できるアプリや拡張機能は多くあります。
※15年程昔は、少しずつスクロールしてキャプチャ、を繰り返し、Fireworksなどの画像編集ソフトで繋げていました。

しかし、このWEBサイト全体のキャプチャは下記の理由で、特に最近はなかなか難しい部分があります。　
・画像アニメーション→スクロールしてから画像が表示される。キャプチャのタイミングによっては画像が撮影されない。
・パララックス効果→スクロールに合わせて背景がアニメーション。これもキャプチャのタイミングによっては背景が切れる。
・固定ヘッダその他の固定要素→スクロールしても常に上に張り付くナビゲーションメニュー等は、キャプチャアプリによっては、途中で何度も撮影されてしまう。
等です。

上記のSnagitも、WEBサイト全体を撮影する機能はあるのですが、ちょっとしたことで途中で途切れていることが多く、キャプチャはSnagitだけ使う、ということは無理でした。

その中で、どんなサイトもほぼ問題無く全体をキャプチャできた拡張機能が「Full Page Screen Capture」です。

この拡張機能は「WEBサイト全体（上から下まで）」のキャプチャに特化しています。

Snagitでのキャプチャ失敗の例（途切れている）

Full Page Screen Captureでのキャプチャ（成功）

Full Page Screen Captureのインストールと使い方

ブラウザウィンドウのフルページスクリーンショットを撮る最も簡単な方法。

追加の権限を要求することなく、現在開いているページ全体のスクリーンショットを確実かつ確実に作成できます。
拡張機能アイコンをクリックして（またはAlt + Shift + Pキーを押して）拡張機能がページの各部分をキャプチャしていることを確認し、スクリーンショットの新しいタブに移動、任意のフォルダに画像またはPDFとしてダウンロードできます。

高度なスクリーンキャプチャテクノロジは、他の拡張機能とは異なり、内部のスクロール可能な要素や埋め込みiframeなど、複雑なページを処理します。問題が発生した場合は、キャプチャページのカスタマーサポートフラグアイコンを使用して報告してください。
そうすれば、あなたとそれを使用する他のすべての人のために拡張機能を改善できます。
Full Page Screen Capture 英文を意訳

chrome ウェブストアよりインストールします。

ツールバーのアイコンをクリックすることでページ全体のスクリーンショットが取得できます。
キャプチャの処理中はパックマンのようなアニメーションが表示されます。

投稿 WEBページ全体のスクリーンショットを撮るならこれ。Chrome拡張【Full Page Screen Capture】 は studioDoghands に最初に表示されました。

ブログ内に外部WEBサイトのリンクを挿入したり、メールやチャットでホームページのアドレスを伝える時に便利なChrome拡張機能です。
同種の拡張機能はいくつかあるのですが、
・ワンクリックでクリップボードにコピー
・設定がシンプル
・「シンプル」設定の場合、タイトルとアドレス（URL）を改行してくれる
という部分が気に入って使っています。
開いている全部のタブの情報を取得する場合は「GetTabInfo」というChrome拡張機能がおすすめです。

BlogLinkClipperのインストール/使い方

インストール

chromeウェブストアからインストールします。
【BlogLinkClipper】

使い方

情報を取得したいページを開き、アイコンをクリックします。
ブログへの投稿であれば、「リンクタグ」を選べばOKです。

メールやチャット（ChatWorkやSlack）への添付であれば、「シンプル」を選べばよいでしょう。

クリックと同時に情報はクリップボードにコピーされているので、任意の場所にペーストして完了です。

サポートされている形式

Markdown: [ページタイトル](アドレス)
Redmine: “ページタイトル”:アドレス
MediaWiki: [アドレス ページタイトル]
JIRA: [ページタイトル|アドレス]
PukiWiki: [[ページタイトル:アドレス]]
DokuWiki: [[アドレス|ページタイトル]]
Hatena : [アドレス:ページタイトル=]

URL短縮について

URL短縮サービス「goo.gl」が終了しているので、本拡張機能のURL短縮機能は動作しません。
個人的にはアドレス短縮は使わない(まさに上記のように、サービス停止の可能性がある為)ので問題はありません。

「リンクタグ」形式の時に任意のクラスを追加できれば、とも思いますが、とにかくシンプルな使い勝手が便利な拡張機能です。

投稿 ブログやメールに便利。ウェブサイトのタイトルとアドレスをワンクリックで取得するChrome拡張【BlogLinkClipper】 は studioDoghands に最初に表示されました。

YouTubeの動画再生ウィンドウのみをポップアップ(ピクチャ・イン・ピクチャ)、デスクトップの一番手前に配置するChrome拡張機能です。

例えば、Photoshopの操作チュートリアルをYouTubeで視聴している時に、動画を見て、Photoshopに切り替えて、また動画に戻り…といった手間を省き、動画ウィンドウを脇に置いておくことができます。

Picture-in-Picture Extension (by Google)

chrome ウェブストアからインストールします。

Picture-in-Picture Extensionの使い方

YouTUbe動画を開いた状態で、Picture-in-Picture拡張機能のアイコンをクリックするか、ショートカットキー⌥＋P(WindowsはAlt + P)を押すことで、動画再生ウィンドウが分離します。ドラッグにより位置やサイズの変更が可能です。

再生、一時停止は画面のクリック、または画面を選択した状態でスペースキーを押すことで行います。

使い方動画

まず動画再生ページを開きます。

Picture-in-Picture拡張機能のアイコン

動画ウィンドウが分離、元の画面には「ピクチャー　イン　ピクチャー　モードで再生しています」のテキストが表示されます。

アプリをChromeから切り替えても、動画ウィンドウは常に一番手前に表示されます。

動画ウィンドウのクリック、またはスペースキーで再生/一時停止をコントロールします。

現状で気になる点

アイコン。最近のChrome拡張機能は、Chromeのダークモードに対応する為、オプション画面から明るめのアイコンを選択できるものがあります。本拡張機能はグーグル製なのですが、ダークモード用のアイコンが用意されておらず、（ダークモード利用者には）見づらいです。

挙動。再生、一時停止の挙動が不安定で、たまにコントロール出来なくなります。一旦ChromeのYouTubeページに戻り、何か操作（例えば再生ボタンのクリック）をすることで戻ります。

コントローラー。「チュートリアル動画を見ながらアプリ操作」「参考動画を見ながら執筆」等の使い方の場合、やはり巻き戻しや早送りはしたいところなので、再生/一時停止以外の操作もできると便利かもしれません。

投稿 動画学習に便利。YouTubeウィンドウを独立して配置できるChrome拡張Picture-in-Picture Extension は studioDoghands に最初に表示されました。

「Window Resizer」はブラウザのウィンドウサイズを指定して、サイズを変更することができるChrome拡張機能です。
アプリの外形サイズの指定は「BetterSnapTool」が優れているのですが、この拡張機能は「ホームページが実際に表示されている領域のサイズ」を指定することが出来ます。

これは、特にWEB製作者にはとても便利です。
近年のWEBは、スマホ、タブレットやラップトップ、デスクトップなどで表示が異なる為、色々なサイズ（特に横幅）の表示を確認しながら制作を進めます。
ブラウザをぐいっとつかみ、ざっくりと横幅を変えてみて変化を見てみる、という動作は現場では多く、逆に厳密にチェックするのであればそれぞれのデバイスで表示、後はChrome デベロッパーツールでサイズを指定、という感じになります。

「Window Resizer」であれば、良く使う画面サイズを複数指定、ショートカットも使えるので、とても使い勝手が良いです。

WEB制作者だけでは無く、
・プレゼンテーション用にWEBのキャプチャが複数必要。何回かに分けてスクリーンショットを取っているが、縦横比は統一したい。
・仕事中、ブラウザの位置を固定しておきたい。ずれてもショートカットで元に戻したい。
・4k以上の外付けディスプレイでフルサイズでWEBサイトを見るとレイアウトがおかしい。一般的なサイズにすぐに変更できるようにしたい。
等のシチュエーションに便利な拡張機能だと思います。

参考:BetterSnapToolについては下記の記事をご参考ください。
WindowsからMacに移行の際に戸惑う画面左右2分割の操作は【BetterSnapTool】で解決
アプリのタイトルバーを掴まず楽々ウィンドウ移動&サイズ変更【BetterSnapTool】

Window Resizerの概要

ブラウザウィンドウのサイズを変更して、さまざまな画面解像度をエミュレートします。

この拡張機能はさまざまな解像度をエミュレートするためにブラウザのウィンドウのサイズを変更します。

Web設計者や開発者が異なるブラウザ解像度でレイアウトをテストするのを手助けすることで特に役立ちます。
解像度リストは完全にカスタマイズ可能です（追加/削除/並べ替え）。
あなたは、ウィンドウの幅/高さ、ウィンドウの位置、プリセットアイコン（スマホ、タブレット、ラップトップ、デスクトップ）、さらにはウィンドウ全体またはビューポートだけに新しい寸法を適用するオプションを設定することができます。
拡張機能にはカスタマイズ可能なグローバルキーショートカット、設定をエクスポートして他のコンピュータにインポートするオプションなどもあります。
Window Resizer

Window Resizerのインストール

ChromeWEBストアからインストールします。

インストール完了後、ツールバーにアイコンが表示されます。

ちなみにアイコンはSettingsの

Change the icon style より変更可能です。Chromeのダークモードであれば、アイコンは「Light」等、明るめがお勧めです。
参考:Mac版Chromeがダークモードに対応！

Window Resizerを使ってみる

使い方は簡単です。

アイコンをクリックして表示されるウィンドウから任意のサイズをクリックすると、ブラウザのサイズが変化します。

ショートカットキーの登録

よく使うサイズは、ショートカットキーに登録しておきましょう。
設定画面の「hotkey」から登録可能です。

ブラウザの位置指定

サイズ指定時に、ブラウザがディスプレイ中央に移動するように指定することも可能です。

設定画面「Presets」から任意のサイズをクリックし、「Position」セクションのラジオボタンを「Center on screen」にチェックします。

投稿 ブラウザのサイズをがっちり指定。便利な無料Chrome拡張機能【Window Resizer】 は studioDoghands に最初に表示されました。

Chromeには様々はキーボードショートカットが用意されているのですが、ファイルダウンロード時にブラウザ下部に表示される「ダウンロードバー」を閉じるショートカットは有りません。
そこで、Chrome拡張機能を利用して設定する方法を紹介します。

下の画像が「ダウンロードバー」です。エリアを横に目一杯使うので、ブラウザで作業をしている場合は結構邪魔になります。

Close download barのインストール/設定

Close download barのインストール

chrome ウェブストアより拡張機能をインストールします。

Close download barの使い方

ダウンロードバーが表示されている状態で、「Alt + W」を押すと、ダウンロードバーが閉じます。

ショートカットはChromeのツールバーのアイコンから変更可能です。
「Close download bar」アイコンをクリック後「Change」リンクをクリックします。私は「⌥＋D」にしています。

まとめ

そもそもダウンロードバーを表示させない、または自動的にクローズする拡張機能もありますが、私の場合は一旦ダウンロードしたフォルダをダウンロードバーのプルダウンを使って開いておきたい場合が多いので、ショートカットで閉じています。

※「Finderで表示」は使いたい。

投稿 Chromeの邪魔なダウンロードバーをショートカットで閉じる は studioDoghands に最初に表示されました。

私はウェブサイトやアプリケーション制作の仕事をしていて、業務中は常にPC（Mac）に向い、ブラウザも開きっぱなしで、常にプロジェクトに関する調べ物をしています。
元々作業に対する集中力は褒められたものでは無く、調べ物をしていてふと気がつくと連想ゲームのように、最初の目的とは全く関係無いニュースサイトをじっくり読み込んでいることも良くあります。
このように、なかなか「意思の強さ」でコントロールできない事柄には、「強制力」を用いるのが適切です。

脇道にそれる「きっかけとなるサイト」

何度も「わき道にそれる」経験をしていると、そのきっかけとなるパターンが見えてきます。

プログラム情報サイトの下にちょっと見えたゴシップ記事をクリックしてしまい、連鎖的に関連記事をはしご。クライアントの業界について調べている内に大手キュレーションサイトがヒット、当然のごとく無関係のコンテンツのタイトルに惹かれて数十分、など。

思い切って、それらのきっかけとなるサイトは強制的にブロックしてしまいましょう。
何事もメリット・デメリットがありますが、私の場合は
「そのサイトで得られる仕事上の情報のメリット」
よりも
「そのサイトがきっかけで、仕事の目標達成に無関係な事柄に時間を費やしてしまうデメリット」
が大きいと感じた場合、どんどんサイトを閲覧不可能にしています。

サイトを強制的にブロックするクローム拡張機能【ウェブサイトブロッカー (Beta)】

サイトの閲覧をブロックするのに最適なChrome拡張機能【ウェブサイトブロッカー (Beta)】を紹介します。

ウェブサイトブロッカーのインストール

chrome ウェブストアのウェブサイトブロッカー (Beta)から、Google Chromeに拡張機能を追加します。

インストールされるとブラウザにアイコンが表示されます。

ウェブサイトブロッカーの使い方

使い方は簡単です。
ブロックしたいサイトを開き、「ウェブサイトブロッカー」のアイコンをクリックすると、下のポップアップが表示されます。
ブロックする時間を指定して、「これでブロックする！」ボタンをクリックして完了です。
デフォルトの「00:00から23:59まで」の場合は常にブロックされます。

その後、ブロックしたサイトにアクセスすると、下記の警告が表示され、サイトへのアクセスは禁止されます。

投稿 気がつけば一時間・・・ついつい見てしまうサイトを時間指定でブロック【ウェブサイトブロッカー】 は studioDoghands に最初に表示されました。

Googleの検索結果から、自分にとって必要の無いウェブサイトをNG登録して、次回の検索結果からブロックしましょう。
便利で簡単なChrome拡張機能「uBlacklist」が提供されています。
現在機能していない「Personal Blocklist (by Google)」からの切り替えもおすすめです。

情報収集に邪魔になるサイト

特定の情報を調べるときに、大量のまとめサイトやゴシップサイトに阻まれ、なかなか欲しい情報にたどり着けないことがあります。

また、自分の専門分野の情報について知りたい場合は、初心者向けの解説サイトなどは検索結果から除外したいこともあるでしょう。

料理レシピなども「正式な物だけ調べたい。個人の工夫レシピは必要ない」という場合もあるかもしれません。

そんな時、Chrome拡張機能をインストールすれば簡単に検索結果から特定のサイトを非表示にすることができます。

「uBlacklist」のインストール

chromeウェブストアの拡張機能ページからインストールします。

「uBlacklist」の使い方

インストールすると、Googleの検索結果のサイトアドレスに続き「このサイトをブロックする」のテキストが表示されます。

ブロックしたいサイトでクリック、ポップアップしたウィンドウで「OK」をクリックして完了です。

ブロックの解除

ブロックしたサイトを再び検索結果に表示してみます。
拡張機能のアイコンを右クリック→「オプション」で表示されるサイトのリストから、検索結果に表示させたいサイトを選択して削除、保存して完了です。

この他、Personal Blocklistの代替拡張機能のひとつに検索結果から邪魔なサイトをNG登録。快適で効率的な情報収集をしよう【uBlacklist】(Personal Blocklistから乗り換え) は studioDoghands に最初に表示されました。

あっという間に大量にブラウザに溜まってしまうタブ。
Chrome拡張「Workona」はこれらのタブを任意の項目にまとめ、整理・保存してくれます。
私が手放せない拡張機能のひとつです。

【Workona】の概要

仕事、調べ物、YouTubeで暇つぶしなど、Chromeを立ち上げてしばらくすると雑多なタブが並び始めます。
そこで一気にタブを閉じたいところですが、例えば特定のプロジェクトの最中の場合「毎回立ち上げるサイト」が決まっていて、これらのサイトをまた1から開いていくのは時間と手間の無駄になってしまいます。

このような「毎回立ち上げるサイト」をひとかたまりにしてラベルを貼って保存、必要なときに一気に開いてくれるのが【Workona】です。

Workonaのインストール

公式サイトでアカウント登録が必要です。

https://workona.com/

アカウントを登録し、Chromeへ拡張機能をインストールします。

Workonaの使い方

Workonaをインストールすると、左側に小さなタブが表示されます。これが現在の「ワークスペース」を示すアイコンです。
「ワークスペース」は複数のタブをまとめたブロックです。

「ワークスペース」のタブをクリックすると、このような画面が表示されます。

これらは既に利用しているワークスペースで、クリックするとそれぞれのタブが立ち上がります。
例えば「apps」をクリックすると、私がアプリの登録などで良く使うページがまとめて開かれます。

ワークスペースを追加してみる

新しいワークスペースを追加してみます。
プログラムの情報収集に良く使うワークスペースを作ってみましょう。

「＋」を押して「New Workspace」をクリックします。

ワークスペースの名前を登録します。とりあえず「Program」とします。

「Quita」「Teratail」「ドットインストール」「GitHub」などのプログラミングサポートサイトをタブで開き、完了です。

次回から、「Program」ワークスペースをクリックすると、これらのサイトが開きます。

Workona関連記事

タブをグループ単位でまとめるChrome拡張Workonaの便利なショートカット基本の3つ

投稿 Chrome拡張【Workona】でよく使うタブを目的別に整理、名前を付けて保存する は studioDoghands に最初に表示されました。