ビデオなどの外部リンクをプロトタイプへ楽々実装 Justinmind

Justinmind は、ビデオ、オーディオなど外部 HTML をインタラクティブなワイヤフレームに追加することができます。

ビデオをインタラクティブなプロトタイプへ追加

ビデオを追加するには、editor 内の [Special Components widgets] を使用する必要があります。

  1. HTML ウィジェットをキャンバスにドラッグします。
  2. ブラウザー上で YouTube ページを開き、挿入したいビデオを選択します。
  3. ビデオ下にある [共有] アイコンをクリックし、[埋め込む] を選択します。表示されたコードをコピーします。
  4. Justinmind に戻ります。
  5. キャンバスに追加した HTML コンポーネントを選択し、プロパティタブ内の HTML フィールドにコードを貼り付けます。
    ※ビデオの URL の HTML が http://prefix が含まれていることを確認してください。
  6. キャンバスをもう一度クリックします。
  7. コンポーネントのサイズを変更し、ビデオとウィジェットのサイズを等しくします。

ここまでの作業を終えると、[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

シェアする

  • このエントリーをはてなブックマークに追加

フォローする