ただの備忘記録

忘れないように記録を残します。忘れるから記録に残してます。そして、その記録が役立つといいかな。

Bubbles Messenger

2010年06月26日 | JavaScript

http://www.shurey.com/Soft/JS/labo/bubbles.html

AppleのAppStoreで見かけたので、似たものを作ってみました。
英数字をバブル文字にするつもりでしたが、かな文字にも対応してみました。
Unicode表を使っていますので、フォントやエンコードの対応で表示できない場合もあります。

「Alphabet」が「Ⓐⓛⓟⓗⓐⓑⓔⓣ」になります。

かな文字にも対応したもののカタカナのみです。しかも、「ン」が存在しないので、「●」で補っています。
濁点や句読点も○記号で置き換えています。

こんなことができます。　→　㋙●㋤㋙㋣㋕㋢㋖㋮㋜◎

ちなみにgooブログのタイトルには使えませんでした。


トラビアンと自作ツール

2009年06月06日 | JavaScript

ブラウザゲームというものを初めてやってみました。ドイツ人が作ったという「トラビアン」です。
村を作り、資源を開発し、その資源で村に施設を整え、周囲の村と貿易したり戦争を行います。
建築や資源の移動、兵の移動には非常に時間がかかります。約9ヶ月をかけて、それぞれの勢力争いを繰り広げます。

きっかけは日経新聞のこの記事です。
http://it.nikkei.co.jp/digital/column/gamescramble.aspx?n=MMITew000029052009

そこで最初はクエストという形で初心者がなにをすべきか教わりながら進めました。
便利なツールも用意されているのですが、有料会員にならないとその機能は使えません。
各種のデータも施設毎に開いてみるのが面倒なこともあり、時間の予定をみることができるツールを作ってみました。

まずは、どのような施設がその村にあるのかを把握しなければ、1時間当たりの資源の収穫量がわかりません。
また、穀物については、消費量を計算する必要があるため、全ての要素について消費量を累計する必要がありました。
次に、これを元に、現在の収穫高から一定の時間を掛け合わせれば時間毎の収穫高を知ることができます。
さらに、その時間の間に、次に可能な設備投資の時間も計算することにしました。

こちらが資源予測ツールです。
http://www.shurey.com/Game/travian/tool.html

このツールでできること：
24時間の資源の増加を表します。
隠し倉庫の容量にあわせて適切な範囲も色分けして示しまします。
建設できる施設があることを表示します。
主要な村のデータを一括して見ることができます。
元データはすべて手入力ですが、村毎に保存して、また呼び出すことができます。


記録式ストップウォッチ

2009年05月02日 | JavaScript

WEB上で使えるストップウォッチを作りました。
朝、子どもの行動をストップウォッチで計ると、子どもが楽しんでできるということだったので、どうせなら記録を自動的に残せるものをと思って作りました。

データの記録にはcookieを使って、10回分のデータを記録します。更に記録名を付けることで、複数のデータを管理する機能も付けました。
ストップウォッチとしての機能は標準的なもので、スタート＆ストップにラップ機能を付けました。保存ボタンがあるので、これを押すと開始時刻と計測時間を記録し、簡易グラフで比較して表示されます。
計測タイムは0.1秒刻みで、計測中はWEB画面上だけでなく、ウィンドウタイトル（タブ表示の場合はタブのタイトル）にも時刻を表示します。タイトル部分の表示は1秒間隔ですが、これにより、他のウィンドウに切り換え中でも計測を見ることができます。

時々起こるのですが、他のサイトを同時に開くと、マウスの動きをチェックしているのか、そちらに割り込まれて計測時間が止まるようです。マウスを動かしている間、止まってしまうという現象が見られます。
スクリプトは、定期間隔で呼び出しているので直接は制御していませんので、ブラウザの種類によってその辺りの動きは差異がありそうです。ブラウザを起動し直さないと直らないというケースがありました。


JavaScriptで、HTMLのテーブルを組み替えるフォームを更新

2008年11月15日 | JavaScript

先日、

タグで出来た表を入れ換えるスクリプトを作りました。これは表の行と列の軸を入れ換えるというものでした。

基本仕様は、<table>タグを読込、<table>、<caption>、<tr>に分割します。<tr>が1行ですので、更にその中に<td>もしくは<th>が入っています。
各行から1つ目の枠（<td>か<th>）を取ってきて、新しい１つ目の行を作ります。

