【Rails】デザイン〜プログラム作業の連携 KRAYの場合
お寿司大好き！ KRAY の亀井です （好きなネタは炙りサーモンです） 巷ではデザイナーとプログラマーの協業についてのブログ記事を見かけたり、webプログラマーの「HTMLのzip納品つらい」という声が聞こえたりします。 デザイン（HTML コーディング）とプログラムの連携作業については、悩んでいる人が多い印象を受けます。。 デザイナーとプログラマーの協業 KRAY でもデザインとプログラムの連携については改善を試みています。 今回は KRAY でのデザイン 〜 プログラム間の連携作業について書いていきたいと思います。 KRAY は Rails を主に使っているので、Rails の場合の話になります どちらかというと HTML コーディング 〜 プログラム間の作業の話が主です 今までのやりかた KRAY はシステム開発専門の会社なので、社内にデザイナーがいません。 なのでデザインはパートナ
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
KRAYのアジャイルソフトウェア開発
『アジャイルソフトウェア開発』という言葉を聞いたことがありますか？アジャイルソフトウェア開発とは、製品全体を一度に設計／実装するのではなく、期間毎に完成させる機能を選択して設計／実装し、それを顧客に公開してフィードバックを得ることで、製品の完成度を高めていく開発スタイルです。 KRAYでは現在プロジェクトのアジャイル化を進めています。そこで今回はKRAYのアジャイルソフトウェア開発について紹介します。 なぜアジャイル？ まず、なぜKRAYがアジャイル化を進めているかについてです。冒頭にも書いた通り、アジャイルなプロジェクトでは、設計／実装／デモンストレーション／フィードバックを反復することで製品の価値を高めていきます。これにより、我々は顧客に対して次ような価値を提供することができます。 決められた期間と予算の中で製品の価値を最大にする。 定期的に実際の動作するソフトウェアを見せられる。 プ
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を利用した様々なサンプルページやアプリケーシ
開発合宿、やってます。
はじめに 今日は普段の技術系記事と違って、社内のことを紹介してみたいと思います。 クレイでは3週間に1度、開発合宿を行なっています。普段の業務は受注案件の開発がメインですが、合宿という形で自分たちが提供するサービスの開発に集中する時間を設けるのが目的です。 なぜ開発合宿？ 先ほども書いた通り、クレイの主な業務は受注案件、つまりお客様から依頼されたシステムを開発するのが中心です。一方で、自分たちで企画して自分たちで実装したWebサービスを提供していきたい、という思いも持っています。 とは言うものの、普段の業務時間から自社のための開発時間を作りだすというのは案外難しいものです。それはスケジュールを守るためであったり、電話やメールによる何かしらの対応のためであったり。 なので、強制的に普段の業務をリセットして自分たちの時間を確保するため、普段のオフィスを離れて、どうせなら泊まりで集中作業しよう…
学んだことまとめ 2011/10/07〜11/11
まえがき 皆さんこんにちは。 いきなりですが、この前クルマに轢かれました。皆さんも横断歩道を渡るときは青信号でも左右に注意しましょう……。とりあえずMacが無事でよかったです。 まとめ JavaScript, HTML, CSS 関連 canvas上の描いたテキストの横のサイズを取得する方法。 ctx = document.getElementById(‘canvas’).getContext(‘2d’) ctx.font = ‘20px Arial’ m = ctx.measureText(‘amamdmdmdm’) m.width HTML5 API チェッカー http://html5.jp/tutorial/apicheck/ Ruby, Rails 関連 Gem を作って公開してみた https://rubygems.org/gems/endeco https://github.
rails3 + html5 canvasでお絵かき投稿サイトを作ろう！
はじめましてこんにちは。 KRAYアルバイトの浅海です。 html5のcanvasを使ってお絵かき投稿サイトを作ってみようと思います。 初めてブログ記事を書くということで気合が入りました。 ちょっと長めですがお付き合い下さい。 機能 お絵かき投稿サイトの必要最低限な機能って？ ざっと下のような機能を入れてみます。 絵を描ける 絵を消せる 描画を一回分戻れる 線の太さを変えられる 線の色を変える 絵を投稿できる 投稿された画像の一覧を表示できる → 完成見本はこちら完成見本の公開は終了致しました。 絵を描ける HTML5のcanvasにマウスの軌道に線を引いていくわけです。 canvasでのマウス軌道の描き方は、 ・mousemoveイベント発生時に点をプロット という手段が真っ先に思い浮かぶと思いますが、これは、以下の様になります。 これではお話になりません。 なので、点ではなく線を引くこ
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,
先週学んだことまとめ 2011 7/4〜7/8
学んだことまとめ クレイでは簡単な日報をみんなで書いています。 すごく簡単に「新しく覚えたこと」「困ったこと」「打合せ報告」だけの3つを書くだけです。 ただリンクを張るだけの場合もありますが、ある人によっては当たり前のことでも他の人にとっては便利なことや新しい知識だったりして、役に立ってます。 最近ブログを書けていないので、ダイジェストでそれをネタにしようかなと。 プログラム HTML5 アプリケーションテンプレート HTML5 Boilerplate ruby1.9でのJSONライクなフォーマット ruby 1.9 ではハッシュのリテラルに {:hoge => 123} ではなく {hoge: 123} のような JSON ライクなフォーマットが使える。rails new するときに出てくる old-style-hash の意味がやっとわかった。 Mongoid のドキュメントにちょくち
Titanium Mobileで画像の複数選択モジュールを作ってみた
モジュール開発 最近忙しくて全然ブログ書けていなかったのですが、先日初めてTitanium Mobileのモジュール開発をした時にはまったりしたのでメモとして残しておきます。 クレイでは森山がブログを書いていたり、ダニーが仕事で使っていたりと多少実績はあるのですが、私自身は全くさわったことがありません。必要に迫られて、いきなりモジュール開発をすることになったのですが、Objective-Cさえわかっていれば意外に簡単にできるし、いろんな拡張が出来るので、かなり楽しかったです。 もしかするとTitanium Mobileでバリバリ開発している人から見ると、作法がなってないとか、変な動きをしてるとかあるかもしれませんので、その時はぜひ教えていただけると嬉しいです。 Titanium Mobileに関連した記事 近頃話題の Titanium Mobile でラクラク iOS アプリ開発してみた
Titanium Mobile開発で参考になる5つのURL
はじめに 最近Titanium Mobileで開発をはじめましたダニーです。こんにちわ。 今回はTitanium Mobile開発でよく分からないことを調べたりするのによく使ってるサイトを紹介したと思います。 Documentation Guides Appcelerator Wiki http://wiki.appcelerator.org/display/guides/Home/ 開発元のドキュメントです。ここは読んだほういいと思います。 Titanium Mobile 1.6.0 API Documents http://tidocs.com/mobile/latest/ Titanium MobileのAPIを検索できます。http://railsapi.com/みたいに検索できて使いやすいです。 Titanium MobileのAPIの実装がどうなってるかはiPhoneだとTit
[Rails] Nested Object Forms を使って多対多の関係をスマートに編集
はじめに もりやまです。 先月の震災の日の記事以来となってしまいました。まずは被災されたみなさまに、心からお見舞い申し上げます。 弊社ではだにーが宮城県出身なのですが、ご家族には大事なかったようで一安心です。 昨夜も大きな余震があってまだまだ落ち着かないですが、みんなでまた再建しましょう！ さて今回は、導入されたのは Rails 2.3 なのでもう目新しくもないですが、has_many :through で多対多に関連付けされたモデルを、Nested Object Forms を使って編集する方法がようやく理解できたのでまとめてみました。 そもそも Nested Object Forms って何？ あるモデルを編集するためのフォームの中に、そのモデルと has_many 等で関連付けされた別のモデルを合わせて編集できるようにするための機能です。 これを自力でやろうとすると、 関連付けされた
新しい定期購読型のアプリ内課金を実装してみた (Auto-renewable Subscriptions)
[追記１] サンドボックス環境では自動継続がある条件下でオフになることがあるそうです。 この記事の情報は不正確な可能性があるため、近日中に検証します。 [追記２] 調査したところ、iPadで2ヶ月購読した場合は動作することは確認できました。 ただ現状ではアプリに組み込んでリリースするのは危険だとは思います。 参考 Auto-Renewable Subscrptionに関する問題など 注意点 まだ新しい定期購読型のアプリ内課金を使ったアプリはリリースしていません。 不明な点があるため間違いなどありましたら、ぜひご連絡ください。 特に自動更新後、アプリ側から有効期限を確認する方法が正しいかどうかが不明です。 新しい定期購読型のアプリ内課金は何が違うの？ 新しい定期購読型のアプリ内課金は、Appleが2011/2/15に発表した自動更新型の課金サービスです。 今までもアプリ内課金では購読型（Su
HTML5 Canvasでフラクタル図形を描いてみた
はじめに 一年の1/4が終わってしまうと思ってるみなさんこんにちは。ダニーです。 今回はHTML5のCanvasの使い方を調べて Canvasでフラクタル図形を描いてみました。 デモ http://f96q.github.com/canvas_demo/ Canvasについて 詳しい仕様は http://dev.w3.org/html5/canvas-api/canvas-2d-api.htmlに載っているのでそちらを参照して下さい。 Canvasを作る <canvas id="main" width="500" height="500" ></canvas> canvasタグでcanvasを作ります。 コンテキストの取得 var canvas = document.getElementById('main'); if (canvas.getContext) { var ctx = can
そろそろ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
Pusherでお手軽WebSocket - iPhoneから加速度をリアルタイム送信
はじめに タイガーマスクが貢いでくれるのを待っている皆さんこんばんは。 前振り考えるのが面倒なので結論から書くと、今日はWebSocketについて扱おうと思います。iPhoneを使って↓こんなサンプルを作ってみました。 Safari上のJavaScriptと、WebSocketをWebサービスとして提供しているPusherを利用して、サーバサイドの言語を使わずに実装しています。 WebSocketってなぁに？ httpおさらい Webの通信に使われる皆さんお馴染みのhttpは、クライアント（ブラウザとかね）とサーバが常に「問い合わせ（リクエスト）と返答（レスポンス）」のペアでやりとりをおこないます。 クライアント(FirefoxやChromeなど): 「情報ください」 サーバ(Apacheやnginxなど): 「はい、どうぞ」 このシンプルな仕組みがhttpの強みであり、URLと共にここま
軽量高速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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
東京Ruby会議10でダニーが講演を行いました