Storyboard FAQ

Storyboardについて

Q

Storyboardエンドユーザーライセンス契約 (EULA) を確認できますか?

A

Storyboard(評価版を含む)をインストールいただきますと同時にインストールされます。
例:デフォルトの設定でそのままインストールした場合

C:\Program Files\Crank_Software\Documentation\EULA.pdf

なお、インストールする前に内容確認を希望される場合はお問い合わせのページからご連絡ください。

Q

StoryboardにはOSSが含まれますか?

A

OSSに限らず3rdパーティのライセンスについて以下に説明されています。

Q

Storyboardのマニュアルはどの様に提供されますか?また、日本語のマニュアルは提供されますか?

A

Storyboard(評価版を含む)をインストールいただきますと同時にインストールされます。
例:デフォルトの設定でそのままインストールした場合

C:\Program Files\Crank_Software\Documentation\CrankStoryboardSuite.pdf

大変申し訳ございません。日本語のマニュアルは提供しておりません。
pdfドキュメントとは別にCrank社がサポートサイトで情報を公開しています。
サポートサイトではドキュメントのほか動画などもご覧いただくことが可能です。
公開サイトですので、ブラウザ等の翻訳機能をご活用いただければ幸いです。

Storyboardの起動手順について

Q

動画『SCP転送でUIをターゲットに書き出す方法』で行っている、Storyboard Application Export Configurations の Execute after transfer の欄で指定する起動スクリプトの記述例を教えてください。

A

Linux環境を前提とします。
環境変数としてStoryboardのpluginの保存場所のパスを指定する SB_PLUGINS が必要です。また、LD_LIBRARY_PATHには、ダイナミックリンクライブラリのパスを追加登録する必要があります。例えば、i.MX8/yocto 環境の場合、以下のようなscriptを作成します。

storyboard_scp.sh
#!/bin/sh
export RUNTIME_ROOT=/home/user/crank/sbengine/linux-imx8yocto-armle-opengles_2.0-wayland-obj
export SB_PLUGINS=$RUNTIME_ROOT/plugins
export LD_LIBRARY_PATH=$RUNTIME_ROOT/lib:$LD_LIBRARY_PATH
killall sbengine
$RUNTIME_ROOT/bin/sbengine $1


※このファイルはあらかじめLinuxターゲットに転送し実行権限を付加しておきます。
Storyboard Application Export Configurations の Execute after transfer をチェックして、このファイルをフルパスで指定してください。

Q

Storyboard Application Export Configurations でExecute after transfer を指定してエクスポートしても、自動起動できません。アプリケーションの転送自体は正しく行われています。

A

Linux環境を前提とします。
StoryboardデザイナーのConsole ウィンドウに以下のようなエラーが残っている場合があります。

error: XDG_RUNTIME_DIR not set in the environment.
ERROR [0.000]:Unable to get native display
ERROR [0.96189]:Can't initialize the display

この場合、環境変数 XDG_RUNTIME_DIR を設定する必要があります。
Linuxターゲットにログインしてこの環境変数の設定をご確認ください。
例:

target# set | grep XDG_RUNTIME_DIR
XDG_RUNTIME_DIR=/run/user/0
target#

例えば上記の場合、Execute after transfer に指定するスクリプトファイルの先頭に以下のように追記します。

export XDG_RUNTIME_DIR=/run/user/0
Q

タッチパネルを接続していますが、ただしくハンドリングできません。

A

Linux環境を前提とします。
タッチパネルデバイスがdefault値と異なっている可能性があります。
起動時にデバイス名を-omtdevオプションで指定してください。
例:デバイスが /dev/input/event2 の場合

target# sbengine -omtdev,device=/dev/input/event2 app.gapp

デバイス名が不明な場合、catコマンドで/dev/input 内のデバイスを順番に標準出力にリダイレクトすることで確認できます。
例:

target# cat /dev/input/event2

タッチパネルデバイスに対して上記実行しタッチパネルをさわるとゴミが出力されますので、そのデバイスを指定します。

Q

sbengineで指定できるオプションについて教えてください。

A

sbengineのオプションはPDFドキュメントの「Table 10. Plugin Options」またはサポートページの「Storyboard Engine Plugin Options」で説明しています。

IllustratorからPhotoshopへのインポート

Q

Illustratorのデザインファイル(Aiファイル)をStoryboardにインポートするためにPhotoshop(PSD)に書き出す手順を知りたいです。

A

以下の解説動画で手順をご確認いただけます。

Q

Illustratorファイル(Aiファイル)をStoryboardにインポートするためにPhotoshop(PSD)に書き出す際の注意点を知りたいです。

A

【注意点】
①(05:26~) Illustratorのレイヤー内でグループ化されていないものは、
PSDに書き出し後、Photoshopのレイヤーで1つのオブジェクトとなります。

