FC2ブログ
TOP > CATEGORY - Chrome関連

ITやモバイル機器、iPhone、手帳や本など。
MENU

iPhone版ChromeでPCのブックマークレットを発動する方法

2019013000.png



情報管理LOGの@yoshinonです。
一昔前のiPhoneのSafariやChromeってJavaScriptがうまく作動しなかったイメージが強いのですが、最近ずいぶん改善されましたよね。そういうわけで最近のChromeでは、PCのブックマークレットがほぼ動く感じになっています。
今回は、iPhoneでもPCのブックマークレットを発動させる方法についてです。


  
【 iPhone版ChromeでPCのブックマークレットを発動する方法 】  

 1.最近はJavaScriptが動く!

 2.iPhoneのChromeからPCのブックマークレットにアクセスする方法

 3.動かない場合にやること







checkmark.png 1.最近はJavaScriptが動く!

SafariにしてもChromeにしても、初期の頃は、ブックマークレットが動くものと動かないものがあったり、挙動が怪しかったりというのが多かったのですが、最近ではずいぶんそれぞれ発動できるようになってきました。特にiPhone版Chromeは、自分の中ではかなりの確率で動くと思っています。

ちなみに、iPhoneでブックマークレットを発動させるとこうなります。
今回は、そのページがTwitterどのように言及されているのかを調べるブックマークレットです。
はい!

Image from Gyazo


ちゃんとできましたね。



checkmark.png 2.iPhoneのChromeからPCのブックマークレットにアクセスする方法

さて、知っている人は知っていると思いますが、Chromeの場合、いちいち「これは、PC用のブックマークレット」「これは、iPhone用のブックマークレット」などと分けなくても構いません。PCからでも、iPhoneからでも、同一アカウントでブラウザにログインしていれば、同じブックマークにアクセスすることができるのです。これ、知らない人案外いるのではないかと思っています。

やり方としては、Chromeのブックマークにアクセス。

2019013001.png



通常は、「モバイルのブックマーク」が出てくると思われるので、「戻る」をタップ。

2019013002.png



この段階で、すでにPC版のブックマークが見えてます。

2019013003.png



「ブックマークバー」にアクセスしてみます。
※私は、ブックマークバーにブックマークレットを入れているのです。
こんな感じですね。ちゃんとPC版Chromeのブックマークバーにアクセスできました。

2019013004.png



ちなみに、PC版Chromeでモバイルのブックマークにアクセスする方法は、上の三点アイコンをクリックして「ブックマーク」をクリック。

2019013005.png



そうすると、一番下に「モバイルのブックマーク」があります。

2019013006.png




checkmark.png 3.動かない場合にやること

さて、iPhone版Chromeでブックマークレットが動かないまたは、正常に機能しない場合は、モバイル版のサイトにそもそもその要素が見当たらないなどが考えられますので、このように対処してみてください。

下のメニューから「PC版サイトを見る」をタップします。

2019013007.png



そうすると、PCで表示されるのと同じサイトが表示されるので、その状態でブックマークレットを発動させてみてください。

あと、意外にやっかいなのがAmazonです。
ChromeでAmazonにアクセスすると、基本的にはモバイル用のサイトが表示されます。こんな感じね。

2019013008.png



で、これを上と同じ手順で「PC版サイトを見る」にしてみます。そうすると、真っ白になってしまうのですよね。

2019013009.png



でも、へこたれるな!そのまま進め!
というわけで、今度は、その真っ白な状態のページで「再読み込み」をします。

2019013010.png



そうすると、また同じページが開かれます。

2019013011.png



しかし、めげずにもう1回「PC版サイトを見る」をタップ。

2019013012.png



なぜか、今度はちゃんとPC版が表示されました。なぜだ…??
理由は良く分かりませんが、そのような仕組みになっています。

2019013013.png



PC版Amazonになると、普通にブックマークレットが動くので、このようなことができます。

Image from Gyazo




eyeglass2.png 情報管理LOGの眼
 iPhone版ChromeのPCとの親和性の高さよ!

私は、iPhoneでもSafariではなく、Chromeを愛用しています。今回紹介したようにPCとの相性が抜群なんですよね。パスワードもブラウザにログインしていれば、ちゃんと同期されるので、iCloudのキーチェーンで同期されるよりも、さらに便利だし。PCでChromeを使っていれば、そのタブも同期されるし、ということで至れり尽くせりなのです。そういうわけで、ブックマークレットを多用されている人は、iPhoneでもChromeが正解かもですよ?




ブックマークレットをショートカットキーで発動させる拡張機能がすごい!

2018102700.png


情報管理LOGの@yoshinonです。
PCでブラウジングしているときは、なるべく無駄な動きをしたくはないですよね。
今回は、ブラウジングをキーボードでしている方にとって、良い情報ですよ。組み合わせによっては、ちょっと魔法かよ!と思えるような動きも可能になります。



  
【 ブックマークレットをショートカットキーで発動させる拡張機能がすごい! 】  

 1.Keyconfigという拡張機能があったのさ

 2.ShortKeysという拡張機能

 3.ShortKeysにブックマークレットを登録する

 4.ブックマークレットを発動させる







checkmark.png 1.Keyconfigという拡張機能があったのさ

まず書いておきたいのは、今回紹介するShortKeysという拡張機能があるのですが、それ以前に愛用していたKeyconfigという拡張機能についてです。

これは、Chromeの拡張機能でショートカットキーによって、Chromeを自在に操ることができるという非常に便利なヤツでした。
しかし、Chromeのバージョンアップによって、拡張機能が対応しなくなり、消え去ることに…。

このあたりのことは、ここの記事に詳しく書かれています。

Keyconfigが消えたので代替Chrome拡張機能の使い方とか紹介


何気に多用していたのですが、なくなると困ってしまいます。
そこで、上の記事で紹介されていた、ShortKeysという拡張機能を導入してみることにしました。




checkmark.png 2.ShortKeysという拡張機能

上の記事でも書かれているのですが、この拡張機能は、KeyconfigにようにショートカットキーでChromeを操作できるだけではなく、ブックマークレットも起動できるとあるではないですか!
Keyconfigでもできていた素晴らしき機能なので、これができるだけでも導入の価値ありです。
というわけで、ここからダウンロードしましょう。

Shortkeys (Custom Keyboard Shortcuts) - Chrome ウェブストア
Shortkeys (Custom Keyboard Shortcuts) - Chrome ウェブストア







checkmark.png 3.ShortKeysにブックマークレットを登録する

ShortKeysにブックマークレットを登録しましょう。

ShortKeysのオプションを開くとこのような画面が出てきます。「Add」で追加しましょう。

2018102701.png



まずは、どのキーで発動させるかを決めます。他のショートカットキーとかぶらないようにしましょう。

2018102702.png



次に何と関連付けるかを決めます。
色々な機能が、予めプリセットされています。今回は、ブックマークレットを発動させるので、そのあたりの部分から選択します。

2018102703.png



そうすると、ブックマークとして登録されているものが、一覧から選択できるので選びましょう。今回は、ブロガー必携の「カエレバ」を選びました。

2018102704.png



そして、Activation Settingでさらに詳細設定をしていきます。
ここにチェックを入れると、フォームで入力中も発動してしまうので、チェックを入れません。

2018102705.png



さらに、Amazonでのみ発動して欲しいので、URLもこのように指定します。

2018102706.png


これで、準備OKです。
では、実際に発動するか実験してみましょう。



checkmark.png 4.ブックマークレットを発動させる

Amazonさんで紹介したい商品を表示します。
最近購入した鋳造ペグです。なかなか良いですよ。オススメです。




このページでショートカットキーを押すと…

2018102707.gif


ハイ!できました!
これで、いちいちマウスで呼び出さなくても済むようになりました。素晴らしいですね。



eyeglass2.png 情報管理LOGの眼
 ショートカットキー大好きです

基本的にキーボードから指を離さずに作業したい人なので、なるべくショートカットキーを覚えるようにしています。そうすると、今までの作業速度がなんだったんだというぐらいには、早くなります。これは、1年間総量に換算すると、案外バカにならないのですよね。
ちなみに、私はカーリルやそのサイトでのTwitterの話題を見るブックマークレットなどを登録しています。快適快適!


