JavaScriptでJSONデータを作る方法

February 21,2018 12:03 AM
Category:[JavaScript]
Tag:[JavaScript]
Permalink

JavaScriptでJSONデータを作る方法を紹介します。

JavaScriptでJSONデータを作る方法

1.問題点

JavaScriptで下記のようなJSONデータを作りたいと思います。

{"foo":"abc","bar":"xyz","hoge":100}

が、JSONデータの作り方が分かりません。

初期値が分かっていれば上記のフォーマットをそのまま書けばいいのですが、foo/bar/hogeの値は処理の中で決まります。

ということで、JavaScriptでJSONデータを作る方法を紹介します。

2.JavaScriptでJSONデータを作る

JavaScriptでJSONデータを作る方法の1つとして下記があります。

<script>
var data = {};
 
data["foo"] = "abc";
data["bar"] = "xyz";
data["hoge"] = 100;
 
json_data = JSON.stringify(data);
// console.log(json_data);
</script>

ひとつめのポイントは、連想配列dataの初期化子を"{}"にすることです。

var data = {};

下のように、

var data = new Array();

配列で定義すると、出力結果が

[]

となってしまうので注意してください。

もう一つのポイントは、JavaScriptデータをJSONデータにするには"JSON.stringify()"を利用します。

json_data = JSON.stringify(data);

3.参考サイト

参考サイトは下記です。ありがとうございました。

Comments [0] | Trackbacks [0]

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]
 1  |  2  |  3  |  4  |  5  | All pages