<464282C282AD815B82E9837D836A B2E786C73>

Transcription

1 1/85 取り扱い説明書

2 目次 2/85 1. はじめに 2. 必要な環境 3. Facebookページの作成 4. レンタルサーバーの契約 5. アプリをアップロードするフォルダを作成 6. Facebookアプリの作成 7. いいね をもらう為のアプリ作成 8. アプリの問題や結果の作成 9. 完成したアプリのアップロード 10. アプリを実 してみる 11. サポートについて

3 1. はじめに 3/85 動作環境 WEB ブラウザ Internet Explorer 7 以上 Firefox googlechrome safari 著作権について この説明書は著作権法で保護されている著作物です 下記の点にご注意戴きご利 下さい この説明書の著作権は作成者 ( 株式会社サイバーインテリジェンス ) に属します 著作権者の許可なく この説明書の全部 は 部をいかなる 段においても複製 転載 流 転売等することを禁じます この説明書の開封をもって下記の事項に同意したものとみなします この説明書は秘匿性が いものであるため 著作権者の許可なく この商材の全部 は 部をいかなる 段においても複製 転載 流 転売等することを禁じます 著作権等違反の 為を った時 その他不法 為に該当する 為を った時は 関係法規に基づき損害賠償請求を う等 事 刑事を問わず法的 段による解決を う場合があります この説明書に書かれた情報は 作成時点での著者の 解等です 著者は事前許可を得ずに誤りの訂正 情報の最新化 解の変更等を う権利を有します この説明書の作成には万全を期しておりますが 万 誤り 不正確な情報等がありましても 著者 パートナー等の業務提携者は 切の責任を負わないことをご了承願います この説明書を利 することにより じたいかなる結果につきましても 著者 パートナー等の業務提携者は 切の責任を負わないことをご了承願います

4 2. 必要な環境 4/85 Facebook アプリを作るのに必要な環境 1.Facebook の個人アカウント 普段 皆様が友達と交流している Facebook のアカウントです ビジネスアカウントではアプリは作成出来ません 2.Facebook ページ いいね を獲得するための Facebook ページが必要です すでに Facebook ページを作成済みの方は 作成済みの Facebook ページでも問題ありません まだ Facebook ページを作成していない は 次ページ以降を参考にして 作成する必要があります 2. レンタルサーバー Facebook アプリをアップロードする為のレンタルサーバーが必要です ここでは ロリポップの ロリポプラン ( 月額 263 円 ) を前提として説明します

5 3.Facebook ページの作成 5/85 最初にいいねを獲得するための Facebook ページを作成します Facebook にログインして 画面一番下の ページを作成 をクリックします

6 3.Facebook ページの作成 6/85 好きな Facebook ページの種類を選択します ここでは 会社名または団体名 を選択します どの種類を選んで頂いても問題ありません

7 3.Facebook ページの作成 7/85 カテゴリと Facebook ページ名を して スタート をクリックします

8 3.Facebook ページの作成 8/85 プロフィール写真や基本データを します こちらの情報は 後からでも 可能です

9 3.Facebook ページの作成 9/85 これで Facebook ページの作成は完了です 後から こちらの Facebook ページにアプリを設置します この Facebook ページの名前を覚えて置いてください

10 4. レンタルサーバーの契約 10/85 Facebook アプリをアップロードするレンタルサーバーと契約します ロリポップのトップページにアクセスします お申込みはコチラをクリックします

11 4. レンタルサーバーの契約 11/85 今回は 独 ドメインを利 しないを選択します

12 4. レンタルサーバーの契約 12/85 好きなアカウント名と ロリポップのドメインを選択し メールアドレスを します どんな名前でも アプリの動作には影響はありませんので 好きな名前を してください が終わったら 確認メール送信ボタンをクリックします

13 4. レンタルサーバーの契約 13/85 登録が終わったら メールが届きますので メール内の URL をクリックします

14 4. レンタルサーバーの契約 14/85 お申込み内容 をクリックします

15 4. レンタルサーバーの契約 15/85 Facebook アプリをアップロードするには ロリポプラン ( 月額 263 円 ) 以上のプランに申し込む必要があります 適宜内容を してください

16 4. レンタルサーバーの契約 16/85 が終わったら 最後にお申込み確定をクリックします

17 4. レンタルサーバーの契約 17/85 契約が終わったら ユーザー専用ページにログインしてみましょう

18 5. アプリをアップロードするフォルダを作成 18/85 レンタルサーバーを用意したら アプリをアップロードするフォルダをレンタルサーバー上にあらかじめ用意しておきます WEB ツール ロリポップ!FTP をクリックします

