BalsamiqMockupsのカスタムコントロールとページテンプレート

Balsamiq Mockups Custom Controls

シンボルの操作

バージョン2.0以降、Mockups forDesktopはシンボルの概念をサポートします。他のソフトウェアは、これと同じ機能をテンプレートまたはマスターページ、コンポーネント、またはウィジェットと呼びます。

バージョン2.0以降、MockupsデスクトップバージョンはSymbolの概念をサポートしています。同様の機能は、他のソフトウェアではテンプレート、マスターページ、コンポーネント、またはウィジェットと呼ばれます。

本質的に、Symbolsを使用すると、さまざまなモックアップ間で共通の要素を再利用できます。

基本的に、Symbolを使用すると、複数のモックアップファイルの共通要素を参照できます。

これは、この機能の利点を示す簡単なビデオ紹介です。

シンボルの作成シンボルの作成

モックアップのシンボルは、シンボルに「変換」された単純な名前付きグループです（内部で何が行われるかについては後で詳しく説明します）が、最初にシンボルを作成しましょう！

モックアップでは、Symbolは単にSymbolフォームに名前を付けるグループです。その帽子については後日詳しく説明します。それでは、シンボルを作成しましょう！

新しいグループを作成してシンボルに変換するか、既存のグループを使用できます。次の手順は、新しいグループを作成することを前提としています。

新しいグループを作成するか、すでに作成されているグループを選択してシンボルに変換できます。次の手順は、新しいグループの作成から開始することを前提としています。

1.グループ化するコントロールを選択します
2.選択範囲をグループ化します（[編集]-> [グループ化]を選択すると、グループが青みがかった色に変わります）
3.グループに名前を付けます（つまり、ログインフォーム）

1.グループ化するコントロールを選択します
2.グループがコントロールを選択します。 （[編集]メニューの[グループ]コマンドを選択すると、グループが青色になります。）
3.グループに名前を付けます。 （ログインフォームなど）

4.新しいグループでファイルを保存します（グループをシンボルに変換するには、ファイルを保存する必要があります）。
5.プロパティインスペクターの[シンボルに変換]アイコンをクリックします。

4.この新しいグループでファイルを保存します。 （グループをシンボルに変換する前に、ファイルを保存する必要があります。）
5.プロパティインスペクターの[シンボルに変換]ボタンをクリックして、シンボルに変換します。

グループ選択が薄緑色になっていることがわかります。これは、選択がシンボルのインスタンスになったことを意味します。

グループの選択が明るい緑色に変わったことに気付くでしょう。これは、Symbolのインスタンスが選択されていることを意味します。

これで、「ログインフォーム」という名前のシンボルが作成され、UIライブラリの[プロジェクトアセット]タブに表示されます。 （クイック追加を使用してシンボルを追加することもできます）。

これで、UIライブラリの[プロジェクトアセット]タブに表示される「ログインフォーム」というシンボルができました。 （クイック追加で追加することもできます。）

フードの下

「シンボルに変換」をクリックすると、Mockups for Desktopは、選択した名前付きグループを、bmmlファイルのすぐ隣にある「assets」というフォルダー内のsymbols.bmmlというファイルに追加しました。まだ読んでいない場合は、モックアップを使用してプロジェクトを作成するためのベストプラクティスを参照することをお勧めします。

[シンボルに変換]をクリックすると、Mockups Desktopは、選択した名前付きグループを、BMMLファイルの横にあるassetsフォルダーのsymbols.bmmlファイルに追加します。アセットフォルダがわからない場合は、モックアップを使用してプロジェクトを作成するためのベストプラクティスを参照する必要がある場合があります（モックアップを使用してプロジェクトのベストプラクティスを作成します）。

モックアップのシンボルを理解するための鍵は、シンボルがプロジェクトのアセットフォルダに保存されているBMMLファイル内に含まれる名前付きグループであるということです。

Symbolを理解するための鍵は、SymbolがプロジェクトアセットフォルダーのBMMLファイルに保存されている名前付きグループであることです。

上記の定義はかなり密集していることはわかっていますが、それを完全に理解すると、この驚くほど強力な機能を最大限に活用するのに役立ちます。今すぐ意味がわからなくても心配しないでください。また戻ってきます。もう一度読んで次に進んでください。 :)

この定義が非常にあいまいであることはわかっていますが、この定義を完全に理解すると、これとその強力な機能を習得するのに役立ちます。それでもSymbolの概念がない場合でも、心配しないでください。一緒に戻って、先に進むためにもう一度学びましょう。 ）。

シンボルプロパティのオーバーライドSymbolプロパティを再定義します

シンボルを作成したら、使用するたびに少し変更したくなることがよくあります。たとえば、マスターページ/テンプレートとして作成したシンボルを想像してみてください。このシンボルには、Webページのタイトルとナビゲーションが含まれています。

シンボルを作成したら、それを使用するたびに微調整が必​​要になることがよくあります。 Webページのタイトルとナビゲーションを含むマスターページ/テンプルとしてシンボルを作成するとします。

