Skip to main content

プリファブで貢献する

Noodlのすべてのプリファブは標準的なNoodlコンポーネントであり、すべてのプリファブがNoodエディターのノードピッカーにドキュメントを介して提供されます。これはもしあなたが他の人にも役立つと思うコンポーネントでNoodlアプリを構築した場合、自分のプリファブをNoodlコミュニティと共有することがGitHubのプルリクエストだけで可能であることを意味します！

プロセスの概要​

  • 下記のガイドラインに従ってプリファブを構築し、コンポーネントをエクスポートします。
  • プリファブドキュメントボイラープレートzipをダウンロードします。
  • Noodlのドキュメントリポジトリをクローンして新しいブランチを作成します。
  • すべてのボイラープレートファイルをNoodlドキュメントの正しいフォルダにドロップし、プリファブのzipエクスポートを静的アセットフォルダに追加することを忘れないでください。
  • インデックスにプリファブを追加します。
  • ドキュメントを記述し、サイドバーを設定します。
  • テストビルドを行います。
  • プルリクエストを送信します。

プリファブのガイドライン​

プリファブができるだけ成功するように、いくつかのガイドラインに従うことが良いです。エクスポートする前に以下を考慮してください：

プリファブは、多くの異なるプロジェクトで、多くの異なるユーザーによって使用されるべきです。できるだけ一般的で孤立したものにすることで、さまざまなシナリオで使用できるようにしてください。例えば：

  • 孤立して構築する：プリファブを構築するために新しいNoodlプロジェクトを使用します。これにより、追跡、バージョン管理、不要な依存関係なしにクリーンにエクスポートすることが容易になります。
  • 一般的な命名を使用する：Save Username To localStorageのコンポーネントがUsername入力を持つのに対し、Save to localStorageがKeyとValueの入力を持つようにします。これにより、ユーザーはUsernameだけでなく、自分のKeyを提供することで必要な値を保存できます。プリファブがUsernameキーを特に扱う必要がある場合、Usernameキーが既に入力された別のコンポーネント内でSave to localStorageコンポーネントを使用できます。
  • 機能を分割する：Init X Data、Get X Data、Set X Data、Clear X Dataといった別々のコンポーネントを持つことが、すべての機能を内蔵した1つの大きなX Dataコンポーネントよりも有用です。
  • できるだけ少ないスタイリングを使用する：エクスポートされたコンポーネントで使用されるすべてのスタイルバリアント、カラースタイル、テキストスタイルがプリファブと共にインポートされます。できるだけデフォルトのスタイルを使用して、ユーザーが行う必要のあるクリーンアップを最小限に抑えます。もちろん、これはプリファブによって異なりますが、多くのプリファブは機能性のためにインポートされ、その後プロジェクトに合わせて再スタイルされます。可能な限り、機能に関連するスタイルに留め、視覚的な装飾に関連しないようにします。これは、プリファブがよりデータ指向の場合により関連性があります。
  • コンポーネント名にプレフィックスを付ける：Xano Prefab - Log In、Xano Prefab - Log Outなどは、ノードピッカーで検索しやすくするため、またプロジェクトにLog Inというコンポーネントが既に含まれている場合のインポート競合を防ぐために役立ちます。
  • プリファブ用に別のシートを使用する：インポート競合をさらに防ぐために、Defaultではなく別のシートでプリファブを構築することが良いです。
  • 既存のNoodl規約の使用を検討する：これには、シグナルをDo、Success、Failureなどと呼ぶこと、コンポーネントをNoodlのコアノードにモデル化しようとするこ

となどが含まれます。これにより、ユーザーがNoodlに既に慣れている場合、コンポーネントの動作を把握しやすくなります。

  • 品質保証：構築したプリファブは、世界中のエンドユーザーに提供されます。プリファブの品質とパフォーマンスができるだけ高いことを確認してください。
  • コンポーネントにコメントを追加する：これにより、ユーザーがドキュメントを参照することなくプリファブを使用しやすくなります。これはまた、プロジェクト内でコンポーネントを変更する必要がある場合に、プリファブの構築方法を理解するのにも役立ちます。

Xanoプリファブの構築方法を確認するために、クローンしてみると良い例が得られます。

プリファブのエクスポート​

プリファブがテストされ、公開の準備ができたら、zipファイルとしてエクスポートする必要があります。これを行う最良の方法は、プリファブのプロジェクトを開いてCtrl/Cmd + Shift + Eを押すことです。これにより、エクスポートポップアップが表示されます：

プリファブに含めたいコンポーネントを選択し、一番下までスクロールしてExportをクリックします。これにより、スタイルバリアント、カラースタイル、テキストスタイル、フォント、イメージ、その他のコンポーネントなど、それらのコンポーネントが持つすべての依存関係も自動的に選択されます。

これにより、ファイルエクスプローラーウィンドウが開き、ファイルに名前を付けるように求められます。ここでの良い実践は、バージョン番号を含むダッシュで名前を付けることです。例：list-with-icons-prefab-1-0.zip。これにより、ブラウザセーフになり、エクスポートされたプリファブのイテレーションを知ることができます。

ドキュメントリポジトリのクローン​

