第7回Node.jsアプリケーションをWindow Azureで動かす 高橋俊光 2012-11-27
![基礎から学ぶNode.js 記事一覧 | gihyo.jp](https://cdn-ak-scissors.b.st-hatena.com/image/square/7241c583676d54fc052c4388a6edd25e4c7f280b/height=288;version=1;width=512/https%3A%2F%2Fgihyo.jp%2Fassets%2Fimages%2Fgihyojp-ogp.png)
連載2回目となる今回は、WebページにおけるスクロールとページングのUIを取り上げます。ユーザに最高のUX(User Experience)を提供するためにフロントエンドのUI(User Interface)設計は欠かせません。エンジニア観点から見たUI設計思想について語りたいと思います。 UIの基礎知識 最適なUIというものは、表示するデータの性質や利用者の使い方、使用しているデバイス、慣れによって変化していきます。 「万人にとって普遍的で、そこそこ使いやすいUI」を目指すべきなのか、あるいは、「一部の人にとって最高に使いやすいUI」を目指すべきなのか。UIを設計する人それぞれでポリシーは異なるでしょう。 誰でもそこそこ迷わずに使える優等生的デザイン。最初はとっつきにくくても、慣れれば最速で使える奇抜なデザイン……。一口にWebページのUIと言っても多種多様です。 たまにしか使わないサ
Meteorを使用したアプリケーション開発 前回までは、Meteorの環境や基本的なAPIに関する説明でしたが、今回からは、いよいよ本格的なアプリケーション開発に必要とされる知識を紹介していきます。 UIプログラミングを行う際、必ずといって良いほど言及されるプログラミングモデルがMVCモデルです。MVCモデルとは、ご存知の通り、Uデータを保持する「モデル」、ユーザの目に触れる「ビュー」、モデルとビューの間を取り持ち、UI全体を制御する「コントローラ」でアプリケーションを構成することです。 Meteor自身は、MVCモデルをそれほど積極的にサポートしているわけではありません。しかし、Meteorは非常に柔軟なアーキテクチャを提供することで、外部のMVCフレームワークと併用することや、ビューの構築に任意のテンプレートエンジンを利用することが可能となっています。 前置きが長くなってしまい
CreateJSで提供される5つのツール 今回は、4月に公開されたばかりの「CreateJS」を紹介します。CreateJSはHTML5を利用したリッチコンテンツ作成のためのJavaScriptライブラリ/ツール集です。著名なFlashエンジニアであるGrant Skinner氏が開発しており、ActionScriptに似た使用感を実現している点が大きな特徴と言えます。 CreateJSでは、次の5つのツールが提供されています。 EaselJS TweenJS SoundJS PreloadJS Zoe それぞれ、以下のような機能を備えています。 EaselJS EaselJSはHTML5のキャンバス上にコンテンツを描画するためのJavaScriptライブラリです。提供されるAPIがActionScript風になっており、Flash開発者ができるだけ違和感なく利用できるように工夫されてる点
UILabelは、iOSアプリ開発において使用頻度の高いクラスですが、カユいところに手が届かなかったりします。たとえばテキストの一部だけ強調表示するといった使い方はできませんし、動的に更新されるテキストを上寄せにしようと思ったら、そのテキストがちょうど納まるUILabelのサイズを算出するメソッドをコールしてサイズを指定する必要があります。 今回はそんなUILabelの機能を拡張してくれるサブクラス3種を紹介します。 OHAttributedLabel 特徴 NSAttributedStringをラップしてUILabelに持たせたもので、テキストの一部だけフォントや色を変えたりといった指定が簡単にできるようになります。 またリンクの付与、テキスト上寄せといったことも簡単にできます。 OHAttributedLabelの使用例 使用準備 ソースコードを以下のURLよりダウンロード https
カルテ1:図1のような2つのテーブルOrders(注文)とOrderReceipts(注文明細)を考える。この2つのテーブルは、お中元の受け付けと配送を管理するためのものです。Ordersテーブルの1レコードが注文1件に対応し、OrderReceiptsはその注文内の商品単位で1レコードになっている。したがって、OrdersとOrderReceiptsは一対多の関係にある。 今、注文ごとに受付日(order_date)と商品の配送予定日(delivery_date)の差を求めて、それが3日以上ある場合は注文者に遅くなる旨の連絡を送りたい。さて、どの注文番号が該当するか、求めてほしい。 図1 OrdersテーブルとOrderReceiptsテーブル レベルの異なる情報を結合する方法 1つの注文に複数の商品が含まれる可能性があるから、OrdersテーブルとOrderReceiptsは一対多の関
「入力バリデーションはセキュリティ対策である」は世界の常識です。少なくとも大多数の世界のセキュリティ専門家は「入力バリデーションはセキュリティ対策」は常識だと考えています。 もちろん入力バリデーション対策がすべてであるわけではなく、ほかのセキュリティ対策も重要ですが、入力バリデーションが最も重要な対策の1つである、と考えている人は沢山います。 入力のバリデーションはすべてのプログラムに必須の保護機能です。一部に「入力バリデーションはセキュリティ対策ではない」とする声もあるようですが、入力バリデーションは間違いなくセキュリティ対策です。入力バリデーションはセキュリティ対策ではない、とする考え方は、混乱を招くだけです。 入力バリデーションをセキュリティ対策としているのは筆者のみではありません。世界的に利用されているセキュリティ標準でも、入力バリデーションを非常に有効なセキュリティ対策としてとら
セキュリティ対策は言語やアプリケーションを問わず非常に重要です。しかし、取るべきセキュリティ対策が確実に実施されないケースが広く見受けられます。 最近の例では次のような物があります。 WordPress Meenews 5.1 Cross Site Scripting WordPress Enable-Latex Remote File Inclusion Dolibarr 3.1.0 RC Cross Site Scripting / SQL Injection 上のURLの脆弱性も対策が簡単なものが多いですが、対策が簡単なSQLインジェクションの脆弱性も数多く見つかっています。 CMS Balitbang 3.x SQL Injection AdaptCMS 2.x SQL Injection Icomex CMS SQL Injection なぜ簡単な対策で防げる脆弱性でもセキュリテ
こんにちはこんにちは ! ! はまちや2です! 今日からぼくと一緒にWebプログラミングのセキュリティについて、ちょっぴり勉強してみませんか!今回はHTTPがどんなやりとりをしているのか、簡単におさらいしてみましょう!
はじめに jQueryの機能を大きく分けると、DOM操作、アニメーション、イベント処理、Ajax、その他のユーティリティ関数といった分類ができます。DOM操作は前回の記事で解説したような、HTMLの要素を追加したり書き換えたりといった操作です。今回はその中の1つ、アニメーションについて解説します。アニメーションも正確にはDOM操作に分類されますが、アニメーションだけでかなり大きな比重を占めるので今回は通常のDOM操作とわけて考えます。イベント処理やAjax、ユーティリティ関数についても連載の後のほうで解説する予定です。 JavaScriptでアニメーションの基本 まず始めに、jQueryを使わないでアニメーションをする方法を紹介します。jQueryのアニメーションが実際に内部でどのような処理が行われているかを知ることでその後の理解度が増すと思います。JavaScriptでアニメーションは基
これまで、x86システム仮想マシンの概要、およびその実例としてDebian GNU/Linux 6.0を利用した仮想マシンの実行方法について紹介してきました。今回からは、より具体的にCPU、メモリ、I/Oデバイスの仮想化がどうやって実現されているかを解説したいと思います。 今回は、仮想マシンを実装するための古典的手法およびそれを従来のx86プロセッサに適用する際の問題点、そして仮想マシンソフトウェアがどのようにそれらの障壁を乗り越えてきたかについて解説します。 システム仮想マシンに求められる条件 これまで、システム仮想マシンはどのようなものかについて説明してきましたが、仮想化仮想化の生みの親とも言えるGoldbergらは、1974年に書いた論文にて、仮想マシンソフトウェアとはどのようなものであるべきかについて、コンピュータアーキテクチャの観点から論じています。 彼らは、その仮想マシンソフト
UNIXの基本的なコマンドの1つであるdiff。 これに実装されているアルゴリズムは実に興味深い世界が広がっています。 本稿では、筆者が開発した独自ライブラリ「dtl」をもとに「diffのしくみ」を解説します。 はじめに diffは2つのファイルやディレクトリの差分を取るのに使用するプログラムです。 ソフトウェア開発を行っている方であれば、SubversionやGitなどのバージョン管理システムを通して利用していることが多いかと思います。本稿ではそのdiffの動作原理について解説します。 差分の計算の際に重要な3つの要素 差分を計算するというのは次の3つを計算することに帰結します。 編集距離 2つの要素列の違いを数値化したもの LCS(Longest Common Subsequence) 2つの要素列の最長共通部分列 SES(Shortest Edit Script) ある要素列を別の要
あけましておめでとうございます。Sencha Japan(Ext Japan)/株式会社ゼノフィの小堤です。 今回は、スマートフォン向けのJavaScriptフレームワークであるjQtouch, jQuery Mobile, Sencha Touchを簡単に紹介した後に、昨年正式リリースされたSencha Touchを利用してスマートフォン向けのコンテンツまたはアプリケーション開発を行っていく上でのポイントを解説します。 2011年のスマートフォン事情とOSプラットフォーム iPhoneをもつユーザーはかなり増えた感じがしますし、特別な感じもないくらいiPhoneは普及してきた感じがします。それに加えて、昨年末から各キャリアから続々とAndroid端末が発売され、そのバージョンも2.1/2.2がほとんどです。 スマートフォン自体の機種が増え、開発者としてはテストを行う苦労が増えていきそうな
一歩下がって「時代の流れ」を見る この業界では日々さまざまなことが起きている。そんな中で、個々の事象にいちいち惑わされず、自分なりに「時代の流れ」をしっかりととらえる目を養うことが大切である。 最近だと、MicrosoftがHTML5の採用に踏み切ったこと[1]、AppleとAdobeのFlashに関するにらみ合い、Googleが買収したOn2 Technologiesのビデオコーデック「V8」を「WebM」としてオープンソースにしたこと、シャープが提唱する電子書籍の独自フォーマット「次世代XMDF」が激しく批判されていることなどが目についたニュースだが、そのどれもが一つの強い方向性を示している..「独自フォーマット戦略」の終焉だ。 独自フォーマット戦略 独自フォーマット戦略とは、自社が所有する知的所有権をからめたメディアのフォーマットをなんらかの方法で「業界標準」とし、ツール、再生ソフ
第1回ではJSONPによるAjax実装を取り上げましたが、今回はそこで使ったJSONという表記法と、JSONPというAjax実装手法について解説します。また、jQueryによる簡単なAjaxの実装についても解説します。 JSONってなに? JSONとは、JavaScript Object Notationの略称です。ECMAScript言語 ECMA-262をベースに作られた、Javascriptオブジェクトの表記法のサブセットです。 JSONは、名前と値のペア、および、順序付きの値という2つのシンプルな構造に基づいて、構造化データを簡潔に表現することができます。 オブジェクト(名前と値のペアの集まり) JSONでオブジェクトを表現するには、メンバを「{」と「}」で囲みます。複数のメンバは「,」で区切られます。例えば、名前が「color」、値が「green」というメンバを持つオブジェク
はじめに はじめまして。株式会社ピクセルグリッドの外村です。今回この連載では、マークアップエンジニアやデザイナを対象に、『jsdo.it -Share JavaScript,HTML5 and CSS-』(以下、jsdo.it)というサイトを使ってユーザ参加型のJavaScriptやCSS3の学習コンテンツを提供していきます。今回は初回ですので、jsdo.itというサイトの概要や連載に向けての事前準備を解説します。 jsdo.itとは jsdo.itというのは2010年に株式会社カヤックがリリースしたWebサービスで、Web上でHTML5、CSS、JavaScriptを書いてその場で実行することができます。書いたコードは誰でも見ることができ、トップページに並んでいる人気のコードを見るだけでも楽しむことができます。 また、単にコードを書いたり人が書いたコードを見たりするだけでなく、他にも
今回よりフォーム関連の実践 前回はタブパネルをプラグインとして利用することについての説明をしました。プラグインとして作ることで、様々なサイトで使いたい部分で使えるようにできるという点でも、とても便利です。今後もプラグインとして利用できるような作り方の説明も入れていきますので、みなさんもぜひ挑戦してみてください。 さて、今回より数回にかけて、フォーム(Form)関連の実践例についてご紹介していきます。フォームでは、ユーザーが使いやすいよう(入力しやすいように)に工夫することで様々な点において、利便性を向上させることができます。 今回はフォームの入力部分に入力例などを入れておき、フォーカスしたときにその入力例を消す仕組みを作ってみることにします。 入力例を入れておきフォーカス時に消す フォームの入力部分で、入力例を入れておくことで、その部分にどのような入力をしたらいいのか明示しておくことができ
予告:4/30にZendFramework 1.8がリリースされました。次回はZendFramework 1.8の新機能の紹介とZendFramework 1.8を使って、ゲストブックアプリを作り直します。 機能的な問題以外ににも、前回作った簡単なゲストブックを使ってみるといろいろな問題があることが分かります。 日本語が使えない エスケープのセキュリティ対策が十分でない ZendFrameworkらしくないViewでのエスケープ しかし、簡単なゲストブックアプリケーションを“普通”に作る場合とZendFrameworkを使って作る場合の違いを比べると、アプリケーションの作り方の違いがよく分かったと思います。 ZendFrameworkを使ったほうが、手順が多くて面倒に感じたかも知れません。しかし、それはアプリケーションが単純すぎてフレームワークのメリットを感じられなかっただけです。アプ
これも、リスト7のクエリを簡単に修正するだけで対応できます(リスト8)。 リスト8 表頭:年齢階級・性別、表側:部署(小計・合計あり) SELECT dept, COUNT(*), SUM(CASE WHEN age <= 30 THEN 1 ELSE 0 END) AS "若手(計)", SUM(CASE WHEN age <= 30 AND sex = '男' THEN 1 ELSE 0 END) AS "若手(男)", SUM(CASE WHEN age <= 30 AND sex = '女' THEN 1 ELSE 0 END) AS "若手(女)", SUM(CASE WHEN age >= 31 THEN 1 ELSE 0 END) AS "ベテラン(計)", SUM(CASE WHEN age >= 31 AND sex = '男' THEN 1 ELSE 0 END)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く