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パターン
社内Sass勉強会を開催しました
こんにちは、クレイの亀井です。もうすっかり秋ですね！コンビニやケーキ屋さんに芋栗南瓜のスイーツがもりだくさんでテンション上がりっぱなしです さて本題に入ります。先日9月30日にクレイ社内で Sass 勉強会を開催し、CSS 設計について発表しました。そのことについて今回はブログに書こうと思います。 開催することになった経緯 数ヶ月前から社員のキャリアアップのため、『クレイ社員補完計画』が開始しました。週に4時間まで自分の好きなことを勉強する時間をとれ、2ヶ月に一度ブログや勉強会などの場で成果を発表します。 私ははじめ別のテーマにしていたのですが、いまいちモチベーションが上がらず、相談した結果 Sass をテーマに勉強会を開催することになりました。 社会人になってから2年半、スライドを制作して発表をするという経験がなかったのですが、いつか外部の勉強会で LT などしてみたいと思っていたためい
DockerコンテナをCapistranoでデプロイ
開発環境と運用環境の差異 Railsアプリの開発をMacでしている人は多いと思います。しかし本番では大抵Linuxマシンで運用するため、実行環境の違いから問題が発生することがあります。特にサードパーティ製ライブラリやツールを使う場合、MacとLinuxで同じ動作をする保証はどこにもありません。また、開発にLinuxマシンを使っていたとしても、本番と全く同じ構成で開発するのは難しいでしょう。 Dockerを使うと開発から運用まで同じ環境を使え、しかもハードウェア仮想化よりも遥かに軽量です。そこで、私が今KRAYで担当しているプロジェクトでは開発から本番まで全ての環境でDockerを使えるようにしました。 それぞれの環境で解決すべき課題がありましたが、今日は本番環境にデプロイする仕組みを紹介します（KRAYでインテグレーション環境と呼ばれる環境についてはDockerホストをプロジェクトや権限で
Dockerホストをプロジェクトや権限で分ける
（本エントリはDockerの基礎知識を前提としています。） Dockerにはイメージやコンテナレベルのアクセス制限機能がありません。つまり、Dockerデーモンに接続できる人は誰でも、全てのイメージやコンテナを操作できます。よって、社内にDockerを使う複数のプロジェクトがあり、各プロジェクトメンバーの権限をプロジェクト内に制限したい場合、Dockerホストを分ける必要があります。今回は、そんなシチュエーションでDocker-in-Docker（Dockerの入れ子）を活用する話です。 なぜアクセス制限機能がないか コンテナを起動するときDockerホストの/（ルート）をマウントすると、コンテナの中からホストの全てのファイルにアクセスできます。つまりDockerデーモンへのアクセスはホストのroot権限と同等であり、イメージやコンテナレベルのアクセス制限をしても意味がありません。Dock
開発のお手伝いボット Hubot で定期処理を自動化しよう！
はじめに ダニーです。2年ぶりの登場です。 今回はHubotについて書きます。 Hubotとは 絵はisshie作です。 githubが作ってるbotフレームワークです。 http://hubot.github.com 何ができるのか HipChat, Skype, IRC, その他チャット系のツールでbot用のユーザーを作成して、Hubotがそのユーザーとしてチャットにログインします。 そのユーザーにコマンドを話しかけると、Hubotがそのコマンドに応じた処理をして結果をbot用のユーザーがチャットで発言することで返してくれます。botなので定期的になにか発言したり、呼びかけに対してなにか自動で答えるというようなことができます。 何が嬉しいのか 普段の開発で定期的にやることなどをコマンドとして作成しておくと、そのコマンドをチャットで話しかけることでHubotが自動で処理してくれるようにな
Git初心者に捧ぐ！Gitの「これなんで？」を解説します。
はじめましてこんにちは、今年新卒でKRAYに入社しました亀井と申します。 会社のみなさんからは「あさちゅん」と呼ばれております。どうぞよろしくお願いします。 突然ですが、みなさん使ってますか？ Git。 KRAYではバリバリ活躍してるGitですが、 「よくわからない……」と頭を抱えてる方も多いですね。 わたしも抱えてます。 正直、KRAYに入社するまでターミナルを使ったことすらなく、 Gitも入社してから使いだしたので初心者もいいところです。 そんなわたしが1日約200回×3ヶ月ターミナルでGitコマンドを打ち続けて やっとわかってきた、Gitの「これなんで？」を解説します。 主にGit初心者、Gitについて理解を深めたい人向けです。 もくじ なんでcommitする前にaddしなきゃいけないの？ ブランチってなんのために分けるの？ HEADってなんなの？ 消したファイルもコミットしなきゃい
Rails 4のturbolinksについて最低でも知っておきたい事
Rails 4のturbolinksについて最低でも知っておきたい事 （追記）turbolinksに関するセキュリティ上の懸念について turbolinksとは、ページ遷移をAjaxに置き換え、JavaScriptやCSSのパースを省略することで高速化するgemで、Rails 4からはデフォルトで使用されるようになります。 高速化は大歓迎なのですが、JavaScriptのイベントの起き方が変わるため、Rails 3までの書き方をしているとまず間違いなく問題が起きます。しかも、Rails 4ではデフォルトの機能ですので、最新版を使いたいなら必ず知っておかなければいけません。 本エントリではturbolinksを使うために絶対に知らなければいけないことを分かりやすく紹介したいと思います。 動作 turbolinksの動作は、すごく大雑把に言うと以下の通りです。 リンクのclickイベントをフッ
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を利用した様々なサンプルページやアプリケーシ
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