19 5. アプリをアップロードするフォルダを作成 19/85 新規フォルダ作成をクリックします

20 5. アプリをアップロードするフォルダを作成 20/85 覚えやすいフォルダ名を し 保存するをクリックします

21 5. アプリをアップロードするフォルダを作成 21/85 作成したフォルダをクリックします

22 5. アプリをアップロードするフォルダを作成 22/85 この URL が 今回アプリをアップロードするフォルダの URL になりますので 覚えて置いてください メモ 1 として メモ帳などに保存しておきます メモ 1

23 5. アプリをアップロードするフォルダを作成 23/85 次に 管理画 に戻り アカウント情報をクリックします

24 5. アプリをアップロードするフォルダを作成 24/85 共有 SSL と書かれた部分の URL をコピーします URL 末尾の / スラッシュの後に 先ほど作成したフォルダの名前を追加し メモ 2 として保存します 末尾に同じフォルダ名を追加 これで アップロードするフォルダの準備は完了です さくらインターネットや Xserver の場合 以下の手順で 共有 SSL の URL を取得します さくらインターネット ( 初期ドメインで利 する場合 を御覧ください ) Xserver の場合

25 6.Facebook アプリの作成 25/85 次は 実際の Facebook アプリを作成していきます ホームの右側の をクリックし アカウント設定 をクリックします

26 6.Facebook アプリの作成 26/85 画面の一番したの 開発 をクリックします

27 6.Facebook アプリの作成 27/85 Apps をクリックします

28 6.Facebook アプリの作成 28/85 新しいアプリを作成 をクリックします 新しいアプリを作成 ボタンが表示されない場合は こちらの手順が必要になります

29 6.Facebook アプリの作成 29/85 App Name には好きなアプリの名前を App Namespace には好きなアプリのローマ字の名前を します App Namespace は アプリの URL の一部になります 最後に 続 をクリックします

30 6.Facebook アプリの作成 30/85 画像認証の 字を し 続 をクリックします

31 6.Facebook アプリの作成 31/85 以下の情報を します Facebook 上のアプリ キャンバスURL メモ1の内容をコピー セキュリティで保護されたキャンバス URL メモ 2 の内容をコピー モバイル WEB アプリ MobileSiteURL メモ 1 メモ 2 の内容をコピー メモ 2 メモ 2

32 6.Facebook アプリの作成 32/85 キャンバスページと書いた部分をメモ 3 としてメモ帳に保存します ( 末尾に / スラッシュを付けてください ) メモ 3 が終わったら 変更を保存をクリックします 末尾に / をつける

33 7. いいね をもらう為のアプリ作成 33/85 Facebook アプリ本体の作成が終わったら 次は いいね をもらうためのアプリを作成します 開発者画 にもう 度戻り 新しいアプリを作成 をクリックします

34 7. いいね をもらう為のアプリ作成 34/85 App Name には好きなアプリの名前を App Namespace には好きなアプリのローマ字の名前を します 6. で作成したアプリと区別が着くような名前であれば OK です

35 7. いいね をもらう為のアプリ作成 35/85 ページタブ を開き 以下の内容を します ページタブ名 好きなアプリの名前を します PageTabURL メモ 1 の URL の末尾に page.php を追加し 記入します Seure Page Tab URL メモ 2 の URL の末尾に page.php を追加し 記入します 末尾に page.php をつける

36 7. いいね をもらう為のアプリ作成 36/85 変更を保存をクリックします

37 7. いいね をもらう為のアプリ作成 37/85 Facebook にログインした状態で 以下の URL にアクセスします &pages=1 星印 の部分を いいね用アプリの App ID の数字に変更してください

38 7. いいね をもらう為のアプリ作成 38/85 いいねを獲得したい Facebook ページを選択し 追加するをクリックします

39 7. いいね をもらう為のアプリ作成 39/85 工事中というエラーが出る場合がありますが 時的な Facebook の不具合です この画面が表示されても 問題ありません

40 7. いいね をもらう為のアプリ作成 40/85 Facebook のトップへ戻り 追加した Facebook ページをクリックします

41 7. いいね をもらう為のアプリ作成 41/85 このようにタブが追加されていれば成功です 追加されたタブをクリックしてください

42 7. いいね をもらう為のアプリ作成 42/85 クリックすると タブページの画面へ移動します またアプリはアップロードされていないので 404 エラーが出ても問題ありません このタブページの URL をコピーして メモ 4 としてメモ帳に保存します これで いいね をもらうためのアプリの設置は完了です

43 8. アプリの問題や結果の作成 43/85 もう 度アプリの開発者画 に戻り 一つ目に作成したアプリをクリックします ( いいね用ではない方のアプリ ) クリック

