Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

2018-03-30

なでしこ3 v3.0.39がリリース!

| 08:26

 直前のv3.0.38と合わせて、このような修正と新機能が追加されたようです。

DOMのキーイベント、マウスイベントを手軽に使えるように修正。
・「カメ描画先」「描画開始」でDOMのqueryとidのどちらでも指定できるように修正。
・「ボタン作成」「エディタ作成」「テキストエリア作成」など簡易FORM部品作成命令を追加
・「テキスト設定」「テキスト取得」「HTML設定」「HTML取得」命令を追加

 だいぶ前にぼやいていた、v0.1.7以降IDでの描画開始がうまくいかなくなってた件が直ったようですね♪

https://nadesiko.g.hatena.ne.jp/snowdrops89/20171029/1509283047



 マイナビ第24目では、「ボタン作成」「エディタ作成」「テキストエリア作成」などが使われていました!

https://news.mynavi.jp/article/nadeshiko-24/

 相変わらず、記事中では特に触れずに、さらっと新機能をコードの中に盛り込んできますねぇw

 注意点としては、簡易エディタでは自動的に「#nako3_div_1」とゆうDIVに作成されるようあらかじめ設定されてるっぽいですが、HTML埋め込みなどで使う場合は、「DOM親要素設定」が必要ラシイ。

「#nako3_div_1」にDOM親要素設定。

 みたいな?

 設定の決まりは「描画開始」と一緒で、セレクタとしてもIDとしても、DOM要素を変数に取得して指定するのもできました~☆

 他に、テキストエリアとチェックボックスも作成出来るようです。

 この調子で、CSSなんかも基本的なヤツは日本語でできるようになりませんかね~。

 ある程度HTMLCSSを覚えたら、あんま必要性なくなっちゃうんだけど、でもやっぱり全部なでしこっぽく日本語で書けたらイイよねぇ。

 出来れば、animationなんかがCSSを意識しなくてもできるようになったら、すごく楽しいと思うんだよね。



 して、何より特筆すべきは、「DOMのキーイベント、マウスイベントを手軽に使えるように修正」

 コレだけ見てもなんかよく分からず、前の「クリックした時には~」が追加された時

https://nadesiko.g.hatena.ne.jp/snowdrops89/20171121/1511244526

以上の感動を覚えませんが、なこ丼でクジラ飛行机さまご自身がトゥートされております!

https://nadesiko-users.info/web/statuses/99767817836972781

 『押されたキー』『マウスX』『マウスY』にイベントの値が入るように修正…

 コレだよ、コレっ!!!(喜)

 ゲーム作るなら絶対に必要なヤツです。

 これでまた、色々遊べそう。やったねヽ(^o^)ノ


 は、早速リファレンスにもご説明が追加され、使用例のサンプルもあります

https://nadesi.com/doc3/index.php?%E3%82%AD%E3%83%BC%E5%85%A5%E5%8A%9B%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6

https://nadesi.com/doc3/index.php?%E3%83%9E%E3%82%A6%E3%82%B9%E6%93%8D%E4%BD%9C%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6

 ・・・とゆうわけで、狂喜乱舞してるわりに、自分で作ったお試しコードはいっこも無いってゆうね;

トラックバック - http://nadesiko.g.hatena.ne.jp/snowdrops89/20180330

2018-03-22

NDLからまとめてデータを取得する&ISBNチェックディジット

| 01:06

 の後たいしたコトはしてませんが、連続して書籍データを取得するのは、10件ほどのデータで1秒隔くらいでお試ししたところ、案外すんなりと快調に取得することが出来ました☆

 ・・・っと思っていたら、なんか突然モノスゴク遅くなることもあるみたい~。

 こっ、コレは、こんなにクエリ送ってくんなと怒られてるんですかね><

 んなに無茶な送りっぷりでは無いつもりだったんですがね・・・

 それとも単に向こうさんが何らかの事情で遅くなってる?

 まあ、応答なしとかになって焦っても、最終的には正常終了してデータも取れてるので、パソコンやインターネットなんて遅いモノだと思っていれば、何の問題もありません(違;)

 どっちにしても、タイトルがびみょーだったり、ISBNで検索しても、点字の資料とか何とかで2個以上上がってきちゃうとかあるし(mediatypeの設定で解決するかと思ったらしなかった)で、結局は修正が必要そうだし、バーコードでも読めるんならいいですが、ISBN入力するだけでも結構めんどーで、一度にんな大量に処理する予定は無いんですけどね。


 でっ、こんな感じ?

 肝心の部分は、前のと何も変わってないんですけどね;;;

書籍データ=。取得データ=。
ファイル名=今日の「/」を置換「-」の「:」を置換「.csvISBNデータ=「9784591153062
9784041047675
9784416311165
9784091898425
9784861349157
9784885745669
9784101445069
9784122062023
4893635360
4893635840」

