2010年12月11日土曜日

Google Map API ver.3とATND API の連携

Google Map ver3.からAPIキーが不要になったので使ってみたメモ。

せっかくなのでATND検索APIを叩いて、その検索結果イベントをGoogle Mapに表示するところまで。
(ATND検索APIからはJSONで取得してます)




①事前に呼び出し元のHTMLページ内に

を組み込んでおく。


②下記のように処理を書いて…

/*
* HTMLページで適当なイベント(onclick等)から呼び出す
*/
function callGMAP(){
  str = location.search;
  str = encodeURI(str);
  str = str.substring(1,str.length);
  str = decodeURI(str);
  getATNDSearchResult(str);
}

/*
 * ATNDイベント検索
 */
function getATNDSearchResult(str){
  // JSONPでrequest投げる
  str ="忘年会";
  url = "http://api.atnd.org/events/?keyword="+str+"&format=jsonp&callback=cbfuncATNDSearch";
  var script = document.createElement("script");
  script.src = url;
  $("body").append(script);
}

/*
 * CallBack of getATNDSearchResult()
 * JSONP返り値処理
 */
function cbfuncATNDSearch(json){

 marker = new Array();
 // 開いているマップ情報ウィンドウ
 var curr_infw;
 contentString = new Array();
 infowindow = new Array();

 // マップ初期化
 var centerPos = new google.maps.LatLng(35.658613, 139.745525);
 var mapOptions = {
   zoom : 10,
   center : centerPos,
   mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

 for(var i = 0; i < json.events.length; i++) {

  // マップ上のマークの設置
  var markerPos = new google.maps.LatLng(json.events[i].lat, json.events[i].lon);
  var markerOptions = {
    position : markerPos,
    map : map,
    title : json.events[i].title
  };
  marker[i] = new google.maps.Marker(markerOptions);

  // ウィンドウのHTML
  contentString[i] = "イベント" + json.events[i].title + "概要"+ json.events[i].catch +"日時/場所"+json.events[i].started_at+"~"+json.events[i].ended_at+" @ "+json.events[i].address+"";

// マップ情報ウィンドウ生成
infowindow[i] = new google.maps.InfoWindow({
content: contentString[i]
});

// 開いているマップ情報ウィンドウを閉じて、クリックされたマーカの情報ウィンドウを開く
google.maps.event.addListener(marker[i], 'click', function(e){
if(curr_infw) { curr_infw.close();}
var gm_num = $(this).attr("__gm_id")-1;
infowindow[gm_num].open(map,marker[gm_num]);
curr_infw = infowindow[gm_num];
});
}
}

③呼び出し元ページにmap_canvasタグを書いて、そこに地図を描写。

2010年11月25日木曜日

さくらVPSでnode.js

月額980円で始めるVPS(2週間の無料試用付き)ということで、さくらVPS
サーバサイドJavaScriptとWebSocketの勉強のため、今回はNode.JSで。

iTerm等でターミナルを起動して
  ssh username@割り当てられたドメイン名
   passwaord
の入力でログイン

node.jsのインストールにあたり先行サイトを参照しつつ進めました。

【参照】

・さくらの VPS に node.js + npm + Socket.IO をインストールする手順
http://jmblog.jp/archives/709

◇gitインストール

sudo yum install gitを実行してもエラーで入らず。

http://www.kernel.org/pub/software/scm/git/RPMS/x86_64/repodata/primary.xml.gz: [Errno -3] Error performing checksum
Trying other mirror.
Error: failure: repodata/primary.xml.gz from git: [Errno 256] No more mirrors to try.

延々とエラー対策するも治らず…以後、次の操作したら治ったみたい

  yum check-update (したら治った?)
  yum search git (でgit発見。)
  sudo yum install git





【トラブルシューティング】
・yum 実行時に「Error performing checksum」エラー
http://d.hatena.ne.jp/miau/20100404/1270384404
・CentOS 5.4 に git をインストール
http://ameblo.jp/ootokage/entry-10469782021.html


◇nodeインストール

git cloneしたnodeを、そのディレクトリ直下で
  ./configure
するも失敗。

エラーメッセージから、事前にOpenSSLを入れる必要ありとのこと。
  sudo yum install openssl-devel

その後、再度
  ./comfigure
  make

'build' finished successfully が表示された
  make install

'install' finished successfully で、
  node -v
でVersion(この時点では0.3.0-pre)が表示されたらOK?


◇npmインストール

パッケージを入れるディレクトリでコマンド入力
  curl http://npmjs.org/install.sh | sh

するも、エラーを吐く。

node cli.js cache clean
make: node: Command not found
make: *** [uninstall] Error 127

…node cli.js install npmのところでつまづいている様子。

なので、一旦npmパッケージをダウンロードしておいて展開、
 tar -xzf npm-0.2.8-1.tgz 
  make
  make install


…しても結果変わらず。。

参照サイトを見るとインストールしたnode.jsのバージョン次第で同エラーを吐くとのこと。

なので、前に入れたnode.jsを削除してから、node-v0.3.1.tar.gz を本家から落としてきて
  tar -xzf node-v0.3.1.tar.gz 

再度
   ./configure
   make
   make install
で入った。

再び、npm-0.2.8-1直下でmake,make installで今度はOK。


◇DNSサービスの利用

  1. お名前.comにログイン
  2. 左パネルで、[ドメイン設定 > ネームサーバーの設定 > レンタルDNSレコード設定] と進む
  3. 対象のドメインを選んで、[入力画面へ進む] をクリック。
  4. サブドメインを使うなら、[ホスト名]に入力。ex: www.y-fuji.com
    サブドメインを使わないなら何も入れない。ex: (空).y-fuji.com
    サブドメイン有無の両方にする場合は、それぞれを追加する。
  5. [VALUE]に「さくらVPSで割り当てられたIPアドレス」を入力。
    その後、[確認画面へ進む] をクリック。次の画面で、[設定する] をクリック。
  6. 手続きが終わったら、[ドメイン設定 > ネームサーバーの設定 > ネームサーバーの情報変更] をクリック。
  7. 対象のドメインを選んで、[ネームサーバー情報を入力する] に、「01.dnsv.jp」と「02.dnsv.jp」を入力。確認画面を経て、[設定する] で終了。
設定後、通知メールが届き、数時間程で状態が反映されました。


◇node実行テスト

動作確認のため、以下のようなコードを書いてexample.jsで保存。
※xxx.xx.xx.xxx はさくらVPSで割り当てられたIPアドレス

var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');
}).listen("80", "xxx.xx.xx.xxx");
console.log('Server running at http://xxx.xx.xx.xxx:80/');


