アプリは、キャンバス型アプリやタブ型アプリのiframe内で動くwebアプリです。
以下の2つは何が違うのでしょうか?mceとは何を示しているのでしょうか?
補足に添付したコードでmceを記述しないと、「セキュリティで保護されているコンテンツのみ表示されます。」と警告が出ます。
試しに、type="text/javascript"で動いている別のソースにmceを付けてみたら動かなくなりました。
mceの事を検索しても見つけることができません。
よろしくお願いします。
<script type="mce-text/javascript">
<script type="text/javascript">
テストコード元
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>
まず、サンプルとして挙げられたコードですが、元ネタはここでしょうか?
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- のことは、忘れてあげてください :-)
<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">
としか表示されません。
ご回答ありがとうございます。
教えていただいた情報をもとにまたじっくり調べてみます。
ありがとうございました。
まず、サンプルとして挙げられたコードですが、元ネタはここでしょうか?
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- のことは、忘れてあげてください :-)
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 タグを直接 *書かない* タイプでは、セキュリティ警告は出るんでしょうか?
返事が遅くなって済みません。
いろいろ試していました。
手直し頂いだコードをそのまま実行すると警告は出ません。
しかし、script タグの type 属性の mce- を外すと警告が出ます。
素人の憶測ですが、たぶん mce- を付けると JavaScript 全部が無効化され警告が出なくなるだけかなと・・・。
しかし、いろいろご指導いただいたおかげで、大分的を絞れるようになりました。
また、初めてした質問と同様の質問を立ててみました(^_^;)
http://q.hatena.ne.jp/1376705496
Facebook のアプリは経験が無いので、話半分で聞いてください m(_ _)m
回答に書いた以下のようなコードで、外部スクリプトをプログラムが動いたときに読み込めます。
FB.init の処理の中で、http なセキュアではない外部リソースを読み込んでいる?
2013/08/16 21:54:57でも、↓のスクリプトは、http と https で内容が違っていて、その辺りの考慮がされているっぽいんです。
/connect.facebook.net/en_US/all.js
むぅ (´・ω・`)
因みに、ぼくが回答で書いた script タグを直接 *書かない* タイプでは、セキュリティ警告は出るんでしょうか?
返事が遅くなって済みません。
2013/08/17 11:23:19いろいろ試していました。
手直し頂いだコードをそのまま実行すると警告は出ません。
しかし、script タグの type 属性の mce- を外すと警告が出ます。
素人の憶測ですが、たぶん mce- を付けると JavaScript 全部が無効化され警告が出なくなるだけかなと・・・。
しかし、いろいろご指導いただいたおかげで、大分的を絞れるようになりました。
また、初めてした質問と同様の質問を立ててみました(^_^;)
http://q.hatena.ne.jp/1376705496