(ISBNデータの要素数
  ISBNデータ[回数-1]で書籍情報取得。
  取得データに書籍データを一行追加。
  書籍データは。
  1秒待つ。
取得データをファイル名に保存終わる。
#-----------------------------------------------------------
# http://iss.ndl.go.jp/information/api/
*書籍情報取得(ISBNで)
  検索URLは「http://iss.ndl.go.jp/api/sru?operation=searchRetrieve&recordSchema=dcndl_simple&query=mediatype=1 AND isbn={ISBN}」
  検索URLからHTTPデータ取得。
  データ=それUTF8_SJIS変換。
  
  ISBNISBNチェック。
  もしそれ=0ならば、書籍データは「エラー!,"{ISBN}"」。戻る。
  ヒット数=データから「numberOfRecords」のタグ切り出しし、それタグ削除。
  もし、ヒット数=0ならば、書籍データは「未検出!,"{ISBN}"」。戻る。
  
  データ=データから「record」のタグ切り出し。
  データを「</record>」で区切る。
  (データの要素数
    C=回数-1。
    書籍データ[C][0]=データ[C]から「dc:title」のタグ切り出しし、それタグ削除。
    書籍データ[C][1]=データ[C]から「dcndl:titleTranscription」のタグ切り出しし、それタグ削除。
    書籍データ[C][2]=データ[C]から「dc:creator」のタグ切り出しし、それタグ削除し、改行を「 ; 」に置換。
    書籍データ[C][3]=データ[C]から「dcndl:creatorTranscription」のタグ切り出しし、それタグ削除し、改行を「 ; 」に置換。
    書籍データ[C][4]=データ[C]から「dcndl:volume」のタグ切り出しし、それタグ削除。
    書籍データ[C][5]=データ[C]から「dcndl:seriesTitle」のタグ切り出しし、それタグ削除し、改行を「 ; 」に置換。
    書籍データ[C][6]=データ[C]から「dc:publisher」のタグ切り出しし、それタグ削除。
  
    一時=データ[C]から「dc:identifier」のタグ切り出し。
    (一時の要素数)
      一時[回数-1]を「URI」で正規表現マッチ。
      もしそれ=「URIならば、書籍データ[C][7]=一時[回数-1]のタグ削除。
      一時[回数-1]を「ISBN」で正規表現マッチ。
      もしそれ=「ISBNならば、
        ISBN=一時[回数-1]のタグ削除。
        書籍データ[C][8]=書籍データ[C][8]ISBN「 ; 」。
      もし回数=(一時の要素数)ならば、書籍データ[C][8]の3文字右端削除。
#-----------------------------------------------------------
#ISBNチェックディジット計算
# 計算式はウィキペディアによる。
# https://ja.wikipedia.org/wiki/ISBN
#-----------------------------------------------
*ISBNチェック(ISBNの|ISBNを)
  ISBNISBN文字列分解。A=0。
  もしISBN要素数=10ならば、
    9
      B=ISBN\(回数-1)。
      C=10-(回数-1)。
      A=A+B*C。
    D=11-A%11。
    もし、D=10ならば、D=「X」。
    もし、D=11ならば、D=0。
    もし、(D=ISBN\9)ならばはい戻る。
    違えばいいえ戻る。
  違えばもしISBN要素数=13ならば、
    12
      B=ISBN\(回数-1)。
      回数%2=0ならば、C=3。
      違えば、C=1。
      A=A+B*C。
    もし、A%10=0ならば、D=0。
    違えば、D=10-A%10。
    もし、(D=ISBN\12)ならばはい戻る
    違えばいいえ戻る。
  違えばいいえ戻る。
#-----------------------------------------------------------

 そうそうISBNコードとゆう物を学びまして、日本の場合ですが先頭の「9784」は固定であることや(見りゃ分かるでしょとか言わないで~;)最後の一桁は、チェックディジットと言って、コードが違ってないか確認するためのヤツだというコトを知りました。

 前のコード部分を計算して、このチェックディジットと合わなければ、どっか入力ミスってるよ!と分かるって仕掛けです。おぉ!

 計算式がウィキペディアに載っていたので、チェックできるようにしてみました☆

 なにせ、世の中で一番信用できないのは自分! ってくらいに迂闊な人ですからねぇ~。入力ミスらないワケ無いですからっ(爆)



 とりあえずは、こんなモノかな。

トラックバック - http://nadesiko.g.hatena.ne.jp/snowdrops89/20180322

2018-03-17

NDLのAPIで書籍検索してみるよ!

| 19:34

 掲示板の質問で、GoogleBooksAPIを使って書籍情報を取得したい! とゆうのがあって、ワタシの心にものすごくヒットしました☆

http://www.eznavi.net/bbs/index2.php?pagetop=415&only=one

 記事一つ書けるくらい結構なんだかんだして、モノスゴク賢くなったりもしたんだけど・・・

 いかんせんぐーぐるさまの検索結果は、、ISBNコードで検索してんのにヒットしないとか、複数巻あるシリーズ本でも登録されてんのとされてないのがあるとか、漫画も全巻揃ってないとか、なかなかしょぼいようです。

 あと、沢山ヒットしても最初の十件しか取得されないようで、たぶん最大取得件数とか、取得開始のインデックスとかが設定できるパラメーターがあるじゃろうと思うんだけど・・・日本語のリファレンスって無いんですかねえ???

 どうも英語のトコしか出てこなくて・・・挫折しましたヽ(;´Д`)ノ


 しかしアレですよ。書籍検索ならNDLじゃないですか?

http://iss.ndl.go.jp/information/api/

 天下の国立国会図書館さまですよ!

 枕詞として、世界のぐーぐるさまとどっちが偉いんだとゆうのは置いといて、日本で本を検索するなら断然こっちですとも!!

 がっ・・・ご説明を読むも、一体何のことやら・・・;(頭悪すぎ)

 難解な日本語はカンタンな英語より読解がむずかしいの~(+_+)

 具合わるくはならないケド、すぐに脳がシャットダウンしてしまうので、何度も自分を再起動ないとなりませんw

 なんか、ぷろとこる? が6種類もあるしさー。

 でっ、でも取りあえず、無難に(?)SRUでXMLを取得するやつでURLを叩いてみる。

http://iss.ndl.go.jp/api/sru?operation=searchRetrieve&query=isbn=9784041056271

 ぐーぐるさまには無いと言われた本が、見事にヒットしました☆

 してさらにまた・・・取得データのスキーマ?? とやらが3種類もあるらしく・・・

 パラメータを省略すると、「dc」となりさっきのやつ。

 一番詳しいのが「dcndl」

http://iss.ndl.go.jp/api/sru?operation=searchRetrieve&recordSchema=dcndl&query=isbn=9784041056271

 「dcndl_simple」はのシンプル版?

http://iss.ndl.go.jp/api/sru?operation=searchRetrieve&recordSchema=dcndl_simple&query=isbn=9784041056271

 明らかにコレが一番人の目には優しいですねw

 dcよりは大分詳細で、必要っぽい情報は全て備わっているようです。(実際にはタイトルと作者と、あとせいぜい出版社くらいあればいいんだから、dcでもいいんだけどw)


 ぐーぐるさまとは違い、省略すると最大取得件数が200件なので、題名や作者で無節操な検索をしてみたら、フリーズしたかと思うほど遅くて焦った;;;

 でも大丈夫~。「maximumRecords」で最大取得件数が、「startRecord」で開始位置が変更出来ます☆ 日本語って素晴らしい!(違;)

 データベースとしての方針の違いか、ぐーぐるさまと違って内容的な記載はほぼ入ってないので、検索結果を眺めてもつまらんけど、データを取りたいだけなら別にいらないからね。

 読みが取れるというのはすごくいいと思うんですよ☆ 後でソートしたい場合とかあるし。


 とゆうわけで? とりあえずデータを取得してみる。

 折角ジェイソンさんを覚えたのに、XMLぅ~。

 しかし、なでしこ1ならむしろ、タグ切り出しタグ削除で、簡単にデータが取れますからね♪

#-----------------------------------------------------------
ISBN=「4198918635」
検索URLは「http://iss.ndl.go.jp/api/sru?operation=searchRetrieve&recordSchema=dcndl_simple&query=mediatype=1 AND isbn={ISBN}」
検索URLからHTTPデータ取得。
データ=それUTF8_SJIS変換。

データ=データから「record」のタグ切り出し。
データを「</record>」で区切る。
(データの要素数
  C=回数-1。
  書籍データ[C][0]=データ[C]から「dc:title」のタグ切り出しし、それタグ削除。
  書籍データ[C][1]=データ[C]から「dcndl:titleTranscription」のタグ切り出しし、それタグ削除。
  書籍データ[C][2]=データ[C]から「dc:creator」のタグ切り出しし、それタグ削除し、改行を「 ; 」に置換。
  書籍データ[C][3]=データ[C]から「dcndl:creatorTranscription」のタグ切り出しし、それタグ削除し、改行を「 ; 」に置換。
  書籍データ[C][4]=データ[C]から「dcndl:volume」のタグ切り出しし、それタグ削除。
  書籍データ[C][5]=データ[C]から「dcndl:seriesTitle」のタグ切り出しし、それタグ削除し、改行を「 ; 」に置換。
  書籍データ[C][6]=データ[C]から「dc:publisher」のタグ切り出しし、それタグ削除。

  一時=データ[C]から「dc:identifier」のタグ切り出し。
  (一時の要素数)
    一時[回数-1]を「URI」で正規表現マッチ。
    もしそれ=「URIならば、書籍データ[C][7]=一時[回数-1]のタグ削除。
    一時[回数-1]を「ISBN」で正規表現マッチ。
    もしそれ=「ISBNならば、
      ISBN=一時[回数-1]のタグ削除。
      書籍データ[C][8]=書籍データ[C][8]ISBN「 ; 」。
    もし回数=(一時の要素数)ならば、書籍データ[C][8]の3文字右端削除。
書籍データを言う。
#-----------------------------------------------------------

 コレもぐーぐるさまには無いと言われたヤツだけど、無事取れました。

 ISBNでのヒット率が良ければ、いろいろ検索して遊ぶわけじゃなく蔵書リストのデータを取るだけなら、なにもGUIを使って選択するこたあないんで、ISBNコードのデータを作って置いて処理させても良さそうに思うけど、あんまり連続して機械的にクエリを送っちゃダメだろうね。大量アクセスに関するご注意を見ても、具体的に最低何秒隔を開けろとか、毎分何件以下にすれとか的な記載は無いからねぇ~。

 うーん、珍しく実用の物を作る気満々だねwww


 ・・・シカシ・・・「4839951845」はNDLでもヒットしない・・・むむむ。

トラックバック - http://nadesiko.g.hatena.ne.jp/snowdrops89/20180317

2018-03-06

グーグルマップと天気予報

| 18:21

 以前JS実行とゆうことを知って、しかし、Javascriptなんていっこも分からないからなぁ~・・・と思っていたんですが、こんなのを見つけました。

コピペで簡単!Google Mapをサイトに表示する方法
http://www.hp-stylelink.com/news/2013/11/20131119.php

 このスクリプトをコピペしてくれば、自分のHPにぐーぐるまっぷが表示出来るって寸法です。コレをなでしこからJS実行で使えば、なんか面白いこと出来そうじゃないですか?♪

 ただ、ここの情報はちょっと古くて、Google Maps APIを使うには、APIキーなるモノを取得しなければならないようです。むむむ。

【2018年度版】Google MapsAPIキー を簡単に取得する
https://nendeb.com/276

 別にキーを取得するだけはやっつけですぐ出来ました☆

 が、キーを他人に使われないよう制限をかけなきゃダメで(1日あたり地図の生成回数が25,000以上が90日以上連続すると課金の対象になっちゃうんだって!)ここを参考にして設定しました。たまにはダッシュボードで数値が異常じゃないか見とく必要もありそうですね・・・むー;


 で、取り込むスクリプトはこうなりまする。

<!-- Google Mapを使うのに必要プラグイン -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=xxx(APIキー)&callback=initMap"></script>

 ただマップを表示するだけなら、JavaScriptのソースをコピペしてきてlatとlonを変えるだけでいいんだけど、なでしこを使って、ボタンでマップを切り替えられるプログラムにしてみました~♪

<script type="なでしこ">
#ボタンのスタイル設定
ボタンスタイルは、{
  "font-size": "24px",
  "padding": "0px 10px",
}
「button」にボタンスタイルをDOMスタイル一括設定。

#ボタンのイベント設定
「#sapporo」をクリックした時には、地図表示(43.0686605,141.3507548,15,"札幌駅")。ここまで。
「#asahikawa」をクリックした時には、地図表示(43.7628477,142.3584328,15,"旭川駅")。ここまで。
「#hakodate」をクリックした時には、地図表示(41.7737832,140.7263354,15,"函館駅")。ここまで。
「#otaru」をクリックした時には、地図表示(43.1977717,140.9941033,15,"小樽駅")。ここまで。

●地図表示(緯度,経度,縮尺,情報)
 「mapInit({緯度},{経度},{縮尺},"{情報}");」をJS実行。
ここまで。
</script>

<H1>なでしこ3てすと~ぐーぐるまっぷの表示</H1>
<HR>
  <button id="sapporo">札幌</button><button id="asahikawa">旭川</button><button id="hakodate">函館</button><button id="otaru">小樽</button>
  <div id="mapField" style="width:520px; height:390px;">ボタンを押すと地図が表示されるよ★</div>

http://snowdrops.starfree.jp/wnako3_test/14_GoogleMap.html

 Javascript部分はほぼコピペなのでここには載せませんが、ソースを表示で見れます。

 なでしこから引数を渡せるように変えました。



 して・・・

 マイナビ連載22目では、お天気APIの使い方を学びました。

 コレもまずはAPIキーを取得しなきゃないようです。

 えええええ英語だぁぁ~(ToT)

 ベベベツニムズカシイコトハナイデスヨ・・・

 キー取得するだけなら、わりとありふれたアレですから・・・

 でででも、こう全部英語なページが開いたりすると、わっと言って画面閉じたくなっちゃうんだよね・・・;;;

 でもまあ、取得出来まして、記事のとうりに簡易エディタで動かすのは当然出来ました。てきとーにご近所の町を色々入れてみましたが、結構な田舎町も名前が登録されていたりしてびっくり。

 だけどなんですか、暴風雪警報も出て外は猛吹雪って時に、のほほんと「曇りがち」とかお知らせしてくれるOpenWeatherMapさまって・・・

 言葉も通じない外つ国の遙か彼方から観測してらっしゃるんだね・・・(違うって;)


 さてさて、それはさておき説明のページをぐーぐる翻訳さまに読んでいただいて、都市名だけでなく緯度と経度での指定も出来るラシイことが分かったので、グーグルマップの表示と連動させてみようと思い立ちました。

 ところが、どうもうまくいかない・・・Ajax送信ができない・・・ってかHTMLにv3.0.31のスクリプトが取り込めてない気がする・・・とゆうことをちょこっとなこ丼(https://nadesiko-users.info/)でつぶやいたら、なななんとあっというまに対応して頂けました!素晴らしいですね!!ありがたいですね!!!


 で、こんな感じ~。

#-----------------------------------------------------------
●天気予報表示(緯度と経度で)
 緯度=緯度を文字列変換から5だけ右端削除。
 経度=経度を文字列変換の5だけ右端削除。
 URL=「https://api.openweathermap.org/data/2.5/weather?lat={緯度}&lon={経度}&appid={APIキー}&units=metric&lang=ja」

# AjaxAPIにアクセス --- (*2)
 URLにGET送信した時には
  画像URL=「https://openweathermap.org/img/w/」
  対象JSONデコードして、Jに代入。# --- (*3)
  天気=J["weather"][0]["description"]
  気温=J["main"]["temp"]
  湿度=J["main"]["humidity"]
  天気アイコン=J["weather"][0]["icon"]
  日時=J["dt"]を日時変換の16だけ文字左部分。
  場所=J["name"]

  # HTML表示--- (*4)
  天気予報=「{日時}の{場所}の天気<BR>
<img src="{画像URL}{天気アイコン}.png" align="middle"> {天気}<BR>
気温: {気温}度 / 湿度: {湿度}%」
  天気予報を「#weather」にDOM_HTML設定。
 ここまで。
ここまで。
#-----------------------------------------------------------
●右端削除(SからAだけ|Sの)
 数=Sの文字数。
 S=Sの(数-(A-1))からAだけ文字削除。
 Sで戻るここまで。
#-----------------------------------------------------------

http://snowdrops.starfree.jp/wnako3_test/14_OpenWeatherMap.html

 地名も日本語表示に対応して欲しいよね~。

 いや、これは単に緯度と経度でコレが取得出来るのが面白いからこうしてみただけなんだけどねw

 しかものために、ムダに緯度と経度を小数点以下二桁までに加工してみたりして(^▽^;(そうないとナゼか札幌がHokkaidoになってしまう。ナゾだ・・・)

 ナゾと言えば「Sapporo-shi」と都市名で指定した時と、緯度経度で指定した時とで、lonとlatとnameは同じ物が返ってきてるのに、天気の結果が異なる時があるっていうね???

 でもまあ、こんなもんでしょ☆

 敵が英語だから、ナゾを解明しようとは思わんし、なでしこのことじゃないし。

トラックバック - http://nadesiko.g.hatena.ne.jp/snowdrops89/20180306

2018-03-01

ジャンケンマンを作ってみたよ☆

| 13:30

 ムカシ、デパートのゲームコーナーなんかに置かれてたジャンケンマン。

 ・・・とゆうことを最初に書いてから、もう3ヶ月くらい経ってるっぽいね。いやいやいや;

 とっ、ともかくっ、ワタシが知っているのは、Newジャンケンマンとゆう2代目の機種のようで、いちおうそれを再現してみました。

 と言っても、ムダに「画像を使わないそれっぽくする」とゆう方針のもと作ったので、見た目の再現度はびみょーですけど・・・まあこんなもんでしょうw

 プログラムとCSSとどっちが長いんだよとゆう勢い;

 CSS・・・具合わるくなる!><

 ・・・そう言えば、前の記事でHTMLタグにtopやleftの設定を入れてると、HTML5の時に反映されずに位置がずれちゃう的なコトを書いたんだけど、実はそれは誤りで、pxが抜けてたせいでした;;;

 HTML5の時は、単位とか、あとカラーコードの前の#とかを省略してはダメのようです。(ムカシは付けてなかった気がする・・・!DOCTYPE htmlを付けなければ、ふつーに通るんですよコレが;;;)

 手の表示も、頑張って座標を取って作りました。

 ずっと、写からプログラムで座標を取れないかなーとか考えてたんだけど、ランプの明るさが一定ではないので、色や大きさにばらつきがある所から中心の一点を取るとゆうのは、どうもワタシの知恵ではもう完全にムリっぽく思われたので、結局、クリックした座標を記録していくとゆう、ほぼ手作業と変わらん手立てとなりましたw

 ところでなでしこ3では、改行の記号として{~}が使えないんですかねー?

 ジェイソンさんにすれってことかね(^▽^;

<script type="なでしこ">
#-----------------------------------------------------------

#----- 宣言 ----------
メダル=0。
敵手=。
判定=。
連勝回数=0。
得点=0。

#----- フラグ ----------
コイン投入フラグ=100。
スタートボタンオフ。
ジャンケンボタンオフ。
戻ボタンオフアニメカウンター=0。
手アニメ隔=1。
アニメ中=オフ。
相子フラグ=オフ。

#----- 音設定 ----------
音フォルダ=「http://www.geocities.jp/snowdrops890/audio/」
音_ジャンケン=音フォルダ「Jyanken.mp3」
音_ポン_ヤッタネ=音フォルダ「J_pon_win.mp3」
音_ポン_ズコー=音フォルダ「J_pon_zuko.mp3」
音_ポン_アイコ=音フォルダ「J_pon_draw.mp3」
音_ショ_ヤッタネ=音フォルダ「J_syo_win.mp3」
音_ショ_ズコー=音フォルダ「J_syo_zuko.mp3」
音_ショ_アイコ=音フォルダ「J_syo_draw.mp3」
音_メダル投入=音フォルダ「medal_in.mp3」
音_メダル戻=音フォルダ「medal_modosi.mp3」
音_メダル戻32=音フォルダ「medal_modosi_32.mp3」

#----- CSS設定 ----------
メダルCSSは、{
  "font-size": "32px",
  "background-color": "#ffdd00",
  "opacity": "1",
}
百CSSは、{
  "font-size": "16px",
  "background-color": "#CCCCCC",
  "opacity": "1",
}
判定点灯CSSは、{
  "text-shadow": "3px 5px 15px #FFEE00,-3px -5px 15px #FFEE00",
  "box-shadow": "5px 5px 10px #FFFFDD,-5px -5px 10px #FFFFDD,5px 10px 15px #FFEEDD inset,-5px -10px 15px #FFEEDD inset",

}
判定消灯CSSは、{
  "text-shadow": "none",
  "box-shadow": "none",
  "background-color": "#FF9966",
}
得点点灯CSSは、{
  "text-shadow": "3px 3px 5px #FFEE00,-3px -3px 5px #FFEE00",
  "box-shadow": "5px 5px 10px #FFFFDD,-5px -5px 10px #FFFFDD,5px 10px 15px #FFEEDD inset,-5px -10px 15px #FFEEDD inset",
  "background-color": "#FFFFEE",
  "color": "#FFCC99",
}
得点消灯CSSは、{
  "text-shadow": "none",
  "box-shadow": "none",
  "background-color": "#FFFFFF",
  "color": "#FF9966",
}

#----- 手表示用座標 ----------
共通=「122,120{改行}125,130{改行}127,143{改行}129,155{改行}130,167{改行}167,120{改行}166,132{改行}162,144{改行}159,155{改行}156,166{改行}113,243{改行}113,254{改行}160,243{改行}160,254{改行}46,118{改行}57,117{改行}64,110{改行}66,97{改行}55,171{改行}63,179{改行}74,183{改行}83,189{改行}94,195{改行}85,202{改行}76,210{改行}77,221{改行}86,229{改行}96,231{改行}108,232{改行}119,233{改行}130,234{改行}141,235{改行}153,235{改行}166,233{改行}178,232{改行}188,229{改行}195,220{改行}193,210{改行}184,202{改行}194,195{改行}204,188{改行}212,179{改行}218,170{改行}225,160{改行}228,149{改行}233,138」
グー=「49,161{改行}42,152{改行}40,141{改行}42,130{改行}164,89{改行}175,88{改行}186,86{改行}197,89{改行}204,99{改行}210,109{改行}220,108{改行}230,116{改行}235,127{改行}72,87{改行}80,78{改行}92,74{改行}103,77{改行}114,82{改行}125,78{改行}135,72{改行}146,75{改行}154,83」
チョキ=「62,86{改行}61,75{改行}60,63{改行}60,52{改行}61,40{改行}65,30{改行}72,22{改行}83,19{改行}94,21{改行}100,30{改行}104,43{改行}106,54{改行}110,67{改行}120,64{改行}125,52{改行}130,41{改行}135,30{改行}142,21{改行}153,17{改行}164,20{改行}169,29{改行}170,41{改行}168,54{改行}165,65{改行}166,78{改行}49,161{改行}42,152{改行}40,141{改行}42,130{改行}164,89{改行}175,88{改行}186,86{改行}197,89{改行}204,99{改行}210,109{改行}220,108{改行}230,116{改行}235,127」
パー=「43,170{改行}33,166{改行}23,161{改行}14,154{改行}6,146{改行}8,135{改行}13,124{改行}24,122{改行}35,119{改行}176,69{改行}186,62{改行}195,53{改行}203,45{改行}213,38{改行}224,43{改行}227,54{改行}226,66{改行}222,77{改行}220,88{改行}230,95{改行}241,90{改行}253,87{改行}263,93{改行}262,104{改行}257,115{改行}250,123{改行}243,132{改行}62,86{改行}61,75{改行}60,63{改行}60,52{改行}61,40{改行}65,30{改行}72,22{改行}83,19{改行}94,21{改行}100,30{改行}104,43{改行}106,54{改行}110,67{改行}120,64{改行}125,52{改行}130,41{改行}135,30{改行}142,21{改行}153,17{改行}164,20{改行}169,29{改行}170,41{改行}168,54{改行}165,65」

#----- 手のアニメーション表示 ----------
グー=グー改行共通をCSV取得。グーの手作成。グー=0。
チョキ=チョキ改行共通をCSV取得。チョキの手作成。チョキ=1。
パー=パー改行共通をCSV取得。パーの手作成。パー=2。
手アニメ表示。

#----- イベント設定 ----------
「#coin」をクリックした時には、コイン投入。ここまで。
「#start」をクリックした時には、スタート。ここまで。
「#gu」をクリックした時には、0で勝負処理。ここまで。
「#chi」をクリックした時には、1で勝負処理。ここまで。
「#pa」をクリックした時には、2で勝負処理。ここまで。
「#modosi」をクリックした時には、メダル戻。ここまで。
「#info」をクリックした時には、説明。ここまで。

●スタート
 もし、スタートボタンオンならば、
  「#voice」に「<audio src="{音_ジャンケン}" autoplay></audio>」をDOM_HTML設定。
  手アニメ隔=0.1。判定消灯。
  スタートボタンオフ。ジャンケンボタンオン。戻ボタンオフボタン有効変更。
  「#mes_coin」にDOMテキスト設定。
 ここまで。
ここまで。
●(自手で)勝負処理
 もし、ジャンケンボタンオンならば、
  手アニメ隔=0。判定消灯。
  ジャンケンボタンオフボタン有効変更。自手のボタン点灯。
  敵手=3の乱数。敵手表示。
  結果は(敵手 - 自手 + 3) % 3
  もし、結果が0ならば、
   もし、相子フラグ=オンならば、「#voice」に「<audio src="{音_ショ_アイコ}" autoplay></audio>」をDOM_HTML設定。
   違えば、「#voice」に「<audio src="{音_ポン_アイコ}" autoplay></audio>」をDOM_HTML設定。
   ジャンケンボタンオンボタン有効変更。//自手のボタン点灯。
   「#aiko」に判定点灯CSSDOMスタイル一括設定。相子フラグ=オン。
  違えばもし、結果が1ならば、
   もし、相子フラグ=オンならば、「#voice」に「<audio src="{音_ショ_ヤッタネ}" autoplay></audio>」をDOM_HTML設定。
   違えば、「#voice」に「<audio src="{音_ポン_ヤッタネ}" autoplay></audio>」をDOM_HTML設定。
   「#kachi」に判定点灯CSSDOMスタイル一括設定。相子フラグ=オフ。
   得点消灯。得点加算。
   もし、連勝回数=5ならば、
    「#se」に「<audio src="{音_メダル戻32}" autoplay></audio>」をDOM_HTML設定。
    2秒後には
      戻ボタンオン。メダル戻。
    ここまで。
   違えば、
    戻ボタンオン。スタートボタンオンボタン有効変更。自手のボタン点灯。
    「#mes_coin」に「スタートを<BR>おしてね!」をDOMテキスト設定。
   ここまで。
  違えばもし、結果が2ならば、
   もし、相子フラグ=オンならば、「#voice」に「<audio src="{音_ショ_ズコー}" autoplay></audio>」をDOM_HTML設定。
   違えば、「#voice」に「<audio src="{音_ポン_ズコー}" autoplay></audio>」をDOM_HTML設定。
   「#make」に判定点灯CSSDOMスタイル一括設定。相子フラグ=オフ。
   連勝回数=0。得点=0。得点消灯。
   もし、メダル≦0ならば、
    ゲームオーバー。
   違えば、
    コイン投入フラグ=2。コイン投入。
   ここまで。
  ここまで。
 ここまで。
ここまで。
●得点加算
  連勝回数=連勝回数+1。
  もし、(連勝回数≧1)かつ(連勝回数≦5)ならば、
   得点=2^連勝回数。
   「#p{得点}」に得点点灯CSSDOMスタイル一括設定。
  ここまで。
ここまで。
●メダル戻
 もし、戻ボタンオンならば、
  戻ボタンオフ。スタートボタンオフ。ジャンケンボタンオフボタン有効変更。
  もし、連勝回数=5でなければ、「#se」に「<audio src="{音_メダル戻}" autoplay></audio>」をDOM_HTML設定。
  メダル=メダル+得点。連勝回数=0。得点=0。
  「#medal」にメダルをDOMテキスト設定。
  得点消灯。判定消灯。
  コイン投入フラグ=2。コイン投入。
 ここまで。
ここまで。
#-----------------------------------------------------------
●判定消灯
  「#aiko」に判定消灯CSSDOMスタイル一括設定。
  「#kachi」に判定消灯CSSDOMスタイル一括設定。
  「#make」に判定消灯CSSDOMスタイル一括設定。
ここまで。
●得点消灯
  「#p2」に得点消灯CSSDOMスタイル一括設定。
  「#p4」に得点消灯CSSDOMスタイル一括設定。
  「#p8」に得点消灯CSSDOMスタイル一括設定。
  「#p16」に得点消灯CSSDOMスタイル一括設定。
  「#p32」に得点消灯CSSDOMスタイル一括設定。
ここまで。
●(自手の)ボタン点灯
  もし、自手がグーならば、
   「#gu」をオンに有効変更。「#chi」をオフに有効変更。「#pa」をオフに有効変更。
  違えばもし、自手がチョキならば、
   「#gu」をオフに有効変更。「#chi」をオンに有効変更。「#pa」をオフに有効変更。
  違えばもし、自手がパーならば、
   「#gu」をオフに有効変更。「#chi」をオフに有効変更。「#pa」をオンに有効変更。
  ここまで。
ここまで。
#-----------------------------------------------------------
●ボタン有効変更
 もし、スタートボタンオンならば、
   「#start」をオンに有効変更。
 違えば、
  「#start」をオフに有効変更。
 ここまで。
 もし、ジャンケンボタンオンならば、
   「#gu」をオンに有効変更。「#chi」をオンに有効変更。「#pa」をオンに有効変更。
 違えば、
   「#gu」をオフに有効変更。「#chi」をオフに有効変更。「#pa」をオフに有効変更。
 ここまで。
 もし、戻ボタンオンならば、
  「#modosi」をオンに有効変更。
 違えば、
  「#modosi」をオフに有効変更。
 ここまで。
ここまで。
●(btnをAに)有効変更
 もし、A=オンならば、
  「{btn}_active」に「{btn}:active{波カッコ}box-shadow:none; top:3px;{波カッコ閉じ}
{btn}{波カッコ}box-shadow: 0 3px 0 #666666,5px 5px 30px #FFFFFF inset,-5px -5px 30px #FFFFFF inset;{波カッコ閉じ}」をDOM_HTML設定。
 違えば、
  「{btn}_active」に「{btn}:active{波カッコ}box-shadow: 0 3px 0 #666666; top:0px;{波カッコ閉じ}
{btn}:active{波カッコ}box-shadow: 0 3px 0 #666666{波カッコ閉じ}」をDOM_HTML設定。
 ここまで。
ここまで。
#-----------------------------------------------------------
●コイン投入
 もし、コイン投入フラグ=1ならば、
  メダル=メダル-1。
  「#se」に「<audio src="{音_メダル投入}" autoplay></audio>」をDOM_HTML設定。
  「#medal」にメダルをDOMテキスト設定。
  「#coin」の「opacity」に「0」をDOMスタイル設定。  #透明度を0にしてメダルを消す。
  「#mes_coin」に「スタートを<BR>おしてね!」をDOMテキスト設定。
  コイン投入フラグ=0。手アニメ隔=0。スタートボタンオンボタン有効変更。
 違えばもし、コイン投入フラグ=2ならば、
  「#mes_coin」に「メダル<BR>いれる」をDOMテキスト設定。
  「#mes_coin」の「opacity」に「1」をDOMスタイル設定。
  「#coin」に「$」をDOMテキスト設定。
  「#coin」にメダルCSSDOMスタイル一括設定。
  「#coin」の「opacity」に「1」をDOMスタイル設定。
  コイン投入フラグ=1。
 違えばもし、コイン投入フラグ=100ならば、
  メダル=11。
  「#se」に「<audio src="{音_メダル投入}" autoplay></audio>」をDOM_HTML設定。
  「#coin」の「opacity」に「0」をDOMスタイル設定。
  「#mes_coin」の「opacity」に「0」をDOMスタイル設定。
  2秒後には
  「#voice」に「<audio src="{音_メダル戻}" autoplay></audio>」をDOM_HTML設定。
  「#medal」に「11」をDOMテキスト設定。
  「#txtwin」の「opacity」に「0」をDOMスタイル設定。
  「#txtwin」の「transform」に「scale(.1)」をDOMスタイル設定。
  コイン投入フラグ=2。コイン投入。
  ここまで。
 ここまで。
ここまで。
#-----------------------------------------------------------
●ゲームオーバー
  手アニメ隔=1。
  「#txtwin」の「opacity」に「1」をDOMスタイル設定。
  「#txtwin」の「transform」に「scale(1)」をDOMスタイル設定。
  「#mes_coin」に「100<BR>いれる」をDOMテキスト設定。
  「#coin」に「100」をDOMテキスト設定。
  「#coin」に百CSSDOMスタイル一括設定。
  ジャンケンボタンオフボタン有効変更。
  判定消灯。コイン投入フラグ=100。
ここまで。
#-----------------------------------------------------------
●(Aの)手作成
 もし、A=グーならば、「#img_gu」へ描画開始。
 違えばもし、A=チョキならば、「#img_chi」へ描画開始。
 違えばもし、A=パーならば、「#img_pa」へ描画開始。
  黒色線色設定。
  黒色塗り色設定。
  [140,140]に139の描画。
  赤色線色設定。
  赤色塗り色設定。
  P=配列。
  Aを反復
    P=対象を「,」で区切る。
    [P[0],P[1]]に3の描画。
  ここまで。
ここまで。
●手アニメ表示
 もし、手アニメ隔=0でなければ、、
  もしアニメカウンター=グーならば、
    「#img_gu」の「opacity」に「1」をDOMスタイル設定。
    「#img_chi」の「opacity」に「1」をDOMスタイル設定。
  違えばもしアニメカウンター=チョキならば、
    「#img_gu」の「opacity」に「0」をDOMスタイル設定。
  違えばもしアニメカウンター=パーならば、
   「#img_chi」の「opacity」に「0」をDOMスタイル設定。
  ここまで。
 ここまで。
 もしアニメカウンター≧2ならばアニメカウンター=0。
 違えばアニメカウンター=アニメカウンター+1。
 「手アニメ表示」を(手アニメ隔)秒後。
ここまで。
●敵手表示
  もし、敵手=グーならば、
   「#img_gu」の「opacity」に「1」をDOMスタイル設定。
  違えばもし、敵手=チョキならば、
    「#img_gu」の「opacity」に「0」をDOMスタイル設定。
    「#img_chi」の「opacity」に「1」をDOMスタイル設定。
  違えばもし、敵手=パーならば、
    「#img_gu」の「opacity」に「0」をDOMスタイル設定。
    「#img_chi」の「opacity」に「0」をDOMスタイル設定。
  ここまで。
ここまで。
●説明
 「【遊び方】
 まず100を入れて、メダルを11枚ゲットします。
 次に、メダルを1枚入れたら、スタートボタンを押してジャンケンを開始。
 グーチョキパーの任意のボタンを押してジャンケンをし、勝てば得点のボタンが点灯、連勝すると得点がアップしていき、メダル戻しでの得点分のメダルが払い戻せますが、負けると0に戻ってしまいます。
 あいこの時は勝負が付くまで続けてジャンケンボタンが押せます。
 負けたら、また次のメダルを入れて勝負をし、メダルを使い切ったらゲームオーバーです。(100を入れて再スタートできます)
 特にクリア要件はありませんので、自分で目標を決めて頑張りましょう。」を言うここまで。
#-----------------------------------------------------------
●CSV取得(Sを|Sの|Sで)
  仮表=配列。
  S=Sを改行区切る。
  Sを反復
    それを「,」で区切る。
    仮表にそれ配列追加。
  ここまで。
  仮表で戻るここまで。
#-----------------------------------------------------------------------
</script>

<style type="text/css">
/* ゲーム画面 */
#base {
  margin:auto;
  width:400px;
  height:600px;
}
#gamen {
  position:absolute;
  width:400px;
  height:420px;
  background-color:#F5EE55;
  border:solid 10px silver;
}
/* ジャンケンの手を表示する */
#img_gu {
  position:absolute;
  top:130px; left:60px;
  z-index:2;
}
#img_chi {
  position:absolute;
  top:130px; left:60px;
  z-index:1;
}
#img_pa {
  position:absolute;
  top:130px; left:60px;
  z-index:0;
}
/* 得点 */
.point {
  position:absolute;
  display:table-cell;
  width:56px;
  height:56px;
  background-color:#FFFFFF;
  border:solid 1px #CC6633;
  border-radius:30px;

  vertical-align:middle;
  text-align:center;
  color:#FF9966;
  font-weight:bold;
  font-size:36px;
}
/* 勝ち負けの判定 */
.hantei {
  position:absolute;
  display:table-cell;
  width:110px;
  background-color:#FF9966;
  border:solid 3px #000000;
  border-radius:30px;

  vertical-align:middle;
  text-align:center;
  color:#FFFFFF;
  font-weight:bold;
  font-size:28px;
}

/* テキストウィンドウ */
#txtwin {
  position:absolute;
  display:table-cell;
  top:200px;
  width:400px;
  padding:30px 0px;
  z-index:3;
  background-color:rgba(0, 0, 0, 0.7);
  color:#FFFFFF;
  text-align:center;
  vertical-align:middle;
  font-weight:bold;
  font-size:32px;

  transition: opacity 0.5s, transform 0.5s;    /* 0.5秒かけて透明度とサイズの変化 */
  opacity:0;
  transform: scale(.1);
}

/* 操作盤 */
#buttonarea {
  position:absolute;
  width:415px;
  height:180px;
  top:432px;
  left:-10px;
  background-color:#FFFFCC;
  border:solid 3px silver;
  border-radius:10px;
}

/* ボタン総合設定 */
#button {
  position:absolute;
  width:420px;
  top:20px;
}
#button span{
  position:absolute;
  text-align:center;
}
.btn {
  position:relative;
  display:table-cell;
  text-align:center;
  vertical-align:middle;
  text-decoration:none;
  cursor:pointer;
  width:50px;
  height:50px;
  border-radius:30px;
  border:1px solid #999999;
  box-shadow:0 3px 0 #666666;
}
/* ボタン個別設定 */
#start {
  background-color:#FF0000;
}
#gu {
  background-color:#66FF66;
}
#chi {
  background-color:#6699FF;
}
#pa {
  background-color:#FF6699;
}
#modosi {
  background-color:#FF0000;
}

/* コイン(メダルまたは百投入ボタン) */
#coin {
  position:relative;
  display:table-cell;
  text-align:center;
  vertical-align:middle;
  text-decoration:none;
  cursor:pointer;

  width:50px;
  height:50px;
  border-radius:30px;
  border:1px solid #999999;
  box-shadow:0 2px 0 #666666;
  background-color:#CCCCCC;

  font-weight:bold;
  font-size:16px;   /* 100(font-size:16px;) メダル(font-size:32px;)*/
  color:#FFFFFF;
  text-shadow:0 1px 1px rgba(0, 0, 0, 1);
}
#coin:active {
  left: -10px;
}
#mes_coin {
  top:100px;
  left:20px;
  line-height:20px;
}

/* メダル残り枚数表示 */
#medal {
  position:absolute;
  display:table-cell;
  width:80px;
  background-color:#000000;
  border:solid 3px #000000;
  border-radius:10px;

  vertical-align:middle;
  text-align:center;
  color:#FFFF66;
  font-weight:bold;
  font-size:28px;
  top:100px;
  left:275px;
}

#info {
  position:absolute;
  top:390px;
  left:330px;
}
</style>
<style type="text/css" id="start_active"></style>
<style type="text/css" id="gu_active"></style>
<style type="text/css" id="chi_active"></style>
<style type="text/css" id="pa_active"></style>
<style type="text/css" id="modosi_active"></style>

<div id="base">
 <div id="gamen">
  <span class="point" id="p2" style="top:25px; left:30px;">2</span>
  <span class="point" id="p4" style="top:10px; left:100px;">4</span>
  <span class="point" id="p8" style="top:5px; left:170px;">8</span>
  <span class="point" id="p16" style="top:10px; left:240px;">16</span>
  <span class="point" id="p32" style="top:20px; left:310px;">32</span>

  <span class="hantei" id="make" style="top:95px; left:10px;">まけ</span>
  <span class="hantei" id="aiko" style="top:70px; left:142px;">あいこ</span>
  <span class="hantei" id="kachi" style="top:95px; left:270px;">かち</span>

  <canvas id="img_gu" width="280px" height="280px"></canvas>
  <canvas id="img_chi" width="280px" height="280px"></canvas>
  <canvas id="img_pa" width="280px" height="280px"></canvas>

  <span id="txtwin">GAME OVER</span>
  <div id="se"></div><div id="voice"></div>
  <button id="info">遊び方</button>

  <div id="buttonarea">
   <div id="button">
    <span style="left:10px;">スタート<BR><a class="btn" id="start"></a></span>
    <span style="left:110px;">グー<BR><a class="btn" id="gu"></a></span>
    <span style="left:170px;">チョキ<BR><a class="btn" id="chi"></a></span>
    <span style="left:230px;">パー<BR><a class="btn" id="pa"></a></span>
    <span style="left:320px;">メダルもどし<BR><a class="btn" id="modosi"></a></span>
    <span id="mes_coin">100<BR>いれる</span><span style="top:90px; left:80px;"><a id="coin">100</a></span>
    <span style="top:100px; left:170px;">メダルのこり</span><span id="medal">0</span><span style="top:120px; left:370px;">まい</span>
   </div><!-- button -->
  </div><!-- buttonarea -->
 </div><!-- gamen -->
</div><!-- base -->

 あと、HTML埋め込み時のスクリプトのバージョンはまだv3.0.29みたい?

 3.0.31にすると動かないんだよね~?(いや、詳細な変更点のトップは3.0.29になってるし、コレでいいのか?)

 あとあと、v3.0.21は問題ないんだけど、v3.0.29にするとなぜだかIEで動かなくなっちゃうような???むむむ。

 取りあえず、v3.0.21でUPし直した~。

http://snowdrops.starfree.jp/wnako3_test/12_new_jyanken_man.html

 さてさて、んな感じでこんな感じ~☆

 動作としては、だいぶそれっぽいかと思うんだけど・・・

 そうそう、前に一度たりとも32まで行かないとかぼやいてましたが、行く時は結構行くようで、2連続で行ったこともありました!

 やっぱり実機にはズルが仕込まれていたに違いないよ!!!w

 しかし・・・勝っても負けても損も特も無いとなると、ついつい問答無用で5連勝32枚戻しを狙うようになり、駆け引きがなくなってなんかつまらん;

 この手の機種は、こら辺の駆け引きが重要で、面白かったんだったのに・・・


※このブログでは「]]」が消えてしまうっぽい?(これも何かのはてな記法??)

 これも変換しなきゃダメか・・・

トラックバック - http://nadesiko.g.hatena.ne.jp/snowdrops89/20180301