Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

2017-10-29

v0.1.7で描画開始が・・・?

| 22:17

 なでしこ3がバージョンアップして、また色々の不具合が修正されたようです(^▽^)

 がっ・・・!

 それに伴って、いきなりフェードインとスライドショーが動かなくなっちゃいましたΣ(゜д゜;

 いやー、0.1.7で動かなくなるのはまあ分かるとしても、読んでるスクリプトは0.1.6のままなのにねー。

 メモ帳にコピペして保存して文字列比較をすると0と出るところを見ると、どうやら0.1.7で上書きされてしまってるっぽいね;


 それはさておき、おかしくなったのか仕様変更になったのか定かじゃないけど、問題は「描画開始」でした。

 いままでは、『「canvas#cv_1」のDOM要素取得。』と、DOM要素を一取得したら、の後は『「cv_1」へ描画開始。』とIDで描画先を指定できたんだけど、どうやらコレがうまくいってない

 DOM要素取得した直後に「それへ描画開始」は問題ないようで、とりあえずそれで動くようにしといたけど・・・

 でもそれだと、描画開始のたびにセットで毎DOM要素取得しなきゃないんだよね~。

 うううん、何か他に正しい書き方があるんだろうか・・・

 canvasの使い方はマニュアルに説明が無くて、ワタシがテキトーに色々やってできるようになったヤツだからねえ;;;


 ・・・と思ってたんだけど、どうやらやっぱりバグじゃないかな?

 見たら、マニュアルの「描画開始」の利用例が追加されてたんだけども、エラーになりますよぉ・・・

https://nadesi.com/doc3/index.php?plugin_browser%252F%E6%8F%8F%E7%94%BB%E9%96%8B%E5%A7%8B

「nako3_canvas_1」へ描画開始
[0, 0]へ「https://nadesi.com/doc3/skin/nadesi.com/resource/logo_nadesiko_title.gif」の画像描画

 ちなみに、このようにすると動きます。

canvas#nako3_canvas_1」のDOM要素取得。
それへ描画開始
[0, 0]へ「https://nadesi.com/doc3/skin/nadesi.com/resource/logo_nadesiko_title.gif」の画像描画

 奇しくも上でぐずぐずぼやいていたことの、分かりやすい実例になった。

 むむむ・・・

 ↑ v3.0.38で修正されました!(2018/03/29 追記)

通りすがり通りすがり2017/11/01 23:25例がエラーになってしまうのは悲しいですね。
描画開始に指定できるのは、(仕様では?)以下の3種類です(引数が文字列の場合、1→2の順に試行される)


idがcvでclassがresultのcanvasがある場合・・・

1.CSSで指定するときに使うようなセレクタを文字列で指定。
以下のような形で指定できる(※の条件にも注意)
"canvas"へ描画開始
"canvas.result"へ描画開始
".result"へ描画開始
"#cv"へ描画開始
"canvas#cv"へ描画開始
※複数見つかるような条件の場合、最初に見つかる1つが対象になる。

2.canvasのidを文字列で指定。
"cv"へ描画開始
※idに"#"を付けた場合はセレクタ扱い。

3.文字列ではなくDOM要素そのものを指定。
1度、
CVEは"cv"をDOM要素取得
として変数に持っといて、以降は、
CVEへ描画開始
と指定する。

注意点としては、「セレクタとして解釈するとなんらかの要素が取得できてしまうID」は使えません。例は以下。
idがbodyというcanvasがある場合。
"#body"や"canvas#body"のようにセレクタならOK。
idのつもりで"body"としても先にセレクトとして試行してBODYタグを見つけてしまうのでNG。

雪乃☆雫雪乃☆雫2017/11/02 00:51おおぉ、ありがとうございます!!!
#をつけてセレクタにしたら、あっさりと出来ました☆
それに記事中で書いてた「それへ描画開始」も、これは3に該当するやり方なので、「それ」じゃなく何らかの変数に入れてやれば、何度もDOM要素取得することなんて無かったわけですね~(^▽^;

・・・でもやっぱり、2のID指定が、うまくいかなくなっちゃってる気がしますねえ。
特に競合するタグもないし何よりバージョンアップ以前は問題なかったので・・・

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

2017-10-28

テーブルに編集機能をつけてみたよ!

| 17:43

 クリックした時、画像部分コピーで選択色を入れる代わりに、メモ開くようにしただけです。

 デフォルトはオフですが、「編集はオン」とすると、有効になります。

 アイテムの変更が確定するのは、別のセルにフォーカスが移った時です。

#-----------------------------------------------------------------------
#「table_改.nako」
# 編集機能付きテーブル
#-----------------------------------------------------------------------
■テーブル改 +イメージ
 ・太{=2}
 ・線色{=$CCCCCC}
 ・背景色{=$FFFFFF}
 ・選択色{=$EEEEEE}
 ・文字色{=$000000}
 ・文字サイズ{=12}
 ・フォント{=「MS ゴシック」}

 ・左余白{=3}
 ・右余白{=10}
 ・上余白{=3}
 ・下余白{=5}
 ・最小セル幅{=30}
 ・編集{=オフ}

 ・列数
 ・行数
 ・アイテム ←アイテム設定 →アイテム取得
 ・アイテム_
 ・アイテム取得~それ=アイテム_。
 ・アイテム設定(S)~
  Sの変数型確認。
  もしそれが「配列」でなければ、アイテム_=SをCSV取得。
  違えば、アイテム_=S。
  アイテム_=アイテム_表行列交換。
  列数=アイテム_要素数。
  アイテム_=アイテム_表行列交換。
  行数=アイテム_要素数。

 ・標準カラー設定({数値=0}Vに)~
  Vで条件分岐
   0ならば文字色黒色。背景色=白色線色=$CCCCCC。選択色=$EEEEEE。
   1ならば文字色=白色線色=$808080。背景色=黒色。選択色=$808080。

 ・作る~
  オブジェクト=VCL_CREATE(自身, 名前, VCL_GUI_IMAGE)。
  テーブルイメージバックアップ画面をイメージとして作成。
  テーブルイメージバックアップ画面→可視=オフ。
  テーブルイメーフォーカス用画面をイメージとして作成。
  テーブルイメーフォーカス用画面→可視=オフ。
  テーブル編集用メモメモとして作成。
  テーブル編集用メモ→可視はオフ。
  テーブル編集用メモ→スクロールバー。

 ・選択行
 ・選択列
 ・マウス移動した時は~/*マウス位置設定するためのダミー定義*/
 ・クリックした時は~フォーカス選択。
// ・ダブルクリックした時は~選択行&`,`&選択列と言う。

 ・セルX
 ・セルY
 ・セルW
 ・セルH
 ・セル編集フラグ{=0}
 ・フォーカス選択~
  セル内容変更。
  左位置=``。右位置=``。上位置=``。下位置=``。
  高列=高配列&改行&H。幅列=列幅配列。
  
  オン
   I=回数-1。左位置=幅列[0]。幅列の0を配列削除。
   (幅列[0]>マウスX)ならば、右位置=幅列[0]。抜ける。
  選択列=I。もし、選択列>列数-1ならば、選択列=列数-1。
  オン
   I=回数-1。上位置=高列[0]。高列の0を配列削除。
   (高列[0]>マウスY)ならば、下位置=高列[0]。抜ける。
  選択行=I。もし、選択行>行数-1ならば、選択行=行数-1。
  
  セルX=左位置+描補正位置。セルY=上位置+描補正位置。セルW=右位置-左位置-線太さ。セルH=下位置-上位置-線太さ。
  S=私→アイテム。S=S[私→選択行][私→選択列]。テーブル編集用メモ→テキストはS。
  テーブル編集用メモ文字サイズは私→文字サイズ。テーブル編集用メモ文字書体は私→フォント。
  テーブル編集用メモ→Xは私→セルX+私→X。テーブル編集用メモ→Yは私→セルY+私→Y。
  テーブル編集用メモ→Wは私→セルW。テーブル編集用メモ→Hは私→セルH。
  もし、編集=オンならば、テーブル編集用メモ→可視はオン。テーブル編集用メモ→注目。
  違えば、
    テーブルイメージバックアップ画面を私の0,0へ画像コピー。
    テーブルイメーフォーカス用画面のセルX,セルY,セルW,セルHを私のセルX,セルYへ画像部分コピー。
    描画処理反映。
  セル編集フラグ=1。

 ・セル内容変更~
  テーブル編集用メモ→可視はオフ。
  自身を私にグループ参照コピー。
  もし、セル編集フラグ=0でなければ、
    S=私→アイテム。S[私→選択行][私→選択列]はテーブル編集用メモ→テキスト。
    私→アイテム=S。自動作成。

 ・高配列
 ・描補正位置
 ・アイテム段数配列
 ・自動作成~
  もし線太さ%2=0ならば、描補正位置=(太/2)を切捨。
  違えば、描補正位置=(太/2)を切捨+1。
  システム設定変更。文字幅設定する。自身白色画面クリア。
  アイテム配列座標付情報作成する。
  HI=(線太さ/2)を切捨。
  //外枠を描く
  自身の(線太さ/2)を切捨,(線太さ/2)を切捨からW+1-(線太さ/2)を切捨,表下位置+1+(線太さ/2)を切捨へ四角。
  高配列=(線太さ/2)を切捨。最大出現数とは整数=0。
  アイテムを反復
   //行を描く。
   V=アイテム段数配列[回数-1]。
   (V+1)、HI=HI+文字高。
   HI=HI+(上余白+下余白)。
   もし回数行数ならば自身太-1,HIからW-線太さ+1,HIへ。
   HIを高配列配列追加。
  //列を描く。
  列幅配列反復
    (回数>1)かつ(回数<列数+1)ならば自身対象,0から対象,表下位置へ。
  
  アイテム描画する。
  バックアップ画面作成する。
  システム設定戻す。

 ・S_塗色
 ・S_太
 ・S_文字色
 ・S_線色
 ・S_文字サイズ
 ・S_文字書体
 ・システム設定変更~
  S_塗色=システム:塗色。S_太=システム:太。S_線色=システム:線色。S_文字色=システム:文字色。S_文字サイズ=システム:文字サイズ。S_文字書体=システム:文字書体。
  システム:塗色=背景色。システム:太=太。システム:線色線色。システム:文字色文字色。システム:文字サイズ文字サイズ。システム:文字書体=フォント。
 ・システム設定戻す~
  システム:塗色=S_塗色。システム:太=S_太。システム:線色=S_線色。システム:文字色=S_文字色。システム:文字サイズ=S_文字サイズ。システム:文字書体=S_文字書体。

 ・アイテム描画~
  自身を私にグループ参照コピー。X1とは整数。Y1とは整数。
  テーブルイメーフォーカス用画面を貴方にグループ参照コピー。
  貴方→サイズ=私→サイズ。貴方→画面クリア(私→選択色)。
  アイテム配列座標付情報を反復
   X1=対象[1]。Y1=対象[2]
   自身のX1,Y1へ対象[0]を文字表示。
   貴方のX1,Y1へ対象[0]を貴方:文字表示。

 ・アイテム配列座標付情報
 ・アイテム配列座標付情報作成~
  HI=(線太さ/2)を切捨。I=0。アイテム配列座標付情報=``。
  アイテムを反復
   対象反復
    アイテム配列座標付情報[I][0]=対象
    アイテム配列座標付情報[I][1]=(列幅配列[回数-1]+左余白)
    アイテム配列座標付情報[I][2]=(HI+上余白)。
    Iに1を直接足す。
   V=アイテム段数配列[回数-1]。
   (V+1)、HI=HI+文字高。
   HI=HI+(上余白+下余白)。

 ・バックアップ画面作成~
  自身を私にグループ参照コピー。
  テーブルイメージバックアップ画面→サイズ=私→サイズ。
  自身をテーブルイメージバックアップ画面の0,0へ画像コピー。

 ・文字高
 ・表下位置 //表の下の位置
 ・文字情報設定~
  アイテム段数配列。
  アイテムを反復
   最大出現数=0。
   対象反復
    V=対象で「{CHR(10)}」の出現回数。
    (最大出現数<V)ならば、最大出現数=V。
   最大出現数をアイテム段数配列配列追加。
  
  実行数とは整数=0。
  アイテム段数配列反復
   実行数=実行数+(対象+1)
  
  文字高=`字`の文字高さ取得。
  表下位置=(実行数×文字高)+行数*(上余白+下余白)。

 ・最大列幅
 ・列幅配列
 ・文字幅設定~
  文字幅表=``。最大列幅=``。列幅配列。
  文字情報設定。
  アイテムを反復
   I=回数-1。V=0。
   対象反復
    対象を「{CHR(10)}」で区切って反復
     もし、V<(対象文字幅取得)ならば、V=対象文字幅取得。
    もし、V<最小セル幅ならば、V=最小セル幅。
    文字幅表[I][回数-1]=V+左余白+右余白。
    V=0。
   文字幅表[I]の配列合計を最大列幅に配列追加。
  最大列幅=最大列幅の配列最大値。
  V=0。
  (線太さ/2)を切捨を列幅配列配列追加。
  (文字幅表の表列数)
   V=文字幅表の(回数-1)を表列取得配列最大値+太をVに直接足。
   Vを列幅配列配列追加。
  表サイズ設定する。

 ・サイズ
 ・表サイズ設定~W=列幅配列配列最大値+描補正位置。H=表下位置+太。サイズ[0][0]=0。サイズ[0][1]=0。サイズ[0][2]=W。サイズ[0][3]=表下位置。

#-----------------------------------------------------------------------
# 以下はテスト
#!「table_改.nako」を取り込む。
ファイル名=「{デスクトップ}Book1.csvもし、ファイル名の存在はいならば、データはファイル名を開く違えば、データ=「1,2,3
A,B,"C""D""E"
"いろはにほへと{~}ちりぬるを","わかよ,たれ","つねならむ"」

Tとはテーブル改。
これについて
  編集はオン。
  アイテムはデータ。

母艦について
 クリックした時は~
  Tのセル内容変更。
  Tを自動作成。
 閉じた時は~
  Tのアイテムをファイル名に保存。

Tを自動作成。
#-----------------------------------------------------------------------

 どうかな~?

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

 とりあえず、ちょっとワタシが使う分には大丈夫そう

通りすがり通りすがり2017/10/31 21:04Unicode系の命令をまとめたnakoファイルを用意して、UTF8用のものを作ってみました。
変更箇所は結構少ないです。
(設定反映のために、一見、無駄に見える命令があるります。)

weyk.la.coocan.jp/files/tableU.zip

Unicode系の命令を調べている中で、表示サイズを調べる命令と、実際の表示する命令がいくつかあったので、うまく使えばGridのセルを表示するときに役立ちそうです(はみ出るときは「...」的なものを表示 とかもできるっぽい)

雪乃☆雫雪乃☆雫2017/11/02 00:43いつもながら、さすがですね~!(@_@)
シカシ、いきなり「CSVの記述に誤りがあります」とか言われてしまったのでした。しくしく。
文字列を""でくくったらダメっぽい・・??
これまで文字コードのコトなんて気にして生きてこなかったので、Unicodeのこと自体があまり分かっていなかったり;
もうちょっとよくお試ししてみますです☆

通りすがり通りすがり2017/11/03 18:35初期データ(UTF8の二次元配列のデータ)の生成だけうまくゆかないようなので、1項目づつUTF8に変換するようにしてみました。
ほんとは、CSV取得のUT8版かASCII版(SJISではだめ)があるとよいのですが

雪乃☆雫雪乃☆雫2017/11/06 15:30遅くなりましてスミマセン;
ありがとうございます、うまくいきました☆
本当は「UniUtil.nako」の中身をよく研究すると色々賢くなれそうな気がしているんですが、まだそこまで到達していません(^▽^;

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

2017-10-25

table.nakoを改造してみるよ!

| 22:26

 文字サイズの変更が出来なかったことに比べれば、全然たいしたこと無いですけど、ぱっと見どうしても気になってならないのが、最終行の高さが他と合ってないことと、フォーカスの選択色が枠に少しかぶること。

 細かくてスミマセン;;;

 枠全体のサイズの計算が行引くための行枠高の計算と合ってないために、のしわ寄せが最終行に来ているっぽい。

 してさらにどーでもいいようなことですが、ワタシとしては枠の中にピタッとフォーカスが入って欲しいワケですよ。


 それから、アイテムに指定するデータの形式が、CSVと見せかけて(別に見せかけてはいない;)ちょっと特殊仕様(?)っぽいんだけど、出来ればエクセルで作ってCSV保存したものがふつーに表示出来るようにしたい。


 あと、テーブルの背景色や文字色などを設定すると、システムの塗り色文字色を書き換えてしまうんですよね。フツーのGUIは、んなことにはならないですよね。

 さらによろしくないことには、テーブルの背景色や文字色などを設定してあっても、自動作成する前にシステムの塗り色文字色を設定したら、それで描画が行われちゃう。

 たぶん、テーブルを作ったら、設定から自動作成まで一連のセットとして記述する前提の仕様なんだろうけど、ダブルクリックしたら編集用の窓を開いて、内容を書き換えることができるようにしようと思ったら、編集するたびに自動作成で描画し直すことになるんで、の時設定も全部し直さなきゃないことになっちゃう><

 でもこれは、カンタンに直せそう


 で・・・

■テーブル改 +イメージ
 ・列数{=2}
 ・行数{=1}

 ・太{=2}
 ・線色{=$CCCCCC}
 ・背景色{=$FFFFFF}
 ・選択色{=$EEEEEE}
 ・文字色{=$000000}
 ・文字サイズ{=12}
 ・フォント{=「MS ゴシック」}

 ・左余白{=3}
 ・右余白{=10}
 ・上余白{=3}
 ・下余白{=5}

 ・アイテム ←アイテム設定 →アイテム取得
 ・アイテム_
 ・アイテム取得~それ=アイテム_。
 ・アイテム設定(S)~
  Sの変数型確認。
  もしそれが「配列」でなければ、アイテム_=SをCSV取得。
  違えば、アイテム_=S。
  アイテム_=アイテム_表行列交換。
  列数=アイテム_要素数。
  アイテム_=アイテム_表行列交換。
  行数=アイテム_要素数。

 ・標準カラー設定({数値=0}Vに)~
  Vで条件分岐
   0ならば文字色黒色。背景色=白色線色=$CCCCCC。選択色=$EEEEEE。
   1ならば文字色=白色線色=$808080。背景色=黒色。選択色=$808080。

 ・作る~
  オブジェクト=VCL_CREATE(自身, 名前, VCL_GUI_IMAGE)。
  テーブルイメージバックアップ画面をイメージとして作成。
  テーブルイメージバックアップ画面→可視=オフ。
  テーブルイメーフォーカス用画面をイメージとして作成。
  テーブルイメーフォーカス用画面→可視=オフ。

 ・選択行
 ・選択列
 ・マウス移動した時は~/*マウス位置設定するためのダミー定義*/
 ・クリックした時は~
   フォーカス選択。
// ・ダブルクリックした時は~選択行&`,`&選択列と言う。

 ・セルX
 ・セルY
 ・セルW
 ・セルH
 ・フォーカス選択~
  左位置=``。右位置=``。上位置=``。下位置=``。
  高列=高配列&改行&H。幅列=列幅配列。
  
  オン
   I=回数-1。左位置=幅列[0]。幅列の0を配列削除。
   (幅列[0]>マウスX)ならば、右位置=幅列[0]。抜ける。
  選択列=I。
  オン
   I=回数-1。上位置=高列[0]。高列の0を配列削除。
   (高列[0]>マウスY)ならば、下位置=高列[0]。抜ける。
  選択行=I。
  自身を私にグループ参照コピー。
  セルX=左位置+描補正位置。セルY=上位置+描補正位置。セルW=右位置-左位置-線太さ。セルH=下位置-上位置-線太さ。
  テーブルイメージバックアップ画面を私の0,0へ画像コピー。
  テーブルイメーフォーカス用画面のセルX,セルY,セルW,セルHを私のセルX,セルYへ画像部分コピー。
  描画処理反映。

 ・高配列
 ・描補正位置
 ・アイテム段数配列
 ・自動作成~
  もし線太さ%2=0ならば、描補正位置=(太/2)を切捨。
  違えば、描補正位置=(太/2)を切捨+1。
  システム設定変更。文字幅設定する。
  アイテム配列座標付情報作成する。
  HI=(線太さ/2)を切捨。
  //外枠を描く
  自身の(線太さ/2)を切捨,(線太さ/2)を切捨からW+1-(線太さ/2)を切捨,表下位置+1+(線太さ/2)を切捨へ四角。
  高配列=(線太さ/2)を切捨。最大出現数とは整数=0。
  アイテムを反復
   //行を描く。
   V=アイテム段数配列[回数-1]。
   (V+1)、HI=HI+文字高。
   HI=HI+(上余白+下余白)。
   もし回数行数ならば自身太-1,HIからW-線太さ+1,HIへ。
   HIを高配列配列追加。
  //列を描く。
  列幅配列反復
    (回数>1)かつ(回数<列数+1)ならば自身対象,0から対象,表下位置へ。
  
  アイテム描画する。
  バックアップ画面作成する。
  システム設定戻す。

 ・S_塗色
 ・S_太
 ・S_文字色
 ・S_線色
 ・S_文字サイズ
 ・S_文字書体
 ・システム設定変更~
  S_塗色=システム:塗色。S_太=システム:太。S_線色=システム:線色。S_文字色=システム:文字色。S_文字サイズ=システム:文字サイズ。S_文字書体=システム:文字書体。
  システム:塗色=背景色。システム:太=太。システム:線色線色。システム:文字色文字色。システム:文字サイズ文字サイズ。システム:文字書体=フォント。
 ・システム設定戻す~
  システム:塗色=S_塗色。システム:太=S_太。システム:線色=S_線色。システム:文字色=S_文字色。システム:文字サイズ=S_文字サイズ。システム:文字書体=S_文字書体。

 ・アイテム描画~
  自身を私にグループ参照コピー。X1とは整数。Y1とは整数。
  テーブルイメーフォーカス用画面を貴方にグループ参照コピー。
  貴方→サイズ=私→サイズ。貴方→画面クリア(私→選択色)。
  アイテム配列座標付情報を反復
   X1=対象[1]。Y1=対象[2]
   自身のX1,Y1へ対象[0]を文字表示。
   貴方のX1,Y1へ対象[0]を貴方:文字表示。

 ・アイテム配列座標付情報
 ・アイテム配列座標付情報作成~
  HI=(線太さ/2)を切捨。I=0。アイテム配列座標付情報=``。
  アイテムを反復
   対象反復
    アイテム配列座標付情報[I][0]=対象
    アイテム配列座標付情報[I][1]=(列幅配列[回数-1]+左余白)
    アイテム配列座標付情報[I][2]=(HI+上余白)。
    Iに1を直接足す。
   V=アイテム段数配列[回数-1]。
   (V+1)、HI=HI+文字高。
   HI=HI+(上余白+下余白)。

 ・バックアップ画面作成~
  自身を私にグループ参照コピー。
  テーブルイメージバックアップ画面→サイズ=私→サイズ。
  自身をテーブルイメージバックアップ画面の0,0へ画像コピー。

 ・文字高
 ・表下位置 //表の下の位置
 ・文字情報設定~
  アイテム段数配列。
  アイテムを反復
   最大出現数=0。
   対象反復
    V=対象で「{CHR(10)}」の出現回数。
    (最大出現数<V)ならば、最大出現数=V。
   最大出現数をアイテム段数配列配列追加。
  
  実行数とは整数=0。
  アイテム段数配列反復
   実行数=実行数+(対象+1)
  
  文字高=`字`の文字高さ取得。
  表下位置=(実行数×文字高)+行数*(上余白+下余白)。

 ・最大列幅
 ・列幅配列
 ・文字幅設定~
  文字幅表=``。最大列幅=``。
  文字情報設定。
  アイテムを反復
   I=回数-1。V=0。
   対象反復
    対象を「{CHR(10)}」で区切って反復
     もし、V<(対象文字幅取得)ならば、V=対象文字幅取得。
    文字幅表[I][回数-1]=V+左余白+右余白。
    V=0。
   文字幅表[I]の配列合計を最大列幅に配列追加。
  最大列幅=最大列幅の配列最大値。
  V=0。
  (線太さ/2)を切捨を列幅配列配列追加。
  (文字幅表の表列数)
   V=文字幅表の(回数-1)を表列取得配列最大値+太をVに直接足。
   Vを列幅配列配列追加。
  表サイズ設定する。

 ・サイズ
 ・表サイズ設定~W=列幅配列配列最大値+描補正位置。H=表下位置+太。サイズ[0][0]=0。サイズ[0][1]=0。サイズ[0][2]=W。サイズ[0][3]=表下位置。

#-----------------------------------------------------------------------
# 以下はテスト
#!「table_改.nako」を取り込む。

データ=「1,2,3
A,B,"C""D""E"
"いろはにほへと{~}ちりぬるを","わかよ,たれ","つねならむ"」//をCSV取得
//データは「Book1.csv」を開く

Tとはテーブル改。
これについて
  選択色は$EEEEEE
  背景色は$EEFFFF
  線太さは5
  線色は$CCCCCC
  文字色は$000066
  フォントは「MS 明朝」
  文字サイズは18

  上余白は10。
  下余白は10。
  左余白は10。
  右余白は10。

  アイテムはデータ。

Tを自動作成。
#-----------------------------------------------------------------------

 エクセルで保存したCSV改行CR+LFではなくLFみたい。

 上下左右の余白(padding的な)を設定できるようにしてみた。


 さてさて、どうかな?

 見た目的にはうまくいってると思うんだけど・・・

 あと、やっぱり編集できるようにしたいね。

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

2017-10-22

新機能のテーブルをお試ししてみる

| 19:36

 なでしこ1.57で、自由なレイアウトでグリッドを表現できる「table.nako」が新機能として追加されたんですが、どうするもんだかの説明はマニュアルにもサンプルにも追加されていないっぽいんですよね~(?)

 グループのことがあんまり分かっていないけど、ちょこっと眺めてみた感じ、どうやら、イメージ部品を使って、アイテムとして与えた配列を表にして表示するモノのようです。

 なんか、こんな感じ?

#-----------------------------------------------------------
!「table.nako」を取り込む。
データ=「1,2,3
A,B,C
い,ろ,は」

Tとはテーブル。
のアイテムはデータ。

Tを自動作成。
#-----------------------------------------------------------

 すごいのは、クリックすると、こにフォーカスが入る点ですね☆

 元のイメージのバックアップと、フォーカスが入った時のカラーと、二枚の裏画面を使って画像部分コピーするとゆう、わりとワタシがやりそうな原始的な方法で実現しているようです。


 背景色、選択色(フォーカスが入った時の色)、線色線太さ文字色文字サイズ、フォントは変更できるようです。

 グループってすごいな~。便利そうだな~とは思うものの、ひとつひらめかない

 眺めると、何となく分かるよーな気はするものの、自分で作れる気がしない~;;;


 ところで、どうも文字サイズの変更が、うまくいきません。

 アイテムを設定する前に文字サイズを設定しようとするとエラーになっちゃう。

 アイテムを設定した後だと・・・エラーは出ないけど反映されてない

 ちょっと標準の文字がでかすぎるからちっちゃくしたいと思っただけなのにぃ~。しくしくしくしく。

 うーむと思って眺めていると・・・159行目、文字情報設定で、なんで文字サイズを40に決め打ちしちゃってるんすか?? 反映されるわけなくないですか?? ここは「文字サイズ_」なのでは???

 しかし、それでもやっぱりうまくいきません。

 どうやら、文字サイズ設定時に文字幅設定しているんだけど、この時アイテムがだとダメっぽい。

 どっちみち、アイテム設定する時に、正規化アイテム表作成を行う中で文字幅設定をするんだからと、消してみる(無謀;)

 エラー出なくなりました☆

 が・・・アイテムを設定した後に文字サイズを設定したら反映されません。ついでに、フォントの設定もアイテムを設定した後だと、反映されません。

 文字情報設定は文字幅設定の中で、文字幅設定は正規化アイテム表作成の中で、正規化アイテム表作成はアイテム設定の中で行われているんだから当然でしたね(@_@;ヤヤコヤシイ...

 てゆうか、最終的には「自動作成」で引いて表にしてるんだから、全部ココでいいんじゃないの?(ヤケ;)

 とゆうわけで、自動作成の最初に正規化アイテム表作成するを突っ込んだところ、とりあえず、文字サイズの設定に関してはうまくいってるっぽい感じになりました。

 うーん、これはバグ・・・なのかなぁ。

 このやっつけな修正が妥当なのかどうかもよく分からんし・・・

 悩むわ~;;;


 でも、とりあえずは動いてる。

!「table.nako」を取り込む。
データ=「1,2,3
A,B,C
い,ろ,は」

Tとはテーブル。
これについて
  選択色は$999999
  背景色は$EEFFFF
  線太さは3
  線色は$CCCCCC
  文字色は$000066
  フォントは「MS 明朝」
  文字サイズは18

  アイテムはデータ。
Tを自動作成

 して、このテーブルの機能としては、表示するだけなのかな?

 編集するなどは、各自で別途プログラムするというコトかな??

 ダブルクリックした時、選択行,選択列を言うようになっているのが、こはかとなくお試し中感なんだけど、ここを書き換える???

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

2017-10-17

スライドショー

| 10:28

 通りすがりさまから貴重な教えを頂いて、ナゾが一つ解明し、また少し賢くなったので、早速やってみます☆

 プログラムとしては、単に複数の画像を勝手に延々ループ再生するスライドショーです。


 CSSで二枚のcanvasを重ねて配置するのは同じです。

 まず行うのは、表画面となる「cv_1」をっ黒に塗りつぶすこと!

 別に色は何でもいいんだけど、とりあえず最初の状態は透明なので、塗りつぶすかダミーの画像を表示するかしておかないと、裏画面に画像を読んだらそれが全部透けて見えてしまうんです~;

(重ね合わせの実験の時には白で塗りつぶして、まだ何も起こってないフリをこき、フェードインの実験の時にはcv_1の方から先に画像描画をしています)


 次に、裏画面となる「cv_2」に画像をロード。

 ロードしたイメージに名前をつけて使うことが出来るので、何度も同じ画像をファイルから読み直す必要は無いし、画像の枚数分canvasを用意する必要も無いワケですね。すばらしい!

 連番で名前をつけながら、同じcv_2に必要の画像を全て、どんどこロードしてしまいます。

 imageの名称に変数を使って連番にするのは、「ナデシコする」でできました☆

 imageを画像描画する場合でも、やっぱりウェイトは入れる必要がありました。

 でも、HDD上ではあまりが出なかったのですが、web上ではファイルからの画像描画はだいぶ遅くなり、0.1秒のウェイトではダメでした。結構が出るようで、imageは使っていかなければ!

 だけど、枚数が増えるとそれだけ最初にまとめてロードするのに時がかかるよね。

 画像描画が伴わなければずっと早いはずだし、何より裏でロードしながら、描画を始めることが出来るような気がするので、のほうが確かに使い勝手が良さそうな気がします。


 スライドショーの本体ですけど、基本は前のフェードインの実験を、マウスクリックでは無く、時で自動的に変更していくようにしただけで、まず「cv_2」に画像を描画し、「cv_1」の透明度をトランジョンで0に変化させて画像が入れ替わったように見せかけるのは、まったく同じです。

 前のフェードインの実験では、の後「z-index」を変えて実際に二枚の画像を入れ替えていましたが、は「cv_1」に同じ画像を画像描画して透明度を1に戻しています。

 して最初に戻って「cv_2」に次の画像を描画・・・で、無限ループ

 はマウスのイベントを使ってませんが、それもこのようにすればcv_1のイベントだけで全部出来たハズでしたね(^▽^;


 でっ、こんな感じ~。

<script type="なでしこ">
#-----------------------------------------------------------------------
画像枚数=5。
ウェイト=0.3。  //画像ロード時のウェイト。長めに取ってます。
画像読待=画像枚数*ウェイト。
表示=4。   //画像表示。
C=0。S=「.」
説明=["片栗(かたくり)","蝦夷延胡索(エゾエンゴサク)","延齢草(エンレイソウ)","蝦夷立金花(エゾノリュウキンカ)","水芭蕉(みずばしょう)"]

#まず表画面を塗りつぶして、裏画面が見えないようにする。
「#cv_1」へ描画開始。
黒色塗り色設定。
[0,0,480,360]へ四角描画。

#メイン
0.1秒後には、
  「#cv_2」へ描画開始。画像ロード。       //裏画面に画像読み込み
  (画像読待)秒後には
    「#mes」に「 」をDOMテキスト設定。    //画像読み込み中の表示を消し
    スライドショー。             //無限ループ
  ここまで。
ここまで。

●画像ロード
  「画像{C}は[0,0]に{カッコ}http://www.geocities.jp/snowdrops890/image/hana_{C}.jpg{カッコ閉じ}の画像描画。」をナデシコする。
  「#mes」に「Loading」SをDOMテキスト設定。
  C=C+1。S=S&「.」。
  もし、(C<画像枚数)ならば、「画像ロード」を(ウェイト)秒後。
  違えば、C=0。
ここまで。

●スライドショー
  「#cv_2」へ描画開始。
  「[0,0]に画像{C}の画像描画。」をナデシコする。
  0.1秒後には
   「#cv_1」の「transition」に「opacity 2s」をDOMスタイル設定。
   「#cv_1」の「opacity」に「0」をDOMスタイル設定。
   「#mes」に「北国の五月 ~ 」説明[C]をDOMテキスト設定。
   2.1秒後には
    「#cv_1」へ描画開始。
    「[0,0]に画像{C}の画像描画。」をナデシコする。
    「#cv_1」の「transition」に「opacity 0s」をDOMスタイル設定。
    「#cv_1」の「opacity」に「1」をDOMスタイル設定。
    もし、(C≧画像枚数-1)ならば、C=0。
    違えば、C=C+1。
    「スライドショー」を(表示)秒後。
   ここまで。
  ここまで。
ここまで。
#-----------------------------------------------------------------------
</script>

<H1>スライドショー</H1>
<HR>
<style type="text/css">
#base {
  margin:auto;
  width:480px;
  height:380px;
}
#main {
  position:absolute;
}
#cv_1 {
  position:absolute;
  z-index:1;
}
#cv_2 {
  position:absolute;
  z-index:0;
}
</style>
<div id="base">
  <span id="mes">Loading</span>
  <div id="main">
    <canvas id="cv_1" width="480px" height="360px"></canvas>
    <canvas id="cv_2" width="480px" height="360px"></canvas>
  </div>
</div>
<HR>

http://snowdrops.starfree.jp/wnako3_test/08_slideShow.html

 北海道土産の定番、六花亭の袋っぽい?www

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

2017-10-15

表右回転?

| 21:10

マイナビ連載13目「SNSで縦書きしたい - テキスト転ツールを作ろう」(http://news.mynavi.jp/series/nadeshiko/013/)は、とっても面白かったです☆

 こうゆうことをして遊ぶのは大好き♪

 コレは、学習内容としては要するに、二次元配列について学ぼうとゆうことですね。

 このブログを書き始めた頃には、配列いうものがあんまり分かっておらず、とくに二次元配列なんて、まったく理解してなかった;

 思えば、ズイブン賢くなったような・・・?(嘘;)


 それはさておき、なでしこ1となでしこ3では、配列の仕様がだいぶ変わりました。

 なでしこ1では、csv形式で一括指定することが出来て、感覚的にも分かりやすくて良かったんだけど・・・ジェイソンってなんすか?

 なんかもー、マスク被ってチェンソー振りしてる人しか思い浮かばないよ~;;;

 ・・・と思いつつ調べてみたら、なんとジェイソンさんはチェンソーでは一も人殺しをしていないとゆう、衝撃のトリビアを知ることができました(違;)


 っソレはともかく・・・;

 JSONは、なでしこ3のマニュアルの配列とオブジェクト(https://nadesi.com/doc3/index.php?%E9%85%8D%E5%88%97%E3%81%A8%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88)にも書いてあるとうり、配列とオブジェクトの二つの型があるようですが、何はともあれ配列です。

 マニュアルには、二次元配列のコトは書いてないんだよね。

 して、マイナビの記事のサンプルにもあるとうりに、いっこいっこ代入していくのは分かるんだけど、一括指定はどうするんだろうと思っていたのが、わかりました。

 なんか、タブン、こんな感じ。

テスト配列=[
["たろう",60,"taro"],
["じろう",80,"jiro"],
["さぶろう",50,"saburo"]
]

 いたってふつーでしたw 何も難しく考えることはなかったww

 やっつけでお試しした時にうまくいかなかったのは、単に文字列を""で括ってなかっただけでした;;;

 ただねぇ~、文字列を、全て""で括らなきゃないってのは、何気にめんどーですね。

 ワタシは、文字列の場合が多いので><

 なでしこ1にはあるCSV取得あるとイイですよね。エクセルとかで作ったデータを読ませれるし。

 CSV配列にするのは、改行で区切ってさらに各行を「,」で区切れば簡単にできそうだけど、それだけだとデータにカンマや改行が含まれていた場合にはダメだよね。

 たぶんだけど、正規表現かなんかを駆使して、""と、"で括られている中にある改行とカンマを探して、別の記号に置換してやってから区切って、また元に戻す的な・・・?

 まあ、ワタシなんかはそういうことはほとんど無いですけどね~w


 あとねー、区切りが改行じゃないので当然っちゃあ当然なんだけど、配列を「言う」とかで表示して見ようとしてみると、全部繋がって表示されてしまうんですよ~。

 行だの列だのが、途中ですぐにこんがらかって分かんなくなっちゃい、いちいち何でも言わせて確認しているワタシなんかにとっては困ったもんだとゆうところ。

 これも、表CSV変換あると、イイですよね~。

 とりあえずマイナビの記事と同じようにして、配列反復させてそれ改行をくっつけて変数代入してみます。

CSV化(Aを)
  結果とは変数。
  Aを反復
    結果=結果それ改行。
  ここまで。
  結果で戻るここまで。

テスト配列言う。
テスト配列CSV化して言う

 やっぱりこれも、これだけじゃCSVとしては改行やカンマなど""で括らなきゃないようなデータのある時にダメだよね。でも、ちょこっと言わせて配列の内容を確認する用としてはいい感じ♪


 こんな感じで(?)なでしこ1には、表(二次元配列)を扱う命令が各種色々取りろっていて、「表行列交換」とか「表右回転」とかゆう便利な命令もありました。

 表右回転があったら、それだけでテキストの転だって、もうほとんど出来たようなもんだったですよねぇ~w

 ですが、記事を読んで、どうやって表を転させるのかが分かりました。結構地道です。

 して、表行列交換が、表右回転の一歩手前だとゆうことも分かりました。

 でっ、ほとんど記事のコードの流用だけど、表右回転にしてみた。

表右回転(Aを|Aの)
  仮表=配列。
  列数とは変数=Aの配列要素数。
  行数とは変数=1。
  Cとは変数。行とは変数。列とは変数。
  Aを反復
   C=それ配列要素数。
   もし、C>行数ならば行数=C。
  ここまで。

  # 仮表を初期化
  行を0から(行数-1)まで繰り返す
   仮表[行]=配列。
   列を0から(列数-1)まで繰り返す
    仮表[行][列]=。
   ここまで。
  ここまで。

  # 仮表に行と列を取り替えてAのデータを配置
  行を0から(列数-1)まで繰り返す
   列を0から(行数-1)まで繰り返す
     仮表[列][行]=A[行][列]
   ここまで。
  ここまで。
  #ここまでで「表行列交換」

  # 転させる
  行を0から(行数-1)まで繰り返す
   仮表[行]を配列逆順。
  ここまで。

  仮表で戻るここまで。

#結果確認よう
●CSV化(Aを)
  結果とは変数。
  Aを反復
    結果=結果それ改行。
  ここまで。
  結果で戻るここまで。
#-----------------------------------------------------------------------
#以下はテスト
テスト配列=[
[1,"太郎","たろう",60,"taro"],
[2,"次郎","じろう",80,"jiro"],
[3,"三郎","さぶろう",50,"saburo"]
]

結果1はテスト配列表右回転
結果2は結果1の表右回転

テスト配列CSV化して表示。
結果1をCSV化して表示。
結果2をCSV化して表示

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

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

2017-10-13

フェードインの実験

| 09:37

 は、重ね合わせの実験の続きです。

 https://nadesiko.g.hatena.ne.jp/snowdrops89/20170927/1506491434

 画面を切り替える際のエフェクトも、CSSを使えば色々出来そうで、手始めにフェードを試してみた。

 actionやhoverで変化させるのは完全にCSSだけで出来るので、なでしこのコトってゆうよりもうむしろ単にCSSを学んでる感じだけど;;;

 でも、DOMスタイル設定でこれらの機能をなでしこのプログラムから操れるっていうのは、ちょっとゲームを作るのに良さそうな♪

 どうなってるのかまるで分からないトリッキーな動きをするボタンとかのサンプルも結構見かけるので、追々学んで試してみたい。


 フェードは、単にopacity(透明度)の値を0に設定し(最小値が0で最大値が1)、transitionでの値を、何秒掛けて変化させるかを指定してやるだけ。

 注意点としては、この変化中も、なでしこのプログラムは待機ないので、必要ある場合は、transitionに指定した秒数以上を秒後命令とかで待機するようにプログラムする必要あります


 あと、もう一つひらめいたのは、重ね合わせの実験をした時には、絶対指定したtopの位置が、ジオシティーズにUPしたら広告があるためにずれてしまうとゆうことを書いたんですが、これは、まず親となるdivを作り、の子要素として位置は指定せずにabsoluteを設定したdivを設置すると子は親と同じ位置に表示されます。してさらにの子として作った要素の位置は、親の0,0が基準となるので便利ですし、アップロード先によって、表示がずれちゃうなんて心配もなくなります☆

<script type="なでしこ">
#-----------------------------------------------------------------------
「#cv_1」の「onclick」に「画像二」をDOMイベント設定。
「#cv_2」の「onclick」に「画像一」をDOMイベント設定。

#画像1を描画。
  「#cv_1」へ描画開始。
  [0,0]に「http://www.geocities.jp/snowdrops890/image/Clione_480.jpg」の画像描画。

#画像2を描画。
0.1秒後には   #少しタイミングを遅らせないと、cv_1への描画が行われず、こっちにクリオネも描画されて、鶴に上書きされてしまう。
  「#cv_2」へ描画開始。
  [0,0]に「http://www.geocities.jp/snowdrops890/image/Tancyo_480.jpg」の画像描画ここまで。
#-----------------------------------------------------------------------
●画像一
  「#cv_2」の「transition」に「opacity 2s」をDOMスタイル設定。   #2秒かけて透明度を変化させる設定。
  「#cv_2」の「opacity」に「0」をDOMスタイル設定。         #透明度を0に。
  2.1秒後には                          #トランジョンの秒数が経って変化が完了してから
    「#cv_1」の「z-index」に「1」をDOMスタイル設定。       #CV_1を表に出す。(CV_2が透明になって見えてるだけだと、マウスクリックのイベントが発生しないため)
    「#cv_2」の「z-index」に「0」をDOMスタイル設定。       #CV_2を下げる。
    「#cv_2」の「opacity」に「1」をDOMスタイル設定。       #CV_2をCV_1の下に隠してから透明度を1(100%)に。
  ここまで。
ここまで

●画像二
  「#cv_1」の「transition」に「opacity 2s」をDOMスタイル設定。
  「#cv_1」の「opacity」に「0」をDOMスタイル設定。
  2.1秒後には
    「#cv_2」の「z-index」に「1」をDOMスタイル設定。
    「#cv_1」の「z-index」に「0」をDOMスタイル設定。
    「#cv_1」の「opacity」に「1」をDOMスタイル設定。
  ここまで。
ここまで
#-----------------------------------------------------------------------
</script>

<H1>なでしこ3てすと~フェードインの実験</H1>
<HR>
<style type="text/css">
#base {
  margin:auto;          /* 子要素でポジションを絶対にしても位置指定の値をつけなければ反映される */
  width:480px;          /* 幅と高さを指定して、絶対位置指定の要素の表示場所を作る */
  height:380px;         /* これが無いと、他の位置指定の無い要素が詰まって表示されちゃう */
}
#main {                 /* 位置指定をせずbaseの子要素とすることで、baseと同じ位置に表示される */
  position:absolute;    /* 絶対位置指定の親要素は、配下の要素が指定する絶対位置の基準となる */
}
#cv_1 {                 /* 絶対位置指定のmainの子要素にすることで、これの位置指定はmainが基準となる */
  position:absolute;
  z-index:1;
}
#cv_2 {                 /* 絶対位置指定のmainの子要素にすることで、これの位置指定はmainが基準となる */
  position:absolute;
  z-index:0;
}
</style>
<div id="base">
  画像をクリックすると切り替わります。
  <div id="main">
    <canvas id="cv_1" width="480px" height="360px"></canvas>
    <canvas id="cv_2" width="480px" height="360px"></canvas>
  </div><!-- main ここまで -->
