シーケンス図とステートマシン図を学ぼう
シーケンス図とステートマシン図とは 「はじめようUML！」と題してお送りしている本連載も、今回がいよいよ最終回となります。最後は、シーケンス図とステートマシン図による振る舞い設計を見ていきましょう。 シーケンス図とステートマシン図は、13あるUMLの図（ダイアグラム）の中でも、システム内部の振る舞いを表現するための代表的な図です。シーケンス図は相互作用図の一種で、主に、ユースケースごとにシステム内部のオブジェクト同士のやり取りを設計するために使われます。一方、ステートマシン図では、ユースケースを跨ったオブジェクトごとの状態遷移を設計します。 シーケンス図とは まずはシーケンス図から見ていきましょう。シーケンス図は、オブジェクト間のメッセージのやり取り（相互作用）を時系列に沿って表現するダイアグラムです。シーケンス図での時間は、ライフラインに沿って上から下に進みます。 シーケンス図は、詳細設
HTML＋JavaScriptだけでブラウザに図形描画（3） - Canvas API -
第2回、第3回と続いてきたCanvas API編も、今回が最後。本稿では、キャンバスの設定を保存する方法やキャンバスの内容をデータ化する方法、ユーザーのマウス操作に応じて図形を描画する方法などなどについて紹介します。 TIPS 028：画像が重なった場合の処理方法を指定する TIPS 029：キャンバスの設定を保存＆復元する TIPS 030：画像を拡大／回転／変形して表示する TIPS 031：キャンバス上の図形の一部を切り出す／貼り付ける TIPS 032：マウスポインタの座標に応じて図形を描画する TIPS 033：キャンバス上の図形をData URL形式で保存する サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。 TIPS 028：画像が重なった場合の処理方法を指定する globalCompositeOperationプロパティを利用することで、画
第2回 JSONを使ってみよう！ | Think IT
JSONを使ったAjaxアプリケーション 前回はJSONの概要と記法、そしてJavaScriptでの利用方法について説明しました。連載2回目となる今回はAjaxアプリケーションでのJSONの利用方法を、サンプルを作成しながら紹介していきます。 なお、本記事のサンプルを実行するにはApacheなどのWebサーバが必要になります。また、本記事の後半ではPHPを用いた動的なJSONの生成方法にも触れますので、Apache上でPHPが利用できる環境を用意してください。環境の構築方法については割愛します。 prototype.jsについて prototype.js（http://www.prototypejs.org/）はさまざまなJavaScriptライブラリの中でも最も初期に登場したもので、多くのAjaxアプリケーションで利用されています。 DOMの操作などAjax以外にも便利な機能を備えていま
[ThinkIT] 第1回：最新SNS事情 (1/3)
SNSサイト「mixi」を運営するミクシィが上場したニュースは記憶に新しい。ここ数年で多くの人にとってなじみのなかった「SNS」というものが、急に身近になり、新橋の居酒屋でもmixiやSNSといった言葉が飛び交うようになっている。 最近ではSNSを社内に取り入れ、コミュニケーション活性化につなげられないだろうかという声も多くなっている。そこで本連載では、オープンソースのSNSエンジンとして注目される「OpenPNE」を使った社内SNS構築のコツを伝授していく。 しかしSNSが私たちの生活に急速になじんでいく一方、「SNSとは何だろう」という、いまさら人に聞けない疑問を抱いている方もいるのではないだろうか。そこで第1回の今回は、SNSの歴史を振り返りつつ、現在の利用状況を見ていき、改めてSNSとは何かを考えていく。 SNSは「Social Networking Service（ソーシャルネッ
[Think IT] 第1回：JSONってなにもの？ (1/3)
JSONとは何か? JSONとはJavaScript Object Notationの略で、XMLなどと同様のテキストベースのデータフォーマットです。 その名前の由来の通りJSONはJavaScriptのオブジェクト表記構文のサブセットとなっており、XMLと比べると簡潔に構造化されたデータを記述することができるため、記述が容易で人間が理解しやすいデータフォーマットと言えます。 なお、JSONは2006年に「RFC 4627（http://www.rfc-editor.org/rfc/rfc4627.txt）」として公開されています。 例としてXMLとJSONで同じデータを記述したものをリスト1とリスト2に示します（図1）。 リスト1のXMLではすべての情報をタグで囲んだテキストノードとして記述していますが、XMLでデータを表現する場合、データの記述方法として属性とテキストノードの使い分けが
スマホアプリ開発にも役立つHTML5の8つの技術
前回でお伝えしたように、シリコンバレーでは特に昨年あたりから「オープンなWebの技術でスマートフォン向けアプリを開発」という動きが強くなってきています。そして、オープンなWebの技術を語るときに欠かせない存在のひとつとしてHTML5が挙げられます。 今回はスマートフォン向けアプリケーション開発の観点からHTML5をおさらいしてみましょう。 1. HTML5の8つの特徴的な技術 HTML5には「セマンティックス」「オフライン＆ストレージ」「デバイスアクセス」「コネクティビティ」「マルチメディア」「3D、グラフィックス、エフェクト」「パフォーマンス＆インテグレーション」「CSS3」という8つの特徴的な技術があり、各技術を表すロゴも決められています。 以下では特に、これら8つの技術を使うとスマートフォン向けWebブラウザで何ができるのかについて、簡単に振り返ってみたいと思います。 1）セマンティ
ネイティブアプリで作る？Webアプリで作る？
1. Walled Gardenからの脱却 筆者は2010年以降、シリコンバレーに数ヶ月単位で滞在しながらスマートフォン周りの最新動向を追いかけているのですが、2011年あたりからモバイルデベロッパーによる「Walled Gardenから自由になろう」という動きが強まってきたように思います。 Walled Gardenというのは直訳すると「塀で囲われた庭」ですが、ここではサービス事業者によるクローズドなアプリケーション開発・提供環境のことを指しています。具体的には、例えばiPhone/iPad向けアプリケーションを開発・提供する場合、デベロッパーはApple社独自の開発言語「Objective-C」を習得してアプリを開発し、App Storeの審査に通って初めてリリースとなりますが、販売は同社のApp Store上で行うことが義務づけられています。また、App Storeでの販売額のうち3
[Think IT] 第3回：Rubyスクリプトを動かそう！ (1/3)
いまさら聞けないRuby入門 第3回：Rubyスクリプトを動かそう！ 著者：伊藤忠テクノソリューションズ 大場 光一郎 公開日：2007/12/21（金） Rubyスクリプトを作ろう 「第2回：Rubyを動かそう！」ではirbを利用し、試しながらRubyを学びました。irbに入力したプログラムはirbを終了すると消えてしまいます。そこで最終回の今回は、繰り返し何度も実行できるようにプログラムをファイルに保存してRubyスクリプトを作成してみましょう。 SciTEエディタを使ってみよう Rubyスクリプトの作成にはエディタが必要です。今回は「第1回：Rubyをはじめてみませんか？」でインストールした「One-Click RubyInstaller for Windows」に付属しているSciTEというエディタを使ってみましょう。SciTEはRubyプログラムを認識して構文を綺麗に色分けして
[Think IT] 第2回：Rubyを動かそう！ (1/3)
プログラムを動かそう 「第1回：Rubyをはじめてみませんか？」ではRubyの特徴を紹介し、使いはじめるための準備をしました。今回はRubyを実際に動かしならプログラムに親しんでみましょう。第1回で用意したリファレンスマニュアルを参照しながら進めると、より詳細な情報がわかります。 irbコマンド Rubyにはirbコマンド（Interactive Rubyコマンド）という対話的にプログラムを試せる環境が付属しています。irbは入力したプログラムをすぐに実行でき、結果も即座に確認できるためプログラミングの学習に最適です。 本記事ではirb上でプログラムを動かしながら学んでいきます。Rubyに限らず、すぐに試せる環境を使うことは、楽しくプログラムするコツでもあります。ちょっと気になることはirbを使って納得するまで動かしてみることをお勧めします。 Hello Wolrd. プログラムの入門では
[Think IT] 第1回：Rubyをはじめてみませんか？ (1/3)
いまさら聞けないRuby入門 第1回：Rubyをはじめてみませんか？ 著者：伊藤忠テクノソリューションズ 大場 光一郎 公開日：2007/11/7（水） 2007年11月の連載ランキング5位（一覧を見る） はじめようRuby Webアプリケーションの開発手段としてRuby on Railsが爆発的に広まっています。Twitter.comのような秒間4,000メッセージを処理する高負荷なサイト構築に使われていることや、企業のシステム開発の標準プラットフォームとして採用が発表されるなど、利用範囲が拡大し、Rubyについての記事を目にする機会が増えてきました。 またRuby技術者認定試験もはじまりました。これからいっそうRubyは企業における採用が増えていくことでしょう。さらに利用が広がるプログラミング言語Rubyを、この連載ではじめてみてはどうですか？ 手軽なオブジェクト指向スクリプト言語
スマホアプリ開発にも便利な位置情報API - Geolocation API -
TIPS 001：現在の位置情報を取得する 現在の位置情報を取得するには、navigator.geolocationオブジェクトのgetCurrentPositionメソッドを利用します。以下は、Geolocation API経由でユーザーの現在位置を取得し、経度／緯度／方角を表示する例です。 ［リスト］現在の位置情報を取得するコード（current.html） <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>HTML5 TIPS</title> <script> window.addEventListener('DOMContentLoaded', function() { // 結果の表示先（<div>要素）を取得 var latitude = document.querySelector('#latitude
実践！すぐに導入できるセマンティックなマークアップ、4つのパターン
セマンティックなマークアップの実践 前回は、セマンティック・ウェブを中心に、HTML5やマイクロデータのマークアップについて簡単に説明しました。2回目となる今回は、もっと実践的なHTML5を使用したセマンティックなマークアップについて、以下の4つのサイトを例に挙げながら進めていきます。 ニュース配信サイト ブログサイト eコマースサイト コーポレートサイト 上に挙げたサイトの文書構造はそれぞれ異なりますし、また同じサイト内でも、ページによって構成は異なります。また、HTML5の仕様書を見ても、サイトごとやページに応じたような要素の使用例などは詳しく説明してあるわけではありません。 （＊）要素についての説明は、「HTML5の新機能、HTML4との違い」の記事を参照してください。 1つ1つの要素の定義を理解しても、実際にセマンティックなマークアップを施す際は、サイトによってケースが様々なため、
HTML5の新機能、HTML4との違い
HTMLのこれまでと、進化したHTML5 HTML（Hyper Text Markup Lanuguage）とは、Webページを作成するための言語です。タグと呼ばれる目印を文書に埋め込む（＝マークアップする）事で、画像やハイパーリンクを挿入したり、文書にリストや表などの意味を割り当てる事ができます。 昨今、Webページは、単なる「マークアップされた文書の集まり」というだけではなく、閲覧者が情報を理解しやすいようにデザインされていて、閲覧者からの情報を受け取る仕組みのある「アプリケーション」として利用されるようになってきました。「アプリケーション」としてのWebページの開発には、HTMLの他にも、見た目の表現部分を記述する言語であるCSS、動きを記述する言語であるJavaScriptも使用します。 そのような潮流の中で生まれてきたのが、HTMLの最新の改訂版であるHTML5です。狭義では、W
CSS3だけで実現するアニメーションとは？
はじめに - CSS3のアニメーション機能 CSS3の新機能の中でも注目したいのが、今回解説するアニメーション機能です。これまでWebページ上でアニメーションを実現する際には、JavaScriptやFlashなどを使う必要がありましたが、CSS3により、ある程度のアニメーション機能をCSSのみで実現できるようになりました。 CSS3のアニメーション機能の基本は「CSSの様々なプロパティの値を連続して変更させていく」というものです。例えば、CSS3からの新機能で、要素の透過率を指定するopacityプロパティを連続的に変化させることで、フェードイン、フェードアウトといったアニメーション処理を実現することができます。 最初にCSS3の新機能の一つで、アニメーション機能との相性も抜群の変形（transform）機能について解説し、その後、2種類のアニメーション機能（TransitionsとAni
CSS3の新機能に触れる - モジュール化とマルチカラムレイアウト
HTML5の周辺技術とは HTML5には、以下の図にあるように、Canvasなどのユーザーインタフェースに関係する仕様から、Web Storageなどのデータに関係した仕様まで、かなり広範な仕様が含まれています。そうした様々な技術により、HTML5は優れたアプリケーションプラットフォームとしても位置づけられるようになりました。 しかし、図の下方に記したように、HTML5には含まれていないものの、HTML5と同時期に多くのWebブラウザでサポートされた有用な技術もあります。本連載では、HTML5の周辺技術といっても良いそうした技術の中から、主にCSS3とSVGに注目していきます（＊）。 （＊）どこまでがHTML5の機能で、どこからが周辺技術か、という区切りは厳密には付けづらいところです。今回扱うCSS3やSVGもひっくるめて広義のHTML5である、という扱い方もできるかと思います。 CSS3
検索結果をより目立たせるマークアップとは？
セマンティック・ウェブ 「セマンティック・ウェブ」とは、ウェブ上にあるあらゆる情報を、データとして正確に認識し整理しようする考え方、技術の向上を促進する動きのことです。 筆者はこれまで、複数ある自社SEOのSEOコンサルやアクセス解析を専門としてきましたが、今では気づくとHTML5のマークアップについて調べる日々が続いています。それは、検索エンジンはじめ外部のプログラムにとって扱いやすいマークアップを行うことが、HTML5で強く打ち出された「セマンティックなマークアップ」と直接つながっているからでした。そしてその先には「セマンティック・ウェブ」があります。 このセマンティック・ウェブの実現で、ウェブ上に存在する莫大なデータは整理され、検索エンジンをはじめとする様々なプログラムは、ユーザーが欲しい情報やそれに関連した多くの情報を正確に提供できるようになります。 また、社会や産業の基盤となりう
診断の現場からの提言！Webサイトの脆弱性が潜む場所を知る
これまでの記事でWebサイトのセキュリティについてお伝えしてきましたが、実際にWebサイトの診断を行っていると、脆弱（ぜいじゃく）性が発見されるパターンが非常に似通っていて、同じ脆弱性が同じような画面で発見されることがあります。 最終回となる今回は、実際に診断していて発見されるケースについて、紹介したいと思います。 1. こんな場所に発見されるケースが多い （1）検索画面（トップページや全画面共通） ・発見される脆弱性：XSS（クロス・サイト・スクリプティング） 検索結果を表示する画面で、入力されたキーワードを表示しようとして、XSS（クロス・サイト・スクリプティング）が発生するケースがあります。 汎用的なモジュールを使用する場合は問題がないケースもありますが、自社内や開発業者のハンドメイドの場合には、脆弱性が作り込まれているケースが見受けられます。 （2）入力フォーム（問合せフォームや会
Web SQL DatabaseとIndexed Database API
HTML5では、API群が整備され、データベース関係のAPIも充実します。これによって、これまでよりも柔軟なWebアプリケーションを作れるようになるでしょう。今回は、それらのAPIの中から、「Web SQL Database」と「Indexed Database API」の2つを取り上げます。 Web SQL Databaseの概要 第4回では、Web Storageを紹介しました。Web Storageは、シンプルなデータベースAPIで、Cookieの代わりとして使うなどの使い道があります。ただし、単純なキー・バリュー型のデータベースなので、検索などの複雑な処理には向いていません。Webアプリケーションの中で本格的なデータベース処理を行うには、Web Storageでは機能的に不十分です。 そこで、「Web SQL Database」と呼ぶデータベースAPIが提案されています。Web S
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5を使って、セマンティックなWebサイトを作ろう
SQL Serverデータベースの作成とデータソースの作成