ターミナルで
  node sample.js
で起動後、お名前.comの情報が反映されたら、その登録ドメインURLをブラウザで叩くと正常に動作。


◇サンプルアプリ起動

遭遇したエラー:process.nextTick error, or 'error' event on first tick
…installしたはずのモジュールが見当たらない。

一旦、npm uninstallして再インストールするも状況変わらず。

原因は .npmrcファイルのファイルの置き場所と記述内容でした。
.npmrcファイルをnpmモジュールディレクトリ直下に置いて、bin,manのパスを正しく通せばエラーは解決でした。

【トラブルシューティング】
・npmをインストールする
http://d.hatena.ne.jp/yssk22/20100814/1281802092
http://d.hatena.ne.jp/perezvon/20100929/1285780850


◇デバッガインストール

node.js用にEclipseのデバッガがあるので、それもインストール。

毎度のEclipseの[新規ソフトウェアのインストール]>[リポジトリ情報登録]>[利用許可承諾]>[OK]です。

[リポジトリ情報]
・(Name)Google Chrome Developer Tools
・(URL)http://chromedevtools.googlecode.com/svn/update/dev/


デバッガインストール後、テストコードを書いて、
  node --debug dbgtest.js
すると、デバッガ用に5858ポートが開いたと出るので、デバッグ可能に。

以上、環境構築でした。


【その他参照】
・node.js ハンズオン資料
http://dl.dropbox.com/u/219436/node.js/handson/build/html/index.html
・node.js を試してみた
http://d.hatena.ne.jp/ursm/20100925/1285359068

2010年11月18日木曜日

RingoJSインストール周辺メモ

Antが入ってる状態からのメモ@ MacOSX 10.5。

antのパスが通っているかは、ターミナルで確認。
  ant -version

基本的なインストールは本家サイトを参照しつつ、その前後で起きたエラーと対処について書きます。

【インストール時のエラーと対処】
・ERROR①:"Unable to access jarfile"
ant jarコマンドを打ち忘れると出るエラー。
ターミナルから、git cloneまたはダウンロードしてきたringojsディレクトリ直下で
  ant jar
すると、ringojs/build/classesにクラスが生成される。

・ERROR②:"java.io.FileNotFoundException: Can't find file admin/create"
或るサイトを参照してターミナルでアプリ作成コマンドを
  bin/ringo admin/create
と打つも、上記エラー。

正解は
  bin/ringo-admin create
の様子、バージョンの違い?

【アプリ起動】
・デモアプリ起動
インストールしたringojsディレクトリ直下で、
  bin/ringo apps/demo/main.js
のコマンド叩くとjettyが起動して、http://localhost:8080/でアプリが見れます。

