Help us understand the problem. What is going on with this article?

milkcocoaのサンプルコードをまとめました

More than 5 years have passed since last update.

milkcocoaでチュートリアルを終えた方、あるいはチュートリアルを無視して何か作ってみるかという方を対象とした記事になります。サンプルはレベル別に分けてます。

基礎編

チャット

spl-chat.png
トップページにあるチャットのサンプルです。チュートリアルのものよりもデザインが良いので、ステップアップをお考えならオススメです。
http://chat.mlkcca-app.com/
https://github.com/milk-cocoa/chat

付箋

spl-fusen.png

JavaScriptでの描画やリアルタイムイベントをどのように同期させるかを学ぶのに最適です。これを改造して、普通にチームで使用するのもオススメです。
http://fusen.mlkcca-app.com/
https://github.com/milk-cocoa/fusen/tree/v0.0.1

埋め込みチャットプラグイン

spl-chat-plugin.png

好きなサイトにチャットを埋め込めます。milkcocoaのさらなる可能性の一端が伺えるので一見の価値ありです。
http://chat-parts.mlkcca-app.com/
https://github.com/milk-cocoa/chat-parts

クリックポイントを共有するライブラリ

spl-shareclick.png
他のユーザーのクリック位置が可視化されます。mousemoveイベントをとってヒートマップを作るなどのマーケティング的利用のアイデアが膨らむサンプルとなっています。
http://shareclick.mlkcca-app.com/
https://github.com/milk-cocoa/shareclick

応用編

ログイン機能付きメモサンプル with vue.js

spl-todomemo.png
ログイン機能を学ぶのに良いです。vue.jsを利用してデータバインディングなども実装しているので、少しレベルの高いアプリケーションに挑戦したいならおすすめです。
http://login.mlkcca-app.com/
https://github.com/milk-cocoa/login

ラミエルシューティング

fps.pngspl-ramiel.png
世界で最も簡単なWebGLライブラリjthreemilkcocoaで作ったブラウザオンラインFPS(シューティングゲーム)です。ステージとか武器変更とかチャットとかあります。OSSとして公開しているので興味があれば参加してみてください。
http://jthreefps.mlkcca-app.com/
https://github.com/milk-cocoa/ramiel-shooting

オセロ

spl-reverse.png
オセロゲームのサンプルです。JSでの少し複雑なロジックの書き方や、先攻後攻を決定するロジックなど見物です。
http://reverse.mlkcca-app.com/
https://github.com/syuhei176/reverse

ダイアグラムエディタ

spl-diagram.png
こちらはCaccoのようなリアルタイムSVG描画サンプルです。チャットとはひと味違うリアルタイムアプリを作りたいならこちらに挑戦してみましょう。
http://drawing.mlkcca-app.com/
https://github.com/syuhei176/diagram

マインドマップチャット

spl-mikumap.png
マインドマップのように発言がつながるリアルタイム掲示板アプリです。URLのハッシュ値による部屋の作成ロジックや、ノード描画ロジックなど応用的な内容を学ぶのに丁度良いサンプルです。
http://mikumap.mlkcca-app.com/
https://github.com/shogochiai/mikumap

まとめ

シングルページアプリケーションからゲーム、さらにはスクレイピングのバックエンドやロギングや画面同期など、様々なユースケースが日々増えています。週末や仕事終わり、あるいは大学の夏休みなど、テンションが上がっているうちに高速でプロトタイピングして、やりたかったことを誰よりも早く形にしてみてはいかがでしょうか。

sgtn
すたーとあっぷえんじにゃー
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした