Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

2018/08/28 (火)

泥酔の公式

| 02:36 | 泥酔の公式 - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - 泥酔の公式 - 雪乃☆雫のなでしこ日和 泥酔の公式 - 雪乃☆雫のなでしこ日和 のブックマークコメント

 マイナビ連載34目は、ほろ酔いの公式でした。

 まあ、ワタシなんぞは常に、泥酔の公式ですがね(´д`;


 それはさておき、なでしこ3がバージョンアップしていました☆

3.0.48
・プラグインで定数の一部が表示されない問題を修正(#287)
・関数代入的呼び出しをサポート (#290)
・『クリップボード関数追加。(#290)
・『秒待』命令のためのsleepモジュールのコンパイルが失敗する問題を修正(#289)

3.0.46
・plugin_turtle.jsに『カメクリック時』命令を追加。(9bd8753)
・セレクトボックス作成追加。#286
・依存パッケージの更新
・「DOMテキスト取得」「DOMテキスト設定」で、タグに対応した 対応ブラウザを変更(2c3a3a2) 

 3.0.46・・・知らなかった・・・

 ボタンエディタ同様に、セレクトボックスが作れるようになってる!

 和時計作った時には、地道にHTML作って設定したですよ。


 こで、ほろ酔いの公式です。

 そういえばコレは、セレクトボックスが使われていたんだよねーっと言うわけで、もっぺん見に行ってみたところ、ふつーにHTMLで設定されていましたw

 タブこれで、必要を感じなすったというわけですね(^m^)

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

 とゆうわけで、これをセレクトボックス作成を使ってやってみようと思ったですが・・・valueとかselectedの設定はどうしたら・・・???

 よく分かんないケドとりあえずこんな感じ~?

 GUI作成部分以外は、元のままです。

# --- 設定 --- (*1)
ほろ酔時 = 1
酒データ=[
  {"種類":" ビール", "度数": 5, "容器": "中ジョッキ", "容量": 435},
  {"種類": "酎ハイ", "度数": 4, "容器": "中ジョッキ", "容量": 435},
  {"種類": "ワイン", "度数": 14, "容器": "ワイングラス", "容量": 120},
  {"種類": "焼酎", "度数": 25, "容器": "ロックグラス", "容量": 200},
  {"種類": "日本酒", "度数": 15, "容器": "マス(合)", "容量": 180},
  {"種類": "ウィスキー", "度数": 43, "容器": "ワンショット", "容量": 30}
]

#---変更箇所 ここから--------------------------------------------------------
# --- UI作成 --- (*2)
HTML = 『
<div class="nako3">
  <p><div id="gui"></div></p>
  <p><div id="result"></div></p>
</div>
』
「#nako3_div_1」にHTMLHTML設定。

酒リスト配列。
(酒データの要素数)
 酒リスト[回数-1]=酒データ[回数-1]["種類"]
ここまで。

「#gui」にDOM親要素設定。
「体重(kg): 」のラベル作成。
「60」のエディタ作成して、体重エディタ代入改行作成改行作成。
「お酒の種類: 」のラベル作成。
酒リストのセレクトボックス作成して、酒種類セレクトに代入改行作成改行作成。
「計算」のボタン作成して、計算ボタン代入。
計算ボタンの「幅」に「200px」をDOMスタイル設定。

# --- イベントを指定 --- (*3)
計算ボタンをクリックした時には
  体重=体重エディタからテキスト取得。
  酒種類=酒種類セレクトからテキスト取得。
 酒種類=酒リストから酒種類を配列検索。
#---変更箇所 ここまで--------------------------------------------------------

  # 入力種類から、お酒のデータを取り出す --- (*4)
  C=酒データ[酒種類]
  酒名=C["種類"]
  アルコール度数=C["度数"]
  容器=C["容器"]
  容量=C["容量"]
  # 計算
  酒量 = 1000×体重÷(アルコール度数×12)+(15×体重÷アルコール度数)×(ほろ酔時-1)
  何杯=FLOOR(酒量÷容量×10)÷10
  # 結果表示
  S=「{ほろ酔時}時ほろ酔いするには..<br>
酒量: {酒量}ml<br>
{容器}: {何杯}杯」
  「#result」にSをHTML設定。
ここまで

https://nadesi.com/doc3/index.php?%E3%81%AA%E3%81%A7%E3%81%97%E3%81%933%E7%B0%A1%E6%98%93%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF

簡易エディタで、一応元のと同様に動くことを確認~。

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

2018/07/22 (日)

和時計(不定時法時計)

| 00:15 | 和時計(不定時法時計) - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - 和時計(不定時法時計) - 雪乃☆雫のなでしこ日和 和時計(不定時法時計) - 雪乃☆雫のなでしこ日和 のブックマークコメント

 前にちょこっと書いていた、時計的なものの件。

https://nadesiko.g.hatena.ne.jp/snowdrops89/20180427/1524800687

 なでしこ1にはあるけど、なでしこ3には実装されていない二十四節気取得関数を作ったりして作ろうとしていたのは和時計でした。

 別のところで公開するように作ったんだけど、なかなかよく出来たように思うから、やっぱりこっちにも載せとく~♪

 江戸時代の不定時法による時刻を表示するものです。

 和時計には、昼と夜とで針の進む早さを変えるものと、目盛の隔を変えるものがありますが、わたしの能力的な問題と、資料としては昼夜比が目で見て分かった方が良いので後者を採用。

 サインとコサインの呪文を覚えた!(むしろ覚えてなかったんか;)

#-----------------------------------------------------------------------
# 不定時法時計
#-----------------------------------------------------------
#---データ----------
節気=配列。二十四節気データ=配列。Noは。
二十四節気URL=「../data/24sekki.csv」
データ=[{"D":6.3811,"A":0.242778},{"D":21.1046,"A":0.242765},{"D":4.8693,"A":0.242713},{"D":19.7062,"A":0.242627},{"D":6.3968,"A":0.242512},{"D":21.4471,"A":0.242377},{"D":5.6280,"A":0.242231},{"D":20.9375,"A":0.242083},{"D":6.3771,"A":0.241945},{"D":21.9300,"A":0.241825},{"D":6.5733,"A":0.241731},{"D":22.2747,"A":0.241669},{"D":8.0091,"A":0.241642},{"D":23.7317,"A":0.241654},{"D":8.4102,"A":0.241703},{"D":24.0125,"A":0.241786},{"D":8.5186,"A":0.241898},{"D":23.8896,"A":0.242032},{"D":9.1414,"A":0.242179},{"D":24.2487,"A":0.242328},{"D":8.2396,"A":0.242469},{"D":23.1189,"A":0.242592},{"D":7.9152,"A":0.242689},{"D":22.6587,"A":0.242752}];
日出没=[{"明":"6:16","暮":"17:17"},{"明":"6:14","暮":"17:30"},{"明":"6:05","暮":"17:45"},{"明":"5:51","暮":"17:59"},{"明":"5:33","暮":"18:12"},{"明":"5:12","暮":"18:25"},{"明":"4:50","暮":"18:38"},{"明":"4:29","暮":"18:52"},{"明":"4:10","暮":"19:06"},{"明":"3:55","暮":"19:20"},{"明":"3:47","暮":"19:32"},{"明":"3:47","暮":"19:38"},{"明":"3:54","暮":"19:38"},{"明":"4:05","暮":"19:29"},{"明":"4:18","暮":"19:15"},{"明":"4:32","暮":"18:55"},{"明":"4:45","暮":"18:32"},{"明":"4:57","暮":"18:09"},{"明":"5:09","暮":"17:48"},{"明":"5:21","暮":"17:29"},{"明":"5:35","暮":"17:14"},{"明":"5:48","暮":"17:05"},{"明":"6:01","暮":"17:03"},{"明":"6:11","暮":"17:07"},{"明":"6:00","暮":"18:00"}]
刻="卯","六","明"],["辰","五","朝"],["巳","四","昼"],["午","九","昼"],["未","八","昼"],["申","七","夕"],["酉","六","暮"],["戌","五","夜"],["亥","四","夜"],["子","九","夜"],["丑","八","暁"],["寅","七","暁"]]
旧月名=["睦月","如月","弥生","卯月","皐月","水無月","文月","葉月","長月","神無月","霜月","師走"]
漢数字=["一","二","三","四","五","六","七","八","九","十"]
月名=。日日=表示節板=「今日」
#-----------------------------------------------------------

#---説明----------
プログラム説明=「【プログラム説明】」
不定時法=「【不定時法とは】」
読み方=「【和時計の読み方】」
「#btn」にDOM親要素設定。
「プログラム説明」のボタン作成して、説明ボタン代入。
「不定時法とは」のボタン作成して、不定時法ボタン代入。
「和時計の読み方」のボタン作成して、読方ボタン代入。
「詳細データ」のボタン作成して、詳細ボタン代入。
#-----------------------------------------------------------

#---画面設定----------
「#clock」にDOM親要素設定。
「現在時刻(定時法): 」のラベル作成エディタ作成して、定時法に代入。
「#date」に「 」をDOMテキスト設定。
「#sekki」に「 」をDOMテキスト設定。
「#sekki-date」に「 」をDOMテキスト設定。
#-----------------------------------------------------------

#---描画設定----------
「#tokei」へ描画開始。
カメ描画先は「#tokei」
カメ画像URL=「../image/hari.png」

#時計のサイズを指定
時計サイズ=350
外枠太=5
マージン=20
半径=時計サイズ/2
中点=時計サイズ/2+マージン
#-----------------------------------------------------------

#---二十四節気データダウンロード----------
二十四節気URLへGET送信した時には
  対象CSV取得し、それを二十四節気データへ代入。
  24
    節気[回数-1]=配列。
    節気[回数-1]=二十四節気データ[回数-1][0]
  ここまで。

    #---セレクトボックス作成---------
    節気セレクト=「<select id="sekki-select" name="sekki-select">
    <option>今日</option>
    」
    数=0
    節気を反復
    節気セレクト=「<option value="{数}">{節気[数]}</option>」を節気セレクトに一行追加。
    数=数+1。
    ここまで。
    節気セレクト=「<option>定時法</option></select>」を節気セレクトに一行追加。
    「#select」にDOM親要素設定。
    節気セレクトを「#select」にDOM_HTML設定。
    「#sekki-select」の「onchange」に「節板変更」をDOMイベント設定。
    #-----------------------------------------------------------

  #---描画----------
    カメ作成。カメ非表示。
  0にカメ速度設定。
  今日の二十四節気No取得し、それをNoに代入。

  文字盤作成。Noで節板作成。時計表示。カメ表示。
  「時計表示」を1秒毎。
    #-----------------------------------------------------------
ここまで。

#-----------------------------------------------------------

#---ボタンイベント----------
説明ボタンをクリックした時には、
  プログラム説明を言うここまで。
不定時法ボタンをクリックした時には、
  不定時法を言うここまで。
読方ボタンをクリックした時には、
  読み方を言うここまで。
詳細ボタンをクリックした時には、
  説明文=。
  12
    仮=刻[回数-1][3]。
    仮=仮の6から3だけ文字削除。
    仮=「{刻[回数-1][2]}{刻[回数-1][1]}ツ : {仮}」
    説明文=説明文に仮を一行追加。
  ここまで。
  説明文を言うここまで。

「#sekki」をクリックした時には、
  説明文=。
  説明文=説明文に「{節気[No]}({二十四節気データ[No][1]}) {二十四節気データ[No][2]}」を一行追加。
  説明文=説明文に「{二十四節気データ[No][3]}{二十四節気データ[No][4]} {二十四節気データ[No][5]}(暦便覧)」を一行追加。
  もし、二十四節気データ[No][4]=「節」ならば、節中=「正節」。
  違えば、節中=「中気」
  説明文=説明文に「{二十四節気データ[No][6]}の月の{節中}。{二十四節気データ[No][8]}」を一行追加。
  説明文=説明文に「天文学的には、太陽が黄経{二十四節気データ[No][7]}度の点を通過する時。」を一行追加。
  説明文を言うここまで。
#-----------------------------------------------------------

●時計表示
  もし=「00:00:00」かつ表示節板=「今日ならば、
    [0,0,400,400]の描画クリア。カメ非表示。
    文字盤作成。Noで節板作成。カメ表示。
  ここまで。
  定時法にをテキスト設定。
  を「:」で区切る。
  時=それ[0]。分=それ[1]。
  時角度=(時/24*360)+((分/60)*15)
  [中点,中点]へカメ起点移動。
  時角度にカメ角度設定。
ここまで。

●節板変更
  # セレクトボックスのvalueを取得する
  表示節板=「#sekki-select」の「value」をDOM属性取得。
  もし表示節板=「今日ならば、
    今日の二十四節気No取得し、それをNoに代入。
  違えばもし表示節板=「定時法」ならば、
    No=24。
  違えば、
    No=表示節板。
    今年の節気[No]で二十四節気日付取得し、日付に代入。
    日付を「/」で区切る。月=それ[0]。日=それ[1]。
    月と日で日付漢字化。
  ここまで。
  [0,0,400,400]の描画クリア。カメ非表示。
  文字盤作成。Noで節板作成。カメ表示ここまで。

●文字盤作成
  外枠太に太設定。白色に塗色設定。黒色線色設定。
  [中点,中点]へ半径の描画。
  3に太設定。
  [中点,中点]へ半径-50の描画。
  [中点,中点]へ半径-75の描画。
  1に太設定。
  [中点,中点]へ半径-95の描画。
  灰色に塗り色設定。「10px Aria」に描画フォント設定。
  24
   [(半径+10)*COS(DEG2RAD(15*回数-90))+中点-外枠太,(半径+10)*SIN(DEG2RAD(15*回数-90))+中点+外枠太]へ回数文字描画
  ここまで。
ここまで。

●(Noで)節板作成
  もし、No=24ならば、
    「#date」に「定時法表示」をDOMテキスト設定。
    「#sekki」に「 」をDOMテキスト設定。
    「#sekki-date」に「一日を十二等分・一時は二時」をDOMテキスト設定。
  違えば、
    「#date」に「{月名} {日日}日」をDOMテキスト設定。
    「#sekki」に節気[No]をDOMテキスト設定。
    今年の節気[No]を二十四節気日付取得し、節気日付に代入。
    もし、No=23ならば、
      今年の節気[0]を二十四節気日付取得し、次節気日付に代入。
    違えば、
      今年の節気[No+1]を二十四節気日付取得し、次節気日付に代入。
    ここまで。
    次節気日付=「{今年}/{次節気日付}」に「-0/0/1」を日付加算。
    次節気日付=次節気日付を「/」で区切る。
    2
      一時=次節気日付[回数]の1だけ文字左部分。
      もし、一時=「0」ならば、次節気日付[回数]=次節気日付[回数]の1から1だけ文字削除。
    ここまで。
    次節気日付=「{次節気日付[1]}/{次節気日付[2]}」
    「#sekki-date」に「({節気日付}~{次節気日付})」をDOMテキスト設定。
  ここまで。

  明六=日出没[No]["明"]。「#ake6」に明六をDOMテキスト設定。
  暮六=日出没[No]["暮"]。「#kure6」に暮六をDOMテキスト設定。
  明六を「:」で区切る。
  明六時=それ[0]。明六分=それ[1]。
  暮六を「:」で区切る。
  暮六時=それ[0]。暮六分=それ[1]。

  明六正刻角度=(明六時/24*360)+((明六分/60)*15)
  暮六正刻角度=(暮六時/24*360)+((暮六分/60)*15)
  昼一刻長=(暮六正刻角度-明六正刻角度)/6。
  昼長=(86400/(360/昼一刻長))*6。「#hiru」に「漢字」で昼長を時計算をDOMテキスト設定。
  昼一刻=(86400/(360/昼一刻長))。「#hiru1」に「漢字」で昼一刻を時計算をDOMテキスト設定。
  夜一刻長=(360-(暮六正刻角度-明六正刻角度))/6。
  夜長=(86400/(360/夜一刻長))*6。「#yoru」に「漢字」で夜長を時計算をDOMテキスト設定。
  夜一刻=(86400/(360/夜一刻長))。「#yoru1」に「漢字」で夜一刻を時計算をDOMテキスト設定。
  明六=0&明六。
  詳細データ作成(明六,昼一刻,0)
  詳細データ作成(暮六,夜一刻,6)
  詳細データ=詳細データをCSV取得。

  明六初刻角度=明六正刻角度-(夜一刻長/2)
  暮六初刻角度=暮六正刻角度-(昼一刻長/2)
  朝五初刻角度=明六初刻角度+昼一刻長/2+夜一刻長/2
  夜五初刻角度=暮六初刻角度+昼一刻長/2+夜一刻長/2

  黒色塗り色設定。3に太設定。
  明六正刻角度で昼夜分離描画。
  暮六正刻角度で昼夜分離描画。
  明六初刻角度で刻区切描画。
  明六初刻角度+(昼一刻長/4+夜一刻長/4)で0を文字盤描画。
  暮六初刻角度で刻区切描画。
  暮六初刻角度+(昼一刻長/4+夜一刻長/4)で6を文字盤描画。
  5
    朝五初刻角度+(昼一刻長*(回数-1))で刻区切描画。
    朝五初刻角度+(昼一刻長*(回数-1))+(昼一刻長/2)で(回数)を文字盤描画。
    夜五初刻角度+(夜一刻長*(回数-1))で刻区切描画。
    夜五初刻角度+(夜一刻長*(回数-1))+(夜一刻長/2)で(回数+6)を文字盤描画。
  ここまで。
  24
    もし、(回数-1)%4=0ならば、2に太設定。
    違えば、1に太設定。
    明六正刻角度+(昼一刻長/4*(回数-1))で細区切描画。
    暮六正刻角度+(夜一刻長/4*(回数-1))で細区切描画。
  ここまで。
ここまで。

●(角度で)昼夜分離描画
  x=(半径-75)*COS(DEG2RAD(角度-90))+中点
  y=(半径-75)*SIN(DEG2RAD(角度-90))+中点
  [中点,中点]から[x,y]まで描画
ここまで。
●(角度で)刻区切描画
  x1=(半径-94)*COS(DEG2RAD(角度-90))+中点
  y1=(半径-94)*SIN(DEG2RAD(角度-90))+中点
  x2=(半径)*COS(DEG2RAD(角度-90))+中点
  y2=(半径)*SIN(DEG2RAD(角度-90))+中点
  [x1,y1]から[x2,y2]まで描画。
ここまで。
●(角度で)細区切描画
  x1=(半径-94)*COS(DEG2RAD(角度-90))+中点
  y1=(半径-94)*SIN(DEG2RAD(角度-90))+中点
  x2=(半径-75)*COS(DEG2RAD(角度-90))+中点
  y2=(半径-75)*SIN(DEG2RAD(角度-90))+中点
  [x1,y1]から[x2,y2]まで描画。
ここまで。
●(角度でNoを)文字盤描画
  「bold 36px serif」に描画フォント設定。
  x=(半径-25)*COS(DEG2RAD(角度-90))+中点-18
  y=(半径-25)*SIN(DEG2RAD(角度-90))+中点+15
  [x,y]へ刻[No][0]を文字描画。
  「bold 18px serif」に描画フォント設定。
  x=(半径-62)*COS(DEG2RAD(角度-90))+中点-9
  y=(半径-62)*SIN(DEG2RAD(角度-90))+中点+6
  [x,y]へ刻[No][1]を文字描画ここまで。

●詳細データ作成(六ツ,一刻,A)
  一刻=「デジタル」で一刻を時計算。
  時=「{六ツ}:00」。
  刻[A][3]=時。
  5
   C=回数
   (回数)
     時=時に「+{一刻}」を時間加算。
   ここまで。
   刻[A+C][3]=時。
  ここまで。
ここまで。
#-----------------------------------------------------------
●日付加算(SにAを)
  記号=Aの1だけ文字左部分。
  A=Aの1から1だけ文字削除。
  A=Aを「/」で区切る。
  y=A@1/12を切捨。m=A@1%12。
  S=Sを「/」で区切る。
  もし、記号=「+」ならば、
    y=y+(S@1+m)/12を切捨。
    S@0=S@0+A@0+y。
    S@1=(S@1+m)%12。
  違えば、
    S@0=S@0-A@0-y。
    S@1=S@1-m。
  ここまで。
  もし、S@1=0ならば、
    S@1=12。S@0=S@0-1。  #ここね
  ここまで。
  d=(A@2)*(24*60*60)。
  年=S@0。月=S@1。日=S@2。
  S=「{年}/{月}/{日}」をUNIXTIME変換。
  もし、記号=「+」ならば、S=S+d。
  違えば、S=S-d。
  S=Sを日時変換。
  S=Sの10だけ文字左部分。
  Sで戻るここまで。

●時間加算(SにAを)
  記号=Aの1だけ文字左部分。
  A=Aの1から1だけ文字削除。
  A=Aを「:」で区切る。
  時=(A@0)*60*60。分=(A@1)*60。秒=(A@2)。
  S=「{今日} {S}」をUNIXTIME変換。
  もし、記号=「+」ならば、S=S+時+分+秒。
  違えば、S=S-時-分-秒。
  S=Sを日時変換。
  S=Sの8だけ文字右部分。
  Sで戻るここまで。

●(SでAを)時計算
  hh=(A/3600)を切捨。
  mm=((A-(hh*3600))/60)を切捨。
  ss=(A)-(hh*3600)-(mm*60)を切捨。
  もし、S=「漢字」ならば、
   もし、(hh=0)かつ(mm=0)ならば、
     それは、「{ss}秒」
   違えばもし、hh=0ならば
     それは「{mm}分{ss}秒」。
   違えば、
     それは「{hh}時{mm}分{ss}秒」。
   ここまで。
  違えば、
   それは、「{hh}:{mm}:{ss}」
  ここまで。
ここまで。
#-----------------------------------------------------------
●CSV取得(Sを|Sの|Sで)
  仮表=配列。
  S=Sを改行区切る。
  Sを反復
    それを「,」で区切る。
    仮表にそれ配列追加。
  ここまで。
  仮表で戻るここまで。
#-----------------------------------------------------------
●(日付の)二十四節気No取得
  日付を「/」で区切る。
  年=それ[0]
  月=それ[1]。
  日=それ[2]。
  月と日で日付漢字化。
  もし、月<3ならば、Y=年-1。
  違えばY=年。
  もし、日>15ならば、数=月*2-1。
  違えば、数=月*2-2
  日=データ[数]["D"]とデータ[数]["A"]でYの節気計算。
  もし、(「{年}/{月}/{日}」をUNIXTIME変換)≦(日付をUNIXTIME変換)ならば、
    数で戻る。
  違えば、
    もし、数=0ならば、23で戻る。
    違えば、数-1で戻る。
  ここまで。
ここまで。

●(月と日で)日付漢字化
  月名=旧月名[月-1]
  もし、日<10ならば、
    日日=漢数字[日-1]
  違えば、
    もし、(日の1だけ文字左部分)=1ならば、十位=。
    違えば、十位=漢数字[(日の1だけ文字左部分)-1]。
    もし、(日の1だけ文字右部分)=0ならば、一位=。
    違えば、一位=漢数字[(日の1だけ文字右部分)-1]。
    日日=「{十位}十{一位}」。
  ここまで。
ここまで。

●(年のSを|Sで)二十四節気日付取得
  年を「/」で区切る。
  年=それ[0]
  数=節気からSを配列検索。
  もし、数<4ならばY=年-1。
  違えばY=年。
  月=((数/2)を切捨)+1。
  日=データ[数]["D"]とデータ[数]["A"]でYの節気計算。
  「{月}/{日}」で戻るここまで。

●(DとAでYの)節気計算
  INT(D+(A*(Y-1900))-INT((Y-1900)/4))
ここまで。
#-----------------------------------------------------------------------

http://www.geocities.jp/snowdrops890/nako3/wadokei_1_03.html

 針はカメになっています。

 CSSを使うより楽で助かった♪

クジラ飛行机クジラ飛行机2018/08/28 14:48かっこよすぎる!

雪乃☆雫雪乃☆雫2018/08/29 02:45きゃあぁ、ありがとうございます(≧▽≦)

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

2018/07/07 (土)

DOM和スタイル!

| 14:30 | DOM和スタイル! - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - DOM和スタイル! - 雪乃☆雫のなでしこ日和 DOM和スタイル! - 雪乃☆雫のなでしこ日和 のブックマークコメント

 気が付いたらもう七月。

 でも、七月とは思えない寒さなのです><


 それはさておき、なでしこ3が、またいつのにかバージョンアップしてるようです!(v3.0.45)

ブラウザの「**の時」イベントで、変数対象」を設定するように修正。
・「未定義(=undefined)」を追加。「コンソール表示(=console.log)」を追加。
・『DOM和スタイル』を導入。『DOMスタイル一括設定』『DOMスタイル設定』に和スタイルが指定できるようにした。
・全角半角変換処理を追加
・位置情報取得時,位置情報監視時,位置情報監視停止の命令を追加
・古いモジュールを最新に対応(20e5167)

 DOM和スタイル!

 ワタシが前にここで、こっと呟いてた件だ♪

 しかし、マニュアルがまだ更新されていないので、よく分かんない~。

 でも、こんな感じに指定出来るようです。

「#nako3_div_1」の「色」に赤色DOMスタイル設定。
「#nako3_div_1」の「背景色」に水色DOMスタイル設定。
「#nako3_div_1」に「あいうえお」をテキスト設定。

 一括設定も。

「#nako3_div_1」に{
 "色": 青色,
 "背景色": 銀色,
 }をDOMスタイル一括設定。
「#nako3_div_1」に「あいうえお」をテキスト設定。

 簡易エディタでお試し出来ます☆

https://nadesi.com/doc3/index.php?%E3%81%AA%E3%81%A7%E3%81%97%E3%81%933%E7%B0%A1%E6%98%93%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF

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

2018/06/14 (木)

ストリートビューを表示できるようにしてみたよ!

| 12:58 | ストリートビューを表示できるようにしてみたよ! - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - ストリートビューを表示できるようにしてみたよ! - 雪乃☆雫のなでしこ日和 ストリートビューを表示できるようにしてみたよ! - 雪乃☆雫のなでしこ日和 のブックマークコメント

 またずっと放置してしまった。

 なんにもしてなかったわけでもないけど、ほとんどなんにもしてなかったw

 なでしこ3のwindows版をインストールしようとすると、どうも解凍失敗するとゆう話を前に書きましたが、

https://nadesiko.g.hatena.ne.jp/snowdrops89/20180219/1519013743

 マイナビ連載27目で、のナゾが解明されていました。

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

 OS標準のZIP解凍ツールでは、ZIPファイルがうまく解凍できないいう問題があるそうです。

 なんとー(´д`;

 7-Zipであっさりできました~。しかも速かった~;;;


 だけど、こんどラズベリーパイに入れてみようとしたらうまくいかないの~(´Д⊂ヽ

 Node.jsを最新版にするの段階だから、なでしこ以前だ・・・


 さて、なでしこの件なのかビミョーなため記事にしてませんでしたが(単に記事かくのめんどーだっただけという話もある;)、あんまり放置しすぎなので、やっぱり書いとく。

 以前グーグルマップと天気予報を表示するのを作りました。

https://nadesiko.g.hatena.ne.jp/snowdrops89/20180306/1520328115

 度は、ストリートビューも出せるようにしてみたよ☆

 コピペで行けそうなのが無かったので、あちこちを参考に、前のマップ表示Javascriptに形式を合わせて、こんな感じ。

//----------------------------------------------------------


//ストリートビュー表示(#svpFieldに表示)
function svpInit(I,K,H,P,Z) {
    var centerPosition = new google.maps.LatLng(I,K);  //座標
    var svpOption = {
        position : centerPosition,  //地図の中心座標
        pov : {
            //(Hはurlのhの値。Pはtから90を引いたものっぽい。)
            heading:H,  //カメラの方角。カメラの北からの相対角度。北が0°、東が90°、南が180°、西は270°。
            pitch:P,    //カメラの角度。ストリートビュー車に対する相対角度。範囲は、90°(上方)から-90°(下方)。
            zoom:Z      //カメラのズームレベル。0で完全にズームアウト。
        }
    };
    //ストリートビュー描画
    var svp = new google.maps.StreetViewPanorama(document.getElementById("svpField"), svpOption);
}
//-----------------------------------------------------------------------
ボタンのスタイル設定
ボタンスタイルは、{
  "font-size": "24px",
  "padding": "0px 10px",
}
「button」にボタンスタイルをDOMスタイル一括設定。

#ボタンのイベント設定
「#sapporo」をクリックした時には、
  地図表示(43.0686605,141.3507548,15,"札幌駅")。
  ビュー表示(43.0686605,141.3507548,70,10,1)。
ここまで。
「#asahikawa」をクリックした時には、
  地図表示(43.7628477,142.3584328,15,"旭川駅")。
  ビュー表示(43.7628477,142.3584328,130,0,0)。
ここまで。
「#hakodate」をクリックした時には、
  地図表示(41.7735356,140.727167,15,"函館駅")。
  ビュー表示(41.7735356,140.727167,240,10,0)。
ここまで。
「#otaru」をクリックした時には、
  地図表示(43.1977717,140.9941033,15,"小樽駅")。
  ビュー表示(43.1977717,140.9941033,250,10,0)。
ここまで。

●地図表示(緯度,経度,縮尺,情報)
 「mapInit({緯度},{経度},{縮尺},"{情報}");」をJS実行。
 緯度と経度で天気予報表示ここまで。
●ビュー表示(緯度,経度,方角,角度,拡大)
 「svpInit({緯度},{経度},{方角},{角度},{拡大});」をJS実行。
ここまで。
#-----------------------------------------------------------
●天気予報表示(緯度と経度で)
 緯度=緯度を文字列変換から5だけ右端削除。
 経度=経度を文字列変換の5だけ右端削除。
 URL=「https://api.openweathermap.org/data/2.5/weather?lat={緯度}&lon={経度}&appid=c19347ddb2f832918f4ad2daca4c2d17&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)
  天気予報=「{日時}の{場所}の天気
<img src="{画像URL}{天気アイコン}.png" align="middle"> {天気}
気温: {気温}度 / 湿度: {湿度}%」   天気予報を「#weather」にDOM_HTML設定。  ここまで。 ここまで。 #----------------------------------------------------------- ●右端削除(SからAだけ|Sの)  数=Sの文字数。  S=Sの(数-(A-1))からAだけ文字削除。  Sで戻るここまで。 #-----------------------------------------------------------

http://www.geocities.jp/snowdrops890/wnako3_test/14_StreetView.html

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

2018/04/27 (金)

なでしこ3で二十四節気取得するよ!

| 12:44 | なでしこ3で二十四節気取得するよ! - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - なでしこ3で二十四節気取得するよ! - 雪乃☆雫のなでしこ日和 なでしこ3で二十四節気取得するよ! - 雪乃☆雫のなでしこ日和 のブックマークコメント

 しばらく何もしないでいるうちに、なでしこが、v3.0.41にバージョンアップしてた!

 タイマー停止命令が追加されて、以前、ラーメンタイマーや15パズルのタイムトライアル作る際にぼやいていた、秒毎が止められない問題が解決したようです。

 ますますゲームが作り易くなりそうですね☆

 あと、楕描画が追加されたラシイ・・・

 この調子で描画系が充実していくと、かなり色々出来そう

 でもむしろまず、「塗る」が欲しいなあ・・・


 マイナビ連載26目は、アナログ時計でした。

 わたしにとっては、かなりタイムリーな記事でした。

 ちょっと、時計的なモンを作ろうとしてたんで。

 針を画像にしたいけど、画像を転させる命令が無いよなあと思ってたんですが、カメがあるじゃないか!

 カメさんは任意の画像に置換え可能なので、いつをカメ角度設定してやれば簡単にできそうだよ♪

 短針を分と連動させて動かすには?という問題が提出されていたので、取りあえず解答しておく~。

時角度=((時%12)÷12×360)+((分÷60)×30)

 さて、しかしは、なでしこ1にはあるけど、なでしこ3にはまだ無い、二十四節気の取得です。

 なでしこ1の二十四節気取得は、日付を引数にして、それが二十四節気の日付と合致していたら、それを返す的な感じ。

 むしろあると便利に違いないのは、この年の「立春」とかの日付を教えてくれるヤツ。

 取りあえず両方やってみた~。


 計算式とデータは、ここからもらってきました。

http://addinbox.sakura.ne.jp/sekki24_topic.htm

#データ
節気=["小寒","大寒","立春","雨水","啓蟄","春分","清明","穀雨","立夏","小満","芒種","夏至","小暑","大暑","立秋","処暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"]
データ=[{"D":6.3811,"A":0.242778},{"D":21.1046,"A":0.242765},{"D":4.8693,"A":0.242713},{"D":19.7062,"A":0.242627},{"D":6.3968,"A":0.242512},{"D":21.4471,"A":0.242377},{"D":5.6280,"A":0.242231},{"D":20.9375,"A":0.242083},{"D":6.3771,"A":0.241945},{"D":21.9300,"A":0.241825},{"D":6.5733,"A":0.241731},{"D":22.2747,"A":0.241669},{"D":8.0091,"A":0.241642},{"D":23.7317,"A":0.241654},{"D":8.4102,"A":0.241703},{"D":24.0125,"A":0.241786},{"D":8.5186,"A":0.241898},{"D":23.8896,"A":0.242032},{"D":9.1414,"A":0.242179},{"D":24.2487,"A":0.242328},{"D":8.2396,"A":0.242469},{"D":23.1189,"A":0.242592},{"D":7.9152,"A":0.242689},{"D":22.6587,"A":0.242752}]

「2018/04/20」の二十四節気取得して表示
●(日付の)二十四節気取得
  日付を「/」で区切る。
  年=それ[0]
  月=それ[1]
  日=それ[2]
  もし、月<3ならば、Y=年-1。
  違えばY=年。
  もし、日>15ならば、数=月*2-1。
  違えば、数=月*2-2
  日=データ[数]["D"]とデータ[数]["A"]でYの節気計算。
  もし、「{年}/{月}/{日}」=日付ならば、節気[数]で戻る。
  違えば戻るここまで。

今年の「穀雨」を二十四節気日付取得して表示
●(年のSを|Sで)二十四節気日付取得
  年を「/」で区切る。
  年=それ[0]
  数=節気からSを配列検索。
  もし、数<4ならばY=年-1。
  違えばY=年。
  月=((数/2)を切捨)+1。
  日=データ[数]["D"]とデータ[数]["A"]でYの節気計算。
  「{月}/{日}」で戻るここまで。

●(DとAでYの)節気計算
  INT(D+(A*(Y-1900))-INT((Y-1900)/4))
ここまで。

簡易エディタでお試し出来ます。

https://nadesi.com/doc3/index.php?%E3%81%AA%E3%81%A7%E3%81%97%E3%81%933%E7%B0%A1%E6%98%93%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF

うまくいってると思うんだけど・・・

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

2018/03/30 (金)

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

| 08:26 | なでしこ3 v3.0.39がリリース! - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - なでしこ3 v3.0.39がリリース! - 雪乃☆雫のなでしこ日和 なでしこ3 v3.0.39がリリース! - 雪乃☆雫のなでしこ日和 のブックマークコメント

 直前の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 | NDLからまとめてデータを取得する&ISBNチェックディジット - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - NDLからまとめてデータを取得する&ISBNチェックディジット - 雪乃☆雫のなでしこ日和 NDLからまとめてデータを取得する&ISBNチェックディジット - 雪乃☆雫のなでしこ日和 のブックマークコメント

 の後たいしたコトはしてませんが、連続して書籍データを取得するのは、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 | NDLのAPIで書籍検索してみるよ! - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - NDLのAPIで書籍検索してみるよ! - 雪乃☆雫のなでしこ日和 NDLのAPIで書籍検索してみるよ! - 雪乃☆雫のなでしこ日和 のブックマークコメント

 掲示板の質問で、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://www.geocities.jp/snowdrops890/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://www.geocities.jp/snowdrops890/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://www.geocities.jp/snowdrops890/wnako3_test/12_new_jyanken_man.html

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

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

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

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

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

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


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

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

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