ラベル chrome の投稿を表示しています。 すべての投稿を表示
ラベル chrome の投稿を表示しています。 すべての投稿を表示

2017年10月29日日曜日

スマホでブックマークレットを登録して使う方法【Android版Chrome編】

スマホやタブレットでもブックマークレットを使うことができるがPCとは登録方法や使い方が少し異なる。スマホ初心者のためにスクリーンショットを入れて解説する。

初心者のためにブックマークレットについてひとつ注意しておきたいことがある。 ブックマークレットの効果は実行したときに表示していたページだけに有効だ。ページを再読み込みしたり違うページに移ったりしたら効果は消える。

では始めよう。

ブックマークレットを登録する


ダミーのブックマークを登録し、その名前をブックマークレットの名前をコピペして書き換え、URLをブックマークレットのアドレス(javascript)をコピペして書き換える。では順番に説明する
  1. まずダミーのブックマークを登録する。適当なページでブラウザメニューを開く。


  2. ☆マークをタップすれば表示中のページがブックマークに登録される


  3. 次は今登録したブックマークを編集していく。まずは名前の書き換えだ。ブックマークレットを置いてあるページを表示してブックマークレットのリンクを長押しする


  4. メニューの「リンクテキストをコピー」タップする


  5. ブラウザメニューを開き「ブックマーク」をタップする


  6. リストからダミーで登録したブックマークを見つけ右端の3点マークからメニューを開く


  7. メニューの「編集」をタップする



  8. 名前の適当な場所を長押しして「全て選択」をタップ


  9. 全て選択された状態で「貼り付け」をタップしてリンクテキストを貼り付けて名前を書き換える。(ここでは元の名前を尊重する手順を示したが自分が分かりやすい使いやすい好きな名前にして構わない)

  10. 書き換えた名前はブックマークレットを実行するときに必要になるので覚えておく。左上の←マークで編集を終了する


  11. 右上の×マークでブックマークリストを閉じる


  12. 元のページに戻るので今度はURLの書き換えだ。再びブックマークレットのリンクを長押しする


  13. 今度はメニューの「リンク アドレスをコピー」タップする


  14. ブックマークリストを表示させリストからさっき名前を書き換えたブックマークを見つけ右端のメニューから編集画面を開く


  15. URLの一部を押すと全て選択状態になるので「貼り付け」をタップしてリンクアドレスを貼り付けてURLを書き換える

  16. URLを書き換えたらブックマークレットの登録が完了。ブックマークリストを閉じて終了。(豆知識:ブックマークレットのURLはjavascriptというプログラミング言語のコードになっている)



ブックマークレットを使う


  1. 表示中のこのページでブックマークレットを使おう。アドレス欄に登録済みのブックマークレットの名前を入力する



  2. するとドロップダウンリストの候補一覧にブックマークレットが表示されるのでタップする。このときブックマークレットが実行される


  3. 実行した後は元のページに戻る。実行の効果はブックマークレットによってさまざまだ。(ZoomMe実行後の拡大操作についてはZoomMeのページを参照)


以上で解説終わり。あなたがブックマークレットを使えるようになっていれば嬉しい。

2017年10月25日水曜日

スマホサイトをピンチで拡大できるようにするスマホ用ブックマークレット

スクリプトを書いてブックマークレットにしたけど書いた後でブラウザやandroidの設定で拡大できることを知った。
  • android版firefoxでは「設定」→「アクセシビリティ」 で「ズームを常に有効にする」をオンにする
  • android版chromeでは「設定」→「ユーザー補助機能」で「強制的にズームを有効にする 」をオンにする
  • androidは設定→ユーザー補助→拡大操作をONにすればすべてのアプリで表示を拡大できる

スマホやタブレットのブラウザでモバイルサイトを見るとき拡大できないことがある。視力の悪い人間にとっては不便この上ない。で拡大できるようにするスクリプトを書いてgist.github に「スマホサイト(モバイル用ウェブページ)を拡大(ズーム、拡大縮小)できるようにする」を公開した。
上記スクリプトを簡単に使えるようにブックマークレット化した。
動作確認ブラウザ:firefox(nightly)58, chrome61 (いずれもandroid7.0)

ZoomMe! v.0.1.1インラインコード版←これをブックマークに登録して、拡大したいページを表示しているときに実行する。特に結果表示はしないので実際にピンチで拡大操作して効果を確認。
スマホでブックマークレットを登録して使う方法【Android版Firefox編】
スマホでブックマークレットを登録して使う方法【Android版Chrome編】

【Chromeでの拡大操作の仕方】
ChromeではZoomMe実行後そのままピンチで拡大操作しても拡大できない。次のどちらかのやり方で拡大できる。
  • 少しスクロールさせて新しい部分を表示させてそこに一方の指を置いてピンチする
  • ブラウザのメニューからページ内検索を表示させそれを閉じてからピンチする
一度拡大に成功したら後はどこでピンチしても拡大できる

備考

firefoxならアドオンの tampermonkey を入れてこのスクリプトのリンクに飛んでインストールするのもいい。いちいちブックマークレットをタップする面倒もなくページを開いたときに自動で実行されるようになる。
*自分の環境では tampermonkey へのスクリプトインストールが1回で成功しない。「インストール」ボタンを押してページが自動で閉じたら成功なのでそれまで何度もボタンを押す必要があった。

実行したいときだけ実行するほうがいいならブックマークレットがいい。