</div><!-- base ここまで -->
<HR>

 とりあえず、出来ました★

 実験のためにテキトーに思いつきで書いたので、ムダっぽいコードとなっていますが、気にしないで!

 画像をクリックしたら、もう一枚の画像に切り替わります。

http://snowdrops.starfree.jp/wnako3_test/08_fade_test.html


 しかしどうやらファイルからの画像描画はラグが生まれるようで、最初の画像読み込み時、単に、

#画像1を描画。
  「cv_1」へ描画開始。
  [0,0]に「Clione_480.jpg」の画像描画。

#画像2を描画。
  「cv_2」へ描画開始。
  [0,0]に「Tancyo_480.jpg」の画像描画

 としたところ、「cv_1」への描画は行われず、両方とも「cv_2」に描画されるコトになってしまいました(つまり1の画像は2の画像に上書きされてしまう~(´д`;)

 これも秒後のウェイトを入れたら一応解決。

 も、「画像描画」の説明の「 [x, y, w, h]へファイル名F(またはImage)の画像を描画し、Imageを返す」とゆうのがよくわからんのです;(バカ;)

 「ファイル名Fの画像を描画」するのはこのとうり簡単にできたんですが、「(またはImage)」とはなんぞや? しかも、「Imageを返す」って???

 imgの画像のことかとも思ったけど、IDを指定してみてもうまくいかないし、他のcanvasとゆうことでもないみたい?。むむむ~(?_?)


 てゆうかふと気付いたけど、二枚の画像を切り替えるだけなら、何もcanvas画像描画する必要なかった。imgで良かったw

 いや・・まあ・・・ゲームで実際に使う場合には、canvas必要あるかも知れないからね~(?)

通りすがり通りすがり2017/10/15 12:55Imageはイメージ部品的なものを考えると近いかも。

画像のURLを渡して画像描画すると、2つのことをやってくれます。
1.指定されたURLからの画像の読み込みを予約して、その画像の読み込みを予約したImage部品を返す。
2.その画像が読み込み終わったらImage部品を指定された位置に表示する。
※1と2の間にはタイムラグがある。

もし、すでに表示したい画像のImage部品があるなら、使いまわせます。2回読む必要はありません。
1.指定されたImage部品を指定された位置に表示する。

例えば、同じ画像を使うのであれば、以下のようにできます。
----
画像Aは[0,0]に「Clione_480.jpg」の画像描画。
[100,100]に画像Aの画像描画。
----
※が、「秒待つ」は必要かも。

描画せずにImage部品を返す命令があると使いやすいのですが、現状ではないようです。
(初回に「Loading..」などを表示した状態でまとめて読み込みを行うことで、実行中のタイムラグを無くせる)

雪乃☆雫雪乃☆雫2017/10/15 21:22いつもありがとうございます!!!
とってもよく分かりました☆
おかげさまでナゾが一つ解明しました♪

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

2017-10-10

続・IEなんてキライw

| 08:56

 昨日の続きです。

 ひらめかないし、ナゾも解明しないけど、なんか・・・できるようになっちゃいました(?_?)

 昨日書き忘れたけど、まず書いておかなければならなかったことは、IEはローカルではローカルストレージが動かないらしいんですよ(ややこやしい;)

 なので、HDDのHTMLファイルをダブルクリックして実行してもダメなんですよね。

 動作確認が、面倒すぎですね!!(´д`;

 しかし、もちろん、問題はこではありません。

 いち早く(?)それを知り、こかっ!と、ジオシティーズにUPしてお試ししてみましたが、やっぱりダメだったのです。

 最小限のプログラムで色々なパターンをいろいろお試ししましたが、とにかくダメでした。

 でも、うちのIEでローカルストレージが使えない設定になってるとかじゃ無いんです。簡易エディタでは動くわけですからね。制作サイトのエディタでも動いて、HTML埋め込みがどうこうって問題でも無いことが分かりました。

 それで、もしIEさまがジオシティーズを無料のHPだし安全ではないかなんか認識しておいで遊ばすのかしらとか考えて、それならなでしこだけじゃ無く、Javascriptも動かなくなるハズと、Javascriptでローカルストレージを使うサンプルを拾ってきて、意味も分からずコピペし、ジオシティーズにアップロードしてみたんですよ。

 ちなみに、コレです。

http://html5.imedia-web.net/sample/webstrage/post_2.html

 そうしたら・・・なななんと、ちゃんと動くじゃありませんか?!

 えー? じゃじゃじゃあ、やっぱりなでしこの問題なのなのかなー? ・・・と思いつつ、も一度試してみたら、あら不思議。までうんともすんとも言わなかったなでしこのコードも、全部問題なく動くようになりましたとさw(゜o゜)w

 なでしこのコードはもちろんまったく変更しておらず、アップロードし直してさえいないのにですよっ!!!

 ナゾは深まるばかりです。

 Javascriptはいっこも分かりませんが、何らかのまじないが使われているのでしょうか・・・(?_?)

 動いても、これっぽっちもうれしくないってのも珍しい(爆)

 別にワタシ自身IEなんかこの先も使う予定は無いし、とりあえず動くようになることよりも、なんで動かないのか、ソレをどーしたら動くように出来るのかを知ることの方が、重要だったわけなんですが・・・┐( ̄ヘ ̄)┌




 これまで、お試しで作ったコードを全てIEで動くようにし替えるのはめんどーだし、なにより、もともとなでしこ3の各バージョンごと色々お試ししては、動いたの動かないのとぼやいている記事の付属物なので、やめた~w

 とりあえず、問題のローカルストレージのテストと、一通りはプログラムとして完成させたモノだけ。

ローカルストレージテスト:http://www.geocities.jp/snowdrops890/nako3/test_localStorage.html

バイオリズム:http://www.geocities.jp/snowdrops890/nako3/Biorhythm0_1_5.html

実体参照変換:http://www.geocities.jp/snowdrops890/nako3/html_escape.html

15パズル:http://www.geocities.jp/snowdrops890/nako3/15puzzle_1_50.html

なこタイマーhttp://www.geocities.jp/snowdrops890/nako3/nako_timer.html

 ・・・どうですかねえ。

 機会があったら、別のパソコン(実家とかw)のIEで試してみたいとおもう。

通りすがり通りすがり2017/10/11 21:30wnako3を?run付きで呼び出した時のスクリプトの実行のタイミングに問題があるようで、まったく実行しなかったり、pluginの命令が使えなかったりするようです。なので、以下を行ってみてください。
1.とりあえず、?runを外す。
2.以下のファイルもscriptのsrcに指定して読み込むようにする。内容は、?runの時の処理を書き直したものです。記述場所はwnako3.jsの近くがわかりやすいです(動作する上ではどこでもよいです)
weyk.la.coocan.jp/weyk/nadesiko3/release/wnako3_runner.js

wnako3_runnerを読み込む=?runとほぼ同じ効果になります。
htmlファイルを全部読み込み終わって、一通り解析が済んでから実行しはじめます。
画像の読み込みや、配置(レイアウトの決定)はまだなので、その辺を扱いたい場合は、なでしこのscript側に「delay」を付けてみてください。実行をし始めるタイミングが、それらのあとになります。
※srcに画像ファイルのURLを指定していて幅や高さ指定をしていないimgタグの幅や高さを取得しようとすると差が出たりします。

雪乃☆雫雪乃☆雫2017/10/12 00:47ありがとうございます!
また、いろいろお試ししてみます~☆

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

2017-10-09

IE×ローカルストレージは難しい・・・

| 08:30

 前に、E11ではまったく動かんとゆう話を書きましたが、

https://nadesiko.g.hatena.ne.jp/snowdrops89/20170922/1506085208

 バージョン0.1.6で、サポートされました☆

 しかし~、やっぱりIEでは思ったように動かないモノが多数だったので、いっこいっこナゾを解明。

 まず、簡易エディタでは問題ないのですが、なぜかHTML埋め込みにしたタートルグラフィックスが動きません。簡易エディタで動く以上、こっち側の環境的な問題っぽい。

 どうやら、「この Web ページはスクリプトや ActiveX コントロールを実行しないように制限されています」的なお知らせが悪さをしている気配。

 他のプログラムは、許可してやればの後ふつーに動くんだけど、タートルグラフィックスだけはダメ。リロードしてもダメ。だけど、一旦許可されたタブに、HTMLファイルをドラッグドロップして開いたら、なんと動いたのです。

 なんにしても、許可しても許可しても、毎メッセージが出てくるのにはうんざりなので、色々調べて「インターネットオプション」→「詳細設定」→「マイ コンピューターのファイルでのアクティブ コンテンツの実行を許可する」にチェックをつけて、お知らせが表示されないように設定してみたら解消☆ 無事に動くようになりました。

 それから、バイオリズムやタイマーが軒並みダメだとおもったら、プラグインがやはり動いてないようだったので、とりあえず自前の関数し替えてみたら、タイマーは問題なく動くように☆

 Google Chromeさんでは問題となっていた、ポップアップと同時にオーディオを鳴らす件も問題ありませんでした。

 でも、最大の問題は、ローカルストレージでした。

 これも、なんと簡易エディタでは問題ありません。

#-----------------------------------------------------------
「名前」をローカルストレージ読む。
名前=それもし、名前=undefinedならば、
  「名前は?」と尋ねる。
  名前=それ。
  「名前」にそれをローカルストレージ保存ここまで。
「こんにちは{名前}さん」と言う
#-----------------------------------------------------------

 ちゃんと一目は名前を聞いてきて、二目以降はローカルストレージの情報を元に名前を言ってくれます。

 だから、やっぱりこっち側の問題っぽいのだけれど、HTML埋め込みの実行では、うんともすんとも言いません。

 とにかくローカルストレージの読み書きがまったく行えてないようで、しかも、単に無視されるんならまだしも、の命令があると、以降の命令も全て実行されずに止まってしまうってんだから、困ったもんです(--;

 IEの設定も、もう余計なお知らせは上がらないし、もちろんDOMストレージは有効になっているし、後は一体何をどうしたらいいのか、まったくお手上げ~ヽ(;´Д`)ノ

 ローカルストレージは、バイオリズムでも15パズルでも使っているので、実にどうもよろしくありませんが、これ以上はワタシの知恵では難しそうなので、ナゾの解明は一旦断念orz

 しかも、後に設定の仕方が分かってウチでは動くよーになっても、他の人達はやっぱり、「動かないじゃん」てなる人が発生するってコトだよね。

 IEキライ。なんかもう、Firefox推奨ですってコトにしたくなってきた~(えっ;)

kujirahandkujirahand2017/10/11 02:22簡易エディタでは問題なくて、ドラッグ&ドロップで動かない件は、たぶん、URLがfile://から始まっているからではないでしょうか?PC内でローカルサーバー立ち上げて、localhostでHTMLを閲覧すれば、セキュリティ問題は解決するかもです。これは、IE11だけでなく、Chromeでもエラーがでるはず。

kujirahandkujirahand2017/10/11 02:24・・・って、翌日の投稿で既に解決済みですね。よく見てなくて、コメント欄汚してスミマセン!

雪乃☆雫雪乃☆雫2017/10/11 15:11コメントありがとうございます!
いえいえ、とってもうれしいです!!(≧▽≦)
chromeさんではナゼか無問題だったのですよね~。
ソレもまた、深遠なるナゾでございます・・・

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

2017-10-02

なこタイマー(Chromeでもちゃんと鳴らす!)

| 12:15

 前に「秒毎」の実験で、お試しに作ってみたラーメンタイマーが、Firefoxならいいんですが、Google Chromeだと音が鳴らないとゆう話を書きました。

https://nadesiko.g.hatena.ne.jp/snowdrops89/20170922/1506085208

 アラートのポップアップが優先されて、オーディオの再生などが後しになっちゃうラシイというコトで、たとえばaudioにonplayingのイベントをつけて、のイベントでポップアップさせてみたらどうだろうと思ったら、ちょこっとだけ音が鳴って止まり、ポップアップが上がり、ダイアログを消すとまた音が鳴り始めてonplayingが発生して、またポップアップが・・・とゆうひどいことになりました;;;

 くっ、くろーむさぁん・・・ヽ(;´Д`)ノ

 どうやら後しっていうよりか、ポップアップが開いてるは、再生がとまっちゃうようです。


 ・・・とゆうわけで、やっぱりもう諦めて言わせるのはやめました;

 だいたい、追加のダイアログを表示ない的なチェックボックスをオンにしてしまったら、表示されんくなっちゃうしね。(言う無限ループが発生しちゃった時なんかは助かるけどねw)

 canvasの上にボタンを置いて、それっぽくしてみたw

 こんなものでも表示する位置を決めるに付いては、前学んだ重ね合わせやpositionの設定などで結構無駄に知恵を使いました。

 してして、近頃のラーメンは、3分とは限らないですよねぇ~。

 ちょっと良さげなのはたいてい4分とか長めになっているし、新幹印のなんと1分で出来る焼きば弁当もあるしね~。3分待つのだよって時代じゃナイ!

 とゆうワケで、丸いボタンとかも使ってちょっと可愛くしてみたりと、最近学んだことをいろいろ盛り込んで、キッチンタイマーに改造してみた。

 100ショップに売ってそうなチープさですが、電池切れの心配がない点がすぐれていますwww

<!-- うぇいくさまの日付時計算プラグイン -->
<script src="http://weyk.la.coocan.jp/weyk/nadesiko3/release/plugin_weykdatetime.js"></script>
<!-- type="なでしこ" のスクリプトが実行される -->
<script type="なでしこ">
#-----------------------------------------------------------------------
# なこタイマー
#-----------------------------------------------------------------------

#---宣言------
分=0を2でゼロ埋め。秒=0を2でゼロ埋めタイマーオフ終了=0。

#-----ポップアップウィンドウ表示位置------------------------------------
「#popup_base」の「width」に「160px」をDOMスタイル設定。
「#popup_base」の「margin」に「auto」をDOMスタイル設定。  #子要素でポジションを絶対にしてもleftの値をつけなければこのマージンが反映される

#-----タイマー設置------------------------------------------------------
「#timer」の「background-color」に「#FFEEEE」をDOMスタイル設定。
「#timer」の「width」に「200px」をDOMスタイル設定。
「#timer」の「padding」に「10px」をDOMスタイル設定。
「#timer」の「margin」に「auto」をDOMスタイル設定。
「#timer」の「border-radius」に「20px」をDOMスタイル設定。
「#timer」の「border」に「2px ridge #FF9999」をDOMスタイル設定。
タイマー部品配置。

●タイマー部品配置
  #readonlyは、設置時に指定しないとダメっぽい? disabledはできるのに、なんでだ;
  タイマー部品=「
<ul class="btn_base" style="height:50px">
  <li><input id="time" type="text" readonly="readonly"></li>
  <li><a id="reset" class="btn">リセット</a></li>
</ul>
<ul class="btn_base">
  <li><a id="mb" class="btn">分</a></li>
  <li><a id="sb" class="btn">秒</a></li>
  <li><a id="start" class="btn">スタート</a></li>
</ul>
<div id="alarm"></div>」
  「#timer」にタイマー部品をDOM_HTML設定。
  「#alarm」にをDOM_HTML設定。
  「#start」に「スタート」をDOMテキスト設定。
  「#time」に「{分}:{秒}」をDOMテキスト設定。

#---スタイル設定------
  「#time」の「width」に「110px」をDOMスタイル設定。
  「#time」の「font-size」に「32px」をDOMスタイル設定。
  「#time」の「text-align」に「center」をDOMスタイル設定。
  「#start」の「width」に「78px」をDOMスタイル設定。
  「#reset」の「width」に「45px」をDOMスタイル設定。

#---イベント設定------
  「#mb」の「onclick」に「分設定」をDOMイベント設定。
  「#sb」の「onclick」に「秒設定」をDOMイベント設定。
  「#start」の「onclick」に「タイマーオフオン」をDOMイベント設定。
  「#reset」の「onclick」に「リセット」をDOMイベント設定。
ここまで。
#-----------------------------------------------------------------------

#-----タイマー本体------------------------------------------------------
「ナコタイマー」を1秒毎。

●ナコタイマー
  もしタイマーオンならば、
    終了秒差を残秒数に代入。
    もし、残秒数<0ならば、
      「#title」に「時です!! - なこタイマー」をDOMテキスト設定。
      「#alarm」に「<audio src="http://www.geocities.jp/snowdrops890/audio/alarm_75_8C.mp3" autoplay></audio>」をDOM_HTML設定。
      タイマーオフ。ポップアップウィンドウ表示。
    違えば、
      分=残秒数/60を切捨を2でゼロ埋め。秒=残秒数%60を2でゼロ埋め。
      「#time」に「{分}:{秒}」をDOMテキスト設定。
    ここまで。
  ここまで。
ここまで。
#-----------------------------------------------------------------------

#-----ボタンイベント----------------------------------------------------
●タイマーオフオン
  もし、(分=0)かつ(秒=0)でなければ、
    もしタイマーオフならば、
      タイマーオン。
      に「+0:{分}:{秒}」を時間加算して終了代入。
      「#start」に「一時停止」をDOMテキスト設定。
      「#mb」の「color」に「#EEEEEE」をDOMスタイル設定。
      「#sb」の「color」に「#EEEEEE」をDOMスタイル設定。
      「#reset」の「color」に「#EEEEEE」をDOMスタイル設定。
      「#on_btn」に「.btn:active{波カッコ}box-shadow: 0 2px 0 #CC6666; top:0px;」をDOM_HTML設定。   #ボタン押した時の動きをオフ。
      「#on_btn」に「#start:active{波カッコ}box-shadow:none; top:2px;」をDOM_HTML設定。        #スタートボタンだけは押せるようにする。
    違えば、
      タイマーオフ。
      「#start」に「スタート」をDOMテキスト設定。
      「#mb」の「color」に「#FFFFFF」をDOMスタイル設定。
      「#sb」の「color」に「#FFFFFF」をDOMスタイル設定。
      「#reset」の「color」に「#FFFFFF」をDOMスタイル設定。
      「#on_btn」に「.btn:active{波カッコ}box-shadow:none; top:2px;」をDOM_HTML設定。
    ここまで。
  ここまで。
ここまで。

●分設定
 もしタイマーオフならば、
  「#time」のDOMテキスト取得。
  分はそれの2だけ文字左部分整数変換。
  もし、分が99ならば、分=0。
  違えば、分=分+1。
  分=分を2でゼロ埋め。
  「#time」に「{分}:{秒}」をDOMテキスト設定。
 ここまで。
ここまで。

●秒設定
 もしタイマーオフならば、
  「#time」のDOMテキスト取得。
  秒はそれの2だけ文字右部分整数変換。
  もし、秒が59ならば、秒=0。
  違えば、秒=秒+1。
  秒=秒を2でゼロ埋め。
  「#time」に「{分}:{秒}」をDOMテキスト設定。
 ここまで。
ここまで。

●リセット
 もしタイマーオフならば、
  分=0を2でゼロ埋め。秒=0を2でゼロ埋め。
  「#time」に「{分}:{秒}」をDOMテキスト設定。
 ここまで。
ここまで。

#-----------------------------------------------------------------------
●ポップアップウィンドウ表示
  ポップアップ=「<div id="popup_area">
<canvas id="alart" width="160px" height="120px"></canvas>
<button id="stop">OK</button>
</div>」
  「#popup_base」にポップアップをDOM_HTML設定。

  「#popup_area」の「position」に「absolute」をDOMスタイル設定。  #絶対位置指定でポップアップを表示する位置を指定。
  「#popup_area」の「width」に「160px」をDOMスタイル設定。
  「#popup_area」の「top」に「350px」をDOMスタイル設定。

  「#alart」の「position」に「absolute」をDOMスタイル設定。     #絶対位置指定したエリアの子要素にすると、子の絶対位置指定は親が基準になる。
  「#alart」の「z-index」に「2」をDOMスタイル設定。
  「#stop」の「position」に「absolute」をDOMスタイル設定。
  「#stop」の「width」に「60px」をDOMスタイル設定。
  「#stop」の「top」に「90px」をDOMスタイル設定。
  「#stop」の「left」に「50px」をDOMスタイル設定。
  「#stop」の「z-index」に「3」をDOMスタイル設定。
  「#stop」の「onclick」に「アラームストップ」をDOMイベント設定。

  「canvas#alart」のDOM要素取得。それへ描画開始。
  「#FFFFEE」に塗り色設定。
  [0,0,160,120]に四角描画。
  「#224477」に塗り色設定。
  [0,0,160,18]に四角描画。
  「bold 12px Aria」に描画フォント設定。
  白色塗り色設定。
  [5,15]に「なこタイマー」を文字描画。
  黒色塗り色設定。
  [50,60]に「時です!!」を文字描画ここまで。

●アラームストップ
  「#title」に「なこタイマー」をDOMテキスト設定。
  「#popup_base」にをDOM_HTML設定。
  「#alarm」にをDOM_HTML設定。
  タイマー部品配置。
  「#on_btn」に「.btn:active{波カッコ}box-shadow:none; top:2px;」をDOM_HTML設定。
ここまで。
#-----------------------------------------------------------------------
</script>
<style type="text/css">
<!--
a.btn {
    position:relative;                 /* 相対位置への配置(凹むボタンでtopの位置を変えるのに必要) */
    display:table-cell;                /* コレを設定しないとwidthとheightの設定が効かない。 */
    cursor:pointer;                    /* カーソルを手の形に。 */

    width:30px;                        /* ボタンの幅。 */
    height:30px;                       /* ボタンの高さ。 */
    border-radius:18px;                /* 角丸設定(ボタンサイズの半分よりもちょい大きめのほうが綺麗な丸になるっぽい) */
    background-color: #FFCCCC;         /* ボタンの色。 */
    border:1px solid #FF9999;          /* ボタン線色。 */
    box-shadow:0 2px 0 #CC6666;        /* ボタンの影設定。 */

    color: #FFFFFF;                    /* 文字色。*/
    font-weight:bold;                  /* 文字太さ。*/
    font-size:14px;                    /* フォントサイズ。*/
    text-shadow:0 1px 1px rgba(0, 0, 0, .3);      /* 文字の影設定。*/
    text-align:center;                 /* 横方向文字揃え。 */
    vertical-align:middle;             /* 縦方向文字揃え。 */
    text-decoration:none;              /* 装飾無し(aタグには大抵下とかが付いてるので解除する) */
}
ul.btn_base{
    list-style:none;            /* noneにしないリストの●が付いちゃう。 */
    padding:0px;                /* 左を0にしないリストのインデントが入っちゃう。 */
    height:35px;                /* ボタンのサイズ+ボーダー+影 */
    margin-top:5px;
    margin-bottom:0px;
}
ul.btn_base li{
    float:left;                 /* 左にり込む(横に並べる) */
    margin-left:20px;
}
ul.btn_base li:first-child{
    margin-left:10px;
}
 -->
</style>
<style type="text/css" id="on_btn">
<!--
.btn:active {
    top: 2px;
    box-shadow: none;
}
 -->
</style>

  <center><H1 id="title">なこタイマー</H1></center>
  <HR>
  <div id="timer"></div>
  <div id="popup_base"></div>
  <HR>

http://snowdrops.starfree.jp/wnako3_test/nako_timer.html

※リンク先のものは、違うタブを開いていてもそれと分かりやすいよう、アラームが鳴ると同時にタイトルの文字を変えているのですが、掲載したコードでは、eznavi.netの制作サイトのエディタに貼付けて動くように、H1の文字を変えるようにしています。



 15パズルの成績発表も、のうちこんな感じで直す予定だけど、それよりも、なんとか画像を使って出来ないかを考え中~。

 重ね合わせで、裏画面は使えそうだけど、画像部分コピーみたいな命令が追加されないと、やっぱり難しいかなあ・・・?

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