xshoji's blog

#Bookmarklet

3 posts tagged with Bookmarklet
5 min read

iOS Safari でブックマークレットからいきなりペースト許可 UI を出す方法

はじめに

iOS Safari で動かすブックマークレットから、クリップボードに入っている JSON を読み取りたかった。

最初に書いた処理は単純で、ブックマークレットを実行したら入力用モーダルを作り、 navigator.clipboard.readText() を呼ぶというものだった。

ところが、新しいタブで最初に実行したときだけ、 iOS のペースト許可 UI が出ない。 iOS のペースト許可 UI というのは以下のようなやつのこと。

読み取りも失敗する。 同じページでもう一度ブックマークレットを実行すると、今度は動くことがある。

いくつかの方法を試した結果、次の順番にすると新しいタブの初回でも動作した。

続きを読む
2 min read

Wayback Machine で過去のページを手軽に確認できる Bookmarklet

調査や資料集めの際、手元にあるURLにアクセスすると

  • 過去に見れていたページが消えている
  • ページの内容が変わってしまっている

といった事がよくあります。 そんな時に便利なのが Wayback Machine です。 Wayback Machineは過去に保存されたWebページのスナップショットを閲覧できるサービスです。

で、Wayback Machineにアクセスして、URLを入力して、過去のスナップショットを探せば話は終わりなんですが、若干面倒です。もっと手軽にできないかと思い、めっちゃシンプルなBookmarkletを作成しました。

このBookmarkletをブラウザのブックマークバーに登録しておくと、閲覧中のページのWayback Machineのスナップショット一覧ページをワンクリックで開けます。

特に、スマホで記事を見たときに「あれ、前と内容が違う?」と思ったときにすぐに確認できるのが便利です。

続きを読む
6 min read

Webページをスマホ向けのデザインに最適化する Bookmarklet

普段 iPhone を使っていて、Safari でブログをよく読むのですが、スマホ向けに最適化されていないページがまだ多く、見にくいと感じることがよくあります。 Safari には「リーダー表示」という機能があり、記事本文だけを抽出して見やすく表示できますが

iPhoneのSafariで記事を読んでいるときに気をそらすものを非表示にする - Apple サポート (日本)
https://support.apple.com/ja-jp/guide/iphone/iphdc30e3b86/ios

リーダー表示に対応していないページもあります。また、リーダー表示にしても、コードブロックや文中の変数のスタイルがわかりにくく、痒いところに手が届かないと感じることがあります。

そうした悩みがあり、スマホ向けに最適化されていないページを見やすくする Bookmarklet(ブックマークレット)を作成しました。 今回は作成した Bookmarklet の紹介と使い方を説明します。

続きを読む