[レベル: 上級] Chrome 81 の安定版を Google はリリースしました。 Chrome 81 に追加された新機能の 1 つに、リンク先の特定の場所に直接スクロールし指定したテキストをハイライト表示する機能があります。 #:~:text= で移動&ハイライト Chrome 80 で実装したと Google はアナウンスしていましたが、実際に利用できるようになったのは Chrome 81 です。 ページの URL に #:~:text=○○○ を追加します。 ○○○ は、リンクをクリックしたユーザーをダイレクトに連れていきたい場所のテキストです。 たとえば、次のような URL としてリンクします。 https://webmaster-ja.googleblog.com/2020/04/how-to-pause-your-business-online-in.html#:~:tex

Oculus GoのブラウザにPCからテキストデータを渡してフォームに入力できるツールを書きました。 擬似的にOculus GoのブラウザでPCのクリップボード貼り付けを行えるよという感じです。 azu/no-clipboard-app: Share your clipboard text to your device like Oculus Go. Oculus Goには日本語IMEやクリップボード機能がありません。 これはOculus Go上のブラウザでも同様です。 Oculus GoのブラウザについてのWeb開発者目線からのまとめ - Qiita Chromeがデフォルトです。Samsung Internet VRもapkをadb経由で入れると動きますがこちらもクリップボード機能はありません。 そのため、日本語を入力する手段がなかったり長いテキストをOculus Go上で入力するのは

Intro 「毎回やるなら bookmarklet にでもすれば?」と言ったら、後輩が「そんな便利なことできたんですね、知りませんでした」と言っていた。 そんな時代にこそ、今更だれも解説しないであろう、 bookmarklet という技術についてもう一度書いておく。 Bookmarklet 簡単に言えば、 JS を書き、それを Bookmark として登録すれば、クリックするだけで現在のページでそれが動くというものだ。 ブラウザ上で何かを自動化したいと思うなら、最も簡単に実現できる便利な技術だろう。 似たような手法ではブラウザの Extension などもあるが、 Bookmarklet の良いところは一切誰にも邪魔されないというところだ。 開発者登録も、ストアへのアップロードも、難解なドキュメントを忖度して煩雑な設定ファイルを書く必要もない。 開発者ツールで、「こんなことできないかな」と

インターネットが幅広く普及してきたことによって、あらゆる人たちに対して等しく情報が提供できなければなりません。政府、自治体系であればユニバーサルデザインが求められるようになっており、Webサイトにおいても多くのデバイスに対して見やすく、正しく情報が届けられるような機能、デザイン性が求められています。 今回はそんなWebアクセシビリティを高めるために使えるライブラリを紹介します。 tota11y – an accessibility visualization toolkit ブックマークレットとして提供されており、実行するとメニューが表示されます。そしてヘッダー情報であったり、リンクテキスト、画像のaltなどの一見すると見られない情報が表に出てきます。 Hurtak/toggle-css-bookmarklet: Toggle css with one click スタイルシートの有効、無

2015-03-12 オライリーブックスの概要をTOKIOのメンバーがしゃべるブックマークレットを作った とくに意味はない var members = ["長瀬", "松岡", "城島", "山口", "国分"]; var textList = $("#detail p").text().split("。"); textList.pop(); // remove var newText = textList.reduce(function(a, t, i){ var p = (members.length > i) ? i % members.length : i; return a+members[p]+"「"+t+"」<br />"; }, ""); $("#detail p").html(newText); http://let.hatelabo.jp/laiso/let/hJmfg

電子書籍端末の高解像度化にKindle書籍が付いてきていない Kindle Voyage、Full HD以上のタブレットなど、高解像度なディスプレイを搭載した電子書籍端末が珍しいものでなくなってますが、それら高画質な端末を使っても、画像型Kindle書籍は依然ぼんやりと見えます。 画像型Kindle書籍に内包される画像ファイルの解像度（画像サイズ）が端末のディスプレイ未満だからです。 画像型Kindle書籍に内包される画像ファイルがどのぐらいの解像度（画像サイズ）なのかを調べる方法はないのでしょうか？ Kindle Cloud Readerで解像度（画像サイズ）が調査可能 KindleにはKindle Cloud ReaderというWeb版のリーダーがあります。 Kindle Cloud Reader Kindle Cloud ReaderにKindle書籍を表示させると、Webブラウザを

