04 | 2009/05 |  06

  1. 無料サーバー

User forum-FC2BLOG-Info-Edit Template-Post-Edit-Upload-LogOut

CSSやJavascript自習の苦闘史を綴っていきたい。恐縮ですがJavascriptを有効にしてご覧ください。
2005年12月から社会問題も掲載!


スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

パソコンの内部を清掃───大量の埃でファンが異音を発していた!

その異音が最近とみに酷くなっていた

電源を入れて暫くすると、ファンの音が気になって仕方がない。そんな状況が数週間続いていた。常にネットラジオ曲を流しながらパソコンに向かっているので、雑音/騒音お断りであることは言うまでもない。

何故だろう、と考えて原因は直ぐに思いついた。過去に異音がしているのに意に介さずに使い続けて、グラフィックカードを破損させてしまったことを!

昨年 8 月中旬に購入したばかりのデスクトップに、僅か 10 ヶ月で異音が発生してしまうとは!───そのことに驚きを隠せないが、驚いてばかりでは問題は解決しない。

ファンの能力低下によって、パソコン本体内部のエアフローに異常を来せば、幾つかの部品がまた損耗してしまう恐れがある、との判断から、今夜側蓋を開け内部を覗いてみた。

パソコン清掃大作戦

案の定ファンの回りに埃がびっしりこびりついている。喫煙しながらPCに向かっているからその埃は茶色っぽい。

僅か 10 ヶ月での余りの汚れように唖然としてしまったが、兎に角問題を解決しなければならない。

早速ファンとラジエータを取り外し、しっかり掃除機で埃を吸い取り、パソコン内部もエアーを吹き付けて埃を飛散させ、綺麗に清掃して、再起動した。

▲ToTop

そして静音の中でこのブログを...

ファンやラジエータを取り外す際に、何らかのコードの接触を悪くしたり、静電気で部品を壊さぬよう細心の注意を払いながら作業したが、果たして再起動して万が一作動しなかったら非常に困る、と思いながらおそるおそるスイッチを入れたが、Windows Vista の起動を待つ時間の何と長かったことか!

無事に起動し終えてほっとしてこのことを記録しておきたいと思い、このエントリイを書くに至った次第である。

スポンサーサイト

nifty podcasting 落語の終演雑感

iPod、iTunes そして podcasting

nifty podcasting 落語は、iPod と iTunes が登場し、ほぼ同時に podcasting が始まったばかりの頃に立ち上がった「老舗」でした。決して一流ではない落語家の「卵」ばかりを取り上げ、毎週一席ずつ up/downLoad する企画は当時は極めて先鋭的で、画期的でした。

podcasting は iPod 普及に大きな役割を果たしましたが、音楽を主要なコンテンツとして始まったわけですから、この新しい IT 媒体のコンテンツとして落語を取り上げた点で、大きな一石を投じたと言っても過言ではないでしょう。

また、ITと落語という、およそ交わると思えない 2 つのものを結びつけたことが、今日の所謂「落語ブーム」の火付け役となったとも言えるかもしれません。

障害は経費だったのでしょう

podcasting のコンテンツは開始から一貫して無料で提供されました。それによって爆発的な iPod 普及がもたらされたわけですから、Apple 社にとっては iPod をヒットさせるための必須ツールであり、無料であることは障害どころか、ビジネスモデルとして当然の前提だったのでしょう。

しかし、nifty 社にとっては出演料、会場費の負担は、何らかの収益をもたらす新たなビジネスモデルの一環にはなり得なかったということなのでしょう。

▲ToTop

nifty podcasting 落語のコンテンツは聞くに堪えられるものだったのか?

率直に言って最初は新鮮みがあったものの、100回を越える辺りから全体のレベルの低さが気になりだしました。そして名人と言われる落語家が演じた演目を、当の名人で聴いてみると、余りの違いに愕然としたものです。

真打ち前の新進気鋭の落語家だけを集めて報じると言う試みは、極めて斬新で挑戦的で意義深いものだったには違いありません。

しかし悪貨は良貨を駆逐し、紛い物が多ければ多いほどそのビジネスモデルの価値は低下します。

コマーシャリズムに乗りきれなかったのは、結局のところ、演者と作品の質に大きく起因したと言わざるを得ません。

