自分でもどういう動機か分からないのですが、目標宣言ブログパーツというものがふと思い浮かんで、昨夜ぬるぬる妄想していたらなんとなく作れそうな気もしなくはないように思ってしまったので、初心者プログラマの実践シリーズ（というほど書いてないけど）再開です。
本エントリーは、連載形式で、開発完了するまでを記します。例によって、途中で諦めたり、飽きたりする可能性大ですが、ダメだしとかは大歓迎です。
それではスタート。javascriptだけで行けるのかな？？
企画案
ざっと考えられる企画は以下。
・ウェブ上で自分の「目標」をテキスト入力する
・テキスト入力した目標をブログパーツとして表示できるScriptを自動生成する
・ユーザーはScriptをコピー＆ペーストするだけで、自由に自分の目標の書かれたブログパーツを利用できる
・目標は複数個入力できる
・目標の入力パターンは3つ
パターン1：ただ、目標を宣言する
パターン2：いついつまでに、これをやりますという宣言をする
パターン3：いついつまで、これをやり続けますという宣言をする
・パーツ閲覧者からの応援Clickを受け付けられる
・応援Clickは1からcount upし、パーツ上に表示する
フェーズ分け
今回自分で開発するわけで何の制約もないわけですが、自分のスキルの程度の低さを鑑み、とりあえず、開発のフェーズ分けをしつつ、行けるところまで行ってみます。
フェーズ1：目標の入力パターン1のみ、目標数も1つのみで、デザインはほとんどこだわらない状態で、パーツとして表示できるScriptを配布するページを作る
フェーズ2：パーツおよび配布ページにそれなりのデザインを入れる
フェーズ3：目標の入力パターン2，3を実装し、目標数も2つ以上入力できるようにする
フェーズ4：応援Click機能を実装する
フェーズ5：パーツサイズを変更できるようにする
まだ何も考えていないけれど、おそらく、現実的に自分のスキルで可能なのはフェーズ3位までと思われる。
いや、フェーズ1に到達できずに脱落する危険性も大いにはらんでいます。
フェーズ1-1の設計
・入力フォームを用意する
・目標をテキスト入力した後、Clickイベントで関数を動かす
・目標テキスト情報を関数内で、変数に格納する
・目標テキスト情報が入力された変数とhtmlを、表示用の新たな変数に連結格納する
・連結格納された変数を使って、htmlをダイナミックに書き換えて表示する
実際に書いたコードとサンプルページ
<html><head><title>目標ブログパーツ制作 サンプル1</title><script type="text/javascript" language="javascript"><!--function setGoal(){//関数setGoalを定義var goal_text = document.make_goal.goal.value;// フォーム「make_goal」内のname「goal」のValueにアクセスし、変数goal_textに格納する。このとき、goalのvalueは入力された目標テキスト情報var make_parts = "";// 表示用の変数「make_parts」を宣言make_parts = '<img src="http://a1.twimg.com/profile_images/707295837/o020002001266659532796_reasonably_small.jpg">';make_parts += '私は「' + goal_text + '」をすることを目標にします。';// make_partsに「=」「=+」で表示用htmlを連結格納document.getElementById("goal_print").innerHTML = make_parts;// 文書内の任意の箇所、id「goal_print」のタグ内のhtmlをinnerHTMLで変数「make_parts」の中身に書き換えて表示}// --></script></head><body>あなたの目標を入力してください<br><form name="make_goal" action="#"><input type="text" name="goal"><input type="button" value="目標を設定してプレビュー" onClick="setGoal()"><!-- onClickイベントで関数 setCoalを実行 --></form><div id="goal_print"></div><!-- ここを、make_partsに格納したhtmlに書き換える --></body></html>
フェーズ1-1は以上。とりあえずなんか動いた。これ程度で1時間。。
考慮すべき点は、入力フォームに文字列が入力されていない場合のエラーメッセージの表示、かな？
次回、フェーズ1の続きでは、エラーメッセージと、このページで、貼り付け用のScriptを吐き出すところまでを実践します。
コメントする