Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

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-09-25

丸いボタンを作りたい!

| 09:11

 だって、本来ボタンって、丸いモノでしょ。

 服のボタンなら、四角い方が珍しいくらい。

 ・・・それはともかく、画像ボタンとかはあるけど、ボタン自体は結局四角くなってしまうため、丸とか、あと楕や角丸の形で凹むボタンが欲しいなあと思って、かなり無理矢理系で作ってみたはいいけれど、使いどころが無いまま放置してあったのを、ちょこっと手直しして、なんとなくUPしてみる。(なでしこ1)

#-----------------------------------------------------------
# イメージボタン
#-----------------------------------------------------------
#  画像ボタンとかは、ボタン自体は四角になってしまうため、
# 丸や楕、角丸の形で凹むボタンとして作成したものです。
#  画像も使えますが、周囲にアンチエイリアスのかかってない
# 単純形状のものに限ります。(影が変になるんで)
#★便利機能としてイメージのサイズに合わせて、図形描画位置と、文字描画位置を取得する関数追加。
#-----------------------------------------------------------------------
●イメージボタン作成({数値=$FFFFFF}地色に{グループ=?}OBJから{数値=1}影幅,{数値=$000000}影色で)
  OBJの白色を$FFFFFEに画像色置換。 #白色は地色に置換されてしまうための措置;
  マスクをイメージとして作成。マスクの可視はオフ。マスクの画像はOBJ→名前。
  処理用をイメージとして作成。処理用の可視はオフ。処理用の画像はOBJ→名前。

 #マスク作成
  マスクの0,0を点取得。
  マスクをそれ画像マスク作成。

 #ボタン押下時の画像を作成
  #影の部分
  マスクを処理用の0,0へ画像コピー。
  処理用の黒色を影色に画像色置換。

  #ボタン画像を影幅分ずらした位置に合成
  マスクを画像ネガポジ。
  マスクをOBJの0,0へ画像ANDコピー。
  マスクを画像ネガポジ。
  マスクを処理用の影幅,影幅へ画像ANDコピー。
  OBJを処理用の影幅,影幅へ画像ORコピー。

 #ボタンの透明色を地色に変換
  マスクをOBJの0,0へ画像ORコピー。
  OBJの白色を地色に画像色置換。

 #ボタン押下時ようのイメージ作成
  ON用=「{OBJ→名前}ON」。
  「{ON用}をイメージとして作成。{ON用}の可視はオン。OBJを最前面。
{ON用}の位置はOBJ→位置。{ON用}の幅はOBJ→幅。{ON用}の高さはOBJ→高さ。

#処理用を元のボタンに合わせて切り抜く。
マスクを{ON用}の0,0へ画像ANDコピー。
処理用を{ON用}の0,0へ画像ORコピー。
{ON用}の白色を地色に画像色置換。

#ボタン押下のマウスイベント
OBJ→マウス押した時は~自身→可視はオフ。
OBJ→マウス離した時は~自身→可視はオン。」をナデシコする。

 #マスクと処理用は壊す。
  VCL_FREE(マスク)
  VCL_FREE(処理用)

●イメージボタン可視設定({グループ=?}OBJを|OBJのAに|Aで)
  ON用=「{OBJ→名前}ON」
  「もし、A=オンならば、OBJ→可視はオン。{ON用}→可視はオン違えば、OBJ→可視はオフ。{ON用}→可視はオフ。」をナデシコする。

●イメージボタン位置変更({グループ=?}OBJを|OBJのx,yに|x,yで)
  ON用=「{OBJ→名前}ON」
  「OBJ→位置は"{x},{y}"。{ON用}→位置は"{x},{y}"」をナデシコする。
#-----------------------------------------------------------------------
#-----------------------------------------------------------
x1とは整数。y1とは整数。x2とは整数。y2とは整数mxとは整数。myとは整数。
*イメージボタン描画位置取得({グループ=?}OBJの)
  x1=(線太さ/2)。y1=(線太さ/2)。x2=(OBJ→幅-線太さ/2)。y2=(OBJ→高さ-線太さ/2)。
  
*イメージボタンテキスト位置取得(Sで{グループ=?}OBJの)
  mx=(OBJ→幅/2)-(Sの文字幅取得/2)。my=(OBJ→高さ/2)-(Sの文字高さ取得/2)
#-----------------------------------------------------------

#以下はテスト

