Memo | Branberyheag!! Lab

Proceesing.jsが何気に面白い

12/22

isaohtml5, JavaScript JavaScript, memo, Proceesing, Tips No Comments

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

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

11/29

isaoJavaScript memo No Comments

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

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

10/26

isaoCSS, html5, JavaScript memo, Tips No Comments

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

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

10/26

isaoCSS css3, memo No Comments

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

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

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

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

09/30

isaoJavaScript JavaScript, memo, Tips No Comments

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

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

参考になったサイト

phoneGapの可能性

09/15

isaohtml5, iPhone, object-c JavaScript, memo No Comments

あることをキッカケにiOSアプリを作ろうと思った。本当は、Object-Cで作る予定だったけど、 More

history.pushStateできれいなURLを

09/13

isaohtml5, JavaScript memo No Comments

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


<code></code>window.history.pushState(DATA, TITLE, [URL]);

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


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

changeContents(location.pathname);

},false );

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

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

参考サイト

FlexFTP

05/24

isaoAir, AS3, flex memo No Comments

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

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

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

02/17

isaohtml5, アイデア memo No Comments

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

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

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

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

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

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

01/6

isaoCSS memo No Comments

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

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

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

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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

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

元ネタ

http://d.hatena.ne.jp/cyokodog/20090323/jQueryExFixed
http://d.hatena.ne.jp/cyokodog/20081204/PositionFixed03

タグ

カテゴリー