ブックマークレットを通してより良い生活

コアポイント

• ブックマークアプレットは、Webブラウザーの機能を強化し、Web開発者のワークフローを簡素化するブラウザブックマークに組み込まれた小さなJavaScriptコードです。
• ブックマークアプレットには、単純なナビゲーションタスクから、ページコンテンツの変更、ページ構造の分析、ウェブサイト上のタスクの自動化など、より複雑な操作まで、幅広い用途があります。
• ブックマークアプレットは一般に安全で信頼性が高いが、名前空間の競合を引き起こす可能性がある。この問題は、ブックマークアプレットとして独自の可変スコープを持つ匿名関数を作成することで回避できます。
• 複雑なブックマークアプレットの場合、一部のブラウザのブックマークの長さの制限をバイパスする方法があります。実際のブックマークアプレットの実装は、Webサーバーで外部.JSファイルとしてホストできますが、ブックマークアプレットには、残りのスクリプトをロードするためのロードスタブを含めることができます。

ブックマークアプレットは、Webブラウザーに機能を追加する簡単な方法であり、Web開発者のワークフローに便利な追加になる可能性があります。この記事では、いくつかの便利なブックマークアプレットを指摘し、独自のブックマークアプレットを構築するためのヒントを提供し、これらの強力なツールを最大限に活用するためのいくつかの高度なテクニックを実証します。ブックマークアプレットは、ブラウザのブックマークに埋め込まれた短いJavaScriptコードスニペットです。ブックマークが選択されると、JavaScriptコードが実行されます。魔法のように、この実行は現在のページのコンテキストで行われます。ブックマークアプレットは、ページの完全なドキュメントオブジェクトモデルにアクセスし、それを変更してその情報を使用して新しいウィンドウを起動したり、ブラウザを別のサイトにリダイレクトできます。ブックマークアプレットを以前に使用したことがない場合は、この記事の残りを読む前に試してみることをお勧めします。 www.bookmarklets.comとwww.favelets.comの両方がブックマークアプレットの大規模なコレクションを提供し、Jesse Rudermanにはwww.squarefree.com/bookmarkletsにブックマークアプレットのコレクションがあります。 JesseのWeb開発ブックマークアプレットは、特にWeb開発者のブラウザに必須の追加である必要があります。ブックマークアプレットは、JavaScriptをサポートするすべての最新のブラウザに適していますが、一部のブラウザは他のブラウザよりも優しいです。 Windows用のInternet Explorer 6には、迷惑な508文字のブックマークサイズの制限があり、このブラウザが利用できるブックマークアプレットの範囲を厳しく制限しますが、後でカバーするテクノロジーは部分的な救済策を提供します。ブックマークアプレットを最大限に活用するには、ブックマークアプレットの開発に役立つ多くの便利なツールも搭載された優れたFirefoxなどのMozillaベースのブラウザーを使用することをお勧めします。ただし、ブックマークアプレット開発の魅力の1つは、多くの場合、重度のJavaScript開発を悩ませるクロスブラウザーの問題を回避できることです。特定のブラウザ（特に個人が使用するブックマークアプレット）のブックマークアプレットを開発するのに問題はないため、開発者は実際にブラウザができるようにすることができます。

一般的なブックマークアプレットバリエーション

上記のサイトのいずれかを閲覧している場合は、ブックマークアプレットが提供できるさまざまな機能について、ある程度の考えが必要です。ブックマークアプレットの最もシンプルで最も一般的なタイプは、現在のページのURLを取得して別のサイトに渡すシンプルなナビゲーションブックマークアプレットです。典型的な例は、検証ブックマークアプレットで、現在のページのオンラインHTMLまたはCSS検証サービスにユーザーをリダイレクトします。これらのブックマークアプレットは作成が非常に簡単ですが、非常に便利な用途に適合させることができます。このページの編集を作成したいのは、Webベースのコンテンツ管理システムを搭載したWebサイト用のブックマークアプレットです。そのようなシステムの多くは、パブリックサイトページURLにIDを埋め込みました。これは、サイト管理システムで使用されるフォームURLで使用されているIDに直接対応し、そのページの内容を編集します。このページの編集では、AppletのブックマークAppletは現在のページのURLを抽出し、それを使用してユーザーをすぐにページの編集インターフェイスにリダイレクトします。たとえば、次のURLがあるサイトを想像してください。