44 8. アプリの問題や結果の作成 44/85 App ID をメモ 5 として アプリのシークレットキーをメモ 6 としてメモ帳に保存します メモ 5 メモ 6

45 8. アプリの問題や結果の作成 45/85 アプリ編集ページを開きます 以下の URL を開いてください インフォトップでダウンロードした PDF 内に書かれているパスワードを し 送信 ボタンをクリックしてください 再編集 ID は 度作成したアプリを再編集したい場合に使 するため 今回は不要です

46 8. アプリの問題や結果の作成 46/85 上から順番に 以下の内容を します アプリID メモ5の内容 アプリの秘訣 メモ6の内容 アプリタイトル 好きなアプリのタイトル アプリURL メモ3の内容 facebookページurl メモ4の内容 セキュリティで保護されたキャンバスURL メモ2の内容

47 8. アプリの問題や結果の作成 47/85 アプリ説明文 アプリの詳細な説明 を します アプリ結果表 前の 句 アプリ結果画面やウォールに表示される 最初の文言です いいね を求める 句 いいねを押してもらうための文言です アプリ開始ボタンの 句 アプリのスタート画面のボタンに表示される文言です スマホアプリへの対応 スマホに対応させる時は 対応させる をチェックします アプリタイトル画像 アプリのタイトル画像です いいねをもらうFacebookページやアプリの問題中にも表示されます アプリ背景画像 アプリの全体の背景画像です こちらは特に指定しなくても 後から背景色を指定することが出来ます

48 8. アプリの問題や結果の作成 48/85 アプリ全体の文字色や背景色 ボタンの色やボタンの文字色などを指定します

49 8. アプリの問題や結果の作成 49/85 問題 と回答 1, 回答 2 を します 全部で 4 問 する必要があります

50 8. アプリの問題や結果の作成 50/85 問題に対する診断結果を全部で 16 種類作成します 診断結果は タイトル 詳細な説明文 画像をそれぞれ全て する必要があります これらは アプリの結果表示画面とウォールへの投稿用として使用されます

51 8. アプリの問題や結果の作成 51/85 診断結果は 以下のようなパターンで表示されます 結果 1 設問の回答が 結果 2 設問の回答が 結果 3 設問の回答が 結果 4 設問の回答が 結果 5 設問の回答が 結果 6 設問の回答が 結果 7 設問の回答が 結果 8 設問の回答が 結果 9 設問の回答が 結果 10 設問の回答が 結果 11 設問の回答が 結果 12 設問の回答が 結果 13 設問の回答が 結果 14 設問の回答が 結果 15 設問の回答が 結果 16 設問の回答が

52 8. アプリの問題や結果の作成 52/85 いいね をもらうページの最下部や 診断結果のページの最下部には HTML 形式で 由 欄が 意されています また アプリ実 後にユーザーのウォールに投稿される内容の末尾にも好きな文言を記入する事が出来ます これらの内容は しなくても問題ありません

53 8. アプリの問題や結果の作成 53/85 全ての が終わったら データをアップロードする ボタンを必ずクリックします

54 8. アプリの問題や結果の作成 54/85 アプリのプレビューを るボタンや facebook ページ ( いいねをもらうページ ) のプレビューを るボタンをクリックすれば 実際にどのようなデザインになったかを確認することが出来ます 確認後 気に わない場合は 再度 や画像を変更することが可能です 変更した後は もう 度 データをアップロードする ボタンをクリックしてください

55 8. アプリの問題や結果の作成 55/85 全ての設定が完了したら ダウンロードへ進む ボタンをクリックします

56 8. アプリの問題や結果の作成 56/85 ダウンロードリンクをクリックします 稀に文字化けする場合がありますが データ内容には問題はありません

57 8. アプリの問題や結果の作成 57/85 ダウンロードしたファイルを解凍すると 左記のファイルが入っています

58 8. アプリの問題や結果の作成 58/85 privacy.html というファイルが入っているのでテキストエディタ等で開きます

59 8. アプリの問題や結果の作成 59/85 となっている部分を 適宜 社の名前などに変更し 上書き保存します

60 8. アプリの問題や結果の作成 60/85 同じく rules.html というファイルが入っているのでテキストエディタ等で開きます となっている部分を 適宜 社の名前などに変更し 上書き保存します

61 9. 完成したアプリのアップロード 61/85 契約したロリポップのサーバーにログインします

62 9. 完成したアプリのアップロード 62/85 WEB ツール ロリポップ!FTP をクリックします

63 9. 完成したアプリのアップロード 63/85 アプリ用に作成したフォルダをクリックします

64 9. 完成したアプリのアップロード 64/85 アップロードをクリックします

