折れ線グラフをJavaScriptで自動作成

公式戦の開幕に向けて以下のコンテンツをJavaScriptで作成した。

・勝敗グラフ

　　・例えば○●△雨だけ入力すれば、自動折れ線グラフを
　　　作成するJavaScriptアプリを作成する。

　　・当初ＥＸＣＥＬや、グラフソフトとかでグラフ書いて、
　　　それをＧＩＦに落としてＵＰしようとか考えたけど、
　　　時間掛かるし、そもそも１４０試合全部を
　　　表示してＧＩＦに変換しようとしても、
　　　数試合分がなぜかカットされる。^^);;

　　・なので、JavaScriptで作成する無謀なことを考えた。
　　　この折れ線グラフをJavaScriptで書いてあるページは
　　　探したけど無かった。そこで、どうやってやるか考えて、
　　　思いついたのが、単純にグラフをＧＩＦ画像に分解して、
　　　ＧＩＦ画像をタイル式に貼り付けて行く形態で作成。

　　☆その後、これだとグラフ以外の隙間も空白画像で埋める
　　　ので表示時間が物凄く掛かるため、
　　　ダイナミックＨＴＭＬでグラフ部分のみ画像を配置する
　　　ように書き直した。

　　☆さらに直線部分を図形用のＶＭＬで描画するバージョンも
　　　作成したが、こちらはＩＥ専用ということもあって
　　　未公開のままですね。

公式戦開幕に向けてのコンテンツを作成

公式戦の開幕に向けて以下のコンテンツを作成した。

・勝敗グラフ
　　・例えば○●△雨だけ入力すれば、自動折れ線グラフを
　　　作成するJavaScriptアプリを作成する。

　　・当初ＥＸＣＥＬや、グラフソフトとかでグラフ書いて、
　　　それをＧＩＦに落としてＵＰしようとか考えたけど、
　　　時間掛かるし、そもそも１４０試合全部を
　　　表示してＧＩＦに変換しようとしても、
　　　数試合分がなぜかカットされる。^^);;

　　・なので、JavaScriptで作成する無謀なことを考えた。
　　　この折れ線グラフをJavaScriptで書いてあるページは
　　　探したけど無かった。そこで、どうやってやるか考えて、
　　　思いついたのが、単純にグラフをＧＩＦ画像に分解して、
　　　ＧＩＦ画像をタイル式に貼り付けて行く形態で作成。

　　☆その後、これだとグラフ以外の隙間も空白画像で埋める
　　　ので表示時間が物凄く掛かるため、
　　　ダイナミックＨＴＭＬでグラフ部分のみ画像を配置する
　　　ように書き直した。

　　☆さらに直線部分を図形用のＶＭＬで描画するバージョンも
　　　作成したが、こちらはＩＥ専用ということもあって
　　　未公開のままですね。

・ＣＳ接続奮闘記
　　　これは、広島、中日、阪神主催ゲームをＣＳ放送で
　　　ＴＶ視聴できると聞き、早速購入することにした。

　　　そこで、接続してみたら、いろいろ問題があったので

　　　それなら、その接続記なるものを書いたら、
　　　いいコンテンツになるし、今後の購入する人にも
　　　参考になるだろうということで、書いてみた。

　　☆その後の雑誌主催のＨＰコンテストで、
　　　このコンテンツがいい評価を受けたので、
　　　雑誌関係の方には、この手のコンテンツが受けるのかな。

・リンク集
　　　野球に関して、特に横浜ベイスターズを応援する
　　　ために必要なジャンル毎に分けて、リンクの許可や、
　　　相互リンクのお願いなどして、なんとか形になった。

JavaScriptゲームに挑戦

　クイズを作ったので、今度はゲーム作成に挑戦してみた。
クイズと違いゲームとなると、ある程度、動きのある
コンテンツ作成ということになる。

この時点でJavaScriptを使用しているページは、殆どがVer1.1で
新しい規格のVer1.2を扱うページは少なかったし、
見る人が使用しているブラウザも、
Ver1.1しか対応していなものが混在していると思われるし、

そもそもV1.2は難しそうだし
で、Ver1.1で作成することに。

V1.1で作るとなると、そんなに凝ったことは出来ず、
単純にアクション系のゲームがいいかなと。
どうせ作るのなら、野球関係のゲームにしよう。

ということで、頭に思い浮かんだのが「もぐらたたき」。
でも動画的なことは、とても無理なので、
叩くのは、マウスでクリックすればいいので、
そうすると、単純にボタンをクリックすればいい。

