JavaScript
three.js
jThree
milkcocoa

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

More than 3 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


まとめ

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