[ カテゴリー » 開発日誌 ]

HSVマップ組み込みと角丸コーナースクリプト

category-icon

 次のリリースに盛り込む予定のもの。

 記事作成画面では、216色のカラーチャートから文字やマーカー色を選べますが、個人的には216色じゃ足りなくて不満。なので、フルカラー?にしてみました。スクリプト的にも、216個のセルにイベントを設定していた前作に比べ、こちらは画像1枚なのでベターかなと。HSVWは色々勉強になった。

 あと、ボックスの4隅が丸い、いわゆる角丸コーナーですが、それを実現するためのテクニックは、web上にゴマンとあります。ppBlogのjs/script.jsにもそれっぽいやつがありますが、これは画像を使用するし、またその画像に色を揃えるためボックスの背景色も決め打ちになってしまいます。これは宜しくないので、Liquid round cornersLink を読みつつ、じゃ、これをJavaScriptで書いたらどうなるかなと思ってとりあえず書いてみました。画像は使用していません。また、アンチエイリアスを少しだけ意識してみました。ボックスの背景色に合ったボーダーの色とアンチエイリアスを自動的に算出してくれるし、指定することも可能。とりあえず書いただけなのでソースは非常に汚い。一応デモページをあげておきます。

 →http://p2b.jp/demo/HSVmap_Rounded_Corner.htmlLink

HSV2RGB
こんな感じになります

— posted by martin at 02:54 am   commentComment [0]  pingTrackBack [0]

画像ポップアップスクリプトをLightboxみたく

category-icon

 ppBlogでは、もとより記事に貼り付けられた画像を元の大きさで表示する画像ポップアップというのを備えてましたが、近頃では、Web2.0に触発されてか、ThickBoxLink だの、LightboxLink だの、GreyBoxLink といった、画像表示に際して、ちょいとエフェクトを付けたりするのが流行のようで。

 なのでppBlogでも画像ポップアップをパワーアップさせました。かといって過剰な演出はあまり好きではないので、そんなに凝らずに、これだけは備えておきたいというものにしています。

0287026

 昨今のブロードバンドの普及に伴い、表示サイズの大きな写真を圧縮せずにそのままアップするケースも増えてきたように思います。結果、パソコンの解像度によっては、そんな画像を表示させるとブラウザからはみ出してしまうこともあります。なのでこのあたりを考慮して、ブラウザの枠からはみ出してしまうような大きなサイズの画像は2段階のポップアップとしました。まず、ブラウザ画面にフィットするような表示段階があって、で、さらに「実寸大アイコン」をクリックすると、元のブラウザからはみ出すような画像を表示させるというものです。

 具体的にアクションを見たほうが分かりやすいでしょう。なお、画像は、National GeographicのサイトLink にあったサイズが大きめの写真を拝借してます(1024x768ピクセル)。効果を確認するには、ブラウザのサイズを1024x768ピクセルより小さくしておいて下さい。このサイトには秀逸な写真がたくさんあって、個人的にお気に入りの写真は、スクリーンセイバー用にダウンロードしたりしてます。

LightHouse
うーん、いい写真だ。

 余談になりますが、このナショナルジオグラフィックの雑誌(日本語版もあります)には、新しく見つかった「ユダの福音書」の驚くべき解読結果のレポートが載っています。近々「ダ・ヴィンチ コード」の上映が始まりますし、何とも絶妙なタイミングですね。歴史とは、勝者が創り出す日記みたいなもんです。 →http://nng.nikkeibp.co.jp/nng/feature/0605/index.shtmlLink

 スタイルシートの話になりますが、Firefoxだと、写真のドロップシャドウが意図したように見事に実現されるのですが、IE6やIE7βでは、まだまだですね。IE7の正式版では、せめてこのドロップシャドウのCSSぐらいは出来るようになって欲しいもんです。


— posted by martin at 12:39 am   commentComment [22]  pingTrackBack [0]

Ajaxでログイン認証

category-icon

 こんばんは。昨日のエントリーで、ログイン認証をAjaxで実現しようかと述べていたのですが、そうしました。流れとしては、

  1. ログインアイコンをクリックすると、その場でログイン画面を生成
  2. IDとPWDを入力したら送信。このときにAjaxのPOSTモードで送信しますが、IDとPWDはJavaScriptでMD5G処理して送出されるので、セキュリティー的には安心です。
  3. 正しいIDとPWDであれば、指定していた管理画面に遷移しますし、認証に失敗すれば警告が出ます。

てな感じです。Ajaxを使うことの利点は、わざわざログインページに移って、そこで認証して・・・という流れがなくなり、少ない手順でログイン出来ることです。これに慣れると、これまでのログイン手順が面倒に感じますよ。キモのスクリプトだけを抜粋しておきます。