大人の質が問われるのに、何時迄もガキくさい演者ばかりが登場するのでは、聴く方は耐えられません。故に、支持も継続的に得られなかったと言えるでしょう。

jQuery Animation easing といえば「cycle」を語らずして...

Animation / easing といえば著名なプラグインは...

既に言及した Easing Plugin の他に著名なものといえば Cycle だろう。

このエントリイでは後者について言及したい。

Cycle はその筋では(苦笑)相当著名なプラグインだろう。

それは連続して画像を表示する各種アニメーションを提供する。しかもそのサイトでは様々なデモを具体的に掲示しており、 関連サイト では様々な新たな効果を適用したデモを見ることが出来る。

Cycle プラグインは「画像がサイクルする」ことから象徴的なネーミングとなったと思われるが、そのコードを解読することは、jquery.js を使用したアニメーションの学習にとって極めて有益である。

さて、そのコードは漸次改訂されており、当然のことながら改訂の都度行数が増えている。最新の ver 2.65(2009/4/7)は実に千行を超えるコードとなっているが、ver 2.09(2008/01/22) では 535 行だったから 1 年余りで倍の長さとなった。これは jquery.js の 1.3x 系登場を踏まえた改訂も盛り込まれているし、様々な形式の引数への対処を盛り込んだことなども増行の理由だろう。

いずれにしても、この Cycle プラグイン がアニメーションプラグイン作成の教科書となることは間違いない!

▲ToTop

Cycle に学ぶ Animation plug-in の特性

Cycle コードを吟味してみると、それは極めて特徴的な構造となっている。

すなわち、Animation のための CSS 設定において、(1) まず、デフォルト値をオブジェクト形式で設定しておき、(2) 次にそれにメソッドの引数を上書きし、(3) 更にそれを加工して、アニメ前、アニメ用、アニメ後のそれぞれの CSS 設定を作成する───という段取りをアニメーション起動の前に行っていることである。

こうした「作法」はツールチップ plug-in において人気の高い wtooltip.js plug-in でも全面的に採用されており、正確に言えばこの plug-in は Cycle plug-in の作法を踏襲したと言うことが出来るだろう。

翻って我流 plug-in : animatedPopup を顧みれば、そのような「構造的な」作法は採用しなかった。そしてそのことがplug-inの機能拡張において障害にもなっている。

そこで、Cycle.js や wtooltip.js で採用されている構造的な作法を踏まえて、我流 plug-inを根本から見直し作成し直すべきであると、痛感しているのである。

「著名な」plug-in と同様な構造/作法を踏まえて作ることが、他者からも受け入れられるplug-inにも繋がるし、おそらくは関心も呼ぶことだろう。

▲ToTop

そんなことを感じている今日この頃なのである。

自作 jQuery プラグイン :animatedPopup 後に別のアニメーションを連続起動する

ここのアニメーションは IE では動きません。

jquery.js を使用した Animation 連鎖にチャレンジ

animatedPopup 起動後に、続けて別の Animation を連続起動してみる。

jQuery では連続アニメーションを容易に実行させることが出来る。例えば animatedPopup による表示を終えた後に、その要素を例えば画面内で移動するとか、次第に不透明化しながら消滅させるとか。表示領域を縮小/拡大するとか、様々なアニメーションを連続起動させることが可能だ。

あるいはまた複数のアニメーションを同時に履行させることも出来る。更にアニメーション終了後に callback 関数を起動させて何らかの処理をさせることも可能だ。自作プラグイン animatedPopup の連続起動も行えるだろう。

このエントリイではそんな複数アニメーションの連続履行を試みる。

連続アニメ 1. animatedPopup 後の要素を画面内で移動する。

animatedPopup 関数起動が終了すると、ユーザーが隠蔽操作を行わない限り、その要素は画面内に表示され続ける。これを活かして当該要素を自在に画面内に移動させてみる。

表示するコンテンツは先のエントリイ同様に他サイトの写真素材を活用し、画面内を次のように移動させる。まず画面左上に animatedPopup 表示する。その後、slideUp、slideDown で遊んでから、画面内を右上 → 右下 → 左下と時計回りに連続して移動させ、最後に最初の位置に戻してから fadeOut させてみる。