・パッケージのインストール(GitであればUserID/RepositoryNameで良いとの公式サイトに…例:ringo-admin install robi42/ringo-hibernate)

上記installコマンド叩くも、ERROR③:”JavaException: java.util.zip.ZipException: error in opening zip file (ringo/zip.js#16)”発生。

zip.jsの16行目と調査リンク先を見る限り、Path周辺が問題の様子

けれども、コマンド打たなくてもパッケージのインストールはできる(※参照)ようなので、
  git clone git://github.com/hns/ringo-cometd.git
でローカルに落としたpackageを、ringojs/packageディレクトリにコピー



その後、ringoコマンドでパッケージ内のmain.jsを叩けば、起動します。
  bin/ringo packages/ringo-cometd/app/main.js





・アプリ作成ヘルプは
  bin/ringo-admin create -h

・Google App Engine の雛型作成は
  bin/ringo-admin create -a






たしかにスケルトンが出来上がってます。
GoogleAppEngineに載せるところは未テスト。


【参照】
・RingoJS Home
・GAE deploy 参照動画
・Comet 参照動画

2010年11月14日日曜日

mahout(ver.0.20) Webアプリ作成手順

前記事で、Mavenが動くようになったので、mvnプロジェクトからmahoutを入れてみます。

ターミナルで作業ディレクトリに移動して、
  mvn archetype:create -DgroupId=sample.recommendWeb -DartifactId=recommendWeb -DarchetypeArtifactId=maven-archetype-webapp -Dversion=0.0.1

下記のようにrecommendWebフォルダならびにディレクトリが生成されるので、
pom.xmlを下の①のように更新し、recommendWebフォルダ直下でJavaソース配置先を作成、
  mkdir src/main/java




①pom.xml

  4.0.0
  sample.recommendWeb
  recommendWeb
  war
  0.0.1
  recommendWeb Maven Webapp
  http://maven.apache.org
  
    
      junit
      junit
      3.8.1
      test
    
    
      org.apache.mahout
      mahout-core
      0.2
     
    
      org.slf4j
      slf4j-jcl
      1.5.8
    
    
      javax.servlet
      servlet-api
      2.5
   provided
    
  
  
    recommendWeb
    
      
        maven-compiler-plugin
        
          1.6
          1.6
          UTF-8
        
          
   
     org.mortbay.jetty
     maven-jetty-plugin
     6.1.7
   
    
  


同フォルダ(pom.xmlを含むことを確認し)で、下記コマンドを実行
  mvn eclipse:eclipse -DdownloadSources=true

これで、Eclipseに対応するので、Eclipseを起動し、このプロジェクトをImport

Import後、②・③のように各ファイルを更新。


②web.xml

  Archetype Created Web Application
  
    web-recommender
    Web Recommender
    Web recommender servlet
    RecommenderServlet
    1
  
  
    web-recommender
    recommendWeb/RecommenderServlet
  


③RecommenderServlet.java
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.mahout.cf.taste.impl.model.file.FileDataModel;
import org.apache.mahout.cf.taste.impl.neighborhood.NearestNUserNeighborhood;
import org.apache.mahout.cf.taste.impl.recommender.GenericUserBasedRecommender;
import org.apache.mahout.cf.taste.impl.similarity.EuclideanDistanceSimilarity;
import org.apache.mahout.cf.taste.model.DataModel;
import org.apache.mahout.cf.taste.neighborhood.UserNeighborhood;
import org.apache.mahout.cf.taste.recommender.RecommendedItem;
import org.apache.mahout.cf.taste.recommender.Recommender;
import org.apache.mahout.cf.taste.similarity.UserSimilarity;

public class RecommenderServlet extends HttpServlet {
   private static final int NUM_TOP_PREFERENCES = 3;
   private static final int DEFAULT_HOW_MANY = 3;

   private Recommender recommender;
   public void init(ServletConfig config) throws ServletException {
      super.init(config);
      try {
       String csvPath= getServletContext().getRealPath("WEB-INF");
       csvPath += File.separator + "critics.csv";
    // モデル構築用のデータをファイルから読み込む
    DataModel model = new FileDataModel(new File(csvPath));
    // ユーザ類似性と類似ユーザ抽出のメソッドを決定
    UserSimilarity similarity = new EuclideanDistanceSimilarity(model);
    UserNeighborhood neighborhood = new NearestNUserNeighborhood(2,
      similarity, model);
    // ユーザベースの推薦を作成
    recommender = new GenericUserBasedRecommender(model,
      neighborhood, similarity);       
      }
      catch (Exception e) {
       throw new ServletException(e);
      }
   }

   protected void doGet(HttpServletRequest req, HttpServletResponse resp)
   throws ServletException {
  String userIDString = req.getParameter("userID");
  if (userIDString == null) {
   throw new ServletException("userID was not specified");
  }
  long userID = Long.parseLong(userIDString);
  String howManyString = req.getParameter("howMany");
  int howMany = howManyString == null ? DEFAULT_HOW_MANY : Integer.parseInt(howManyString);
  try {
   List items = recommender.recommend(userID, howMany);
   writePlainText(resp, userID, items);
  } catch (Exception te) {
   throw new ServletException(te);
  }
 }

 private void writePlainText(HttpServletResponse response, long userID,
   Iterable items) throws IOException, Exception {
  response.setContentType("text/plain");
  response.setCharacterEncoding("UTF-8");
  response.setHeader("Cache-Control", "no-cache");
  PrintWriter writer = response.getWriter();
  for (RecommendedItem recommendedItem : items) {
   writer.print(recommendedItem.getValue());
   writer.print('\t');
   writer.println(recommendedItem.getItemID());
  }
 }
}


recommendWeb/src/main/webapp/WEB-INF直下に、mahoutで検証するデータCSVファイル(critics.csv)を配置します。



















これで、サーブレット設定をしてからjettyを起動。
※WebApp dir をWEB-INF/web.xmlを含むディレクトリに設定
















jetty起動後、下URLのようにパラメータを渡せば、データの推定値が表示されます。
http://localhost:8080/recommendWeb/RecommenderServlet?userID=7







[以下ToDo]
・上記環境はmahout ver.0.20のTasteを利用しているためHadoop未対応とのこと、Hadoop対応版の動作検証
・MahoutでのGoogleAppEngineでの動作検証


以上です。


【参照ページ】

Apache Mahout Project
mahout/レコメンドサーブレットの作り方
Mahout インストール

MacOSX Java・Maven環境設定

macのJavaアドレスがWindowsと違い、忘れそうなのでメモ。
それと、Mavenの使い方も備忘録でメモ。

・動作環境 MacOSX(10.5)

/system/Library/Frameworks/JavaVM.framework/Versions/1.6.0
※1.5他のバージョンは/Versions以下に。

ターミナルでprofileいじり
  vi ~/.bash_profile

vi起動後に下記を追記
==
  export JAVA_HOME=/System/Library/Frameworks/JavaVM.framework/Versions/1.6/Home
  export PATH=$JAVA_HOME/bin:$PATH
==

ターミナルで
  java -version
で、java version "1.6.0_26"になってたらOK


MavenのインストールはEclipse Plugin(Help -> new software install)から
Maven Integration for Eclipse

インストール後、ターミナルで確かめると
  mvn -v

Apache Maven 2.2.1 (r801777; 2009-08-07 04:16:01+0900)のように表示される。


Maven設定ファイルがインストールディレクトリ裏に隠れているので、編集が必要な際は
  mv .m2 m2
でリネームし、そのあと該当の.jarファイルを追加とか.pomファイルの追加。
編集後は
  mv m2 .m2
で元に戻す。

Mavenソフトのインストールはpom.xmlを含むディレクトリで
  mvn -install
コンパイルは
  mvn -compile

GoogleAppEngineインストールでついてきたjettyの起動は
  mvn jetty:run

MavenからMahoutを動かすための環境設定でした。

2010年11月2日火曜日

ヒトマネ提案サイト”ミミクリ”の使用法

Mashup Award 6 (#MA6)に向けて、Twitterのユーザーの関心ごとをキャッチアップするツールを作成しました。


Mimikury(ミミクリ)


【使用法】
①:左上のユーザ名入力欄に「Twitter ID」を入力し、「Sign in with Twitter」ボタンを押してください。

②:ポップアップウィンドウが表示されるので、「認証」ボタンを押してください。

③:ブラウザにTwitterログイン歴が残っていない場合、下記の画面が表示されるので、「ユーザ名」と「パスワード」を入力し、「許可する」ボタンを押してください。

④:認証に問題なければ、下記認証完了画面が表示されるので、「close window」を押して、このウィンドウを閉じてください。
※:下記エラーが発生して、ログインできない場合は、再度ブラウザの更新ボタンを押して、再ログインの処理を行ってください。

⑤:ログインが完了すると、『画面左パネル』にフォロー者のツイートから抽出したキーワードが表示されます。(このキーワードは、2分間隔で自動的に変わります)

⑥:項番⑤『画面左パネル』のキーワードをクリックすると、『画面真ん中パネル』のツイートと、『画面下部』のショーケースの表示が変化します。

⑦:『真ん中パネル』、『下部ショーケース』上のテキストをクリックすると、データベースに情報が登録され、該当部の☆の色が変化します。
※ここでは、気になった情報に対して、クリックをしてみてください。
クリックしたデータからキーワードと思われる情報が『画面右パネル』に表示されます。
使用法は以上です。


なお、本開発では下記ツールを用いました。
  • Google App Engine(Java)
  • jQuery
  • Yahoo! キーフレーズ検索API
  • Twitter Search API
GAE上のOAuth実装にあたり、ご協力いただいたOtchyさんありがとうございました。


2010年8月26日木曜日

デザイン夜塾第6回講義録 - TeamLab猪子寿之さん

Twitterで猪子さんのbot発見、そこでピンときた言葉を引用。

本来インターフェースなんて必要なくて、ユーザーは思うがままに操作したいはずだけど、テクノロジーが未発達なので、仕方がなく使っている http://bit.ly/6kDtAK

第6回デザイン夜塾@デザインアソシエーション
http://www.design-channel.jp/special/academy/

チームラボの作品群と活動を通して、ものづくりへの”考えるヒント”を伺いました。


下記、メモ。

チームラボは、概念やテクノロジー、デザイン、アートを捨て、曖昧なところのものを(…)ウルトラテクノロジスト集団。

現在200名在籍、東京・上海にラボがある。


◇作品紹介①「TeamLabハンガー」
→ハンガーに掛けられた服を手に取ると、それを着た自分のコーディネート映像がスクリーンに投影される。




”New behavior, new interface”
服が気になったら手にとる
手に取る行為=情報行為

プロダクトは単なるネットワークの向こう側と物理世界の我々のあいだに、仕方なく存在するインターフェースとして、再構築してみる実験。

プロダクトの価値≠ハードの機能
プロダクトの価値=ソフトやプロダクトデザインの場、という仮定式を成立してみる


◇作品紹介②:「コレカモネット
→Twitter上のつぶやきで、東急ハンズや無印良品の在庫商品が推薦されるリコメンドbot

自然言語検索&擬人化


◇作品紹介③:アニメーション・ジオラマ「花と屍」2008.12.12.-12.21
→日本の文化をフランスで展示、プロダクトの映像空間演出

空間の付加価値=映像デザインや物語を加えること


~花と屍(HANA TO SHIKABANE)~ from TEAMLAB on Vimeo.


◇作品紹介④:「100年海図巻」
→全長23mの"コ"の字型の壁への投影映像作品、10分間。

100年間で海面水位が100センチメートル上昇した様子をイメージ

昔の人の空間認識は現代人のそれとは異なっていたはず
現代は西洋的なレンズ・カメラ・ビデオを透しての認識感に慣れている

見る場所が固定しているのは西洋的
View Point が定まらないのが東洋的ではないだろうか?

壁面のつなぎめの角で波が曲がらないような錯覚を見せる

日本的空間認識の再評価の実験


百年海図巻100years sea from TEAMLAB on Vimeo.


◇作品紹介⑤:「空書」
→2007年、書の再構築

メディアの中心は紙からデジタルへ。
かつて古代の人々が、亀の甲羅に文字を書いたときに起きた変化と同様に、書を再構築したらどうなるのか。


mudai(kuhsho) from TEAMLAB on Vimeo.


◇作品紹介⑥:「スケッチピストン
→参加可能なメディア

2010年、日テレダベアのTopページやワコムタブレット”Bamboo Play Room”
落書きできるWebページ、描いたペンやスタンプで音を載せられる仕掛け。

おしゃれなものより、ユーザ参加の方が嬉しいのでは?
できなかったことをできるようになると嬉しいという体験から


◇作品紹介⑦:「CountDownJapan 08/09」
→ユーザに焦点を当てた企画、ダンス風景をスクリーンに投影

映像でダンスフロアを囲む


countdown 08/09 from TEAMLAB on Vimeo.


◇作品紹介⑧:「TeamLabボール」
→1個直径1.5メートル程の球体
触ると色が変化する、内蔵の無線装置で1つの球体の色が変われば、他の玉の色も変わるP2Pのような仕組みも搭載


TEAMLAB Ball02 from TEAMLAB on Vimeo.


◇作品紹介⑨:「舞踊、早乙女太一」背景映像作品
2010年、背景映像を提供。役者の動きに併せて、舞台背景の映像”華・竹やぶ・川”が連動。
舞踊と一緒にしたことで、ライブ感を演出。


インターフェースデザインはメディアアートと曖昧になる。
メディアアートはソフトウェアやテクノロジーによる。
これまでの切り分けの概念は意味をなさなくなるのではないか?

これからは「おもろ(おもしろ)ハイテク・おしゃれハイテク」が鍵になると考える。

【Q&A】
・質量があるとダサい?について
→上海万博のUKの展示物が好み。軽い。光る。風にたなびく。解体して持ち運べる。




・発明発想の原点について、クライアント要請から作る?アイディア先行?
→技術先行の場合もある。やりたいことは沢山あるので、それにマッチすればベスト。

・本質的なもの
→茶室が好き。形式よりも表面。なんでその文化が重要なのかの意味が大事。
西洋はバランスとれる美しさ、東洋はバランスを崩したとことに美しさを見出す文化。
本質を変えないものが良い。

・他社のコラボは?
メディアアート系他社をリスペクトするが、一緒にはやらない。
予算、時間に限りあるため。
自社でできない遠い分野の専門家とはコラボする。


--

メモは以上です。


下記個人所感。

作品①:
ユーザの持ってる服画像をまとめてDB登録しておけば、店舗商品との組み合わせがしやすそう。今までは脳内で済ませていたようなことを可視化するのはアリかも。

作品②:
東急ハンズの在庫DB気になります。
巨大在庫で商品提供力のある店舗とネット活用の好例かと。

作品③〜⑥:
デザインできる方々がうらやましいです。
スクリプト書くだけで終わらないFlash界は奥が深くて…

作品⑧:
Arduino好きです、電子工作萌え。

2010年8月17日火曜日

LaserTagで遊ぼう。

LaserTagで建物にバーチャル落書き、こんなことできます[YouTube]。
国内編
海外編

基本的な設定手順(日本語)は下記リンク参照。
http://www.web3dnews.org/archives/2009/03/untite.html

アプリケーションDLはこちら。
http://muonics.net/blog/index.php?postid=26


ソースはC++で書かれていて、openGLとopen frameworksで実装されてるとのこと。
WebCam上の輝度いくらの光源を点で認識するプログラムの感触、open frameworksだと早く動作して良いなぁ。


用意するもの
  • LaserTagアプリケーション
  • WebCam(今回はMacbookなので内蔵)
  • LEDペン
  • プロジェクター(これは外で建物に投影する際に必要)

今回はプロジェクター無しの場合。

部屋を暗くして、WebCamに移される映像範囲内でなぞられた
REDペンの軌跡が、下写真(右上部)のようになぞられます。






























外にプロジェクターを持ち出して、建物の壁を巨大なキャンバスにしてみるのも爽快ですね!

2010年8月14日土曜日

"これも自分と認めざるをえない展"





…言い換えれば、指紋や静脈といった人の「属性」が一人歩きする社会が身近に迫ってきていると言えるのではないでしょうか。「自分」を形づくる要素を探る作品を通して自分自身を発見する機会。(配布資料から)

東京ミッドタウン・ガーデン内 "21_21 DSIGN SIGHT"にて。
本展ディレクターは佐藤雅彦先生。




題材になっていた人の属性は以下のもの。
  • 指紋
  • 虹彩
  • ふるまい
  • 思考
  • 声紋
  • 鼓動
  • 耳紋
  • 輪郭















仕組みは、
  1. 入力装置で情報入力
  2. ネットワークを介して内部データベースと照合
  3. 照合結果を出力装置へ反映
となっていると考えられるものの、入出力装置が見慣れない機器のため新鮮な感覚です。

気になったのは虹彩認証技術を利用した作品「覗かれ穴」と「2048」
※虹彩認証:虹彩は、人間の眼球の黒目の外側にある部分。眼球に光を当てることで、黒目が収縮する際に虹彩にわずかな皺が生じるため、それをカメラで撮影し、データ処理を行うことで個人情報を識別する。声紋のように年齢を重ねても特徴が変化しないため、認証率もトップクラス。
http://www.cgm-japan.com/technique/eye.html

「覗かれ穴」は、小さな隙間から静止画を覗く人がいま見ているポイントを、その人の視点を追跡して、見ている本人の後ろのスライダーに映像として描写するというもの。

「2048」は会場入り口で採取した入場者虹彩情報から、0と1のみの数字を円形状に配列して個人を特定できるようにする。ここで、スクリーン上に並べられた数字を黒板消しで消していっても、大部分が消されない限りは本人と認証されることが分かる。


各展示の技術やデバイスがアート的なコンセプトとともに体験できるイベントでした。

2010年8月10日火曜日

九門崇先生セミナー参加録

講義中心であるものの、4〜5人ひとグループでのディスカッションもあり、考えながらのセミナーでした。
今回はWebとあまり関係ないのですが、アジア隣国とのビジネスは切り離せないと思うのでログを残します。

下記メモ。

2010/8/7(Sat.)@JobWeb 九門崇先生
14:00-17:00

JobWebセミナー「アジアの新興国で必要とされるグローバルリーダーシップと、その磨き方」

イベントURL:
http://www.jobweb.co.jp/gift/seminar/new_seminar/1374/

九門先生執筆記事「中国から探るグローバルビジネス」
http://www.nikkeibp.co.jp/article/column/20080923/100464/


Quiz: 次の数字はなんでしょう?
1)日本:1、インド:25、中国:5
2)日本:9、インド:45、中国:27
3)日本:500、インド:1500、中国:1700

