Justinmind は、ビデオ、オーディオなど外部 HTML をインタラクティブなワイヤフレームに追加することができます。
ビデオをインタラクティブなプロトタイプへ追加
ビデオを追加するには、editor 内の [Special Components widgets] を使用する必要があります。
- HTML ウィジェットをキャンバスにドラッグします。
- ブラウザー上で YouTube ページを開き、挿入したいビデオを選択します。
- ビデオ下にある [共有] アイコンをクリックし、[埋め込む] を選択します。表示されたコードをコピーします。
- Justinmind に戻ります。
- キャンバスに追加した HTML コンポーネントを選択し、プロパティタブ内の HTML フィールドにコードを貼り付けます。
※ビデオの URL の HTML が http://prefix が含まれていることを確認してください。
- キャンバスをもう一度クリックします。
- コンポーネントのサイズを変更し、ビデオとウィジェットのサイズを等しくします。
ここまでの作業を終えると、[Simulate] をクリックし、完成したプロトタイプを確認することができます。
次は Google Maps を追加
Google Maps へアクセスし、希望のアドレスを挿入します。
左上部の端にある、メインメニューアイコンをクリックし、 [Share or embed map] 、[Embed map] タブを選択します。
コードをコピーし、 HTML フィールドにペーストします。
ここまでの作業を終えると、[Simulate] をクリックし、完成したプロトタイプを確認することができます。
オーディオファイルをインタラクティブなプロトタイプへ追加
オーディオファイル (.wav や .mp3) をプロトタイプへ追加するには、サウンドを鳴らすための UI 要素にイベントを追加します。追加するには、キャンバス上の UI 要素を選択し、イベントタブに移動し、サウンドを鳴らすための動作 (‘On click’、’On Key Up’、’On Page Load’ など) を選択します。その後、[Play Audio] アクションを選択します。フォルダーの中からオーディオファイルを選択し、[OK] をクリックします。こちらよりサンプルをご覧いただけます。
Justinmind では、URL、ドキュメント (PDF)、flash ビデオ、ウェブサイト、Google チャートなど他のタイプの外部リンクを埋め込むこともできます。これらの特別なコンポーネントはウィジェットパレット内で見つけることができます。ウィジェットをキャンバス上にドラッグアンドドロップし、必要に応じてプロパティを変更することもできます。
Justinmind 30 日間無償評価版を今すぐダウンロードし、実際に体験してみてください。
Justinmind は、他にも便利な機能を多数提供しています。詳細は、こちらを参照ください。
参考記事「how to embed videos and html content in your interactive wireframes」
