flamingoを使って最適化サイトを作成する際、まず行う必要があるのが
『flamingoスイッチャーの埋め込み』です。
ここではスイッチャーの具体的な埋め込み位置や注意点などをご紹介します。
スイッチャーの発行方法について知りたい方は、
flamingoユーザーガイドに該当項目がありますので、そちらを参照ください。
スイッチャーの挿入位置について
flamingoスイッチャーは<head></head>タグ内、なるべく上部に挿入いただく必要があります。
では、なるべく上部とは実際にどの位置か、具体的に説明いたします。
1. 文字コードの指定より下部
スイッチャーの中には文字コードが記述されているため、
ページの文字コード指定よりも上部に設置すると文字化けを起こす可能性があります。
ですので、スイッチャーは文字コードを指定しているmetaタグよりも下に配置して下さい。
2. CSS、JSファイルよりも上部
flamingoスイッチャーはJavaScriptで記述されています。
他JSファイルとの干渉を防ぐため、最初に読み込まれるscriptタグとする必要があります。
よって、サイト内のCSS、JSファイルの記述よりも上に配置して下さい。
標準的な構成としては、下記のような記述になります。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script id="flamingo-switcher" type="text/javascript" charset="utf-8">
(function(c,a,g,f,b){if(!f()){return}if(b.loader){a.write('<div id="flamingo-loader">'+b.loader+"</div>")}a.write('<plaintext style="display:none">');var e=3,d=function(){var i=Object.prototype.toString.call(b.dataUrl)=="[object Array]"?b.dataUrl[0]:b.dataUrl,h=a.createElement("script"),j=a.getElementsByTagName("script")[0];h.src=i+"flamingo"+(!a.evaluate?"-compat":"")+".js";h.id="flamingo-engine";h.charset="utf-8";h.onload=function(){try{flamingo.init(c,a,g,b)}catch(k){console.error("Unable to initialize flamingo Engine",k)}};h.onerror=function(){e--;j.parentNode.removeChild(h);if(e){if(Object.prototype.toString.call(b.dataUrl)=="[object Array]"){b.dataUrl.splice(0,1);b.dataUrl.push(i)}d()}else{alert("Something is going wrong. Try to reload page.")}};j.parentNode.insertBefore(h,j)};setTimeout(d)})(window,document,typeof(Storage)==="undefined"?false:localStorage,function(){if(typeof(flamingo)!=="undefined"){return false}if(window.name.indexOf("flamingo")===0){return true}return(navigator.userAgent.match(/iPhone|iPod/i)||navigator.userAgent.match(/Android.*Mobile/i))},{dataUrl:(function(f){var c="//",d="flamingo.GOMOBILE.jp",e=”/xxxx/latest/",a="stg.",b=f.hostname.toLowerCase();if(b==="www.xxxx.co.jp"){a=""}return c+a+d+e})(document.location)});
</script>
<title>タイトル</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script language="JavaScript" type="text/javascript" src="script.js"></script> </head>
上記の位置に埋め込むことができない場合でも、必ず<head></head>タグ内に挿入して下さい。
<head></head>タグ外、外部ファイルからの読み込みでの動作は保証しておりません。