JavaScriptだけで角丸Box。Nifty Corners(TM)がバージョンアップ。

ちょっと前に、CSSの角丸の話題が盛り上がり気味だったみたいで、うちの記事「CSSだけで、フレキシブルな角丸ボックスを作る方法」にも結構人が来ていてびっくり。

はてなの方をみると、「tikeda::Diary - 角丸ライブラリ」が人気です。やっている内容は、「Flexible box with custom corners and borders | 456 Berea Street」と同じなのですが、色々サンプルのバリエーションを用意していたりPSD込みだったりで、親切でよさげです。

さて、前のエントリーでも指摘されましたが、CSSだけだとどうしてもマークアップ的に汚くなってしまうという欠点があります。
マークアップを重視するなら、どうせ見た目の問題なんだし、JavaScriptとCSSでやってしまってもいいですよね。

その思想で作られたNifty Cornersというテクニックがあります。これについては、検索していただければ、相当数の解説記事が浮かび上がってくると思いますので割愛…。

今回は、なんていうかそれがバージョンアップしてNifty Corners Cube として公開されたという内容です。

とは言っても、前回のバージョンを使ってないので何がどうなったのかあまり分かってないのですが…。仕様やサンプルは以下の本家のページを見てもらえれば、一番良いと思います。

【本家はこちら】■Nifty Corners Cube - freedom to round

なんていうか、ぶっちゃけこちらの方の記事に刺激されて、もうちょっと掘り下げネタです（笑）
戯れ言日記 - 角丸ライブラリかぁ

コードを簡単に読んでみる。

とりあえず、このサイトのblockquote全てに、角丸を設定してみた。
ちょっと躓いたのですが、なんか、上手く行かなかった人は、niftycube.js内で、別のCSSをリンクさせてるところを、絶対パスで書くと上手く行くかも。

var niftyOk=(document.getElementById && document.createElement && Array.prototype.push);

二つのメソッドと、後Arrayオブジェクトがpushメソッドを使える環境なら"NiftyOK!"

var niftyCss=false;

String.prototype.find=function(what){
return(this.indexOf(what)>=0 ? true : false);
}

Stringオブジェクトそのものに、findというメソッドを追加してます。
自分の中に、引数の文字列があったら、trueを返すという。

var oldonload=window.onload;

oldonloadというオブジェクトに、window.onloadイベントハンドラを複製

if(typeof(NiftyLoad)!='function') NiftyLoad=function(){};

NiftyLoad関数がなければ、作成。

if(typeof(oldonload)=='function')
window.onload=function(){oldonload();AddCss();NiftyLoad()};
else window.onload=function(){AddCss();NiftyLoad()};

oldonloadイベントハンドラに関数が
→セットがされていれば、window.onloadイベントハンドラに、oldonload、AddCss、NiftyLoad関数をセット。
→セットされてなければ、window.onloadイベントハンドラに、AddCss、NiftyLoad関数をセット。

function AddCss(){
niftyCss=true;
var l=CreateEl("link");
l.setAttribute("type","text/css");
l.setAttribute("rel","stylesheet");
l.setAttribute("href","niftyCorners.css");
l.setAttribute("media","screen");
document.getElementsByTagName("head")[0].appendChild(l);
}

■AddCss関数について。（外部CSSを読み込んでくる関数）

niftyCssにTrueをセット。多分、起動フラグ。
niftyCorners.cssというCssファイルをJavascript経由で読み込ませる。
　※JSファイル置いてみたけど、上手く行かなかった方は、
　　ここのCSSのパスを絶対パスにするといいかもです。

function Nifty(selector,options){
if(niftyOk==false) return;
if(niftyCss==false) AddCss();
var i,v=selector.split(","),h=0;
if(options==null) options="";
if(options.find("fixed-height"))
h=getElementsBySelector(v[0])[0].offsetHeight;
for(i=0;i<v.length;i++)
Rounded(v[i],options);
if(options.find("height")) SameHeight(selector,h);
}

■Nifty関数（セレクタとオプションが引数）

基本的にNifty()→Rounded()→AddTop() , AddBottom() と関数が連携して、丸くするみたいです。
こいつがスタート地点です。HTMLでヘッダ部分に書いてあげる関数です。

冒頭でniftyOkじゃなければ、ここで終わり。非対応ブラウザへの配慮。
niftyCssがfalse、つまりAddCss関数が実行されてなければ、実行。