めしにしましょう」の6巻出ましたね!

iPhone版Chromeがアップデートで使いやすくなったよね

2018091800.png



情報管理LOGの@yoshinonです。
iPhone版のChromeが、先日のアップデートで使い勝手がかなり上がりました。どのよううにアップデートされたか見ていきたいと思います。


  
【 iPhone版Chromeがアップデートで使いやすくなったよね 】  

 1.ナビゲーション関係が下の方に!

 2.長押し便利!

 3.細かい改良







checkmark.png 1.ナビゲーション関係が下の方に!

iPhone版Chromeが、先日アップデートしました。

2018091801.png



久々の大型アップデートで使い勝手が、かなり向上しました。
まず、何よりもナビゲーション関係が下の方に配置されたことです!
コレめちゃくちゃありがたい!!

2018091802.png



以前のバージョンは、全部上の方にあったので、いちいち指を伸ばさなくてはいけませんでした。Googleなのに、随分不便だなと思っていたのですが、やっと改良が加えられ一安心です。
こちらが、前のバージョン。

2018091803b.png




検索もナビゲーションボタンも、メニューも全て下の方にあるので、親指一つで難なく操作できるようになりました。今までのもどかしい感じが一掃され、快適性がグッと上がりました。




checkmark.png 2.長押し便利!

メニューの長押しをすることによって、様々なことが出来るようになりました。
ナビゲーションボタンを長押しするとページ履歴が出るのは、まあ以前からできましたが、

2018091804.png



検索ボタンを長押しすると、このようにここからQRコードリーダーを立ち上げたり、音声検索もできるようになりました。

2018091805.png



タブボタンを長押しすると、ここから新しいタブを立ち上げたり、シークレットタブを作成することもできます。

2018091806.png




checkmark.png 3.細かい改良

さらに、今回のアップデートは、細かな改良が加えられています。
例えば、タブの管理は、タイル上に背理される形になりました。以前のバージョンは、このように重なって表示されていましたが、

2018091807.png



このようにタイル状に変更。

2018091808.png



Chromeを使っている別端末で開いているタブ情報も簡単にアクセスできます(以前もあったけど、アクセスしやすくなりました)。

2018091809.png



メニューもアイコンが表示され、視認性がアップしました。

2018091810.png



ちなみに、タブ間の移動に関しては、こんな感じで下のナビゲーションバーか、上のURLバーをスワイプするだけでできるのです。

2018091811.gif




 eyeglass2.png 情報管理LOGの眼
 片手操作がしやすくなるのは良い流れ

とにかく毎日使うモノなので、ナビゲーション関係が見直されたのは、非常にありがたいですね。これによって、使い勝手が一段階も二段階も上がった感じがします。こういうちょっとしたUIの改良が積み重なりが、日々のストレスを軽減してくれるのですよね。


これ、買いました。軽くて小さくて、すごく良い!



Chromeを超速で使いこなすための使えるショートカット

2018010800.png


情報管理LOGの@yoshinonです。
先日アップした「私がChromeで固定タブにしているサイト」という記事が、評判が良かったようで、思ったよりもたくさんの人に読んでいいただけました。
さて今回は、私がChromeでブラウズするときに用いているショートカットをご紹介します。これを使いこなすと、かなり便利にChromeを使いこなせます。私もショートカットを使う前と後では、何倍も効率が変わりました。


  
【 Chromeを超速で使いこなすための使えるショートカット 】  

 1.タブ操作関係のショートカット

 2.ページ閲覧関係のショートカット

 3.検索関係のショートカット

 4.その他便利なショートカット







checkmark.png 1.タブ操作関係のショートカット

まずは、タブ関係のショートカットからです。
Chromeにおいては、タブを制するものChromeを制すぐらいには、重要!

1.Ctrl+W :タブを閉じる
何を差しおいても、これだけは覚えておけ的ショートカットです。



2.Ctrl+T :新しいタブを開く
これは、「4.その他便利なショートカット」で複合技で紹介しますが、とりあえず頭に入れておいてください。新しいタブを作成し、そこに移動します。



