Home
#必要なアカウント
Media Assembly Kit Template Tool
配信元サイト(WordPress)
配信先サイト(今回はGitHub Pageを利用してます)
#メディア構築の流れ
1.テンプレートキット一式 ダウンロード
ファイル一式ダウンロードします。
2.配信元となるWordPressサイトに【Media Assembly Kit】プラグインをインストール
先ほどダウンロードしたファイル内の【media-assembly-kit】をWordPressサイトのプラグインに新規追加でアップロードします。
- ファイル名 ： lib/wordpress-plugin/media-assembly-kit
- プラグイン新規追加画面 ： http://example.com/wp-admin/plugin-install.php?tab=upload
3.インストールしたプラグイン【Media Assembly Kit】を有効化
ダッシュボード→プラグイン→Media Assembly Kit→有効化します。
4.配信先のURLを指定
ダッシュボード→設定→Media Assembly Kit 設定に移動し、【Access-Control-Allow-Origin URL】と【Destination URL】部分に配信先のURLを記入し保存します。
5.配信元となるWordPressサイトに【JSON REST API (WP API)】プラグインをインストール
【JSON REST API (WP API)】プラグインはここからダウンロードします。
インストールしたら有効化します。
6.【proxy.html】の編集
1.でダウンロードしたテンプレートキット一式ファイル内、 lib/xdomain/proxy.html を開きます。
<!DOCTYPE HTML>
<script src="//cdn.rawgit.com/jpillora/xdomain/0.6.17/dist/xdomain.min.js" data-master="http://example.com "></script>
【 http://example.com 】の部分を配信先のURL(http://example.github.io/) へ変更し保存します。
7.【proxy.html】を配信元サイトへアップロード
6.で編集した【proxy.html】を配信元のWordPressドメイン直下にアップロードします。
8.【mak-config.js】の編集
1.でダウンロードしたテンプレートキット一式ファイル内、 app/mak-config.js を開きます。
(function(window, angular, undefined) {
'use strict';
/# App Config #/
var makConfig = angular.module('makConfig', []);
makConfig.value('makConfig', {
apiUrl: 'http://master.example.org/',
menu_id: 'primary'
});
})(window, window.angular);
【 http://master.example.org/ 】の部分を配信元サイト【 http://example.com/ 】へ変更し保存します。
9.【index.html】の編集
1.でダウンロードしたテンプレートキット一式ファイル内、 demo/index.html を開きます。
<script src="//cdn.rawgit.com/jpillora/xdomain/0.6.17/dist/xdomain.min.js" slave="http://master.example.com/proxy.html "></script>
【 http://master.example.com/ 】を配信元のURL【 http://example.com/ 】に変更し保存します。
10.配信先サイトへプッシュ
1.でダウンロードしたテンプレートキット一式ファイル内、 【app】ファイルと【demo】ファイル内のファイルを配信先サイトへ【 http://example.github.io/ 】 へプッシュします。
- ファイルの階層はこれを参考にして下さい。 https://github.com/banjo006/banjo006.github.io
11.配信元のWordPressサイトのパーマリンク設定
ダッシュボード→設定→パーマリンク設定に移動し、パーマリンクの設定を【数字ベース】に変更して保存します。
12.配信先サイトへアクセス
配信先のサイト【 http://example.github.io/ 】へアクセスします。 配信元のサイトの情報が表示させているのが確認出来ます。