Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

2018/10/11 (木)

はるかさんを連れてくる!

| 15:12 | はるかさんを連れてくる! - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - はるかさんを連れてくる! - 雪乃☆雫のなでしこ日和 はるかさんを連れてくる! - 雪乃☆雫のなでしこ日和 のブックマークコメント

 さて、うちのお狐様は日本語が話せない問題ですが、前の記事でもちょっとんなようなことは書いていますが、いろいろ検索した結果、MicrosoftOfficeの入っていないWindows7標準では、日本語読み上げ用のエンジンが入っていないらしいことが分かりました。(Officeバージョンがあるっぽい)

 ですが、世の中には様々な裏技があるもので、結構無理矢理系で話せるようにすることが出来ました!

Microsoft Speech Platform を SAPI5 として使う」とゆう裏技です。

https://denspe.blog.fc2.com/blog-entry-116.html

 ここの記事を参考に、うちで出来るようになった手順を載せます。(win7 64bit版)

 てゆうか、ほぼ記事の通りなんだけどもさー。Yahoo!ジオシティーズまでもがサービス終了とか、世の中は全く油断がなりませんからねー。手元にメモっておかないと~・・・ってか、なでしこ3のお試しプログラム置き場をお引っ越ししなきゃだよ~ヽ(;´Д`)ノ


Microsoft Speech Platform 11をだうんろーどしてくる!

https://www.microsoft.com/en-us/download/details.aspx?id=27225

 「Download」ボタンを押して、「x86_SpeechPlatformRuntime\SpeechPlatformRuntime.msi」と「x64_SpeechPlatformRuntime\SpeechPlatformRuntime.msi」の二つをダウンロードします。

※32ビット版の人はx64不要です。64ビット版では、x64だけあれば、なでしこ3の「話す」命令で日本語が使えるようになることを確認していますが、x86も入れることで、なでしこ1でもスピーチAPIを使って日本語をしゃべらすことが出来るようになります。

 まあ、AquesTalkが入ってるから別にいいんだけど、なでしこに限らず32ビットのプログラムで使うには必要になるので、折角なら取りあえず入れておいた方が。


Microsoft Haruka 11をだうんろーどしてくる!

https://www.microsoft.com/en-us/download/details.aspx?id=27224

 「Download」ボタンを押すと、なんかいっぱい出てくるけど「MSSpeech_TTS_ja-JP_Haruka.msi」にチェックを入れてダウンロードします。

 これが、はるかさんです。


③いんすとーるする!

 ダウンロードした3つを全て、順にインストールします。

 英語だけど大丈夫(>_<)/ ふつーに次々行けました。


④レジストリを書き換える!

 これが曲者ですが、この記事のとうりなら、簡単にできました!

 ようするに「HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Speech Server\v11.0\Voices\Tokens\TTS_MS_ja-JP_Haruka_11.0」の内容を「HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Speech\Voices\Tokens\TTS_MS_ja-JP_Haruka_11.0」にっくりコピーするとゆうことなんですが・・・

 最初、なでしこでレジストリをコピーするの作ろうと思ったけど、どうも「HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Speech\Voices\Tokens\TTS_MS_ja-JP_Haruka_11.0」への書き込みがうまく行かないでね(´・ω・`)

 なでしこ1は、64ビットキーにうまくアクセス出来ないんじゃないかという疑いが・・・


④-1 以下の内容を、「MSHaruka.reg」という名前で保存する(.regファイルなら名前は何でもいいけど) 場所もどこでも良いです。作業が終わったら消してしまってOKなので。

Windows Registry Editor Version 5.00

