これは古いリファレンスです。このドキュメントはメンテナンスされていません。
あたらしいリファレンスは こちら

Shade Widgetの構成

目次

Widgetを構成するファイルと、制御コード。

Shade Widgetの概要 Shade Widgetの構成 Shade Widgetの作成

ファイル構成

index.htmlとwidget.xmlの2つのファイルが最小の構成ファイルとなります。

  • index.html
    HTMLで記述されたテキストファイル。
    Widgetのインターフェイス、JavaScript、Pythonの制御を行います。
  • widget.xml
    xmlで記述されたテキストファイル。
    Widget識別のuuid、スクリプトメニューに表示されるWidget名、ウインドウサイズなどWidgetの設定をします。

インストール

Shadeアプリケーションフォルダ内のwidgetsフォルダに、index.htmlとwidget.xmlを格納したWidgetフォルダを格納します。 格納されたwidget.xmlで設定した名称が、Shadeのスクリプトメニューに表示されます。

  • widgetsフォルダ
    Shadeフォルダ内のwidgetsフォルダ
    • index.html
      HTML/CSS/JavaScript/Python記述ファイル(文字コード:UTF-8/改行コードは任意)
    • widget.xml
      Widget設定ファイル

この他に通常のwebページの構成と同様、外部CSSファイルやjsファイル、イメージ、サウンドなどを同一フォルダに格納して利用することができます。

コード構成

HTMLとCSS

  • index.htmlに書かれたHTMLとCSSでインターフェイスを作成します。

Python

  • index.htmlのidタグ付きの要素内(<textarea>)にPythonスクリプトを記述します。
  • JavaScript内にstringとして記述することも可能です。
  • 書式は通常のPythonスクリプトと同じです。
  • モジュールとして外部pycファイルの使用も可能です。

JavaScript

  • index.htmlの所定のタグ内(<script type="text/javascript">)にJavaScriptを記述します。
  • 書式は通常のJavaScriptと同じです。
  • Shade用の関数により、PythonスクリプトをShadeに渡し、操作します。
Shade Widgetリファレンス
ライブラリ/サンプル
ツールボックス