使い方 使い方は簡単で、ファイル名を渡すかパイプでJavaScriptコードを渡せば、javascript: から始まるブックマークレットとして使える文字列を返してくれます。 $ bookmarkletter code.js # or $ cat code.js | bookmarkletter # Broserifyと合わせるケース $ browserify code.js | bookmarkletter

ユーザースクリプト（Firefox＋Greasemonkey、Google Chrome拡張機能等兼用）も作ってみた。 【近傍ツイート検索】特定ツイート前後のタイムラインを表示するユーザースクリプト試作 - 風柳メモ WebブラウザでTwitterの個別ツイートを開いているとき、その前後のツイートも見たいという場合に使用するブックマークレットを試作してみた。 ブックマークレット(Hatena::Let) 【追加】特定ツイート前後のタイムライン表示 ユーザースクリプト呼び出し版 近傍ツイート検索 - Hatena::Let 特定ツイート前後のタイムライン表示 近辺のツイート表示 - Hatena::Let 特定ツイート以前のタイムライン表示 以前のツイート表示 - Hatena::Let 特定ツイート以後のタイムライン表示 以後のツイート表示 - Hatena::Let TwitterのCS

少し前にBreakpointTesterというツールを知った。任意のページでそのブックマークレットを起動すると、参照されているCSSファイルをスキャンしてMedia Queriesのブレークポイントを探し、そのブレークポイント全てを使ってiframe要素で表示しなおしてくれるというもの。また、ほぼ同時期にish.というツールがBrad Frostにより公開された。こちらは大中小でチェックでき、リサイズも可能というもの。こちらもデバイスを特に意識はしていない。しかし、両者は似ているようで少し違う。 ish.はメジャーなデバイスを強く意識することをやめ、あらゆるデバイスでコンテンツが機能するようにしようというコンテンツ側からの視点で作られているように思う。対してBreakpointTesterはビジュアル・デザイン側からの視点で作られており、どのようなビジュアル・デザインを作成したのかをチェッ

