目標宣言ブログパーツscriptの配布サイトを作ろう(フェーズ1-2)

| コメント(0) | トラックバック(0)


このエントリーをはてなブックマークに追加
目標宣言ブログパーツscriptの配布サイトを作ろう(フェーズ1-1)の続きです。

前回は、同じページ上で、入力したテキストを含むhtmlを、onClickでダイナミックに表示するという、超シンプルなところまで。

今回は、これを応用する形で、入力したテキストを表示するための配布用scriptを作るところまでをやろうと思います。

フェーズ1-2の設計

・前回の忘れもの、テキスト入力がないときにエラーメッセージを表示
・パーツを表示するScriptを用意する
・表示するScriptの中に、入力したテキストを挿入して表示する

およそ設計とは言えない程度の、ただの願望の羅列になりましたが、とりあえず、書いたコードを以下に。
同じページ上に入力した目標を表示する箇所は削除しています。

実際に書いたコードとサンプルページ

htmlは、Scriptの表示個所を追加したのみです。

<html> 
<head> 
<title>目標ブログパーツ制作 サンプル2</title> 
 <script type="text/javascript" src="http://www.enjoy-com.com/sample/goal_parts_sample1.js" charset="UTF-8"></script> 
 </head> 
<body> 
 あなたの目標を入力してください<br> 
<form name="make_goal" action="#"> 
<input type="text" name="goal"> 
<input type="button" value="目標を設定してScriptを出力"  onClick="setGoal()"> 
 </form> 
ブログパーツ表示用のscriptを表示します。コピー&ペーストして使ってください。<br><br> 
<div id="script_print"></div> 
<!-- Scriptの表示用にIDを設定--> 
</body> 
</html>

このほか、Scriptを生成するjsと、配布したScriptを動かすjsを外部ファイル化して準備しました。

function setGoal(){
if(document.make_goal.goal.value == ''){
alert ("目標を入力してください");
// 目標入力がない場合にエラーを表示
}else{
 var goal_text = document.make_goal.goal.value;

 var make_script = '<script type="text/javascript"><br>';
 make_script += '<!--<br>';
 make_script += 'goalparts_functiontext = "' + goal_text + '";<br>';
// 入力された目標を配布用Scriptに静的なテキスト情報として挿入
 make_script += '--><br>';
 make_script += '</script><br>';
 make_script += '<script type="text/javascript" src="http://www.enjoy-com.com/sample/goal_parts_view_sample1.js" charset="UTF-8"></script><br>';
 
 document.getElementById("script_print").innerHTML = make_script;
// Scriptを表示
}
}

goalparts_functiontext_view = goalparts_functiontext;
// Script内に静的に挿入している目標情報を変数goalparts_functiontest_viewに代入
document.write('<table cellspacing="0" border="0" id="mosebord" style="width:150px;"><tr><td><b>目標表示パーツ</b></td></tr><tr><td><p>私は');
document.write(goalparts_functiontext_view);
document.write('することを宣言します!');
document.write('</p></td></tr><tr><td></td></tr></table>');
// パーツのHtmlを書き出し



何とか動くものができました!
はまりにはまって途中諦めかけつつ、2時間以上かかっちゃいましたが......、一応フェーズ1-2はこれにて終了。

先は長いですが、とりあえずフェーズ1が終了しまして、次はフェーズ2に進みます。
次はデザインだけなのでさくっと行きたい。

せっかく動くものができたので、サイドバーに貼ってみました。

トラックバック(0)

トラックバックURL: http://www.enjoy-com.com/mt/mt5/mt-tb.cgi/828

コメントする

        

人気エントリー