Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
徳島でニートしながら       SWTokyoに参加した話                 小西 裕介              2013/02/20(水)13年2月21日木曜日
(1)自己紹介   (2)Puduleぶっちゃけ話   (3)エンジニアへの危険ワード   (4)LIVEコーディング13年2月21日木曜日
(1)自己紹介   (2)Puduleぶっちゃけ話   (3)エンジニアへの危険ワード   (4)LIVEコーディング13年2月21日木曜日
【こにふぁー】                                       文系卒・プログラミング経験0                                       ➡ (株)ワークスアプリケーショ       ...
【こにふぁー】                                       文系卒・プログラミング経験0                                       ➡ (株)ワークスアプリケーショ       ...
今まで作ったもの①13年2月21日木曜日
今まで作ったもの①      給料の計算を6倍くらいに改善         40時間   7時間くらい         某電機メーカーさんや某ファミレスの給料が毎月ちゃんと         振り込まれるのは僕のおかげ かも13年2月21日木曜日
今まで作ったもの②13年2月21日木曜日
今まで作ったもの②       問合せ管理ツール『Commutan』          1000件溜まっていたお客様からの問合せが100件くらいに          部署内だけのために作ったが全社で使われることに13年2月21日木曜日
今まで作ったもの③13年2月21日木曜日
今まで作ったもの③         若手メンバーの日報管理ツール              日報をメールで読んでメールでフィードバックするのが              めんどくさくなったので作成              報告に対してコメント...
今まで作ったもの④13年2月21日木曜日
今まで作ったもの④         アニメ聖地巡礼アプリ『Dive』              初SWTokyoで作って Most votest awardとったやつ13年2月21日木曜日
今まで作ったもの⑤13年2月21日木曜日
今まで作ったもの⑤         美術館音声ガイドアプリ『Loope』              2回目のSWTokyoで作ったやつ(完成せず)13年2月21日木曜日
今まで作ったもの⑥13年2月21日木曜日
今まで作ったもの⑥         面接調整ツール『Padule』              飛び入りのSWTokyoで作ったやつ   今回のメインの話13年2月21日木曜日
(1)自己紹介   (2)Puduleぶっちゃけ話   (3)エンジニアへの危険ワード   (4)LIVEコーディング13年2月21日木曜日
参加は全くの予想外13年2月21日木曜日
参加は全くの予想外13年2月21日木曜日
ここにいました13年2月21日木曜日
MTGで感じる違和感・・・     (エンジニアチームの最初の会話にて)     こに「僕ってがっつり役割ある感じですか?w」     もろ「       え?w」     ふみ「       え?www」13年2月21日木曜日
「まあいっか」と決意する13年2月21日木曜日
エンジニア同士の役割決め13年2月21日木曜日
エンジニア同士の役割決め    その前に少し補足します13年2月21日木曜日
WEBサービスの役割分担13年2月21日木曜日
何となくイメージできますか?      ・フロントエンド    ・Html      ・バックエンド     ・Javascript      ・マークアップ     ・CSS      ・フレームワーク    ・Rails      ・ワイヤ...
Facebookメッセージを例に13年2月21日木曜日
Facebookメッセージを例に              『フロントエンド』              =目に見える部分              時系列でメッセージが並ぶ         開封されたら横にチェックマークがつく13年2月21日...
Facebookメッセージを例に              『フロントエンド』              =目に見える部分              時系列でメッセージが並ぶ         開封されたら横にチェックマークがつく        ...
Facebookメッセージを例に              『フロントエンド』              =目に見える部分              時系列でメッセージが並ぶ         開封されたら横にチェックマークがつく        ...
エンジニアでも得意分野は違う              『フロントエンド』       フロントエンジニア              =目に見える部分              時系列でメッセージが並ぶ                     ...
それぞれ使う技術も違う    Html, JavaScript,       『フロントエンド』              フロントエンジニア    CSS =目に見える部分              時系列でメッセージが並ぶ         ...
Html, CSS, JavaScript                って何?13年2月21日木曜日
ざっくり役割         •HTML:文字とかの骨組みだけ         •CSS:   の色とかレイアウトとかを整理         •JavaScript:   に動きをつけたり13年2月21日木曜日
つまりこんな感じ13年2月21日木曜日
つまりこんな感じ      HTML13年2月21日木曜日
つまりこんな感じ      HTML        +       CSS13年2月21日木曜日
つまりこんな感じ      HTML        +       CSS       +   JavaScript13年2月21日木曜日
だんだんかっこよくなる              と覚えておけばいいです13年2月21日木曜日
エンジニアの役割の補足まとめ       「エンジニアと言っても              できることとできないことがある」       と、覚えておいてください。13年2月21日木曜日
エンジニア同士の役割決め                 戻ります13年2月21日木曜日
Pudule にいたエンジニア                 こにふぁー                 もろみん                 ふみ13年2月21日木曜日
Pudule にいたエンジニア                         デザイン : できない                 こにふぁー   フロント : ちょっとできる                         バック   :...
Pudule にいたエンジニア                         デザイン : できない                 こにふぁー   フロント : ちょっとできる                         バック   :...
Pudule にいたエンジニア                         デザイン : できない                 こにふぁー   フロント : ちょっとできる                         バック   :...
Pudule にいたエンジニア                         デザイン : できない                 こにふぁー   フロント : ちょっとできる                         バック   :...
Pudule にいたエンジニア                         デザイン : できない                 こにふぁー    画面を作る                         フロント : ちょっとできる ...
開発方針13年2月21日木曜日
開発方針の決定13年2月21日木曜日
開発方針の決定      画面イメージや必要な機能が          結構ふわっとしていた      「なんかGoogleカレンダーっぽい感じで」         「調整さんを特化させた雰囲気で」13年2月21日木曜日
開発方針の決定      画面イメージや必要な機能が                               MTGで聞く限りあんまり          結構ふわっとしていた                               難し...
開発方針の決定      画面イメージや必要な機能が                                      MTGで聞く限りあんまり          結構ふわっとしていた                          ...
開発方針の決定              どんどん作って共有して      フィードバックもらって修正する13年2月21日木曜日
ひたすら開発13年2月21日木曜日
13:00 ランディングページ完成13年2月21日木曜日
15:00 人事用画面を共有13年2月21日木曜日
16:00 画面がかっこよくなる13年2月21日木曜日
18:00 こにし離脱13年2月21日木曜日
と思ったら・・・13年2月21日木曜日
21:00 緊急の作成依頼が入る13年2月21日木曜日
21:45 「いつやるの?今でしょ!」13年2月21日木曜日
22:00 バスの中で作業開始13年2月21日木曜日
22:05 酔って気持ち悪くなる13年2月21日木曜日
22:50 申請画面を共有13年2月21日木曜日
3:30 色々作業して睡眠13年2月21日木曜日
次の日は完全に離脱13年2月21日木曜日
次の日のことは              実はあんまり知らないが              メンバーに入れてもらった13年2月21日木曜日
(1)自己紹介   (2)Puduleぶっちゃけ話   (3)エンジニアへの危険ワード   (4)LIVEコーディング13年2月21日木曜日
『危険ワード』              =ちょっと気遣い欲しい振舞              ※ 完全に主観です13年2月21日木曜日
「いい感じにしといてください」13年2月21日木曜日
「いい感じにしといてください」        エンジニアとのやり取りは     美容師に髪型を頼むようなもの       初対面で「おまかせで」といわれると困る         「木村カエラみたいにしてください」              みた...
「いい感じにしといてください」        エンジニアとのやり取りは     美容師に髪型を頼むようなもの       初対面で「おまかせで」といわれると困る         「木村カエラみたいにしてください」              みた...
「ここ直すの簡単ですよね?」13年2月21日木曜日
「ここ直すの簡単ですよね?」   簡単そうに見えても結構めんどく              さいところはある    ギリギリの積み木のように精密に作られているこ     とも多い。簡単そうでもお伺いが欲しいかも。13年2月21日木曜日
「ここ直すの簡単ですよね?」   簡単そうに見えても結構めんどく              さいところはある    ギリギリの積み木のように精密に作られているこ     とも多い。簡単そうでもお伺いが欲しいかも。                ...
「・・・(反応がない)」13年2月21日木曜日
「・・・(反応がない)」   文句でも何でもいいからレスポン              スが欲しい    イメージを実際に形にすると、必ず食い違いが出      ます。そこはぜひとも指摘してほしいです。13年2月21日木曜日
「・・・(反応がない)」   文句でも何でもいいからレスポン              スが欲しい    イメージを実際に形にすると、必ず食い違いが出      ます。そこはぜひとも指摘してほしいです。                     ...
「食べログみたいの作りたい」13年2月21日木曜日
「食べログみたいの作りたい」      意義を感じられないとやる気     が出ないエンジニアもいます。    作ろうとしているサービスに価値を感じられない         と力を注げないエンジニアもいます。     「食べログみたいなのだった...
「食べログみたいの作りたい」      意義を感じられないとやる気     が出ないエンジニアもいます。    作ろうとしているサービスに価値を感じられない         と力を注げないエンジニアもいます。     「食べログみたいなのだった...
『危険ワード』のまとめ       「エンジニアを気持ちよくすれば              短時間ですごいの作ってくれる」       と、覚えておいてください。13年2月21日木曜日
(1)自己紹介   (2)Puduleぶっちゃけ話   (3)エンジニアへの危険ワード   (4)LIVEコーディング13年2月21日木曜日
これ作ります13年2月21日木曜日
13年2月21日木曜日
最後に宣伝13年2月21日木曜日
いいねしてください!   http://partymegane.com13年2月21日木曜日
ありがとうございました13年2月21日木曜日
Upcoming SlideShare
Loading in …5
×

