The Designium - デザイニウム

Javascriptパウワァ&ドラッグ機能の改善ついて

oikawa — Tue, 16 Feb 2010 10:30:10 +0000

及川です。今日2個目の投稿になりますが、ここ最近まったくJavascriptの話題を挙げていませんでしたので、ひとつ投稿してみたいと思います。

LINK: Chrome Experiments - Not your mother’s JavaScript

GoogleからショーケースとしてJavascriptを使ったデモが公開されています。見てみた感じChromeやSafariでのパフォーマンスはとてもすごいですね。物理シュミレータをつかってもこれだけ快適に動くなら今後もっとおもしろいものが出てきそうです。また最近はHTML5の話題もあり、jQueryとcanvasタグを使った画像の空白に対するテキストの回り込みなど、個人的に胸が熱くなるようなネタも所々に出てきています。

以前社内の会議にて自分はFlashよりJavascriptをやっていきたいということを伝えたときは、「いまどき珍しいねぇｗ」と社長に軽く笑わたりとしたわけですが、まあ何が言いたいかというとFlashもいいけどJavascriptも何気にすごいんじゃね？ということを伝えたかったわけです。

とりあえずどうでもいい話は置いておいて、少し手を加えたドラッグ機能について話してみたいと思います。

主な改善点として、リンクをクリックしながらドラッグしたときの判別処理を追加したことと、ドラッグ機能をつけたことでテキストが括れないという訳がわからない点を修正したものが下記サンプルです。

SAMPLE: DSN | Drag.Function

最初の点ではドラッグの際、移動したいのかリンク先を開きたいのか、iPhoneっぽく距離から判別するようにしました。例ではリンクを押して半径30pixel以上の移動であればクリック解除、それ以内であればクリックでアラート、という感じになっています。

またテキストが括れる括れないについてはその都度ドラッグ機能を解除することで括れるようにしました。ちゃんとつくればPhotoShopの手のひらツールのようにスペースを押していた場合にはドラッグ、なんてことも可能だと思います。

なんでいまさらドラッグ機能？と思うかもしれませんが、話題の対象にiPadがあったので、あの操作性の一部でも通常のブラウザでも試せたらいいなぁ、という感じでつくってみた限りです。

会津絵ろうそくまつり&セルザチャレンジ

oikawa — Tue, 16 Feb 2010 03:40:19 +0000

お世話になります。最近はbreakbotな日々の及川です。
会津に来てそろそろ10年近くになりますが、一度も足を運んでいなかった会津絵ろうそくまつりへ行って来ましたので少し感想を。

会津絵ろうそくまつりは500年の歴史を持ち、伝統工芸品である絵ろうそくに灯りがともるというなかなか粋なイベントです。

絵ろうそくの儚げな感じもさることながら、まだ足跡のついていない雪の上に2人の足跡がすっと進んでいる様はなんともいえない、そんな気持ちにさせてくれました。そういえばソラリアプラザのCMもこんな感じだったなぁ、と思いつつ、なにかこころの中まであたたかくなるような、そんなイベントだったのではないでしょうか。

ところで灯りといえば、BioFachやAPODEAにてご一緒させていただいた手島大輔さんの新しいプロジェクト、“Sell The Challenge”でアロマキャンドルが販売されるようです。今回の絵ろうそくまつりに足を運べなかった方もそうでない方も、このアロマキャンドルを使ってプライベートで楽しんでみては如何ですか？

Sell The Challengeとは
セルザチャレンジは、地域で仕事し自立したい障がいのある方々がものを作り・売ることをお手伝いする活動団体です。

世界各地の障がいのある方（The Challenged Person ザチャレンジドパーソン）がそれぞれの地元で働き、自立生活できるお金が得られるように、それぞれの個性とを生かした競争力の高い自主製品作りと世界市場での販売・伝達をサポートすることを使命として２００９年に活動を開始しました。

LINK: Sell The Challenge

ブラウザの画面サイズリサイズされてもこれでOK Tips（ActionScript3.0）

ミズタニキリン — Thu, 04 Feb 2010 11:30:43 +0000

フルFlashサイトでブラウザの画面サイズが変更されてしまったときActionScriptでな～んしてないとムービークリップの大きさが画面サイズに連動して変わってしまいます。

