tag:blogger.com,1999:blog-80809462562728525442024-02-08T11:08:29.859+09:00いつぞやの俺最近、「あの時の俺、なにしてたん!?」という事が多々ある(^^; ので、<br>今の俺を記録しています。zuo216http://www.blogger.com/profile/06254508823642835674noreply@blogger.comBlogger10125tag:blogger.com,1999:blog-8080946256272852544.post-30168366265979523772012-04-24T01:44:00.000+09:002012-04-24T03:05:51.289+09:00HTML5でソリティアを作ってみた(第1回)<style>
#mycontents{ font-family: "MS 明朝"; }
.title1{ font-size : large; background-color: lightblue; font-weight : bold; margin : 1em 0em 1em 0em; }
.table { margin : 0.5em 0em 0.5em 0em; }
.kakomu{ background-color : lightblue; border : solid 1px blue; }
.kyoutyou{ font-weight : bold; color : red; }
</style>
<br />
<div id="mycontents">
HTML5勉強の一区切りとしてカードゲームのソリティアを作ってみました。<br />
まず、下の画面写真を見て頂くと解るように、iPhone3GSでも動くことを目的としています。<br />
このため動作確認は iPhone3GS(iOS5.1)、IS03(Android2.2)、FireFox(11.0)、IE(9.0.8112.16421) で行っています。<br />
その他の環境での動作は保障できませんので、あしからず。<br />
※どうもiPod Touch(4世代)にiOS4 の環境だと動きが鈍い(ドラッグへの追従が遅い)ようです。<br />
テストコードは以下のページにあります。<br />
<br />
[<a href="http://www.eonet.ne.jp/%7Eokzuo3/solitare/solitare_s.html">Solitare Single</a>](カードを1組52枚使っています)<br />
[<a href="http://www.eonet.ne.jp/%7Eokzuo3/solitare/solitare_d.html">Solitare Double</a>](カードを2組104枚使っています)<br />
<br />
また全ソースを見たいという方もここから落としてください。<br />
後ほど説明するリストクラスは [<a href="http://www.eonet.ne.jp/%7Eokzuo3/solitare/List.js">List.js</a>] にあります。<br />
Doubleの方は104枚カードがあるためか、どうも動作が重いような感じ。<br />
ま、この辺りは今後の課題ですね。<br />
それから、私自身HTML5やJavaScriptは超ど素人なため、とんでもないコードになっている可能性もあります。<br />
ですので、万が一にも(間違えて)このコードを参考に何かを作って大問題が発生したとしても当方は一切責任を取れませんので、その点はご理解下さい。<br />
<br />
それでは、何回かに分けて簡単に説明していこうと思います。<br />
<div class="title1">
【1.実行画面】</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj95QoVru_aNeAkDRXaplsxHIs2pkkYFYJQ7U521BJ9xmbcK7UjD58MiuPMUlAaha43fl_NhROxabHXO1ZYxbuIsbiAvgCJHYT3nV0Ql77_zmscXGCExcVnlB_Lu1CoAqYpLylQA9ruCPc/s1600/solitare-full1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj95QoVru_aNeAkDRXaplsxHIs2pkkYFYJQ7U521BJ9xmbcK7UjD58MiuPMUlAaha43fl_NhROxabHXO1ZYxbuIsbiAvgCJHYT3nV0Ql77_zmscXGCExcVnlB_Lu1CoAqYpLylQA9ruCPc/s320/solitare-full1.png" width="213" /></a></div>
<br />上部にはコントロール用のメニューを配置してます。<br />
「New」で新しいゲーム開始。<br />
「End」でゲームを終了。<br />
「Time 00:00」には経過時間を表示します。<br />
このメニュー部分は普通にHTMLで表現しています。<br />
<br />
メニューの下がゲームステージになり、この部分は1つの canvas となっています。<br />
<br />
まず、左上の4つの枠が、カード種別毎に1から順に積み上げていく「組み札」エリアです。<br />
その右側で3枚開いているのは更にその右側にある「山札」を開いたカードです。<br />
(「山札」のカードは3枚一度に開くというルールにしています。)<br />
これらの下に7列表示されているのが「場札」で、ここは赤、黒交互に数字の大きい方から小さい方へ順にカードを重ねていく事ができます。<br />
組み札、山札、場札は私が便宜上勝手に命名した名前ですが、今後もこの呼び方で説明しますので覚えておいてください。
<br />
<div class="title1">
【2.HTML】</div>
HTML部分については余り難しい所はありません。<br />
<pre class="brush: html">
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>solitare s</title>
<meta name="description" content="" />
<meta name="generator" content="Studio 3 http://aptana.com/" />
<meta name="author" content="okzuo3" />
<meta name="viewport" content="width=320; user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<style>
*{ margin:0px; padding:0px;position: absolute;}
a,
a:link,
{
text-decoration:none;
color: black;
}
a:hover{
color: white;
}
a:active
{
text-decoration:none;
color: black;
}
.menu_item{
width : 105px;
height:14px;
font-size: 12px;
text-align:center;
padding: 2px;
border:#ffffff 1px solid;
border-bottom: 1px solid orange;
background-color: darkgray;
}
#newgame{
left : 0px;
}
#endgame{
left : 105px;
}
#time_area{
left : 210px;
color : green;
}
#stage_canvas{
top: 20px;
left: 0px;
}
#off_canvas{
display: none;
}
</style>
</head>
<body>
<div id="menu_bar">
<ul>
<li><a id="newgame" class="menu_item" href="#" onclick="NewGame();">New</a></li>
<li><a id="endgame" class="menu_item" href="#" onclick="EndGame();">End</a></li>
<li><span id="time_area" class="menu_item"></span></li>
</ul>
</div>
<div id="game_stage">
<canvas id="stage_canvas" width="320" height="340"></canvas>
<canvas id="off_canvas" width="320" height="340"></canvas>
</div>
</body>
</html>
</pre>
<br />
<b><head></b>の<meta>部分は基本的に Aptana Studio3 が自動的に作成してくれた物をつかっています。<br />
追加したのは、<br />
<div class="kakomu"><meta name="viewport" content="width=320; user-scalable=no" /></div>
の部分で、ここでコンテンツの幅を 320px に制限して、ユーザーがスケーリングを変更できないように指定しています。<br />
つまり、たったこの1行でiPhone3GSに最適な幅で、ピンチインやピンチアウトで画面の拡大率が変わらないようになります。素晴らしい!<br />
<br />
<b><style></b>部分ですが、ここで注意して頂きたいのは、全エレメントに対して<br />
<div class="kakomu">position : absolute;</div>
で絶対座標にしてる事です。<br />
マウスクリックやタップ位置を処理するのに都合が良かったのが理由です。<br />
ただ、このためにメニューやキャンバスにも座標をセットしなければならなくなっているのでご注意を。<br />
また、メニューは hover した際に文字色を白くし、右端の経過時間は緑色の文字に設定しています。<br />
<br />
<b>HTML</b> の方はいたってシンプルです。<br />
id="menu_bar"の部分がメニュー部分で、"New" で NewGame()を呼び出してカードを初期化し新規ゲームをスタートします。<br />
また、"End" は EndGame() を呼び出し、全てのカードを削除してゲームを終了します。<br />
NewGame(), EndGame()については後ほど説明を行う予定です。<br />
<br />
そして、divエレメントの id="game_stage" 内がゲームエリアになります。<br />
この中には "stage_canvas" と、 "off_canvas" という2つの canvas エレメントがあり、"stage_canvas" は実際に表示されるゲームステージ用です。<br />
これに対し "off_canvas" はドラッグ中のもたつきを抑える目的で使用するオフスクリーン用なので、display: none; を指定して常時表示させません。<br />
"off_canvas"の具体的な説明も後ほどドラッグ処理の中で行います。<br />
<br />
さて、キャンバスを使う場合に忘れてはいけないのが、<span class="kyoutyou">width と height を指定する事</span>です。
もし指定しないとブラウザが持っているデフォルト値になってしまいますので必ず指定するようにしましょう。<br />
<div class="title1">
【3.リストクラスを作成する】</div>
次はデータ構造について説明しましょう。<br />
まず大前提として各カードはリスト構造で管理する事とします。<br />
リスト構造とは、1つのアイテムが前後のアイテムへのリンクを持った構造の事で、線を手繰るようにして次々とアイテムを辿って行くことができます。<br />
この構造の便利な所は、ある所から切り離して、別のリストに繋げるといった事が、前後のアイテムへのリンクを書き換えるだけで行える事にあります。<br />
これが配列だったら、切り離す所から後ろのデータを全て別の配列にコピーするという処理が必要になり大変です・・・よね?<br />
まぁリスト構造で実装したのには単に私がリスト構造が好きだからという理由もあります・・・が、でもでも便利なんですよ、本当に。<br />
<br />
さぁ!リストですが、汎用的に使えるよう List.js ファイルに別途作成しています。<br />
<br />
コードは以下の通り。<br />
<pre class="brush: jscript">
// リストのアイテムクラス
var ListItem = function(data,prev,next){
this.prev = prev; // 1つ前のListItemの参照。
this.next = next; // 1つ後ろのListItemの参照。
this.data = data; // 実際のデータへの参照。
};
// リストクラス本体
var List = function(){
this.top = null; // 先頭のアイテム(の参照)
this.last = null; // 最後のアイテム(の参照)
this.length = 0; // アイテム数
};
// List class method
List.prototype = {
// アイテムの追加メソッド
add : function(data) { // 最後尾に追加
var item = new ListItem(data,this.last,null);
if( this.last != null ){
this.last.next = item;
this.last = item;
}
else{
this.top = item;
this.last = item;
}
this.length++;
return item;
},
// アイテムの挿入メソッド
// basepos の前に挿入 basepos がnullなら最後に挿入
insert : function(basepos, data){
if( basepos != null ){
var previtem = basepos.prev;
var item = new ListItem(data,previtem,basepos);
basepos.prev = item;
if( previtem == null ){
this.top = item;
}
else{
previtem.next = item;
}
this.length++;
return item;
}
else{
return this.add(data);
}
},
// アイテムの削除メソッド
remove : function(pos){
if( pos != null && this.isitem( pos ) ){
// 指定されたアイテムがリストに存在するかをチェックする
if( this.top == pos ){
this.top = pos.next;
}
if( this.last == pos ){
this.last = pos.prev;
}
if( pos.next != null ){
pos.next.prev = pos.prev;
}
if( pos.prev != null ){
pos.prev.next = pos.next;
}
pos.next = null;
pos.prev = null;
delete pos;
this.length--;
return true;
}
return false;
},
// すべてを削除
remove_all : function(){
var item = this.top;
while( item != null ){
var next = item.next;
delete item;
item = next;
}
this.top = null;
this.last = null;
this.length = 0;
},
isitem : function(pos){
if(pos==null) return false;
var bFound = false;
var itempos = this.get_top();
while( itempos != null ){
if( itempos == pos ){
bFound = true;
break;
}
itempos = this.get_next(itempos);
}
return bFound;
},
get_data : function(pos){
if(pos!=null) return pos.data;
else return null;
},
get_prev : function(pos){
if(pos!=null) return pos.prev;
else return null;
},
get_next : function(pos){
if(pos!=null) return pos.next;
else return null;
},
get_top : function(){
return this.top;
},
get_last : function(){
return this.last;
},
get_length : function(){
return this.length;
},
};
</pre>
<br />
<b>ListItem</b> はリスト内で使うアイテムクラスで、前後のリストクラスオブジェクトの参照とデータオブジェクトの参照を持ちます。<br />
<br />
<b>List</b> がリストクラス本体です。<br />
クラスと書きましたが厳密にはクラスでは無いんですよね、JavaScriptの場合は。
prototype へメソッドを追加していく事でクラスのような動きをさせているだけだそうです。<br />
この辺は詳しく説明できないので、興味のある方は調べてみてください。<br />
それでは、各メソッドについての説明です。
<br />
<div class="table">
【データアクセス用メソッド】
<br />
<table border="2" style="width: 600px;">
<tbody>
<tr align="center"><th>メソッド名</th><th>説明</th></tr>
<tr><td>get_top()</td><td>先頭のリストアイテムの参照を返します。 </td></tr>
<tr><td>get_last()</td><td>最後のリストアイテムの参照を返します。 </td></tr>
<tr><td>get_next(pos)</td><td>posの1つ後ろのリストアイテムの参照を返します。
posが最後の場合は null を返します。
posにはget_top()等で得られたリストアイテムを指定します。</td></tr>
<tr><td>get_prev(pos)</td><td>posの1つ前のリストアイテムの参照を返します。
posが先頭の場合は null を返します。
posにはget_top()等で得られたリストアイテムを指定します。</td></tr>
<tr><td>get_data(pos)</td><td>posで指定したリストアイテムからデータの参照を取得します。</td></tr>
<tr><td>get_length()</td><td>リストが持っているアイテムの数を返します。 </td></tr>
</tbody></table>
</div>
<div class="table">
【データの追加用メソッド】
<br />
<table border="2" style="width: 600px;">
<tbody>
<tr align="center"><th>メソッド名</th><th>説明</th></tr>
<tr><td>add(data)</td><td>最後尾にdataで指定したデータを追加します。</td></tr>
<tr><td>insert(basepos, data)</td><td>baseposで指定したリストアイテムの前にdataを挿入します。
basepos が null なら最後尾に追加します。</td></tr>
</tbody></table>
</div>
<div class="table">
【データの削除用メソッド】
<br />
<table border="2" style="width: 600px;">
<tbody>
<tr align="center"><th>メソッド名</th><th>説明</th></tr>
<tr><td>remove(pos)</td><td>posで指定したアイテムを削除します。 </td></tr>
<tr><td>remove_all()</td><td>リスト内の全アイテムを削除し、リストを初期状態に戻します。 </td></tr>
</tbody></table>
</div>
<br />
実はget_next(),get_prev()では pos を進めてデータを返すようにしたかったのですが、JavaScriptでは C++ のようなポインタのポインタが使えない(ようなのです)。<br />
このため仕方なく次(前)のアイテムを返していて、データは get_data() で取得するようにしています。<br />
連想配列で返す手もあったのですが、それもちょっと違うかなと思ったのでこういう仕様としました。<br />
この他にも通常リストクラスに用意されているメソッドは多々ありますが、今回は必要な機能のみとなってまして。<br />
その辺りもおいおい実装できればと思っています。<br />
<br />
ちょっと長くなってきたので第1回はここまでとさせて頂いて、続きは第2回で。<br />
下手な説明に長々とお付き合い頂いて本当にありがとうございました。<br />
<br /></div>zuo216http://www.blogger.com/profile/06254508823642835674noreply@blogger.com0tag:blogger.com,1999:blog-8080946256272852544.post-67632377975148180012012-02-09T09:15:00.001+09:002012-02-09T09:16:06.914+09:00[Windows]フォントをインストールせずに使うにはAddFontResourceEx() API を使えば、フォントをインストールせずに呼び出したアプリ内で利用できます。<br />
<br />
int AddFontResourceEx(<br />
LPCTSTR lpszFilename, // フォントリソースファイル名<br />
DWORD fl, // フラグ<br />
DESIGNVECTOR *pdv // Multiple Master フォントを指定する<br />
// 軸値の組へのポインタ<br />
);<br />
<br />
パラメータ<br />
<br />
<b>lpszFilename</b><br />
有効なフォントファイル名が入る、NULL で終わる文字列へのポインタを指定します。<br />
ファイル名は次のいずれかを指定します。<br />
<table border="1" cellpadding="5" cellspacing="0" style="margin-left: 14px;"><tbody>
<tr><td width="130">ファイル名拡張子</td><td>ファイルタイプ</td></tr>
<tr><td>.fon</td><td>フォントリソースファイルを指定します。</td></tr>
<tr><td>.fnt</td><td>Raw ビットマップフォントファイルを指定します。</td></tr>
<tr><td>.ttf</td><td>Raw TrueType ファイルを指定します。</td></tr>
<tr><td>.ttc</td><td>True Type フォントコレクションを指定します。</td></tr>
<tr><td>.fot</td><td>TrueType リソースファイルを指定します。</td></tr>
<tr><td>.otf</td><td>PostScript OpenType フォントを指定します。</td></tr>
<tr><td>.mmm</td><td>Multiple Master Type1 フォントリソースファイルを指定します。.pfm および .pfb ファイルと共に使ってください。</td></tr>
<tr><td>.pfb</td><td>Type 1 フォントビットファイルを指定します。.pfm ファイルと共に使います。</td></tr>
<tr><td>.pfm</td><td>Type 1 フォントメトリックスファイルを指定します。.pfb ファイルと共に使います。</td></tr>
</tbody></table> 情報が複数のリソースファイルに分かれているフォントを追加するには、abcxxxxx.pfm | abcxxxxx.pfb のようにファイル名を | で区切り、lpszFileName パラメータを使って指します。 <br />
<br />
<b>fl</b><br />
システムに追加されるフォントの特性を指定します。次の値が定義されています。<br />
<table border="1" cellpadding="5" cellspacing="0" style="margin-left: 14px;"><tbody>
<tr><td>値</td><td>意味</td> </tr>
<tr><td>FR_PRIVATE</td><td>AddFontResourceEx 関数を呼び出したプロセスだけがこのフォントを使うことができます。そのフォントの名前とパブリックフォントが一致する場合は、プライベートフォントが選ばれます。プロセスが終了すると、システムは、そのプロセスが AddFontResourceEx 関数を使ってインストールしたすべてのフォントを削除します。</td></tr>
<tr><td>FR_NOT_ENUM</td><td>AddFontResourceEx 関数を呼び出したプロセスも含め、いずれのプロセスもこのフォントを列挙できません。</td></tr>
</tbody></table><br />
<b>pdv</b><br />
DESIGNVECTOR 構造体へのポインタを指定します。そのフォントが Multiple Master OpenType フォントでない場合は NULL になります。<br />
<br />
戻り値<br />
<br />
関数が成功すると、追加されたフォント数が返ります。<br />
関数が失敗すると、0 が返ります。<br />
<br />
<br />
[使ってみて] <br />
※lpszFilenameにはパスを指定できる。(例)"font\MS 明朝"<br />
このAPIをアプリの初期化時に呼んでおけば、アプリ起動中は指定したフォントを利用できる。<br />
FR_NOT_ENUMを指定しなければフォントコンボボックスにも列挙されるのでユーザーに選択させる事も可能。zuo216http://www.blogger.com/profile/06254508823642835674noreply@blogger.com0tag:blogger.com,1999:blog-8080946256272852544.post-50392907324461036002012-01-11T23:46:00.000+09:002012-01-11T23:46:11.534+09:00今年の抱負遅ればせながら、今年の抱負を書いておこうと思います。<br />
<br />
一つ、英語力を付ける<br />
一つ、酒はほどほどに<br />
一つ、物欲に負けない<br />
<br />
以上。zuo216http://www.blogger.com/profile/06254508823642835674noreply@blogger.com0tag:blogger.com,1999:blog-8080946256272852544.post-65215262006790662472012-01-09T23:40:00.000+09:002012-01-09T23:40:27.558+09:00『究極のドグマ』を読み終えて機本伸司氏 著作の『究極のドグマ 穂瑞沙羅華の課外活動』をやっと読み終えたので感想を。<br />
<br />
『神様のパズル』『神様の軌跡』に続くシリーズ3作目で、またまた綿さんこと綿貫基一が超天才にして超美少女の穂瑞沙羅華に翻弄されるというお話し。<br />
正直、DNAだの量子コンピューターだのと言われても、私にはちんぷんかんぷん。<br />
でも綿さんレベルまで噛み砕いて説明してくれて何となく解かったような気にさせてくれるのは、流石。<br />
あくまでも気がするだけなんだけどね(^^;;<br />
<br />
さて、今回は一匹の猫を探すんだけど猫探しは本当に大変ですよ。<br />
実は昔々私も家の中で飼ってた猫が家出した事があり、多大なご迷惑をかけて探し出したという経験を持ってます。<br />
見つかった時はすっかり野良状態で思いっきり噛まれたんだよねぇ。(ちょっと遠い目で思い出に浸っております)<br />
<br />
しかし本に登場する猫は当然普通じゃない。その上探し出すのに、量子コンピューターを使い、人海戦術を使いと、こちらはど派手に捜索してます。まぁ我らが綿さんはいつも通り沙羅華に顎で使われ、相棒の犬と車で寝食を共にするという実にみじめ~な捜索も行うわけですが(^_^;)<br />
<br />
ちょっと落ち込んでて生きる意味って何だろうと思った時に読むといいかなぁ。<br />
ちょうど私がそんな時期だったからだけども、あくまでも軽く落ち込んでる時にね。zuo216http://www.blogger.com/profile/06254508823642835674noreply@blogger.com0tag:blogger.com,1999:blog-8080946256272852544.post-46809873642426014322011-11-28T19:00:00.002+09:002011-11-28T19:03:22.084+09:00「IE6でクラス切り替えによる画像のロールオーバーを行う場合はIDセレクタを指定しちゃいかんぜよ」というお話久々にどっぷりと深みにハマったので、記録を残しておこうと思います。 <br />
<br />
やりたかった事は、チェックボックス風のON、OFF画像をクリック時とマウスオーバー時に適宜変更して表示するだけだったんですけどねぇ。 <br />
<br />
さて、当初は以下のようなコードを書いてました。 <br />
<br />
<div style="border: solid 1px; margin: 0em 0.5em; padding: 0.5em 0.5em;"><html> <br />
<head> <br />
<style> <br />
<!-- <br />
a#hogehoge.check_off <br />
{ <br />
background-color : blue; <br />
color : black; <br />
} <br />
a:hover#hogehoge.check_off <br />
{ <br />
background-color : black; <br />
color : white; <br />
} <br />
a#hogehoge.check_on <br />
{ <br />
background-color : green; <br />
color : black; <br />
} <br />
a:hover#hogehoge.check_on <br />
{ <br />
background-color : red; <br />
color : white; <br />
} <br />
//--> <br />
</style> <br />
<script type="text/javascript" > <br />
function change_class(elm){ <br />
if( elm.className == "check_on" ){ <br />
elm.className = "check_off"; <br />
elm.innerHTML = "今はcheck_offだよ"; <br />
} <br />
else{ <br />
elm.className = "check_on"; <br />
elm.innerHTML = "今はcheck_onだよ"; <br />
} <br />
} <br />
</script> <br />
</head> <br />
<body> <br />
<a href="#" id="hogehoge" class="check_on" onclick="change_class(this);"><br />
クリックを!<br />
</a> <br />
</body> <br />
</html> <br />
※テストコードなので背景色の変更で書いていますが、背景画像でも同様。 <br />
</div><br />
hogehoge というエレメントに対して、check_on クラスの場合に、通常なら背景が緑色で文字は黒色、マウスオーバー時なら背景が赤色、文字は白色に指定しています。<br />
また、check_off クラスの場合は、通常なら背景が青色で文字は黒色、マウスオーバー時なら背景が黒色、文字は白色に指定しています。<br />
ところが、上記コードのページを IE6 で見ると「クリックを!」の背景もテキストもデフォルト色で表示されて、マウスオーバーでも色が全く変わりません。 <br />
そして一度クリックすると check_offクラスで指定している背景が青色、文字は黒色になり、マウスオーバーで背景が黒色、文字は白色になります。さらにクリックすると最初と同じデフォルト色に戻ってしまいます。<br />
どうも、check_on クラスの指定がまるっきり無視されてるような感じです。<br />
<br />
これを、IE7以降や FireFox で見ると、ちゃんと指定通りの色で表示されるんですよねぇ。<br />
<br />
この対処方法をまったく思いつけず一旦は、 <br />
<a href="#" id="hogehoge_on" class="check_on">クリックを!</a> <br />
<a href="#" id="hogehoge_off" class="check_off">クリックを!</a> <br />
と2つエレメントを用意して表示・非表示を切り替えるという方法を取ろうと、書き換えまで行ってたのですが・・・<br />
なんとか対応策を見つけました。<br />
<br />
idセレクタ #hogehoge がまずかったようで、以下のようにclassセレクタだけを使う事で回避できました。<br />
<br />
<div style="border: solid 1px; margin: 0em 1em; padding: 0.5em 1em;"> a.check_off <br />
{<br />
background-color : blue; <br />
color : black; <br />
} <br />
a:hover.check_off <br />
{ <br />
background-color : black; <br />
color : white; <br />
} <br />
a.check_on <br />
{ <br />
background-color : green; <br />
color : black; <br />
} <br />
a:hover.check_on <br />
{ <br />
background-color : red; <br />
color : white; <br />
} <br />
</div><br />
気付けば「な~んだ」という話なんですけどねぇ・・・<br />
それに元々不要な idセレクタまで使ってたのがいかんのかなぁと思いつつも、IE6だけで問題が起こる訳で、やはりバグなんですかねぇ。zuo216http://www.blogger.com/profile/06254508823642835674noreply@blogger.com0tag:blogger.com,1999:blog-8080946256272852544.post-70807622688201858352011-10-27T11:01:00.000+09:002011-10-27T11:01:59.811+09:00SEO対策 - メタタグの書き方<span class="K1"><a href="http://seoseoseo.ifdef.jp/html/html_making_meta_name_robots_description_keywords.htm">SEO対策ネット-メタタグの書き方</a> で以下の情報を見つけたので記録しておく。</span><br />
<br />
<span class="K1"><meta name="robots"</span> content="INDEX,FOLLOW"><br />
<span class="A2"> </span><span class="K1"><meta name="description"</span><span class="A2"> content="</span><span class="K2">サイトの紹介文</span><span class="A2">"><br />
</span><span class="K1"><meta name="keywords"</span><span class="A2"> content="</span><span class="K2">キーワード,キーワード,キーワード</span><span class="A2">"></span><br />
<span class="A2">が<strong>検索ロボット対策のメタタグ</strong>です。<br />
検索ロボット対策で重要!とくに<span class="K1">サイトの紹介文</span>は重要!<br />
1.</span><span class="B1"><meta name="robots" content="INDEX,FOLLOW"></span><span class="A2"><br />
ココのページは、開いてますよ 入ってもイイですよ と、<br />
検索ロボットに伝えるタグ<br />
2.</span><span class="B1"><meta name="description" content="サイトの紹介文 "></span><span class="A2"><br />
検索エンジンの検索結果に反映される文で、クリックしたくなる様な紹介文を書く<br />
文字数は80文字ぐらいが良い で、<br />
重要なキーワードは前に書く!</span><span class="K1">Yahoo!(ヤフー)</span><span class="A2">では特に重要視されるラシイ<br />
3.</span><span class="B1"><meta name="keywords" content=" キーワード,キーワード,キーワード "></span><span class="A2"><br />
ページの重要なキーワードを書く<br />
5個~6個ぐらいが良い<br />
4.すべてのページに、このメタタグを張り付けた方がイイ<br />
(ページの内容にあう紹介文・キーワードで)</span><br />
<br />
--------------------------------------------------------------------------------<br />
<a href="http://seoseoseo.ifdef.jp/">SEO対策ネット</a><span class="K1">には有用な情報が満載なので、</span><br />
<span class="K1">メインページも要チェック!(作者の方に感謝!!)</span><br />
<span class="K1"><br />
</span><br />
<span class="K1"></span>zuo216http://www.blogger.com/profile/06254508823642835674noreply@blogger.com0tag:blogger.com,1999:blog-8080946256272852544.post-85638326766175093442011-10-18T19:21:00.000+09:002011-10-18T19:21:54.660+09:00[HTML5]canvas は drawImage()で描画できる1つの canvas の絵を別の canvas へ描画しようと思って context.getImagedata() と context.putImagedata() を使ってみたのですがアルファ値を無視してしまうのでアルファブレンド出来ないんですね・・・<br />
うーん、困った~と思って<a href="http://www.html5.jp/">HTML5.JP</a>(何時もお世話になってます)を物色していたら、なんと context.drawImage() には canvas 要素が設定できるとのこと。<br />
<br />
<br />
早速試してみる。検証コードは以下の通り。<br />
<br />
<!DOCTYPE html> <br />
<html lang="jp" > <br />
<head> <br />
<meta charset="utf-8" /> <br />
<script type="text/javascript"> <br />
function ge(id) { return document.getElementById(id); } <br />
window.onload = function(){ <br />
var canvas1 = ge("canvas1"); <br />
var con1 = canvas1.getContext("2d"); <br />
con1.fillStyle = "blue"; // 背景を青に <br />
con1.fillRect(0,0,320,460); <br />
var canvas2 = ge("canvas2"); <br />
canvas2.style.display = "none"; <br />
var con2 = canvas2.getContext("2d"); <br />
con2.fillStyle = 'rgba(255,255,255,0.0)'; <br />
con2.strokeStyle = 'rgba(255,255,255,0.0)'; <br />
con2.lineWidth = 0; <br />
con2.fillRect(0,0,100,100); <br />
con2.fillStyle = 'rgba(255,0,0,0.5)'; // 透明度50%の赤で<br />
con2.beginPath(); <br />
con2.arc(50, 50, 50, 0, 2*Math.PI); // 円を描画<br />
con2.fill(); <br />
con1.drawImage( canvas2, 100, 100 ); <br />
} <br />
</script> <br />
</head> <br />
<body> <br />
<canvas id="canvas1" width="300" height="300"></canvas> <br />
<canvas id="canvas2" width="100" height="100"></canvas> <br />
</body> <br />
</html> <br />
<br />
<br />
なるほど、確かに HTML5の canvas 要素は context.drawImage() で描画出来ました。zuo216http://www.blogger.com/profile/06254508823642835674noreply@blogger.com0tag:blogger.com,1999:blog-8080946256272852544.post-64659018506617669042011-10-06T09:57:00.000+09:002011-10-06T09:57:31.384+09:00[日々これ勉強]点と線私、それなりに小説を読むのですが、結構ハードボイルド系が好きで、大沢在昌さんの探偵物や新宿鮫シリーズを読んでたりします。<br />
今はレイモンド・チャンドラーのロング・グッドバイ(村上春樹訳)を読んでます・・・<br />
そして、本の影響を大きく受けて「バー」の雰囲気が結構好きなんですよ。<br />
<br />
<br />
で、先日某ジャズバーのマスターとゆっくり話す機会を得たのですが、なんと同い年でビックリ!!かたやジャズバーのマスターとして一国一城の主、こちらはしがないリーマン・・・<br />
さらに人生経験という意味ではまるっきり大人と子供ですわ、ほんとに。<br />
<br />
で、そのマスターからお店の子達に学んで欲しい事という話を聞いたのですが、これが自分にも当てはまる!というか私も実行しなきゃと思ったのでここに書いておこうと思います。 <br />
<ol><li>お店にいる時間を無駄な時間にしない。<br />
<br />
これはカクテルや水割り1つ作る場合でもお客さんを意識したり、もてなしの心を持つという事。まぁここまでは普通に親や上司が思う事でありましょう。<br />
しかし、マスターは一つ上を行って、この「お客さんを意識する」、「もてなす」を自分の本来の仕事や趣味に生かして欲しいと。<br />
この日いたバイトの子はバレエを小さい頃からやってるんだそうで、例えば水割りを作る時の手の動き一つでも見てる人を意識していれば、バレエの時にもここで手をピンと伸ばすとか、もっと大きく動かすといった風に活かせるはずと。なるほど~。<br />
私はお客様の顔が見えない仕事をしてるもので、つい自分本位のUIを作ったり、機能を簡略化してたり・・・それはイカンなと、強く反省した訳です。<br />
常に使ってくれるお客様を意識して作らないとね。<br />
<br />
</li>
<li>何事も点(人であったり物事であったり)を沢山蒔いておく。<br />
それが線になって物事を成し遂げられる。<br />
<br />
これも「なんだそんな事」と思われるんでしょうが、出不精で人との付き合いが苦手な私には結構うーん!と思わせられたんですよねぇ。<br />
人脈とでも言うんでしょうか、一朝一夕で築ける物では無いので普段から意識してないと出来ない事ですね。</li>
</ol>とまぁ、人生まだまだこれからだ(笑zuo216http://www.blogger.com/profile/06254508823642835674noreply@blogger.com0tag:blogger.com,1999:blog-8080946256272852544.post-55644656297545608642011-09-29T19:08:00.000+09:002011-09-29T19:08:13.531+09:00[JavaScript] JavaScriptでiframeのdocumentを取得IEとFireFoxで取得方法が違うので、以下に記録を残す。<br />
<br />
id に "hoge_frame" とセットしていたとしましょう。<br />
で、hoge_frame のドキュメントを取得して中身をあれこれ弄りたい場合には<br />
<br />
var hoge_frame = getElementById("hoge_frame"); <br />
if( hoge_frame != null ){ <br />
var hoge_doc = null; <br />
if( hoge_frame.contentDocument ){ <br />
hoge_doc = hoge_frame.contentDocument; // FireFox<br />
} <br />
else{ <br />
hoge_doc = frames['save_frame'].document; // IE<br />
} <br />
if( hoge_doc != null ){ <br />
var huga = hoge_doc.getElementById("huga_textarea"); <br />
huga.value = "hogehoge"; // textarea は innerText じゃなくて value でセットする <br />
} <br />
}<br />
<br />
といった感じでフレーム内のドキュメントへアクセス出来る・・・と。<br />
なるほどね。zuo216http://www.blogger.com/profile/06254508823642835674noreply@blogger.com0tag:blogger.com,1999:blog-8080946256272852544.post-30553616487296266952011-09-29T17:17:00.001+09:002011-09-29T18:23:59.178+09:00[PHP] $_POST['hoge'] で Notice エラー$_POST[]で受信できない!と焦ったので、Noticeエラーへの対処方法を。。。<br />
<br />
if( $_POST['hoge'] ){<br />
print( '<div>' . $_POST['hoge'] . '</div>' );<br />
}<br />
<br />
という処理をしたい場合に、$_POST['hoge'] が未定義だと Notice エラーが出力されます。<br />
対処は至って簡単で、以下のように定義されているかチェックするだけ。<br />
<br />
if( isset($_POST['hoge']) ){<br />
print( '<div>' . $_POST['hoge'] . '</div>' );<br />
}<br />
<br />
これで Notice エラーは出なくなり万事解決!!<br />
<br />
ちなみに、エラーは NOTICE、WARNING、ERROR、PARSE の4種類に大別され、この順番で障害度が高くなるそうな。<br />
NOTICEは php.ini で出さないようにも出来る(らしい)が、不安なので今後も出すようにしておこうと思ってます。<br />
<br />
NOTICEエラーについては、<a href="http://www.phppro.jp/word/NOTICEE382A8E383A9E383BC">このページ</a>を参照させて頂きました。(感謝)<br />
<a href="http://www.phppro.jp/word/NOTICEE382A8E383A9E383BC"><br />
</a>zuo216http://www.blogger.com/profile/06254508823642835674noreply@blogger.com0