Hint:
HBS(ハーバードビジネススクール)に関連

Answer:
1)HBS における国別の教師人数
2)同上生徒数
3)HBS エグゼクティブコースにおける国別収益

2030年GDP予測
中国1位、インド4位

2010年8月現在での世界携帯電話所有者数=50億人超(全人口うち7割)
ちなみに中国内のみで8億人
新規契約数は2010年6〜7月で5000万台
※先進国・新興国の対の中でも価値観の多様化が起きている


中国No1の家電 蘇寧電機
・日本ラオックス資本に29%出資
・家電量販店から免税店へのシフト
・秋葉原ラオックス本店の店員のうち4割が中国語を話せる

グローバル企業の付加価値
語学だけではない
◇アリの視点、鳥の視点
難しいといわれる点
・代金回収
・模倣品
・…
→上手くいかないのは本当に市場のせい?

Work(1):
Q1「中国で日本企業がビジネスで成功するポイントを3つ考えてください」
Q2「ビジネスに成功するには現地の人をトップにしたら良いか?Yes・Noの視点で」

挙げられた意見:
A1:
・流通
・市場ニーズ
・商習慣を理解する人材
・文化
・ステークホルダー(日中両政府含む)への関わり
・現地network
・リスク対応(為替変動、商習慣、法制度の変化)