それだと結構こまったチャンになってしまうときが多いのでキリンはコピペでこれ↓をよく使います(ﾉﾟοﾟ)ﾉｵｵｵｵｫｫｫｫｫｫ-

このサンプルswfを見てブラウザの画面サイズを変更してもらえればわかるかと思いますが、あらま！中央にムビクリが表示させて大きさが変わらないではありませんか！ActionScript3.0です！

Flaファイルダウンロード！！！

Processingおもしろい＆使えるライブラリ10

ミズタニキリン — Fri, 08 Jan 2010 06:30:59 +0000

仕事でProcessingを使うことがありましたので今回はProcessingでおもしろい＆使えるライブラリ10個をリンク集スタイルでご紹介します！

01．顔認識ライブラリ
　「Face Detection Library」を使うと顔認識ができちゃいます。導入方法はこのサイトで紹介されていますよ！

02．Processingでセンサー（Phidgets編）
　ブログでもよく紹介しているPhidgets。ProcessingでPhidgetsを使えますよ♪Phidgetsのサイトの「Programming Resources」にはProcessing用のライブラリは置いていませんが、Java版をそのまま使えるようです！導入方法はこのサイトで紹介されていますよ！

03．Processingでセンサー（Gainer編）
　知っている方も多いとは思いますが、GainerにもProcessingライブラリがあります！詳しくはGainer.ccで紹介されていますよ！

04．ProcessingでAR
　「NyARToolkit for proce55ing」でARできます！！やってみると楽しいですよ！ただ現在は1種類の1マーカを検出のみなので認識できるマーカーの数を増やしてもらえるとうれしいですね。

05．メタセコイア形式データを表示するライブラリ
　「MqoViewer Library for Processing」3Dモデリングデータ使いたい！ってときは便利！

06．サウンド制御
　「Sonia」音の逆再生や音の大きさでグラフィックを変えるできるようになります。このライブラリを使用するには「JSyn Plugin」が必要になりますよ！

07．QRコード生成、読み取り
　「Processing QRCode Library」QRコードの生成、読み取りができます。読み取りはかなり近づかないと認識してくれません(^^;)ので生成専門で見た方がいいのかもしれません。

08．Wiiリモコンで制御
　「Wrj4P5」WiiリモコンがProcessingで使えるようになります。楽しい！！

09．Macの中に入っている加速度センサーを使う
　「Processing Sudden Motion Sensor Library」Macの中に入っている加速度センサーを使う。

10．ビデオライブラリ
「JMyron」標準のキャプチャではできないビデオキャプチャができたり、ビデオ解析のためのライブラリです。QuickTimeを使用していないため速いです！！使用方法はこちらのサイトで紹介されてますよ！

会津若松市の閉塞感を象徴するグラフとその改善策

fujii — Fri, 08 Jan 2010 03:27:39 +0000

冬真っ盛りの会津若松は今、雪に覆われて大変不便。気軽に出かけられないというのは若干の閉塞感を感じるものです。こんにちは藤井です。

ここで、さらに閉塞感を加速させるようなデータをご覧いただきます。

会津若松市(Wikipedia)

注目は、このページの「年齢別人口分布」の部分です。色分けによって全国の人口分布と会津若松市のそれとを比べています。
パッと見てすぐに気づきますが、会津若松市は２０～４０代の人口比率が全国と比べて極端に低いのです。いわゆる「働き盛り」の年代が完全に流出。

この年代が減ってしまうと、地域全体に漠然とした閉塞感、保守的な空気が漂います。

まだあまり失うものがない若者は積極的に革新を起こしていける立場にあります。
しかし年代が上がると一般的には保守的になる傾向が強いので、街に若者がいないというのは行き詰まりの状況というか、ひたすら守りながら衰えていく一番ダメなパターンに陥る可能性が非常に高いのです。

もちろん若者も、数が多けりゃ良いっていうものではありませんが、量が質を生むのは間違いありません。
パレートの法則と言われるように、数が増えれば増えるほど、そのうちの２割くらいは面白いことをやる人間が出てきます。

だからまず絶対数の確保は最低限必要な課題です。