引数として与えられたセレクタ（selector）をカンマ区切りで配列vに入れて、ついでに変数iとhを作る。
optionsがnullなら、空にしておく。
optionsの中に"fixed-height"があったら、後で出てくる"getElementsBySelector"関数（これ、めっさ便利ですな）とoffsetHeightプロパティを使って、対象のエレメントに設定されてる高さを維持する。

そして、後述する"Rounded関数"に対象のエレメントとオプションを渡す。
もし、optionsの中に'height'という文字列が合ったら、対象のエレメントを全て同じ高さにする"SameHeight"関数を動かす。

function Rounded(selector,options){
var i,top="",bottom="",v=new Array();
if(options!=""){
options=options.replace("left","tl bl");
options=options.replace("right","tr br");
options=options.replace("top","tr tl");
options=options.replace("bottom","br bl");
options=options.replace("transparent","alias");
if(options.find("tl")){
top="both";
if(!options.find("tr")) top="left";
}
else if(options.find("tr")) top="right";
if(options.find("bl")){
bottom="both";
if(!options.find("br")) bottom="left";
}
else if(options.find("br")) bottom="right";
}
if(top=="" && bottom=="" && !options.find("none")){top="both";bottom="both";}
v=getElementsBySelector(selector);
for(i=0;i<v.length;i++){
FixIE(v[i]);
if(top!="") AddTop(v[i],top,options);
if(bottom!="") AddBottom(v[i],bottom,options);
} }

■Rounded関数（対象のエレメントと、オプションを引数に。）

まず、ここは元ドキュメントのoptionパラメータのとこを見てもらうと、すぐあれだと思うのですが、

となってます。

まず、最終的にはtlとtrとblとbrの組み合わせになるように、optionsの値を置換。

関数の中で宣言してるtopとbottomに、"left"とか"right"とかの値が入っていきます。
ここが丸くなるのね。

そして、対象のエレメントと、丸くする部分と、元のoptionsの値を、FixIE関数を通した後に、AddTop関数とAddBottom関数を動かして、実際に丸くさせていきます。

function AddTop(el,side,options){
var d=CreateEl("b"),lim=4,border="",p,i,btype="r",bk,color;
d.style.marginLeft="-"+getPadding(el,"Left")+"px";
d.style.marginRight="-"+getPadding(el,"Right")+"px";
if(options.find("alias") || (color=getBk(el))=="transparent"){
color="transparent";bk="transparent"; border=getParentBk(el);btype="t";
}
else{
bk=getParentBk(el); border=Mix(color,bk);
}
d.style.background=bk;
d.className="niftycorners";
p=getPadding(el,"Top");
if(options.find("small")){
d.style.marginBottom=(p-2)+"px";
btype+="s"; lim=2;
}
else if(options.find("big")){
d.style.marginBottom=(p-10)+"px";
btype+="b"; lim=8;
}
else d.style.marginBottom=(p-5)+"px";
for(i=1;i<=lim;i++)
d.appendChild(CreateStrip(i,side,color,border,btype));
el.style.paddingTop="0";
el.insertBefore(d,el.firstChild);
}

■AddTop関数（対象エレメント , 丸くする部分 , オプション　が引数）

そろそろ、実際に丸くするところみたいですー。
一気に変数を宣言。CreateElっていうのは、後で出てきますが、CreateElementのことでした。
d,lim,border,p,i,btype,bk,colorと、たくさんの変数がっ。

それぞれ、後に出てくるgetParentBk関数とかMix関数で、対象のオブジェクトにあったプロパティを、CreateElで作ったbエレメントに与えていきます。getPaddingなんていう関数、最初からあったんですね、全然知らんかったです。使えるのかな。

なんか、おっかけていくのがだんだんしんどくなってきました。こまいです。

【参照サイト】G の索引 (共通 DOM API)

AddBottom関数はほぼ同じだから省略で…。

後、色々サブルーチン的なのも省略で…。

最後に一つだけ。
便利な getElementsBySelector関数が一番最後にあります。

ゴリゴリと、力技でセレクタを分解して、エレメントのリストにしています。
これ、他でも便利に使えそう…。

Comment(0) Trackback(2)

画面動画キャプチャ＆編集ソフトWinkが、2.0になってかなりの機能強化。

ソフトの使い方解説ムービーを作ったりするのに大変便利だと評判だったWinkが、今月の12日にメジャーバージョンアップされていました。これが、かなりの機能強化でびっくり。

■DebugMode Wink　DebugMode Wink [Homepage]

Wink1.xについて

以前の1.xは、

• 一つのフレームに一つのテキストボックスしか入れられない。
  　（かろうじて「コピーして併合」して、2つのボックスを表示することができる）
