limit!webの現場で働く人のブログこの広告は、90日以上更新していないブログに表示しています。世の中には先人が作った素晴らしいアドオンやブックマークレットがたくさんあります。私も様々なアドオンやブックマークレットをブラウザに入れ普段の業務に役立てております。「あの機能とこの機能が一緒であれば...」ということがあったりします。いうことで制作者であれば自分たちの現場に合った素敵なブックマークレットを作ってしまおう!というのが今回のお話です。生のJSで記述することもできますが、今回は親しみやすいjQueryを使ったブックマークレットの作り方(導入部分)を紹介いたします。jQuery***************************************************///処理はここまで});})();こちらのソースでjQueryを使ったブックマークレットが作製可能になります。実際に自分がブックマークレットを作製するときの手順が以下になります。1:エディターにて編集2:自分が書いたJSコードをブラウザで実行3:JSコードを圧縮4:ブックマーク(お気に入り)に追加2のところで個人的にオススメの確認方法は、Firefoxのアドオンの「Firebug」を使用する方法です。通常のブラウザでデバックしようするとエラーになってしまいます。Firebugの場合まるまる自分が記述したJSコードをコピペするだけでデバックができます。試しに以下のソースをコピーし、Firebugで実行してみます。$('h1').text();alert('このページのh1は「'+pageTitle+'」です');//処理はここまで});})();手順1.Firefox上でF12を押しFirebugを起動する2.コンソールタブを選択し、矢印ボタンを押しコンソール画面を表示3.ソースを貼り付ける実行できると閲覧しているページのh1をアラートで知らせてくれるかと思います。圧縮する時の注意点として、「javascript:」という記述が消えないようにすることです。オンラインで圧縮する場合、以下のサイトが良いかと思います。(JavaScriptの圧縮)https://syncer.jp/js-minifier自作したブックマークレットの機能紹介かなり現場に依存してたブックマークレットですが、機能だけ紹介致します。(少しでもヒントになればと思いリストだけ載せておきます。etcこちらのブックマークレットは現場からの声を元に実装し提供しました。確認作業が少しでも効率よく済めば、リードタイムの短縮につながりますね!おまけブックマークレットを少しでもオシャレ(?)に表現するためにモーダル風なものを用意しました。よろしければお使いください..。sampleではページのh1を取得しております。...2018-08-28WordPress(ワードプレス)の投稿内でJavaScriptを実行するTipsこの記事は以下の現象の人におススメの記事です。Editor」の広告が邪魔だから、消すブックマークレットつくった。普段、Photoshopを使用しているので私は必要はないんですが、作...2018-02-26【JavaScript】jQueryのthisを生のJSで表現してみる。jQueryのthisって便利だよね。Webサイトを構築する上で必ずルールが存在します。最新記事.htaccessによる少し複雑なリダイレクト備忘録Webの現場で使えるテクニック集まとめ(完全メモ帳)jQueryを使用しない現在地表示(ES6:JavaScript)【JavaScript】現在のURLを取得し、パラメータは除外するJSONジェネレータを作る(Vue.jsとかJavaScriptとか)月別アーカイブ注目記事はてなブログをはじめよう!paradox_tmさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。