すべてのウェブサイトページのタイトルのフォントサイズと位置は同じですが、タイトルのテキストはページごとに異なる必要があります。ナビゲーションバーに現在のページとして表示するページについても同じことが言えます。

サイト全体のページタイトルのフォントと場所のサイズは同じですが、各ページのタイトルテキストは異なります。同様に、ナビゲーションバーは特定のページの現在のアドレスを識別します。

シンボルを使用すると、シンボルを使用するたびにシンボルプロパティを上書きできるため、この結果を得ることができます。これを行うには、シンボルをダブルクリック（またはEnterキーまたはF2キーを押す）して「Enterキーを押す」ことから始めます。

Symbolを使用すると、属性を使用するたびに属性を再定義できます。必要に応じて、シンボルをダブルクリックし、ショートカットキーF2'EnterInternal 'を入力または押します。

このエクスペリエンスはグループのコンテンツの編集と非常に似ていますが、Mockups for Desktopは、実行していることがシンボルの一部のプロパティを実際にオーバーライドしていることを警告していることに気付くでしょう。

これはグループコンテンツの編集によく似ていますが、シンボルのプロパティを本当に再定義する必要があるかどうかについてのヒントに気付くでしょう。

この時点で、グループを編集しているかのように、シンボル内の各コントロールを自由に操作できます。コントロールの追加、削除、グループ化など、シンボルプロパティのオーバーライド中の一部の操作は許可されていません。

グループを編集するのと同じように、Symbolsのすべてのコントロールを自由に調整できます。追加、削除、グループコントロールなど、Symbolプロパティを超える操作は許可されていません。

間違えた場合は、いつでも元に戻して元に戻すことができます。プロパティの変更を1つ削除して、Symbolのデフォルトのプロパティに戻す場合は、プロパティインスペクタの小さな緑色の「x」アイコンをクリックします。

間違えた場合は、いつでも返品を取り消すことができます。 Posを元に戻すだけの場合。 ＆サイズを指定してSymbolのデフォルト値に戻すと、プロパティインスペクター（位置とサイズの右側）にある緑色の「x」アイコンをクリックできます。

シンボル全体を選択したときに表示されるプロパティインスペクターの「x」アイコンを使用して、シンボルのインスタンスに加えたすべての変更を一度に元に戻すこともできます。

プロパティインスペクターの「x」アイコン（シンボル列の右端の列）を使用して、すべての操作（位置とサイズおよびコンテンツ）を元に戻し、シンボルインスタンスに復元することもできます。

シンボルのソースの編集シンボルソースファイルの編集

再利用可能なシンボルの主な利点は、変更を加える必要がある場合、1つの場所でそれを行うことができ、そのシンボルのすべてのインスタンス（使用）に伝播されることです。

Symbolを再利用する主な利点は、調整が必要になったときに、場所を編集してSymbolのすべてのインスタンスを更新するだけでよいことです。

シンボルのソースを編集するには、グループを編集するのと同じように、シンボルを含むBMMLファイルを開いて通常どおりに編集します。変更を保存し、そのシンボルを使用するモックアップに戻って、変更が適用されたことに注意してください。

グループを編集するのと同じように、シンボルソースファイルを編集します。シンボルを含むBMMLファイルを開いて編集するだけです。更新を保存し、モックアップに戻ってSymbolを使用すると、変更が有効になっていることがわかります。それだけです。

アプリには、シンボルを編集するためにシンボルのソースにアクセスするのに役立つショートカットがいくつかあります。

プログラムには、編集のためにシンボルソースファイルを開くのに役立つ2つのショートカットが用意されています。

•Symbolインスタンスを選択し、プロパティインスペクターの[ソースの編集]ボタンを押すことができます。
•Symbolインスタンスを選択し、プロパティインスペクターで[ソースの編集]をクリックできます。

•オーバーライドする記号を入力して、そこで「編集」ボタンを押すことができます。
•以下に示すように、Symbolインスタンスを入力して、[編集]ボタンをクリックできます。

シンボルライブラリ

シンボルライブラリは、シンボル定義のコレクションです。チームと共通のコントロールを共有するためにシンボルライブラリを作成するか、Mockups ToGoを介してコミュニティと共有することをお勧めします。

シンボルライブラリを作成するには、bmmlファイルを作成し、いくつかのグループ（シンボルごとに1つ）を作成して、各グループに名前を付けるだけです。

シンボルライブラリはシンボルコレクションです。チームのシンボルライブラリ共有コントロールを作成することも、コミュニティMockups ToGoを通じて共有することもできます。

シンボルライブラリを作成するには、BMMLファイルといくつかのグループ（それぞれがシンボル）を作成する必要があり、グループには独自の名前があります。

誰かがBMMLをアセットフォルダに保存するときはいつでも、そのプロジェクトのモックアップで、そこに含まれるグループをシンボルとして使用できます。

アセットフォルダにBMMLファイルが保存されている限り、グループはこのプロジェクトの任意のモックアップで使用できるシンボルに変換されます。

もう1つ...モックアップ全体をシンボルとして使用するもう1つ...モックアップ全体をシンボルとして使用する

