SlideShare a Scribd company logo
1 of 89
Download to read offline
徳島でニートしながら

       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

                                       ➡ (株)ワークスアプリケーショ

                                       ンズ入社・勤怠管理ソフト開発

                                       ➡ 速度改善リーダーなど色々
              konif

              @konifar                 やって4年間がんばる

              http://konifar.com       ➡ 別のことやりたくなり退社
              http://partymegane.com   ➡ 10日間ニート



13年2月21日木曜日
【こにふぁー】
                                       文系卒・プログラミング経験0

                                       ➡ (株)ワークスアプリケーショ

                                       ンズ入社・勤怠管理ソフト開発

                                       ➡ 速度改善リーダーなど色々
              konif

              @konifar                 やって4年間がんばる

              http://konifar.com       ➡ 別のことやりたくなり退社
              http://partymegane.com   ➡ 10日間ニート   ここの話



13年2月21日木曜日
今まで作ったもの①




13年2月21日木曜日
今まで作ったもの①




      給料の計算を6倍くらいに改善
         40時間   7時間くらい

         某電機メーカーさんや某ファミレスの給料が毎月ちゃんと

         振り込まれるのは僕のおかげ かも



13年2月21日木曜日
今まで作ったもの②




13年2月21日木曜日
今まで作ったもの②




       問合せ管理ツール『Commutan』
          1000件溜まっていたお客様からの問合せが100件くらいに

          部署内だけのために作ったが全社で使われることに




13年2月21日木曜日
今まで作ったもの③




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

      ・ワイヤーフレーム   ・DB




13年2月21日木曜日
Facebookメッセージを例に




13年2月21日木曜日
Facebookメッセージを例に
              『フロントエンド』
              =目に見える部分
              時系列でメッセージが並ぶ
         開封されたら横にチェックマークがつく




13年2月21日木曜日
Facebookメッセージを例に
              『フロントエンド』
              =目に見える部分
              時系列でメッセージが並ぶ
         開封されたら横にチェックマークがつく




              『バックエンド』
              =裏側の処理部分
        返信ボタンを押したら、内容が保存される
          返信の時間は、各国の時間で保存する
      同時に1万人が返信しても大丈夫なようにする


13年2月21日木曜日
Facebookメッセージを例に
              『フロントエンド』
              =目に見える部分
              時系列でメッセージが並ぶ
         開封されたら横にチェックマークがつく
                                  『要件定義』
                              =何ができるかを洗い出す作業
                               「横にプロフィール画像つけたい」
                                 「Enterで返信させたい」
                               「開封状況がわかるようにしたい」
              『バックエンド』
              =裏側の処理部分
        返信ボタンを押したら、内容が保存される
          返信の時間は、各国の時間で保存する
      同時に1万人が返信しても大丈夫なようにする


13年2月21日木曜日
エンジニアでも得意分野は違う
              『フロントエンド』       フロントエンジニア
              =目に見える部分
              時系列でメッセージが並ぶ
                              マークアップエンジニア
         開封されたら横にチェックマークがつく
                              デザイナー



              『バックエンド』
                              エンジニア
              =裏側の処理部分
        返信ボタンを押したら、内容が保存される   プログラマー(SE)
          返信の時間は、各国の時間で保存する
      同時に1万人が返信しても大丈夫なようにする   インフラエンジニア
13年2月21日木曜日
それぞれ使う技術も違う
    Html, JavaScript,
       『フロントエンド』              フロントエンジニア
    CSS =目に見える部分
              時系列でメッセージが並ぶ
                              マークアップエンジニア
         開封されたら横にチェックマークがつく
                              デザイナー
    =画面作るのに必要な技術



    Rails, Java, DB
              『バックエンド』
                              エンジニア
              =裏側の処理部分
        返信ボタンを押したら、内容が保存される   プログラマー(SE)
    =裏側の処理を作るのに
          返信の時間は、各国の時間で保存する

       必要な技術
      同時に1万人が返信しても大丈夫なようにする   インフラエンジニア
13年2月21日木曜日
Html, CSS, JavaScript

                って何?


13年2月21日木曜日
ざっくり役割

         •HTML:文字とかの骨組みだけ
         •CSS:   の色とかレイアウトとかを整理

         •JavaScript:   に動きをつけたり




13年2月21日木曜日
つまりこんな感じ




13年2月21日木曜日
つまりこんな感じ

      HTML




13年2月21日木曜日
つまりこんな感じ

      HTML
        +
       CSS




13年2月21日木曜日
つまりこんな感じ

      HTML
        +
       CSS
       +
   JavaScript




