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サービスは次のように寂しい感じですが少しずつ成長が見られ
Amazon S3のStatic Web Hostingにアクセス制限をかけて使ってみる
残暑が長引いていますが、朝晩だいぶ涼しくなってきましたね。秋になり、6月から育ててきたヒマワリが枯れました。水をやらなかったからですが。 S3を利用したWebホスティング ということでAmazon S3のStatic Web Hostingです。Webサーバ不要で静的サイトを設置できます。便利です。ベースがS3であるが故、安価、安定、そしてどんなにアクセストラフィックが増えても重くなりにくい（従量課金ですが、Webサーバでスケールアウトするより遙かに低コストです）、などの特長を持ちます。連携できるCMSも増えてきました。 ここでは簡単に初回設定、並びにstaging環境などで必要となる、アクセス制限の方法について書いてみたいと思います。 利用開始までの手順 登場から日が経っていることもありご存じの方も多いと思いますが、Static Web Hostingを使うまでの流れをおさらいしておきま
Rails 4のturbolinksについて最低でも知っておきたい事
Rails 4のturbolinksについて最低でも知っておきたい事 （追記）turbolinksに関するセキュリティ上の懸念について turbolinksとは、ページ遷移をAjaxに置き換え、JavaScriptやCSSのパースを省略することで高速化するgemで、Rails 4からはデフォルトで使用されるようになります。 高速化は大歓迎なのですが、JavaScriptのイベントの起き方が変わるため、Rails 3までの書き方をしているとまず間違いなく問題が起きます。しかも、Rails 4ではデフォルトの機能ですので、最新版を使いたいなら必ず知っておかなければいけません。 本エントリではturbolinksを使うために絶対に知らなければいけないことを分かりやすく紹介したいと思います。 動作 turbolinksの動作は、すごく大雑把に言うと以下の通りです。 リンクのclickイベントをフッ
Herokuのように簡単に使えるDockerベースのPaaS
はじめに みなさんDocker使われてますでしょうか？ 自分はDockerをよく使ってるのですが、使ってるうちにいろいろと不満が出てきました。 デプロイスクリプトとか書かないでデプロイしたい Dockerfileを書くとメンテしないといけなくなるので、書かないで使いたい 組織とかで使う場合に、それぞれが各々のDockerfileを書くことになるので、一貫性を保つのが難しい Docker単体だとImmutable Infrastructureの仕組みを自前で作らないと実現できない あんまり設定とかしなくてもRailsアプリケーションが、すぐ動かせる環境を構築したい 要するにHerokuのようなPasSを開発サーバーに建てることができればいいなと思ってたわけです。 そこでDockerベースのHerokuのようなPaaSを実現できるDokkuを試してみました。 先日DokkuをフォークしたDok
Vagrantとchef-soloでお気楽環境構築
Engine Yardさんの勉強会に行ってきた 皆さんこんにちは。 2/22に開催されたChefの勉強会に行ってきました。 事務所の引っ越しなどでバタバタしていたので時間が経ってしまいましたが、参加して分かったことを元に、本エントリーではvagrantの仮想環境をchef-soloで設定できるようにしてみたいと思います。 というかはてブのトップがこのネタばかりで、なんというか旬を逃した感が拭えないんですけど…、よろしくおつきあいください。 どうしてchefとvagrant？ 以前からちょいちょい動作確認環境のをvagrantで用意していました。で、毎回環境作るのがめんどいぞと。頻度がそんなになかったんで、ある意味我慢してました。一方で、社内の環境を chef-solo 使って環境構築することはあったんですけど、管理する対象はvagrantで構築したのとは別の環境だったり。。。ちょっとちぐは
Git初心者に捧ぐ！Gitの「これなんで？」を解説します。
はじめましてこんにちは、今年新卒でKRAYに入社しました亀井と申します。 会社のみなさんからは「あさちゅん」と呼ばれております。どうぞよろしくお願いします。 突然ですが、みなさん使ってますか？ Git。 KRAYではバリバリ活躍してるGitですが、 「よくわからない……」と頭を抱えてる方も多いですね。 わたしも抱えてます。 正直、KRAYに入社するまでターミナルを使ったことすらなく、 Gitも入社してから使いだしたので初心者もいいところです。 そんなわたしが1日約200回×3ヶ月ターミナルでGitコマンドを打ち続けて やっとわかってきた、Gitの「これなんで？」を解説します。 主にGit初心者、Gitについて理解を深めたい人向けです。 もくじ なんでcommitする前にaddしなきゃいけないの？ ブランチってなんのために分けるの？ HEADってなんなの？ 消したファイルもコミットしなきゃい
JavaScriptでLeapMotionアプリを作る方法
こんにちは。クレイの浅海です。 いま話題のLeapMotionとJavascriptを使って、空中でピアノを演奏できるアプリを作りました。 まだLeapMotionを初めて数日なので勘違いしている部分もあるかもしれませんが、JavaScriptでLeapMotion対応アプリをどのように作るのかについて、気づいたことを紹介します。 目次 デモ leap.jsの用意 イベントループ Frameオブジェクト frame.fingers frame.hands frame.gestures circle swipe keyTap screenTap 感想 デモのコード デモ まずは実際に動かしている動画を御覧ください。 空中に手をかざすだけで、ピアノを演奏することができます。 音の再生にはMIDI.jsを使用しています。 ※ 手を3Dで表示している部分は、LeapMotion標準のビジュアライザ
受託開発にアジャイルは適用できるか？
3つの大事なこと まず全ての受託開発に適用できるかというと、それは難しいと考えています。 これまでクレイに発注いただいた開発で、次のような案件に適用してきました。 Webサービス スマートフォンアプリ プロトタイプ、研究開発 要件が曖昧だったり、仕様が変わりやすいもの、市場の変化が大きいものなどですね。 次に規模ですが大きくても3，4人で半年から一年程度の小規模な開発が多かったです。 ただこれまでいくつかのプロジェクトを進めてきて、向き不向き以上に大事なことがあるとわかりました。 特に次の3つが進めていくために大事なことと感じています。 クライアントにプロジェクトに責任を持って参加してもらう アジャイルに適した契約にする 開発プロセスを出来るだけ透明化する クライアントにプロジェクトに責任を持って参加してもらう 「クライアントにプロジェクトに責任を持って参加してもらう」とはどういうことでし
JavaScriptのみ！Meteorで作る簡単リアルタイムWebアプリ
こんにちは。 この春に無事大学を卒業したので、KRAYアルバイトから社員に転職しました、浅海です。 最近、JavascriptのリアルタイムWebアプリケーションフレームワークのMeteorで遊びました。 リアルタイムWebアプリケーションを簡単に作ることができますので「最近流行りのリアルタイムWeb、一度やってみたいなー、でも難しそうだなー」と思っている方におすすめです！ この記事ではグーグルマップ上で会話できるリアルタイムチャットの作り方を解説します。 完成品はこちら 目次 注意事項 Meteorを始める リアルタイムチャットの作成 Googleマップとの連携 作ったアプリケーションを公開する 宣伝 注意事項 ・この記事を執筆時点のMeteorのバージョンは0.42です。 ・「コマンド一発でインストール！！」とか書きましたが、これは自分が使っているMacでの話です。 windowsのc
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を利用した様々なサンプルページやアプリケーシ
[Amazon EC2] AMI をゼロから作る CentOS 6.2 / S3-Backed 版
まえがき もりやまです。 今回は、一昨年の 7 月に弊社サイトをリニューアルして、サイトのアクセス数が大分増えるよりも前に書いた EC2 の AMI を作る記事を、CentOS 6.2 ベースでやってみようと思います。 少し長いですが、お付き合いください。 はじめに 公式の手順は「From a Loopback – Amazon Elastic Compute Cloud」にあります。 基本はこの通りなのですが、如何せん Fedora Core 4 を使った例なので、最新の OS で作るにはそのままでは使えませんのでご注意ください。 CentOS 6.2 のベースである RHEL6 は、rpm パッケージのペイロードが xz 形式で圧縮されるようになったため、RHEL5 以前の rpm では展開することができません。 そのため AMI のビルド環境は、xz 形式のペイロードを展開できるバー
rails3 + html5 canvasでお絵かき投稿サイトを作ろう！
はじめましてこんにちは。 KRAYアルバイトの浅海です。 html5のcanvasを使ってお絵かき投稿サイトを作ってみようと思います。 初めてブログ記事を書くということで気合が入りました。 ちょっと長めですがお付き合い下さい。 機能 お絵かき投稿サイトの必要最低限な機能って？ ざっと下のような機能を入れてみます。 絵を描ける 絵を消せる 描画を一回分戻れる 線の太さを変えられる 線の色を変える 絵を投稿できる 投稿された画像の一覧を表示できる → 完成見本はこちら完成見本の公開は終了致しました。 絵を描ける HTML5のcanvasにマウスの軌道に線を引いていくわけです。 canvasでのマウス軌道の描き方は、 ・mousemoveイベント発生時に点をプロット という手段が真っ先に思い浮かぶと思いますが、これは、以下の様になります。 これではお話になりません。 なので、点ではなく線を引くこ
軽量高速Webサーバのnginxで静的コンテンツ配信とキャッシュコントロール
nginxとは？ nginxはロシアで開発されている軽量で高速なWebサーバです。 現在シェアは 7% 近くあるようです。もちろんApacheに比べれば少ないですが、Apache 55%、IIS 25%, nginx 7%で3番目に使われているWebサーバになります。 昔は、Pound+Lighttpd+Apacheの組み合わせをよく使っていましたが、ここ数年はnginx+Apacheとかになりました。 主に、静的コンテンツをnginxが受け持ち、PHPなどの動的コンテンツはApacheに渡す形になります。Railsを使う場合は、nginx+Unicornの組み合わせが多いです。 いまさらな感じもありますが、インフラ周りの見直しも含めて紹介したいと思います。 静的コンテンツをnginxに任せる nginx+Apacheの場合の設定は次のようになります。（nginxがport 80、Apac
Titanium MobileでJavaScriptが実行されるまでのソースコード追ってみた
はじめに 毎日が夏休みのみなさんこんにちは。ダニーです。 Titanium Mobile使ってると、なんでiPhoneアプリなのにObjective-CじゃなくてJavaScriptで作れるか大変不思議ですよね。 今回はTitanium Mobileでアプリ起動から、JavaScript(app.js)を読み込んで実行しているところまでをソースコードを読んで追ってみました。 方針としては、Titanium Mobileで適当なプロジェクトを一つ作成してビルドして生成された/build/iphone/以下にあるソースコードを読んで行きます。 今回のビルドに使ったTitanium SDKのバージョンは1.7.1です。 今回、掲載してるソースコードで行番号が飛んでる部分は長いので省略しています。 ソースコード /build/iphone/main.m 25:int main(int argc,
そろそろ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
はじめてgitをつかったのでコマンドを復習します
はじめに こんにちは川崎です。最近はじめてgitを使う機会がありましたので復習してみます。 このエントリーは私がgitを使い始めたばかりのログを元にして、まとめた内容にしています。 gitをインストール、コマンドを使う準備 gitを使うにはgitのインストールが必要です。使っている環境に合わせてgitをインストールします。 私の環境はmacなのでportsでインストールしました。 $ sudo port -d selfupdate $ sudo port install git-core +gitweb +svn インストールが完了したかどうかはgit --versionコマンドで確認できます。 $ git --version git version 1.7.3 gitのversionが表示されたのでインストールされているようです。準備完了です。 はじめてgitを使うときは gitを使うた
ブログ
こんにちは、クレイの正岡です。 好きなモンスターはメタルスライムです、よろしくお願いします。 今回は、先日正式リリースしたDocBaseのリッチテキストエディターの開発プロセスについて喋ろうと思います。 D […]
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