で基本構成は、ボタン内に表示する文字列を制御すれば
ＯＫかなと。これであとは、ゲーム性を持たせて
遊んでくれる人が、熱くなるような肉付けをすればよい。

ということで、応援チームとそれ以外のチーム名を表示させ、
他のチーム名をクリックすれば得点し、応援チームを
クリックすると減点。さらに監督をクリックすると
さらに＋何点、または−何点が与えられるようにした。

さらに応援チームをクリックすると、減点に加え、
ペネルティとして、数秒間、クリックできなくした。
で「クリックもぐら」と命名し公開した。

ゲーム作成自体は、タイマで制御すればいいので単純。
ところが、NetscapeとIEでボタンの表示のされかたが違う。

IEだとボタン内に表示する文字列により、
ボタンの横幅が可変になる。

まあ、勝手にゲーム的には難しくなってるんだけどね。^^);;

それと、Ｍａｃ使いの友達にＭａｃで試してもらったら、全く動かないようだ。
状況がわからないので、対処のしようがない為、
JavaScriptの大家に質問したら、
どうもＭａｃじゃ動作しないようで、別な手段で作成することに。

それは、ボタンの変りにボタン画像を表示し、
画像内でマウスイベントを取得する方法に替えたが、
こちらはこちらでマウスの表示が変るし、
クリック抜けもあるしで、積極的な公開は諦めました。

ゲームに挑戦

　クイズを作ったので、今度はゲーム作成に挑戦してみた。
クイズと違いゲームとなると、ある程度、動きのある
コンテンツ作成ということになる。

この時点でJavaScriptを使用しているページは、殆どがVer1.1で
新しい規格のVer1.2を扱うページは少なかったし、
見る人が使用しているブラウザも、Ver1.1しか対応していなもの
が混在していると思われるし、そもそもV1.2は難しそうだし
で、Ver1.1で作成することに。

V1.1で作るとなると、そんなに凝ったことは出来ず、
単純にアクション系のゲームがいいかなと。
どうせ作るのなら、野球関係のゲームにしよう。

ということで、頭に思い浮かんだのが「もぐらたたき」。
でも動画的なことは、とても無理なので、
叩くのは、マウスでクリックすればいいので、
そうすると、単純にボタンをクリックすればいい。

で基本構成は、ボタン内に表示する文字列を制御すれば
ＯＫかなと。これであとは、ゲーム性を持たせて
遊んでくれる人が、熱くなるような肉付けをすればよい。

ということで、応援チームとそれ以外のチーム名を表示させ、
他のチーム名をクリックすれば得点し、応援チームを
クリックすると減点。さらに監督をクリックすると
さらに＋何点、または−何点が与えられるようにした。

さらに応援チームをクリックすると、減点に加え、
ペネルティとして、数秒間、クリックできなくした。
で「クリックもぐら」と命名し公開した。

ゲーム作成自体は、タイマで制御すればいいので単純。
ところが、NetscapeとIEでボタンの表示のされかたが
違う。IEだとボタン内に表示する文字列により、
ボタンの横幅が可変になる。

まあ、勝手にゲーム的には難しくなってるんだけどね。^^);;

それと、Ｍａｃ使いの友達にＭａｃで試してもらったら、
全く動かないようだ。状況がわからないので、対処のしようが
ないので、JavaScriptの大家に質問したら、どうもＭａｃじゃ
動作しないようで、別な手段で作成することに。

これがボタンの変りに画像内でマウスイベントを取得する方法に
替えたが、こちらはこちらでマウスの表示が変るし、
クリック抜けもあるしで、積極的な公開は諦めました。

珍しい名前を付けたはずが

　てんてん丸の名前を付けるのにママといろいろ揉めたが、
横浜が日本一になった２日後に生まれたこともあり、
横浜にちなんだ名前ということで考えたが、
名前の本には、この考えた名前は載ってなかった。

それで、これはいいと、即座に決めたんけど。。。。

なんと、１９９８年生まれの赤ちゃんの名前の上位番付に
こともあろうにこの考えた名前があった。

なぬーーーー！！！そんなバカな。本には載ってないのに。
ってか、その本が単に古かっただけなのね。^^);;;;

ただ上位といっても、１０００人中数十人ぐらいで、
まあ、一クラスに一人いるかどうかなので、
昔のように、同じ名前がたくさんいるような状況では
ないですね。

名前が多様化してきたんでしょう。というより人と同じ名前は
付けたくないし、珍しい名前を付けてみたいとか、いろいろ
考えてるんでしょうね。まあ、自分も同じだったけどね。^^);;

あと、この日記で「てんてん丸」と呼んでいるのは、息子のことで
まあ、息子のペンネーム的なものです。