widget builder

ウィジェットビルダー

シンプルなCLIを使用して、Windowsデスクトップ用のHTMLウィジェットを開発、インストール、配布

目次

1. インストール
2. クイックスタートガイド
3. サンプル
4. 公開とインストール
   1. 出版
   2. インストール
5. 構成ファイル
6. CLIを使用します
7. 寄稿ウィジェット

インストール

ダウンロード、解凍、フォルダーに移動し、 npmでインストールします。

 $ npm install -g
$ npm start

またはnpmから直接ダウンロードしてください：

 $ npm install -g widget-builder

クイックスタートガイド

1. 新しいフォルダーを作成します
2. フォルダーへのcd 、 widgets initを入力し、プロジェクトの名前を入力してください
3. 生成されたHTMLファイルを混乱させて、ウィジェットの外観をカスタマイズします
4. JavaScriptまたはCSSファイルをマスターHTMLファイルに追加およびリンク
5. 構成ファイルを変更します
6. フォルダーに移動し、 widgets buildを入力して、ウィジェットをローカルにビルドしてインストールする

サンプル

お気に入りの曲を聴くためのウィジェットであるSpotifyリスナーをご覧ください。

ウィジェットの公開とインストール

出版

では、配布のためにウィジェットを共有したいですか？これが何をすべきか：

1. プロジェクトフォルダーへのcd
2. widgets publish実行します
3. プロジェクトフォルダーと同じディレクトリに新しいdistフォルダーが生成されます。このフォルダを配布できるようになり、他のフォルダーがwidgets installできます

インストール

これがあなたと共有されたウィジェットをインストールする方法です：

1. フォルダーに移動します
2. widgets installます

構成ファイル

すべてのウィジェットプロジェクトには、 config.jsonファイルが含まれています。このファイルは、ウィジェットに使用する設定をプログラムに伝えます。
標準構成ファイルは次のとおりです。

{
  "name" : " widget " ,
  "version" : " 1.0.0 " ,
  "description" : " Custom desktop widget " ,
  "index" : " ./index.html " ,
  "properties" : {
    "x" : 100 ,
    "y" : 100 ,
    "width" : 100 ,
    "height" : 100 ,
    "transparent" : false ,
    "interact" : true ,
    "draggable" : true
  }
}

財産	意味
name （文字列）	プロジェクト名
version （文字列）	プロジェクトバージョン
index （文字列）	マスターHTMLファイルへの参照。その他の参照（JSやCSSなど）は、このファイルにリンクする必要があります。
x 、 y 、 width 、およびheight （整数）	ウィジェットが最初に起動するときの位置と寸法
transparent （ブール）	ウィジェットの背景を透明にします
interact （ブール）	ウィジェットをインタラクタブルにします
draggable （ブール）	ウィジェットをドラッグ可能にします
top （ブール）	すべてのウィンドウの上にウィジェットを維持します
requirements （配列）	ウィジェットが機能するために必要なNPMパッケージ。これらのパッケージは、ウィジェットがインストールされているときにローカルにインストールされます
install （文字列または配列）	ウィジェットのインストール中に実行するスクリプト

CLIを使用します

ウィジェットビルダーがインストールされると、CLIにキーワードwidgetsでアクセスできます

コマンド

指示	意味
widgets build [folder]	HTMLファイルをデスクトップウィジェットとインストールにビルドします
widgets publish [folder]	ウィジェットCLIによってインストールできるdistファイルを生成します
widgets install [folder]	フォルダーにウィジェットをインストールします
widgets init [folder]	ウィジェットプロジェクトを初期化します
widgets list	インストールされているすべてのウィジェットをリストします
widgets uninstall <widget>	名前でウィジェットをアンインストールします
widgets config <widget>	名前でウィジェットを構成します
widgets start [folder]	フォルダーでウィジェットを起動します

オプション

指示	意味
widgets --help	ヘルプを表示します
widgets --version	現在のバージョンを表示します

寄稿ウィジェット

ここで、作成したウィジェットを共有する手順を見つけることができます