<code>http://www.site.com/articles/123</code>

このサイトには、パスワードで保護された管理インターフェイスもあり、次のアドレスで「編集ページ」インターフェイスを提供します。

「このページの編集」上記のサイトのブックマークアプレットは次のように実装できます。

<code>http://www.site.com/admin/edit-article?id=123</code>

サイトで使用するコンテンツ管理システムをある程度制御できる場合、この概念を大幅に拡張できます。たとえば、記事の内部IDがURLに公開されていないサイトでは、代わりにHTMLメタタグにIDを提供することができます。これは、DOMを介してこのページのブックマークアプレットを編集するために提供できます。多くのブックマークアプレットは、現在のページを何らかの形で変更します。一般的な例には、不要なフラッシュアニメーションなどの迷惑なコンテンツを「排除」するためのブックマークアプレット、さらにはバナー広告の一般的に使用されるサイズにサイズを変更する画像も含まれます。これらは興味深い場合がありますが、通常、ページが読み込まれるたびに手動でアクティブになる必要があるために制限されます。より便利なのは、Web開発者がページ構造を分析し、ページ構造を変更するのに役立つブックマークアプレットです（「リアルタイム」）。このタイプの私のお気に入りのアプレットは、彼のWeb開発コレクションのJesse Rudermanの「テストスタイル」、「編集スタイル」、「祖先」です。後者は、マウスカーソルの下のページセクションにつながるHTML要素階層を示しています。これは、CSSをページに適用する方法を把握するのに役立ちます。最初の2つを使用すると、現在のページのCSSを「リアルタイム」に変更できるため、潜在的な設計変更に関する即時フィードバックが提供されます。私のMozilla Image Drag Bookmarkアプレットは、ページの「ドラッグ可能」のすべてのバックグラウンド画像を作成します。これは、ページデザインの調整を検討するときにも役立つ場合があります。便利ですが、見落とされがちなJavaScriptのトリックは、HTMLページ全体をブックマークアプレットに埋め込むことができることです。ブラウザのURLバーに次のように直接入力してみてください。

javascript:document.location='http://www.site.com/admin/edit-article?id='+document.location.href.split('/').pop()

ブラウザは、文字列にレンダリングされたHTMLを表示する必要があります。文字列が式として評価され、結果が現在のブラウザウィンドウに表示されるため、これを行います。同じトリックを使用して、ブラウザを最先端の計算機に変えることもできます。

<code>http://www.site.com/articles/123</code>

このようにページ全体を埋め込んだブックマークアプレットを作成すると、特に単純な確認（）およびプロンプト（）ボックスよりも複雑なユーザーインターフェイスが必要な場合は、時々役立つ場合があります。

補助テキスト入力

私はテキストアレアボックスを見つめるためにオンラインで多くの時間を費やしています。私が更新した3つのブログは、職場で開発したサイトや参加しているさまざまなオンラインフォーラムと同様に、Textareaを通じて維持されています。 Textareaはどこにでもあります。また、特に専用のテキストエディターソフトウェアと比較した場合、テキストを処理するための最良の方法とはほど遠いものです。ブックマークアプレットは、Textareasの取り扱いを大幅に低下させることができ、有用な追加機能を提供できます。 Textarea Enhanced Bookmarkアプレットの私のお気に入りの例は、Jesse Rudermanのもう1つです。BlogidateXML利点 - ページ上の各テキストアレアのテキストが十分に構成されており、それに応じてTextareaの背景色を変更するかどうかをチェックするMozilla/Firefoxブックマークアプレット。これは、サイトに公開する前にXHTMLで簡単なエラーをキャプチャするのに役立ちます。 Jesseには、WDG VALIDATORを使用してTextareaのHTMLフラグメントの構文を確認するHTML検証ブックマークアプレットのセットもあります。私がよく使用するもう1つのツールは、私の拡張HTML Shorthandブックマークアプレットです。 Textareaのテキストに一連の単純な変換を適用します。

空白の行で互いに分離されたテキストのブロックは、段落のマークで包まれています
=記号で始まる行を#### title
2. に変換する *で始まる
行は箇条書き
3. になります

例：

<code>http://www.site.com/admin/edit-article?id=123</code>

になります：

