Thunderbirdアドオンの作り方(その6:要素を調べる)

February 15,2018 12:03 AM
Category:[開発]
Tag:[]
Permalink

Thunderbirdアドオンの作り方について解説します。その6は要素の調べ方です。

1.アドオンで機能を追加する場所

アドオンで機能を追加するには、追加する場所の要素名やid属性が必要です。

たとえば先日公開したアドオンでは、ツールバーにボタンを追加しましたが、XULファイルに下記の設定を行うことで実現しています。

<toolbar id="mail-bar3">
  <toolbarbutton id="button-new-reply" label="&replynew.label;" class="toolbarbutton-1" tooltiptext="&replynew.tooltip;" removable="true" oncommand="ReplyNew(this)" />
</toolbar>

この中に含まれる、toolbar要素および、"mail-bar3"というid属性

<toolbar id="mail-bar3">
 :
</toolbar>

を知るには、どうやって調べればいいのでしょうか。

ということで、要素の調べ方を紹介します。

2.要素の調べ方

要素を調べるには、

の2つのアドオンを利用します。

DOM Inspectorだけでも要素の調査は可能ですが、ツリーを展開しないといけないので、選択した要素を直接調査できるInspectorWidgetと連携させる方法がおすすめです。

3.アドオンのインストール

上記URLにある「今すぐダウンロード」をクリックしてアドオンをダウンロード。

今すぐダウンロード

Thunderbirdの「ツール」→「アドオン」をクリック。

アドオン

「ファイルからアドオンをインストール」をクリック。

ファイルからアドオンをインストール

ダウンロードしたxpiファイルを選択して「今すぐインストール」をクリック。

xpiファイルを選択

「今すぐ再起動する」をクリック。

今すぐ再起動する

再起動後、インストールされます。

InspectorWidgetについても同様の手順でインストールしてください。

4.アドオンの設定

続いてInspectorWidgetボタンをThunderbird上に表示させます。

「ツール」→「オプション」→「ツールバーのカスタマイズ」をクリック。

ツールバーのカスタマイズ

「Inspect」と表示されたアイコンをツールバーの任意の位置にドラッグ&ドロップ。

ドラッグ&ドロップ

「Inspect」アイコンが表示されれば準備完了です。

準備完了

5.要素の調査

「Inspect」をクリック。

Inspect

要素を知りたい部分をクリック。ここでは先日のアドオンで追加した「アドレス宛に作成」をクリック。

アドレス宛に作成

DOM Inspector画面が開き、クリックした部分の要素までツリーを展開してくれます。

DOM Inspector画面

左ペインのツリーから追加したボタン(toolbarbox要素)の親要素がtoolbar、id属性値が"mail-bar3"であることが分かります。

ツリー

右ペインには、オーバーレイするXULのNamespaceURIや、追加したボタンの情報が表示されます。

右ペイン

左ペインの任意の位置をクリックすればウィンドウの該当位置が赤枠で点滅されるので、そこから判断することも可能です。

Comments [0] | Trackbacks [0]

Thunderbirdアドオンの作り方(その5:ローカライズ)

February 9,2018 12:03 AM
Category:[開発]
Tag:[Thunderbird]
Permalink

Thunderbirdアドオンの作り方について解説します。その5はローカライズです。

1.設定ファイルの配置

ローカライズのための設定ファイルは、まずロケールプロバイダです。

test@hoge.com
├chrome
│ └ test.manifest★

その2:chrome.manifest」で解説しましたが、再掲しておきます。

test.manifest

locale test ja locale/ja/ locale test en locale/en/

次に「その3:コンテントプロバイダ - XUL」で解説したとおり、XULにロケールを設定します。

test@hoge.com
├chrome
│ ├ content
│ │ ├ test.xul★

<!DOCTYPE overlay SYSTEM "chrome://test/locale/menu.dtd">

この設定により、

chrome/locale/ja/menu.dtd

のファイルが読み込まれます。

最後に、DTDファイルを次のように配置します。

test@hoge.com
├chrome
│ ├ locale
│ │ ├ en
│ │ │ └ menu.dtd★
│ │ └ ja
│ │ └ menu.dtd★

2.ローカライズデータのフォーマット

chrome/locale/ja/menu.dtd

に、ローカライズデータとして下記の1行を記述します。

<!ENTITY test.label "テスト">

フォーマットはDTDに従い、

<!ENTITY 翻訳元データ "[翻訳データ]">

となります。

この場合、"test.label"という表記があれば、"テスト"にローカライズします。

3.ローカライズ

サンプルで行っているローカライズは、赤色で示したボタンのラベル名で、下記の"&test.label;"の部分で行なっています。

  <toolbar id="mail-bar3">
    <toolbarbutton id="button-new-reply" label="&test.label;" class="toolbarbutton-1" tooltiptext="Reply but new" position="3" removable="true" oncommand="foo(this)" />
  </toolbar>

ローカライズしたい部分を"&"と";"で括ります。

"test.label"だけではローカライズされないので注意してください。

4.文字コード

menu.dtdの文字コードは必ずUTF-8にしてください(これに気がつくのにかなり時間を要しました笑)。

5.注意事項

ローカライズが正常に行われない場合、機能自体が動作しなくなるケースがありますので、ローカライズの設定は最後に行うことをおすすめします。

Comments [0] | Trackbacks [0]

小粋空間のプラグイン購入でクレジットカード決済が可能になりました

February 8,2018 12:03 AM
Category:[Paypal]
Tag:[PayPal]
Permalink

小粋空間のプラグインご購入時のお支払にPayPalを利用させてもらってますが、このたびクレジットカードおよびデビッドカード決済も可能になりました。

たとえばWorkflowプラグイン購入のページは、次のようにクレジットカードの表示が加わっています。

CSVDataImExporterプラグインなどはこれまでの表示のままですが、

クリックすれば、PayPalログイン画面の下に「クレジットカードまたはデビッドカードで支払う」が表示されるので、クレジットカードまたはデビッドカードでの決済を行いたい場合はこのリンクをクリック。

クレジットカードまたはデビッドカードで支払う

クレジットカードでの決済画面に切り替わります。

ちなみにクレジットカードが使えるようになったのは、ビジネスアカウントに切り替えたことによるものです。

ビジネスアカウントに切り替えるとクレジットカード決済ができるようになることに気がつかず、しばらく放置してました(笑)。

ちなみにペイパルでの売上高が一定基準に達し、PayPalからビジネスサポートも受けれるようになりました。

ビジネスアカウントの切り替えやクレジットカードを利用可能にする設定の変更でビジネスサポート(メール)を早速利用させてもらったのですが、あまりの神対応に驚きました。

ビジネスサポートが利用可能な方は是非一度使ってみてください。

ということで引き続きよろしくお願い致します。

Comments [0] | Trackbacks [0]
 1  |  2  |  3  |  4  |  5  | All pages