概要
PicoPixel の各ファイルには、ライブラリがあります。そのファイルで使う色、フォント、画像、アニメーション画像、コンポーネントをまとめたもので、Assets パネルから確認できます。通常はそのファイル内で使いますが、Publish を実行するとチームでも再利用できます。別のファイルからリンクすれば、そのファイル自身のアセットと並んで表示されます。
このガイドでは、ライブラリの内容、Publish の意味、共有とリンクの手順、共有済みライブラリの探し方を説明します。
Publish を実行しても、作品が一般公開されることはありません。 ライブラリを再利用できるのは、PicoPixel ワークスペースのチームメンバーだけです。インターネットへの投稿や公開一覧への掲載は行われません。チーム外への共有には、記事の後半で説明する操作を自分で行う必要があります。
ライブラリとは
ライブラリは、ファイルに含まれる再利用可能なアセットの集まりです。Assets パネルの local library に、そのファイル自身のアセットが表示されます。この欄は常にあり、初期状態では開いています。
別のチームライブラリをリンクすると、ローカルライブラリの下に独立した欄が追加されます。見出しには、Animation Examples など、ライブラリのファイル名が表示されます。自分のファイルとリンク先、両方のアセットをここからドラッグして使えます。
自分のファイル用と、チームの別ファイル用のアセット置き場が、同じパネルに並ぶ仕組みです。編集中の画面を離れずに、どちらのアセットも使えます。
ライブラリに含まれるもの
ファイルを共有すると、Assets パネル内の次のアセットをチームでも使えるようになります。
- Images：ファイルに追加した静止画像。
- Animated images：複数のフレームを持つアニメーション画像。
- Components：再利用可能な LVGL ウィジェットのまとまり。
- Colors：保存した色。
- Fonts：デバイス用に変換したフォント。
ファイル間で一つずつコピーする必要はありません。
コンポーネントとは
コンポーネントは、1 つ以上のウィジェットを再利用できる部品としてまとめたものです。単独のボタンやラベルだけでなく、複数のウィジェットやレイヤーを含められます。例えば、見出し・アイコン・数値を配置したカードをひとまとまりにし、さまざまな画面で使えます。
コンポーネントには、元となるメインインスタンスがあります。元を編集すると、同じコンポーネントのコピーにも変更を反映できます。リンクした別ファイル内のコピーも対象です。一度作った部品を使い回し、更新箇所をまとめられるため、UI の統一感を保ちやすくなります。
ヘッダー、数値を表示するカード、ラベル付きスイッチなどを複数の画面で繰り返し作っているなら、コンポーネントにすると便利です。一か所で管理でき、画面ごとの作り込みの違いも減らせます。
ファイルをチームライブラリとして共有する
Publish は、ファイルをチームで使える共有ライブラリにする操作です。
- Assets パネルの Add library をクリックし、Libraries ダイアログを開きます。すでにライブラリやコンポーネントがある場合は Manage library と表示されます。
- LIBRARIES タブの LIBRARIES IN THIS FILE を確認します。File library が現在のファイルのライブラリです。
- 横にある Publish をクリックします。
ボタンが Unpublish に変われば共有できています。ワークスペースのヘッダー右上と Dashboard のファイルカードには、共有ライブラリであることを示す小さなバッジが表示されます。
共有をやめるには Unpublish をクリックし、確認画面で操作を確定します。リンクを解除する前に、PicoPixel が利用先のファイルへアセットをコピーするため、必要なアセットが突然失われることはありません。
チームのライブラリを探す
共有済みライブラリは、チーム単位でまとめて確認できます。
- Dashboard を開きます。
- 左サイドバーの Sources にある Libraries をクリックします。
現在のチームで共有されているライブラリがすべて表示されます。チームを切り替えると、一覧もそのチームのものに切り替わります。
別のファイルでライブラリを使う
共有済みライブラリは、同じチームのファイルから利用できます。
- 作業するファイルを開きます。
- Assets パネルの Add library または Manage library で、Libraries ダイアログを開きます。
- SHARED LIBRARIES から目的のライブラリを探し、横の + をクリックしてリンクします。数が多い場合は Search shared libraries で検索できます。
Assets パネルの local library の下に、リンクしたライブラリの名前が表示されます。コンポーネント、画像、色、フォントをそのままドラッグして使えます。
更新を反映する
リンク元のコンポーネントや色が変更されても、編集中のファイルに強制的に適用されることはありません。Libraries ダイアログの UPDATES タブに更新のあるライブラリが表示されるので、都合のよいタイミングで Update をクリックしてください。変更がなければ、更新がないことを示すメッセージが表示されます。
プライバシーと公開範囲
Publish は「公開」とも訳されますが、ここではチーム内での共有を指します。
ライブラリの共有範囲はチーム内だけです。 利用には認証が必要で、公開リンクや一般向けの一覧は作られません。共有済みのライブラリにチーム外の人がアクセスすることもできません。
チーム外に作品を共有するには、次の 2 つのいずれかを自分で行います。
.picopixelファイルをエクスポートして送る。 ワークスペースメニューで Export.picopixelを選ぶと、ファイルがコンピューターに保存されます。その後のメール送信や共有は、PicoPixel の外で自分が行う操作です。- PicoPixel チームに投稿する。 コミュニティに公開したい場合は、
app.picopixel.io/#/settings/submit-templateから審査を申し込めます。公開前にチームが内容を確認します。必要な情報と共有時の権利については、テンプレートの投稿方法をご覧ください。
これらの操作を行わなければ、ファイルとライブラリはチーム内にとどまります。
コミュニティのテンプレートをライブラリにする
PicoPixel のテンプレートギャラリーには、開発チームやコミュニティが作ったテンプレート、UI キット、サンプル、スプライト、アニメーション画像、完成アプリがあります。いずれも通常の .picopixel ファイルなので、開いて編集し、自分のプロジェクトの土台にできます。
開いたテンプレートをライブラリとして共有すれば、含まれるコンポーネントやフォント、色、画像をチームで使えます。新しいプロジェクトを始めるときも、既存の UI に部品を追加するときも便利です。
探し方やインポート、編集の流れは、テンプレート・UI キット・完成アプリの使い方をご覧ください。
次のステップ
- テンプレートの投稿方法：作品をコミュニティと共有する
- スプライトとは？：再利用できる、状態付きのアニメーションを作る
- フォントの使い方：フォントを追加して変換する
- アニメーション画像の使い方：複数のファイルで再利用できるアニメーション画像を作る
