facebookでアプリを作っていますが、JavaScriptの記述法にわからない個所があります。

アプリは、キャンバス型アプリやタブ型アプリのiframe内で動くwebアプリです。

以下の2つは何が違うのでしょうか?mceとは何を示しているのでしょうか?
補足に添付したコードでmceを記述しないと、「セキュリティで保護されているコンテンツのみ表示されます。」と警告が出ます。
試しに、type="text/javascript"で動いている別のソースにmceを付けてみたら動かなくなりました。
mceの事を検索しても見つけることができません。
よろしくお願いします。

<script type="mce-text/javascript">
<script type="text/javascript">

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/08/16 13:30:20
  • 終了:2013/08/16 20:30:19
id:appfb

質問者から

appfb2013/08/16 14:44:17

テストコード元
http://ajike.co.jp/switch/fb-scroll/

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>Disp Test</title>
	<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script>
</head>

<body>
<div id="fb-root"></div>
<script type="mce-text/javascript">
FB.init({
    appId : 'XXXXXXXXXXXXXXX',
    status : true,
    cookie : true,
    xfbml : true,
    logging : true
})
// ]]>
(function() {
 var d = document;
 var e = d.createElement("script");
 e.src = d.location.protocol + "//connect.facebook.net/en_US/all.js";
 d.getElementById('fb-root').appendChild(e);
}());
window.fbAsyncInit = function() {
 FB.Canvas.setAutoGrow();
};
</script>

</body>
</html>

ベストアンサー

id:a-kuma3 No.2

a-kuma3回答回数4504ベストアンサー獲得回数18702013/08/16 14:59:55

ポイント50pt

まず、サンプルとして挙げられたコードですが、元ネタはここでしょうか?
http://ajike.co.jp/switch/fb-scroll/

これが混乱の元です。
そのページからリンクが貼られている、このページ。
http://blog.e-riverstyle.com/2012/06/facebook.html


script タグの type 属性に mce 入ってますか?
入ってないですよね。
んで、ここに書いてあることも間違ってるんですけど :-)


二番目からさらにネタを追うと、ここに辿りつきます。
http://www.skyward-design.net/blog/archives/000114.html

これが正しい。
というか、正しいやり方のひとつです。


こういうときは、本家のドキュメントです。
http://facebook-docs.oklahome.net/archives/51972911.html

Facebook のライブラリの初期化のやり方は、二種類あります。
間違ってる、とぼくがかいた二つのページは、この初期化のどちらかで良いところを二つやってます。

特に、今回の場合、対象が SSL で保護されてますから、プロトコルを固定で書かなくて良い後者の書き方が向いています。
んで、サンプルとして挙げられたコードを手直し。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Disp Test</title>
</head>

<body>
<div id="fb-root"></div>
<script type="mce-text/javascript">
(function() {
    var d = document;
    var e = d.createElement("script");
    e.src = d.location.protocol + "//connect.facebook.net/en_US/all.js";
    d.getElementById('fb-root').appendChild(e);
}());

window.fbAsyncInit = function() {
    FB.init({
        appId : 'XXXXXXXXXXXXXXX',
        status : true,
        cookie : true,
        xfbml : true,
        logging : true
    });
    FB.Canvas.setAutoGrow();
};
</script>

</body>
</html>

変更点は、以下の通り。

  • 固定の <script> を削除
  • FB.init を fbAsyncInit のイベントで呼び出す
  • CDATA セクションと思われるお尻の部分を削除




最後になりましたが、気になる mce の話。
こっちは、よく分かっていないんですが、stackoverflow に、こんな質問がありました。
http://stackoverflow.com/questions/17335470/type-mce-text-javascript-gets-added-in-tiny-mce-editor-html

tiny MCE editor って書いてあるのは、こちらです。
http://www.tinymce.com/

Web のページに置くことができるエディタです。

ちょこっと調べてみると、この mce- が入った script タグとか、ソースの記述として書いたページは結構見つかります。
ここなんて、六つもついてる。
http://trust-form.org/author/horike37/

mce- のことは、忘れてあげてください :-)

他1件のコメントを見る
id:a-kuma3

Facebook のアプリは経験が無いので、話半分で聞いてください m(_ _)m

回答に書いた以下のようなコードで、外部スクリプトをプログラムが動いたときに読み込めます。

(function() {
    var d = document;
    var e = d.createElement("script");
    e.src = d.location.protocol + "//connect.facebook.net/en_US/all.js";
    d.getElementById('fb-root').appendChild(e);
}());

FB.init の処理の中で、http なセキュアではない外部リソースを読み込んでいる?

でも、↓のスクリプトは、http と https で内容が違っていて、その辺りの考慮がされているっぽいんです。
/connect.facebook.net/en_US/all.js