65 9. 完成したアプリのアップロード 65/85 ファイルを選択するをクリックします

66 9. 完成したアプリのアップロード 66/85 images フォルダ以外の全てのファイルを選択し 開くをクリックします

67 9. 完成したアプリのアップロード 67/85 アップロードするをクリックします

68 9. 完成したアプリのアップロード 68/85 アップロードが終わったら 次に 新規フォルダ作成 をクリックします

69 9. 完成したアプリのアップロード 69/85 フォルダ名に images と半角 字で し 保存する をクリックします

70 9. 完成したアプリのアップロード 70/85 作成した images をクリックします

71 9. 完成したアプリのアップロード 71/85 アップロードをクリックします

72 9. 完成したアプリのアップロード 72/85 ファイルを選択するをクリックします

73 9. 完成したアプリのアップロード 73/85 images フォルダをダブルクリックします

74 9. 完成したアプリのアップロード 74/85 全ての画像を選択し 開くをクリックします

75 9. 完成したアプリのアップロード 75/85 アップロードするをクリックします 度に沢 のファイルをアップロード出来ない場合は 数回に分けてアップロードしてください 全てのファイルのアップロードが終わったら アプリの設置は完了です

76 9. 完成したアプリのアップロード 76/85 アプリの開発者画面に戻り 1 つ目に作成したアプリ ( いいね用では無い方 ) の基本設定画面を開きます 次に アプリの詳細 (App details) をクリックします

77 9. 完成したアプリのアップロード 77/85 連絡先情報 の Privacy Policy URL( 個人情報保護方針 ) と Terms of Service Url( 利 規約 ) のページのリンクを します Privacy Policy URL メモ 2 の URL の末尾に privacy.html を追加し 記入します Terms of Service Ur メモ 2 の URL の末尾に rules.html を追加し 記入します 末尾に privacy.html をつける 末尾に rules.html をつける ファイルのアップロードが終わっていないと この時点でエラーが発生する場合があります

78 9. 完成したアプリのアップロード 78/85 最後に 変更を保存をクリックします これで Facebook アプリ作成の手順は終わりです

79 10. アプリを実 してみる 79/85 アプリのアップロードが完了したら 実際にアプリを設置した Facebook ページのアプリのタブをクリックしてみましょう さっきまで 404 エラー表示だった画面に アプリが表示されていれば成功です

80 10. アプリを実 してみる 80/85 アプリを実 すると このようにウォールに投稿されます

81 10. アプリを実 してみる 81/85 友達がこの URL をクリックすると いいねを集めるページに移動し 友達もいいね後にアプリを実 してくれます URL の最後に ref=web canvas と書いてありますが このパラメータをつけることによって スマートフォンからでも PC と同じ画 が表 されるようになり スマホ経由でもいいねが獲得出来るようになります ref=web canvas という 字は アプリつくーる側で 動的につけられます この URL をクリックした場合でないと スマートフォンではアプリは表示されません 一部の Android アプリでは表示出来ない場合があります

82 10. アプリを実 してみる 82/85 アプリを実 してみて問題が無ければ 次はアプリを公開する設定にします この設定をしないと 一般の Facebook ユーザーがアプリを閲覧することが出来ません Sandbox Mode で 無効 にチェックをするとアプリが一般公開されます アプリの開発者画面に戻り 基本データの Sandbox Mode を 無効 にします サンドボックスモードとは 開発者モードのことで こちらが有効になっていると 開発者以外の はアプリを たり実 したりできなくなります いいね用のアプリ 本体のアプリの 2 つとも サンドボックスモードを 無効 にしてください

83 11. その他 ( 作成したアプリを再編集する場合 ) 83/85 アプリを再編集する場合は ダウンロードしたフォルダ内の saihensyu.txt というファイルを開き その中の再編集 ID を以下のページに して再編集します

84 11. その他 (2 つ目以降の診断アプリを作成したい場合 ) 84/85 診断アプリは ひとつのレンタルサーバーで復数作成する事が可能です 5. アプリをアップロードするフォルダを作成 のページから 再度繰り返し作成して下さい フォルダ名を前回のアプリと変えれば いくつでもアプリを作成する事が可能です

85 12. サポートについて 85/85 使い方や その他ご不明な点がありましたら 下記のメールアドレスまでご連絡ください サポート期限 : ご購入より 1 ヶ月サポート回数 : 無制限 連絡先株式会社サイバーインテリジェンス担当者名 : 山田直樹住所 : 岐 県岐 市 住町 クリスタルビル 6F メールアドレス :support@cyber-intelligence.co.jp お電話でのお問い合わせは受け付けておりません