● 内容
① オンラインストレージサービスなどアメブロがアクセスできる場所にテキストファイルや
ＨＴＭＬファイルなどを置いておき、その内容を表示します。
（ＨＴＭＬで記述したファイル）
アメブロ内のＨＴＭＬも表示可能ですが、この記事では、オンラインストレージサービスを
利用した方法を紹介します。
② XMLHttpRequest を利用した方法を紹介します。
③ オンラインストレージサービスについては下記を参照。
・Dropbox
http://ameblo.jp/new-blue-777/entry-11572724517.html
④ これにより、メッセージボードやフリースペースの文字数制限を回避できます。
⑤ 携帯電話には表示されないので注意してください。
また、記事に設置した場合、その内容は検索エンジンに拾われない可能性が
あるので、注意してください。
● やり方
① オンラインストレージサービスにファイルを作成し、ファイル名を求めます。
（テキストファイル(.txt)または、HTMLファイル(.html)の作成）
・例・・・下記の様なテキストファイルを作成します。
test data1<br>
test data2<br>
<div style="color:#ff0000">test data3</div><br>
<a href="#">test data4</a>
<br>
<img src="http://stat001.ameba.jp/user_images/20110925/11/new-blue-777/65/80/j/o0400007011506267460.jpg" width="150">
<br>
・ファイル名の例
https://dl.dropboxusercontent.com/u/192658020/message_Area/message01.txt
● 設置方法
① メッセージボードや記事やフリースペースなどの表示したい場所に下記の様に
ＨＴＭＬモードでユニークな名前を付けて記述します。
例・・・message01は好きなユニークな名前を付けてください。
<div id="message01"></div>
② 下記をフリープラグインへ追加。
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css"></script>
<script type="text/javascript">
$(document).ready(function() {
getFile_func('表示したい場所のＩＤ名','表示したいテキストファイルまたはＨＴＭＬファイル')
});
</script>
■ 説明
・ 下記は既にフリープラグインに設定されていれば不要です。
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css"></script>
・ スクリプトの例
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css"></script>
<script type="text/javascript">
$(document).ready(function() {
getFile_func('message01','https://dl.dropboxusercontent.com/u/192658020/message_Area/message01.txt')
});
</script>
● 実例
● 応用編
・ クリックされたら表示させる方法。
① クリックしたら表示させたい場所に下記の様に記述（例）
<div class="more_disp" id="more01" style="cursor:pointer;" rel="表示したいテキストまたはＨＴＭＬ">続きを読む</div>
② フリープラグインに下記の様に記述（例）
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".more_disp").click(function(){
getFile_func($(this).attr("id"),$(this).attr("rel"))
});
});
</script>
・ フリープラグインの文字数削減。
（フリースペース、メッセージボード、記事に表示させたいテキスト・ＨＴＭＬのファイルを指定する）
① 表示させたい場所に下記の様に記述（例）
<div class="msg_disp" id="messagex1" rel="表示したいテキストまたはＨＴＭＬ"></div>
② フリープラグインに下記の様に記述（例）
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".msg_disp").each(function(){
getFile_func($(this).attr("id"),$(this).attr("rel"))
});
});
</script>
● ソースコード内容
// XMLHttpRequestオブジェクト生成
function createXMLHttpRequest_func(){
var XMLhttpObject = null;
try{
XMLhttpObject = new XMLHttpRequest();//Firefox, Opera, Safari
}catch(e){
try{ //IE6～(MSXML2以降用)
XMLhttpObject = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{ //IEその他(旧MSXML用)
XMLhttpObject = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
return null;
}
}
}
if(XMLhttpObject){ // Win ie以外のXMLHttpRequestオブジェクト実装ブラウザ用
return new XMLHttpRequest();
}
}
// ファイルにアクセスし受信して内容を表示
function getFile_func( idName ,fName ) {
if(document.getElementById(idName)!=null){
var httpObj = createXMLHttpRequest_func(); // XMLHttpRequestオブジェクト生成
httpObj.open('GET', fName, true); // open メソッド
httpObj.onreadystatechange = function() {
if (httpObj.readyState==4) { // readyState値は4で受信完了
dataset_func(httpObj, idName); // コールバック
}
}
httpObj.send(''); // send メソッド(null('')を送信)
}
}
// コールバック関数 ( 受信した内容を該当するＩＤへセットする )
function dataset_func( Obj, idNames ) {
if(document.getElementById(idNames)!=null){
document.getElementById(idNames).innerHTML = Obj.responseText;
}
}