本文へスキップ

Kwik App Design Book: 5 注意 レイヤ名など


Kwikのベストプラクティス

Kwikを使用するのは難しいことではありません。ただし、Photoshopのプラグインであるため、エラーを防ぐためにいくつかの注意点があります。

Kwikは、Photoshopのレイヤーの名前を参照しています。間違った名前をレイヤーに付けるとプレビューが出来なくなったりする場合があります。前回のバージョンからKwikで一般的なエラーの検出、表示も可能になりましたが、以下の注意点を常に気をつける事をお勧めします。

1) プロジェクトの名前: なるべく長いプロジェクトの名前を付けるのを避けてください。また、次のような記号は、XML変換の際に問題が起きてしまうので使わないでください。 <> %,#;!. 名前はとにかく、シンプルにすることをお勧めします。

2) レイヤー名: ボタンやアニメーションの追加をする前に、次のルールを守る事をお勧めします。インタラクションを追加する前にレイヤーの名前に注意を払って付けた方が、インタラクションを追加した後に、全ての名前の場所を編集するより簡単です。レイヤーの名前の付け方のルールは以下の通りです。

  • 長い名前を避ける。レイヤーの名前はパブリッシュされる際に、全て変数になります。長い名前を使えばそれだけメモリも使ってしまい、コードも分かりずらくなります。
  • 同じレイヤー名に注意。 レイヤーに同じ名前を付けてしまうとパブリッシュされる際に最初にパブリッシュされたレイヤーが後から書き出されたレイヤーに書き換えられてしまいます。Lua言語のコードが不正なものになる原因になるので同じレイヤー名を使っていない事を確認してください。
  • 上記同様、未サポートの記号 <> %,#;!. を使うとLua言語のコードで問題が起こる可能性があります。Kwikは、未サポートの記号を取り除こうとしますが、ボタンのアクションに使われた場合などはパブリッシュ中にエラーが出る場合があります。
  • レイヤー名を数字にしない。 例えば、レイヤー名を、 1、と言う様な名前にするとエラーが発生してしまいます。レイヤー名として Name_01は問題ありません。
  • Lua言語で使われているキーワードを使わない。例えば レイヤー名を if などとするとLua言語で if が使われた場合に問題が起こる可能性があります。 Lua言語で使われているコマンドの例は: if, end, local, transition, play, などです。

3) テキストのレイヤー: テキスト文字を表示しているレイヤーはPhotoshopのデフォルトでタイプされたテキストがレイヤー名になっています。長い文章を書いた場合は、タイプされた長い文章がレイヤー名になってしまうので、レイヤー名を変更する必要があります。長いレイヤー名は、パブリッシュ時に問題をおコアしますので、レイヤー名は短くしてください。(この長いレイヤー名の問題でパブリッシュされないという問題が一番の問題の原因です)また、テキストは全てイメージとしてパブリッシュされますので、注意してください

4) グループ化されたレイヤー: グループされたレイヤーはKwikでは一つのイメージとしてパブリッシュされます。複雑なアイテムを作成する際に便利です。(例えば、ボタン。ボタンの形、テキスト、影などが複数のレイヤーで作成されたボタンはグループ化すると便利です。)グループ化されたレイヤーは別々にパブリッシュされないので注意が必要です。

5) 背景レイヤーの作成: Kwikは、必ず最低1つの画像レイヤーがパブリッシュ時に必要です。なので背景レイヤーの作成を最初にする事をおすすめします。背景レイヤーはページを移動する”page swipe”のイベントの時に使われます。また、Kwikは、PSDファイルの一番下のレイヤーが背景レイヤーと認識します。見つからないとエラーになってしまうので注意してください。

6) ユニバーサル・プロジェクト (Universal project): たくさんのデバイスを対象とした便利な機能ですが、パブリッシュする際に複数のイメージを書き出したり、コードは複雑になります。本当に必要か検討してから、ご使用ください。例えば、320x480のiPhoneでサイズの大きな文章を読むでしょうか?。iPadだけでよい場合は、iPad専用に作成する事をおすすめします。

7) Fireworks: デザイナーの方でFireworksを使ってプロジェクトを始められる場合の注意点です。 Fireworksを使ってPSDファイルを作成した場合は、背景レイヤーが作られていません。全てのレイヤーがグループ化されてしまっています。このために正しく動作しません。、FireworksからのPSDファイルを使用する場合は、サブレイヤーを全て選択して、メインのフォルダ直下へ移動させる作業が必要です。

8) ボタンとアニメーションの名前: Kwikは自動的にボタンやアニメーションに名前を付けるようになっていますが、任意の名前に変える事が可能です。ただしレイヤー同様、名前の付け方には注意してください。分かりやすい名前をつけることで作業もしやすくなります。

9) イメージのパブリッシュは初回のみ (Export images only once): レイヤーの名前をルールに従って変更後に、Previewボタンを押して、イメージファイルを一度パブリッシュする事をおすすめします。 手順はまず設定ボタンをクリックして、画像出力というオプションにチェックマークを付けてから、パブリッシュボタンでイメージのパブリッシュをします。パブリッシュが終わったら、再び設定ボタンをクリックします。設定パネルから、画像出力のチェックボックスのチェックマークを外して機能を無効にさせます。上の手順で作業をする事で、次からパブリッシュボタンを押したときは、Luaコードだけをパブリッシュするだけになるので作業が速くなります。

10) アイコンとオープニングイメージを忘れずに: Kwikは作ったプロジェクトをプレビューするのに便利です。ただし、コミック用やインタラクティブなブック用の作成が終わったら、アイコンとデフォルトのスクリーンの作成も忘れない様にしましょう。アイコンの作成を忘れてしまうとKwikのロゴがデバイス上に表示されるアイコンに なってしまいます。