むぅ (´・ω・`)


因みに、ぼくが回答で書いた script タグを直接 *書かない* タイプでは、セキュリティ警告は出るんでしょうか?

2013/08/16 21:54:57
id:appfb

返事が遅くなって済みません。
いろいろ試していました。
手直し頂いだコードをそのまま実行すると警告は出ません。
しかし、script タグの type 属性の mce- を外すと警告が出ます。
素人の憶測ですが、たぶん mce- を付けると JavaScript 全部が無効化され警告が出なくなるだけかなと・・・。

しかし、いろいろご指導いただいたおかげで、大分的を絞れるようになりました。
また、初めてした質問と同様の質問を立ててみました(^_^;)
http://q.hatena.ne.jp/1376705496

2013/08/17 11:23:19

その他の回答(1件)

id:holoholobird No.1

holoholobird回答回数574ベストアンサー獲得回数1042013/08/16 14:04:36

ポイント50pt
<script type="mce-text/javascript">

これは

<mce:script type="text/javascript">

ではないでしょうか。

If you open the demo page ( http://dojotoolkit.org/documentation/tutorials/1.6/events/demo/query.html ) in browser and view its source code, you can see there is no mce:script tags, just script tag. So the reason is caused by the blog publishing system, when the author paste the JavaScript code to it, it automatically replace the script tag with mce:script tag to avoid XSS attack.
http://stackoverflow.com/questions/6854949/whats-the-meaning-of-mcescript-type-text-javascript-mcescript

と書かれているように、XSS回避のための記述方法ですね。
これを行うと、ユーザー側がソースを表示しても

<script type="text/javascript">

としか表示されません。

id:appfb

ご回答ありがとうございます。
教えていただいた情報をもとにまたじっくり調べてみます。
ありがとうございました。

2013/08/16 18:12:39
id:appfb

質問者から

appfb2013/08/16 14:23:20

質問文を編集しました。詳細はこちら

id:a-kuma3 No.2

a-kuma3回答回数4504ベストアンサー獲得回数18702013/08/16 14:59:55ここでベストアンサー

ポイント50pt

まず、サンプルとして挙げられたコードですが、元ネタはここでしょうか?
http://ajike.co.jp/switch/fb-scroll/

これが混乱の元です。
そのページからリンクが貼られている、このページ。
http://blog.e-riverstyle.com/2012/06/facebook.html


script タグの type 属性に mce 入ってますか?
入ってないですよね。
んで、ここに書いてあることも間違ってるんですけど :-)


二番目からさらにネタを追うと、ここに辿りつきます。
http://www.skyward-design.net/blog/archives/000114.html

これが正しい。
というか、正しいやり方のひとつです。


こういうときは、本家のドキュメントです。
http://facebook-docs.oklahome.net/archives/51972911.html

Facebook のライブラリの初期化のやり方は、二種類あります。
間違ってる、とぼくがかいた二つのページは、この初期化のどちらかで良いところを二つやってます。

特に、今回の場合、対象が SSL で保護されてますから、プロトコルを固定で書かなくて良い後者の書き方が向いています。
んで、サンプルとして挙げられたコードを手直し。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Disp Test</title>
</head>

<body>
<div id="fb-root"></div>
<script type="mce-text/javascript">
(function() {
    var d = document;
    var e = d.createElement("script");
    e.src = d.location.protocol + "//connect.facebook.net/en_US/all.js";
    d.getElementById('fb-root').appendChild(e);
}());

window.fbAsyncInit = function() {
    FB.init({
        appId : 'XXXXXXXXXXXXXXX',
        status : true,
        cookie : true,
        xfbml : true,
        logging : true
    });
    FB.Canvas.setAutoGrow();
};
</script>

</body>
</html>

変更点は、以下の通り。

  • 固定の <script> を削除
  • FB.init を fbAsyncInit のイベントで呼び出す
  • CDATA セクションと思われるお尻の部分を削除




最後になりましたが、気になる mce の話。
こっちは、よく分かっていないんですが、stackoverflow に、こんな質問がありました。
http://stackoverflow.com/questions/17335470/type-mce-text-javascript-gets-added-in-tiny-mce-editor-html

tiny MCE editor って書いてあるのは、こちらです。
http://www.tinymce.com/

Web のページに置くことができるエディタです。

ちょこっと調べてみると、この mce- が入った script タグとか、ソースの記述として書いたページは結構見つかります。
ここなんて、六つもついてる。
http://trust-form.org/author/horike37/

mce- のことは、忘れてあげてください :-)

他1件のコメントを見る
id:a-kuma3

Facebook のアプリは経験が無いので、話半分で聞いてください m(_ _)m

回答に書いた以下のようなコードで、外部スクリプトをプログラムが動いたときに読み込めます。

(function() {
    var d = document;
    var e = d.createElement("script");
    e.src = d.location.protocol + "//connect.facebook.net/en_US/all.js";
    d.getElementById('fb-root').appendChild(e);
}());

FB.init の処理の中で、http なセキュアではない外部リソースを読み込んでいる?

でも、↓のスクリプトは、http と https で内容が違っていて、その辺りの考慮がされているっぽいんです。
/connect.facebook.net/en_US/all.js

むぅ (´・ω・`)


因みに、ぼくが回答で書いた script タグを直接 *書かない* タイプでは、セキュリティ警告は出るんでしょうか?

2013/08/16 21:54:57
id:appfb

返事が遅くなって済みません。
いろいろ試していました。
手直し頂いだコードをそのまま実行すると警告は出ません。
しかし、script タグの type 属性の mce- を外すと警告が出ます。
素人の憶測ですが、たぶん mce- を付けると JavaScript 全部が無効化され警告が出なくなるだけかなと・・・。

しかし、いろいろご指導いただいたおかげで、大分的を絞れるようになりました。
また、初めてした質問と同様の質問を立ててみました(^_^;)
http://q.hatena.ne.jp/1376705496

2013/08/17 11:23:19

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません