Branberyheag!! Lab » JavaScript

Bootstrapがいい感じ。

isao — Fri, 20 Jan 2012 15:46:23 +0000

これ、使えるなと思ったので、メモ。

Bootstrapは、Twitterの謹製オープンソースフレームワークなんだけど、とても使えそう。
Webアプリとかさくっと作りたいときに使うといいのかも。

デザインセンスがない俺でも使えそう。「すきなばしょ」に使おうかな。。。

Moogiftさんの記事
http://www.moongift.jp/2011/09/20110901-2/

Bootstrap Image Gallery
http://blueimp.github.com/Bootstrap-Image-Gallery/関連した記事

Proceesing.jsが何気に面白い

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

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

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

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

Proceesing.js公式サイト

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

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で作ることにする。

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

お仕事用サイト「Branberyheag!!.jp」をローンチしました〜

isao — Sat, 13 Aug 2011 22:23:43 +0000

お仕事用サイト「Branberyheag!!.jp」を公開。

最初は、自分のポートフォリオサイトを作るつもりなかったのですが、段々、システムが出来上がってくると、いい感じの完成度になってしまって、これを単純に公開するのも勿体ないなと思って、自分用のサイトにしてみた。

技術的な話をするとWordPressでできていて、カテゴリー、ページ、記事というようなシンプルな構成でできあがっている。ただ、ページ遷移は、なくてJQueryのload()を使って、HTMLを呼び出している。戻る、進むボタンを有効にするため、ハッシュタグをURLに組み込んで、あとはプラグインでの処理を行っている。

あとは、スライドショーは、Arrayに画像のパス、サイズをつっこんで、ページおくりしたときに呼び出している。DOMを操作して、消えたり出したりするよりは、処理が速いような気がする。

これを作ったときにいろいろとTipsが溜まったので、ネタを公開していきたい。

これ、フェーズ１なんで、もう少し手直しと機能を追加する予定。

以前やった、クライアント案件で、この技術を使えばもっといいものができたとこれを作りながら思った。いつか修正したいけどね。関連した記事

JQueryプラグイン「skroll.js」

isao — Tue, 12 Jul 2011 04:42:26 +0000

JQureryプラグイン「skroll.js」がとても実用的だったので、メモ。

何が一番魅力的かというとやっぱり読み込みのファイルがひとつでよいということだと思う。試しに今つくっているポートフォリオに実装してみたら、あっさり組み込むことができた。これは、いい。しかも、iOSも対応なので、このプラグインひとつでスクロールは良いということになるね。これをまともに作ったら相当時間がかかる。自分も前に作ったけど大体失敗というか不完全燃焼にに終わっている。

ちなみにライセンスはMITライセンスになっています。

作り込みというかディテールまでしっかりと組まれているので、とても完成度が高い。

デモページはこちら

OS X Lionぽいスクロールバーを実装できてiOSにも対応した Skroll.js関連した記事

JavaScriptで文字列の数字を数値型に変換する方法

isao — Mon, 30 May 2011 10:16:39 +0000

JavaScriptで文字列の数字を数値型(int型)にする方法がいろいろとあったので、メモ。

str = "123";
num1 = parseInt(str);
num2 = parseFloat(str);
num3 = Number(str);
num4 = str - 0;

いろんな方法で型を変換できる。一番シンプルなのは、num4の数字の文字列に- 0 にしてやると型が変わるらしい。関連した記事

CSSで背景にPNG画像使ったときのIE6対応の注意点

isao — Thu, 19 May 2011 07:04:32 +0000

あるプロジェクトでIE6対応でCSSのbackgroundでPNGを使わないといけなかった時に、いろんな方法があるが、


.hoge {

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./overlay.png", sizingMethod="scale");

}

IEの独自拡張。Direct Xで実現する方法で実装することにした。
このほうがシンプルだったため。

背景は透過になったのだが、aタグが効かなくなってしまった。
えっ？！と思って、調べてみるとどうやらaがこのプロパティ適用内で使われているとリンク自体が効かなくなる現象があるようだ。

対処方法として、「position: relative;」と「z-index」を使い、適用内にもうひとつdivを作ってそこに適用させることで対処できるみたい。
※具体的な対処方法はない。

導入の簡単な「DD_belatedPNG」がおすすめ。

「#hoge」の部分は、適用したidまたはclassを指定してあげるだけ。
とても簡単なんだけど、これもCSSの設計時に留意しなくちゃいけないのが、時々レンダリングが遅れて、とんでもないところにその要素が配置されることがあった。
ウィンドウサイズを大きくしたり小さくしたりすると治る。導入の際には、注意が必要かも。

参考サイト
IE-winで透過PNGを利用する方法関連した記事

Javascriptの配列を空にする方法

isao — Wed, 18 May 2011 16:31:24 +0000

JavaScriptで配列を空にする方法が分からなかったので、メモ


var hoge = [];

hoge.length = 0;

配列の長さを0にすると空になる。これ知らなかった。

参考サイト
Javascript/配列操作

関連した記事

Google Maps API V3が面白い！

isao — Tue, 26 Apr 2011 02:52:04 +0000

ちょっと、Google Maps API V3から離れているうちにかなり進化をしていて、びっくりしたので、メモ。
調べていた頃は、英語版しかリファレンスがなかったのに、今は日本語版リファレンスが出てて、びっくり。かなりV3が安定的なサービスになってきたんだと思う。

特にStyled Map 機能とマーカーのアニメーション機能は、どこかで使ってみたい。しかも、設定がものすごく簡単にできてしまう。（JavaScriptが分かればホント簡単）

Styled Map 機能を試したい場合は、Styled Map Wizard で試すのがいいかも。スタイリッシュな地図が完成する。

マーカーのアニメーション機能については、日本語リファレンスには、記載がないので、英語版を見るとみるいいかも。使い方、実装の参考には、「マーカーアニメーションクラス　アイコンが降ってきたり、飛び跳ねたり！」サンプルとソースがある。

また、「すきなばしょ」を今の技術に合わせたものに作り直したくなるくらい、Google Maps API V3が面白くなってきた。ただの地図表示ツールだけではなく、おもいっきり遊んで地図の表示ツール以上の使い方をするとかなり面白いと思う。

Google先生が作ったサービス
http://www.messagesforjapan.com/関連した記事