function AjaxLogIn(){
 var module = Ajax.cloneScript("js/md5.js");
 if(module){
  o("loginSubmit").disabled = true;
  Ajax.post("admin.php", "mode=login&adminName="+MD5.$(o("adminName").value)
                                  +"&adminPass="+MD5.$(o("adminPass").value)
                                  +"&type=ajax",
   function(to){
    if(to.match(/¥.php/)){
     d.write('<script type="text¥/javascript">window.location.href="'
                                                   +to+'";<¥/script>');
    } else {
     alert(to);
     o("loginSubmit").disabled = false;
     o("adminName").focus();
    }
   }
  );
 } else alert("md5.js module Not Loaded!");
}

 ダイアログ画面は、マックOSXっぽくアニメーション化してみました。まぁお遊びですが。。アニメーションといっても、単に上からにょろっと出てくるだけですが、この際に昨日紹介したループ関数メソッドを使ってみました。

var slideDown = function(ob){ob.style.top = (parseInt(ob.style.top)+10) +"px"};
slideDown.loop(1, 16)(IO); // IOは、ダイアログのこと

 1ミリ秒おきに、slideDownという関数を16回繰り返すという指定です。興味がある方は、ソースをどうぞ。

 あと、追記ですが、上述のMD5関数は、Masanao Izumoさんのmd5.jsを圧縮したものを使用しています。   →http://www.onicos.com/staff/iz/amuse/javascript/expert/md5.txt

 有用なスクリプトを公開して下さっている同氏に感謝します。


— posted by martin at 08:07 pm   commentComment [1]  pingTrackBack [0]

JavaScript周りのことをば

category-icon

 おはようございます。最新版のリリースに向けて、近頃はそれなりに時間を充てています。ppBlogでは、JavaScriptはかなり重要な位置を占めています。一応、JavaScriptオフでも閲覧には問題ないとは思うのですが、管理モードなどでは必須です。

 で、ppBlogでの主要なJavaScriptライブラリである、js/script.jsの見直しを進めているところです。この中で、windowのonloadイベントには、いくつかの関数を割り当てています。これまでは、

addEvent(window, "load", function (){
 roundedStyle();
 quotedStyle();
 initCSSHover();
 if(moz) hackFirefoxToolTip();
});

でしたが、これだと、HTMLのDOMエレメントのみならず、外部リンクや画像やらも読み込んだ後でないと発動しません。画像など読み終えてなくても、DOMエレメントを読み込んでパースした時点で動く関数などはさっさと動いて欲しいものです。このようなことは誰もが思っているみたいで、JavaScriptマスターのDean Edwardsは、Firefoxに DOMContentLoaded という隠し属性みたいなやつを見つけて、それで、ごにょごにょやっています。→ The window.onload Problem - Solved!Link

 でも、個人的には、あまりスマートな方法には見えないんで(IE向けには外部スクリプトを別に用意しないといけないし)、自分なりにも考えてみました。そもそも、IEにあるdocument.readyStateG みたいなやつが標準で提供されていれば、みんな悩まずに済むのだけれど、ないから仕方なし(IEでも、挙動不審なところがあるようだし)。

 で、原始的な方法ではあるが、DOMエレメントの数を取得する d.documentElement.getElementsByTagName("*").length をミリ秒単位で監視しておき、それがプラトーに達した時点を読み込み完了とするというアプローチでスクリプトを書いてみた。こんな感じ。

DOM = {
 ready : false,
 size : d.documentElement.getElementsByTagName("*").length,
 check : function(){ DOM.ready ?  DOM.onload() : DOM.update.await(100)(DOM.size); },
 update : function(i){
  if(d.documentElement.getElementsByTagName("*").length==i){
   DOM.ready = true;
   DOM.onload();
  } else {
   DOM.size = d.documentElement.getElementsByTagName("*").length;
   DOM.update.await(50)(DOM.size);
  }
 },
 onload : function(){}
}
DOM.check();

 あまり深くは考えていないけど、これで期待通りの動作をしている感じ。このサイトのppBlogでは、先ほどのwindow.onloadのイベントを、こっちに割り当てて、

DOM.onload = function(){
 roundedStyle();
 quotedStyle();
 initCSSHover();
 if(moz) hackFirefoxToolTip();
}