事例:
化粧品メーカーFANCLの成功要因
1)"無添加"コンセプトの輸出('94〜)
2)香港展開
3)高級感(日本の1.6~1.7倍の価格で、この価格は輸出&利幅のせているため)
4)広告での知名度向上策
※補注
1)
日:肌の弱い人のため
中:肌に良い
4)
判断の早さ:南京路年間契約5000万円/を即決
銀座4丁目FANCLをフラッグショップとして展開

A2:
・Yes側:
マーケットへの中国人への理解
労働者の団結心
暴走のリスク(ブレーキかけられる人材がいれば抑えられる)
・No側:
CFO、製造責任は日本人に
バリューを生み出すラインは扱いづらい
もてなし、暗黙知は伝達困難

商品をどうするか(製造ラインも変わるが…)
商品をどう売るか?(既存ものの販売戦略)
→現地人トップは増えていく傾向が続く

Point
1.マネジメントの現地化
2.マーケティングPR
3.現地法人への権限委譲

解説1. マネジメントの現地化
共通公用語100名うち2名は駐在員
2010.6.29 日経新聞
・地方政府の関係つくり
・日系企業以外の営業
・地方代理店の活用
・人材育成/採用/評価
・メディア対応
→日本人だけでは対応しきれず

事例:
SAMSUNG、現地専門員として20代から現地に派遣する
Google:
MS元中国R&Dセンター長"カイフ・リー氏"
2005年〜からの高額オファー
中堅メーカー(オーナー系)
・5000名社員うち日本人は10名(経理・技術指導)、総経理は中国人
・スキルシート、人事システムは一部日本式
・日本語を公用語にして社内教育も実施
→現地人トップまたは留学生トップとする傾向も増える