3.Ctrl+1~8 :特定のタブを開く
2018010801.png

左端のタブから1~と番号で割り振られています。例えば、左端から4番目のた部を開きたければ、

Ctrl+4

で開けます。これの何が便利かというと、こちらの記事と併せて読むとよく分かるはずです。

Bookmarklet: instantly generate a Card for any web page. | Embedly

Chromeでは、よく開くページを固定タブとして、タブをミニマルに左側に寄せておけるのです。Ctrl+番号で左から何番目というのを覚えていたら、何も考えずにそのタブをすぐに表示できます。私は、GmailやGoogleカレンダーなども固定タブにしているので、仕事で使う場面などは、サクサクと切り替えて使えるので、超便利です。



4.Ctrl+9 :最後のタブ
なぜか、Ctrl+9 だけは、最後のタブなんですよね。固定タブは、8個までにしておけよという無言のメッセージなのかもしれません。複数のリンクをバックグラインドで開いておいて、最後のタブに瞬間移動とかで使っています。



5.Ctrl+Tab or Ctrl+Shift+Tab :前後のタブに移動
タブ間を自由に前後に行き来します。

たぶん、この段階で気づかれた方もいらっしゃるかもしれませんが、Chromeのタブ関連のショートカットは、ほとんどキーボードの左側に偏っています。




checkmark.png 2.ページ閲覧関係のショートカット


1.Space or Shift+Space :上下スクロール
まあ、基本中の基本ということで…。



2.Home or End :ページの先頭or最後に移動
アレ?もう1回!とかいう時にHome使って最上部に戻ったりしています。逆に関連リンクのみ見たい時にEndキーで一気に最後まで移動したりとか。



3.Alt+←→ :戻る、進む
これも、基本のショートカットということで。




checkmark.png 3.検索関係のショートカット

検索関係を以下に素早くできるかというのが、Chromeを制することにつながるので、必須ショートカットです。

1.Ctrl+F → F3:ページ内検索
超基本のショートカットですが、かなり使います。実は、Ctrl+Fじゃなくて、いきなりF3でも検索できるんですよね。私は、ついつい他のショートカットでCtrl+Fが身についているので、それをつかってしまいますが。なので、これから常用しようかな?と思っている人は、F3で覚えた方が良いかも。

Chromeは、検索した結果がページ内のどの辺にあるかを示してくれるので、ありがたいですよね。F3を連打して、その場所に即移動です。
※さらに実は、Ctrl+G でも、検索結果に移動できるのですが、逆にF3で慣れてしまっているので…色々ちぐはぐだな>自分。自然な流れとしては、Ctrl+F → Ctrl+G が正解です。

2018010803.png



2.Ctrl+K :Googleで検索
規定の検索エンジンで検索できます。たいていの人は、Googleだよね?

2018010804.png




checkmark.png 4.その他便利なショートカット


1.F11 :全画面表示
私は、Chromeの拡張機能でMomentumというのを使っています。これは、新規タブにこのようなクールな感じの写真と時間を表示してくれるものです。



格好いいですよね?

Bookmarklet: instantly generate a Card for any web page. | Embedly


で、座席を離れる時にCtrl+T で新規タブを表示させると、前述のMomentumが立ち上がるので、すかさずF11を押すと全画面表示され、一種のスクリーンセーバーとして機能するわけです。




2.Ctrl+T → K :新規タブ→即検索
これは、本当によく使いますね。
今見ているページを消したくない場合、新規タブを開いて(Ctrl+T)、アドレスバーで検索(Ctrl+K)という流れです。




3.Shift+マウスで複数タブ選択 → Ctrl+W :複数タブ削除
Shiftキーを押しながら、消したい範囲のタブの最後をマウスでクリックすると、複数タブの選択ができます。そして、Ctrl+Wをすると、複数タブを一気に削除することができます。

2018010802.gif




 eyeglass2.png 情報管理LOGの眼
 速さは正義なのです

Chromeのショートカット?
んなもん、Ctrl+Fぐらいで十分だよ!
とか、言われそうですが、でもね毎日使うものだからこそ、サクサクと使えると気持ちが良いですよ。とはいえ、やり過ぎると、