[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Speech\Voices\Tokens\TTS_MS_ja-JP_Haruka_11.0]
@="Microsoft Server Speech Text to Speech Voice (ja-JP, Haruka)"
"411"="Microsoft Server Speech Text to Speech Voice (ja-JP, Haruka)"
"CLSID"="{a12bdfa1-c3a1-48ea-8e3f-27945e16cf7e}"
"LangDataPath"="C:\\Program Files (x86)\\Common Files\\Microsoft Shared\\Speech\\Tokens\\TTS_MS_ja-JP_Haruka_11.0\\MSTTSLocjaJP.dat"
"VoicePath"="C:\\Program Files (x86)\\Common Files\\Microsoft Shared\\Speech\\Tokens\\TTS_MS_ja-JP_Haruka_11.0\\HarukaT"

[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Speech\Voices\Tokens\TTS_MS_ja-JP_Haruka_11.0\Attributes]
@=""
"Age"="Adult"
"AudioFormats"="18"
"Gender"="Female"
"Language"="411"
"Name"="Microsoft Server Speech Text to Speech Voice (ja-JP, Haruka)"
"Vendor"="Microsoft"
"Version"="11.0"

[HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\Speech\Voices\Tokens\TTS_MS_ja-JP_Haruka_11.0]
@="Microsoft Server Speech Text to Speech Voice (ja-JP, Haruka)"
"411"="Microsoft Server Speech Text to Speech Voice (ja-JP, Haruka)"
"CLSID"="{a12bdfa1-c3a1-48ea-8e3f-27945e16cf7e}"
"LangDataPath"="C:\\Program Files (x86)\\Common Files\\Microsoft Shared\\Speech\\Tokens\\TTS_MS_ja-JP_Haruka_11.0\\MSTTSLocjaJP.dat"
"VoicePath"="C:\\Program Files (x86)\\Common Files\\Microsoft Shared\\Speech\\Tokens\\TTS_MS_ja-JP_Haruka_11.0\\HarukaT"

[HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\Speech\Voices\Tokens\TTS_MS_ja-JP_Haruka_11.0\Attributes]
@=""
"Age"="Adult"
"AudioFormats"="18"
"Gender"="Female"
"Language"="411"
"Name"="Microsoft Server Speech Text to Speech Voice (ja-JP, Haruka)"
"Vendor"="Microsoft"
"Version"="11.0"

 元の記事では10.0の情報に、11.0への変更方法が追記されていますが、これは11.0に合わせて作成し直しているのでのまま使えます。

 32ビット版の人、64ビット版でx86は入れないいう人はWow6432Nodeのくだりは要らないので、下半分を消して下さい。


④-2 管理者権限で、「MSHaruka.reg」をダブルクリック(または右クリック→結合)して、結合する。