②PhotoshopからStoryboardにインポートする際、ボタンの機能を持つオブジェクト(_up /_down)の上に他のオブジェクトが被っていると、ボタンのactionが作成されても機能しません。PSDのレイヤーの順番でボタンのレイヤーが上になるようにして下さい。

PhotoshopからStoryboardへのインポート

Q

サンプルPSDはありますか?

A

こちらよりダウンロードしていただけます。
Storyboard用PSDファイル

Q

Photoshopのカンバスの設定に指定はありますか?

A

PhotoshopからStoryboardにファイルを読み込むには、ドキュメントがRGB、
カラーモードの8ビットファイル。それ以外の形式には対応していません。

Q

アートボードの命名規則はありますか?

A

他のストーリーボードオブジェクトとは違い、アートボードには命名規則がありません。
アートボードはPhotoshopで設定した名前で、StoryboardのScreenとしてインポートされます。
アートボードの大きさは統一してください。
アートボードの大きさがStoryboardの画面サイズになります。

Q

Photoshopアートボード内のコンテンツの命名規約は?

A

英数字(アルファベット・数字・特殊文字) フォーマットを使用して名前を付ける必要があります。
「Aa-Zz」「0-9」とアンダースコア文字である「_」の組み合わせで行うことができます。
日本語または、全角英字は使用できません。

Photoshopのコンテンツ名と構成は、アプリケーションモデル内での配置が決まります。

※参考PSDファイル:01 _group and _layer.psd

Q

ボタンはどのように作成出来ますか?

A

_upで終わるPSDレイヤーを、_downで終わる同じ名前の別のレイヤーの直上に配置すると、
ボタンとして動作するコントロールが作成されます。

※参考PSDファイル:02 Button-up-down-setting.psd

Photoshopのレイヤーにつけた効果のインポート

Q

描画モードはインポート出来ますか?

A

上のレイヤー(描画モードが変更されている)と下のレイヤー、
2つのレイヤーを選択して、一緒にスマートオブジェクトに変換してください。
ラスタライズ化では効果はインポートされません。

(イメージ画像の白いボタンの効果、【べベルとエンボス】はラスタライズ化でもインポートされます。)

※参考PSDファイル:03 Blending Mode.psd

Q

クリッピングマスクはインポート出来ますか?

A

2つのレイヤーを選択して、一緒にスマートオブジェクトに変換してください。
ラスタライズ化では効果はインポートされません。

※参考PSDファイル:04 clipping Mask.psd

Q

ワープ文字はインポート出来ますか?

A

ラスタライズ化、又はスマートオブジェクト化してください。

※参考PSDファイル:05 Warp text.psd

Q

文字のアンダーラインはインポート出来ますか?

A

ラスタライズ化、又はスマートオブジェクト化してください。

※参考PSDファイル:06 Underline.psd

Q

光彩はインポート出来ますか?

A

ラスタライズ化、又はスマートオブジェクト化してください。

※参考PSDファイル:07 Glow.psd

Q

ドロップシャドウはインポート出来ますか?

A

ラスタライズ化、又はスマートオブジェクト化してください。

※参考PSDファイル:08 Drop-shadow.psd

Q

ベベルとエンボスはインポート出来ますか?

A

ラスタライズ化、又はスマートオブジェクト化してください。

※参考PSDファイル:09 Bevel and Emboss.psd

Q

変形のワープはインポート出来ますか?

A

ラスタライズ化、又はスマートオブジェクト化してください。

※参考PSDファイル:10 Transform-cylinder warp.psd

Q

スマートフィルターのぼかし(ガウス)はインポート出来ますか?

A

スマートフィルター用に変換(スマートオブジェクト化)又は、ラスタライズ化したレイヤーに効果をつければ、インポート可能です。

※参考PSDファイル:11 Blur.psd

Q

スマートフィルターの描画(逆光)はインポート出来ますか?

A

スマートフィルター用に変換(スマートオブジェクト化)又は、ラスタライズ化したレイヤーに効果をつければ、インポート可能です。

※参考PSDファイル:12 LensFlare.psd

Q

スマートフィルターの変形(ジグザグ)はインポート出来ますか?

A

スマートフィルター用に変換(スマートオブジェクト化)又は、ラスタライズ化したレイヤーに効果をつければ、インポート可能です。

※参考PSDファイル:13 zigzag.psd

FigmaからStoryboardへのインポート

Q

FigmaからStoryboardへのインポートに関するガイド(PDF)

A

こちらからダウンロードしていただけます。

Q

FigmaデザインファイルをStoryboardにインポートする手順

A

コラムページよりご確認ください。

Q

StoryboardにインポートするFigmaデザインファイルの作成に関する注意点

A

コラムページよりご確認ください。

ページトップに戻る