Open n0bisuke opened 8 years ago
先週から今週にかけての作業
・デザイン無視のモック画面を作ってみた(TOPページ) ・Node.jsを触ってみた ・phpを久しぶりに触ってみた
3/13~3/17までの進捗
・Node.js入門 ドットインストールにて #13 投稿されたデータを表示しよう までやりました。 http://dotinstall.com/lessons/basic_nodejs
http://dotinstall.com/lessons/basic_localdev_mac
・ローカル開発環境の構築の動画 http://dotinstall.com/lessons/basic_localdev_mac については3/17中に全てやる予定です。
・企画を2つ作成(提出済み) ※Node.jsを使うものベースで作ってみました。一番やりたいのは一番最後に送ったものです〜。
・企画が決まっておらず暇を持て余していたので、ドットインストールのjavascriptアプリを作る動画を見てアプリを作っていました。 http://dotinstall.com/lessons/flashcards_js ↑これとか
とりあえず企画書のOKが出るまでは3本くらい簡単なアプリを作ってjsに慣れておきたいと思います!
【追記】 SSH公開鍵設定まではできました。
GitHubPagesへの公開はうまくいかなかったので、再度チャレンジしてみます!^^
3/20~3/24進捗 【作業内容】 ・企画内容ブラッシュアップ(ヒアリングなどを通じて内容に若干の変更あり。詳しくはreadme.md)
・各ページ(といってもTOPページとメインページのみだが)で必要となる機能の洗い出し
・各ページの見た目を手書きで書いてみた(基本的な機能が非常にシンプルなので、画面構成もかなりシンプルになりそう。)
・javascript、localStorageを利用して、お金の計算を出来るようにした。(金額を入力してボタンを押すと、データの保存、足し算を行い、今まで貯まった金額を表示できるようにした。)
・Amazon APIから情報を取得してブラウザ上に表示(言語はPHPを利用)
・Web Push通知について調べてみた(どうやらpushnate、push7、bpushというサービスがある模様。https通信でなくても一応使えるようだが、まだ実装できていない)
・JS + Node.jsによるwebクローラーネットエージェント開発テクニックという本を買い、クローラーを試しにサンプル通りに作ってみて動かしてみた。(大体のサンプルが動いた)
・ドットインストールをみながらMongoDBに接続しようとしたが失敗。
【次回MTG(3/27)までの作業予定】 ・とりあえずのデザインを決め、なんとなく見た目を作っておく(ただし、これはあくまでも仮の内容なので、後で変更する可能性大)
・Amazon APIから情報を取得し表示する部分をもう少しブラッシュアップする。(現状、cssを当てるとphpの方にエラーが出るという不思議な状況なので、そこを解決したい)
・Web Push通知について、いずれかのサービスで実装をしてみる。
・Node.jsで引っ張ってきた情報をブラウザ上に表示する(ことにチャレンジする)
【今後の課題と質問】 ・Node.jsでamazon apiから情報を取得することはできそうだが(というか本の通りにやったら一応できたが)、それをブラウザ上に表示するにはどうすれば良いのか?→ごちゃごちゃと自分なりにはやってみます!^^
・Web Push通知について調べてみた(どうやらpushnate、push7、bpushというサービスがあるようで、簡単にプッシュ通知を実装できる模様。)次週以降、こちらの内容もしっかりと調べ実装していきたい。
・デザイン問題 →友人にも聞いてみたが、すぐ動けそうになかったので、4期生のデザイナーの人を捕まえて、プログラミングを教えるかわりにデザインをしてもらう方法を検討中。笑
【追記】 ・pushnateでプッシュ通知を実装できました。 下記、土日で頑張ります! ・Node.jsで引っ張ってきた情報をブラウザ上に表示する(ことにチャレンジする)→できたら色々とページを作ってみます。 ・botが自動返信してくれるチャットを作ってみます。@milkcocoa
3/31 報告 <先週から今週にかけての進捗と、今後の予定>
・企画内容がようやく確定→細かい点は微修正しながら進めていきます。
<使用予定言語> HTML CSS javascript(jQuery) Google Maps API Places API(Google Maps APIライブラリ) PHP MySQL Node.js
・知り合いのつてを頼って美大の学生にお願いしている最中。4/3頃に全ページ(とりあえずPC版)の納品がある予定です。
・必要な機能の精査、UI/UXを考える ・Google Maps API、Places APIを利用して、検索機能、緯度経度を取得するというプログラムを書きました。(searchmap.htmlというファイルをアップロードしておきます)
・PHPでデータベース周りを実装 1.ID,ユーザー名,地点名,緯度,経度を登録できるようにする 2.ID,ユーザー名,地点名,緯度,経度を編集できるようにする 3.ID,ユーザー名,地点名,緯度,経度を削除できるようにする
・D3.jsかGoogle Charts APIを使ってデータビジュアライゼーションに取り組む 1.ドットインストールや本で表示されるデータをビジュアライゼーションしてみる 2.余裕があれば、どういった見せ方が良いかを考える
<第一フェーズ(4/30ごろまで)> ・デザイン/構成を決め、マークアップする。 ・Google Maps APIを利用して、場所の登録ができるようになっている。(当然、保存もされるようになっている) ・登録した場所で、いくらお金を使っているのか、把握できるようにする。
・各地点での金額を入力するとその地点での利用金額も加算され、トータル金額も加算されるようになる。 ・金額が多い順にランキングされる(どこで多くお金を使っているのかをビジュアル化する)
_要は、「この場所でいくらのお金を使っているのかがわかるアプリケーションを作る」ということです。 _ <第二フェーズ(5/14まで)> ・登録地点の近くにいくとアラートが出る仕組みを実装
・無駄遣いをやめさせる質問の仕組みを実装
・無駄遣い / 節約をどれだけできているのか計算する仕組みを実装
・見た目のスマホ対応(レスポンシブデザイン)
第一フェーズにプラスして、上記の実装をする、というのが第二フェーズの目標です。
<第三フェーズ(6月中旬の発表まで)> ・無駄遣いした金額に応じて、Amazonからランダムにクローリングをしてきた商品を見せてあげて、「これだけのものが買えます」と認識させてあげる
・逆に無駄遣いをせずに節約をできた場合は「これだけ自分にご褒美が買える」と見せてあげる。
第二フェーズにプラスして、上記の実装をする、というのが第三フェーズの目標です。基本的にNode.jsでクローラーを作ってみるということにチャレンジします。
【追記】
【来週の予定】のところに デザインをもらったものをマークアップする。を追加しておきます!
昨日寝込んでおりまして、進捗書き込みしておりませんでしたすみません!
・無駄遣いだった、という判断のロジック →色々ヒアリングしてみたところ、買う時に無駄遣いであると思って買うことはほぼなさそうだったので、買ったあとに「無駄だったかどうか」というのを「はい、いいえ」でトグルスイッチの切り替えだけで仕分けできるようにするという風にしたほうが現実的かなと思ってます。
それに付随して無駄遣いしがちな場所の判定方法は ・時間 ・過去の買い物が無駄遣いだったかどうか ・場所 この3つの要素がすべて重なった時にプッシュ通知を出してあげる、というのが良いかなと思っています。
・各ページの機能の精査 ・charts.jsでグラフを記述(data.html) ・Google Mapの色を時間によって変更するというのを実装。(main.html)
・デザインチェック→OKな部分からマークアップ開始(4/8からの予定) ・ベースカラーは青系にすることが決定。 ・jQuery mobileをドットインストールで触ってみた。(#1~#10まで)(簡単にスマホサイト作れるけど、デザイン踏襲がややこしそう。。。) ・レスポンシブデザインの勉強。1冊本を買う→だいたいやって基本的なことは抑えた。(まずこれで学んだことベースでスマホサイトを作ってみます)
・4/10の夕方に友人数名にプレゼン。反応を伺う予定。 ・データベースの設計も考える必要があるので、その点をGs同期に相談。 ・Any(デジハリの動画学習教材)でPHPの授業を全て見て、データベースの基礎までおさらい。
・大まかなページデザイン、やること、構成は決まったので、あとはガンガンコードを書いては細かい部分を修正していく感じになりそうです。
・方針 →基本的にHTML CSS javascript PHPをガリガリとかいていく。
・PHP周り 1.登録画面からデータを挿入できるようにする(地点名、緯度経度、ユーザーデータ)
・デザイン周り 1.基本デザイン確定 2.マークアップ大枠完了(まずはスマホページ)(細かいエフェクトは再来週。とりあえず見た目がそれっぽくなることを目指す。)
【4/17まで】 ・上記内容(PHP周り、デザイン周り)
【4/24まで】 ・デザインマークアップ完成(最低限スマホは終わらせる。) ・PHP周りの実装を引き続き行う。(使ったお金の登録や表示、charts.jsへの反映など) ・ 【4/30まで】 ・(PC版マークアップ予備) ・(PHP周りの実装予備) ・指摘事項などあると思うので、修正 ・サーバーにあげてα版公開
以上です。進捗報告が遅くなりすみませんでした!
・無駄遣いだったと判断した後に、アラートを出す基準を決める。 →1回無駄遣いだったと判断したらアラートを出すのではなく、2回or3回同じ場所で無駄遣いをしていたらアラートを出す。 ※時間についてはいったん考えずに「2回or3回以上同じ場所で無駄遣いをしていて、その場所に近づいた時にアラートを出す」という仕組みにしようと思います。
・PHPでテーブル結合(内部結合、外部結合) →ネットでサンプルを拾ってきて内部結合、外部結合ができました。ついでにデータの表示もできました。
・PHPからデータやグラフを表示する →単体のテーブルからデータを入れたり表示したり、という作業は難なくできました。なので、テーブルの結合と正規化(同じような作業ですかね?)をやった上でデータを自在に取り出せるようになれば、完成に近づくかも。
・PHPの正規化に取り組む →データ切り分けなどをしてみたものの、ちょっと混乱。。。
構成としては DBは2つ、テーブルは3つ
<ログインデータテーブル> 1.id 2.username 3.password
<お金テーブル> 1.id 2.usemoney(1回の買い物で使ったお金を登録する) 3.datetime(時刻) 4.flag(無駄遣いかどうか、デフォルトは0,無駄遣いの時は1)
<場所テーブル> 1.id 2.placename 3.lat(緯度) 4.lng(経度)
これらを第3正規化までしようと考えましたが、混乱してしまいました。。(PHPメインで開発しているジーズの同期にも聞いてみますが、アドバイスいただけると大変助かります。。。)
・flagの値を取得してデータに入れる、そのデータを反映してトグルボタンのステータスを変えるということだけはできませんでした。
・デザインチェック→OKな部分からマークアップ開始。
・TOPページ(PC、スマホ)はいったんマークアップを始める。メインページ、データページ、お金登録用ページ、地点登録用ページはデザイン微調整しながら、週末にはコーディング完了予定。
・「レスポンシブwebデザイン」という本を買い、とりあえず読み終わりましたので、基礎知識をもとにスマホサイトの作成に入ります。
・大まかなページデザイン、構成は決まったので、あとは細かい部分を微調整していく感じになりそうです。 ・PHPとjavascript、スマホサイトの作成をひたすら頑張ります。
①なりふり構わずゴリゴリ実装。
②5/14時点でのゴールを今一度確認。
③4/30に絶対公開する。という意思を持ってやる。 と何だか精神面ばかりですが、メンタルは大事かなと思いまして。笑
ご確認、宜しくお願い致します!
・アラートを出すタイミングはまだ考え中ですが、下記のような仕組みを考えています。 ①ユーザーの現在位置を常に監視 ②2~3分に1回、各登録地点との距離を計算し、xx(例えば100m)m以内に自分がいる場合は③へ ③その地点で無駄遣いをした履歴が3回以上あれば、webプッシュ通知でアラートを出す
・そろそろサービス名を決めたい。サービス名は5/10までを期日とする。
・PHPの繋ぎこみ 1.ログイン機能 2.ログアウト機能 3.お金データ登録機能 4.地点データ登録機能 5.メインページ表示機能 6.上記5.を実現するためにテーブルの結合 これらについてチャレンジ。なんとかできた。上記機能は来週中に全て本番ページに実装。
・map上での2点間の距離計算 →できた。複数地点の計算もできた。 現在地を取得して、ある場所との距離を計算する、というのは今週の土日で終わらせたい。
・ようやくデザインベースのでコーディングが始まった。TOPページはなんとかそれっぽいのが完成。細かいエフェクトとかは後にして、各ページのレスポンシブ対応を急ぐ。
・TOPページ以外のページは5ページほどあるが、それらの20%程度しかレスポンシプ用のコードがかかけていないので、4/24までにサイトの見た目はスマホ、タブレット、PCに対応できるようにする。
・さくらのクラウドの勉強会に参加。サーバーを立ててみることも初めてだったので、いろいろ勉強になった。 ・レスポンシブデザインに手こずり、若干予定よりも遅れ気味。(CSSなめてましたすいません)
不完全でも公開し、URLからアクセスできるようにする(期日:4/30)
①ログイン機能 ②レスポンシブ対応 ③お金と場所を登録する機能 ④データ閲覧機能 ⑤サーバーに上げて公開
①ユーザーの現在位置を取得して、無駄遣いしそうになった時にアラートを出す機能 ②今までの無駄遣い金額で買える物を見る機能 ③データの編集作業機能(地点名や使った金額などの編集)
①技術面のブラッシュアップ(あわよくば転職のため) ②プレゼンの練習 ③プレゼンの作成 割合は上から6:3:1くらい。 ①については、上記の「それ以後実装する機能」をしっかり実装することでスキルを身につける。 javascript、PHP、MySQL周辺の知識やスキルを磨く。
・なんとか4/30のα版公開はできそう。(がんばります。。笑)
・javascriptでpush通知をユーザーに対して行う、という仕組みが実装できなさそうなので、α版ではその機能は実装しないという判断をした。
・よって、まずはPC上でお金の管理ができるテスクトップアプリケーションとしてリリース→スマホ対応→push通知機能追加、という順にスケジュールを組み直し。
・上記を踏まえ、基本的にPCページのデザインと、PHPでデータの更新、表示などをテーブルの結合をして実装する、という作業を中心に今週は進めました。
・4/30時点で全ページの繋ぎこみ、PHPを利用したデータの表示などは終わらせて公開する予定。一部CSSを当てていないページもあるが、それは根性で、なる早で同じデザインにする
TOPページ ユーザー新規登録ページ ユーザーログインページ メインページ データ閲覧ページ データ編集ページ ログアウトページ
また、下記に各ページの進捗状況を記載します。
・アイコンは変更予定だが、とりあえずPC、スマホの両方に対応完了。 ・新規登録、ログインページへのリンクも実装。
・全体的なデザインのレベルを上げる ・ログイン、新規登録機能でのバリデーション、セキュリティ、正規表現とか
・ユーザー名とパスワードを入力→新規登録が完了したらメインページに飛ぶという基本的な機能は実装。
・CSSマークアップ&レスポンシブ対応 ・ログイン、新規登録機能でのバリデーション、セキュリティ、正規表現とか
・ユーザー名とパスワードを入力→新規登録が完了したらメインページに飛ぶという基本的な機能は実装。
・CSSマークアップ&レスポンシブ対応 ・ログイン、新規登録機能でのバリデーション、セキュリティ、正規表現とか
・大まかなページデザイン完了(PCページのみ) ・PHPから地図にデータを表示し、地点データから地点リストを表示 ・地点登録ページ、お金登録ページ、データ編集ページへのリンクを実装。
・CSSマークアップ(微調整)&レスポンシブ対応 ・表示データのセキュリティ
・大まかなページデザイン完了(PCページのみ) ・DBから一部データを表示。(一部データとは、この地点で使ったお金、この地点で無駄遣いをしたお金、この地点で使ったお金の割合(全体に対して)を指す)
・CSSマークアップ(微調整)&レスポンシブ対応 ・PHPでDBからデータを取得し、閲覧用データを加工、表示する(特に月ごと、時間帯ごとのデータ)
・ページの役割を設定し、とりあえずPHPが正常に動くように実装。
・CSSマークアップ&レスポンシブ対応 ・表示データのセキュリティ
・とりあえずログアウトボタンを押すとtopページに戻るように設定。(PCページのみ)
・CSSマークアップ&レスポンシブ対応 ・ログアウト機能が正常に動作しているか、ユーザーログイン機能をブラッシュアップした上で確認。
・4/30:α版公開。 ※ α版は「お金を使った地点と金額のログが取れて、データを見れるアプリ」とする。 ・5/14:β版公開。 ※「無駄遣いしている場所に近づいたらプッシュ通知を出す」という機能を追加する。 ・5/31:本リリース。 ※もし5/14までに上記内容が実装できていなかった場合はここでβ版リリースとする。 ・6/1〜6/9:微調整、プレゼンの練習。 ・6/9:発表。やるからには1位を目指して頑張る!
・なんとか4/30にα版を公開。
・粛々とスマホ対応。
・5/14までにデザインを作りこみ、残作業がjavascript、serviceworkerを利用したアラート機能をつける、というもののみになるように頑張ります。
・アイコンは変更。、PC、スマホの両方に対応したが、inputタグを使うとiOSで角丸のボタンが出てしまうため、buttonタグで対応予定。
・全体的なデザインのレベルを上げる ・ログイン、新規登録機能でのバリデーション、セキュリティ、正規表現とか
・ユーザー名とパスワードを入力→新規登録が完了したらメインページに飛ぶという基本的な機能は実装。 ・レスポンシブ対応完了
・ログイン、新規登録機能でのバリデーション、セキュリティ、正規表現とか
・ユーザー名とパスワードを入力→新規登録が完了したらメインページに飛ぶという基本的な機能は実装。 ・レスポンシブ対応完了
・ログイン、新規登録機能でのバリデーション、セキュリティ、正規表現とか
・レスポンシブ対応完了 ・PHPから地図にデータを表示し、地点データから地点リストを表示 ・地点登録ページ、お金登録ページ、データ編集ページへのリンクを実装。
・もう少しパフォーマンスの上がるコードを書く。
・大まかなページデザイン完了(PCページのみ) ・DBからデータを表示する、という機能を実装。
・CSSマークアップ(微調整)&レスポンシブ対応
・ページの役割を設定し、とりあえずPHPが正常に動くように実装。 ・レスポンシブ対応完了
・表示データのセキュリティ
・とりあえずログアウトボタンを押すとtopページに戻るように設定。(PCページのみ)
・ログアウト機能が正常に動作しているか、ユーザーログイン機能をブラッシュアップした上で確認。
・5/14:β版公開。 ※「無駄遣いしている場所に近づいたらプッシュ通知を出す」という機能を追加する。 ・5/31:本リリース。 ※もし5/14までに上記内容が実装できていなかった場合はここでβ版リリースとする。 ・6/1〜6/9:微調整、プレゼンの練習。 ・6/9:発表。やるからには1位を目指して頑張る!
・正直、スマホ対応以外あまり進んでません。
・粛々とスマホ対応。
・5/14までにデザインを作りこみ、残作業がjavascript、serviceworkerを利用したアラート機能をつける、というもののみになるように頑張っています。
・アイコンは変更。PC、スマホの両方に対応したが、inputタグを使うとiOSで角丸のボタンが出てしまうため、buttonタグで対応予定。
・全体的なデザインのレベルを上げる ・ログイン、新規登録機能でのバリデーション、セキュリティ、正規表現とか
・ユーザー名とパスワードを入力→新規登録が完了したらメインページに飛ぶという基本的な機能は実装。 ・レスポンシブ対応完了
・ログイン、新規登録機能でのバリデーション、セキュリティ、正規表現とか
・ユーザー名とパスワードを入力→新規登録が完了したらメインページに飛ぶという基本的な機能は実装。 ・レスポンシブ対応完了
・ログイン、新規登録機能でのバリデーション、セキュリティ、正規表現とか
・レスポンシブ対応完了 ・PHPから地図にデータを表示し、地点データから地点リストを表示 ・地点登録ページ、お金登録ページ、データ編集ページへのリンクを実装。
・もう少しパフォーマンスの上がるコードを書く。
・大まかなページデザイン完了(PCページのみ) ・DBからデータを表示する、という機能を実装。
・CSSマークアップ(微調整)&レスポンシブ対応
・ページの役割を設定し、とりあえずPHPが正常に動くように実装。 ・レスポンシブ対応完了
・表示データのセキュリティ
・とりあえずログアウトボタンを押すとtopページに戻るように設定。(PCページのみ)
・ログアウト機能が正常に動作しているか、ユーザーログイン機能をブラッシュアップした上で確認。
・5/14まで →デザイン面の修正と、ユーザーごとのログインができる機能の実装 ・5/31:β版公開。 ※「無駄遣いしている場所に近づいたらプッシュ通知を出す」という機能を追加する。 ・6/1〜6/9:微調整、プレゼンの練習。 ・6/9:発表。やるからには1位を目指して頑張る!
・一旦PHP周りの話は置いておいてService WorkerでPush通知が実装できるかを試してみる(Pushnateなどは使わずにスクラッチで自作)
・Service Workerをスクラッチで書いてPush通知を実装しようとしたができず。。。うーん。。なんとか実現させたい。
・GeolocationAPIのWatchpositionを利用して現在地を取得し、DBに登録されている地点との距離計算を行う、そして距離がxxm以内であればイベントを発生させる、ということまではなんとかできた。
・Service WorkerをQiitaとかGoogleのドキュメント(英語)を見ながら使ってみた。Push通知をlocalhostの環境上で遅れるとのことなので、とりあえず試す→うまくいかない。の繰り返し。30回くらいはいろいろな記事やドキュメント見て試してみたけどダメ…。
・WatchPositionを利用して現在地をリアルタイムで取得し、DBにある地点からの距離を計算、そしてxxm以内に自分がいればイベントを発生させる、というプログラムを作成。Push通知の条件はなんとなく作れた。
・まずはService WorkerでPush通知を実装する
・それができたらPHP周りのセキュリティや見た目の修正をする。
・本番プレゼン用動画の撮影
・本番用プレゼンの作成
・プレゼン練習
・Service WorkerでPush通知を実装する(まずは、ボタンを押したらPush通知が送られる、などの機能を作ってみる)
・PHP周りの実装を再開(バリデーションとか、ユーザーごとのログインとか、その他セキュリティ面)
・Service Workerの実装(本番環境へ実装)
・PHP周りの実装(バリデーションとか、ユーザーごとのログインとか、その他セキュリティ面)
・デザインなど最終調整
・各ページのチェック(リンクが貼れているか、誤字脱字はないか、エラーなく正常に動作をするか、など)
・プレゼン用動画撮影・作成
・プレゼン練習
※ラスト頑張ります!
あ、あとgithubに卒制のコードを載せてなかったので明日載せておきます!笑
・一旦PHP周りの話は置いておいてService WorkerでPush通知が実装できるかを試してみる→色々試したものの挫折。。
とはいえそれ(リアルタイムでのpush通知)がないと面白くないので、teratailの開発の人を紹介してくれと木下さん経由で交渉中です。。。笑
・デザイン周りをちょこちょこいじる。
・正直、開発を始めてから一番何も進まなかった週でした!
・Service Workerについて、何か手立てはないかと色々探してみましたが、簡単に導入できるのはどれも一定の時間にプッシュ通知を配信する、というもの。うーーーん。
・明らかにデザイン的にまずそうなところを修正。(デザイン崩れなど)
・気分転換にTOPページにスムーススクロールをつける。笑
・まずはリアルタイム通知を実装する
・それができたらPHP周りのセキュリティや見た目の修正をする。
・本番プレゼン用動画の撮影
・本番用プレゼンの作成(動画部分のみ)
・プレゼン練習
・リアルタイム通知の実装(Service Workerなのか、milkcocoaなのか)
・PHP周りの実装(バリデーションとか、ユーザーごとのログインとか、その他セキュリティ面)→プレゼンにおいてはデモをその場で見せるわけではないので、最悪いらないかも。
・デザインなど最終調整
・各ページのチェック(リンクが貼れているか、誤字脱字はないか、エラーなく正常に動作をするか、など)
・プレゼン用動画撮影・作成
・プレゼン練習
先日のmilkcocoaのイベントで「ピンヒールがハマりやすい位置を登録しておいて、そこに近づいたら通知を出す」みたいなことをやっている人がいましたが、自分がやろうとしているものと全く同じ仕組みだと思うんですよね。。。 どのように実装していたかわかりますでしょうか?(milkcocoaのドキュメント見てもよくわかりませんでした。。。)
service workerでもいいんですが、個人的にはリアルタイムで通知できれば実装が簡単な方がいいと思っています。
お知恵を拝借できればと思います!
ほりさん進捗報告 (毎週 木曜日23:59)