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

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


このエントリーをはてなブックマークに追加
初心者JavaScriptプログラマの実践シリーズとして進めています

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

の続きです。いつもこれ系のシリーズは途中で面倒臭くなって諦めるんですが、今回は最初のヤマを何とか越えましたので、多分最後まで行きます。

0からアプリケーションを開発したことのないプログラミング初心者が、ブログパーツを開発、ブログパーツ配布サイトを制作するまでを、リアルタイムでお届けします。お届けされたくなくても、勝手にお届けします。

さて、フェーズ1-1のエントリー内で決めたフェーズ分けでは、

フェーズ2:パーツおよび配布ページにそれなりのデザインを入れる

としていましたが、配布ページは後回しにすることにしました。全部できてからちゃんと公開しようじゃないか! ということと、そもそも配布ページは、今回のプロジェクトの目的からして重要じゃないということで。

公約は、守ること自体が目的ではなく、目的を達成するための手段である。なんて言いつつ。

ちなみに、プロジェクトの目的は、簡単でもよいから、0から、自分でアプリケーションを含むサービスを全て開発するという経験をするという点につきます。

さて、そんなわけで、フェーズ2は、パーツのデザイン制作に終始しますが、時間も時間ということで30分ほどしか時間が取れなかったので、一旦ざっくり、Htmlとスタイルシートの部品の元になる部分の作成までで、フェーズ2-1とします。将来的に、動的に書き換える個所を考えると、まだ、前々足りていませんので、そこらへんも、次回以降でアップデートします。

ほとんど公開する意味のないレベルの内容ですが、一応開発日誌的に、全てを残しておこうかと......という程度のエントリー。

UI企画

まずは、UI企画から。

なんとなく、目標宣言ブログパーツという仮タイトルで進めていましたが、色々検討した結果、最近色々書籍をあさっている政治にも絡める形で、「私のマニフェスト」といったキーワードを元に進めることにしました。

マニフェストとは、政治公約を、立候補時に宣言し、その後の活動を衆人監視の元にさらすことで、実現性を高めようという近年クローズアップされている概念のものですが、日常生活の目標も、マニフェストとして、自分のブログなどに晒すことで、より実現しやすくなるのでは? といった、超後付けの企画意図です。

また、同じくフェーズ1-1の企画にて

・目標の入力パターンは3つ
 パターン1:ただ、目標を宣言する
 パターン2:いついつまでに、これをやりますという宣言をする
 パターン3:いついつまで、これをやり続けますという宣言をする

のようにしていたのですが、変に制約のあるフォーマットを用意するよりも、単純に好きなようにテキスト入力できた方が、汎用的だし、プログラミングも楽になるので、単純に複数個のマニフェストを入力して貰うのみに留めることとします。

書いたコードが以下

上述のとおり、まだ部品の元になる部分を定義する程度で、ほとんど公開する意味を持たないソースです......。css自体も適当なんで、ご容赦ください。容赦してくれなくてもこのまま公開しますけれども。

自分的なポイントとしては、後々、ユーザー任意で、パーツ内の各箇所のテキスト情報や、サイズを可変にできるように、それぞれIDを定義しているという点かな? ID名も貼られる先のウェブサイト側のCSSで定義されているIDと競合しないような名前にしておく必要があります。多分。

あと、当たり前のことではあるのだけれど、僕自身が面倒ぐさがりなもんで、いつも普段の実務的には、Htmlの方で、改行とか、ちょっとしたデザイン要素を入れてしまいがちなんですが、今回は、デザイン要素は、基本的に、すべてcssで定義するというルールで進めたいと思います。これ、身体にそういう癖が染み付くと、いろいろな部分でよくなるだろうなーと思ってはいるものの、日常的に発生するちょっとした作業だと、軽視しがちな部分でもありまして。このプロジェクトを通じて、普通に意識する癖をつけたいです。少なくとも、<br><br>なんてソースは書かないぞっと。

<html>
<head>
<style type=text/css>

li{
margin:5px 0 5px 30px;
}
li.goalparts_goal {
list-style-image: url(http://blog-imgs-18.fc2.com/k/u/m/kumacrow/free_arrow_004_cornflowerblue.gif);
}
#gorlparts_body{
width:250px;
border: 2px solid #aa0000;
margin:5px;
padding:10px;
}
#gorlparts_title{
font-weight: bold;
}
#gorlparts_support{
font-size:80%;
}
</style>
</head>
<body>
<div id="gorlparts_body">
<div id="gorlparts_title">私のマニフェスト</div>
<p>私は、以下の公約を宣言します!</p>
<ul>
<li class="goalparts_goal">ダイエット</li>
<li class="goalparts_goal">ダイエット</li>
<li class="goalparts_goal">ダイエット</li>
<li class="goalparts_goal">ダイエット</li>
<li class="goalparts_goal">ダイエット</li>
</ul>
<div id="gorlparts_support">この公約を支持する人の数:5人</div>
<div style="font-size:10px; text-align:right;"> <a href="http://hoge.com" target="_blank" style="color:#CCCCCC;">公約宣言パーツ</a></div> 
</div><!-- gorlparts_body-->
</body>
</html>

実際のパーツデザイン

ソース見て分かる通り、箇条書きの箇所のアイコン、フリー素材屋さんに直リンクしてたりするので、ウェブにアップするのは申し訳ないということで、一旦ローカルで表示したのをキャプチャしました。

んー、この時点では、しょぼしょぼですね。恥ずかしい......。



一応、「これ」からは少し進歩しましたけど。


次回以降、これに画像を入れたり、装飾を施したりなんだーしたりしつつ、ある程度まともに見えるデザインにまで仕上げたいと思います。

いやー、デザインは完全に苦手分野なんですけど、どうしよう。全く出来上がりのイメージがない。難しいな......。

トラックバック(0)

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

コメントする

        

人気エントリー