逆に１つ目の行から枠を取り出しながら、新しい各行へと割り振るやり方もあります。しかし、これが非常にややこしいです。一番問題になるのは、colspanとrowspanを設定して枠を繋いでいる場合です。

タグは行の頭から処理を行わないと、どんな表になるか判らない構造になっています。colspanやrowspanがあると、その部分は枠の情報が１つしかないため、統合された枠で情報を共有する必要があります。そのために、それを引き継ぎながら処理しなければなりません。

どちらにしても、古い表と新しい表が頭の中でこんがらがりながら作ることになってしまいました。
下の方法だと、スクリプトがかなりすっきりするのですが、引き継ぎの処理がうまくいかなかったので、諦めました。多分、前者の方法で悩みすぎて気力がなくなっていたのだと思います。

そこでふとアイデアが出ました。行の入替ができるなら、回転もできるのではないかと。
というのも、行列を入れ換えて、上下を入れ換えたら回転したように見えたからです。
しかし、上下の入替は少々やっかいです。これも統合された枠のことを考えなければなりません。でも、もっと簡単な方法がありました。左右の入れ換えです。
左右の入れ換えだったら統合された枠も関係ありません。そのまま後ろから読み取れば、綺麗に表になるのです。

これで行列と左右の入れ換え処理ができました。あとは、この２つのルーチンを組み合わせるだけでした。２つを同時に行うと回転処理になります。
次に左右の入れ換えの後、回転処理を２回行うと、上下の入れ換えができました。

この４つの機能をパネルで選べるようにしましたので、表をどんな向きに、どんな並びにでも変更できるようになりました。
最初から回転処理を作ろうと考えていたら、こううまくは行かなかったと思います。ある意味怪我の功名という感じです。

あと、オプション設定で行頭のtabや二重改行を取り除く機能を用意しています。
これがないと、元々tabを使って行頭の位置を整形していた場合に、これらが綺麗に適用されません。行数が変化するので、対応することができないので、削除して綺麗に見せます。

http://www.shurey.com/js/works/table_rotation.html


JavaScript作業メモ

2008年11月15日 | JavaScript
//デバッグ用（タイトルに状況を表示）
document.title = s+"/"+(new Date).getSeconds();
//s=デバッグしたい変数

//デバッグ用グローバル変数
debug = "";
//画面をダブルクリックするとdebugを表示
document.ondblclick = function() {alert(debug);}
//デバッグしたい場所で位置情報と変数などを追加
debug += "step1:"+s+"n";

//デバッグしたい関数をループ内で見ながら、停止もできる
var bool = confirm(count);
if (bool) {break;}

//文字列を整数にする
parseInt("02") -> 0
//二桁の月や日付を処理するのに使うと正しく処理できないため
//eval("02")を使うと良い

//同じように動作する
//document.getElementById("id").innerHTML
//document.all["id"].innerHTML
//allは使わない方が良い。
//FirefoxではinnerTextが使えないのでtextContentを使用

//document.getElementByName("name")
//IE7、Firefoxともに動作しない。

//document.onmousemove = function() {getRun();}
//は省略して
//document.onmousemove = getRun;
//と表記できる。

//ブラウザの分岐
if (document.all) {c_browser = "E";}
//○IE
//×Firefox、Safari
else if (document.layer) {c_browser = "F";}
//○firefox
//×IE、Safari
else {c_browser = "S";}

//gooブログにURLを記述する場合の注意点
gooブログでは「JavaScript」の文字を含むリンクを作成しようとすると、小文字に変換し更に全角に変換してしまいます。
これはスクリプトを埋め込まれないための対処と思いますが、URLまで変更してしまうのでは困ります。
エスケープ文字を使うことで回避していましたが、対応されてしまいましたので、転送するHTMLを設置することにします。
http://www.shurey.com/Soft/js-trans.html

FORMの名前に「-」を使うとエレメントの行でエラーが発生する。

//二重の改行を１つにする
s.replace(/[nr]{2,}/g,"n")

JavaScriptで、タグの書式を統一するためのフォーム

2008年11月08日 | JavaScript

タグ名、オプション名、オプション値の囲い文字を統一するための変換ツールを作成しました。

先日作成したテーブル変換にこの機能を載せようと思ったのですが、汎用性を考えて別途作成しました。
HTML文書からタグを識別し、タグ名とオプション名を小文字または大文字に統一、囲い文字を「"」または「’」に統一することができます。

http://www.shurey.com/Soft/JS/works/tag_convert.html


JavaScriptで、HTMLのテーブルを行列入換ツール

2008年10月31日 | JavaScript

HP内のページをまとめていたら、別々のページにある表の並びが、一方は縦に、一方は横になっていました。
これを揃えるために横並びの表を縦に変更することにしました。

しかし、HTMLエディタにはそんな便利な機能はありません。
１つ１つ表を組み替えるのは結構たいへんです。

そこで、JavaScriptを使って、テーブルの行と列を入れ換えるプログラムを作ってみました。

まずは、外側からタグを識別して新しいテーブルに組み直します。
<table>タグ、<caption>タグ、<tr>とここまでは順調です。
次に<td>と<th>を同時に処理しなければいけません。
それぞれ処理してから、比較して優先順位を決めるようにしたのですが、うまく動作しません。
行の位置情報を比較すると、数値が小さい方が前になるのですが、タグがない場合に-1になるため、優先順位が正しくなりません。
一日目はそこで終わり。

二日目は、<td>と<th>を同時に処理する部分を考え直します。
結局、<td>を処理したあと、<th>を処理する場合にだけ<td>があるかどうか考えて処理することにしました。タグがない場合の処理を１つすっとばした訳です。
これでスッキリさせることができました。
なんとか通常の表なら行列を入れ換えることに成功しました。
次に、colspanとrowspanへの対応を考えます。colspanはrowspanへ、rowspanはcolspanへと交換します。
各行の列を１つ１つ取りながら、新しい行を作っていくというルーチンになっています。colspan=2ならば、２つの列を繋ぐので、新しい２つの行にまたがるように、処理を飛ばすところを作ります。
rowspanの方から先に考え、１つの列を順番に取りながら、列を飛ばします。
colspanの方は、一旦列番号のついた配列変数に値を入れて、新しい行の番号で参照して、処理を飛ばします。
なんとか動くことに成功し、2日目が終わりました。

3日目は、色々なパターンで動作テストを行います。
そこでcolspanとrowspanが3以上のときに正しく動かないことが判りました。単純なことに値から-1するのを忘れていたのです。
様々なパターンのテーブルを組んでテストして、複雑な表でもうまく動作することを確認して完成になりました。

元々のテーブルにタグが正しくない場合は、さすがに正しい結果が得られません。
変換前後の表もプレビューできるようにしたので、そこで確認しながら、元の表も手直しするしかありません。

完成品はこちら
http://www.shurey.com/js/works/table_rotation.html


JavaScriptで作る「万年カレンダー」

2008年10月12日 | JavaScript

先日、子どもと一緒に万年カレンダーを考えて実際に作ってみました。
木を使うのは難しいので、とりあえずマグネットシートを買ってきて、それを日にちのピースにして、貼り付けてみました。

HPの中にある「こども工作教室」に「万年カレンダー」を追加しました。
http://www.shurey.com/Soft/JS/craft/index.html
こちらはJavaScriptを使ってブラウザで操作するタイプの万年カレンダーです。
作り方の解説もしていますので、興味のある方はどういう構造になっているのか見てください。

暦を作ると、色々と知らないことが出てきて発見があります。
例えば、曜日を計算するツェラーの公式なんてのがあります。普通はこんなことしなくても曜日が算出されます。
また、仕事柄六曜を知りたいと思ったのですが、これを計算するには旧暦の日付を算出しなくてはなりません。六曜そのものは1日から順番に並んでいるだけなのに、旧暦を計算させるには非常に手間がかかります。
次に月齢を考えました。月齢計算は前にもやったことはあるのですが、その時調べたHPが行方不明になっていました。計算方法によっていくつもブレがあるので、何を使うかしっかり考える必要があります。
一番やっかいなのが、祝日です。これは諦めました。春分の日と秋分の日が、天体観測によって決定しているため、予測値しかありません。また、法律によっても左右されるため、万年カレンダーとしてはそぐわないと考えました。

ともかく、難しいことはさておいて、自分の生まれた日の曜日を調べるくらいは簡単にできますよ。