13年2月21日木曜日
だんだんかっこよくなる
              と覚えておけばいいです




13年2月21日木曜日
エンジニアの役割の補足まとめ

       「エンジニアと言っても

              できることとできないことがある」

       と、覚えておいてください。




13年2月21日木曜日
エンジニア同士の役割決め




                 戻ります



13年2月21日木曜日
Pudule にいたエンジニア

                 こにふぁー



                 もろみん



                 ふみ

13年2月21日木曜日
Pudule にいたエンジニア
                         デザイン : できない

                 こにふぁー   フロント : ちょっとできる

                         バック   : 結構できる



                 もろみん



                 ふみ

13年2月21日木曜日
Pudule にいたエンジニア
                         デザイン : できない

                 こにふぁー   フロント : ちょっとできる

                         バック   : 結構できる
                         デザイン : できない

                 もろみん    フロント : できない

                         バック   : できる



                 ふみ

13年2月21日木曜日
Pudule にいたエンジニア
                         デザイン : できない

                 こにふぁー   フロント : ちょっとできる

                         バック   : 結構できる
                         デザイン : できない

                 もろみん    フロント : できない

                         バック   : できる
                         デザイン : できる

                 ふみ      フロント : できるかも

                         バック   : できない

13年2月21日木曜日
Pudule にいたエンジニア
                         デザイン : できない

                 こにふぁー   フロント : ちょっとできる

                         バック   : 結構できる
                         デザイン : できない

                 もろみん    フロント : できない

                         バック   : できる
                         デザイン : できる

                 ふみ      フロント : できるかも

                         バック   : できない

13年2月21日木曜日
Pudule にいたエンジニア
                         デザイン : できない

                 こにふぁー    画面を作る
                         フロント : ちょっとできる

                         バック   : 結構できる
                         デザイン : できない

                 もろみん     裏側を作る
                         フロント : できない

                         バック   : できる
                         デザイン : できる

                 ふみ      かっこ良くする
                         フロント : できるかも

                         バック   : できない

13年2月21日木曜日
開発方針




13年2月21日木曜日
開発方針の決定




13年2月21日木曜日
開発方針の決定
      画面イメージや必要な機能が
          結構ふわっとしていた
      「なんかGoogleカレンダーっぽい感じで」
         「調整さんを特化させた雰囲気で」




13年2月21日木曜日
開発方針の決定
      画面イメージや必要な機能が
                               MTGで聞く限りあんまり
          結構ふわっとしていた
                               難しい技術は必要よさそう
      「なんかGoogleカレンダーっぽい感じで」
                               「超大人数とかで使うものじゃない」
         「調整さんを特化させた雰囲気で」




13年2月21日木曜日
開発方針の決定
      画面イメージや必要な機能が
                                      MTGで聞く限りあんまり
          結構ふわっとしていた
                                      難しい技術は必要よさそう
      「なんかGoogleカレンダーっぽい感じで」
                                      「超大人数とかで使うものじゃない」
         「調整さんを特化させた雰囲気で」




                     見た目に結構こだわりそう
                            「美人事向け」
                      「パズルみたいに楽しい体験を」




13年2月21日木曜日
開発方針の決定


              どんどん作って共有して
      フィードバックもらって修正する



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日木曜日
「・・・(反応がない)」
   文句でも何でもいいからレスポン
              スが欲しい
    イメージを実際に形にすると、必ず食い違いが出
      ます。そこはぜひとも指摘してほしいです。




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.com




13年2月21日木曜日
ありがとうございました




13年2月21日木曜日

More Related Content

Similar to Pudule live cording

プログラミング学習のための学習
プログラミング学習のための学習プログラミング学習のための学習
プログラミング学習のための学習
siranon *
 
デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議framewo...
デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議framewo...デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議framewo...
デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議framewo...
aya.furusawa@gmail.com Sano
 
ABC2013 Spring デザインナーとエンジニアの連携プレイのコツ
ABC2013 Spring デザインナーとエンジニアの連携プレイのコツABC2013 Spring デザインナーとエンジニアの連携プレイのコツ
ABC2013 Spring デザインナーとエンジニアの連携プレイのコツ
Mori Keita
 
Google mapとgps機能を使ってみた。
Google mapとgps機能を使ってみた。Google mapとgps機能を使ってみた。
Google mapとgps機能を使ってみた。
Eiichi Tsuru
 
