タグ

ブックマーク / atmarkit.itmedia.co.jp (17)

  • インフラストラクチャ自動化フレームワーク「Chef」の基本

    DevOpsというキーワードに関連して、「Chef」というツールの名前を聞いたことのある人も多いのではないでしょうか。この記事では、インフラにおける構成管理、展開作業を自動化するChefの構造および基的な使い方について解説します。 インフラストラクチャ自動化フレームワーク「Chef」 Chefは、物理、仮想、クラウドといったさまざまな大きさのインフラに対して、サーバやアプリケーションの展開を容易にするための自動化フレームワークです。 Chefの重要な要素の1つに「Infrastructure as Code」という概念があります。インフラをどのように構築し、維持するべきかという定義はRubyの文法で記述され、ソースコードのように扱うことができます。つまり、あたかもRubyでプログラミングをするように、インフラの構成管理をコードによって行えることがChefの利点の1つです。 自然言語による

    インフラストラクチャ自動化フレームワーク「Chef」の基本
  • jQuery UIで実現! Ajaxで複数選択ドラッグ&ドロップ

    ■ Draggablesのイベントハンドラが取得できる情報 jQuery UIが提供するドラッグ&ドロップ関連のイベントハンドラは、第2引数からそのイベントに特化した情報が取得可能です。Draggablesのイベントハンドラには、次のような情報が渡されます(第2引数の変数名を「ui」とした場合)。 ui.instance:draggableのインスタンス ui.options:draggableの初期化時に指定したオプション ui.position:ヘルパの現在位置 ui.absolutePosition:ヘルパの現在の絶対指定による位置 例えば、下記のようにすることで、ドラッグ終了時の座標を取得できます。 <div id='target'>ドラッグ可能</div> <script type="text/javascript"> $('#target').draggable({ stop:

    jQuery UIで実現! Ajaxで複数選択ドラッグ&ドロップ
  • まとめてたくさん処理したい! を解決する「Capistrano」

    まとめてたくさん処理したい! を解決する「Capistrano」:特集 DevOps時代の必須知識 インフラ運用の自動化を実現し、DevOpsを支援するツールはいくつかあります。ここではその中から「Capistrano」というツールについて、サンプルを用意しつつ紹介します。 はじめに インフラ運用の自動化を実現するツールには「Chef」や「Puppet」などいろいろあります。今回の記事ではそういったツールのうち、Capistranoというツールを簡単なサンプルを用意しつつ紹介します。 Capistranoとは Capistranoとは簡単にいうと、オープンソースで提供されている、複数のサーバ上で同時にスクリプトを実行するためのソフトウェアツールです。主に、同じ役割のサーバが複数台存在するような環境での自動化であったり、アプリケーションのデプロイ自動化に利用されています。 特にRuby On

    まとめてたくさん処理したい! を解決する「Capistrano」
  • Node.js、MongoDBでデータの保存

    http://localhost:3000/でアプリにアクセスできる。createボタンがあるので、クリックしてメモを作成してみよう。ドラッグでメモの移動もできる。Socket.IOも使用し、リアルタイムに更新しているので、複数ブラウザを開いて確認してみよう。基的な構成はREABLOでの文章作成と同じように、1文字打つたびに、Socket.IOでテキスト情報を送る実装になっている。 このアプリでは、メモのテキストデータと、メモの座標をMongoDBに保存している。ブラウザをリロードしても、アプリを再起動しても、前のメモが表示されることを確認すれば、きちんとデータベースに保存されているのが分かる。 Mongoose MongoDBは各プログラミング言語で使用するためのドライバが用意されている。 http://www.mongodb.org/display/DOCS/Node.js Node

    Node.js、MongoDBでデータの保存
    makoto0327
    makoto0327 2013/05/26
    node.js
  • Node.js、MongoDBでデータの保存

    Node.js、MongoDBでデータの保存:Node.jsを使ってみよう(2)(1/4 ページ) Node.jsとSocket.IO、MongoDBを使用して、Webページの更新内容がリアルタイムにView画面に反映されるサイトを作ってみた MongoDBの紹介 前回はNode.jsでWebアプリを作成するために、ExpressやSocket.IOを使用したデモを基に説明した。今回はWebアプリのデータを保存するために必要なデータベースとしてMongoDBの使い方を説明していく。今回の記事でも後半でMongoDBを使った簡単なデモを用意しているので試してみてほしい。 MongoDBとは、ドキュメント指向のデータベースでNode.jsと相性がいいため、Node.jsとともに注目されている。Node.jsで実装したREABLOエンジンを使ったTech Releaseでも記事のデータベースとし

    Node.js、MongoDBでデータの保存
  • Capybara-Webkit+Cucumber+Sinon.JSでJavaScriptのテストはここまで変わる

    Capybara-Webkit+Cucumber+Sinon.JSでJavaScriptのテストはここまで変わる:フレームワークで実践! JavaScriptテスト入門(5)(1/3 ページ) しっかりとJavaScriptをテストするために、今注目のJavaScript用のテストフレームワークをいくつか紹介し、その概要から実践的な使い方まで解説する連載。今回は、RubyでWebKitをヘッドレス化するフレームワーク、受け入れテストの記述が日語でできるツール、スタブやモック、スパイが使えるライブラリを組み合わせたテスト方法などを紹介。 Capybara-WebkitとCucumberとSinon.JSを利用したJavaScriptのテスト 連載の最終回となる今回は、これまでの連載のようなJavaScriptのロジックを単体テストするのではなく、Webブラウザ上の操作と、それによって動作

    Capybara-Webkit+Cucumber+Sinon.JSでJavaScriptのテストはここまで変わる
  • Node.js、Socket.IO、MongoDBでリアルタイムWeb

    Node.js+Socket.IO+MongoDB こんにちは! 著者は、マインドフリーという会社でNode.jsを使ってWebアプリなどを作成している。この連載では、最新Webテクノロジを使った研究開発の事例や実績を発信する弊社のサイト“Tech Release”のリニューアルで培ったNode.jsに関する知識を分かりやすくお伝えする。 Tech Releaseは一見、普通のブログに見えるが、実は記事の更新内容がリアルタイムにView画面に反映されている。管理者が、記事の文章(データ)に変更を加えると、その記事を見ている人にもページをリロードせずに、リアルタイムに文章(データ)が変化していく。 このUXを実現するために開発したシステムが、REALTIME BLOG ENGINE「REABLO」というエンジンだ。「REABLO」はNode.jsとSocket.IO、MongoDBを使用して

    Node.js、Socket.IO、MongoDBでリアルタイムWeb
    makoto0327
    makoto0327 2013/02/24
    node.js
  • PHPで実用アプリケーションを作ろう(後編)

    前回はPHPによるMySQL操作の基的なコーディング方法を紹介した。今回は実際に動作するアプリケーションを例に、プログラミングの実践的なテクニックを解説する。 アドレス帳アプリケーションの構築 一通りmysql関数を使えるようになったところで、実例を見てみましょう。今回用意したのはWebアドレス帳です。グループでのアドレス管理に対応できるようにWebアプリケーションとして実現してみました。 名前や住所をはじめとする一般的な項目の入力ができ、日付、時間といった文字列以外の特殊な項目の入力にも対応しています。プログラム自体はアドレスの登録・検索・変更・削除といった基的な機能に絞っていますが、これら1つ1つの機能がデータベースのINSERT・SELECT・UPDATE・DELETEに対応しており、機能ごとのPHPスクリプトの流れが追いやすいのではないかと思います。 機能はシンプルですが、登録

    PHPで実用アプリケーションを作ろう(後編)
  • 第2回 JavaScriptの関数をマスターしよう - @IT

    JavaScriptが、いま注目を浴びている。 前回も紹介したように、JavaScriptが復権を果たした背景にはさまざまな要因が考えられるが、その契機ともなったキーワードを1つだけ挙げるとするならば、「Ajax(Asynchronous JavaScript And Xml)」を外すことはできないだろう。Ajaxという技術の登場によって、JavaScriptによるリッチなユーザー・インターフェイス構築の可能性が示されたことで、JavaScriptの価値は確実に見直されつつある。 連載は、JavaScript復権のいまこの時代に求められる、JavaScriptという言語への理解を再確認しようというものだ。連載初回ではまずJavaScriptの苦渋の10年間を振り返りながら、JavaScriptという言語にまとわりつく誤解の払拭を試みた。JavaScriptという「不遇な」言語にこれまで向

    第2回 JavaScriptの関数をマスターしよう - @IT
  • 第4回 JavaScriptでオブジェクト指向プログラミング ― @IT

    JavaScriptが、いま注目を浴びている。 JavaScriptがこれだけの注目を浴びた理由の1つとして、Ajax技術の登場とも相まって、JavaScriptに対する確かな理解の必要性が高まったという事情は否定できない。しかし、それだけでは説明できない急速な注目の理由として、もう1つ、JavaScriptという言語そのものが持つユニークさが開発者の目を引いたという点は看過できないだろう。 もっとも、このユニークさは同時に、多くの開発者が感じているJavaScriptに対する苦手意識と同義でもある。これまでVisual BasicやC#、Javaといった言語でオブジェクト指向構文になじんできた開発者にとって、JavaScriptのオブジェクト指向構文はいかにも奇異なものに映るのだ。ようやくクラスという概念を理解した開発者が、JavaScriptという言語の背後にたびたび見え隠れする「プロ

    第4回 JavaScriptでオブジェクト指向プログラミング ― @IT
    makoto0327
    makoto0327 2012/10/18
    オブジェクト指向 javasc4ript
  • 第3回 変数の宣言とスコープ

    ■関数リテラルとFunctionコンストラクタにおけるスコープの違い 前回、関数を定義する構文として「関数リテラル」と「Functionコンストラクタ」について紹介した。 関数リテラル、Functionコンストラクタは構文的な違いこそあるものの、いずれも匿名関数を定義するという意味でほぼ同様の機能を提供する。ただし、関数内で入れ子に関数リテラル/Functionコンストラクタを使用した場合には、スコープの解釈が互いに異なる点に要注意。 以下に、具体的なコード例を挙げてみよう。 var num = 0; function scope() { var num = 1; // Functionコンストラクタ var myScope1 = new Function("", "window.alert(num);"); // 関数リテラル var myScope2 = function() { wi

    第3回 変数の宣言とスコープ
    makoto0327
    makoto0327 2012/10/18
    javascript schope
  • グリーで活躍するテクニカルアーティストとは? - @IT

    2012年9月8日、慶應義塾大学で開催された「HTML5 Conference 2012」で、グリーのテクニカルアーティストである久道羊宇太氏が「世界に向けたスマートフォンゲームを支える、グリーのテクニカルアーティストについて」と題したセッションをした。久道氏は、「これまでさまざまなゲームタイトルを開発してきたグリーにとって、テクニカルアーティストは、なくてはならない存在だ」と話し、その役割を説明した。 テクニカルアーティストには、デザイナとエンジニア、外部の協力会社との間を取り持ち、ゲーム開発を支える役割があるという。主な役割は、以下。 デザイナ、エンジニア、関係各所との連携 画像やデータなどの素材を、各種ゲームに併せて変換し、最適化 開発効率向上させるために、それを自動化するコンバーターの作成 それらを活かしたクライアントサイドの開発 これらの役割を果たすために、以下のように求められる

  • 「要件定義書のアウトライン作成」完全マニュアル

    他の文書と同様、要件定義書はまず文書全体のアウトライン(骨格、構成)をしっかり作り上げてから内容を記述します。今回は、読みやすく分かりやすい要件定義書にするためのアウトライン作成方法を紹介します。 階層構造で読みやすい文書にする 要件定義書を作るためには、全体を大見出し=中見出し=小見出し(章=節=項)の階層構造にします。 「大見出し」「中見出し」「小見出し」の数を、それぞれ5から10程度にするのは、前回(第3回「分かりやすい提案書はアウトラインが美しい」)紹介した提案書と同様です。見出しの数が多すぎると、読み手が文書の全体像を把握できなくなります。また、1つの項目の記述量を1ページ内に収めるようにします。 要件定義書を構成する項目 要件定義書に必要な大見出しの項目としては、次のようなものが挙げられます。 システムの概要/システムの構想 機能要求 入力要求と出力要求 システム導入後の業務フ

    「要件定義書のアウトライン作成」完全マニュアル
  • はじめまして。Androidアプリ開発&デザイン(3/3) - @IT

    ITスマソ開設記念! 女子部部長に聞くAndroidアプリ制作のコツ 面白法人カヤック 意匠部 林真由美 2010/12/7 ──iPhoneアプリに比べて、Androidアプリを見ていると、あまり一発モノのおばかなのがない印象に思いますけど…… あのね、少ないです。 世界のAndroidマーケットで見ると、一発ものとか、映画のノベルティ的な感じで、例えば登場人物の面白トークアプリとか、タイアップ広告的なものは結構あるんですけど、当にネタで勝負しようというのはあまりない。 多分それは先にiPhoneで作られているから、Androidでいまさらやってもしようがないというあきらめの気持ちが理由の1つ。 もう1つの理由は、もともとAndroidの市場で開発しようとしている人が、真面目な人が多くって、そっちの思考でないという可能性はあるかもしれない(笑)。ノリがちょっと違うかも。 Androi

  • HTML5のlocalStorageでiPhone用Webアプリを高速化

    HTML5のlocalStorageでiPhone用Webアプリを高速化:iPhoneで動かす業務用Webアプリ開発入門(4)(1/2 ページ) 今回は、iOSのSafariの中にデータを記録できる、HTML5の「localStorage」機能を使って、データの先読みとキャッシュを実現しアプリケーションの体感パフォーマンスを向上させてみます。 HTML5の「localStorage」とは localStorage(ローカルストレージ)とは、HTML5で規定されている、Webブラウザ内部のKVS(キーバリュー型データストア)です。iOSのSafariでも実装されていて、JavaScriptコードからアクセスでき、任意のデータを保存できます。 いきなり注意! localStorageの保存データはテキストで! HTML5の仕様では、localStorageに保存できるデータはJavaScrip

    HTML5のlocalStorageでiPhone用Webアプリを高速化
  • デザイナは要注目! 明日から語れるHTML5&CSS3

    デザイナは要注目! 明日から語れるHTML5&CSS3:一撃デザインの種明かし(13)(3/4 ページ) HTML5の新しいタグ<canvas><video><audio>とは HTML5に追加されたタグの代表的なものを2つ紹介します。新しい表現の可能性を感じることができると思います。 <canvas>タグ <canvas>タグはJavaScriptで図形を描画できるエリアを生成します。<canvas>タグは応用次第で、さまざまな用途に使うことができます。 例えば、円グラフを更新するとします。従来であれば数値に合わせて円グラフの画像を作成し、GIFやPNG画像として出力して更新することになるでしょう。しかし<canvas>タグを使うと、JavaScriptの数値を変更するだけで円グラフを描画できるので、画像を作成する手間を省くことが可能となります。 例えば、カヤックの技術部ブログでも<ca

    デザイナは要注目! 明日から語れるHTML5&CSS3
  • SassでCSSの弱点を克服しよう (1/2)- @IT

    maedana SonicGarden SUG(SKIP User Group)/日Hamlの会 2009/5/22 Railsを使ったWebアプリケーション開発で、プログラマやデザイナを悩ませるものの1つがスタイルシートの記述だろう。Sassを使って、“クールで構造化された”スタイルシートを記述してみよう(編集部) Sassとは、Syntactically Awesome StyleSheetsの頭文字を取ったものです。あえて日語に訳すと、「かっこいい構文のスタイルシート」といった感じでしょうか。 もう少しシンプルに表現すると「クールなCSS(Cascading Style Sheets)」でもいいかもしれません。Sassはスタイルシートを簡潔に表現するためのメタ言語であり、同時にSassからCSSを生成するための便利なライブラリやコマンドラインツールを提供します。 Sassを使うと

  • 1