Webサイト制作 > Firefox

"Make Link"でリンク作成を簡単に : Firefoxアドオン

Sat 10/01/2009 17:55 permalink

image こんにちは、このコーナーでの一人称を「ワタクシ」にしてしまったのを、少しばかり後悔し始めている魔神さんです。
今回から「ワタクシ」はやめてみようかとワタクシ考えます。

あっ (ベタ)

今回ご紹介するのは、ブログ記事を書く時などに重宝するリンクURLコピーFirefoxアドオン"Make Link"です。

index list

基本的な使い方

Make Linkの使い方はいたって簡単で、リンクを作成したいページ上で右クリックからコンテキストメニューを開き、コードの書式を選択するだけ。
これで、クリップボードにリンク情報がコピーされます。

右クリックからコンテキストメニューを開く対象と書式の設定によって、コピーされる内容は変わります。

動作モード

コンテキストメニューが開かれた時の状況によってlink、selection、pageという3つの動作モードがあり、それぞれ生成されるコードで使用される変数の内容が変わります。
以下に、各モードが選択される状況と、生成コードの書式で使われる基本的な変数に代入される内容の違いをまとめてみます。

Webページ上のリンク(a要素)を右クリックしてコンテキストメニューを開くと、linkモードで動作します。

%text%にはリンクが張られているテキストが代入されます。
リンクが張られている画像からコンテキストメニューを開いた場合は、alt属性値が代入されます。
画像にリンクが張られていなかった場合は、Webページのタイトル(title要素)が代入されます。

%url%には選択したリンクで指定されたURL(href属性値)が代入されます。
リンクが張られている画像からコンテキストメニューを開いた場合も同様です。

%title%には選択したリンクのtitle属性値が代入されます。
リンクが張られている画像からコンテキストメニューを開いた場合も同様です。

selection

Webページ上を選択し、ハイライト表示された部分を右クリックしてコンテキストメニューを開くと、selectionモードで動作します。

%text%には選択したテキストが代入されます。
範囲内に画像などが含まれていても無視されます。

%url%には選択中のWebページのURLが代入されます。

%title%には選択中のWebページのタイトルが代入されます。

page

Webページ上でリンク以外の場所を右クリックしてコンテキストメニューを開くと、pageモードで動作します。

%text%にはWebページのタイトルが代入されます。

%url%にはWebページのURLが代入されます。

%title%にはWebページのmeta要素、descriptionプロパティの値が代入されます。

書式の設定

Make Linkは初期状態のまま使用しても充分に便利ですが、生成されるコードの書式を自分用に設定することで、さらに使いやすくなります。
書式の設定は、コンテキストメニューのMake Link項目から"設定"を選ぶか、Firefoxメニューのツール > アドオンからアドオンウィンドウを開き、Make Linkの"設定"を選択することでおこなえます。

"Make Link オプション"を開くと、書式の一覧が表示されます。
この画面から、項目の削除、変更、新規作成がおこなえます。

Make Link オプション画面

それでは、新規に設定を作成してみます。
"新規…"ボタンを押すと、"新しいリンク形式"という画面が開きます。

"名前"欄には、この設定の名称を入力します。
今回は、新規ブラウザウィンドウでリンク先を開く設定を作成したいので、"HTML Launch"という名前を付けます。

"フォーマット"欄には、定められたいくつかの変数を使用して、クリップボードにコピーされるコードの書式を入力します。
とりあえずここでは次のように入力してみます。
<a href="%url%" title="%title%" target="_blank">%text%</a>
個々の変数(%で括られた文字列)の意味については後述しますが、新規ブラウザウィンドウでリンク先を開く場合のaタグの書式になっているのはわかってもらえると思います。
クリップボードには、このフォーマットに基づいて生成されたコードがコピーされることになります。

最後に"HTMLエンティティを使用する"オプションですが、これにチェックを入れておくと変数の内容に&や"などのHTML内に直接記述できない文字が含まれる場合、それらを実態参照に変換してくれます。

Make Link 新しいリンク形式画面

設定が終わったところで、この新規設定でMake Linkしてみます。
おもむろにdnclのタイトル画像で右クリック、表示されたコンテキストメニューから"Make Link" > "HTML Launch"を選択。

Make Link screenshot

これでdnclのタイトル画像に張られていたリンクがクリップボードにコピーされました。たぶん。
念のため、ペーストしてみます。
dncl
新規ブラウザウィンドウで開くリンクが作成できました。
ペーストされたコードは以下のようなものになります。
<a href="http://www.cocoa-project.com/" title="home | デンクラトップページに戻ります | アクセスキー : t" target="_blank">dncl</a>

