[一覧へ] > (@12)
[低]
[アイデア]
DOM関連についての所感と変更案です。
自分はHTML・javascriptにうといので雰囲気でお願いします。
なでしこ3のマニュアルを見て、やってみて、DOM関連があまりにとっつきにくかったので思ったことを書いてみました。
変なこと言っている部分もあると思いますが、納得できる部分をつまんでもらえればいいなと思います。
★DOMの作られる位置問題
（DOM親要素、DOM親要素設定、DOM要素作成）
・「DOM親要素設定」の名称が「DOM属性設定」「DOMテキスト設定」「DOMイベント設定」などの命令と似ているのに用途がまるで違う
・「DOM親要素設定」はなでしこv1では「デフォルト親部品設定」だったのでそのまま用語を持ってくるとよい
・自力でHTMLファイルを作ってなでしこ3を取り込んだ時、「ボタン作成」「表示」しても何も起こらない
・できればbody直下をデフォルトの親部品とする
・v1の「母艦にデフォルト親部品設定」に相当することが必要なので母艦が必要だと思う
・簡易エディタ等では初めに指定するdivタグが母艦になるようにする
・DOM要素作成は作成するだけなので（初心者的に）使い勝手が悪い
・HTMLタグを作ってすぐデフォルト親部品にぶら下げる命令が欲しい
（変更案）
変更前 ｜変更後 ｜備考
変数 DOM親要素 ｜変数 デフォルト親部品 ｜タグ作成時の親部品
DOM親要素設定 ｜デフォルト親部品設定 ｜v1互換の名前
（なし） ｜定数 母艦 ｜あるとべんり
DOM要素作成 ｜タグ作成 ｜（機能変更）デフォルト親部品の下にtagを作成してDOMを返す
例）母艦とかデフォルト親部品設定を使えるようにした
https://n3s.nadesi.com/id.php?746
★DOM～～設定・取得命令が多すぎる問題１
（DOM要素取得、DOM要素ID取得、DOM子要素取得、DOM要素全取得、タグ一覧取得、DOM子要素全取得）
（DOM属性設定、DOMスタイル設定、DOMスタイル一括設定、DOMテキスト設定、DOMイベント設定、DOM_HTML設定）
・DOMを探す命令とDOMの中身に関する命令で語感を分けるべき
・js互換の記法を使えるものと、初心者用のかんたんな命令を分ける
・初心者用命令をマニュアル上でオススメする
・js互換のほうが難しそうな名前にする
（案）
DOM～～検索 … DOMを探して一つ返す
DOM～～列挙 … DOMを探して配列を返す
DOM～～取得 … DOMの属性を取得する
DOM～～設定 … DOMの属性を変更する
（案）初心者用命令
（wordを）DOM検索
（wordを）DOM列挙
（domの属性名を）DOM取得
（domの属性名にvalを）DOM設定
「(wordを)DOM検索」
ID=wordを持つ要素を検索して先頭のDOMを返す。
見つからなければタグ名=wordで検索して先頭のDOMを返す。
見つからなければ未定義を戻す
（名称変更案）
変更前 ｜変更後 ｜引数 ｜備考
DOM要素ID取得 ｜DOM検索 ｜wordを ｜ID=wordをかタグ名=wordを持つ要素を検索して先頭のDOMを返す。
DOM子要素取得 ｜DOM子要素検索 ｜domからwordを ｜ID=wordをかタグ名=wordを持つ子要素を検索して先頭のDOMを返す。
DOM要素取得 ｜DOMクエリ検索 ｜qを ｜CSSクエリセレクタqで検索して先頭のDOMを返す
変更前 ｜変更後 ｜引数 ｜備考
タグ一覧取得 ｜DOM列挙 ｜tagの ｜ドキュメント内でタグ名「tag」を持つDOMの配列を返す
タグ一覧取得 ｜DOMタグ列挙 ｜tagの ｜ドキュメント内でタグ名「tag」を持つDOMの配列を返す
DOM子要素全取得 ｜DOM子要素列挙 ｜domのtagを ｜domの子要素からタグ名「tag」を持つDOMの配列を返す
DOM要素全取得 ｜DOMクエリ列挙 ｜qを ｜CSSクエリセレクタqで検索してDOMの配列を返す
※ 案として出してはみたけど名称は審議
★DOM～～設定・取得命令が多すぎる問題２
（DOM属性設定、DOMスタイル設定、DOMスタイル一括設定、DOMテキスト設定、DOMイベント設定、DOM_HTML設定）
・HTMLの心得がないので理解にかなりかかった
・マニュアルのDOM操作の項目にずらりと並んでいる
・DOM属性設定の重要度が高いことにたどりつくまでとても長い時間を要した
・初心者はスタイルに設定するか属性に設定するかわからない
・なでしこv1ではサイズもアイテムもイベントも横並びだった
・初心者用命令「DOM設定」を作って、これ一つでだいたいまかなえるようにしてオススメする
・DOM設定の引数省略版が「DOMテキスト設定」「DOM_HTML設定」であることマニュアルにのせる
例）
幅を設定したい初心者 →domの「幅」に300をDOM設定
widthを属性に設定したい人 →domの「幅」に300をDOM属性設定
widthをスタイルに設定したい人 →domの「幅」に「300px」をDOMスタイル設定
（案）
・初心者用命令「domの(属性名)に(val)をDOM設定」の仕様
・属性名は日本語またはhtml属性名（日本語の一部は和DOMスタイルで実装済み）
・属性名の日本語はなでしこv1の互換を持つ名称を優先する
・domの種類と属性名を見て、スタイル、属性、イベントのいいところにvalを設定する
・属性名に使えるもの
・高さ、高、H、幅、W など …DOMスタイル設定したことにする
・背景色、文字色、文字サイズ、文字書体 …DOMスタイル設定したことにする
・テキスト、ヒント …DOM属性設定する
・有効、可視 …値を反転してdisable、hiddenにDOM属性設定する
・親部品 …DOM子要素追加する
・domによって変換するhtml属性名を変更する
(dom種類)の属性名→html属性名
・キャンバスの幅 → widthにDOM属性設定
・ボタンの幅 → 幅にDOMスタイル設定
・セレクトボックスの行数 → size
・テキストエリアの行数 → rows
・チェックボックスの値 → checked
キャンバスの幅は属性に設定するのにボタンの幅はスタイルに設定とか、ちょっと受け入れがたいと思います。
なでしこ3が「いい感じに設定してくれる」のが望まれているはず。
例）dom設定でいろいろできるようにした
https://n3s.nadesi.com/id.php?747
・簡易エディタの初期宣言の例？
母艦＝「nako3result_div_1」をDOM検索
母艦にデフォルト親部品設定
母艦の「HTML」に空をDOM設定
・最後に
javascriptに慣れた人にとって分かりにくくなるかどうかはたぶん重要ではない
自分はHTML・javascriptにうといので雰囲気でお願いします。
なでしこ3のマニュアルを見て、やってみて、DOM関連があまりにとっつきにくかったので思ったことを書いてみました。
変なこと言っている部分もあると思いますが、納得できる部分をつまんでもらえればいいなと思います。
★DOMの作られる位置問題
（DOM親要素、DOM親要素設定、DOM要素作成）
・「DOM親要素設定」の名称が「DOM属性設定」「DOMテキスト設定」「DOMイベント設定」などの命令と似ているのに用途がまるで違う
・「DOM親要素設定」はなでしこv1では「デフォルト親部品設定」だったのでそのまま用語を持ってくるとよい
・自力でHTMLファイルを作ってなでしこ3を取り込んだ時、「ボタン作成」「表示」しても何も起こらない
・できればbody直下をデフォルトの親部品とする
・v1の「母艦にデフォルト親部品設定」に相当することが必要なので母艦が必要だと思う
・簡易エディタ等では初めに指定するdivタグが母艦になるようにする
・DOM要素作成は作成するだけなので（初心者的に）使い勝手が悪い
・HTMLタグを作ってすぐデフォルト親部品にぶら下げる命令が欲しい
（変更案）
変更前 ｜変更後 ｜備考
変数 DOM親要素 ｜変数 デフォルト親部品 ｜タグ作成時の親部品
DOM親要素設定 ｜デフォルト親部品設定 ｜v1互換の名前
（なし） ｜定数 母艦 ｜あるとべんり
DOM要素作成 ｜タグ作成 ｜（機能変更）デフォルト親部品の下にtagを作成してDOMを返す
例）母艦とかデフォルト親部品設定を使えるようにした
https://n3s.nadesi.com/id.php?746
★DOM～～設定・取得命令が多すぎる問題１
（DOM要素取得、DOM要素ID取得、DOM子要素取得、DOM要素全取得、タグ一覧取得、DOM子要素全取得）
（DOM属性設定、DOMスタイル設定、DOMスタイル一括設定、DOMテキスト設定、DOMイベント設定、DOM_HTML設定）
・DOMを探す命令とDOMの中身に関する命令で語感を分けるべき
・js互換の記法を使えるものと、初心者用のかんたんな命令を分ける
・初心者用命令をマニュアル上でオススメする
・js互換のほうが難しそうな名前にする
（案）
DOM～～検索 … DOMを探して一つ返す
DOM～～列挙 … DOMを探して配列を返す
DOM～～取得 … DOMの属性を取得する
DOM～～設定 … DOMの属性を変更する
（案）初心者用命令
（wordを）DOM検索
（wordを）DOM列挙
（domの属性名を）DOM取得
（domの属性名にvalを）DOM設定
「(wordを)DOM検索」
ID=wordを持つ要素を検索して先頭のDOMを返す。
見つからなければタグ名=wordで検索して先頭のDOMを返す。
見つからなければ未定義を戻す
（名称変更案）
変更前 ｜変更後 ｜引数 ｜備考
DOM要素ID取得 ｜DOM検索 ｜wordを ｜ID=wordをかタグ名=wordを持つ要素を検索して先頭のDOMを返す。
DOM子要素取得 ｜DOM子要素検索 ｜domからwordを ｜ID=wordをかタグ名=wordを持つ子要素を検索して先頭のDOMを返す。
DOM要素取得 ｜DOMクエリ検索 ｜qを ｜CSSクエリセレクタqで検索して先頭のDOMを返す
変更前 ｜変更後 ｜引数 ｜備考
タグ一覧取得 ｜DOM列挙 ｜tagの ｜ドキュメント内でタグ名「tag」を持つDOMの配列を返す
タグ一覧取得 ｜DOMタグ列挙 ｜tagの ｜ドキュメント内でタグ名「tag」を持つDOMの配列を返す
DOM子要素全取得 ｜DOM子要素列挙 ｜domのtagを ｜domの子要素からタグ名「tag」を持つDOMの配列を返す
DOM要素全取得 ｜DOMクエリ列挙 ｜qを ｜CSSクエリセレクタqで検索してDOMの配列を返す
※ 案として出してはみたけど名称は審議
★DOM～～設定・取得命令が多すぎる問題２
（DOM属性設定、DOMスタイル設定、DOMスタイル一括設定、DOMテキスト設定、DOMイベント設定、DOM_HTML設定）
・HTMLの心得がないので理解にかなりかかった
・マニュアルのDOM操作の項目にずらりと並んでいる
・DOM属性設定の重要度が高いことにたどりつくまでとても長い時間を要した
・初心者はスタイルに設定するか属性に設定するかわからない
・なでしこv1ではサイズもアイテムもイベントも横並びだった
・初心者用命令「DOM設定」を作って、これ一つでだいたいまかなえるようにしてオススメする
・DOM設定の引数省略版が「DOMテキスト設定」「DOM_HTML設定」であることマニュアルにのせる
例）
幅を設定したい初心者 →domの「幅」に300をDOM設定
widthを属性に設定したい人 →domの「幅」に300をDOM属性設定
widthをスタイルに設定したい人 →domの「幅」に「300px」をDOMスタイル設定
（案）
・初心者用命令「domの(属性名)に(val)をDOM設定」の仕様
・属性名は日本語またはhtml属性名（日本語の一部は和DOMスタイルで実装済み）
・属性名の日本語はなでしこv1の互換を持つ名称を優先する
・domの種類と属性名を見て、スタイル、属性、イベントのいいところにvalを設定する
・属性名に使えるもの
・高さ、高、H、幅、W など …DOMスタイル設定したことにする
・背景色、文字色、文字サイズ、文字書体 …DOMスタイル設定したことにする
・テキスト、ヒント …DOM属性設定する
・有効、可視 …値を反転してdisable、hiddenにDOM属性設定する
・親部品 …DOM子要素追加する
・domによって変換するhtml属性名を変更する
(dom種類)の属性名→html属性名
・キャンバスの幅 → widthにDOM属性設定
・ボタンの幅 → 幅にDOMスタイル設定
・セレクトボックスの行数 → size
・テキストエリアの行数 → rows
・チェックボックスの値 → checked
キャンバスの幅は属性に設定するのにボタンの幅はスタイルに設定とか、ちょっと受け入れがたいと思います。
なでしこ3が「いい感じに設定してくれる」のが望まれているはず。
例）dom設定でいろいろできるようにした
https://n3s.nadesi.com/id.php?747
・簡易エディタの初期宣言の例？
母艦＝「nako3result_div_1」をDOM検索
母艦にデフォルト親部品設定
母艦の「HTML」に空をDOM設定
・最後に
javascriptに慣れた人にとって分かりにくくなるかどうかはたぶん重要ではない
TKIさま、貴重なご意見、ありがとうございます！
以下のGitHubのページにて検討したいと思います。
https://github.com/kujirahand/nadesiko3/issues/1082
以下のGitHubのページにて検討したいと思います。
https://github.com/kujirahand/nadesiko3/issues/1082
もそっと使いやすくなると良いなぁと漠然と思っているようなことが、色々まとめられててしゅごい☆
とゆう単なる共感と雑感と思いつきなので、こっちに書きます。
HTML5とCSS3の知識があること前提という感じなので、そもそもドシロウトにはツラい部分があります（1から勉強しました…）
しかも、当初マニュアルが全然無かったので命令を見ても何するもんだか分からず、今度はJavascriptを調べて、こ、コレのことか…！ みたいな、なかなかの艱難辛苦でしたｗ
●DOM部品の作成について
DOM要素作成しただけではダメで、それをさらに親部品に子要素追加しなければならないとか、なかなか分からないですよね＞＜
作成→追加を一括で出来る簡便な命令はあっても良いかなとは思うのですが、GUIの感覚で作成したい物って、結構inputタグのもの多いと思うんですよ。
カラーピッカーもレンジもファイル選択も、みんなDOM要素作成するのは「input」で、その「type」属性に「color」とか「file」とかDOM属性設定しなきゃなので、どうしたもんかなという。
それは後から別途設定しましょうでは、あまり簡便な感じしませんよね。
個人的には、もっと色々な部品が標準でなでしこの命令として作成出来ると良いと思います。（ｖ１のGUIのように）
私自身は、自分が使いたそうな物を一通り関数にして用意したのでなんかそれで満足してましたが、現状だと、初心者的にはHTMLでどんな物が作れるか？ からまず調べなきゃならないので。
素人は、カンタンにカッコ良さげな物が作りたい（タブン）
ｖ１の良さの一つに、ドシロウトでもGUIを備えた本物っぽいWindowsアプリケーションが日本語でカンタンに作れる！ というのがあったと思います。ｖ３も、日本語で簡単にブラウザアプリが作れる！ というのが大きな柱の一つだと思います。
やはり、なでしこの命令で色々作れると、楽しげな雰囲気じゃないですか？
私的にあると良さげと思う部品とか。
https://n3s.nadesi.com/index.php?page=751&action=show
自前のHTMLでのコトを考えると、canvasやdivも作成出来ると良き？
どうでしょう？
●DOM和スタイル
DOM属性設定、取得でも使えるようにならないでしょうか。
スタイルでは幅、高さでよくて、属性ではwidth,heightっていうのはツラい(´Д⊂ヽ
そして、「value」とかも「価」で取得したい・・・
「DOM和スタイル」は「スタイル」だから、別途「DOM和属性」とか作らなきゃなのかなあ。
英語がムリすぎる素人ユーザー的には、とにかく色々日本語表記で出来ると助かります。だってなでしこだもの☆
それはそうと、TKIさんの貯蔵庫の747で知りました。DOM和スタイルにはユーザーが追記できる・・・っ！
そうだよね、普通に辞書型変数ですよね・・・
「左」はあるのに「上」が無い・・・とかぼやいてたワタシって何・・・orz
●なでしこが良きように取得設定してくれる命令
一つの命令でもろもろ出来ると便利ですよね☆
その場合は是非、canvasの幅と高さの設定は、属性とスタイルと両方を、一回で同じ価にセットしてくれるようになるとうれしいような。
属性はcanvasそのもののサイズで、スタイルは画面表示上のサイズで、それぞれ用途が異なるモノですが、よく分かんないであっちこっち使うと色々変なことになるので、初心者命令的には揃えておくのが無難と思います。
幅と高さの取得全般ですが、DOMスタイル取得では、スタイル(CSS)で明示的に設定してない物に関しては（デフォルト値や、親部品からの継承）空になっちゃうんですよね。
DOMスタイル取得なら、そうゆう説明で「なるほど、しょうがないね！」ってなる（？）と思いますが、DOM取得にまとまっていると、見えているものがサイズ０になるとか理解出来ないと思います。スタイルで設定していないからとか言われても容認しがたい。
Javascriptのサイズ取得するやつ、色々あってよく分かんないんですが、なんか「offsetWidth/offsetHeight」とかで良きように全部取得出来るようにならないでしょうか。
しかし、色々知恵が付いちゃったせいでしょうか、「value」があるのに「checked」を「価」で取得するとかは、うーん・・・と思っちゃいます。
普通に「チェック」をオンに・・・とかで良くないですか？
初心者と言えど、なでしこのマニュアルだけじゃムリーってなったら色々検索したりするだろうし、その時却ってコンランを招くことになるんじゃないかとゆう懸念も・・・
そういう意味では、Javascriptはともかく、HTMLやCSSの名称からは、あまりかけ離れない方がいいと思うんですよね。
・・・と、色々思いつきを書いてみました☆
とゆう単なる共感と雑感と思いつきなので、こっちに書きます。
HTML5とCSS3の知識があること前提という感じなので、そもそもドシロウトにはツラい部分があります（1から勉強しました…）
しかも、当初マニュアルが全然無かったので命令を見ても何するもんだか分からず、今度はJavascriptを調べて、こ、コレのことか…！ みたいな、なかなかの艱難辛苦でしたｗ
●DOM部品の作成について
DOM要素作成しただけではダメで、それをさらに親部品に子要素追加しなければならないとか、なかなか分からないですよね＞＜
作成→追加を一括で出来る簡便な命令はあっても良いかなとは思うのですが、GUIの感覚で作成したい物って、結構inputタグのもの多いと思うんですよ。
カラーピッカーもレンジもファイル選択も、みんなDOM要素作成するのは「input」で、その「type」属性に「color」とか「file」とかDOM属性設定しなきゃなので、どうしたもんかなという。
それは後から別途設定しましょうでは、あまり簡便な感じしませんよね。
個人的には、もっと色々な部品が標準でなでしこの命令として作成出来ると良いと思います。（ｖ１のGUIのように）
私自身は、自分が使いたそうな物を一通り関数にして用意したのでなんかそれで満足してましたが、現状だと、初心者的にはHTMLでどんな物が作れるか？ からまず調べなきゃならないので。
素人は、カンタンにカッコ良さげな物が作りたい（タブン）
ｖ１の良さの一つに、ドシロウトでもGUIを備えた本物っぽいWindowsアプリケーションが日本語でカンタンに作れる！ というのがあったと思います。ｖ３も、日本語で簡単にブラウザアプリが作れる！ というのが大きな柱の一つだと思います。
やはり、なでしこの命令で色々作れると、楽しげな雰囲気じゃないですか？
私的にあると良さげと思う部品とか。
https://n3s.nadesi.com/index.php?page=751&action=show
自前のHTMLでのコトを考えると、canvasやdivも作成出来ると良き？
どうでしょう？
●DOM和スタイル
DOM属性設定、取得でも使えるようにならないでしょうか。
スタイルでは幅、高さでよくて、属性ではwidth,heightっていうのはツラい(´Д⊂ヽ
そして、「value」とかも「価」で取得したい・・・
「DOM和スタイル」は「スタイル」だから、別途「DOM和属性」とか作らなきゃなのかなあ。
英語がムリすぎる素人ユーザー的には、とにかく色々日本語表記で出来ると助かります。だってなでしこだもの☆
それはそうと、TKIさんの貯蔵庫の747で知りました。DOM和スタイルにはユーザーが追記できる・・・っ！
そうだよね、普通に辞書型変数ですよね・・・
「左」はあるのに「上」が無い・・・とかぼやいてたワタシって何・・・orz
●なでしこが良きように取得設定してくれる命令
一つの命令でもろもろ出来ると便利ですよね☆
その場合は是非、canvasの幅と高さの設定は、属性とスタイルと両方を、一回で同じ価にセットしてくれるようになるとうれしいような。
属性はcanvasそのもののサイズで、スタイルは画面表示上のサイズで、それぞれ用途が異なるモノですが、よく分かんないであっちこっち使うと色々変なことになるので、初心者命令的には揃えておくのが無難と思います。
幅と高さの取得全般ですが、DOMスタイル取得では、スタイル(CSS)で明示的に設定してない物に関しては（デフォルト値や、親部品からの継承）空になっちゃうんですよね。
DOMスタイル取得なら、そうゆう説明で「なるほど、しょうがないね！」ってなる（？）と思いますが、DOM取得にまとまっていると、見えているものがサイズ０になるとか理解出来ないと思います。スタイルで設定していないからとか言われても容認しがたい。
Javascriptのサイズ取得するやつ、色々あってよく分かんないんですが、なんか「offsetWidth/offsetHeight」とかで良きように全部取得出来るようにならないでしょうか。
しかし、色々知恵が付いちゃったせいでしょうか、「value」があるのに「checked」を「価」で取得するとかは、うーん・・・と思っちゃいます。
普通に「チェック」をオンに・・・とかで良くないですか？
初心者と言えど、なでしこのマニュアルだけじゃムリーってなったら色々検索したりするだろうし、その時却ってコンランを招くことになるんじゃないかとゆう懸念も・・・
そういう意味では、Javascriptはともかく、HTMLやCSSの名称からは、あまりかけ離れない方がいいと思うんですよね。
・・・と、色々思いつきを書いてみました☆