解説2. マーケティングPR
中国広告
・外資は日系広告より100倍程度費用が高い
若者人気のVELO(維絡城)
・クーポン発行時(ケータイ端末)
・日中ボーダーレス

解説3. 現地法人への権限委譲
スピード感が肝。
1.執行役員が現地で決裁
2.上海を第2本社化 ex)大手消費剤メーカー
3.台湾系、オーナー系

Work(2):
Q:貴方が考えるグローバルリーダーとは?
挙げられた意見:
ジェフ・イメルト(GEのCEO、地球全体でビジネスを構想する)
李健煕(イ・ゴンヒ:サムスン会長、グローバルな企業展開)
ビル・トレイン(アシヨカ財団(?)、世界単位でなく価値枠で。次世代リーダーの育成)
ビル・ゲイツ(寄付活動、福祉貢献)
孫正義(ソフトバンクCEO、東西の文化を知る、国に縛られない投資も)
etc...
※民間・非民間問わず

日本のグローバルリーダーは?
1971年TIME誌"SONY盛田氏"
現代…
1970年代で止まった?

Q:グローバルリーダーに必要な条件やスキルは?
先生のコメント:
・自分のルーツを認めること
・相手より先に自分の価値観を理解していること
・自分の哲学やプリンシプルに従って自らの意見を言えること
→多様性"Diversity"は「競争」から「調和」へ。
グローバル=自分が何人であるといった文化枠に囚われないこと
自らへの問いかけ:
・そのイメージは普遍性のあるものですか?
・あなた"らしさ"とは?
・あなたの付加価値は?
・如何にしてビジョンを伝えますか?

