ideacloud blog - 名古屋のWEB制作会社アイデアクラウドのブログ » Lab

WEBの価値向上させるために、心に描くWEB戦略ピラミッド「The Web Strategy Pyramid」

tanaka — Tue, 29 Jun 2010 09:18:19 +0000

WEBの制作で様々な案件を携わらせていただいておりますが、
よく質問をうけるのが、どうしたらWEBをよく出来るのか？
どうしたらたくさんの人に評価されるWEBになるのか？

とりあえずSEO対策が重要ですよねと、多く聞きますが、
もちろん重要ですが、それだけでは、WEBのアクセス数は増えても
価値には繋がりづらいです。

海外のサイトですが、WEBの制作や、運用の戦略を
上手く表したのが上記のピラミッド。

一目瞭然ですが、下部に行くほど
重要で、しっかりしていないと、上が不安定になります。
なにも難しい話ではなく、1に内容、2に使い勝手、
そして外から如何に発見してもらうかという構造になっています。

このピラミッド単純ですが、真理を捉えているような気がします。
さらに詳しく読んでみたい方は、下記の原文からどうぞ。

The Web Strategy Pyramid: A Well-balanced Web Strategy

AR（拡張現実）用のマーカーを作る。

tanaka — Tue, 20 Apr 2010 06:58:49 +0000

レイヤーをカメラに被せるキーは様々なトリガーがありますが、
現在一般的なのはQRコードのようなマーカーというものを
カメラに認識させて、レイヤーをカメラ上にかぶせると言うもの
多くの場合が.patというパターンファイルをマーカーとして使い、
このpatをARのプログラム側で予め読んでおくという手順になります。

ソースも公開されていますが、簡単にpatが作れるジェネレーター
ARToolKit Marker Generator Onlineでマーカーを作ってみたいと思います。

マーカーを実際写してカメラに読み込ます場合と、
イメージをロードする方法と２種類あります。
どちらも簡単にマーカーを作ることができますが、
カメラからだと部屋の明るさによって認識されないことがあるみたいです。

下記が実際作ったマーカーでシンプルキューブを
読み込んでいるさせている例です。

マーカー自体はジェネレーターを使えば簡単に作ることができます。
FLARのマーカーではなくてマーカーもオリジナリティを出したい
という方はどうぞ。

ARToolKit Marker Generator Online

Papervision3D vol.1「Papervision3D インストールから球体回転まで」

tanaka — Wed, 14 Apr 2010 08:16:28 +0000

現在FLARToolkitを使って色々と開発をしていますが、
表現をより豊にクオリティを高くするためには、
Papervision3D をもう少し使いこなせないといけないなということで、
改めて１から勉強してみようと思い、メモがわりに勉強したことを残していきたいと思います。

今回は「Papervision3D インストールから球体回転まで」。

1.Papervision3Dのインストール

インストールは普通のソフトウェアと少し異なり、
SVNリポジトリからダウンロードする必要がありますので、
SVNクライアントをまずセットアップします。
クライアントを「svnX」からダウンロードします。

クライアントだけでは動かないので、「Martin Ott」からライブラリもダウンロード。
インストール後下記のようなウィンドウが出現します。

Nameは任意の英文。Pathには以下のURLを入力して追加。

http://papervision3d.googlecode.com/svn/trunk/

リストに追加されたら、追加されたリストをダブルクリック。
ダウンロードのためのウィンドウが開きます。

色々と入っていますが、今回はAS3での開発ですので、

http://papervision3d.googlecode.com/svn/trunk/as3/trunk

以下のファイルを任意の場所にダウンロード。
ダウンロードしたら、ディレクトリパスをFLASHの設定の
ActionScript3の設定からパスを設定。

以上で、インストールは完了です。

2.動作確認のために球体が回転するというデモを作成する。

上記のようなオブジェクトをPapervision3D で表現します。
今回は外部asから読み込むような形で、コードを制作しました。
事細かくコメントアウトをしましたので、
ご参考までに御覧ください。

