PowerPoint プレゼンテーション

(1)

20分で体験できる

スパイラルバーガースタートアップマニュアル

・アカウントの作成

アプリのソースコードを無料でご提供

https://monaca.mobi/register/start

・4週間トライアルアカウントの作成

まずはMonacaとSPIRALの無料アカウントを作成してください。

SDPにご加入の方で、お持ちのアカウントにアプリを

インポートしたい場合は、以下からご依頼ください。

http://bit.ly/spiralm

Monacaに設置する

フロントエンドのソース

コードはSPIRALから

ダウンロードできます。

(2)

20分で体験できる

スパイラルバーガースタートアップマニュアル

手順

1．SPIRALのトライアルアカウントを作成

2．SPIRALへログイン

3．バックエンドの設定情報をインポート

4．レコード数の割り当て

5．Monacaのアカウントを作成

6．フロントエンドのソースコードをダウンロード

7．Monacaへログインしてソースを設置

8．ソースの編集

9．Monacaデバッガーで動作確認

(3)

20分で体験できる

スパイラルバーガースタートアップマニュアル

1．SPIRALのトライアルアカウントを作成

・P1のURLから作成してください。・トライアルアカウント作成後はサポートコンテンツのご案内が届きます。サポートコンテンツである「トライアルナビ」ではスパイラルバーガー以外のアプリの使用方法をご案内していますので、まずは本マニュアルに従ってご利用ください。

2．SPIRALへログイン

無料トライアルでは操作に関するサポート（フリーダイヤル、ユーザーズデスク）は行っておりませんが、案件のご相談、デベロッパープログラムなど、ご不明点がございましたら、お気軽にお問い合せ下さい。

(4)

20分で体験できる

スパイラルバーガースタートアップマニュアル

3．バックエンドの設定情報をインストール

・SPIRALではDBやフォームなどの設定情報をパッケージングできます。これを「アプリ」と呼んでいます。・「スパイラルバーガー」のアプリをSPIRALアプリセンターのリポジトリからインポートします。

1

2

3

セミナーで紹介したPhoneGap版のスパイラルバーガーのアプリもリポジトリ一覧からインストールできま

(5)

20分で体験できる

スパイラルバーガースタートアップマニュアル

3．バックエンドの設定情報をインストール

4

5

アプリ、DB、Webと各機能ごとにインポート情報のチェックを行いますので、そのまま「次へ」をクリックしてください。

6

(6)

20分で体験できる

スパイラルバーガースタートアップマニュアル

3．バックエンドの設定情報をインストール

8

インポートは完了です。このアプリでは利用しませんが、必須項目のため任意のアドレスをご登録ください。

7

(7)

20分で体験できる

スパイラルバーガースタートアップマニュアル

4．レコード数の割り当て

テスト登録ができるように 3つのDBにレコードを割り当てます。

1

2

使用可能なレコード数から任意の数を割り当てます。

(8)

20分で体験できる

スパイラルバーガースタートアップマニュアル

5．Monacaのアカウントを作成

・P1のURLから作成してください。

6．フロントエンドのソースコードをダウンロード

・前記の手順3にてSPIRALにインポートした「スパイラルバーガー」アプリのマニュアル表示よりダウンロード可能なzipファイル内(monaca‐srcディレクトリ) に含めております。

7．Monacaのアカウントに上記ソースコードを配置

・Monacaのドキュメント「WebDAVを利用する」を参考にして、解凍したファイルをMonaca環境にアップロードして下さい。 http://docs.monaca.mobi/ja/manual/monaca_ide/webdav/

(9)

20分で体験できる

スパイラルバーガースタートアップマニュアル

8．Monaca上でソースコードを一部修正

(A) www/index.html 90行目 iframe要素のsrc属性

一覧表：【M&S】クーポン（一般公開）の一般公開URLに変更

【M&S】スパイラルアプリ（配布版）に【【M&S】クーポン（一般公開）】【M&S】

クーポン（一般公開）というページヘのリンクがあるので、そのリンクを開い

(10)

20分で体験できる

スパイラルバーガースタートアップマニュアル

8．Monaca上でソースコードを一部修正

(B) www/index.html 134行目 a要素のhref属性

フォーム：【M&S】会員新規登録の登録フォームのURLに変更

【M&S】スパイラルアプリ（配布版）に【【M&S】会員新規登録】【M&S】会員新規登録というページヘのリンクがあるので、そのリンクを開いてアドレスバーに表示されるURLが登録フォームのURLになります。

(11)

20分で体験できる

スパイラルバーガースタートアップマニュアル

8．Monaca上でソースコードを一部修正

(C) www/js/app.js 3,4行目 token, tokenSecret 発行したスパイラルAPIのAPIトークン・トークンシークレットに変更トークン発行時にはAPIタイプ制限を「有効」に設定し、利用可能APIタイプは「ハイレベル」のみにチェックいただくことでAPIトークンの利用範囲に制

(12)

20分で体験できる

スパイラルバーガースタートアップマニュアル

8．Monaca上でソースコードを一部修正

(D) www/js/app.js 120行目 my_page_id マイエリア：MSmemberLogin内のカスタムマイページの会員情報変更のマイページIDに変更

1

2

3

(13)

20分で体験できる

スパイラルバーガースタートアップマニュアル

カスタムマイページ「会員情報変更」のURL欄に表示されている %url/rel:mpg:XXXXXX%の数字部分が会員情報変更のマイページIDになります。

8．Monaca上でソースコードを一部修正

(D) www/js/app.js 120行目 my_page_id マイエリア：MSmemberLogin内のカスタムマイページの会員情報変更のマイページIDに変更

(14)

20分で体験できる

スパイラルバーガースタートアップマニュアル

9．Monacaデバッガーで動作確認

まず、DBにサンプルデータを登録します。

1

2

3

4

(15)

20分で体験できる

スパイラルバーガースタートアップマニュアル

9．Monacaデバッガーで動作確認

DBオペレーションの新規登録タブを選択して、必要なデータを登録しましょう。

6

5

(16)

20分で体験できる

スパイラルバーガースタートアップマニュアル

9．Monacaデバッガーで動作確認

ここまでの準備が整ったら、Monacaデバッガーを利用してアプリの動作確認をしてみましょう。 Monacaデバッガーアプリのインストールや使い方はMonacaのオンラインマニュアルに記載されていますので詳しくは以下のURLをご参照ください。 http://docs.monaca.mobi/ja/manual/debugger_index/