人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

facebookでアプリを作っていますが、JavaScriptの記述法にわからない個所があります。
アプリは、キャンバス型アプリやタブ型アプリのiframe内で動くwebアプリです。

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

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

●質問者: appfb
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

質問者から
<!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>

1 ● holoholobird
●50ポイント
<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">

としか表示されません。


appfbさんのコメント
ご回答ありがとうございます。 教えていただいた情報をもとにまたじっくり調べてみます。 ありがとうございました。

2 ● a-kuma3
●50ポイント ベストアンサー

まず、サンプルとして挙げられたコードですが、元ネタはここでしょうか?
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>

変更点は、以下の通り。

最後になりましたが、気になる 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- のことは、忘れてあげてください :-)


appfbさんのコメント
ご回答ありがとうございます。 > ここなんて、六つもついてる。 > http://trust-form.org/author/horike37/ > mce- のことは、忘れてあげてください ホントですね?。分かりました。 今回は関係ないようなので一時ペンディングします。 丁寧な回答を頂いたのでよく解ったのですが、なぜか、「セキュリティで保護されているコンテンツのみ表示されます。」の警告から解放されません>< 手直ししていただいたコードのmce-text/javascriptをtext/javascriptに変更し実行しますと警告が出ます。 以下のように、骨だけにしても警告が出ます。 >|html| <!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="text/javascript"> FB.init({ appId : 'XXXXXXXXXXXXXXX', status : true, cookie : true, xfbml : true, }); </script> </body> </html> ||< このコードの >|html| FB.init({ appId : 'XXXXXXXXXXXXXXX', status : true, cookie : true, xfbml : true, }); ||< 部分を外すと警告は出なくなります。 FB.initを外したまま他に沢山コードを書いても警告は出ません。 FB.init自体が何らか影響を与えているようです。 にっちもさっちも行きませんorz なんでなんでしょうね????

a-kuma3さんのコメント
Facebook のアプリは経験が無いので、話半分で聞いてください m(_ _)m 回答に書いた以下のようなコードで、外部スクリプトをプログラムが動いたときに読み込めます。 >|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); }()); ||< FB.init の処理の中で、http なセキュアではない外部リソースを読み込んでいる? でも、↓のスクリプトは、http と https で内容が違っていて、その辺りの考慮がされているっぽいんです。 /connect.facebook.net/en_US/all.js むぅ (´・ω・`) 因みに、ぼくが回答で書いた script タグを直接 *書かない* タイプでは、セキュリティ警告は出るんでしょうか?

appfbさんのコメント
返事が遅くなって済みません。 いろいろ試していました。 手直し頂いだコードをそのまま実行すると警告は出ません。 しかし、script タグの type 属性の mce- を外すと警告が出ます。 素人の憶測ですが、たぶん mce- を付けると JavaScript 全部が無効化され警告が出なくなるだけかなと・・・。 しかし、いろいろご指導いただいたおかげで、大分的を絞れるようになりました。 また、初めてした質問と同様の質問を立ててみました(^_^;) http://q.hatena.ne.jp/1376705496
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