さて、その課題の解決を阻む最大の原因は「雇用」です。この年代を留めるだけの「雇用」が今の会津若松市に絶対的に足りないのです。
もちろん雇用が厳しいのは会津若松市に限ったことではありませんが、少しでも状況の良いところへと移動していった結果、おかしな人口分布になってしまったということですね。

ならば雇用を生み出すための産業強化を、となるわけで、実際会津若松市の長期総合計画にも産業強化は言及されています。
まあこの手の計画は八方美人でないと叩かれるので、逆に言及してないとかなり問題ですが。

計画中で産業について触れられてはいますが、やはり主になっているのは「観光産業」。
会津圏は観光地として有名なので当然と言えば当然ですが、このまま観光産業をメインとして押していくのは、個人的にはリスキーだと思います。というのは、ここ最近の会津の産業構成がだいぶ変わってしまったからです。

これまで会津は大きく分けて次のような産業が柱になってきました。
１．観光
２．製造業
３．IT産業

しかしSpansion Japan、富士通という２大工場がコケたことにより解雇者が続出、産業の柱としての製造業の立場が危うくなってきました。
これだけの大打撃だと、もはや元の状態に戻すには相当の資金と時間をつぎ込まなくてはなりません。それよりは、将来的なリスクヘッジの意味でも別の産業を新たな柱として打ち出すべきではないかと思うのです。

例えば、医療・福祉分野。看護士も男性が増えてきたとは言えまだまだ女性比率の高い産業ですので、この分野を強化し雇用を生み出せば効率良く人口を増やせます。なんと言っても男は女性のいるところに集まりますから。
さらに保育・教育分野を併せて強化すれば、「ゆりかごから墓場まで」カバーできる都市の誕生です。会津若松市は教育・福祉の充実した暮らしやすい都市として移住者が増えるのでした。めでたしめでたし。
　
完璧だ。
　
医療、福祉は今思いつきで書いたんですがなかなか良いですね。もちろんそう簡単に事は運ばないと思いますが、方向としては悪くないと思います。

１つ新たな柱ができればその産業はもちろん、それに付随したりサポートしたりする産業も伸びていきます。IT産業との相性も悪くないのでこちらも伸びるでしょう。そうすると雇用が生まれ、若者が残る。

給付金や緊急雇用などの場当たり的な対策も必要ですが、長期的に見て会津の閉塞感を打ち破るには、新しい産業を伸ばして若者の雇用と新しい地域ブランドを生み出すべきではないかと思うわけです。

うちの近くのハローワーク前の殺人的渋滞が早く解消されますように。

2010年、HTML5を学ぶつもりならスマートフォンを買おう

asai — Mon, 04 Jan 2010 09:57:24 +0000

浅井です。明けましておめでとうございます。

さて、2010年一発目の記事はHTML5についてです。

「現在」W3CのアナウンスによるとHTML5が正式に勧告されるのは2012年。
勧告候補となるのは2010年。そう、今年です。（まぁ、おそらく予定はまた延び延びになりますが。）

※W3Cの規格策定は、Working Draft(作業草稿)→Candidate Recommendation(勧告候補)→Proposed Recommendation(勧告案)→Recommendation(勧告)と進みます。
勧告になってから実装されるのではなく、たいてい勧告候補の段階で本格的な実装がスタートします。（CSS2.1なんてまだ勧告候補の状態ですから）

自分も少しずつHTML5の勉強を行っていますが、クライアントワークでHTML5を採用出来るのは当分先になりそうです。

理由はやっぱりInternet Explorer。
色々な思惑があるんでしょうが、他のブラウザに比べてHTML5への対応が明らかに遅れています。
その上、IE8以降でHTML5への対応が促進されたとしても未だ高シェアを誇るIE6,7がそのままなら意味がありません。
PC向けのWEBにHTML5の面白さが広がるためには、どうしてもIEがネックなんですよねぇ。

ただ、Internet Explorerが圧倒的シェアを誇っているのは、あくまでもPCの話。
スマートフォンに注目してみると事情は変わってきます。