まだ共有していない秘密が少しあります。モックアップのシンボルが、プロジェクトのアセットフォルダに保存されているBMMLファイル内に含まれる単純な名前付きグループであることを覚えていますか？

まあ、それは完全に真実ではないことがわかりました。モックアップでシンボルを作成するもう1つの方法があります。グループを含まないモックアップを作成し、アセットフォルダに保存するだけです。モックアップはこれを検出し、モックアップ全体をモックアップのファイル名にちなんで名付けられたシンボルとして扱います。

私たちはまだあなたと共有されていない小さな秘密を持っています。この文を覚えていますか？ 「モックアップでは、Symbolは単純な名前付きグループであり、Symbol形式に変換され、プロジェクトアセットフォルダーのBMMLファイルに保存されます。」

実際、これは完全に正しいわけではありません。モックアップでシンボルを作成する方法もあります。アセットフォルダーへのグループなしでモックアップを作成します。モックアップはモックアップ全体をシンボルとして受け取り、名前はモックアップファイル名の後に続きます。

これを念頭に置いて、シンボルの完全な定義は次のようになります。
これを念頭に置いて、次のようにシンボル定義を完成させます。

モックアップのシンボルは、プロジェクトのアセットフォルダに保存されているBMMLファイル内に含まれている名前付きグループ、またはプロジェクトのアセットフォルダに保存されているグループを含まないBMMLファイルのいずれかです。
モックアップでは、Symbolは、プロジェクトアセットフォルダー内のBMMLファイルで名前が付けられた名前付きグループであり、フォルダー内にグループがないBMMLファイルです。

プロジェクト間でシンボルを共有するプロジェクト間でシンボルを共有する

何？あなたはまだ読んでいますか？シンボルを十分に得ることができませんか？ ）。
何？あなたはまだ見ていますか？これらのシンボル情報はあなたにとって十分ではありませんか？

よし、あなたがそれを求めたので、私たちはあなたのためにすべての豆をこぼします。これまで、BMMLファイルの横にある「アセット」と呼ばれるディレクトリである「プロジェクトアセットフォルダ」について説明してきました。

さて、あなたがドアに来たので、私たちは完全に告白されなければなりませんでした。これまで、プロジェクトリソースフォルダについて何度も話してきましたが、「assets」と呼ばれるこのディレクトリは、BMMLファイルの隣にあります。

それはすべて素晴らしいことですが、すべてのプロジェクトでシンボルを共有したい場合はどうでしょうか。

それはすべて良いことですが、これらのシンボルをすべてのプロジェクトで共有したい場合はどうでしょうか。

あなたのような超パワーユーザーを支援するために、Mockupsには「アカウントアセット」フォルダーの概念があります。デフォルトでは、Mockupsは「BalsamiqMockups」というディレクトリのDocumentsフォルダーでそれを検索しますが、構成ファイルを介してMockupsが検索する場所を指定できます。

このようなスーパーユーザーを支援するために、Mockupsはアカウントファイルリソースフォルダーの概念を導入しています。デフォルトでは、モックアップは「documents」フォルダーを検索し、「Balsamiq Mockups」フォルダーを配置します。また、Config.fileを介して場所を指定することもできます。

ドキュメントフォルダ内の「BalsamiqMockups」というフォルダ内の「assets」というフォルダに画像またはBMMLファイルを配置すると、これらの画像とシンボルは、の「AccountAssets」フォルダの下にある任意のプロジェクトからアクセスできます。 UIライブラリ。アカウントアセットフォルダが存在し、その中に何かがある場合にのみ魔法のように表示されます。

ドキュメントの Balsamiq Mockups assetsフォルダーに画像またはBMMLファイルを配置すると、これらの画像とシンボルはどのプロジェクトでも使用できます。アカウントリソースフォルダーに該当するファイルがある限り、UIライブラリの[アカウントアセット]タブに魔法のように表示されます。

気が遠くなるかもしれないので、これを小さく書いています。DropBoxで共有アカウントアセットフォルダーを作成することを検討し、チームの全員に構成ファイルをそのフォルダーにポイントするように指示します。それを少しの間沈めましょう。私は知っている、すごい。ワオ。

次の言葉はとてもエキサイティングで、気が遠くなることさえあるので、私は今、そのような小さな言葉で書いています：DropBoxで共有アカウントリソースフォルダーを作成し、チームの全員にこのアドレスへのプロファイルを指すように伝えることを検討してください。 .. ちょっと待って。わかってる、すごい、すごいすごい〜。

次のステップとフィードバック次のステップとフィードバック

現時点では、SymbolsはMockups for Desktopでのみ機能し、他のシンボルの内部にシンボルをネストすることはできません。これらの機能が重要な場合は、お知らせください。

現在、Symbolはデスクトップバージョンのモックアップでのみ機能し、Symbolをサポートして他のSymbolをネストします。これらの機能が重要な場合は、お知らせください。

シンボルに関する質問やこのドキュメントに関するフィードバックはありますか？ここに投稿してください！

Symbolまたはこのドキュメントについて質問がありますか？ここに投稿してください。