オーサリングツール「PandaSuite Studio」

シンプルで直感的なビジュアルオーサリングツール「PandaSuite Studio」でアプリ制作

「PandaSuite Studio」のコンセプト

直感的なデザイン制作を可能にします

多数の制作パーツ(コンポーネント)等テンプレートを組み合わせて同期させることで完成度が高いアプリを開発します。
 

企画・編集者に近い目線で開発します

タイムリーなマーケットへの投入を可能にし、容易なアップデートでマーケットニーズへの追随を可能にします。
 

制作コスト削減と開発期間を短縮します

自動的にiOS、Windows、Android用のネイティブアプリとWebアプリを制作します。ニーズに合わせて適切な形式で書き出すことができます。

クロスプラットフォームな開発が可能です

プロジェクトのテンプレートリンクを作成します。
プロジェクトを変更せずに、プロジェクト追加、カスタマイズ、共有ができます。

 

他のサービスに接続して、その機能を利用します

Pandasuiteのコンポーネントから様々なツールと接続します。
FirebaseAiretable(DB)
GoogleForms(フォーム)
SCORM(eラーニング)
Make(Integromat)(Gmail、Twitio/SMS/チャット用API)等

「PandaSuite Studio」の特徴

テンプレート
プロジェクトのテンプレート リンクを作成します。プロジェクトを変更せずに、プロジェクト追加、カスタマイズ、共有ができます。
次回からは、このテンプレートを使い、プロジェクトに必要な素材をインポートおよびカスタマイズして次々とリリースします。
画像、テキスト等のオブジェクトのサイズ・位置・色などを変更できます。

Share
プロトタイプ完成時にリアルタイムで制作者、編集者、ユーザー等とプロジェクトを共有し検証します。
プロジェクトのURLを共有することで、誰でもリアルタイムにブラウザでプロジェクトを表示し、確認することができます。

マルチデバイス
Web(PWA)アプリ、Windows、ネイティブアプリ(iOS,Android)を制作します。

ユーザー認証
既存のWebサイトと認証フォームがある場合は、これと同じフォームをアプリケーションで使用して、ユーザー管理を継続することができます。
PandasuiteのWeb コンポーネントを使い、Webview/iframe(Webページの中に別のWebページが埋め込まれ、表示する)を介してアプリケーション内で既存の認証フォームを利用できます。(既存システムによっては不可の場合があります)
Google Firebaseを利用し、Pandasuite/AuthenticationコンポーネントとFirebase Sessionコンポーネントを組み合わせ、新規に認証フォームの作成やユーザー データベースの管理、データ(スコア、アクセス、進捗状況)をユーザーに関連付けることができます。

プリセットされた「Components」 その種類は40以上

preencoded.png

Pandasuiteとデータベースとのシームレスな連携

基本的な動作の仕組み
Pandasuiteは内部データベース、Airtable外部データベース、Firebase外部データベースと連携します。「テキスト」「画像」「動画」「音声」「数字」「色」などのデータはそれぞれidが付加されDBに登録されます。Pandasuiteは設定した検索・並び替え・表示条件をDBに送り、DBは該当するデータを検索し、その結果をPandasuiteで指定した場所に表示します。

連携の本質
Pandasuiteとデータベースの関係は、ユーザーの任意のアクションを実行できる条件や表示する順番や場所などを指定します。データベースは、その条件に基づくデータソースを関連付けたり割り当てたりします。両者が連携することで、ユーザーが欲する情報をたくさんの情報から絞り込んで表示することが可能になります。

実用的な活用
画像や写真、テキストなど大量のデータがある場合や、コンテンツが定期的に変更される場合などは、データベースから管理する方が便利です。

preencoded.png
  • チラシでの活用
    定期的に変更が発生するチラシ等では、ユーザーが欲する食品タブ、特売タブ等から、該当する画像や価格などをDatabaseから取り込み、並び替えて表示します。
  • カタログでの活用
    比較が可能なように複数の条件を選択した結果に該当する画像やテキストをDatabaseから取り込み、並び替えて表示します。
  • 学習参考書での活用
    クイズに回答した結果を、正誤判定や対応する説明などと組み合わせて表示したり、タイマーを付加し、自動で回答を表示したり、ブックマークやフィルターの選択等で、その条件に基づいたデータを表示します。

アプリ制作の流れ

STEP
企画・構成

アプリを企画・構成し、要件を定義します。

STEP
素材収集・作成

アプリの企画内容に沿って原稿、画像、音声映像など、コンテンツに必要とされる素材を収集、作成します。

STEP
プロトタイピングツールによるプロトタイプ制作〜確認

集めた素材をもとにプロトタイプデザインツールを使用してアプリ、コンテンツのデザイン制作をします。
基本的なページ遷移、画面遷移等は、プロトタイプデザインの段階で、確認〜修正を繰り返します。

STEP
PandaStudioでアプリ制作

決定したプロトタイプデザインをもとに、PandaStudio でアプリの画面を仕上げます。
音声、映像の実装、オーサリングなどは、 この段階で行います。

STEP
共有機能ViewerAppにて確認〜校正

制作が完了したデモを、Webとのシミュレーター、またはViewerApp で、リアルタイムに確認します。確認〜校正はこの時点でも行います。