概要
すべての PicoPixel ファイルには独自の library があります。これはそのファイルが使う colors、fonts、images、animated images、components を集めたもので、Assets panel に表示されます。そのままでは、その library は 1 つのファイルに属します。ファイルを Publishing すると、その library はチームメイトが再利用できるものになります。別のファイルから link すると、その assets がそのファイル自身の assets と一緒に表示されます。
このガイドでは、library とは何か、Publish が正確に何をするか（そして同じくらい重要な、何をしないか）、libraries を publish / link する方法、どこで見つけるかを説明します。最も重要な点は次です。
Publishing は作品を公開しません。 Publish はファイルの library をあなたのチームだけが再利用できるようにします。つまり PicoPixel workspace の人だけです。インターネットに投稿されず、公開一覧に載らず、チーム外の誰にも見えません。コンテンツがチーム外へ出る方法は、この記事の最後で説明する、あなたが 意図的に行うものだけです。
library とは
library はファイルの中にある再利用可能な assets の集合です。Assets panel では、そのファイル自身の assets が local library の下に表示されます。これは常に存在し、デフォルトで開きます。
別の team library をファイルに link すると、local library の下に2 つ目の、別名のセクションとして表示されます。見出しはその library のファイル名です（例：Animation Examples）。つまり link 後の Assets panel には、ファイル自身の assets と linked library の assets の両方が並び、ドラッグして使える状態になります。
同じ棚に 2 段あると考えてください。local library はこのファイルが作ったもの、各 linked library はチーム内の別ファイルから借りた棚です。どちらからも取り出せて、デザインから離れる必要はありません。
library が持てるもの
ファイルの Assets panel にあるものは、publish すると library と一緒に運ばれます。PicoPixel は assets を次のセクションに分けます。
- Images、ファイルに追加した静的グラフィック。
- Animated images、複数フレームの animated graphics。
- Components、再利用可能な LVGL widgets（下記参照）。
- Colors、保存した color swatches。
- Fonts、追加し、デバイス用に変換した fonts。
ファイルを publish すると、これらすべてがチームで再利用可能になり、ファイル間でコピー＆ペーストする必要はありません。
"component" とは
component は、1 つ以上の widgets からなる再利用可能な構成要素です。単一の button や label は 1 つの widget ですが、component は複数の widgets と layers をまとめられます。たとえば title、icon、value を持つ styled card をひとまとまりにし、どの screen にも置ける再利用単位として扱えます。
各 component には main instance があります。main instance を編集すると、その変更はその component のすべてのコピーに流れます。あなたの library を link した他のファイル内のコピーも含みます。これが UI の一貫性を保つうえで components が強力な理由です。control を 1 回定義し、どこでも再利用し、1 か所で更新できます。
複数の screens で同じ小さな widgets 群を何度も作っているなら、header bar、metric tile、labelled toggle など、それは component になるのを待っています。1 回作れば、すべての screen が足並みを揃えます。
ファイルを library として publish する
Publishing は 1 つのスイッチを切り替えます。ファイルをチームの shared library としてマークします。
- Libraries dialog を開きます。Assets panel から Add library ボタンを使います（ファイルに linked libraries や components がすでにある場合は Manage library と表示されます）。
- LIBRARIES tab で LIBRARIES IN THIS FILE を見ます。File library が現在のファイルの library で、その横に Publish ボタンがあります。
- Publish をクリックします。
ボタンは Unpublish に変わり、そのファイルがチームで link できる shared library になったことを示します。PicoPixel はファイルに小さな library badge も追加します。workspace header の右上 と Dashboard のファイルカードで確認でき、どのファイルが published か見分けやすくなります。
後で Unpublish をクリックすると確認を求められ、library の link が解除されます。PicoPixel はまず、その library を使っていたファイルに assets をコピーするため、依存ファイルが突然必要なものを失うことはありません。
チームの libraries を見つける
Published libraries はチーム全体で 1 か所に集まります。
- Dashboard を開きます。
- 左サイドバーの Sources の下で Libraries をクリックします。
このページには、チーム内で publish されたすべての library が表示されます。現在の team にスコープされており、team を切り替えるとその team の libraries が表示されます。チームメイトが再利用できるものを探す catalogue です。
別のファイルで library を再利用する
library が publish されると、チーム内のどのファイルでも取り込めます。
- 作業したいファイルを開きます。
- Assets panel で Add library（または Manage library）をクリックして Libraries dialog を開きます。
- SHARED LIBRARIES セクションで目的の library を見つけます。リストが長い場合は Search shared libraries が役立ちます。横の + をクリックして link します。
linked library は Assets panel 内で、local library の下に独自の名前付きセクションとして表示されます。components、images、colors、fonts をそのままデザインへドラッグできます。
linked library を最新に保つ
link した library が変更されても、たとえば owner が component を編集したり color を調整したりしても、更新は強制されません。Libraries dialog の UPDATES tab には新しい変更がある linked libraries が表示され、準備ができたときに Update ボタンで適用できます。変更がなければ、更新するものがないと表示されます。
プライバシー：ここにあるものは自動公開されない
Publish という言葉は実際より大きく聞こえるので、ここは繰り返す価値があります。
Publishing a library はチームとだけ共有し、それ以外には共有しません。 アクセスは認証され、team にスコープされています。public link も public listing もなく、team 外の人が published library に到達する方法はありません。"Published" は "available to my teammates" という意味だけです。
あなたが作ったものがチーム外へ出る方法は正確に 2 つ あり、どちらもあなたが選んで行うことです。
- 自分で
.picopixelファイルを export して送る。 workspace menu から Export.picopixelすると、ファイルがコンピューターにダウンロードされます。その後メールする、共有する、誰かに渡すなどは完全にあなた次第で、PicoPixel の外で起きます。 - PicoPixel team に公式 submission を行う。 デザインをより広い PicoPixel community に共有したい場合、
app.picopixel.io/#/settings/submit-templateで review に提出できます。community gallery に公開される前に、チームが各 submission を確認します。フォームに必要なものと付与する権利は How to submit a template を参照してください。
この 2 つの意図的な手順以外では、files と libraries はチーム内に留まります。
コミュニティ templates と ready-made libraries
ゼロから始める必要はありません。PicoPixel templates gallery には、PicoPixel team と wider community が作成した templates、UI kits、examples、sprites、animated images、full app files が増えています。どれも通常の .picopixel ファイルで、開き、customize し、自分のプロジェクトの出発点として使えます。
開いた template は library にすることもできます。publish すれば、チームは components、fonts、colors、images にアクセスでき、作り直す必要はありません。新しい project を素早く立ち上げたり、既存 project に polished elements を追加したりする最速の方法です。
templates を探し、import し、customize する詳しい流れは How to use PicoPixel templates, UI kits, and full apps を参照してください。
次のステップ
- How to submit a template、wider PicoPixel community とデザインを共有する
- What is a sprite?、components にする価値のある animated、multi-state widgets を作る
- Working with fonts、library が持つ fonts を追加して変換する
- Working with the LVGL Animated Image Widget、ファイル間で再利用できる animated images を作る