移動速度は 0.5、1、1.5、2 秒と次第に遅くし、それぞれの動きを加減速する easing も微妙に変化させ、消滅には 2.5 秒を掛けてみた。

この一連の動きを実行するには、下のボタンをクリックするだけでよい。この一連の自動実行アニメーションを楽しんで(?)戴きたい。

(出典は pixta

▲ToTop

連続アニメ 2. animatedPopup 後複数のアニメーションを同時起動する。

今度は animatedPopup によるアイテム表示後に、それを画面内で横移動させながら、フェードアウトさせ、直ぐにフェードインさせ、その後上へ移動させてから消滅させる。

(出典は pixta

連続アニメ 3. 2つの animatedPopup とその後のアニメーションを活かしつつ、相互に連続起動する。

下のボタンをクリックすると上で定義した 2 つのアニメーションを連続実行する。もう一度同じボタンを押した場合には、連続実行の順番を変えて実行するようにした。

▲ToTop

ここで実現した連続アニメーションのコード解説

ここで行った連続アニメーション作成の過程において、animatedPopup プラグインは更に進化を遂げざるを得なかった。元々連続アニメーションを想定していない仕様だったからだ。

その拡張に関する詳細は別項にて述べるとして、ここではこのエントリイで実現した連続アニメーションのコードについてメモとして解説しておきたい。

連続アニメーションのコード作成過程において、jquery.js のアニメーションコードをますます深く学習せざるを得なかったし、作成途上でスクリプトに工夫を加えた箇所も多数に上ったからである。

■このエントリで実現した連続アニメーションのコード
  // animatedPopup プラグインのインクルード
 1:(function(){var s=document.createElement('script');s.src='http://blog-imgs-31.fc2.com/h/k/o/hkom/my_Utilize_jQuery2.js';s.type='text/javascript';document.getElementsByTagName('head')[0].appendChild(s);})();
   // ボタンの色づけ
 2: $(".btn711").css("backgroundColor","burlywood")
 3:  .mousedown(function(){$(this).css("backgroundColor","plum")})
 4:  .mouseup(function(){$(this).css("backgroundColor","burlywood").blur()});
   // 表示するコンテンツの作成
 5: var contents0="次のアニメーションを起動します。";
 6: var contents1='<img src="http://image.pixta.jp/image/thumb/51/14d687c77d91104811600b9d9916948a.jpg" width=450 height=301 />';
 7: var contents2='<img src="http://image.pixta.jp/image/thumb/41/bf5a19a4278538425a476ed1e113f0a9.jpg" width=450 height=316 />';
 8: // 画像先読み
 9: $("<div></div>").css("display","none").prependTo(document.body).html(contents1+contents2);
10:
11:$(function(){
   // animatedPopup プラグイン終了後に履行する関数定義その1
12: startAfterAnima = function(){
13:  var ani1=$(window).width()-$(this).outerWidth()+"px";
14:  var ani2=$(window).height()-$(this).outerHeight()+'px';
15:  $("#dispElem").slideUp("slow").slideDown()
16:  .animate({"left":'+='+ani1},500,"linear")
17:  .animate({"top":"+="+ani2},{duration:1000,easing:"swing"})
18:  .animate({"left":"-="+ani1},{duration:1500,easing:"easeInOutExpo"})
19:  .animate({"top":"-="+ani2},{queue:true,duration:2000,easing:"easeInOutSine"})
20:  .animate({"opacity":0},2500,"swing",function(){$(this).empty().hide().css({"opacity":1})});
21: }
   // animatedPopup プラグイン終了後に履行する関数定義その2
22: var startAfterAnima2 = function(){
23:  var ani=$(window).scrollTop();
24:  $("#dispElem").slideUp("slow").slideDown("slow")
25:  .animate({"left":"0px"},{queue:false,duration:2000,easing:"swing"})
26:  .fadeOut("slow").fadeIn("slow").animate({"top":ani},{queue:true,duration:2000,easing:"easeInOutSine"})
27:  .animate({"opacity":0},2500,"swing",function(){$(this).empty().hide().css({"opacity":1})});
28: }
29: // 各ボタンクリック時の animatedPopup 起動
30: $("#btn711-0").animatedPopup(contents0,["c","c"],1500,null,null,true);
31: $("#btn711-1").animatedPopup(contents1,["l","t"],2000,"easeOutElastic",null,null,true,startAfterAnima);
32: $("#btn711-2").animatedPopup(contents2,["c","c"],2000,"easeInOutExpo",null,null,true,startAfterAnima2);
 // 連続してanimatedPopup メソッドを起動する処理
33: // 3 つのボタンの jQuery インスタンスを配列に登録
34: var ary = [$("#btn711-0"),$("#btn711-1"),$("#btn711-2")];
   // 次のアニメーションを起動させる関数
35: var nextFunc =function(jQelem){
36:  if (!$("#dispElem").queue("fx").length){
37:   jQelem===ary[0] ? clearInterval(ival) : clearInterval(ival2);
38:   jQelem.trigger("click");
39:  }
40: }
41: var ival,ival2;
   // 3 番目のボタンに対する toggle イベント定義
42: $("#btn711-3").toggle(function(){
43:  $(this).children(0).text("リゾートプール+清水寺");
44:  ary[1].trigger("click");
    // 2つの待機関数を定義
45:  ival = setInterval(function(){nextFunc(ary[0]);},1000);
46:  ival2 = setInterval(function(){nextFunc(ary[2]);},1500);
47: },function(){
48:  $(this).children(0).text("清水寺+リゾートプール");
49:  ary[2].trigger("click");
50:  ival = setInterval(function(){nextFunc(ary[0]);},1000);
51:  ival2 = setInterval(function(){nextFunc(ary[1])},1500);
52: });
53:});

▲ToTop

コード内に記述したコメントでかなり説明になっていると思うが、苦労した点を中心にメモしておきたい。

アニメーション同時進行

幾つかの箇所でアニメーションの同時起動を試みた。queue:false に設定している箇所が同時進行のためのコードで、具体的には移動しながら slideUp/Down を行わせた。

アニメーション終了後の別アニメーションの起動

jQuery の animate インスタンスメソッドの complete 属性を活用して、animatedPopup メソッドが終了した後に別のアニメーションを起動させた。#124-140 で定義した関数が complete プロパティ値となる関数である。

2 つの animatedPopup 連続起動に最も苦労した

animatedPopup プラグインは jQuery インスタンスとして定義した。そしてここで扱った 2 つの写真表示アニメーションは、それぞれの呼び出し元が別々のボタンであり、animatedPopup には巧みに返値を設定することが出来ていない。つまりメソッドチェーンが使えない。

そこで jquery.js の イベント処理メソッドとして定義されている trigger メソッドを使って、異なる呼び出し元から呼び出される animatedPopup メソッドを連続起動させるようにした。

さて要点はタイマー設定だ。単純に 2 つの animatedPopup を並べるだけでは最後のそれしか作動しないのだ。コード進行はアニメーション実行とは無関係に次行へ次行へと進んでしまうから、前のアニメーションを待つことなく次のアニメーションが起動されてしまい、結局最後のアニメーションだけが表示されるのだ。

このため或るアニメーションが動作している間は、次のアニメーションが起動されないようにしなければならない。

そこで、タイマーを使って次のアニメーション起動を抑制することにした。

そこで問題となるのは、アニメーションが進行中であることを Javascript インタープリタに知らせる方法だ。jQuery インスタンス毎に、メソッド queue("fx") に animation が登録されることを利用する方法が或る書籍に書いてあったのでそれを使ってみた。

2 つ以上の animatedPopup の連続起動を別の方法で行ってみる

もっと巧い方法はないのだろうか、と思いたち本家サイトを改めて眺めてみた。すると、極めて簡単な方法が実は存在していることを思い知らされた。それは jQuery インスタンスの add メソッドを利用するものだ。こんな風にaddメソッドが使えたのか!───と感心してしまった。

しかし、この方法は 1 つの絶対配置要素を使ってアニメーションを実現している animatedPopup では巧く採用することが出来ないでいる。

 90%近いシェアを握っているインターネットエクスプローラの描画エンジンを利用したタブbrowser。沢山のタブbrowserがあるが、多機能、カスタマイズフリー、スクリプト利用等で一日の長がある。Gekkoエンジンへの対応も行われ、IEからの自立独立の方向に向かっている。2005年7月にはIE7が登場する見通しの中で、今後の発展が望まれる。

 多様なCSS作成支援機能を備えた、タグ入力式 HTML&CSS作成支援エディタ。スキンデザインもすっきりしている。テキストエディター上で作成するよりも確実で安全にタグ打ちが出来る。
文字コードを選べないのが欠点。

 StyleNote同様のタグ入力式 HTML&CSS 作成支援エディタ。長年使用してきたが現在StyleNoteに乗り換えつつある。

 クリップボード履歴情報を活用する為のソフト。画像まで履歴を取ってくれるのが嬉しい。このソフトを使わない日は絶対ない程に重宝し、愛用している。

 起動中のウィンドウの「コピーできない」説明文などの文字列を取得し、コピー可能な文字データにするツール。何かと便利。

 ストリーミングデータを保存することが出来るソフト。動画利用には不可欠なソフトだ。

 無料ながらレイヤー機能を有し、スクリプトによる拡張も可能な、sleipnir作者が提供している優れもの画像編集ソフト。

 画面キャプチャソフトと言えばこれに勝るものなし、ではないだろうか? 様々な取得方法を有しており、ブログ作成にもHomepage作成に不可欠だ。Jtrimと並んでWoodyBellsの作品。

 複数ファイルの同時編集は出来ないが、透過pngも作れる画像編集ソフト。
(以下当該サイトから抜粋)初心者にも簡単に操作が出来るフォトレタッチソフトです。多くの加工機能で画像に様々な効果を与えることができます。非常に軽快に動作するため、ストレスなく操作できます。

 Animation Gifファイルを作れる無料ソフト。

 キャプチャソフト。画面内にサイト全体が表示しきれない場合でも、これを使えば全体をキャプチャすることが出来る。

 画像処理。画像のフォーマット変換のみならず、色数やサイズ、圧縮率の変更まで一括処理できてしまう『BatchGOO!』は、大量の画像をまとめて処理したいときに大変便利なソフト。BMP, TIFF, JPEG, PCX, PNG の相互変換をはじめ、色数・サイズ・解像度の統一、JPEG圧縮率の調節など、ホームページ用の画像や携帯電話用の壁紙を揃えるのに抜群の相性を見せる。(Vectorの当該ソフト紹介頁より抜粋引用)

 名前から直ぐに想像が付くように画像のサイズを測るためのソフトだ。Homepage作成には欠かせない。2カラム、3カラムのレイアウトを行う場合に大変重宝する。

 ランチャーソフトは沢山あるが、中でもこれが一押しだ。2年以上使ってきたがその操作性には毎日満足している。これを使い始めてからデスクトップには一切のアイコンを表示することをやめてしまった。

 AdobeReader7によって、起動時間が長すぎるという長年のユーザーの不満はある程度解消した。そのためこの高速化ソフトは存在価値が低下してしまったかもしれない。AdobeReader6迄はこのソフトによる起動高速化で恩恵を受けてきた。

 IE専用が難点だが、様々なサイト内でIDやパスワードを入力するのに重宝するソフト。コンテキストメニューから簡単に起動できるのがGood! sleipnir等のIEの描画エンジンを利用しているブラウザでも使える。

 利用しているパソコンの諸元値を取得するには、このソフトがベストだ。インストール済みソフトの一覧が取得できるのも嬉しい。

 WMPは機能が豊富なだけ重い。RealPlayerも同様だ。そこでMedia Player Classicを使いたい。動作が軽快なだけではなく、対応しているファイル形式もすこぶる多く、これひとつで、wmvもrmも表示できてしまうのだから凄い! 数多あるMedia Playerの王様と言えるだろう。

 自宅でPCを起動しているときには必ず起動しているメディアプレーヤー。何かと過剰なWinampよりも、起動も速くスキンはシンプルだ。

 DivX, Xvid, Mov, Vob, Mpeg, Mpeg4, avi, wmv, dv, などの動画をDVD-Video形式に変換できるフリーソフト。クリックするとDVD関連ソフト紹介サイト=「DVDなToolたち」なるHomepageが開きます。

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。