Branberyheag!! Lab » memo

Proceesing.jsが何気に面白い

isao — Thu, 22 Dec 2011 12:00:44 +0000

HTML5でビジュアライズして、遊んでみようと思って、ライブラリを使うか自分で作ろうか悩んでいたときに、Proceesing.jsに出会った。

Proceesingとは、デザイン用のプログラミング言語で、JAVAでできている。
言語としては、かなりシンプルでわかりやすい。外部からデータを取得できるので、ビジュアライザとして使うことも可能。

このJavascript版として、2,3年前にリリースされた。JAVA版とメソッドがほとんど変わらないので、日本語ドキュメントもあって、何気に便利。習得するコストは、低いのではないかと思った。ただ、やっぱり独自の言語なので、クセはあるけどJavascriptが分かれば簡単に覚えられるレベルだと思う。

Proceesing.js公式サイト

日本語版のリファレンス関連した記事

JavaScriptの多次元配列と連想配列

isao — Mon, 28 Nov 2011 15:46:36 +0000

案件で複数のデータの組み合わせで、複雑なデータをフロント側で持っていたかったので、多次元配列と連想配列いついて調べてみた。扱い方は基本的に配列と同じなので、その記述の仕方や処理の例をあがっていたので、メモ。

var a = [
   [1,2,3],
   [4,5,6],
   [7,8,9]
 ];
 var b = [
   [1,4,7],
   [2,5,8],
   [3,6,9]
 ];
 var c = [
   [0,0,0],
   [0,0,0],
   [0,0,0]
 ];

 for(var i=0;i<3;i++)
   for(var j=0;j<3;j++)
     for(var k=0;k<3;k++)
       c[i][j] += a[i][k]*b[k][j];

 document.write( c );

ひとつの配列で複数のデータを持てるので、同じNameで数値を持たせたいときとかに便利。
また、連想配列の呼び出し方は、こんな感じらしい。

document.write( girl["身長"] );  // これで身長を呼び出す。

連想配列のデータ構造はこんな感じ。

var girl ={
  "身長":158,
  "体重":49
};

データを追加したい場合は、、

girl["BMI"] = girl["体重"]/（girl["身長"]*girl["身長"]）  // 恐怖の体脂肪率

さらに、応用して、連想配列のデータを配列にすることもできる。

slotsTypes = {
'cherry': [2,5,10],
'orange': [0,15,30],
'prune': [0,40,50],
'bell': [0,50,80],
'bar1': [0,0,100],
'bar2': [0,0,150],
'bar3': [0,0,250],
'seven': [0,0,500],
'anybar': [0,0,80]
};

呼ぶ出し方は

document.write(slotsTypes['orange'][1]); //結果は、15となる。

関連した記事

画像にbase64をかけてhtmlやCSSに埋め込む

isao — Wed, 26 Oct 2011 01:31:34 +0000

画像にbase64（Data URIs）をかけてHTMLやCSSに埋め込む方法って、知らなかった。。。HTTPリクエストを減らせるので、軽量化に役に立ちそうだったので、メモ。

と書いていたものを

と書けるようだ。

オンラインツールでひとつひとつ変換するのもいいけど、PHPで変換すればアップロードのみで対応ができそう。

上記はあくまでもサンプルだけど、これを関数にしてhtmlに埋め込んで、base64にしてキャッシュすればかなり軽量化されるかもしれない。
未検証だけど・・・

「

オンラインツールもあるので、これもメモ。

Image to data URI convertor
http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/

WordPressテンプレートやWebサービスを作るときに役に立つと思う。

参考にしたサイト

関連した記事

CSS3アニメーションナビゲーションサンプル

isao — Tue, 25 Oct 2011 23:59:16 +0000

CSS3アニメーションを使ったナビゲーションのサンプルで良い感じものがあったので、メモ。

http://tympanus.net/Tutorials/CreativeCSS3AnimationMenus/index.html

JavaScriptを使わずにここまでアニメーションができると、もっと面白い表現ができるかもと思ってしまう。関連した記事

jQuery.Deferredってなんとなく便利のような気がする

isao — Fri, 30 Sep 2011 01:34:18 +0000

非同期で処理するときに処理の順番待ちと処理の予約、処理がうまくいったときと失敗したときの処理をいい具合にしてくれるものだと思う。。。

複雑な処理とかする場合は、使える。
どこかの案件で試してみようかな。

参考になったサイト

関連した記事

phoneGapの可能性

isao — Thu, 15 Sep 2011 11:00:55 +0000

あることをキッカケにiOSアプリを作ろうと思った。本当は、Object-Cで作る予定だったけど、そんなに凝ったものは最初には作らないだろうな、と思って、HTML/CSS/Javascriptで作れる「phoneGap」で何か作ろうと思った。

