DocBaseの同時編集機能を実現しているアルゴリズム – KRAY Inc.
はじめに 皆さんはGoogleドキュメントやHackMDを使ったことはあるでしょうか。これらのツールは「ネット越しに同時に複数の人で1つのドキュメントを編集できる」という特徴を持っています。お互いの編集がリアルタイムに反映されるので、相手が何を書くのかを意識することなく、簡単にドキュメントを複数人で編集することができます。これを実現するためには、同時編集に参加しているユーザ全員の編集内容がネットワークの延滞に影響されることなく、それぞれの編集内容をうまい具合にマージして反映してくれるような賢いアルゴリズムが必要になります。今回はこのアルゴリズムに関して書きます。 編集内容のマージとは 編集内容をうまい具合にマージしなければいけないケースを考えてみます。 AさんとBさんが次のドキュメントを同時編集するとします。最初は、お互いブラウザ上では次のように見えています。当然、この状態ではお互いに見え
Electronを使ってJavaScriptでデスクトップアプリを作る
はじめに こんにちは。デスクトップアプリケーションを手軽に作りたいと思ったことはないでしょうか？ 普段Webアプリケーションを開発している場合、 デスクトップアプリケーションを作ろうとすると、開発言語やライブラリがWebアプリケーションとは違うので、別な知識が必要になるのと複数のプラットフォームで動くものを作ろうとすると大変ですね。 そこで、今回はWebアプリケーションのKPTBoardのJavaScriptとCSSのコードを一部流用と修正して、Electronで動かしてみました。 Webアプリケーション版のKPTBoardと違う点 今回はWebアプリのデスクトップクライアントアプリではなくて、単体で動くデスクトップアプリとして作ってます。 複数人には対応してないです。 投稿した内容は、データーベースではなくてアプリのlocalStorageに保存されます。 Electronとは http
受託開発しながら自社サービスを作る時に工夫したこと
はじめに クレイはWebシステムやスマートフォンアプリなどの依頼を受けて開発をする受託開発を事業の柱としています。新事業として、DocBaseという情報共有サービスを開発、運営しています。 自社サービスやスマートフォンアプリの開発に何度も挑戦し、失敗と改善を繰り返しながら工夫したことをご紹介したいと思います。 これまで開発した自社サービスやスマートフォンアプリ 「受託開発会社が自社サービスに挑戦する」というのはよくある話ですが、弊社もこの8年間、様々な自社サービスに挑戦してきました。 公開せずに開発途中で断念したものを含めると、全部で11プロジェクトあったようです。 iPhoneアプリ x 4（公開 3） Webサービス x 7（公開 4） iPhoneアプリの総ダウンロード数は318,000、総売上は19,460ドルでした。 Webサービスは次のように寂しい感じですが少しずつ成長が見られ
DockerコンテナをCapistranoでデプロイ
開発環境と運用環境の差異 Railsアプリの開発をMacでしている人は多いと思います。しかし本番では大抵Linuxマシンで運用するため、実行環境の違いから問題が発生することがあります。特にサードパーティ製ライブラリやツールを使う場合、MacとLinuxで同じ動作をする保証はどこにもありません。また、開発にLinuxマシンを使っていたとしても、本番と全く同じ構成で開発するのは難しいでしょう。 Dockerを使うと開発から運用まで同じ環境を使え、しかもハードウェア仮想化よりも遥かに軽量です。そこで、私が今KRAYで担当しているプロジェクトでは開発から本番まで全ての環境でDockerを使えるようにしました。 それぞれの環境で解決すべき課題がありましたが、今日は本番環境にデプロイする仕組みを紹介します（KRAYでインテグレーション環境と呼ばれる環境についてはDockerホストをプロジェクトや権限で
[Rails]ビューキャッシュにTokyoTyrantを使ってHTMLを高速に表示する
はじめに 今回はRailsをTokyoTyrantでビューキャッシュする方法についてです。 Railsのキャッシュ機能には、オンメモリ、ファイル、drb、Memcacheから好きなストレージを選んで利用することができます。高速で永続性可能なKeyValueストアのTokyoTyrantをプロジェクトで採用することも多いので、ビューキャッシュにTokyoTyrantを使えないか試してみました。 TokyoTyrant http://fallabs.com/tokyotyrant/ TokyoTyrantのインストール TokyoTyrantがまだインストールされていない場合は、各環境に合った方法でインストールしてください。 Macの場合 % sudo port install tokyotyrant or … % brew install tokyotyrant CentOSの場合 % su
Rails 4のturbolinksについて最低でも知っておきたい事
Rails 4のturbolinksについて最低でも知っておきたい事 （追記）turbolinksに関するセキュリティ上の懸念について turbolinksとは、ページ遷移をAjaxに置き換え、JavaScriptやCSSのパースを省略することで高速化するgemで、Rails 4からはデフォルトで使用されるようになります。 高速化は大歓迎なのですが、JavaScriptのイベントの起き方が変わるため、Rails 3までの書き方をしているとまず間違いなく問題が起きます。しかも、Rails 4ではデフォルトの機能ですので、最新版を使いたいなら必ず知っておかなければいけません。 本エントリではturbolinksを使うために絶対に知らなければいけないことを分かりやすく紹介したいと思います。 動作 turbolinksの動作は、すごく大雑把に言うと以下の通りです。 リンクのclickイベントをフッ
JavaScript 3DレンダリングエンジンのThree.jsを試す
こんにちは。 KRAYアルバイトの浅海です。 今回は、最近ちまたで噂のThree.jsで遊んでみようとおもいます。 http://github.com/mrdoob/three.js webgl対応のブラウザで見ている方は、右上に3Dのボックスが表示されていると思います。 Three.jsを使えば、このようなことを簡単にJavascriptで実現できるのです。 半信半疑で使ってみたところ、たしかにThree.jsでは、3D特有の行列計算や数学的思考をせずとも、3Dを表示、操作することができました。 「ちょっとのプログラムで3Dができる。」 この面白さを皆さんに届けたいです。 目次 立方体を表示する 光をあてる テスクチャを貼り付ける マウスで回転させる マウスで移動させる クリック判定する Three.js web上には、HTML5のcanvasを利用した様々なサンプルページやアプリケーシ
rails3 + html5 canvasでお絵かき投稿サイトを作ろう！
はじめましてこんにちは。 KRAYアルバイトの浅海です。 html5のcanvasを使ってお絵かき投稿サイトを作ってみようと思います。 初めてブログ記事を書くということで気合が入りました。 ちょっと長めですがお付き合い下さい。 機能 お絵かき投稿サイトの必要最低限な機能って？ ざっと下のような機能を入れてみます。 絵を描ける 絵を消せる 描画を一回分戻れる 線の太さを変えられる 線の色を変える 絵を投稿できる 投稿された画像の一覧を表示できる → 完成見本はこちら完成見本の公開は終了致しました。 絵を描ける HTML5のcanvasにマウスの軌道に線を引いていくわけです。 canvasでのマウス軌道の描き方は、 ・mousemoveイベント発生時に点をプロット という手段が真っ先に思い浮かぶと思いますが、これは、以下の様になります。 これではお話になりません。 なので、点ではなく線を引くこ
Pusherでお手軽WebSocket - iPhoneから加速度をリアルタイム送信
はじめに タイガーマスクが貢いでくれるのを待っている皆さんこんばんは。 前振り考えるのが面倒なので結論から書くと、今日はWebSocketについて扱おうと思います。iPhoneを使って↓こんなサンプルを作ってみました。 Safari上のJavaScriptと、WebSocketをWebサービスとして提供しているPusherを利用して、サーバサイドの言語を使わずに実装しています。 WebSocketってなぁに？ httpおさらい Webの通信に使われる皆さんお馴染みのhttpは、クライアント（ブラウザとかね）とサーバが常に「問い合わせ（リクエスト）と返答（レスポンス）」のペアでやりとりをおこないます。 クライアント(FirefoxやChromeなど): 「情報ください」 サーバ(Apacheやnginxなど): 「はい、どうぞ」 このシンプルな仕組みがhttpの強みであり、URLと共にここま
[Rails] Nested Object Forms を使って多対多の関係をスマートに編集
はじめに もりやまです。 先月の震災の日の記事以来となってしまいました。まずは被災されたみなさまに、心からお見舞い申し上げます。 弊社ではだにーが宮城県出身なのですが、ご家族には大事なかったようで一安心です。 昨夜も大きな余震があってまだまだ落ち着かないですが、みんなでまた再建しましょう！ さて今回は、導入されたのは Rails 2.3 なのでもう目新しくもないですが、has_many :through で多対多に関連付けされたモデルを、Nested Object Forms を使って編集する方法がようやく理解できたのでまとめてみました。 そもそも Nested Object Forms って何？ あるモデルを編集するためのフォームの中に、そのモデルと has_many 等で関連付けされた別のモデルを合わせて編集できるようにするための機能です。 これを自力でやろうとすると、 関連付けされた
そろそろnode.jsについて一言書いておくか | KRAY Inc
はじめに 毎年サーバーサイドJavaScriptが流行ると言ってるみなさんこんにちはダニーです。 ということで、node.jsをはじめてみました。 Twitter Streaming APIで取得したデーターをWebSocketで 接続したクライアントに出力するデモを作成したので紹介したいと思います。 今回のデモについて 今回作成したデモは node.jsのHttpClinetでTwtter Streaming APIでTwtterからデータを取得して、 node.jsのWebSocket Serverでそのデータを接続してきたWebSocket対応ブラウザに送信するということを やっています。 Twitter Streaming APIで取得できるようにする。 動かすのにhttp-basic-authが必要です。 npm install http-basic-auth streaming
WordPressを100倍速くする！ MySQLの調整やnginx proxy cache | KRAY Inc
[追記１] 最後で説明しているproxy cacheの設定を修正しました。 [追記２] nginx proxy cacheでキャッシュしない場合の処理を変更しました。 [追記３] スマートフォンや携帯で閲覧した時にキャッシュしない設定を追加しました。 はじめに 大げさな題名ですが、今回はWordPress単体を速くするのではなく、データベースやWebサーバなどの調整、またnginxのproxy cache機能を使って速くする話になります。 サイトの構成によっては、proxy cacheは使えないかもしれませんが、使わなくても5倍程度速くすることはできましたので、参考にしていただければと思います。 今回行うチューニング一覧 DBを最適化するプラグインを導入する APCを導入してPHPを速くする MySQLを速くする 重いWordPressプラグインを外す nginx+FastCGIにする W
[Rails3] ドラッグ&ドロップでファイルアップロード
いい加減ドラッグ＆ドロップでファイルをアップしたい！ あまのです。 社内プロジェクトで久々にRubyとRailsをさわりました。 やっぱりRubyは書きやすくていいですね。 さて今回はドラッグ＆ドロップで複数ファイルのアップロードです。 前々から、「そろそろブラウザでもドラッグ＆ドロップでファイルアップロードしたい」と思ってたので、今回試しに作ってみました。 参考にしたサイト 篳篥日記 http://d.hatena.ne.jp/hichiriki/20101016 デモ 今回作るサンプルのデモを最初にお見せします。 chromeやSafari, Firefox3.6でUpload a fileに画像ファイルをドラッグ＆ドロップしてみてください。 目標 最近のブラウザではドラッグ＆ドロップでアップロード 対応していないブラウザは普通にファイルアップロード 複数ファイルに、もちろん対応 He
![[Rails3] ドラッグ&ドロップでファイルアップロード](https://cdn-ak-scissors.b.st-hatena.com/image/square/ed1b526f79d9fc8af139ada5919dcc95172573e5/height=288;version=1;width=512/https%3A%2F%2Fkray.jp%2Fwp%2Fwp-content%2Fuploads%2F2010%2F11%2FDragDrop.png)
Rails3でどう書けばいいかわからない時、参考になる７つのURL
はじめに Rails3.0.0がリリースされて、2ヶ月（2010年10月末現在）。皆さんRails3ライフを満喫していますか？ Rails3がはじめてという方、マニュアルやリファレンス探しに苦労されていませんか？ Rails3でコードを書いていると、どうかけばいいのかな？ということもしばしばあって、自分なりに参照するサイトなどがまとまってきたので、今日は自分が参照する順番に、URLを晒していきます。少しでも参考になれば幸いです。 もくじ Rails Searchable API Doc Google – Search by date Rails 3 Ropes Course Railscasts – rails-3.0 episodes Ruby on Rails Guides Github – Search: rails3 example O’REILLY – Rails3 in a N
実例でみるiPhoneアプリ内課金(In App Purchase) アプリへの組み込み
はじめに あまのです。 「iTunes Connectへの登録」から一ヶ月が経ってしまいましたが、今回はアプリへの組み込みについて書きたいと思います。 最近、Wall Calendar LiteというGoogle Calendarのスケジュールを壁紙にするアプリにも組み込みましたので前回のブログを見直すこともできました。 App Storeへのアクセスの流れ アプリ内課金はStore KitというAPIを利用して、App Storeとやり取りを行います。 具体的にGood Choiceの「機能制限を解除」ボタンが押された時のコードを元に説明します。 流れとしては次のようになっています。 「機能制限を解除」ボタンを用意 アプリ内課金が許可されているかを確認 プロダクトの取得処理を開始 プロダクト情報をApp Storeから取得 プロダクト購入処理を開始 プロダクト購入処理結果の取得 購入完了
iPhone アプリ開発で使える Framework の作り方
もりやまです。前回は iPhone / iPad アプリ開発で使える Objective-C のライブラリをいくつか使ってみました。 今回は、自分で作ったライブラリを Framework として使う方法をご紹介します。 ライブラリ用にプロジェクトを準備する 新規プロジェクトで、iPhone OS の Library から「Cocoa Touch Static Library」を選択します。 プロジェクトを作ると以下のような状態で生成されます。ここでは「KrayKit」という名前で作りました。 まずは不要なファイルの削除と、ファイルシステム上のプロジェクトのディレクトリ構成を整備します。 Classes を削除 Include, Resources, Sources を作成 次に、Xcode 上でプロジェクトの構成を整備します。 Classes を削除 Foundation.framewor
実例でみるiPhoneアプリ内課金(In App Purchase) iTunes Connectへの登録
はじめに あまのです。 先日Good Choiceというアプリをバージョンアップしました。有料版と無料版の両方を提供しつつ、無料版ではアプリ内で課金を行うことで、有料版と同等の機能にバージョンアップできるようになっています。（20%オフ以上のお買い得品リストを表示する機能） 今回は大きな機能でありながら、イマイチ実例のドキュメントが見当たらないアプリ内課金（In App Purchase）について説明したいと思います。 アプリ内課金とは？ アプリ内課金（In App Purchase）はiPhoneアプリ内でデジタルコンテンツなどを直接販売できる機能のことです。コンテンツ以外にも追加機能や月々の利用料を課金することができます。 無料アプリでもアプリ内課金は使えるため、基本機能は無料で提供して、新しいコンテンツのみを有料にするなどビジネスの幅が広がったと思います。 アプリ内課金は二つのタイプ
BackupライブラリでプロジェクトのバックアップもD.R.Y化しよう
はじめに こんにちは芳賀@func09です。 何かプロジェクトをリリースする時、必ずといっていいほど必要なのはデータの定期バックアップですね。 必ずといっていいほど必要なのに、必ずといっていいほど忘れがちで、後回しにされがちで、 リリース前に「あ、バックアップのバッチ処理書かなきゃ・・」みたいな感じで、毎回同じようなシェルスクリプトを書いてませんか？僕はそんな感じです。 バックアップだってD.R.Y（Don’t repeat yourself）ということで、サクっと労力をかけずに終わらせたいなぁと思っていた時に見つけたのがBackupという名前のGemです。そのまんまですね。 Backup(RubyGem)とは？ Backup（ http://github.com/meskyanichi/backup ）はRubyで書かれたUnixとRails環境のためのライブラリです。 データベースの内
１時間でツイッターサービスを作ろう！
はじめに どうもKRAYの芳賀です。 今日はツイッターサービスをスピーディーかつ無料で作るお話です。 僕は日頃趣味でツイッターサービスを作っているのですが、アイデアを着想したその日のうちにプロトタイプを作って動かすことができるくらいにノウハウが溜まってきました。 仕事が終わってからのプライベートな時間だけでも、１週間から１か月もあれば１つサービスがリリースできる感覚がつかめたので、必要最低限の機能を備えたサービスを短時間で作れないだろうか？と時間を計測しつつ実践してみたところ、なんと１時間で完成できたので、その手順を紹介します。 開発の流れ まずは開発の流れを説明します。 ツイッターアカウントの用意 まずツイッターのアカウントが必要になるので、まだ持っていなければ取得しましょう。サービス用に改めて取得してもいいですね。 サーバの用意 作成したウェブアプリを設置するサーバを準備します。PHP
モダンブラウザで使う「Geolocation API」前編
（2011/04/15 追記） 広義の HTML5、狭義の HTML5 について追記しました もりやまです。 最近比較的余裕があるので色々調べたりしているのですが、今回はブラウザの位置情報取得機能（Geolocation API）について調べてみました。 携帯端末では昔から結構使われていましたが、今回調べてみたところ、ほとんどのモダンブラウザが対応していることがわかりました。 というわけで、ここにまとめてみます。 Geolocation API とは ホストデバイスに関連する地理的な位置情報へのスクリプトによるアクセスを提供する API です。 ザックリ言ってしまうと、ブラウザ上で動く JavaScript から現在の位置情報を取得するためのAPI の仕様、ということです。 W3C で策定中の規格で、現在は最終草案（Last Call Working Draft）の段階です。 よく「HTM
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