iPhoneでWikipediaを見るとページ内検索が不便！ ひとりぶろぐのmoyashi (@hitoriblog) です。 iPhoneでWeb検索したらWikipediaのページがヒット。 早速見にいくも、本文が折り畳まれてて、見出しだけがズラリ。 ページ内検索しようとしてもあるはずの単語が検索にヒットしない。 折り畳まれた見出しを一つずつ開いて回らなければならないと悟り諦めた、という経験は、多分かなりの人がしてると思います。 一発で折り畳まれた本文を展開できたらいいのに。 Wikipediaの本文を展開するブックマークレット 見出しをババババッとタップして回るがごとくに一発で本文を展開するブックマークレットを作ろうと思って調べてたら、既に @a_i_t_a さんが作ってました。ありがとうございます。 @a_i_t_a javascript:(function(){$(".secti

Twitter で聞いてみたところ @hasegawayosuke さんいわく、Bookmarklet の文字数制限は最短だと約2,000文字らしいです。 でも、その長さで bookmarklet を書くのって難しいですよね。かといって、別のサーバから JavaScript をダウンロードして実行するとなると、そのダウンロードされたスクリプトが安全か、という問題が出てきます。 ならば、暗号学的ハッシュ関数を2,000文字以下で実装し、ダウンロードしたスクリプトの改ざん検証を行った上で実行すればいいのではないか。そうすれば、文字数の制限に悩むことなく Bookmarklet の開発に勤しめるのではないでしょうか。 ジャジャーン！というわけで、とても短い SHA-1 の JavaScript 実装を作りました*1。 GitHub - kazuho/sha1.min.js: SHA-1 impl

ぼくはライフワークとして画面をチカチカさせる活動をしてるのだけど，周りの人にあまり理解してもらえなくて，まぶしいとか，そんな低俗なことをやって，みたいな反応をされる． けど，画面をチカチカさせるだけでも，いろいろと工夫できることとかある．今日はこれまでの活動の振り返りと，それで得たノウハウを共有しようと思います． 過去の活動 これまでに，いろいろ画面をチカチカさせるやつ作っているので，順に紹介します． コード残ってるのは2010年からだけど，一番古いのは中学生のときにRPGツクールで作った画面がチカチカするゲームで，途中まではRPGとして遊べるけどストーリーが進むと画面が高速で点滅し始めてそれ以降何もできなくなるというゲームでした． 古くはポケモンショックというイベントもあったけど，ぼくは関西に住んでて見れなかった． ウェブページをチカチカさせる このbookmarkletを起動するとウェ

iOS版 Google Chrome 、PCとの同期とか便利ですけど、ブックマークレットが使えないため、はてなブックマークと連携して使うのが難しくて残念… と思っていたのですが、工夫すると連携できなくもないとわかったのでシェアします。 まず、Chrome に以下のブックマークレットを登録します。この時、誤爆しづらい、わかりやすい名前を入れておくのがポイントです（僕は"bbb"としてみました）。 javascript:(function(){location.href='hatenabookmark:/entry?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title)+'&backurl='+encodeURIComponent(location.href.replace(/^h

Cookpad Recipe Scalable - Hatena::Let 最近よくクックパッドのレシピを見て料理を作っているんだけど、作りたい分量が合わないとき頭で分量を計算しなおすのが面倒くさいので作りました。 ブックマークレットを起動すると「操作」エリアが追加され、テキストエリアに数字を入れて「倍」ボタンを押すと分量を変更してくれます。あと、おまけで「ヘルシーに」を押すと肉と油を減らしたり「うまそうに」を押すとその逆をやってくれたりする機能もつけてみました。 豚汁 100 人分とか巨大なケーキの分量を知ることができて便利だと思う (もちろん 0.5 とか入力して 4 人分を 2 人分に減らすこともできる)。ただ、レシピ掲載者のひとたちの表記ゆれを全部カバーできている自信が全然なくてうまく動かないことが多いかもです。 (サンプル画像としてプロの味！の豚汁 by Fumiaを使わせていた

はじめに twitter でfollowing を全員unfollow したいというものの、 今までのウェブサービスなどではなかなかこの手の負荷の高そうな処理を安定してやってくれるところはありませんでした。 また、よくあるのはアンフォローではなく”一括フォロー”するスパム業者御用達系のソフトや、自分をリフォローしないひとをアンフォローするよくわからないツールばかりです*1。 なのでtwitterのREST API を使用せずに自分のブラウザからunfollow するようブックマークレットにて作成しました Twitter Unfollow Bookmarklet - Hatena::Let http://let.hatelabo.jp/laiso/let/gYC-yOm0i6i-Qg 使いかた https://mobile.twitter.com/session/new のモバイルサイトへP

フェンリルのプロダクトSleipnir タブの切り替えさえも1フリックで片付く。 最速タブのモバイルブラウザ。 株式会社大丸松坂屋百貨店 株式会社JFR情報センター大丸・松坂屋アプリ 全国14店舗の「大丸」「松坂屋」の 便利でお得なアプリ。 フェンリルのプロダクトNILTO 磨き込まれたインターフェースで、 チームの理想を実現するヘッドレスCMS。 GROOVE X 株式会社LOVOT 世界に1体、あなただけのLOVOTと 楽しく過ごせるアプリ 九州旅客鉄道株式会社 JR九州コンサルタンツ株式会社トンネル検査支援アプリ トンネル検査の省力化と 精度向上を目的としたアプリ。 フェンリルのプロダクトBrushup イラスト・写真・動画などのレビューを効率化。 高速コミュニケーションツール。 株式会社クボタKubota-PAD4.0 株式会社クボタがグローバルで展開する 農業機械、建設機械、エン