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.

はじめてのMilkcocoa 〜2時間目〜

1,805 views

Published on

Milkcocoa Girls! vol.5 のLT用資料です。
つくったもの
[書き込む人用] http://kiyoe.github.io/birthday/
[お祝いされる人用] http://kiyoe.github.io/birthday/birthday_card/

Published in: Engineering

はじめてのMilkcocoa 〜2時間目〜

  1. 1. はじめてのMilkcocoa \ 2時間目 / Connehito.inc デザイナー 古市聖恵 @kiyoe_furuichi
  2. 2. はじめまして、きよえしです! Connehito.inc デザイナー ママリ・ママリQのUI設計∼マークアップまで Twitter : @kiyoe_furuichi http://www.amazon.co.jp/registry/wishlist/2F5D5ZQFOHRD4 古市 聖恵 1991年12月1日生まれ 24歳 沖縄県那覇市出身で、就職を機に上京 渋谷のスタートアップで1年デザイナーをして 今年の4月に転職
  3. 3. お知らせ 1991年12月1日生まれ 24歳 妊活・妊娠・出産・子育ての疑問を解決! 家族の毎日をもっと笑顔に
  4. 4. お知らせ 妊活・妊娠・出産・子育ての疑問を解決! 家族の毎日をもっと笑顔に 一緒にサービス創りませんか? エンジニア・デザイナー WANTED!! https://www.wantedly.com/companies/connehito
  5. 5. 前回のMilkcocoa girls!では • とりあえずHelloworldしてみた • サンプルをみながら色々やってみる ・スマホの傾きでブラウザの要素が変化する ・TwitterAPI 連携でツイートを取得してみる
  6. 6. やってみてわかったこと • 基本むずかしいロジックを書かなくてもOK • サンプルが充実している • 動くからたのしい! 「 なんかできるじゃん!⁽(ી₍₍⁽⁽(ી( ̂ô )ʃ)₎₎⁾⁾ʃ)₎₎ 」
  7. 7. やってみてわかったこと • 基本むずかしいロジックを書かなくてもOK • サンプルが充実している • 動くからたのしい! 「 なんかできるじゃん!⁽(ી₍₍⁽⁽(ી( ̂ô )ʃ)₎₎⁾⁾ʃ)₎₎ 」
  8. 8. 思いついた アイデアを 具現化! Milkcocoa 思いついた アイデアを 具現化!
  9. 9. 思いついた アイデアを 具現化! Milkcocoa \ デザイナーの腕の見せどころ!/
  10. 10. 今回トライしたこと サンプルをマッシュアップして Webアプリつくって公開する!
  11. 11. \ 2時間目 / Connehito.inc デザイナー 古市聖恵 @kiyoe_furuichi はじめてのMilkcocoa
  12. 12. 12月1日 \ 突然ですが、なんの日か知ってますか? /
  13. 13. 答えは…
  14. 14. 答えは…
  15. 15. 答えは…
  16. 16. はじめまして、きよえしです! Connehito.inc デザイナー ママリ・ママリQのUI設計∼マークアップまで Twitter : @kiyoe_furuichi http://www.amazon.co.jp/registry/wishlist/2F5D5ZQFOHRD4 古市 聖恵 1991年12月1日生まれ 24歳
  17. 17. はじめまして、きよえしです! Connehito.inc デザイナー ママリ・ママリQのUI設計∼マークアップまで Twitter : @kiyoe_furuichi http://www.amazon.co.jp/registry/wishlist/2F5D5ZQFOHRD4 古市 聖恵 1991年12月1日生まれ 24歳 _人人人人人_ > 誕生日 <  ̄Y^Y^Y^Y ̄
  18. 18. ド平日でしかもタスクが!( ̂q̂ )
  19. 19. コレで祝ってやってください!( ̂ô )
  20. 20. \じゃんっ/ ・友達からリアルタイムに   バースデーメッセージが届く! ・みんなで書き込むとワイワイ感! ・書き込み版をみんなにシェアできる! ・人見知りでもそっと投稿できる! 誕生日お祝いアプリ http://kiyoe.github.io/birthday/書き込む http://kiyoe.github.io/birthday/ birthday_card/ 祝われる人
  21. 21. ・メッセージフォームに想いを書き綴って   ください。書いてくれただけ喜びます。 書き込む人 \ お祝いしよう /
  22. 22. \ うれしい / 祝われる人 ・リアルタイムにメッセージが届くのをみて   にやにやできます。
  23. 23. 書き込む人 祝われる人 デモ
  24. 24. ・ドラゴン(バグ)を倒す ・SNS連携でだれでも作れるようにする ・インタラクティブなアニメーションで  もっとおめでたい感を演出したい 今後の展開
  25. 25. 仕組み \ ほとんどサンプル! / 「自動読み込みチャット」を参考にしました https://github.com/milk-cocoa/endless-chat
  26. 26. こんなかんじ( ゆるっと )
  27. 27. こんなかんじ( ゆるっと ) ds.on("push", function(pushed) { renderMessage(pushed, true); }); escapeHTML(message.value.content) if (content && content !== "") { ds.push({ title: "タイトル", content: content, userIcon: userIcon, }, function (e) {}); } データの監視・受け渡しが 数行のコードでできる!(かんたんすごい)
  28. 28. つくって、体験してみた感想 • 基本はチャットのロジックなのでほんとに楽につ くれちゃいました…。 • でもほんとに数行の工夫と、デザインでここまで アプリケーションが作れるってことにすごくワク ワクを感じました!ちょうワクワクした! 「やってみた感想(本番時に考える)」
  29. 29. 思いついた アイデアを 具現化!
  30. 30. ご静聴・お祝い ありがとうございました! Connehito.inc デザイナー 古市聖恵 @kiyoe_furuichi

×