フロントエンドシェアこんにちは、エンジニアののびすけです。僕はインタラクティブコンテンツを見たり・作ったりするのが大好きなのですが、今日はそんなコンテンツを制作するときに利用しているBaaSの「milkcocoa」を紹介したいと思います。今回の記事は、インタラクティブコンテンツを作ってみたいけど難しそう...と思っているデザイナーやコーダーなどのノンプログラマ向けの内容となっています。この機会に皆さんもぜひインタラクティブコンテンツの制作にチャレンジしてみてください!(※本記事ではWebコンテンツの話に焦点を当てています。ご了承ください)インタラクティブコンテンツのこれまでまず前提として、WebサービスにおけるインタラクティブコンテンツとはFacebookのメッセージやGoogleハングアウトのビデオ通話などのように参加者がリアルタイムに同じコンテンツを共有できるものChromeMaseのようにPCとスマートフォンが連動するサービスなどをイメージしていただければと思います。今まではバックエンド開発ができないと難しかったインタラクティブコンテンツはWebSocketを使って実装しているものが主流です。最近ではWebSocketを手軽に使えるSocket.ioというNode.js用のライブラリが人気を集めています。Webでインタラクティブコンテンツ制作=Node.jsというイメージがあるのは、このSocket.ioのおかげとも言えるでしょう。Node.jsはサーバ側のプログラミング言語であるため、インタラクティブコンテンツ制作にはサーバ側の知識も必要になってきます。デザイナーやフロントエンドエンジニアだけでの制作は難しいとされていました。BaaS登場でインタラクティブコンテンツ制作に革命が起きる「BaaS」とはバックエンド開発で必要となる部分を提供してくれるサービスの総称です。(個人的な印象ですが、最近はBaaSという言葉も一般化されてきたように思います。)このBaaSのおかげで、デザイナーやフロントエンドエンジニアだけでもインタラクティブコンテンツを制作することが可能になったと言えます。今回紹介する「milkcocoa」もBaaSの1つです。milkcocoaとはhttps://mlkcca.com/Parse.comやFirebaseといったBaaSの有名サービスはさまざまですが、milkcocoaは日本発のサービスです。JavaScript一行に埋め込まれたバックエンドmilkcocoaの魅力は「とにかくシンプル」であることだと個人的に思います。新しいサービスやライブラリを触ってみようというとき、チュートリアルやドキュメントがどれだけ充実していて分かりやすいか、が重要だと個人的には思っています。その点milkcocoaは分かりやすくドキュメントも整っているのでオススメです。5分でチャットアプリを作るそれでは実際にインタラクティブコンテンツ制作を体験してみましょう。今回はチャットアプリを作ってみます。下準備まずは準備を整えましょう。新規登録から登録milkcocoaにアクセスして、右上の新規登録ボタンから新規登録をしましょう。登録したメールアドレスに確認用のメールが届きます。メールに記載されているリンクをクリックして登録完了です。Nameを入力し、作成を押すとアプリIDが生成されます。このアプリIDをあとで使います。コピペで作ってみるmilkcocoaのチュートリアルにあるとおりにコードを書きます。コピペで試してみましょう。board.firstChild);}アプリIDを記述する先ほど取得したアプリIDをmain.jsの一行目の部分に記述しましょう。先ほど取得したアプリIDはio-ji1uhu1f9だったので以下のように記述します。先ほどのindex.htmlを複数のブラウザで開いてみます。message!」を押すと、他のブラウザにもメッセージが共有されているのが分かると思います。投稿した内容はmilkcocoaの管理画面側でも確認することができます。簡単にチャットツールを作ることができました!使いどころなどハッカソンやプロトタイプ作成に持ってこいmilkcocoaは無料で同時接続20コネクションまでのアプリを作ることができます。簡単なプロトタイプ作成などであれば十分間に合いますし、すぐにインタラクティブなコンテンツを作れるので、個人的にはプロトタイプ作成はもちろんハッカソンなどで使わせてもらっています。サーバー開発ができない案件で使えるかもLIGは受託案件が多いのですが、サーバ側を触れられないケース(HTML、CSS、Javascriptなどのみを納品)もたびたびあります。BaaSを活用すれば、このようなケースでもインタラクティブコンテンツを制作ことが可能です。MeetUpでこの辺の話をしてきましたので、補足として発表資料を紹介させていただきます。RyousukeHTMLベースでネイティブアプリを作ることができるnode-webkitとmilkcocoaの紹介をしました。まとめこのように、インタラクティブなコンテンツを制作することは実は簡単にできます。現在milkcocoaはJavascriptクライアントのみに提供されていますが、今後はiOSやAndroid向けのSDKも公開される予定です。公開後は、さらに幅広くインタラクティブコンテンツを制作することができますね。いうわけで、皆さんもmilkcocoaをぜひ使ってみましょう!そして僕は、インタラクティブコンテンツな案件をお待ちしております!(笑)それでは、また。ANALYZE」を導入後、CVR改善に成功した品川美容外科のWeb担当者に話を聞いてきた。POSTLIGへの自由なメッセージお待ちしています頂いたご意見への回答は行っておりません。