コース登録画面を作成しました。
designs/html/cource.html
あと、index.htmlとresult.htmlにも
ログイン関係の枠を設けました。
■コース登録画面について
・新規登録の流れについて以下のように考えてみました。
------------------
1)左側メニューの「新しいコースを入力」ボタンをクリック
2)右側の登録画面で各項目を入力
→コース名を入力すると
左メニューの「新規登録コース名」に反映される
→マップ上にポイントを打っていくと
左メニューのポイント名が増えていく
且つ、各ポイントの説明テーブルの列が増える
※松前さんの案にあったように
map上に線が引かれるのもいいですね。
3)「このコースを登録する」ボタンで登録すると
左メニューの「新しいコースを入力」ボタンの下に
新コースが追加される。
------------------
残りは、会員登録画面ですね。
あと他に作るページはありますか?
すみません、訂正です。
> →マップ上にポイントを打っていくと
> 左メニューのポイント名が増えていく
> 且つ、各ポイントの説明テーブルの列が増える ←この部分は無しでお願いします。
> 残りは、会員登録画面ですね。
えーっと、会員登録画面の項目は、
・ログイン名
・メールアドレス
・パスワード
・パスワード(確認)
の4つだけです。
他に何かあった方がよさ気な項目が
あったら教えてください。
秋間です。
> あと他に作るページはありますか?
相談なのですが、他にこんな機能があったらいいのに、
っていうのがあったら挙げてもらえないでしょうか。
挙げてもらったものを実装できるかどうかは別ですが、
スケジュール管理を片山さんがやってくれるかも
しれないので、いつまでにこういう機能を作ろうっていう
スケジュールを立てようかなと思っています。
主要な区切りは、以下の4つかな?
・~15日
・15日~17日(福岡合宿)
・~25日(ドリコム締切)
・25日~
いつ何を誰がやるのか、という TODO が
出来上がればGood!
言った人が責任を取るべし!とか言わないので、
どんどん無責任にアイディアを出しましょう。
よろしくお願いします。
・ログイン名
・メールアドレス
・パスワード
・パスワード(確認)
だけでもいいと思いますが
・性別
・現住所(都道府県まで)
・年齢(20~30歳、のようにざっくりと)
のような、ちょっとした属性調査をするのはいかがでしょう。
会員数が多くなってきたら
・趣味
・職業
・業種
を入れて
それに合わせた広告表示や店の紹介で
広告料をとっていくのもいいですね。
http://www.nanchatte-charider.com/gis/test/michinori.html
イメージこれですよね?これをパクれば行けそうですよね。
中身見てないのでサーバで何かやってるかも知れませんが、
線引くとことかは参考にできそうです。
http://worldmaps.web.infoseek.co.jp/distance_calculation.htm
これは使い方がよくわからん・・・
けど地名を取得する先とかが参考になりそうだったので紹介しときます。
ちなみにデート通は、スポットを登録していくと勝手に登録順に線を引いてくれます。
ただ直線なので、なんの意味もない。
一度試してみてください。これよりは上手くできるはず。
あと色の選択ですが、ある程度決まった色の方が選びやすい気がします。
http://monstar.fm/
ここは実はEC-Oneを辞めて起業したメンバー達がやっているサイトです。
音楽の雰囲気を色に例えて、色で検索できるようにしています。
このくらい決められた色でもよいのかも。検索とか分類もしやすいですし。
ちなみにここのジャケットマップは必見です。いい動きしてます。
ソースもらっちゃったwので、
僕の会社のサイトでも、このジャケットマップを提供することにしました。
で、このとき必ず考える軸があるのに気づきました。
・あっさり/こってり
・和/洋/中
・麺系/ご飯系
実はランチを選ぶときは、このくらいしか考えていません。
この中から気分にあった自分の知っている店を選んでいます。
で、デートの時にも同じ状況によく遭遇します。
飲食店が必然的に多くなると思うので、
上記軸+場所でなんとなくその時の気分にあった
美味しい店をサジェストしてくれるとうれしいですね。
ていうかそのサービス、俺が使いたいw
デートを中心に扱うのであれば、上記は必須ですよね。
ロキュという出会い系SNSがあるのですが、
ここはログインするたびに質問がJavaScriptのモーダルダイアログで出て、
それに答えないとログインできません。
でも1問とか2問なので、苦もなく回答できる上、
その質問はそのユーザの嗜好を表すので、
どんな考えの人かどんどんわかっていきます。
このアイディアはすごく良い上、どこのサイトでも使えると思うので、
知っておいて損はないと思います。ぜひユーザ登録してみてください。
ちなみになんでこんなサイトを知ってるかというと、
一時期SNS中心のブログで「多機能」具合が話題になったサイトだからです。
http://locu.jp/
ちゃんと使ってないので、全然出会えてませんがw
でもhttpsの方で相変わらずチェックアウトできないので、コミットできません。
ソース貼り付けときます。
ジオコーディングするにはGoogle Maps API Keyが必要ですが、
environment.rbの最後の行を、
GOOGLE_APPLICATION_ID = "ABQIAAAAnfs7bKE82qgb3Zc2YyS-
oBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSySz_REpPq-4WZA27OwgbtyR3VcA"
とすれば、
http://localhost/
ではアクセスできます。
http://localhost:3000/
ではアクセスできません。
Keyの生成ページにアクセスできなかったので、
WEBrickのポートを80にして上記で試してみてください。
あとデザイン崩れちゃったので、とりあえず右のカラーテーブルの高さを
340 → 379に変更しちゃいました。
金内さん、イイ感じに直してください。
question.rhtml
-----------------------------------------------------------------------------------------------------------------------------------------------
<div class="left_box">
<h2><img src="/img/select1.gif" alt="出発地を選んでください" width="380"
height="30" /></h2>
<div>
<input type="text" id="address" size="30" name="address"
value="長崎 出島町" onchange="showAddress($F('address'))" />
<input type="button" value="Go!"
onclick="showAddress($F('address'))" />
<p>例:長崎 出島町</p>
</div>
<form action="" method="post">
<%= hidden_field 'question', 'start_x', :id => "question_start_x"
%>
<%= hidden_field 'question', 'start_y', :id => "question_start_y"
%>
<%- map = GoogleMap.new -%>
<%-
if map.markers.empty?
map.markers << GoogleMapMarker.new(:map => map,
:lat => 32.74207489599587,
:lng => 129.87160563468933,
:html => '出発地点を選んでね!',
:icon => GoogleMapIcon.new(:image_url => '/img/icon/
people.gif', :width => 20, :height => 64, :anchor_x => 10, :anchor_y
=> 60))
end
-%>
<script type="text/javascript">
//<![CDATA[
var spots = []
var custom_google_map = null;
var geocoder = null;
function customize_google_map(){
var initialize_without_customize = window.onload;
window.onload = function(){
initialize_without_customize();
// custom_google_map = google_map;
GEvent.addListener(google_map, 'click', function(overlay, point) {
if (point) {
$("question_start_x").value = point.x;
$("question_start_y").value = point.y;
google_map_marker_1.setPoint(new GLatLng(point.y, point.x))
}
});
geocoder = new GClientGeocoder();
}
}
function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " が見つかりませんでした。");
} else {
google_map.setCenter(point, 16);
google_map.addOverlay(google_map_marker_1);
google_map_marker_1.setPoint(point);
google_map_marker_1.openInfoWindowHtml(address + "だよ!");
// var marker = new GMarker(point);
// google_map.addOverlay(marker);
// google_map.openInfoWindowHtml(address);
}
}
);
}
}
//]]>
</script>
<%= map.to_html{"customize_google_map();"} %>
<div style="width: 380px; height: 340px;">
<%= map.div %>
</div>
</div>
<div class="right_box">
<h2><img src="/img/select2.gif" alt="今日の気分を選んでください"
width="380" height="30" /></h2>
<img src="/img/color_table_380_340.png" id="color_table"
alt="colors" width="380" height="379" />
<img src="/img/circle_selection.png" id="color_selector"
width="24" height="24" style="position:absolute; display:none;"/>
<%= hidden_field 'question', 'feeling_x', :id =>
"question_feeling_x" %>
<%= hidden_field 'question', 'feeling_y', :id =>
"question_feeling_y" %>
<script type="text/javascript">
//<![CDATA[
(function(){
var color_selector = $("color_selector");
var color_table = $("color_table");
var question_feeling_x = $("question_feeling_x");
var question_feeling_y = $("question_feeling_y");
Event.observe(color_table, "click", function(event){
var tablePos = Position.cumulativeOffset(color_table);
var cursor_x = Event.pointerX(event);
var cursor_y = Event.pointerY(event);
question_feeling_x.value = cursor_x - tablePos[0];
question_feeling_y.value = cursor_y - tablePos[1];
var containerPos = Position.cumulativeOffset($("container"));
var color_selector_style = color_selector.style;
color_selector_style.display = '';
color_selector_style.left = (cursor_x - containerPos[0] - 12) +
'px';
color_selector_style.top = (cursor_y - containerPos[1] - 12) + 'px';
});
})();
//]]>
</script>
</div>
<div class="left_box">
<h2><img src="/img/select3.gif" alt="今日の目的を選んでください"
width="380" height="30" /></h2>
<%= radio_group 'question', 'purpose_cd',
Course::Finder.purpose_enum.to_hash_array do |radio, label, hash,
radio_id|
'%s%s ' % [radio, label]
end%>
</div>
<div class="right_box margin_b10px">
<h2><img src="/img/select4.gif" alt="今日の予算を選んでください"
width="380" height="30" /></h2>
<%= select("question", "budget_cd",
Course::Finder.budget_options ) %>
</div>
<br class="clears" />
<div class="text_center">
<input type="image" src="/img/btn.gif" alt="この条件で検索する"
width="360" height="42" />
</div>
</form>
宮島さん、せっかく作っていただいてるのにすみません。
自分がどのデータを修正したらいいのか、と
修正したデータをどう確認すればいいのか(環境作り?)
が分からなくて、作業できませんでした。
多分、css側だけを編集すればいいとは思いますが
編集するcssの場所は
/designs/html/css/
でしょうか。
もしそうでしたら、以下のように書き換えますので
教えてください。
common.css
#map {
float:left;
/* width:580px; */
width:619px;
>> ・性別
>> ・現住所(都道府県まで)
>> ・年齢(20~30歳、のようにざっくりと)
>
> デートを中心に扱うのであれば、上記は必須ですよね。
これ追加しましょう。
金内さん、ログイン画面のデザインに追加してもらっていいですか?
実装は僕の方でやります。
ロキュみたいにログインごとに質問を出す、っていうのは
是非やりたいですけど、ちょっとすぐには難しいかも?
うーん、微妙かも。検索とどう結びつけたりとか。
> あと色の選択ですが、ある程度決まった色の方が選びやすい気がします。
> http://monstar.fm/
なるほど。確かにカラーパレットを表示しなくても
ある程度の色が並んでいるのでもOKかも。
どっちにしても今と同じように画像の上で選ぶように、
なっていれば、プログラムとしては同じだし。
秋間さん、画面イメージの添付、ありがとうございます。
住所の入力欄が入って、使い勝手が良くなってますね。
私はイイ感じだと思います。
地図の大きさもある程度必要なので
縦長過ぎる、という感じもしませんし。
あと、1つ質問です。
>> ・性別
>> ・現住所(都道府県まで)
>> ・年齢(20~30歳、のようにざっくりと)
これは、新規会員登録の画面に入れる項目でしょうか?
それとも、トップページの上部に入れていた、会員ログインの項目に入れて
毎回入力してもらうイメージでしょうか?
> あと、1つ質問です。
>>> ・性別
>>> ・現住所(都道府県まで)
>>> ・年齢(20~30歳、のようにざっくりと)
>
> これは、新規会員登録の画面に入れる項目でしょうか?
> それとも、トップページの上部に入れていた、会員ログインの項目に入れて
> 毎回入力してもらうイメージでしょうか?
新規会員登録の画面でお願いします。
どう使おうか考えてたんですけど、どういう人が
登録したコースかっていうのを匿名で表示するのにも
使えますよね。 福岡 20代 女性 とかね。
新規会員登録の画面を作成しました。
designs/html/admission.html
適当に文字やイラストを入れてますので
いい文章を思いついたらお知らせください。差替えます。
あと、Win&IEで画面確認したとき、入力項目のズレが直せなかったので
おいおい修正対応していきます。
> どう使おうか考えてたんですけど、どういう人が
> 登録したコースかっていうのを匿名で表示するのにも
> 使えますよね。 福岡 20代 女性 とかね。
それ、いいですね。
検索結果のどこかに載せておくとか。
秋間です。
すごく返事が遅くなって本当ごめんなさい。
ユーザ登録画面を見ました。
なんかキャラに名前をつけたくなってきました。
何か名前ってあるんですか?
これは対外的に公表してウケを狙おうって
いうのではなく、開発に対する愛着が湧いたら
うれしいなーって思っちゃったからなんけどね。
明日の夜、福岡入りします。
福岡に集まる皆さんも、そうでない皆さんも
うひょーってなぐらいにテンション上げ気味でいきましょう!