LoginSignup
71
70

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-09-29

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

まとめ

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

71
70
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
71
70