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

J (2011年10月10日 00:58) | コメント(0) | トラックバック(0)


このエントリーをはてなブックマークに追加
うっかり1か月ほど、プリズンブレイク廃人になってしまったため、ブログも全く手つかずだったわけですが、ファイナルシーズンまで観終わりましたので、ようやく、再開。

の続きです。すっかり飽きちゃったと思われてたかもしれませんが、きちんと続けます。

が、現在のところ、完全に未完成。不具合やらやろうとしてたことやら、あーでもない、こーでもないとイライラしながら丸一日かかって取り組んだ結果、まるで解決しなかったわけですが、来週いっぱい手をつけられませんので、一旦、メモがてら残します。


フェーズ分けはもうどうでもよくなってきまして、しばらくまた時間が空きそうということで、一気に進めました。

とりあえず、動くものはできました。

何を思ったか、うっかりうっかり、独自ドメインとっちゃいましたが。。取り急ぎ、ブログの下に色々置くのが紛らわしかったので、http://www.web-widget.info/goalparts/index.htmlに全て移動しました。

配布サイトのcssはありものを適当に流用。

入力フォーム周りは前回までを参照。カスタマイズ可能にする範囲について、ちょこちょこ新しいnameのinputを追加してます。

今回の流れで書いたJavaScriptは以下2ファイル。前者は、配布用のJavascriptコードを生成するjs、後者が張り付けられたJavascriptコードからパーツを描画するjs。


現在の不具合は2点。
  • IEでプレビュー画像を表示するときに、ページ全体のhtmlを取得してしまうケースがある
  • 宣言公約のリストのstyleに宛てているimageがjsで書き変わらない

やり残したことがたくさん。
  • プレビューはニューウィンドウじゃなくてページ遷移もウィンドウ表示もなしでその場で描画したい（非同期通信が必要なの？）
  • 公約の登録フォームはデフォルト3つ位にして、任意でその場でポコポコフォームを追加できるようにしたい
  • バリデーション系が完全に未着手
  • 貼り付け用コードにカーソルを当てた瞬間に全選択したい、もしくはコードをコピーするボタがほしい
  • 表示用コードのjsを描画するときに、コメントアウト「<!--　-->」の前後に改行を入れないといけなかったんだけど、分からなかったので消した
  • 枠線無しバージョン、枠線の色変更

はまったところ。
  • onClickイベント実行時に、変数に格納したJavascriptコードをinnerHTMLで任意の場所に描画したけど、コードが書かれただけで実行されなかった。描画した後にevalで評価するとか、defer="defer"を入れればinnerHTMLでも実行されるとか、色々なドキュメントにたどりついたが、まったく解決できなかった⇒結局ポップアップで表示で逃げた。ajaxにすべきなのか、innerHTMLかなんかでいけるのか不明
  • 同じname　＋ 数字をつけたinputのテキスト入力フォームをjs側で取得するときにfor文で回したiをくっつけて順番に取得していこうと思ってたんだけど、なんか動かなかった⇒配列宣言してなかった＾＾；
以下、上述のjsファイルの現在のものを二つを、メモがてらばこっとコピペ（今後、ファイル名変えずにそのままアップデートする予定につき）。

goal_parts.js
function setGoal(){
if(document.make_goal.goalparts_title.value == ''){
alert ("タイトルを入力してください");
}else if(document.make_goal.goalparts_text.value == ''){
alert ("宣誓テキストを入力してください");
}else if(document.make_goal.goalparts_goal1.value == '' && document.make_goal.goalparts_goal2.value == '' && document.make_goal.goalparts_goal3.value == '' && document.make_goal.goalparts_goal4.value == '' && document.make_goal.goalparts_goal5.value == ''){
alert ("目標を入力してください");
}else{
 var goalTitle = document.make_goal.goalparts_title.value;
 var goalText = document.make_goal.goalparts_text.value;
 var goalGoal1 = document.make_goal.goalparts_goal1.value;
 var goalGoal2 = document.make_goal.goalparts_goal2.value;
 var goalGoal3 = document.make_goal.goalparts_goal3.value;
 var goalGoal4 = document.make_goal.goalparts_goal4.value;
 var goalGoal5 = document.make_goal.goalparts_goal5.value;

 var goalTitleBackground = document.make_goal.goalparts_title_background.value;
 var goalTitleFontColor = document.make_goal.goalparts_title_fontcolor.value;
 var goalPartsWidth = document.make_goal.goalparts_parts_width.value;
 var goalGoalIco = document.make_goal.goalparts_goal_ico.value;

// scriptcode表示用
 var makeScript = '&#60;script type="text/javascript">';
 makeScript += '&#60;!-- ';
 makeScript += '&#13;';
 makeScript += 'var goalparts_functionTitle = "' + goalTitle + '";';
 makeScript += 'var goalparts_functionText = "' + goalText + '";';
 makeScript += 'var goalparts_functionGoal1 = "' + goalGoal1 + '";';
 makeScript += 'var goalparts_functionGoal2 = "' + goalGoal2 + '";';
 makeScript += 'var goalparts_functionGoal3 = "' + goalGoal3 + '";';
 makeScript += 'var goalparts_functionGoal4 = "' + goalGoal4 + '";';
 makeScript += 'var goalparts_functionGoal5 = "' + goalGoal5 + '";';

 makeScript += 'var goalparts_functionTitleBackground = "' + goalTitleBackground + '";';
 makeScript += 'var goalparts_functionTitleFontColor = "' + goalTitleFontColor + '";';
 makeScript += 'var goalparts_functionPartsWidth = "' + goalPartsWidth + '"px;';
 makeScript += 'var goalparts_functionGoalIco = "' + goalGoalIco + '";';
 makeScript += '&#13;';
 makeScript += '-->';
 makeScript += '&#60;/script>';
 makeScript += '&#60;script type="text/javascript" src="http://www.web-widget.info/goalparts/js/goal_parts_view.js" charset="UTF-8">&#60;/script>';


 document.getElementById("script_print").innerHTML = makeScript;

 var makePreviewScript = '<script type="text/javascript">';
// makePreviewScript += '<!--';
 makePreviewScript += 'var goalparts_functionTitle = "' + goalTitle + '";';
 makePreviewScript += 'var goalparts_functionText = "' + goalText + '";';
 makePreviewScript += 'var goalparts_functionGoal1 = "' + goalGoal1 + '";';
 makePreviewScript += 'var goalparts_functionGoal2 = "' + goalGoal2 + '";';
 makePreviewScript += 'var goalparts_functionGoal3 = "' + goalGoal3 + '";';
 makePreviewScript += 'var goalparts_functionGoal4 = "' + goalGoal4 + '";';
 makePreviewScript += 'var goalparts_functionGoal5 = "' + goalGoal5 + '";';

 makePreviewScript += 'var goalparts_functionTitleBackground = "' + goalTitleBackground + '";';
 makePreviewScript += 'var goalparts_functionTitleFontColor = "' + goalTitleFontColor + '";';
 makePreviewScript += 'var goalparts_functionPartsWidth = "' + goalPartsWidth + '"px;';
 makePreviewScript += 'var goalparts_functionGoalIco = "' + goalGoalIco + '";';
// makePreviewScript += '-->';
 makePreviewScript += '</script>';
 makePreviewScript += '<script type="text/javascript" src="http://www.web-widget.info/goalparts/js/goal_parts_view.js" charset="UTF-8"></script>';
 

previewWindow=document.open("","preview","SCROLLBARS=1");
previewWindow.document.open();
previewWindow.document.write("<html><bady>\n");
previewWindow.document.writeln(makePreviewScript);
previewWindow.document.write("</body></html>\n");
previewWindow.document.close();
}
}


goal_parts_view.js

if(document.createStyleSheet){
document.createStyleSheet("http://www.web-widget.info/goalparts/css/goal_parts.css");
}else{
var style = document.createElement('link');
style.rel = "stylesheet"; 
style.href = "http://www.web-widget.info/goalparts/css/goal_parts.css";
style.type = 'text/css'; 
document.getElementsByTagName("head")[0].appendChild(style);
}

document.write('<div id="goalparts_body">');
document.write('<div id="goalparts_title">' + goalparts_functionTitle + '</div>');
document.write('<p>' + goalparts_functionText + '</p>');
document.write('<ul id="goalparts_goal_list">');
var goal = new Array(goalparts_functionGoal1,goalparts_functionGoal2,goalparts_functionGoal3,goalparts_functionGoal4,goalparts_functionGoal5);
for(i=0; i<5; i++){
if(goal[i] == ""){
}else{
document.write('<li>' + goal[i] + '</li>');
}
}
document.write('</ul>');
document.write('<div id="goalparts_footer"><a href="http://www.web-widget.info/goalparts/" target="_blank" style="color:#CCCCCC;"\');>公約宣言ブログパーツ</a></div> ');
document.write('</div>');

document.getElementById('goalparts_title').style.backgroundColor = '#' + goalparts_functionTitleBackground;
document.getElementById('goalparts_title').style.color = '#' + goalparts_functionTitleFontColor;
document.getElementById('goalparts_body').style.width = goalparts_functionPartsWidth;
document.getElementById('goalparts_goal_list').li.style.backgroundImage = 'url("' + goalparts_functionGoalIco + '")';


また手が空いたらやり残したところの一部の対応と、不具合は直したい。
大きなやり残しは諦める可能性大です。

アップデートが一通り終わったら、おさらいがてら、コードの解説も残しておきたいなーとは思ってるものの、一応ある程度できちゃったので、モチベーション的にやらないかも。


カテゴリ:

トラックバック(0)

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

コメントする

カテゴリ

月別 アーカイブ

　　 　　 　　

最近のブログ記事

人気エントリー