[レベル: 上級] 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
A Chrome-specific bookmarklet that extracts SVG nodes and accompanying styles from an HTML document and downloads them as an SVG file—A file which you could open and edit in Adobe Illustrator, for instance. Because SVGs are resolution independent, it’s great for when you want to use web technologies to create documents that are meant to be printed (like, maybe on newsprint). It was created with d3
ユーザースクリプト（Firefox＋Greasemonkey、Google Chrome拡張機能等兼用）も作ってみた。 【近傍ツイート検索】特定ツイート前後のタイムラインを表示するユーザースクリプト試作 - 風柳メモ WebブラウザでTwitterの個別ツイートを開いているとき、その前後のツイートも見たいという場合に使用するブックマークレットを試作してみた。 ブックマークレット(Hatena::Let) 【追加】特定ツイート前後のタイムライン表示 ユーザースクリプト呼び出し版 近傍ツイート検索 - Hatena::Let 特定ツイート前後のタイムライン表示 近辺のツイート表示 - Hatena::Let 特定ツイート以前のタイムライン表示 以前のツイート表示 - Hatena::Let 特定ツイート以後のタイムライン表示 以後のツイート表示 - Hatena::Let TwitterのCS
インラインsvgを別ウインドウに開くブックマークレット
表題の通りです． インラインsvgはそのままでは保存しにくいので，それをサポートするツールを作ってみました． web開発のお供に使ってみてください．結構面白いよ． ※なお，他人のサイトのsvgを勝手にコピーするのは著作権に触れることも考えられるから，お気を付け下さい． なんだ，似たようなツールってば既にあるのね… http://nytimes.github.io/svg-crowbar/ getSVG:このリンクをブックマークに保存してね． 使い方 上記リンクをブックマークに保存します． インラインsvgを使っているwebページに移動し，上で保存したブックマークを実行します． すると，「インラインsvgをクリックしてね」というダイアログが表示されるので，そのとおりにします． インラインsvgがクリックした範囲に見つかると別ウインドウ（タブ）にスタンドアロンのsvgファイルとして表示します．
少し前に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を起動するとウェ
まぁ、めったにやることないと思うけど、要するにこういうの→“「ツイート」を「ツイート（笑）」に置換するブックマーク レット”を汎用的にしたやつ。「Opera用って時点で汎用的じゃない」っていうツッコミは受け付けるけど対応はしない。 準備 Operaの設定画面のウェブ検索タブを開く。 検索キーワード「s」はデフォルトだと「Opera Support」なので(残しておきたければ)「s」から別のキーワードに変える。 追加ボタンを押して検索エンジンの追加ダイアログを開く。 名前 何か適当な名前。replaceとか。 キーワード s アドレス javascript:var s='%s';var a=s.split('/');var g=new RegExp(a[1], a[3]);var r=document.evaluate("//text()[contains(., "+a[1]+")]", d
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を使わせていた
by amachang 2012-02-08 [2012/02/08 11:53:54] ブックマークレットを実行したあと、画像をクリックして画像検索できます /* * @title 画像検索 * @description ブックマークレットを実行したあと、画像をクリックして画像検索できます * @include http://* * @license MIT License * @require */ for (var i = 0; i < document.images.length; i++) (function(e) { e.onclick = function() { location.href = 'http://www.google.co.jp/searchbyimage?image_url=' + encodeURIComponent(e.src) } })(documen
はじめに 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 株式会社クボタがグローバルで展開する 農業機械、建設機械、エン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