◇GIFT事例
中国プロジェクト概要
西安市のオーガニックコットンを市の中心産業とする。

日本の今後の活路:
課題先進国として諸外国へのノウハウ提供
・大量輸送
・都市圏の人口増化
・社会の高齢化
・環境問題対策
日本の強み:
・タイムマネジメント(鉄道網のダイヤ作成、交通遅延情報、、)
・省スペース

グローバルな個人に向けて必要なもの:
Soft Skill
・知識
・コミュニケーション
・エンパシー
Basic Skill
・語学力
・専門性
・自国文化歴史への理解
その他大事なもの:グローバル体感力
・気づきの場に参加する
・外国人旅行者の多い地域を観察する
・留学生と交流するetc.
講義録以上。

【所感】
・リーダーって単語から"項羽と劉邦"が連想される単純な頭の中。
・某企業は、仮に世界政府が存在するとして、それが行うであろうことを実現するという。仮想政府として彼らは統率はするだろうが…迷い子ホイホイ。
・故人いわく未来に向かわないものは往々にして無意味とのこと。普遍性大事。

2010年2月9日火曜日

P5球体遊び

気晴らしに作ったもの。
マウスの座標に応じて文字が球体の周りを回転するものです。

コードは下記。
球体の周りのテキストには、任意のRSSフィードを引っ張ってきて遊ぶのも良いかと思います。






