javascript:document.location='http://www.site.com/admin/edit-article?id='+document.location.href.split('/').pop()

リスト1
リスト2

短いバージョンはIEに適しています。このリリースは、508キャラクターの制限に対応するためにタイトルサポートを犠牲にします。拡張HTML略語：

javascript:'<h1>This is HTML</h1>'

拡張html略語IE：

javascript:1 + 4;

未装備のソースコード（スペースが削除される前）は次のようになります。

<code>= Header

Paragraph

* list 1
* list 2</code>

ブックマークアプレット作成ツール

テキストエディターのみを使用してブックマークアプレットを作成できます。または、非常に自信がある場合は、ブラウザの新しいブックマークフィールドに直接入力できます。ただし、単純なナビゲーションブックマークアプレットよりも複雑なコンテンツの場合、専用ツールを使用することは理にかなっています。 Firefoxを使用している場合は、有用なブックマークアプレット作成ヘルパーに既にアクセスできます。 FirefoxのJavaScriptコンソールは、Pageコンテンツを変更するブックマークアプレットを作成する際に、DOMインスペクターを探索するための優れたデバッグツールです。 Jesse RudermanのFirefoxとMozillaのシェルブックマークアプレットは、現在のページコンテキストに添付されたインタラクティブなJavaScriptプロンプトを提供します。これは、テキストエディターに送信する前に新しいテクノロジーを試すのに最適な方法です。ブックマークアプレットにはラインブレークを含めることはできませんが、いくつかのステートメントを書くためにソースコードをインデントする必要があります。 My Remove Line NewLine Bookmark Applet（下）は、JavaScriptコードブロックからタブ、NewLines、および複数のスペースを削除するためのツールです。多くの場合、これはコードの単純なブロックからブックマークアプレットを作成するために必要なすべてですが、変換する前に各ラインをセミコロンで終了することを忘れないでください。ブックマークアプレットは、ブックマークアプレットに埋め込まれたHTMLページの例でもあります。ラインブレークを取り外します：

<code>http://www.site.com/articles/123</code>

変数スコープ競合を回避

ブックマークアプレットによって導入された潜在的な問題は、名前空間の競合です。ブックマークアプレットがページ上の他のスクリプトがすでに使用している変数を使用または再定義するとどうなりますか？この問題を回避する手法の1つは、使用されていないランダム変数名を使用することですが、これにより、ブックマークアプレットコードの読み取りが難しくなり、ブックマークアプレットの不必要な長さが増加します。より良い解決策は、ブックマークアプレットとして独自の可変スコープを持つ匿名関数を作成することです。それがどのように機能するかは次のとおりです

<code>http://www.site.com/admin/edit-article?id=123</code>

function（）{}パーツは匿名関数です - 名前が宣言されていない関数。関数をブラケットに囲み、最後に（）を追加することにより、機能は作成直後に1回実行されます。つまり、ブックマークアプレットがアクティブになった瞬間に実行されます。匿名関数のボディ内の変数が「var」キーワードで宣言されている限り、それらは関数の範囲に限定され、文書の残りの名前で同じ名前の変数に干渉しません。 JavaScriptの関数の性質のおかげで、ドキュメントのグローバルな範囲に追加することなく、匿名関数の他の関数を宣言することもできます。

長いスクリプトを追加します

先ほど、ブックマーク長にインターネットエクスプローラーの制限をバイパスする方法があると述べました。また、このアプローチにより、スクリプト全体を単一の行に保持することなく、標準のインデントJavaScriptにブックマークアプレットを書くことができ、ブラウザによって実装されたより複雑なブックマークアプレットに役立つ手法になります。トリックは、実際のブックマークアプレットの実装を、一部のWebサーバー上の外部.JSファイルとしてホストすることです。ブックマークアプレットには、残りのスクリプトをロードするために使用される「スタブ」コードのみを含める必要があります。これは、508文字制限で簡単に実現できます。以下は、読みやすさのためのインデントをロードするミニプログラムコードです。

<code>http://www.site.com/articles/123</code>

スペースを削除した後、上記のコード（外部スクリプトURLを差し引いて）が193文字に達します。このコードには1つの欠点があります。MacintoshバージョンIE5では機能しません。 MacintoshバージョンIE5サポートがブックマークアプレットにとって重要である場合、Lioreanには、ブラウザ検出を使用してそのブラウザを同時に満たすロードスタブの拡張バージョンもあります。