丸ボタンとはイメージ
これについて
  位置は"10,10"。幅は50。高さは50。可視はオン。
  緑色画面クリア。
  塗り色白色線色黒色線太さは2。
  丸ボタンイメージボタン描画位置取得。
  x1,y1からx2,y2へ。
  文字色赤色文字書体は「|20|太字」
  「OK」で丸ボタンイメージボタンテキスト位置取得。
  mx,myへ「OK」を文字描画。
  クリックした時は~
    自身の可視はオン。  #処理によっては必要。(ダイアログ表示秒待つ命令でウェイトがかかる時とか、処理が終わるまでボタンが押ささったままになっちゃうんで)
    10,10で丸ボタンイメージボタン位置変更。
    「OK!」と言う。

角丸ボタンとはイメージ
これについて
  位置は"100,15"。幅は90。高さは40。可視はオン。
  緑色画面クリア。
  塗り色ウィンドウ背景色線色黒色線太さは3。
  角丸ボタンイメージボタン描画位置取得。
  x1,y1からx2,y2へ20,30で角丸四角
  文字色黒色文字書体は「|12|」
  「ON/OFF」で角丸ボタンイメージボタンテキスト位置取得。
  mx,myへ「ON/OFF」を文字描画。
  クリックした時は~
    もし、丸ボタンの可視=オンならば
      オフで丸ボタンイメージボタン可視設定。
    違えば、
      丸ボタンオンイメージボタン可視設定。

楕ボタンとはイメージこれについて
  位置は"210,10"。幅は80。高さは50。可視はオン。
  白色画面クリア。
  塗り色は$FFAAAA。線色は$993333。線太さは2。
  楕ボタンイメージボタン描画位置取得。
  x1,y1からx2,y2へ
  文字色は$660000。文字書体は「|12|」
  「↓移動」で楕ボタンイメージボタンテキスト位置取得。
  mx,myへ「↓移動」を文字描画。
  クリックした時は~
    次位置=丸ボタンのY
    次位置=次位置+10
    10,次位置で丸ボタンイメージボタン位置変更。

母艦を$FFCCCCで画面クリア
$FFCCCCに丸ボタンからイメージボタン作成。
$FFCCCCに角丸ボタンからイメージボタン作成。
$FFCCCCに楕ボタンから2,$660000でイメージボタン作成

 ・・・どうかな~?

 元の画像から、無理矢理影付きの画像を自動生成してるんだよねぇ~w



 なでしこ3は、DOMスタイル設定ができるから、CSSを使ってもっとカンタンに作れそう

 っとゆうわけで、とりあえずこんな感じ。

http://snowdrops.starfree.jp/wnako3_test/06_maru_button.html

(本当は、もうちょっと丁寧に、マウス乗った時は、ボーダーと影の色も一緒に薄めるようにしたほうがよさそう


 して、のコードは・・・

 こっコードはっ・・・・・・

<style type="text/css">
<!--
#btn {
    position:relative;                  /* 相対位置への配置(凹むボタンでtopの位置を変えるのに必要) */
    display:table-cell;                 /* コレを設定しないとwidthとheightの設定が効かない。 */
    cursor:pointer;                     /* カーソルを手の形に。 */

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

    color: #FFFFFF;                     /* 文字色。*/
    font-weight:bold;                   /* 文字太さ。*/
    font-size:24px;                     /* フォントサイズ。*/
    text-shadow:0 1px 1px rgba(0,0,0,.3);      /* 文字の影設定。*/
    text-align:center;                  /* 横方向文字揃え。 */
    vertical-align:middle;              /* 縦方向文字揃え。 */
    text-decoration:none;               /* 装飾無し(aタグには大抵下とかが付いてるので解除する) */
}
#btn:hover {                         /* マウス乗った時 */
    background-color: #FFDDDD;          /* ボタンの色を薄くする。 */
}
#btn:active {                        /* マウス押した時 */
    top: 2px;                           /* ボタン位置を下げる。 */
    box-shadow:none;                    /* 影を消す。 */
}
 -->
</style>