package{//のようなもの外部からASを呼び出すときに必要

	//ここから必要な機能をインポート。import+機能で呼び出し。
	//アスタリスクは全ての命令という意味。
	//下記の場合はPV3Dのviewとpromitivesの機能全てをインポート。
	import flash.events.MouseEvent;
	import org.papervision3d.view.*;
	import org.papervision3d.objects.primitives.*;

	[SWF(backgroundColor = "#000000", width="400", height="300")]

	public class MyCube extends BasicView{
		//クラス名を指定 class名はasのファイル名と一致させること。
		//publicはどこからでも参照できるという意味。
		//extendsはその単語以下の機能を継承して使わしてもらうという宣言。
		//この場合はBasic viewの機能をこのクラスで使うという意味。
		//この機能は上記のimportで取り込んでおかないと使うことができない。
		//Basic view.asはディフォルトでカメラを設定してくれるクラス。

		//ここからコンストラクタ。コンストラクタはインスタンス
		//（オブジェクトの実体）を作り、インスタンスを初期化することにあります。
	  public function MyCube() {		  

		 //半径300、縦40分割、横40分割の球体（Sphere）を作る
		var mySphere:Sphere = new Sphere(null,300,40,40);

		  //シーンに配置
		  scene.addChild( mySphere );

		  //マウスイベントの定義
		  stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);

		  //レンダリング開始
           startRendering();
			  }

	  //イベントの処理の設定-マウスの動きでインスタンスが回転
		private function onMouseMove(e:MouseEvent):void {
			var pitch:Number = -mouseY * 0.5;
			if (pitch >= 0)
				pitch = -0.1;
			camera.orbit(pitch, mouseX * 0.8);
		}
   }
}

jQueryを勉強しようvol.2「jQueryのセレクタと記述方式」

tanaka — Tue, 16 Feb 2010 12:03:22 +0000

第一回目は「jQueryを勉強しようvol.1「jQueryのraedy関数について」」というエントリーで
基本的な命令の出し方を学びましたが、今回はjQueryを使った時に、
HTML側の要素を指定する方法につてまとめました。
　

　

セレクタと記述方式

要素を指定するにはセレクターを指定する必要があります。
セレクタの指定形式は下記の通り

$(function(){
	$("セレクタ名").jQueryの命令部分
	});

とセレクタ名を指定しておいて、ドットで区切り、
命令を記述します。jQueryの場合ほぼ全ての形式が上記の形で
書く事になりますので、この構造を覚えておきましょう。
　
　

具体的なセレクタ

上記コードの「セレクタ名」と書かれている所には何が入るのか？
下記のコードだとliという要素に対して、CSSのcolorプロパティを
赤に変更せよという形になります。

$(function(){
	$("li").css("color","red");
	});

もちろん要素だけではなくて、CSSと同じような感覚ID名、クラス名、
子要素のみだったり、グループだったり、jQuery独自のフィルターなど、
様々な範囲のセレクタ指定方法が準備されておりセレクタの指定の方法は多数あります。

海外版にはなりますが、セレクタのチートシートが便利ですので
セレクタ一覧が見たいと言う方は「jQuery Selectors | Refcardz」をどうぞ。
　

セレクタに関する役立ちそうなエントリー

jQuery を高速に使う CSS セレクタの書き方 – てっく煮ブログ
 jQueryのセレクタ基本 – ［JavaScript］All About
jQueryのセレクタを徹底マスターするのに最適！『jQuery Selectors』 – IDEA*IDEA ～百式管理人のライフハックブログ
　

jQueryを勉強しようvol.1「jQueryのraedy関数について」

tanaka — Sun, 14 Feb 2010 02:54:45 +0000

今流行のjQueryを基礎からもう一度、やりなおそうと思っています。
本当に基本的な部分は理解しているので、jQueryの初期設定や読み込みなどはとばして、
関数的なところから追っていきたいと思います。

ready関数について

通常ブラウザはソースコードの上から順番に読んでいき、
head要素内のscript要素にbody内の要素のHTMLを操作する命令を買いても
まだscriptを読み込んだ時点で、HTMLが読み込まれていないので、
命令を受け取っても指示する部分が無く、思った通りに動きません。

このready関数と言うのはHTMLが読み終わった後に命令を実行すると言う関数。
これで、head要素に命令を記述してもHTML側も全て読み終わったタイミングで、
命令が実行されます。

記述例

$(document).ready(fanction(){
	ここに命令がはいります！
	});

ready関数は省略も可能で上記のコードと同じ意味を持ちます。

$(fanction(){
	ここに命令がはいります！
	});

表示前にアラートを出したい時とかは別ですが、
アニメーションを与えたり、HTML側のデザイン要素を指定する場合が多い
jQueryのスクリプトは、ほとんどの場合、まずready関数を記述すると覚えておきましょう。

今年の年賀状はAR（拡張現実）に挑戦しました。

tanaka — Sun, 27 Dec 2009 06:19:24 +0000