PFont myFont;
int rad = 100;
int theta = 0;

void setup() {
size(600, 600, P3D);
myFont = loadFont("Georgia-48.vlw");
textFont(myFont, random(20,32));

}

void draw() {

String[] msg = new String[13];

for(int num = 0; num < msg.length; num++){
msg[num] = "message"+num;
}

background(225);
//stroke(255, 50);
noStroke();
lights();

translate(300, 300, 0);
rotateX(mouseY * 0.05);
rotateY(mouseX * 0.05);
fill(230, 230, 230);
//sphereDetail(mouseX / 4);
sphere(100);

for(int i=0; i< msg.length;i++){
theta = 30*i;
rotateX(PI/3.0);

if(i%3==0){
//text(msg[i],100+10*i,100+10*i,100+10*i);

fill(0, 102, 153,100);
text(msg[i],rad*cos(theta),rad*sin(theta),100+10*i);

}else if(i%3==1){

fill(102,102,255,100);
text(msg[i],rad*cos(theta),-rad*sin(theta),100+10*i);

}else{

fill(153,0,51,100);
text(msg[i],rad*cos(theta),rad*sin(theta),100+10*i);

}
}

}

2010年2月7日日曜日

proce55ingとWordle

wordleはタグクラウドを簡便に作成可能なWebサービス。

下記画像はSocialBookmarkサービスのDeliciousで保存したタグを
一覧表示したものです。

ブラウザ画面上でテキストのフォント、カラー、配置を調整できるので、
遊んでみると面白いかも。







































ProcessingからもWordleを扱うライブラリ”wordookie”があります。
※JRE ver.1.6以上で動作するようで、MacOSXの人はJava Preferencesを開いてJavaの実行環境を要調整。

参考動画はリンク先のもの。




およその使用法はサンプルに沿って下記。
import wordookie.*;

static String FONT = "MingLiU";

//フォントの最大値、最小値を設定
static final float MAX_FONT_SIZE = 100f;
static final float MIN_FONT_SIZE = 12f;

//テキストで表示するカラー群を格納
static color [] TEXT_COLORS = { #F6EFF7, #BDC9E1, #67A9CF, #02818A };
color BACKGROUND_COLOR = color( 0 );

//表示するテキストを格納
static String [] wordInput = { "Hello",
"Guten Tag",
"\u3053\u3093\u306b\u3061\u306f" , //日本語の“こんにちは”
"Buenos Dias",
"Bonjour",
"Buon Giorno",
"\u4f60\u597d" }; //中国語の“你好”

java.util.List wordList;

int wordIndex = 0;
PFont font;
Layout layout;

void setup()
{
size( 1024, 768 );
smooth();
frameRate( 30 );

font = createFont( FONT, 48 );

// load words
this.loadWords();

// sort words by weight, decreasing
this.sortWords();

layout = new Layout( this, BACKGROUND_COLOR );

background( 0 );
}

void draw()
{

・wordListに含まれる各要素を取り出してフォント、カラー設定
・wordListの各要素のフォントの大きさ、表示テキストの配置を設定


これを動かすと画像のように、ウィンドウ上に表示されます。

Blogger Syntax Highliter