Phone Gapの一番の魅力はクロスプラットフォームにアプリケーションを作れること。HTMLベースなので、扱い易い。
アプリぽいものを作るには、Javascriptの知識が必要なんだけど、サイトごとアプリ化して持ち歩いても面白いのかもしれない。AJAXで作ったサイトなら、インタラクティブな動きでプレゼンできたり、説明ができたり、コンテンツの再利用ということでは、サイトをアプリ化大作戦をとってもいいのかも。BtoBのほうが、ニーズはあるようなきがする。

ということで、初めてのiOSアプリは、phoneGapで作ることにする。

ネタを考えなくちゃ。関連した記事

history.pushStateできれいなURLを

isao — Tue, 13 Sep 2011 12:00:50 +0000

これは、従来だとhashタグを使って、URLを作っていたんだけど、このメソッドを使うとそれが必要ない。何気に便利。


window.history.pushState(DATA, TITLE, [URL]);

これだけを定義しても戻るボタンを押しても戻らないので、popstateのイベントで取得する。


window.addEventListener('popstate', function(event) {

changeContents(location.pathname);

},false );

で取得して、画面遷移用の関数を用意しておくだけ。

文章だけだとイマイチぴーんと来ないので、あとで、検証をしてみることにする。

参考サイト

関連した記事

FlexFTP

isao — Tue, 24 May 2011 10:01:54 +0000

Adobe AIRでXMLで管理するCMSを作りたくて、FTPでサーバにファイルをアップロードする必要だなとかいろいろと必要な機能を整理をしていたんだけど、果たしてFlexでFTP機能って作れるのかって、思って調べたら、ライブラリがあった。これを使うできるようだ。ただ、Flex2の時に作られたライブラリでしかも更新していないようだ。

とは言っても参考になりそうなので、メモ。
flash.net.soketクラスで作れるようだ。作る前にある程度調べる必要がありそうだ。

URLは、以下のとおり。

参考

関連した記事

Web Worker とWeb Storageの組み合わせで何ができるか考えてみた

isao — Thu, 17 Feb 2011 10:28:19 +0000

正直は、Web Worker使わないだろう・・・って思っていたけど、計算などロジックをやらせて、結果だけをメインのJavascriptでやらせるのが良いんだろうなって、思った。
Web Workerは、DOMの処理はできないので、本当純粋に演算しかできないようだ。ただ、並行処理になるので、フロントエンドでユーザーのイベント処理をしながら、なんらかの計算をさせることができるのは、かなり魅力的なことだと思う。

Web Storageも魅力的な機能のひとつ。
ブラウザにデータ保存ができるので、これも魅力的。最終的には、サーバサイド側でのデータ保存になるのだと思うけど、一時保存などではものすごい役に立つと思う。
ここまで、処理用のスクリプト・保存処理するスクリプト・イベントを管理するスクリプト（インタラクティブのスクリプト）・そして、これらを全体を管理するスクリプトというきれいな分け方ができる。
Webアプリケーションを作る環境は整ってきているし、あとはアイデア次第で、ものすごい可能性を秘めている。

ただ、ビジネス用のアプリケーションを作りにしろ、Webサービスを作るには、バックエンドの必要性が高まってくる。
多分、アプリを使って関わってくる人が１人称、またはデータが消えても問題ないようなアプリだったりする場合は、フロントエンドだけで良いのかもしれない。

スマートフォンで、ペットをブラウザ上で飼う、Webアプリだったらフロントエンドだけでアプリ開発できるとおもう。

こうやって書いていると俺も今つくっているサイトを仕上げたい。関連した記事

IE6でposition:fixedを適用するための手順

isao — Thu, 06 Jan 2011 09:43:39 +0000

今、やっているお仕事で、position:fixedをどうしても使わないといけなくて、いろいろと調べてみた。なので、メモ。

CSSにIE6のみに適用のために以下のプロパティを定義。

html,body{
    width :100%;
    height:100%;
    overflow:auto;
    margin:0;
    padding:0;
}
div#samp{
    position: fixed!important;
    position: absolute;
}

div#samp｛｝は、position:fixed;を適用させたい部分に適用する。html,bodyに定義してあるプロパティで「overflow:auto;」となっているが
適宜調整が必要になってくる。

HTMLファイルで上記の宣言文を忘れずにする。
互換モードでは、使えないので注意が必要。

Javascriptで対応しようと思ったけど、うまくいかなかった。
スクロールするたびにJSのEVENTが反応して、きれいではなかった。

元ネタ

http://d.hatena.ne.jp/cyokodog/20090323/jQueryExFixed
http://d.hatena.ne.jp/cyokodog/20081204/PositionFixed03関連した記事