JavaScriptを使って描画するCanvasとは？
Canvasとは、JavaScriptを使って動的に図を描くために策定された仕様です。これまで、動的に図を表示させる方法としては、Flashが代表的な選択肢でした。しかし、Canvasを使うことで、テキストエディタさえあれば、誰でも無料で動的に図を描くアプリケーションを作ることができるようになるのです。 手前みそで恐縮ですが、図1は筆者がCanvasを使って作った棒グラフを描くJavaScriptライブラリのキャプチャ画像です。Canvasを使うことで、簡単な図だけではなく、かなり凝ったデザインも扱うことができることがおわかりいただけると思います。 しかし、Canvasは決してFlashの代替技術ではありません。まずは、Canvasの特徴を簡単にまとめてみましょう。Canvasの特徴としては、「JavaScriptを使って描画する」「文字は描けない」「アニメーション機能がない」の3つがあり
時計待ち受けを作ろう！
Flash Liteで時計待ち受けコンテンツ 携帯の大きな特徴の1つでもあり、人気の高いコンテンツとして、待ち受け画像が挙げられると思います。待ち受け画像は通常の1枚画像だけではなく、Flashを用いたものも多く存在します。 待ち受け画像をFlashで作成することにより、時計や日付を表示させるアニメーションが可能となります。つまり、待ち受け画像に何らかの動作を付け加えることができるので、より表現の幅を広げたものを作ることができます。 今回は、Flash Liteで時計待ち受けを制作してみましょう。まずは簡単に、待ち受けの画面内に時計と日付が表示されるだけのシンプルなデジタル時計について説明します。 時計待ち受けの準備作業 それでは、デジタル時計の待ち受けの作成方法を解説するにあたり、まずはこちらからサンプルをダウンロード（http://www.thinkit.co.jp/images/ar
見た目はどうする？どうできる？
iPhone向けデザインコーディング 今回は、iPhone向けサイトを作るにあたっての、デザインコーディング（HTML／CSS）について紹介します。 iPhoneのSafariはかなり高いレベルでPCとほぼ同じようなブラウジングを行えますし、HTML／CSSへの準拠も高い（というよりむしろ律義すぎる）ので、普通にクロスブラウザ対応を考えて作ってあるWebサイトなら問題ないでしょう。しかし、iPhone固有の制限、設定などがありますので、いくつかのテクニックと注意点があります。 はじめに、テスト用の環境を整えましょう。 まずは、Safari（http://www.apple.com/jp/safari/）をインストールします。Safari3.1ならばiPhoneとほぼ同じような動作をします。理想としては、Macがある方が良いです。フォント有無の問題もありますし、iPhone SDK（http
[Think IT] 第2回：携帯サイトの制作から公開まで (1/3)
サイト規模に合わせて作り方を選ぶ 前回（http://www.thinkit.co.jp/article/143/1/）は、携帯サイトとPCサイトがどのように違うかを紹介しました。今回は、汎用的な携帯サイト作りを行うための制作の基本から、実機テストまで含めた公開までの手順を解説します。 携帯サイトでは、キャリアによる仕様の違いがあるため、これをどの程度まで考慮するか、はじめに考えなくてはなりません。携帯サイトの作成法には、下記の5つの方法がありますが、ここでは「3キャリア対応の静的サイト+プログラム」について紹介します。 1.キャリア別に静的なサイト 2.3キャリア対応の静的サイト+プログラム 3.プログラムによる動的生成 4.CMSを使ったジェネレータ型 5.MobaSiF（http://sourceforge.jp/projects/moba）などのフレームワーク型 3キャリア対応の静
モバイルサイトをリッチ化する
モバイルリッチサイトとは 前回（http://www.thinkit.co.jp/article/145/1/）では、モバイルサイトにもリッチ化やデザインが求められている市場の状況を紹介しました。実際に、最近では次々とデザイン性に優れたモバイルサイトが生み出され、サイトへの集客やサービスへの効果を上げています。 今回は、具体的なモバイルサイトのリッチ表現方法とその導入法・実現方法などについて紹介していきます。 では現状で表現可能なモバイルのリッチサイトとはどんなサイトなのでしょうか。以下にモバイルリッチサイトの制作・表現のポイントを挙げてみました。 ・XHTMLベース（CSS指定、Table、DIVなどのタグに対応） ・VGA（640×480ドット）など高解像度に対応 ・インラインFlash、インタラクティブFlashでの表現 ・動画での表現 図1での制作事例を基に、大まかなポイントを見て
Flash Lite 1.1の基本的なスクリプト制御
Flash Lite 1.1はFlash 4ベースの仕様となっています。とは言っても、厳密にFlash 4とまったく同じ仕様というわけではなく、if文や文字の連結などで記述方法が異なる部分があります。 現在、PC版のFlashコンテンツを制作する場合、ほとんどがFlash 5以上の環境で制作を行っていると思います。そのため、PC版のFlashコンテンツ制作の基本知識がある方でも、Flash Lite 1.1でコンテンツ制作をする場合は、使いなれた記述方法と少し異なる場合があると感じるかもしれません。 それらの相違点と合わせて、基本的な部分からFlash Lite 1.1の解説をしていきます。 ムービークリップのプロパティの取得と設定に関しては、PC版のFlashと同様にドットシンタックスを利用することができます。 まず、ムービークリック「mc」の中にある「a」というムービークリップのプロパ
[Think IT] 第1回：携帯サイトとPCサイトはここまで違う！ (1/3)
XHTML Mobile Profileに対応したHTML 本連載では、「PCサイトを制作してきたけど、携帯サイトは初めて」といった企業や個人クリエイター向けにPCとモバイルの違いなどをふまえ、携帯サイトを公開するまでの入門的なノウハウを紹介していきます。 まず、今回はHTMLの種類やタグ、CSSなど携帯ブラウザによる違いと、画面サイズやキャッシュ容量などの端末による違いについて紹介していきます。 では、早速携帯サイトを作る上でマークアップの基本となるHTMLについて説明します（図1-1）。携帯電話はPCと比べても非常に早い進化を遂げてきたため、どれも基本はHTMLを基準に作られていますが、携帯ブラウザ（iモード、EZweb、Yahoo!ケータイ）で表示可能なHTMLの仕様には実に多くの種類が存在します。 現在市場に出回っている機種ということに限定すれば、XHTML Mobile Prof
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
超！Gauche入門