変数

Make Linkで書式の設定をおこなう際に使用できる変数の一覧は、先ほどの"Make Link オプション"画面の"ヘルプ"ボタンを押すと表示される"Make Link Helpドキュメント"で確認することができます。
一応ここでも、それぞれの変数に代入される値を動作モードごとにまとめてみます。

%text%

リンクが張られるテキストに置き換えられます。

  • linkモードでは、リンクが張られているテキストが代入されます。
    対象の画像にリンクが張られていた場合は画像のalt属性値が代入され、画像にリンクが張られていなかった場合はWebページのタイトルが代入されます。

  • selectionモードでは、選択したテキストが代入されます。
    範囲内に画像などが含まれていても無視されます。

  • pageモードでは、対象であるWebページのタイトルが代入されます。

%text_n%,%text_br%

選択範囲に含まれる改行(br要素)を反映したテキストに置き換えられます。
%text_n%の場合、改行部分に"\n"が挿入されます。
%text_br%の場合、改行部分に"<br />\n"が挿入されます。
エスケープ文字である"\n"は改行を表します。

この変数は、改行を含むテキストを選択した場合のみ有効です。
selectionモード以外のモードでは、%text%と同じように動作します。

%url%

リンクのアドレスに置き換えられます。

  • linkモードでは、選択したリンクで指定されたURLが代入されます。
    対象が画像の場合でも同様です。

  • selectionモードでは、選択中のWebページのURLが代入されます。

  • pageモードでは、対象であるWebページのURLが代入されます。

%title%

リンクのtitle属性値に置き換えられます。

  • linkモードでは、選択したリンクのtitle属性値が代入されます。
    対象が画像の場合でも同様です。

  • selectionモードでは選択中のWebページのタイトルが代入されます。

  • pageモードでは、対象であるWebページのmeta要素、descriptionプロパティの値が代入されます。

%input%

Make Linkを実行するとダイアログボックスが表示され、そこで入力した値に置き換えられます。
この変数に代入される値は動作モードの影響を受けません。

%imgurl%

画像を右クリックしてMake Linkを実行すると、対象である画像のURLに置き換えられます。
それ以外の場合では、この変数には何も代入されません。

%tinyurl%

TinyURL.comのサービスを利用して短縮されたURLに置き換えられます。
便利ですが、Helpドキュメントにも「実験的」という注意書きがある通り、一度では機能してくれないことがあります。
代入される値のモードごとの違いは、%url%と同じです。

設定のサンプル

実際に魔神さんが使用している書式設定のサンプルをいくつか。
参考にならん、と憤慨してみてください。

%text_n%

引用文をコピーする時などに便利な設定です。
"HTMLエンティティを使用する"オプションにチェックを入れておけば、&等の文字を自動的に実態参照化してくれます。
コピーした文を編集中のHTMLにペーストし、改行されている部分に<br />タグを挿入します。

%text_brを使用すると挿入された<br />も実態参照化されてしまうので、魔神さんはこちらを使っています。

<a href="%url%" title="%title% | %input%">%text%</a>

%title%にサイト名称が含まれていないWebページへのリンクを作成する場合に。
%input%にサイト名を入力して使用します。

<a href="%url%" title="%title%" class="linkLaunch" target="_blank">%text%</a>

リンク先を新規ブラウザウィンドウで開かせたい時に。
CSSでclass"linkLaunch"に、新規ブラウザウィンドウでリンクを開くことを示すアイコンを表示させるように設定します。

%text%[%imgurl%]

画像のURLを書きたい時に。
%text%には、対象の画像にリンクが張られている場合、alt属性値が代入されます。
画像にリンクが張られていない場合は、Webページのタイトルが代入されます。

まとめ

リンクをクリップボードにコピーしてくれるアドオンは他にもいくつかありますが、このMake Linkが一番使いやすいように感じました。
比較的自由に書式を設定できるので、自分のWebサイト用に最適化しておけば更新作業の能率も上がるのでは。
特殊文字を実態参照化してくれる機能は、ブログ記事の作成などに役立ってくれるでしょう。

それではまた、魔神ハッピーアワーでお会いしましょう。

関連リンク

comments

comment form

cookie:

Trackbacks

categories
recommend

FLASH-FACTORY

FLASH ActionScript スーパーサンプル集 1.0/2.0対応版[CD-ROM付き]

Flash ActionScript Handbook 4th edition