④-3 コントロールパネル→音声認識→音声合成→音声の選択で「Microsoft Server Speech Text to Speech Voice (ja-JP, Haruka)」を選択。


 これで、Firefoxでも「こんにちは」と言ってくれるようになりました\(^▽^)/

 しかし、はるかさんは「Google 日本語」よりも、日本語が下手だなぁ(^^;

 「生麦、生ゴメ、生卵」を「なまむぎ、せいごめ、なまたまご」って読んじゃうんですよ~w

 生米と書けば大丈夫ww

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

2018/10/09 (火)

win7のお狐様は日本語しゃべれない問題

| 12:13 | win7のお狐様は日本語しゃべれない問題 - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - win7のお狐様は日本語しゃべれない問題 - 雪乃☆雫のなでしこ日和 win7のお狐様は日本語しゃべれない問題 - 雪乃☆雫のなでしこ日和 のブックマークコメント

 マイナビ連載37目は、「音声合成APIで時報アプリを作ろう」でした。

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

 新しく追加された「話す」命令のご紹介となっており、前の記事でよく分からんと書いた話者設定の仕方も解説されていました。

 の前に取りあえず、話者一覧取得。

話者一覧取得して反復
  F名前=対象["name"]
  F言語=対象["lang"]
  「{F名前}: {F言語}」を表示ここまで

 記事のコードのとうりです。

 なーるほどねぇ。話者一覧取得して表示するだけじゃダメだったんですね~。

 とゆうわけで、試してみると、Firefoxでは、

Microsoft Anna - English (United States): en-US

 一個しか出てきません。なるほど、やっぱりwin7のお狐様は英語しかしゃべれないっぽい。

 てゆうかアンナか。前男の声って書いたけど、女じゃん(爆)

 なんか、最初聞いた時、声のトーンが低かったから勘違いしたけど、何度もよくよく聞いてみたら女だったわw


 さて、一方のchromeさんですが、

Microsoft Anna - English (United States): en-US
Google Deutsch: de-DE
Google US English: en-US
Google UK English Female: en-GB
Google UK English Male: en-GB
Google español: es-ES
Google español de Estados Unidos: es-US
Google français: fr-FR
Google हिन्दी: hi-IN
Google Bahasa Indonesia: id-ID
Google italiano: it-IT
Google 日本語: ja-JP
Google 한국의: ko-KR
Google Nederlands: nl-NL
Google polski: pl-PL
Google português do Brasil: pt-BR
Google русский: ru-RU
Google 普通话(中国大陆): zh-CN
Google 粤語(香港): zh-HK
Google 國語(臺灣): zh-TW

 いっぱい出てきた!

 何語なのかすら分からんナゾ言語もあるよ~。

 で、話者設定をして中国語もしゃべってくれました!

 話者設定は、言語の指定でも名前の指定でもいけるようです。試しに、

 「Google US English」に話者設定。

 と、してみたら、アンナとは声が変わりました☆


 タブンだけど、Google Chromeでは、ぐーぐるさんで独自に各国語に対応した話者を用意してあるけれど、Firefoxは、Windows標準のものを使用するだけなんだね。

 win7にはアンナさんしかいなけど、win10には誰か日本人も入っているんだろう。

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

2018/10/04 (木)

なでしこ3がしゃべるようになったよ!

| 12:11 | なでしこ3がしゃべるようになったよ! - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - なでしこ3がしゃべるようになったよ! - 雪乃☆雫のなでしこ日和 なでしこ3がしゃべるようになったよ! - 雪乃☆雫のなでしこ日和 のブックマークコメント

 まずは、なでしこがバージョンアップしています。

v3.0.52
・「ここから」「ここまで」命令へのエイリアス「---」や「←」を削除。
・HTML5の音声合成APIをサポート
・WebSocket(サーバ・クライアント)の実験的な実装
・なでしこ3標準エディタにlocalStorageへの自動保存機能を追加

v3.0.51
・『キー送信』命令の修正
 -『クリップボード』命令が動かない問題の修正
・代入的呼び出しの内部コードの仕様変更

v3.0.50
・「キー送信」「窓アクティブ」命令を追加(

 9月はとうとういっこも更新しないうちに10月になってしまった・・・

 それいうのも、キー送信がうまくいかんのよ。窓アクティブもね。

 なんかエラーいっぱいでるヽ(;´Д`)ノ

 マイナビの記事のとうりのコピペなのになー。なんでだ。

 winでこうゆうことするなら、なでしこ1を使うからいいんだけどもさ。


 それはさておき、です!

 なでしこがしゃべるようになってる!w(゜o゜)w

https://nadesi.com/doc3/index.php?plugin_browser%252F%E8%A9%B1

 ちなみにウチの環境だと、こんにちはと言ってくれるのは、Google Chromeさんだけです。

 Firefoxさんは、エラーも出ずうんともすんとも言わないので、なんでだ~と思っていたら、win7のお狐様は日本語がしゃべれないらしい? win10ならしゃべれるようになってるラシイのですが。

 ためしに、

「my name is nako!」と話す。

 としたところ、男の人の声で、英語で読み上げてくれました☆


 ちなみに、くろーむさんで英語を入れると、まいねーむいず……と、女の人の声で、平板な日本語読みをしてくれちゃうんですよね。これは、話者設定で変更したり出来そうに思われるんだけど、よく分からん(´・ω・`)

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

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/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