さらに読み取り

ブックマークアプレットについて知るための最良の方法は、他の人が書いたブックマークアプレットを表示することです：

www.bookmarklets.com
www.favelets.com
www.squarefree.com/bookmarklets/

ブックマークアプレットのこの迅速なブラウジングが、独自のブックマークアプレットを作成してみるように促すことを願っています。

ブックマークアプレットに関するFAQ

ブックマークアプレットは何ですか？彼らはどのように働きますか？

ブックマークアプレットは、WebブラウザのブックマークにURLに保存されている小さなJavaScriptコードスニペットです。ブックマークをクリックすると、JavaScriptコードは新しいページをロードする代わりに現在のページで実行します。これにより、ソフトウェアや拡張機能をインストールせずに、ウェブサイトに新機能を追加したり、繰り返しタスクを自動化したり、ゲームをプレイすることもできます。

ブックマークアプレットを作成する方法は？

ブックマークアプレットの作成は、ブックマークを作成するのと同じくらい簡単です。 URLを入力する代わりに、JavaScriptコードを入力します。このコードは、ブックマークをクリックすると実行されます。独自のコードを書くか、オンラインで事前に作成されたブックマークアプレットを見つけることができます。

ブックマークアプレットは安全ですか？

ブックマークアプレットは通常、ブラウザで実行され、コンピューターのファイルシステムにアクセスできないため、安全で信頼性が高くなります。ただし、他のコードと同様に、それらは悪意を持って使用できます。信頼できるソースからのブックマークアプレットのみを使用し、使用する前にコードの機能を理解してください。

任意のウェブサイトでブックマークアプレットを使用できますか？

理論的には、ブックマークアプレットは任意のWebサイトで使用できます。ただし、一部のWebサイトでは、ブックマークアプレットが機能するのを防ぐためのセキュリティ対策を実装している場合があります。さらに、ブックマークアプレットの機能は、使用するWebサイトの構造に依存する場合があります。

なぜ私のブックマークアプレットが機能しないのですか？

ブックマークアプレットが機能しない理由がいくつかあるかもしれません。それらを使用しようとしているWebサイトは、ブックマークアプレットの動作を防ぐためにセキュリティ対策を実装した可能性があります。ブックマークアプレットのコードは、Webサイトとは期限切れまたは互換性がない場合があります。または、コード自体にエラーがある場合があります。

ブックマークアプレットをデバッグする方法は？

ブックマークアプレットのデバッグは、従来のデバッグ環境がないため、少し難しい場合があります。ただし、ブラウザの開発者ツールを使用してコードを確認し、エラーメッセージを表示できます。また、ブラウザのコンソールでコードを実行して、そこで動作するかどうかを確認することもできます。

モバイルデバイスでブックマークアプレットを使用できますか？

はい、モバイルデバイスでブックマークアプレットを使用できます。ただし、それらを追加および使用するプロセスは、デスクトップブラウザーよりも複雑になる場合があります。通常、モバイルブラウザーはデスクトップブラウザーで使用されるドラッグアンドドロップメソッドをサポートしていないため、JavaScriptコードを手動でブックマークする必要がある場合があります。

ブックマークアプレットを他の人と共有できますか？

はい、ブックマークアプレットを他の人と共有できます。 JavaScriptコードと、ブックマークに追加する方法に関する指示を送信するだけです。ただし、信頼できるソースからのブックマークアプレットのみを共有することを忘れないでください。コードの機能を理解してください。

ブックマークアプレットを使用してウェブサイトの外観を変更できますか？

はい、ブックマークアプレットを使用して、ウェブサイトの外観を変更できます。これは、WebサイトのCSSを操作することによって行われます。ただし、これらの変更は一時的なものであり、ページを更新した後に失われます。

ブックマークアプレットを使用して、ウェブサイトでタスクを自動的に実行できますか？

はい、ブックマークアプレットを使用して、ウェブサイトでタスクを自動的に実行できます。これは、フォームに入力することからボタンをクリックすることまで、何でもかまいません。ただし、ブックマークアプレットの機能は、Webサイトの構造と自動的に実行するタスクに依存します。

以上がブックマークレットを通してより良い生活の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。