DocBaseの同時編集機能を実現しているアルゴリズム – KRAY Inc.
はじめに 皆さんはGoogleドキュメントやHackMDを使ったことはあるでしょうか。これらのツールは「ネット越しに同時に複数の人で1つのドキュメントを編集できる」という特徴を持っています。お互いの編集がリアルタイムに反映されるので、相手が何を書くのかを意識することなく、簡単にドキュメントを複数人で編集することができます。これを実現するためには、同時編集に参加しているユーザ全員の編集内容がネットワークの延滞に影響されることなく、それぞれの編集内容をうまい具合にマージして反映してくれるような賢いアルゴリズムが必要になります。今回はこのアルゴリズムに関して書きます。 編集内容のマージとは 編集内容をうまい具合にマージしなければいけないケースを考えてみます。 AさんとBさんが次のドキュメントを同時編集するとします。最初は、お互いブラウザ上では次のように見えています。当然、この状態ではお互いに見え
Electronを使ってJavaScriptでデスクトップアプリを作る
はじめに こんにちは。デスクトップアプリケーションを手軽に作りたいと思ったことはないでしょうか？ 普段Webアプリケーションを開発している場合、 デスクトップアプリケーションを作ろうとすると、開発言語やライブラリがWebアプリケーションとは違うので、別な知識が必要になるのと複数のプラットフォームで動くものを作ろうとすると大変ですね。 そこで、今回はWebアプリケーションのKPTBoardのJavaScriptとCSSのコードを一部流用と修正して、Electronで動かしてみました。 Webアプリケーション版のKPTBoardと違う点 今回はWebアプリのデスクトップクライアントアプリではなくて、単体で動くデスクトップアプリとして作ってます。 複数人には対応してないです。 投稿した内容は、データーベースではなくてアプリのlocalStorageに保存されます。 Electronとは http
ReactとFluxでクライアントサイドの設計
はじめに こんにちは。皆さんはReact使われてますでしょうか？ 今回はReactとFluxについて書きます。 MVCの問題点 詳しくはこちらに書いていますが、MVCでアプリを作った場合は、ModelとViewの間で双方向のデーターフローが作られる可能性があるので理解したりデバックするのが難しくなります。 React単体で使った場合の問題点 子のViewでなにかアクションを起こした結果、親のViewにも変更を伝えてなににかをする場合、子のViewに親のViewのコールバック関数を渡す必要があります。 子のViewの下にさらに、子のViewがあって、アクションが起こった時に親のViewに伝えようとするとコールバックが深くなって複雑になってしまいます。 Flux それを解決できる方法としてFluxです。 Fluxを使うとデーターフローが一方向になります。 やってることはObserverパターン
受託開発しながら自社サービスを作る時に工夫したこと
はじめに クレイはWebシステムやスマートフォンアプリなどの依頼を受けて開発をする受託開発を事業の柱としています。新事業として、DocBaseという情報共有サービスを開発、運営しています。 自社サービスやスマートフォンアプリの開発に何度も挑戦し、失敗と改善を繰り返しながら工夫したことをご紹介したいと思います。 これまで開発した自社サービスやスマートフォンアプリ 「受託開発会社が自社サービスに挑戦する」というのはよくある話ですが、弊社もこの8年間、様々な自社サービスに挑戦してきました。 公開せずに開発途中で断念したものを含めると、全部で11プロジェクトあったようです。 iPhoneアプリ x 4（公開 3） Webサービス x 7（公開 4） iPhoneアプリの総ダウンロード数は318,000、総売上は19,460ドルでした。 Webサービスは次のように寂しい感じですが少しずつ成長が見られ
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
小さなメモから始めて、チームを育てる DocBase の先行登録を開始
弊社で開発している新サービスの先行登録を開始しました。 小さなメモから始めて、チームを育てる情報共有サービスです。 DocBase https://docbase.io ５つの特徴 DocBaseには情報共有を活発にする５つの特徴があります。 すごく簡単にメモを投稿できる 小さなメモをチーム全員で育て、情報の価値を上げられる 複数のメモをまとめて情報を見やすく整理・保存できる 組織の枠を越えて情報を共有できる 強固な暗号化 料金プラン 正式リリース時に公開いたします。 先行登録予約 メールアドレスをご登録いただければ、ベータ公開前にご招待いたします。 公開前にいろいろなチームのご意見を参考に、より情報共有が活発になるようなサービスにしていきたいと思っています。 https://docbase.io 画面を一部公開！
MVCについて考える
はじめに こんにちは。今年の3月からKRAYに入社した阿部です。 ブログには初登場になります。 今日は、昨今のアプリケーション開発では誰もが耳にしているであろうMVCパターンを取り上げます。(以下MVCと呼びます) 開発者それぞれで理解や解釈が違っていることが多く、しばしば議論を呼び起こします。「ぼんやり」と理解したままの方も多いのでは無いでしょうか？ 私もある程度、開発で実践してみるまでは、なかなか良い形でMVCを適用することが出来ずにいました。皆様のMVCへの理解を少しでもクリアに出来れば幸いです。 定義をおさらい MVCは図で示されることが多いですね。 Wikipediaを見るとMVCの典型的な相関図が掲載されています。 (Wikipedia日本語版 Model View Controller より) Wikipedia英語版にも掲載されているこの図ですが、かなり上のレイヤから見た考
組織のカイゼン活動の紹介
クレイの天野です。 弊社で行っている組織改善の取り組みを紹介します。 何かの参考になればと思います。 新しい取り組み 2013年7月にクレイの第7期が始まってから社内で3つの取り組みを開始しています。 グロースハックチームを結成 KPTキャリアデザイン 社内の情報共有を活発にしてチーム力を強化 グロースハックチームを結成 第7期が始まってから、開発、営業活動、組織について様々な改善を行い、クレイ自体の成長を加速させるためのチームを結成しました。 今風にプロジェクト名をグロースハックとしています笑 どんな活動？ 最初はどう活動していくか迷って試行錯誤していましたが、会社の問題点の因果関係を洗い出し、元になっている大きな問題をいくつか見つけました。（この記事で一部公開しています。） 以下はグロースハックチームで決まった活動です。 理想の職場とするためのKRAYパターンを作る 自社の強みを価値に
Webサイト＆WebアプリのRetina対応方法まとめ
こんにちは。 会社からMacBookPro Retinaディスプレイモデルを支給されました浅海です。 Retinaディスプレイ、非常に快適なのですが、Retinaディスプレイに最適化されていないWebページやアプリケーションでは、ビクセルベースで作られている部分がすこしぼけたように見えてしまいます。 特に文字を画像にしている場合なんかは、かなり気になります。 Retinaディスプレイは既にiPhoneで使われているほか、一部のAndroidもRetina相当の解像度を持っているモデルが登場しており、モバイルWebサイトやWebアプリがRetinaディスプレイを意識した作りになっていることはよく見られるようになりました。 これからもPCなど、Retinaディスプレイ対応のニーズは増えるだろうと思い、対応方法をまとめました。 目次 imgタグ CSS JavaScript Google Map
Git初心者に捧ぐ！Gitの「これなんで？」を解説します。
はじめましてこんにちは、今年新卒でKRAYに入社しました亀井と申します。 会社のみなさんからは「あさちゅん」と呼ばれております。どうぞよろしくお願いします。 突然ですが、みなさん使ってますか？ Git。 KRAYではバリバリ活躍してるGitですが、 「よくわからない……」と頭を抱えてる方も多いですね。 わたしも抱えてます。 正直、KRAYに入社するまでターミナルを使ったことすらなく、 Gitも入社してから使いだしたので初心者もいいところです。 そんなわたしが1日約200回×3ヶ月ターミナルでGitコマンドを打ち続けて やっとわかってきた、Gitの「これなんで？」を解説します。 主にGit初心者、Gitについて理解を深めたい人向けです。 もくじ なんでcommitする前にaddしなきゃいけないの？ ブランチってなんのために分けるの？ HEADってなんなの？ 消したファイルもコミットしなきゃい
トップページ
クレイはwebシステムの会社です。「お客様も含めたみんなで考え、みんなで作り、みんなで価値を生み出す」ことを大切にしています。 そんなクレイの3つの強みについてご紹介します。
受託開発にアジャイルは適用できるか？
3つの大事なこと まず全ての受託開発に適用できるかというと、それは難しいと考えています。 これまでクレイに発注いただいた開発で、次のような案件に適用してきました。 Webサービス スマートフォンアプリ プロトタイプ、研究開発 要件が曖昧だったり、仕様が変わりやすいもの、市場の変化が大きいものなどですね。 次に規模ですが大きくても3，4人で半年から一年程度の小規模な開発が多かったです。 ただこれまでいくつかのプロジェクトを進めてきて、向き不向き以上に大事なことがあるとわかりました。 特に次の3つが進めていくために大事なことと感じています。 クライアントにプロジェクトに責任を持って参加してもらう アジャイルに適した契約にする 開発プロセスを出来るだけ透明化する クライアントにプロジェクトに責任を持って参加してもらう 「クライアントにプロジェクトに責任を持って参加してもらう」とはどういうことでし
Rails 4のturbolinksについて最低でも知っておきたい事
Rails 4のturbolinksについて最低でも知っておきたい事 （追記）turbolinksに関するセキュリティ上の懸念について turbolinksとは、ページ遷移をAjaxに置き換え、JavaScriptやCSSのパースを省略することで高速化するgemで、Rails 4からはデフォルトで使用されるようになります。 高速化は大歓迎なのですが、JavaScriptのイベントの起き方が変わるため、Rails 3までの書き方をしているとまず間違いなく問題が起きます。しかも、Rails 4ではデフォルトの機能ですので、最新版を使いたいなら必ず知っておかなければいけません。 本エントリではturbolinksを使うために絶対に知らなければいけないことを分かりやすく紹介したいと思います。 動作 turbolinksの動作は、すごく大雑把に言うと以下の通りです。 リンクのclickイベントをフッ
iPhoneアプリ開発におけるデバッグのTIPS
2011-2-28 NSLogの出力を分りやすくするを修正しました。 新型MacBookAirをケーキ入刀用に買おうとしてるみなさんこんにちは。ダニーです。 iPhoneアプリ開発をしてるとメモリ周りで落ちることがあってデバッグするのが大変ですね， 今回はデバッグについて紹介したいと思います。 CGRectの中身を表示する CGRect rect = CGRectMake(13, 30, 100, 200); NSLog(@"%f %f %f %f", rect.origin.x, rect.origin.y, rect.size.width, rect.size.height); NSStringFromCGRectを使うと簡潔になります。 CGRect rect = CGRectMake(13, 30, 100, 200); NSLog(@"%@", NSStringFromCGRec
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を利用した様々なサンプルページやアプリケーシ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
