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

はじめてのMilkcocoa

＼ ２時間目 ／

Connehito.inc デザイナー 古市聖恵 @kiyoe_furuichi

はじめまして、きよえしです！

Connehito.inc デザイナー ママリ・ママリQのUI設計～マークアップまで

Twitter : @kiyoe_furuichi

http://www.amazon.co.jp/registry/wishlist/2F5D5ZQFOHRD4

古市 聖恵 1991年12月1日生まれ 24歳

沖縄県那覇市出身で、就職を機に上京 渋谷のスタートアップで１年デザイナーをして 今年の４月に転職

お知らせ

1991年12月1日生まれ 24歳妊活・妊娠・出産・子育ての疑問を解決！

家族の毎日をもっと笑顔に

お知らせ

妊活・妊娠・出産・子育ての疑問を解決！

家族の毎日をもっと笑顔に

一緒にサービス創りませんか？

エンジニア・デザイナー WANTED!!

https://www.wantedly.com/companies/connehito

前回のMilkcocoa girls!では

• とりあえずHelloworldしてみた • サンプルをみながら色々やってみる

・スマホの傾きでブラウザの要素が変化する ・TwitterAPI 連携でツイートを取得してみる

やってみてわかったこと

• 基本むずかしいロジックを書かなくてもOK • サンプルが充実している • 動くからたのしい！

「 なんかできるじゃん！⁽(ી₍₍⁽⁽(ી( o )ʃ)₎₎⁾⁾ʃ)₎₎ 」

やってみてわかったこと

• 基本むずかしいロジックを書かなくてもOK • サンプルが充実している • 動くからたのしい！

「 なんかできるじゃん！⁽(ી₍₍⁽⁽(ી( o )ʃ)₎₎⁾⁾ʃ)₎₎ 」

思いついた アイデアを 具現化！

Milkcocoa × 思いついた アイデアを 具現化！

思いついた アイデアを 具現化！

Milkcocoa ×

＼ デザイナーの腕の見せどころ！／

今回トライしたこと

サンプルをマッシュアップして Webアプリつくって公開する！

＼ ２時間目 ／

Connehito.inc デザイナー 古市聖恵 @kiyoe_furuichi

はじめてのMilkcocoa

12月１日＼ 突然ですが、なんの日か知ってますか？ ／

答えは…

答えは…

答えは…

はじめまして、きよえしです！

Connehito.inc デザイナー ママリ・ママリQのUI設計～マークアップまで

Twitter : @kiyoe_furuichi

http://www.amazon.co.jp/registry/wishlist/2F5D5ZQFOHRD4

古市 聖恵 1991年12月1日生まれ 24歳

はじめまして、きよえしです！

Connehito.inc デザイナー ママリ・ママリQのUI設計～マークアップまで

Twitter : @kiyoe_furuichi

http://www.amazon.co.jp/registry/wishlist/2F5D5ZQFOHRD4

古市 聖恵 1991年12月1日生まれ 24歳＿人人人人人＿ ＞　誕生日　＜ ‾Y^Y^Y^Y‾

ド平日でしかもタスクが！( q )

コレで祝ってやってください！( o )

＼じゃんっ／

・友達からリアルタイムに 　　バースデーメッセージが届く！ ・みんなで書き込むとワイワイ感！ ・書き込み版をみんなにシェアできる！ ・人見知りでもそっと投稿できる！

誕生日お祝いアプリ

http://kiyoe.github.io/birthday/書き込むhttp://kiyoe.github.io/birthday/birthday_card/祝われる人

・メッセージフォームに想いを書き綴って 　　ください。書いてくれただけ喜びます。

書き込む人

＼ お祝いしよう ／

＼ うれしい ／

祝われる人

・リアルタイムにメッセージが届くのをみて 　　にやにやできます。

書き込む人 祝われる人

デモ

・ドラゴン（バグ）を倒す ・SNS連携でだれでも作れるようにする ・インタラクティブなアニメーションで 　もっとおめでたい感を演出したい

今後の展開

仕組み＼ ほとんどサンプル！ ／

「自動読み込みチャット」を参考にしました

https://github.com/milk-cocoa/endless-chat

こんなかんじ( ゆるっと )

こんなかんじ( ゆるっと )

ds.on("push", function(pushed) { renderMessage(pushed, true); });

escapeHTML(message.value.content)

if (content && content !== "") { ds.push({ title: "タイトル", content: content, userIcon: userIcon, }, function (e) {}); }

データの監視・受け渡しが 数行のコードでできる！(かんたんすごい)

つくって、体験してみた感想

• 基本はチャットのロジックなのでほんとに楽につくれちゃいました…。

• でもほんとに数行の工夫と、デザインでここまでアプリケーションが作れるってことにすごくワクワクを感じました！ちょうワクワクした！

「やってみた感想（本番時に考える）」

思いついた アイデアを 具現化！

ご静聴・お祝い ありがとうございました！

Connehito.inc デザイナー 古市聖恵 @kiyoe_furuichi