Pudule live cording

2,367 views

Published on

The Presentation depends on the experience that I joined The StartupWeekend Suddenly. I spoke to NOT Engineer in PASONA Inc. at 2013/02/20.

Pudule live cording

  1. 1. 徳島でニートしながら SWTokyoに参加した話 小西 裕介 2013/02/20(水)13年2月21日木曜日
  2. 2. (1)自己紹介 (2)Puduleぶっちゃけ話 (3)エンジニアへの危険ワード (4)LIVEコーディング13年2月21日木曜日
  3. 3. (1)自己紹介 (2)Puduleぶっちゃけ話 (3)エンジニアへの危険ワード (4)LIVEコーディング13年2月21日木曜日
  4. 4. 【こにふぁー】 文系卒・プログラミング経験0 ➡ (株)ワークスアプリケーショ ンズ入社・勤怠管理ソフト開発 ➡ 速度改善リーダーなど色々 konif @konifar やって4年間がんばる http://konifar.com ➡ 別のことやりたくなり退社 http://partymegane.com ➡ 10日間ニート13年2月21日木曜日
  5. 5. 【こにふぁー】 文系卒・プログラミング経験0 ➡ (株)ワークスアプリケーショ ンズ入社・勤怠管理ソフト開発 ➡ 速度改善リーダーなど色々 konif @konifar やって4年間がんばる http://konifar.com ➡ 別のことやりたくなり退社 http://partymegane.com ➡ 10日間ニート ここの話13年2月21日木曜日
  6. 6. 今まで作ったもの①13年2月21日木曜日
  7. 7. 今まで作ったもの① 給料の計算を6倍くらいに改善 40時間 7時間くらい 某電機メーカーさんや某ファミレスの給料が毎月ちゃんと 振り込まれるのは僕のおかげ かも13年2月21日木曜日
  8. 8. 今まで作ったもの②13年2月21日木曜日
  9. 9. 今まで作ったもの② 問合せ管理ツール『Commutan』 1000件溜まっていたお客様からの問合せが100件くらいに 部署内だけのために作ったが全社で使われることに13年2月21日木曜日
  10. 10. 今まで作ったもの③13年2月21日木曜日
  11. 11. 今まで作ったもの③ 若手メンバーの日報管理ツール 日報をメールで読んでメールでフィードバックするのが めんどくさくなったので作成 報告に対してコメントできる機能があり それは全社の システムに取り入れられた らしい13年2月21日木曜日
  12. 12. 今まで作ったもの④13年2月21日木曜日
  13. 13. 今まで作ったもの④ アニメ聖地巡礼アプリ『Dive』 初SWTokyoで作って Most votest awardとったやつ13年2月21日木曜日
  14. 14. 今まで作ったもの⑤13年2月21日木曜日
  15. 15. 今まで作ったもの⑤ 美術館音声ガイドアプリ『Loope』 2回目のSWTokyoで作ったやつ(完成せず)13年2月21日木曜日
  16. 16. 今まで作ったもの⑥13年2月21日木曜日
  17. 17. 今まで作ったもの⑥ 面接調整ツール『Padule』 飛び入りのSWTokyoで作ったやつ 今回のメインの話13年2月21日木曜日
  18. 18. (1)自己紹介 (2)Puduleぶっちゃけ話 (3)エンジニアへの危険ワード (4)LIVEコーディング13年2月21日木曜日
  19. 19. 参加は全くの予想外13年2月21日木曜日
  20. 20. 参加は全くの予想外13年2月21日木曜日
  21. 21. ここにいました13年2月21日木曜日
  22. 22. MTGで感じる違和感・・・ (エンジニアチームの最初の会話にて) こに「僕ってがっつり役割ある感じですか?w」 もろ「 え?w」 ふみ「 え?www」13年2月21日木曜日
  23. 23. 「まあいっか」と決意する13年2月21日木曜日
  24. 24. エンジニア同士の役割決め13年2月21日木曜日
  25. 25. エンジニア同士の役割決め その前に少し補足します13年2月21日木曜日
  26. 26. WEBサービスの役割分担13年2月21日木曜日
  27. 27. 何となくイメージできますか? ・フロントエンド ・Html ・バックエンド ・Javascript ・マークアップ ・CSS ・フレームワーク ・Rails ・ワイヤーフレーム ・DB13年2月21日木曜日
  28. 28. Facebookメッセージを例に13年2月21日木曜日
  29. 29. Facebookメッセージを例に 『フロントエンド』 =目に見える部分 時系列でメッセージが並ぶ 開封されたら横にチェックマークがつく13年2月21日木曜日
  30. 30. Facebookメッセージを例に 『フロントエンド』 =目に見える部分 時系列でメッセージが並ぶ 開封されたら横にチェックマークがつく 『バックエンド』 =裏側の処理部分 返信ボタンを押したら、内容が保存される 返信の時間は、各国の時間で保存する 同時に1万人が返信しても大丈夫なようにする13年2月21日木曜日
  31. 31. Facebookメッセージを例に 『フロントエンド』 =目に見える部分 時系列でメッセージが並ぶ 開封されたら横にチェックマークがつく 『要件定義』 =何ができるかを洗い出す作業 「横にプロフィール画像つけたい」 「Enterで返信させたい」 「開封状況がわかるようにしたい」 『バックエンド』 =裏側の処理部分 返信ボタンを押したら、内容が保存される 返信の時間は、各国の時間で保存する 同時に1万人が返信しても大丈夫なようにする13年2月21日木曜日
  32. 32. エンジニアでも得意分野は違う 『フロントエンド』 フロントエンジニア =目に見える部分 時系列でメッセージが並ぶ マークアップエンジニア 開封されたら横にチェックマークがつく デザイナー 『バックエンド』 エンジニア =裏側の処理部分 返信ボタンを押したら、内容が保存される プログラマー(SE) 返信の時間は、各国の時間で保存する 同時に1万人が返信しても大丈夫なようにする インフラエンジニア13年2月21日木曜日
  33. 33. それぞれ使う技術も違う Html, JavaScript, 『フロントエンド』 フロントエンジニア CSS =目に見える部分 時系列でメッセージが並ぶ マークアップエンジニア 開封されたら横にチェックマークがつく デザイナー =画面作るのに必要な技術 Rails, Java, DB 『バックエンド』 エンジニア =裏側の処理部分 返信ボタンを押したら、内容が保存される プログラマー(SE) =裏側の処理を作るのに 返信の時間は、各国の時間で保存する 必要な技術 同時に1万人が返信しても大丈夫なようにする インフラエンジニア13年2月21日木曜日
  34. 34. Html, CSS, JavaScript って何?13年2月21日木曜日
  35. 35. ざっくり役割 •HTML:文字とかの骨組みだけ •CSS: の色とかレイアウトとかを整理 •JavaScript: に動きをつけたり13年2月21日木曜日
  36. 36. つまりこんな感じ13年2月21日木曜日
  37. 37. つまりこんな感じ HTML13年2月21日木曜日
  38. 38. つまりこんな感じ HTML + CSS13年2月21日木曜日
  39. 39. つまりこんな感じ HTML + CSS + JavaScript13年2月21日木曜日
  40. 40. だんだんかっこよくなる と覚えておけばいいです13年2月21日木曜日
  41. 41. エンジニアの役割の補足まとめ 「エンジニアと言っても できることとできないことがある」 と、覚えておいてください。13年2月21日木曜日
  42. 42. エンジニア同士の役割決め 戻ります13年2月21日木曜日
  43. 43. Pudule にいたエンジニア こにふぁー もろみん ふみ13年2月21日木曜日
  44. 44. Pudule にいたエンジニア デザイン : できない こにふぁー フロント : ちょっとできる バック : 結構できる もろみん ふみ13年2月21日木曜日
  45. 45. Pudule にいたエンジニア デザイン : できない こにふぁー フロント : ちょっとできる バック : 結構できる デザイン : できない もろみん フロント : できない バック : できる ふみ13年2月21日木曜日
  46. 46. Pudule にいたエンジニア デザイン : できない こにふぁー フロント : ちょっとできる バック : 結構できる デザイン : できない もろみん フロント : できない バック : できる デザイン : できる ふみ フロント : できるかも バック : できない13年2月21日木曜日
  47. 47. Pudule にいたエンジニア デザイン : できない こにふぁー フロント : ちょっとできる バック : 結構できる デザイン : できない もろみん フロント : できない バック : できる デザイン : できる ふみ フロント : できるかも バック : できない13年2月21日木曜日
  48. 48. Pudule にいたエンジニア デザイン : できない こにふぁー 画面を作る フロント : ちょっとできる バック : 結構できる デザイン : できない もろみん 裏側を作る フロント : できない バック : できる デザイン : できる ふみ かっこ良くする フロント : できるかも バック : できない13年2月21日木曜日
  49. 49. 開発方針13年2月21日木曜日
  50. 50. 開発方針の決定13年2月21日木曜日
  51. 51. 開発方針の決定 画面イメージや必要な機能が 結構ふわっとしていた 「なんかGoogleカレンダーっぽい感じで」 「調整さんを特化させた雰囲気で」13年2月21日木曜日
  52. 52. 開発方針の決定 画面イメージや必要な機能が MTGで聞く限りあんまり 結構ふわっとしていた 難しい技術は必要よさそう 「なんかGoogleカレンダーっぽい感じで」 「超大人数とかで使うものじゃない」 「調整さんを特化させた雰囲気で」13年2月21日木曜日
  53. 53. 開発方針の決定 画面イメージや必要な機能が MTGで聞く限りあんまり 結構ふわっとしていた 難しい技術は必要よさそう 「なんかGoogleカレンダーっぽい感じで」 「超大人数とかで使うものじゃない」 「調整さんを特化させた雰囲気で」 見た目に結構こだわりそう 「美人事向け」 「パズルみたいに楽しい体験を」13年2月21日木曜日
  54. 54. 開発方針の決定 どんどん作って共有して フィードバックもらって修正する13年2月21日木曜日
  55. 55. ひたすら開発13年2月21日木曜日
  56. 56. 13:00 ランディングページ完成13年2月21日木曜日
  57. 57. 15:00 人事用画面を共有13年2月21日木曜日
  58. 58. 16:00 画面がかっこよくなる13年2月21日木曜日
  59. 59. 18:00 こにし離脱13年2月21日木曜日
  60. 60. と思ったら・・・13年2月21日木曜日
  61. 61. 21:00 緊急の作成依頼が入る13年2月21日木曜日
  62. 62. 21:45 「いつやるの?今でしょ!」13年2月21日木曜日
  63. 63. 22:00 バスの中で作業開始13年2月21日木曜日
  64. 64. 22:05 酔って気持ち悪くなる13年2月21日木曜日
  65. 65. 22:50 申請画面を共有13年2月21日木曜日
  66. 66. 3:30 色々作業して睡眠13年2月21日木曜日
  67. 67. 次の日は完全に離脱13年2月21日木曜日
  68. 68. 次の日のことは 実はあんまり知らないが メンバーに入れてもらった13年2月21日木曜日
  69. 69. (1)自己紹介 (2)Puduleぶっちゃけ話 (3)エンジニアへの危険ワード (4)LIVEコーディング13年2月21日木曜日
  70. 70. 『危険ワード』 =ちょっと気遣い欲しい振舞 ※ 完全に主観です13年2月21日木曜日
  71. 71. 「いい感じにしといてください」13年2月21日木曜日
  72. 72. 「いい感じにしといてください」 エンジニアとのやり取りは 美容師に髪型を頼むようなもの 初対面で「おまかせで」といわれると困る 「木村カエラみたいにしてください」 みたいに言ってくれると楽。13年2月21日木曜日
  73. 73. 「いい感じにしといてください」 エンジニアとのやり取りは 美容師に髪型を頼むようなもの 初対面で「おまかせで」といわれると困る 「木村カエラみたいにしてください」 みたいに言ってくれると楽。 時間があれば、イケてるエンジ ニアと話して固めるのもアリ 優秀なエンジニアは、相手の持つイメージを話し ながら吸い上げてくれる! が、そんなエンジニアばかりではない。13年2月21日木曜日
  74. 74. 「ここ直すの簡単ですよね?」13年2月21日木曜日
  75. 75. 「ここ直すの簡単ですよね?」 簡単そうに見えても結構めんどく さいところはある ギリギリの積み木のように精密に作られているこ とも多い。簡単そうでもお伺いが欲しいかも。13年2月21日木曜日
  76. 76. 「ここ直すの簡単ですよね?」 簡単そうに見えても結構めんどく さいところはある ギリギリの積み木のように精密に作られているこ とも多い。簡単そうでもお伺いが欲しいかも。 だからこそ、なるべく早くこだ わりポイントを伝えてほしい 先に言ってくれればいくらでも修正可能。 最低限何が欲しいか、最低限じゃないけどここに はこだわりたい、といった内容は早く教えて13年2月21日木曜日
  77. 77. 「・・・(反応がない)」13年2月21日木曜日
  78. 78. 「・・・(反応がない)」 文句でも何でもいいからレスポン スが欲しい イメージを実際に形にすると、必ず食い違いが出 ます。そこはぜひとも指摘してほしいです。13年2月21日木曜日
  79. 79. 「・・・(反応がない)」 文句でも何でもいいからレスポン スが欲しい イメージを実際に形にすると、必ず食い違いが出 ます。そこはぜひとも指摘してほしいです。 褒めたら頑張るエンジニアも多い です。自分はそうです。 開発には、結構地道な作業もあります。その分 フィードバックがあるとテンション上がります。13年2月21日木曜日
  80. 80. 「食べログみたいの作りたい」13年2月21日木曜日
  81. 81. 「食べログみたいの作りたい」 意義を感じられないとやる気 が出ないエンジニアもいます。 作ろうとしているサービスに価値を感じられない と力を注げないエンジニアもいます。 「食べログみたいなのだったら食べログでいい じゃん」と思ってしまうわけです。13年2月21日木曜日
  82. 82. 「食べログみたいの作りたい」 意義を感じられないとやる気 が出ないエンジニアもいます。 作ろうとしているサービスに価値を感じられない と力を注げないエンジニアもいます。 「食べログみたいなのだったら食べログでいい じゃん」と思ってしまうわけです。 作る事自体に喜びを感じるエン ジニアもいます。要見極め。 作ることが楽しいというエンジニアにとっては問 題ないです。ただ、その場合は何を作りたいかを 明確に伝えてあげてください。13年2月21日木曜日
  83. 83. 『危険ワード』のまとめ 「エンジニアを気持ちよくすれば 短時間ですごいの作ってくれる」 と、覚えておいてください。13年2月21日木曜日
  84. 84. (1)自己紹介 (2)Puduleぶっちゃけ話 (3)エンジニアへの危険ワード (4)LIVEコーディング13年2月21日木曜日
  85. 85. これ作ります13年2月21日木曜日
  86. 86. 13年2月21日木曜日
  87. 87. 最後に宣伝13年2月21日木曜日
  88. 88. いいねしてください! http://partymegane.com13年2月21日木曜日
  89. 89. ありがとうございました13年2月21日木曜日

×