「ナニソレ!速い! そして、キモい」

となってしまいますけどね。でも、キモいぐらいでちょうどいいんです。たぶん。


ログハピ!の中の人の本です。
アンリミでも読めますよ!オススメです!



iOSのChromeやSafariは、もはやURL送る必要もない

2018010700.png


情報管理LOGの@yoshinonです。
当初は、私の中ではかなり評判の悪かったiOS11ですが、11.2になって、だいぶ安定してきましたよね。
さて、これはiOSのどのバージョンからだったかは忘れてしまいましたが、iOSで複数機器がある場合、SafariもChromeも常にURLが自分のアカウントで常に共有されているのです。
このおかげで、iPhoneで探したサイトをiPadで続きを読んだりということが、苦もなくできるのです。今回は、知っている人は、当たり前のように使っているけど、知らない人は損をしているこのTipsについてです。


  
【 iOSのChromeやSafariは、もはやURL送る必要もない 】  

 1.Safariの場合

 2.Chromeの場合







checkmark.png 1.Safariの場合

まず、冒頭の段階で何を言っているのかわからない人にとっては、全く意味不明だと思われますので、もう少し丁寧に説明します。

SafariやChromeでは、iPhoneやiPadなどでデバイスを変えても、同じアカウントであれば、いつでも先ほどまで見ていたサイトの続きを読むことができるのです。

例えば、iPhoneのSafariの場合は、右下のこの部分をタップして、タブを表示させます。

2018010701.png



上にスワイプすると…

2018010702.png



このようにiPad miniで見ているサイトの一覧が現れてきます。

2018010703.png



タップすると、そのサイトを読むことができます。

では、逆にiPad miniではどうなるかというと、右上のタブを表示させるボタンをタップすると

2018010704.png



このように表示されますね。下の方を見てみると…iPhoneで見ていたサイトの一覧が見られます。

2018010705.png



これは、iCloudタブという機能です。

iCloud タブの設定と使用 - Apple サポート
iCloud タブの設定と使用 - Apple サポート




iOS11からのようですね。
ただし、設定をしていないと機能しないので、以下のように設定してみてください。

設定 → アカウント名

2018010706.png



iCloudをタップ

2018010707.png



Safariをオンにする

2018010708.png



これで、この機能が使えます。




checkmark.png 2.Chromeの場合

Safariは、iOSのさらにiCloudタブを有効にしておくということが必要でしたが、Chromeはさらにその上を行きます。
なんとChromeは、PCだろうが、iPhoneだろうが、Androidだろうが、同じアカウント上で同じことができるのです。

Chromeの場合、使っている全てのChrome上でログインしておく必要があります。しかし、実際にChromeを使っている人でログインしていない人なんていないですよね?一応、iPhoneでのログインの仕方について書いておきます。

iPhoneのChromeを立ち上げて、右上のメニューをタップし、「設定」をさらにタップ。

2018010709.png

2018010710.png



一番上にログインというような項目が表示されている人は、そこからGoogleのアカウントでログインしてください。

2018010711.png




さて、Chromeでログインできていると、右上のメニューから「最近使ったタブ」をタップすると

2018010712.png



このようにChromeで同一アカウントでログインしている全てのデバイス上で開かれているタブを見ることができます。
もはや、デバイスなんて関係ないというのが、素晴らしいですよね。

2018010713.png



しかも、PC版にいたっては、各デバイスのタブがリアルタイム同期されるのです。




eyeglass2.png 情報管理LOGの眼
 常に同期されている心地よさ

以前は、自分がサイトを読んでいるデバイスから他のデバイスにURLを送るために、アプリなどを利用してやっていました。しかし、今やそんな煩わしいことをしなくても、簡単にまるでタブを切り替えるのと同じ気楽さでできるようになりました。この気楽さに慣れてしまうと、もはや元に戻れないなと思ってしまいます。
特にGoogle Chromeは、その辺りの設計が非常にうまいなとおもってしまいます。


やっとこの本を読み始めました!
かなり面白いですよ。これ。



このカテゴリーに該当する記事はありません。
SEO
loading
情報管理LOG