<!-- 丸いボタン -->
<a id="btn">OK</a>

 ・・・こんだけです。

 ええ、こんだけです。なでしこいりません。CSSだけで出来ましたw

 ってか、トランジョンとか、アニメーションとかあって、もっと凝ったことがCSSだけでもなんぼでもできるっぽいです。すごいな。

 でっでもっ、いちおうコレを全部DOMスタイル設定でやってみようと思ったんです。

 だけど、うまく出来ませんでした。しくしくしく。

 どうやら、:hover:activeは、設定できないっぽくて・・・(?)

 それに・・・はIDを振っているけど、たぶんボタンって複数あって、みんな同じよーなデザインに揃えるのがふつーだから、classでまとめて設定すると思うんだけど、コレもどうやらDOMスタイル設定ではできないっぽい・・・(?)

 ならば、DOM_HTML設定を使えば・・・とも思ったのですが、ココで浮上したのがまた、例の波カッコ閉じが使えない問題です(´д`; ←0.1.6で対応されました!

 前に、背景色設定をした時には、取りあえず閉じなくても通ったんだけど、最低でも:hover:activeとで項目が二つとゆうことになると、閉じないわけにはいないでしょ。

 それぞれにstyleタグを用意して別々にDOM_HTML設定する・・・などという方法も考えられましたが、あんまりにもやっつけ感が過ぎる上に、別に背に腹は替えられないって状況でもないんで、試してません;

 うまくなでしこで設定できるようなら、いつも使うような定型のボタンを、この見てるだけで具合わるくなるCSSをいちいちやらなくても、日本語だけで色とか文字とかサイズとかを設定して使える関数が作れるんじゃないかと思ったんだけどね。

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

2017-08-19

バイオリズム

| 21:18

 突然何の脈絡も無く、バイオリズムを表示するプログラム。

 ムカシはだいぶ流行ったけど、最近はあんまりお見かけしませんね。

 やっぱり、カガク的コンキョに欠けるとゆうコトなんでしょうか。

 のわりには、血液型占いは廃れないよね~。

 A型が几帳面だなんて、絶っっ対にあり得ないと思うんだけど・・・(^▽^;

#バイオリズム(なでしこ1)

#-----宣言--------------------------------------------------
生年月日とは文字列。生年月日=「」。
当日とは整数。当日=今日の2文字右部分整数変換。
当月とは整数。当月=今日の6から2文字抜き出しを整数変換。
基準日とは整数。基準日=今日に「-0/0/{当日-1}」を日付加算。
誕生日とは文字列表示年とは整数表示月とは整数表示年月とは文字列。
閏年とは整数。
月末とは整数。
#-----------------------------------------------------------
母艦について
  クライアント幅は640。クライアント高さは480。

文字色黒色。30,20へ「生年月日(yyyy/mm/dd):」を文字描画。
生年月日エディタとはエディタこれについて
  位置は「175,15」。幅は80。テキストは生年月日。
部品間隔は0。
前月ボタンとはボタンこれについて
  位置は「280,15」。幅は50。高さは20。
  クリックした時は~
    基準日=基準日に「-0/1/0」を日付加算。
    バイオリズム表示今月ボタンとはボタンこれについて
  位置は前月ボタンの右側。幅は50。高さは20。
  クリックした時は~
    基準日=今日に「-0/0/{当日-1}」を日付加算。
    バイオリズム表示。
翌月ボタンとはボタンこれについて
  位置は今月ボタンの右側。幅は50。高さは20。
  クリックした時は~
    基準日=基準日に「+0/1/0」を日付加算。
    バイオリズム表示文字色青色。480,20へ「■身体」を文字描画文字色赤色。530,20へ「■感情」を文字描画文字色緑色。580,20へ「■知性」を文字描画。
#-----------------------------------------------------------
枠描画。
もし、生年月日がならば、「生年月日を入力して下さい」と言う違えば、バイオリズム表示。
#-----------------------------------------------------------

*枠描画
 線スタイルは実塗りスタイルはべた。線色白色塗り色白色文字色黒色。
 0,40から640,480へ四角。
 11
  もし、((回数-1)=0)ならば、3,40へ「高{~}調{~}期」を文字描画。
  もし、((回数-1)=9)ならば、3,((回数-1)*40+40)へ「低{~}調{~}期」を文字描画。
  もし、((回数-1)=5)ならば、
    3,((回数-1)*40+20)へ「要{~}{~}意」を文字描画。
    線スタイルは透明。塗りスタイルはべた。塗り色黄色。
    20,((回数-1)*40+20)から620,((回数-1)*40+60)へ四角。
  線色黒色塗りスタイルは透明。
  もし、((回数-1)=0)または((回数-1)=5)または((回数-1)=10)ならば、
    線太さは2。線スタイルは実。
  違えば、
    線太さは1。線スタイルは点。
  20,((回数-1)*40+40)から620,((回数-1)*40+40)へ。

 31
  もし、((回数-1)=0)または((回数-1)=30)ならば、
    線太さは2。線スタイルは実。
  違えば、
    線太さは1。線スタイルは点。
  ((回数-1)*20+20),40から((回数-1)*20+20),440へ。

 (月末)
  ((回数-1)*20+15),450へ回数文字描画。
#-----------------------------------------------------------

*バイオリズム表示
  生年月日は生年月日エディタのテキスト。
  誕生日=「{生年月日の4文字左部分}年{生年月日の6から2文字抜き出し}月{生年月日の2文字右部分}日」
  表示年=基準日の4文字左部分整数変換。
  表示月=基準日の6から2文字抜き出しを整数変換。
  表示年月=「{表示年}年{表示月}月」

  もし表示年%4=0でなければ、閏年=いいえ。
  違えばもし表示年%100=0でなければ、閏年=はい。
  違えばもし表示年%400=0でなければ、閏年=いいえ。
  違えば、閏年=はい。
  もし、(表示月=02)または(表示月=04)または(表示月=06)または(表示月=09)または(表示月=11)でなければ、月末=31。
  違えばもし表示月=02ならば、
    もし、閏年=はいならば、月末=29。
    違えば、月末=28。
  違えば、月末=30。

  母艦のタイトルは「{誕生日} 生まれの方の {表示年月} のバイオリズム」
  枠描画。バイオリズム描画。

*バイオリズム描画
 線太さは3。線スタイルは実塗りスタイルはベタ。
 31
  日付=基準日に「+0/0/{回数-1}」を日付加算。
  結果=生年月日と日付でバイオリズム計算。
  身体2=(結果¥0)*2。
  感情2=(結果¥1)*2。
  知性2=(結果¥2)*2。
  もし回数>1ならば、
    線色青色。(20*(回数-1)),(-身体1+240)から(20*回数),(-身体2+240)へ
    線色赤色。(20*(回数-1)),(-感情1+240)から(20*回数),(-感情2+240)へ
    線色緑色。(20*(回数-1)),(-知性1+240)から(20*回数),(-知性2+240)へ
  もし、(表示年=今年)かつ(表示月=今月)かつ(回数=当日)ならば、
    線色青色塗り色青色。(20*回数-5),(-身体2+240-5)から(20*回数+5),(-身体2+240+5)へ
    線色赤色塗り色赤色。(20*回数-5),(-感情2+240-5)から(20*回数+5),(-感情2+240+5)へ
    線色緑色塗り色緑色。(20*回数-5),(-知性2+240-5)から(20*回数+5),(-知性2+240+5)へ
  身体1=身体2。
  感情1=感情2。
  知性1=知性2。
#-----------------------------------------------------------
#外枠の表示
 線色黒色塗りスタイルは透明。
 18,38から622,442へ四角。
#-----------------------------------------------------------
*バイオリズム計算(誕生日と基準日で)
  日数=誕生日と基準日の日数差。
  結果¥0=SIN(日数/23*PI*2)*100を整数変換。
  結果¥1=SIN(日数/28*PI*2)*100を整数変換。
  結果¥2=SIN(日数/33*PI*2)*100を整数変換。
  結果で戻る。
#-----------------------------------------------------------

 生年月日を入力して「今月」のボタンを押せば表示されます。

 宣言のところで、生年月日に自分のを入れとけば、それが自動的に表示されます。

 高調期や低調期は、それほど気にする必要は無く、0と交わる辺りが注意日で色々と不安定になるので気をつけなければならないそうです。


 こんなヤツを、なでしこ3で、ウェブ上に設置できたら面白そうだなぁ~と思って、なでしこ1で試しに作ってみたんだけど・・・

 まあ、バイオリズム自体は、サインカーブを描くだけなんで、サインもコサインも何も覚えてないけど、プログラム的にはそう難しいことはないんですが、なでしこ3では使えない命令があったり、色々ナゾ現象はあるし、密かに違っているところも多くて、なんだか次から次へとエラーが出る~(*_*;

 たとえば、文字列中の{}の中の変数は、1同様展開されるんだけど、の中で{回数-1}みたいに計算するコトは出来ないみたいなんだよね。不便っす;;;

 でも、それ以前にずっと引っかかっていたのは、<button>タグのonclickに、なでしこの関数を設定したりは出来ないのかしらん・・・とゆうことでした。

 カナリ色々試したんだけど、のところムリっぽい気が~・・・・・・(?)

 ↑バージョン0.1.5でできるようになりました!!!


◆覚え書き◆

※バイオリズムの計算式
日数差=誕生日-基準日。
身体のリズム=23。
感情のリズム=28。
知性のリズム=33。
SIN日数差/リズム*PI*2)

※閏年の計算方法
1、4で割り切れる。
2、ただし、100で割り切れる場合は閏年でない。
3、ただし、400で割り切れる場合は閏年である
トラックバック - http://nadesiko.g.hatena.ne.jp/snowdrops89/20170819