• 画像の挿入はできるけど、全く変形などできず融通が利かなくて実質使えない
• テキストボックスとカーソルと戻る進むボタンくらいしか用意されていない
• 2バイト文字がちゃんと扱えない。
• テキストボックス内の書式が、文字サイズとフォントしか変更できず、しかも一括でしかいじれない。
• アンドゥができない

などの、使いづらい部分がありました。

でも、それをさっぴいても、操作画面を簡単にキャプチャ出来て、テンポ良く注釈やらストップアンドゴーをつけられて、非常にいいソフトでした。

Flashでイチから作るのに比べれば、下手したら10分の1くらいの時間でチュートリアルムービーが作れるんじゃないだろーか、と。

それに、Flashは使い方を覚えないとだめですけど、Winkは、ちょっと使ってみれば、恐らくWebデザイナー的な知識が無くても使えます。

【参考記事】
MOONGIFT - Wink - オープンソースによるIT戦略支援 -
Passion For The Future: デスクトップ操作を録画してFlashプレゼンムービーに変換するWink

Wink2.0にバージョンアップ

そんなすばらしいフリーウェアですが、この度2.0にメジャーバージョンアップ。

主な変更点は、リリースノートによるとこんな感じです。

本家のリリースノートはこちらから。
■DebugMode Forums :: View topic - Wink 2.0 (windows) released.

• アンドゥとリドゥができるようにした。
• いくつでもテキストボックスを配置できるようにした。
• いくつでもテキストボックスを配置できるようにした。
• ムービー中から他のサイトにリンクを貼れるようにした。
• 画像をちゃんと扱えるようになった。
• テキストボックスとは別に、矢印などのシェイプを使えるようにした。
• 音声を扱えるようになった（キャプチャ中でも、アフレコでも）
• プロパティパネルを使いやすくした。
• ボタンが全く無い状態で、swfを出力した際に、そのswfがチカチカ点滅するバグを直した。
• 編集時には見えるが、出力はされないという設定を、フレームにできるようにした。
• 他のFlash編集ソフトで扱えるように、swfを、Winkで独自の圧縮をかけない設定で出力できるようにした。
• たくさんのバグつぶし

いやはや、使ってみてびっくりです。
特に、アンドゥとリドゥが出来るようになったことと（それまでは失敗したらフレームを消さないといけなかったり）、いくつでもテキストボックスを配置できるようになったのが、素晴らしく便利。

また、画像を読み込んで普通にリサイズして配置できるのも、当たり前といえば当たり前の機能なんですが、是非できるようになってほしかったので、ありがたいです。

また、リンクを貼れるようになったことで、小さなチュートリアルムービーを組み合わせて、Webアプリケーションのデモを作るなんていうことも、できそうです。

出力形式

Macromedia Flash　：　
　　いわゆるHTML+swfです。
Standalone EXE　：　
　　EXE形式です。見た目はFlashで出すのと同じです。結構便利かも。
PDF　：　
　　各フレームを1ページとして、複数ページのPDFを作ってくれます。
PostScript　：　
　　とりあえずPSファイルが出ましたのでIllustratorで開いてみたら、
　　最初の1フレームの画像が出てきました。謎。
HTML or any of the above image formats. ：
　　HTMLと好みの画像形式で、縦にずらっと1フレームごとの画像を並べてくれます。

音声の読込

mp3とwaveを読み込めます。
ただ、フレーム単位でしか配置できません。
つまり、1分の音声を読み込ませると、それが終わるまで次のフレームに進まない模様です。

ユーザーフォーラムでも回答がありました。
http://www.debugmode.com/userforums/viewtopic.php?t=2797

なので、喋りながら、後ろで画面を動かすには同時録音しかないみたいです。
この辺は、次期バージョンに期待！という感じでしょうか。

なにはともあれ、
仕事にも私事にも非常に使えそうで、わくわくしてます。

Comment(0) Trackback(0)

Googleが新しい４つのサービスを始める模様

Google Official Blog によると、Googleが新しい４つのサービスを始める模様です。
Google Desktopのバージョンアップを除けば、実際に新しいのは3つで。

■Official Google Blog: Yes, we are still all about search
http://googleblog.blogspot.com/2006/05/yes-we-are-still-all-about-search.html

Google Co-op

一つ目は「Google Co-op」。

とりあえずの説明としては、Google Co-op - FAQsによると、

Google Co-op gives you a way to improve search in the topics you know best. If you're a doctor, for instance, with specific expertise in a particular disease, you can contribute by using the labels in the health topic to annotate all the webpages that you know provide useful, reliable information about that disease. Your patients and other Google users could then subscribe to your labels and benefit from your expertise.

みんなの専門知識を共有して、情報を探すのを楽にしようというサービスのようです。
Googleもまだ "early stage" って言っているので、これからでしょうか。

一応、多少動き出してるみたいで、例えば

http://www.google.com/coop/topic?cx=health_devel&label=research_overview

みたいな感じで、情報を公開してる色々な機関が登録を行っている模様。
Yahooのディレクトリみたいに、いろいろ審査が入るのかな？
まだいろいろとディスカッション中みたいです。
Google Groups: Google Co-op health topicとかで。

【追記】この記事がよさげでした。なんとなくイメージが沸いてきました。
・米Google，数百種の「Gadgets」やメタ情報をWebページに埋め込む「Co-op」など公開
・Cnet JAPAN ： Media / Art(s)「Google 新サービス」

Google Desktop 4

色々ガジェットがついたこととかのVersionUPみたいです。

Google Notebook

オンラインスクラップブックみたいです。
「紙」みたいな感じでしょうか。使い勝手に期待ですが、あとで読むが個人的に最高なので、これを超えられるかにわくわくしています。Gmailと連携とか。

Google Trends

兎角今回はこれ！ですね！

あるキーワードの検索数などを「都市」「国」「言語」に分けて表示してくれます。

例えば、「Web2.0」はなぜか東京目黒区が圧倒的（笑）
　＃Google Trends: Web2.0

多方面で話題になっていて、例えばこちらの方が色々試されているので、ぜひどうぞっ。
champlasonic weblog : ちょっとおもしろいかも、Google Trends

GoogleTrend は色々面白そうなので、またいじりたいです。
　

Comment(0) Trackback(100)

IE6と並行してIE7を使う方法。

お客さんから、IE７でもWebサイトのデザインは大丈夫なの？という問い合わせがあったのですが、素直にインストールするのは、なんか戻せなくなったりしそうで怖いので、参ったなーと思っていたところ、side by side 共有みたいな形でStandaloneでいけるという記事を見つけました。

　■Test Internet Explorer 7 Without Installing It
　http://googlesystem.blogspot.com/2006/04/test-internet-explorer-7-without.html

これはこれはと思って、とりあえず朝からやってみた。

Side by Side で使うことは、ちなみにMicrosoftはサポート外を表明してます。

　■IEBlog : IE December Security Update ? addressing scattered reports of odd browser behavior
　http://blogs.msdn.com/ie/archive/2005/12/16/504864.aspx

もしIE7β１を、サポート外の side by side でIE6と一緒に使うなら、レジストリの値が正確じゃないので、ちゃんと動かないそうです。

「If a user has ever attempted to run IE7 Beta1 in an unsupported side-by-side configuration with a version of IE6, IE7 Beta1 puts a registry key on the machine the first time a user executes the IE7 version of IEXPLORE.EXE. This key is part of an normal IE7 installation on XP, and will not be configured correctly if an unsupported side-by-side install is used. 」

実際、新しいWindowで開こうと思っても、何も開かなかったり、特定のページを開くとハングしたりはしますので、ご注意をば。
てか、とりあえずGoogleが開かんとです。

やり方

まずは、ここからIE7β２をダウンロード。

　■Internet Explorer 7: downloads
　http://www.microsoft.com/windows/ie/downloads/default.mspx

で、さっきのサイトではWinZipでexeの中身を取り出して、とありますが手元のLhazで出来ました。

"C:\Program Files\Internet Explorer 7"って感じでフォルダを作って中身を放り込みます。

続いて、ie7.bat という名前で、バッチファイルを作ります。
内容は、サイトに掲載されているものそのままでOKでした。

バッチファイルの解説など、詳しくはこちら。

　■IE7 Standalone Launch Script
　http://weblogs.asp.net/jgalloway/archive/2005/12/28/434132.aspx

で、それを起動するVBスクリプトを、サイトの指定どおりに作ります。

最後に、updateというフォルダに入っている「xmllitesetup.exe 」というものを実行します。
これをしないと、タブが使えないです。

後は、先程のvbsファイルをダブルクリックして起動すればOKでした。

とりあえず、基本的にかなり不安定でした。
とりあえず新しいwindowでは開けないです。ちょいちょい落ちます。
レンダリング自体は、普段Mozillaでチェックしていれば、見た目は、あまり問題なさそうな感じです。

これから、こいつも視野にいれていかないといけないですねぇ。
中々制作側としてはしんどくなりそうです。

でも、新しいものは楽しい…。

Comment(0) Trackback(1)