今年も、もうそろそろ終わりに近づいていますが、
今日は業務の合間をぬって年賀状を印刷。
本来なら25日に出したかったのですが、
どうしても間に合わず、明日投函します。

今年はWEBの業界へのPRとしてAR（拡張現実）を使って
年賀状を作ってみました。何が飛び出すかは、お楽しみで。
特設サイトは年内には頑張って制作したいと思います。

ただ開いてくれる人がいるのかは微妙な所。
ARの技術は面白いんだけど、見てもらうまでに
クリアしてもらうステップが多いのが難点ですね。
国内携帯でパッと見れるようになれば、もっと広がりそうですが…。

チームを管理する6つの方法「Manage a Team」

tanaka — Sun, 06 Dec 2009 08:52:14 +0000

Photo: AtomicShed/Flickr

最近単独で動くよりもチームで動くことが増えてきました。
良いところも有れば、人数がいる難しさみたいなモノもあります。

海外のブログ「Manage a Team – Wired How-To Wiki」で
チームの管理術みたいな記事がありましたので、意訳してメモ代わりにエントリーします。

1.ミッションステートメントを定める
ゴールと途中のチェックポイントの共有。全体的な目標はチーム全員が共有する必要がある。
　

2.コミュニケーションハブを確立
チームの情報、ノウハウを共有するための、ツールでチームの情報を統合する。チームwikiやグループウェアなど。
　

3.成果のトラッキング
1週間に一度は何を達成されたかを確認し、次の1週間で何をしなければ行かないかを共有する。
　

4.共有のカレンダー
オンラインのカレンダーなどを使い、チーム内の取り決めたスケジュールを共有する。
　

5.文章として残す
ドキュメントはかさばるし、手間かもしれませんが、後々のことを考えるといくつかの取り決め事項や提案事項などは書面化する。

　
6.振り返りを行う
定期的に今どんな状態なのか、管理がきちんとできているかどうか、ゴールに向かっているかどうかを把握し、学習する。
　

どれも大切な事だと思います。頭の片隅に置いて、動いていきたいと思います。

Manage a Team – Wired How-To Wiki

AR（拡張現実）を勉強していきます。

admin — Mon, 23 Nov 2009 15:01:47 +0000

なかなか新しい領域にチャレンジできないでいますが、
最近、特に面白いと感じ、興味が尽きない、
AR（拡張現実）を少しづつ勉強していこうかなと考えて準備中です。
こちらは技術という分野だけでなく、広告との親和性も高いので、
今後役に立つスキルになりうるのではないかと思っています。

取り急ぎFLASHCS3以降で開発が進められるsaqoosha/FLARToolKit/en – Spark projectを使って
頑張っていきたいと思います。

基本的にはActionScript3.0+3DCGみたいですが、そちらの方面の
スキル不足は否めませんので、仕事の合間を縫いながら、
少しづつ足りないスキルを足していこうと思います。

今年の春ぐらいにはなんとか少しでもカタチにしたいと思っています。

WEBブラウザ別ベンチマーク

tanaka — Tue, 20 Oct 2009 01:09:48 +0000

WEBブラウザも多種多様ですが、主要ブラウザ5つでのベンチマークが
海外のブログ「sixrevisions」で公開されていました。

結果はchromeの勝利。
あくまでパフォーマンス的な部分だけなので、
一概にchromeが優れていると言うわけではありませんが、
CSSの読み込み速度やJavaScriptの読み込み速度は
かなり優位に立っている見たいです。

現在は動作保証環境にchromeを入れてくれと言う
お客様はなかなかいませんが、これだけのパフォーマンスと
googleの後ろ盾で、今後確実にシェアを伸ばしていきそうな気がします。

個人的には様々なブラウザがしのぎをけずってくれるのはありがたいのですが、
仕事的には種類は増えても良いので、統一ブラウザ仕様を固めて頂きたい所です。

via Performance Comparison of Major Web Browsers

海外ブランドのブランディングレポート

tanaka — Thu, 06 Aug 2009 15:00:14 +0000

Good Brands Report 2009

View more documents from PSFK.

ブランドを作る。全てを担っているとは言えませんが、
そういったことも業務領域として確かにあります。

海外のドキュメントですが、海外企業のブランドに付いてまとめた
「Good Brands Report 2009」がなかなか興味深い。
Google、Skypeなど様々な企業のブランディングに対しての評価や
ブランド構築の為の流れなどがまとめられています。

これで全てが分かると言うものでもないですが、
サラッと読むのにはオススメのドキュメントです。

Good Brands Report 2009