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パターン
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を利用した様々なサンプルページやアプリケーシ
JavaScriptでLeapMotionアプリを作る方法
こんにちは。クレイの浅海です。 いま話題のLeapMotionとJavascriptを使って、空中でピアノを演奏できるアプリを作りました。 まだLeapMotionを初めて数日なので勘違いしている部分もあるかもしれませんが、JavaScriptでLeapMotion対応アプリをどのように作るのかについて、気づいたことを紹介します。 目次 デモ leap.jsの用意 イベントループ Frameオブジェクト frame.fingers frame.hands frame.gestures circle swipe keyTap screenTap 感想 デモのコード デモ まずは実際に動かしている動画を御覧ください。 空中に手をかざすだけで、ピアノを演奏することができます。 音の再生にはMIDI.jsを使用しています。 ※ 手を3Dで表示している部分は、LeapMotion標準のビジュアライザ
Webサイト＆WebアプリのRetina対応方法まとめ
こんにちは。 会社からMacBookPro Retinaディスプレイモデルを支給されました浅海です。 Retinaディスプレイ、非常に快適なのですが、Retinaディスプレイに最適化されていないWebページやアプリケーションでは、ビクセルベースで作られている部分がすこしぼけたように見えてしまいます。 特に文字を画像にしている場合なんかは、かなり気になります。 Retinaディスプレイは既にiPhoneで使われているほか、一部のAndroidもRetina相当の解像度を持っているモデルが登場しており、モバイルWebサイトやWebアプリがRetinaディスプレイを意識した作りになっていることはよく見られるようになりました。 これからもPCなど、Retinaディスプレイ対応のニーズは増えるだろうと思い、対応方法をまとめました。 目次 imgタグ CSS JavaScript Google Map
[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)
そろそろ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
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
Emacsで便利なEmacs Lisp 7選
はじめに memchachedを落とす遊びをしてるみなさんこんにちは。 最近暑いですね、あまりの暑さに猫耳も溶けちゃいますね、ダニーです 。 今回は自分のEmacs環境を見直すついでにこれは使ってみて便利だったEmacs Lispとその設定例を紹介したいと思います。 下記の設定例はロードパスに置いてあるファイルか、.emacsに追加します。 EmacsLisp 鬼軍曹(Emacsキーバインドの強制) http://wiki.github.com/k1LoW/emacs-drill-instructor/ Emacsキーバインドの強制します。 EnterとかBackSpaceとかTABとか押しそうになったとき便利です。最近Emacs使い始めた人も入れるといいと思います。 (require 'drill-instructor) (setq drill-instructor-global t)
１時間でツイッターサービスを作ろう！
はじめに どうもKRAYの芳賀です。 今日はツイッターサービスをスピーディーかつ無料で作るお話です。 僕は日頃趣味でツイッターサービスを作っているのですが、アイデアを着想したその日のうちにプロトタイプを作って動かすことができるくらいにノウハウが溜まってきました。 仕事が終わってからのプライベートな時間だけでも、１週間から１か月もあれば１つサービスがリリースできる感覚がつかめたので、必要最低限の機能を備えたサービスを短時間で作れないだろうか？と時間を計測しつつ実践してみたところ、なんと１時間で完成できたので、その手順を紹介します。 開発の流れ まずは開発の流れを説明します。 ツイッターアカウントの用意 まずツイッターのアカウントが必要になるので、まだ持っていなければ取得しましょう。サービス用に改めて取得してもいいですね。 サーバの用意 作成したウェブアプリを設置するサーバを準備します。PHP
cache_fu_find_hook を公開しました
もりやまです。 先日公開したプロジェクトで初めて Memcached を使いました。 Rails から使う場合は cache_fu を使用するのが一般的だと思いますが、find ではなく get_cache という専用のメソッドを使用しないとキャッシュされません。 これはちょっとイヤだなぁと思ったので、find メソッドでキャッシュが効くようになるプラグインを作ってみました。 概要 cache_fu (旧 acts_as_cached) を拡張する、Ruby on Rails 用プラグインです。 find(id) や find_by_xxx(value) をフックして、get_cache が実行されるようにします。 リポジトリ http://github.com/morimori/cache_fu_find_hook/tree/master 依存するライブラリ・プラグイン cache_fu
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