市場調査会社ImpressR&Dの「スマートフォン利用動向調査報告書」によると、国内のスマートフォンのシェアでiphoneが占める割合は46％という数字が出ています。
現時点でiphoneからのアクセスはWebkitベースのsafariが大半、さらに同じくWebkitベースのブラウザを搭載したAndroid携帯も今後増えていくことが予想されます。（今年はgoogle独自の携帯が発売されるという噂もありますね）
業界一位のノキアもWebkitの採用を決定していますし、今後、スマートフォンのレンダリングエンジンはWebkitが独占状態になるんじゃないかと思っています。

何しろ、先の資料を見るに2007年には(W-ZERO3により支えられていた)Windows Mobile搭載のスマートフォンのシェアは3分の1以下となっている状態です。
Webkitがスマートフォン界のIEになる、と考えると、良いか悪いかは微妙なところなんですが、こういった事情からHTML5はPCより先にスマートフォン側で普及していくんでしょうね。

HTML5の仕様的にも、特にローカルDBやアプリケーションキャッシュなどは、通信回線が増大して常時高速な状態となっているPCよりモバイルの方が有効活用出来るんじゃないかと思っています。
(弊社のmixiアプリ担当を見ていると、やはりサーバー⇔クライアント間の通信の削減は重要な課題のようですし)
オフラインgmailなんて、HTML5をどう活用するか？という問いへの模範的回答ですよね。

とりあえず、今年はiphoneでも買って、何か面白いもの作れないか色々いじってみようと思います。

それでは、2010年もよろしくお願いいたします。

マルチタッチディスプレイ vol.02

ミズタニキリン — Thu, 03 Dec 2009 07:26:23 +0000

ミズタニキリンです！今回はマルチタッチディスプレイのほぼ完成版のご紹介です。「マルチタッチディスプレイ vol.01」から時間が経ってしまいましたがようやく形になりました！！写真は反応テストをしたときのものです！！tbeta＋Flashで実装していますよ！！

座標設定の様子

ちょっと見難いですがアクリル板後ろから指を押しています。すると写真の通り5本指を無事反応してくれました！

押し押しテスト

実際にFlashで反応を見てみるとこの通り！押したところにマーカーが出て周りにリングができたではありませんか！！

フラフラテスト

ハード側の作り方はまた次回に説明します。まだ反応が鈍かったりするときがあるのでそこはブラッシュアップしていかないとですね。

ふくしまデジタル情報化フェア2009で講演させて頂きました

maeda — Tue, 27 Oct 2009 16:18:12 +0000

前田です。

昨日は福島県高度情報化推進協議会が主催する「ふくしまデジタル情報化フェア2009」が福島市のコラッセ福島で開催され、その中で『地域SNSから始まる地域活性化～会津sicon（シコン）の事例～』と題して講演させて頂きました。

話の流れとしては、siconを立ち上げた理由は会津にそれなりの期間暮らしたからわかることもあり、そういう意味で自己紹介から会社を作るに至った経緯、事業の内容から実際にsiconを立ち上げるまでを説明させて頂きました。

後半はsiconを立ち上げてわかったこと、ビジョンやコンセプト、siconと地域のリアルなつながりの事例、今後のことなどをお話ししました。前半がゆっくりだったせいか後半少し早足になってしまった部分もあったのですが、ただの事例発表という形にはしたくなかったので、ひとつのストーリーとして見て頂けたなら幸いと思います。

本番で使用したものから冗長な部分をカットしたり一部修正してありますが、プレゼンテーションの資料を下記に公開しますので地域SNSや会津SNS siconに興味のある方はご覧になってみて下さい。

会津sicon事例プレゼン資料

11/7 CSS Nite in 新潟開催!

hata — Tue, 27 Oct 2009 03:08:44 +0000

11/7にCSS Niteの新潟版が新潟県民会館で開催されます。新潟は県が違いますが、実はデザイニウムがある会津若松からは1時間ほどの距離にあります。

今回は「ブランディングとワークフロー」ということでコミュニケーションメディアに進化を遂げたWebサイトはテクニックに頼るのではなくブランディングで勝負をする時代とマーケティング寄りな内容となっているので、業界でも幅広い職種の人が聞いて価値のある内容ではないでしょうか。

お申し込みは以下からどうぞ!