“夏前にすぐに痩せるRam diet!” もしくは 「老頭児組込みエンジニアの苦悩」 (中継無し) パート1 公開版
“夏前にすぐに痩せるRam diet!” もしくは 「老頭児組込みエンジニアの苦悩」 (中継無し) パート1 公開版“夏前にすぐに痩せるRam diet!” もしくは 「老頭児組込みエンジニアの苦悩」 (中継無し) パート1 公開版
“夏前にすぐに痩せるRam diet!” もしくは 「老頭児組込みエンジニアの苦悩」 (中継無し) パート1 公開版
kinneko
 
テレニコツイ
テレニコツイテレニコツイ
テレニコツイ
jz5 MATSUE
 
第7回ゆるふわ勉強会
第7回ゆるふわ勉強会第7回ゆるふわ勉強会
第7回ゆるふわ勉強会
horike37
 

Similar to Pudule live cording (20)

プログラミング学習のための学習
プログラミング学習のための学習プログラミング学習のための学習
プログラミング学習のための学習
 
ソーシャルコーディング革命後の開発委託の世界〜QA@ITの事例
ソーシャルコーディング革命後の開発委託の世界〜QA@ITの事例ソーシャルコーディング革命後の開発委託の世界〜QA@ITの事例
ソーシャルコーディング革命後の開発委託の世界〜QA@ITの事例
 
デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議framewo...
デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議framewo...デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議framewo...
デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議framewo...
 
Starlingで何本かゲームを作ってみての感想[第3回 東京ひよこの会]
Starlingで何本かゲームを作ってみての感想[第3回 東京ひよこの会]Starlingで何本かゲームを作ってみての感想[第3回 東京ひよこの会]
Starlingで何本かゲームを作ってみての感想[第3回 東京ひよこの会]
 
ABC2013 Spring デザインナーとエンジニアの連携プレイのコツ
ABC2013 Spring デザインナーとエンジニアの連携プレイのコツABC2013 Spring デザインナーとエンジニアの連携プレイのコツ
ABC2013 Spring デザインナーとエンジニアの連携プレイのコツ
 
Google mapとgps機能を使ってみた。
Google mapとgps機能を使ってみた。Google mapとgps機能を使ってみた。
Google mapとgps機能を使ってみた。
 
Rapid board with scrum #augj
Rapid board with scrum #augjRapid board with scrum #augj
Rapid board with scrum #augj
 
“夏前にすぐに痩せるRam diet!” もしくは 「老頭児組込みエンジニアの苦悩」 (中継無し) パート1 公開版
“夏前にすぐに痩せるRam diet!” もしくは 「老頭児組込みエンジニアの苦悩」 (中継無し) パート1 公開版“夏前にすぐに痩せるRam diet!” もしくは 「老頭児組込みエンジニアの苦悩」 (中継無し) パート1 公開版
“夏前にすぐに痩せるRam diet!” もしくは 「老頭児組込みエンジニアの苦悩」 (中継無し) パート1 公開版
 
Devsumi2013 gunta 2_pdf
Devsumi2013 gunta 2_pdfDevsumi2013 gunta 2_pdf
Devsumi2013 gunta 2_pdf
 
ペアプロ
ペアプロペアプロ
ペアプロ
 
Devsumi2014 13 e-7-03
Devsumi2014 13 e-7-03Devsumi2014 13 e-7-03
Devsumi2014 13 e-7-03
 
Ui研究会#1
Ui研究会#1Ui研究会#1
Ui研究会#1
 
Open dataとハッカソンで変わる世界
Open dataとハッカソンで変わる世界Open dataとハッカソンで変わる世界
Open dataとハッカソンで変わる世界
 
テレニコツイ
テレニコツイテレニコツイ
テレニコツイ
 
フロントエンドに挑戦したら思っていた何倍もいい経験になった話
フロントエンドに挑戦したら思っていた何倍もいい経験になった話フロントエンドに挑戦したら思っていた何倍もいい経験になった話
フロントエンドに挑戦したら思っていた何倍もいい経験になった話
 
第7回ゆるふわ勉強会
第7回ゆるふわ勉強会第7回ゆるふわ勉強会
第7回ゆるふわ勉強会
 
Ui live資料
Ui live資料Ui live資料
Ui live資料
 
バージョンアップに負けないためのプラクティス
バージョンアップに負けないためのプラクティスバージョンアップに負けないためのプラクティス
バージョンアップに負けないためのプラクティス
 
Agile japan2012懇親会事例発表
Agile japan2012懇親会事例発表Agile japan2012懇親会事例発表
Agile japan2012懇親会事例発表
 
デ部会 女子部 20170329
デ部会 女子部 20170329デ部会 女子部 20170329
デ部会 女子部 20170329
 

Pudule live cording