プルリクエストを送信するには、まずNoodl Docs Githubからドキュメントリポジトリをクローンする必要があります。Gitに慣れていない場合は、ビジュアルGitクライアントを使用すると便利です。良い選択肢はGithub Desktopで、無料であり、Gihubワークフローに密接に連携しています。こちらは開始するためのガイドです。特にブランチについての記述に注意してください。

Noodlドキュメントのすべてのプルリクエストは、機能ブランチを通じて行う必要があります - できればプリファブごとに1つのブランチを使用すると、追跡が容易になります。

変更の加え方​

新しいブランチを作成したら、変更を加える準備が整いました。

知っておくべき4つのファイルとフォルダがあります。

  • /library/prefabs/：プリファブのドキュメントが置かれる場所です。
  • /static/library/prefabs/：プリファブのドキュメントのアセットが置かれる場所、例えば画像やエクスポートされたzipファイルなど。
  • /static/library/prefabs/index.json：ノードピッカーでプリファブを利用可能にするためにプリファブをリンクする場所です。
  • sidebarsLibrary.js：プリファブのドキュメントのサイドバーメニューを設定する場所です。

このガイドでは後ほど詳しく説明します。

ドキュメントの記述​

プリファブに良いドキュメントがあることは重要です。これは、人々がプリファブの使用方法を学ぶだけでなく、Noodlエディター外でそれを見つけることができるようにするためです。

このプロセスをできるだけ簡素化するために、こちらからボイラープレートドキュメントのzipファイルをダウンロードできます。

ボイラープレートの構造​

ボイラープレートフォルダにはdocs-starterという名前のフォルダがあります。それには二つのフォルダが含まれています。

  • markdown：/library/prefabs/に自分のフォルダで配置するべきファイルが含まれています。
  • assets：/static/library/prefabs/に自分のフォルダで配置するべきファ

イルが含まれています。

NoodlドキュメントはMarkdownで書かれています。Markdownの標準に加えて、いくつかのCSSクラスが知っておくと良いです。これらはスターターファイルで文書化されています。

リンクを設定する​

プリファブのドキュメントを書いてプレビューする最も簡単な方法は、docs-starterのフォルダを正しいフォルダにドロップしてプリファブの名前に変更することです。

その後、それらにナビゲートできるようにする必要があります。これが/static/library/prefabs/index.jsonファイルの役割です。ダウンロードしたボイラープレートフォルダにはadd-to-prefabs-index.jsonというファイルがあります。これには、/static/library/prefabs/index.jsonファイルの配列の最後にコピーして貼り付けることができるJSONオブジェクトが含まれています。

これが完了したら、ドキュメントリポのルートでターミナルを開き、npm iを実行してインストールし、次にnpm run startを実行します。これにより、Docusaurusでローカルサーバーが起動し、新しいブラウザタブが開いてローカルバージョンのドキュメントをプレビューできます。ファイルベースで変更を保存するたびに、プレビューがリロードされます。

ブラウザでLibraryページに移動し、サイドバーのPrefabsセクションをクリックします。プリファブはリストの一番下に表示されるはずです。

プリファブドキュメントの構造​

ボイラープレートのmarkdownフォルダが/library/prefabs/フォルダに名前を変更して配置された場合、以下のようになるはずです：

構造を見ると、プリファブドキュメントのルートにREADME.mdがあります。これは、プリファブ全体の概要を意味しています。また、componentsという名前のフォルダがあります。これにはプリファブに含まれる各コンポーネントの具体的なドキュメントが含まれています。プリファブドキュメントをこのように構造化することをお勧めします。これにより、参照が容易になります。

Xanoプリファブがどのように書かれ、構造化されているかを確認すると、プリファブドキュメントがどのように書かれるべきかの良い例が得られます。

サイドバーの作成​

今、プリファブに移動するとドキュメントが表示されますが、サイドバーがないことに気づくかもしれません。これは、sidebarsLibrary.jsファイルを編集する必要があるためです。

ダウンロードしたボイラープレートフォルダにはadd-to-sidebarsLibrary.jsというファイルがあります。これには、サイドバーを表すJS配列が含まれています。sidebarsLibrary.jsのオブジェクトの一番下にコピーして貼り付けてください。

基本構造をそのままにしておくことをお勧めします。これには、概要、コンポーネントのカテゴリ、最後に「プリファブに戻る」リンクが含まれます。ただし、プリファブに多くのコンポーネントが含まれている場合は、論理的な方法でコンポーネントを別のカテゴリに分けてグループ化すると良いでしょう。さらに、プリファブがサードパーティプロバイダーなどの外部セットアップを必要とする場合は、_概要_ページの直後にルートにガイドを含めると良いでしょう。

プルリクエストの時間です！​

すべてのドキュメントが書かれたら、すべてがスムーズにビルドされるかを確認する必要があります。これを行うには、ターミナルでドキュメントのルートフォルダでnpm run buildを実行し、完了したらnpm run serveを実行し、ブラウザでローカルドキュメントを開いて、プリファブドキュメントが期待どおりに見えるかを確認します。

次に、プルリクエストを送信する時が来ました！Gitブランチに変更をコミットしてプッシュし、プルリクエストを送信してください（Gitクライアントがリクエストをサポートしている場合）。

プルリクエストはNoodlチームによってレビューされ、承認され次第公開されます！