というふうにしています。このやり方だとブラウザを選ばなくてベターではなかろうか。アイコン画像なんかを全部表示していなくても、DOMツリーを読み込んだ時点で発動します。エドワーズのとこにあるデモのスクリプト(http://dean.edwards.name/my/busted.htmlLink )に似せて同じことをDOM.onload で実現したサンプルを載せておきます。→http://p2b.jp/demos/busted.htmlLink

 ちなみに、Functionオブジェクトに、新たにawaitというメソッドを定義してそれを使っています。まぁ普通にsetTimeoutでやれば良いのだけれど、勉強がてら。JavaScriptマスターである最速インターフェース研究会さんのエントリーを参考にしました。→ Function.prototypeを拡張して遅延実行を実現する Link

 まだよく理解していないので違うかもしれないけれど、このawaitメソッドをまねて、loopというのを定義しました。正しいのかな? 狙いとしては、limitで指定した回数だけ、msミリ秒おきに関数を実行するというやつです。

Function.prototype.loop = function(ms, limit){
 var count = 0, self = this;
 return function(a){
  if(limit <= count) return;
  count++;
  self.await(ms)(a);
  arguments.callee.await(ms)(a);
 }
}

 今のところppBlogでは、これは使っていないけど使うかもしれない。簡単な例としては、

var func = function(v){alert(v);}
func.loop(1000,3)("1秒おきにアラートを3回表示");

とか。

 あと、ログインの際にAjaxを使って、少しだけログインの手順を減らすというのを考えています。その際にAjaxのPOSTメソッドでユーザー名とパスワードを送信するのですが、このままだとセキュリティー的に気持ち悪いので、MD5で暗号化してから送信するようにする予定です。大まかな動作は確認出来ています。とりあえず。(あぁ、コメント数がマイナスになるのも直さないと・・・)

— posted by martin at 07:18 am   commentComment [0]  pingTrackBack [0]

アクセス解析の暫定版

category-icon

こんばんは。フォーラムで、アクセス解析にあるYahooエンジンの「検索語」が文字化けしているというご指摘がありました。原因のひとつにログファイル自体の文字コードが統一されていないこともあるので、この際、UTF-8でログも統一するようにした暫定版をアップしておきます。ログの文字コードをUTF-8に決め打ちして、現在のログとの互換は考慮していません。なので、現在のログは手元にダウンロードしておくなりしておいた方が良いかもしれません。この新しいやつを使ってみたいという方は、4月分のログに関しては、適当に保存後、FTPソフト上で削除しておくと、新しいログと古いログとがごっちゃにならずに済みます。

 最終的には、現状、ログはひと月に1ファイルですが、これだとアクセスに応じてログサイズが肥大するので、あるサイズ以上になれば分割するなどの処理も必要だなぁと思っています。
Browser share
相変わらず、スレイプニル強いですね。最近、自分はLunascape使ってます。
 なお、ブラウザのアイコンもいくつか増やしました。マックOS XにはSafari以外にも「シイラ Shiira」なんていうお洒落なブラウザがあるようで、それのアイコンも追加しています。以下にスクリーンショットを載せておきますね。
keyword
「メモリーリーク」でやたらと飛んでくる。
 検索エンジンのプラットフォームに、Wikipediaもあり、これ経由のアクセスがそれなりにあるので、このアイコンも追加してます。自分のサイトの「検索語アクセス」を見てみると、以前の書き込みで、IEのメモリーリーク問題について言及していたんですが、そのせいか、この検索語でのアクセスも目立ちます。あとは、当然ながら「ppBlog」でのアクセスは多いです。
platform
Windows強し。BecomeBot なんていう巡回ロボットもいる。
 生データを見てみると、Mozillaならぬ「Monazilla」というのもちらほらとあり、これは2ちゃんねる専用ログ巡回ソフトのようです。これのアイコンも追加してます。
UTF8
グーグルのサイトのソースをエディタで表示させたところ。正しくはUTF-8です。

 これから先は余談なんですが、グーグルの検索語を表示する際に、たまに文字コードの変換エラーが出るのがあって、生ログを調べてみると、なんと、文字コード指定の「ie=UTF-8」の部分が「ie=UFT-8」になっているじゃないですか。しかも、これはグーグル本家(google.co.jp)が間違っているのです。何故なら、UTF-8をフルスペルで書くと、8-bit UCS Transformation Format ですから。証拠を載せておきます。

このために、スクリプトの中で、
if($enc=='UFT-8') $enc = 'UTF-8';
という何ともトホホな処理を入れています。まぁ、そのうち修正されるのでしょうが。UFTと言えば、医療の現場では、ウラシルとテガフールの合剤である抗がん剤のことで、大腸ガンなど種々のガンの治療に使われています。UFTカプセルという経口の抗がん剤が出来たことで、患者さんの負担も随分 軽減したと思います。

 さらに余談ですが、今日グーグルで調べ物をしていると、グーグルのロゴが変わっているのに気付きました。なんだかミロっぽいなと。そこでピンと来て、ホアン・ミロWについて調べてみると、案の定、4月20日はミロの生誕日なんですね。しかも、最近は「ホアン」じゃなくてより現地語に近い発音の「ジョアン」ということも知り。グーグルの社員にきっとミロ好きがいたんでしょうね。こういう余興大好きです。このロゴは今日(4月20日)だけかもしれないので、記念にこれも載せておきますね。しかし、見事にミロっぽい。

miro-google
ミロ風にGoogleって描いてます。ピカソと同じぐらいミロも好き。シュール。
添付ファイル: stat_EUC.zipattachedIcon 

— posted by martin at 09:06 pm   commentComment [6]  pingTrackBack [0]

T: Y: ALL: Online:
Created in 0.0051 sec.
prev
2021.4
next
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30