表作成

7月16日水曜日天気は⛅️みなさんこんにちは♪中学生・高校生のための進路準備型放課後等デイサービスサークル・ワン小山です！PCトレーニングでは、Excelを使い「グラフ作成」を行いました今回は、表を作成した後、表の中にグラフを挿入するというトレーニングですなかなか高度なトレーニングでしたが、集中して取り組んでいました本日の振り返りの発表の際に、「表の中にグラフを入れられる事を初めて知って、難しそうだなぁと思ったけど、やってみたらできて楽しかった！」という感想を述べている利

自治会、秋の清掃出欠&集金表を作りましたこちらなんと、全てスマートフォンで作りました印刷指示も。パソコンを出さずとも寝ながら作成。大助かりです！来年度以降も使えるように、原本も作成→印刷。これくらい前の人がやってくれていたら、私も楽だったな～(どこかのタイミングで返ってくるでしょう。)次回はこんな感じ。受けたい講座日と重なっていますこの日も濃い1日になりそうです領収書を手作りしようと思ったらこんなに可愛いものが売っていました！フロンティア領収書Quu音楽隊

先頭列の追加する機能について コード更新は2024年3月以来で、ほぼ1年ぶりです。複雑な表を作る時は最初から表の構成を考えて作るので、先頭列を後から追加できない事を甘く考えていました。実際にその必要に迫られ、これは対応すべき問題だと考えを改めました。「BlogTable⭐」の「Trim機能」は、表の任意の場所に行や列を追加できます。既にデータを書き込んだ表に、行・列の追加や削除が行えるのは大変に便利です。ただしこれまでは、最上行と左端列の追加が出来ませんでした。ネット

「BlogTable⭐」のサブツール群についてこのページのツール群は「BlogTable⭐」の機能を補佐するツールです。それぞれの機能が必要な際にのみ「ON」にして利用する「非常駐型」のツールです。このページで纏めて紹介しますが、「GitHub」には別個のツールとして登録しています。「BlogTable⭐Converter」 「BlogTable⭐Converter」は、以下の場合に使用します。◎「BlogTable⭐ver.4.0」以

9月9日月曜日天気は☀️みなさんこんにちは中学生・高校生のための進路準備型放課後等デイサービスサークル・ワン小山です！前半のトレーニングは、PC「表作成」ですExcel（spreadsheet）を使い作成していきますねらいは、指示されたものを今まで覚えてきたパソコンスキルで作り上げて行く事算数・数学要素のある問題を使用する事で、気づきを得ることです１日って、86,400秒なんだ✨長いのか、短いのかわからない…後半のトレーニングは、社会性「パズル」です馴染み深い日本地

4月10日水曜日天気は☀️みなさんこんにちは進路準備型放課後等デイサービスサークル・ワン小山です！最初のトレーニングは、PCで表作成を行いました今回は、⚪︎オートフィル⚪︎罫線⚪︎セルの色付け⚪︎セルの大きさをかえるなどを行いましたねらいは、表作成のやり方を学び、進学や就職をした時に活かせるようにする事です。利用者さん達は、特にオートフィルにびっくりしていました楽しく、良い表がつくれました次に社会性で、パーソナルスペースについて行いましたパーソナルスペースについて

2重枠線の表示コードの修正2重枠線は余り見かけなくなりましたが、HTMLの「table要素」にはおそらく最初から、このデザインは備わっていたと思います。2重枠線の枠線を重ねたものがシンプルな枠線という形でデザインを指定する決まりです。「ver.4.0」以降の「BlogTable⭐」では、「table要素」に付帯した「styleタグ」を通じて、2重枠線のデザインを表に適用しています。下は、「BlogTable⭐」で生成したその例です。

「table要素」はそもそも普通じゃない「BlogTable⭐」を作って来て何度も感じさせられた事は、「table要素」は普通じゃないという事です。この記事を書きながら調べていて、下の記事を見つけました。いちいち頷いてしまいました。ページは主内容は表題の通りですが、その中に「table要素」に関しても触れられています。レスポンシブデザインで要素がはみ出す原因はwidth指定せっかくレスポンシブデザインを選んでも要素がはみ出しては台無しです。これは見た目や使い勝手の問題も大き

非「Fix」モードの表幅更新機能の問題点「ver.5.1」の更新で想定外の問題が出ました。ある表で非「Fix」モードの表幅調整を行った後、新しく「表作成」で表幅を指定しようとすると、それまで扱っていた表の表幅の調整になり、また表コピーの雛形が適用されてしまうというバグです。これは表幅調整のコードがメモリー上で生きていて、別の「表作成」の操作に移っても動作する状態です。この種の失敗は時々経験するもので、関数の対象要素が正しく切り変わらず、操作が想定外の対象に適用されてしまうコーディング

3月6日水曜日天気は☔️/☁️みなさんこんにちは進路準備型放課後等デイサービスサークル・ワン小山です今日は、もうすぐお誕生日の利用者さんに利用者みんなから歌のプレゼントと職員からカードのプレゼントがありました🎂素敵な年になって欲しいですね✨最近サークル・ワン小山では、お手玉を使ったビジョントレーニングを行なっています🤹お手玉を目で追うことで、楽しいビジョントレーニングを行なうことができます👀最初のトレーニングは、PCでの「表作成」です💻Excelを使用して、1番かわいいと思

リアルタイムの変更か「表更新」での変更か「BlogTable⭐」のインターフェイスは、「リアルタイム」で調整できる機能を導入し始めて以降、「表更新」が必要な設定と不要な設定が混在しています。メインパネルの全設定の変更適用には「表更新」の操作が必要です。一方で、「ブルー背景」の操作パネルが開く「TRIM機能」「セル幅の設定機能」「セル結合機能」などは、「表更新」の操作をせずに直接設定を適用できます。これはパネルのデザインから、「直接」の変更適用ができる事を理解し易い状態でした。

「Import」の制作で必要を感じた機能「Import」のテストで、「元表と生成した表のサイズが大きく異なる場合」が生じ得る事に気付きました。そこから、「セル内で自動改行されないサイズ」という、表に記入されたデータに従った「表幅」を得る機能が必要と考えました。データを記入した「表」は本来は「自動改行されない幅」を採るのですが、「BlogTable⭐」はデータを記入し易い様に最初に表幅を指定して、セル幅をある程度確保する仕様です。この方式のため、「セル内で自動改行されないサイズ」は

「Fix」モードにバグあり「列幅」を適確に指定・調節する「Fix」モードは、表のレイアウトに拘るユーザーにとって有効な機能と思いますが、バグを見落としていました。これは、前ページで触れた表の幅設定の問題の対処で、動作をチェックしていて気付きました。本文幅を超えた表幅の表示が本文幅になる 下は、「BlogTable⭐」ver.4.8で「Fix」モードにして、任意のセル幅を拡大する様子ですが、表幅が大きくなり本文幅を超えると、実際の表幅は問題なく拡張しますが、メニュー左端の「表

「TSV形式」のファイル形式に対応しましたこれまでの「BlogTable⭐Import」は、「CSV形式」のデータのみに対応していましたが、「TSV形式」のデータも扱える様に拡張しました。「TSV形式」は「Tab」をセルの区切りとしたデータ形式です。下は、Googleの「スプレッドシート」上で作った表の例ですが、2列と4列の最上行でセル内の改行をしています。このシートの仕様では、セル内の改行は「Alt+Enter」で出来ますが、アプリケーションによって改行の仕方は一律では無いと思

BlogTable⭐Import」は「BlogTable⭐」のサブツールです。他の表アプリケーションから出力した「CSV形式」または「TSV形式」の表データから、編集画面でブログ記事上に掲載する表を生成する事ができます。◎「BlogTable⭐」の起動ショートカットは「Ctrl+F1」です。◎「BlogTable⭐Import」の起動ショートカットは「Ctrl+F3」です。両方のツールは「Tampermonkey」上で同時に「ON」にして使用できますが、操作パネル

空表の準備を不要にしました「BlogTable⭐Import」の「ver.0.1」は、目的をとりあえず達成する事で終始したので、表生成は「BlogTable⭐」に任せています。しかし「Import」に表生成のコードを実装するのは簡単で、空表の用意は不要だと気付きました。大幅にコード整理をした「ver.0.2」は、「CSV」データから表をダイレクトに生成する仕様になっています。「BlogTable⭐Import」の操作 ●「Ctrl+F3」のショートカ

「CSVファイル」の表データを読込む別種のプログラムの間での「表」データの受け渡しは、「CSV」ファイルを使うのが簡単で、行ごとにカンマでデータを区切ったテキストファイルの形式ですから、ツール間の互換が採り易いのは当然です。Excel等のアプリケーションは、表へのデータ入力に関しても便利なアシストがあり、迅速に行えます。Excelで書き込んだデータを「CSV」ファイルで出力し、それを「BlogTable⭐」側で読み込めば、セル数が多い表の入力が快適に出来ます。もちろん、既成のEx

キャレット操作は難しい これまでにも、何度かキャレット操作に関するJavaScriptコードを使ったり作ったりして来ましたが、今回は上手く出来ずにボツにしました。「table要素」のどこかのセルにキャレットを入れた時、「⇨」「⇦」のキー操作では、内部の文字列を辿る形で「キャレット」が移動します。これは「編集画面」に書いた一般のテキスト（文面）での移動と全く同じです。「⇧」「⇩」のキー操作も、通常の「編集画面」（PC版）と全く同様にキャレットが移動します。下の「表」は敢えて長めの文

「セル配色」のコードを修正セルの配色指定は、おそらくこのツールで一番必要とされる機能でしょう。任意の配色を指定する機能は、「BlogTable⭐」でも使用しているコードを流用しています。ただ、「BlogTable⭐」とは異なるタイミングで、この部分のコードで設定した配色をセルに適用するので、以前になかった問題が生じていました。これは、Chromeでは問題にならずに看過していたのですが、Firefoxではブラウザの動作が少し異なり、セルの配色設定を操作すると、セル内部のテキスト

「BlogTable⭐CellDesign」は、特定のセルやそれを含む行全部のセルを修飾するツールです。「BlogTable⭐」は、最上行・左端行・表全体の背景色を指定できますが、個別のセルの背景色は指定できません。また、特定セルの個別の細かな設定もできません。このデザイン上の不足を補うのが「BlogTable⭐CellDesign」です。 「BlogTable⭐CellDesign」操作マニュアルver.0.3以降に対応2024.

「style属性」をできるだけシンプルに「ver.0.1」の「BlogTable⭐CellDesign」は、考えていた機能を具体化した段階なので、テストで色々と改良の余地が見えて来ました。一番の問題は、6種類の設定プロパティで、変更をしないプロパティを含めて、全て画一的に「style属性」として指定してしまう仕様です。セル選択時にそのプロパティを取得しますが、これは表に添付した「styleタグ」で指定されたプロパティや、ブラウザのデフォルトのプロパティを拾って取得しています。

「BlogTable⭐」を補佐するツール表作成ツールが要求される基本的な部分は、これまでの「BlogTable⭐」で満たされたと思います。表の印刷原稿としてなら、偶数行の背景色を変えるといった芸当も必要でしょうが、ブログ上では余り必要性は感じません。で、後は重箱の隅をつつくような機能を付け足したいと思います。このページで紹介する「BlogTable⭐CellDesign」のコードは「BlogTable⭐」に併合できない事もありませんが、「BlogTable⭐」

「列・行」の変更➔「表更新」をした場合「セル結合」した表に「TRIM機能」の操作をした場合に、レイアウトが崩れる問題は、前ページの「ver4.7」で解決しました。色々な条件でテストをしても、全く表が崩れなくなったので、ほっとしています。最後に残ったのは「列・行」を減す側に変更した「表更新」の場合の問題です。これは、表面上は問題がない様に見えますが、セル結合の「colspan」「rowspan」の値と実際の結合個数との差が生じて、再びその表の「表更新」をした場合に、想定外の振舞いを生じ

「TRIM機能」との整合は単純ではないメインパネルの「列・行」の指定変更をして「表更新」を行えば、表の右端の列・下端の行を任意の数だけ増減できます。しかし、既にデータを書き込んだ表の任意の場所に「列・行」を追加・削除するには「TRIM機能」が必要です。行数の多い表に1行を割り込ませるのに、書き込んだデータを全て1行ずつ移動するのは手間と時間が必要ですから、「TRIM機能」の有難さが判ります。「セル結合」の機能は、表内に複雑な連結部分を作れます。下は「BlogTable⭐」で作っ

「TRIM機能」との突合せ「thead要素」を列幅のコントロール用に導入しましたが、「TRIM機能」が大変に扱い難くなっているのに後で気付きました。使えないわけではないのですが、列の追加・削除が大変にしずらい状態です。これは、「thead要素」を追加で各セルの位置が1行ズレたためです。下は、「thead」の追加前・追加後の違いです。「TRIM機能」の列・行を追加・削除を指定するセルは、以前はブルーのセルでした。しかしその位置が上へ1行分ズレて、赤線枠のセルが「TRIM

「thead」要素の導入これまでの「BlogTable⭐」は、生成する「table要素」の「thead要素」を省略して来ました。HTMLの規則では省略が可能で必要が無かったためですが、前ページで書いた様に、最上行でセル結合をすると「Fix」モードの列幅調整が出来なくなる問題を解決するために、「thead要素」を利用する事にしました。下は、「ver.4.5」以降に生成する「table要素」のHTML構成で、「thead要素」を追加しています。「thead要素」は、本来

最上行の「セル結合」と「セル幅の指定機能」「セル結合」の機能は順調に仕上がりましたが、懸念していた「セル幅の指定機能」との相性は良くありません。HTMLの「table要素」に「table-layout:fixed」を設定すると、最初の行のセル幅の指定で、列幅を任意に調節できる様になります。（2行目以降の幅指定は無効です）「セル幅の指定機能」はこの仕様に準じて、最上行のセルに「width値のstyle属性」を設定します。一方、「セル結合」は結合開始セルの幅を、被結合セルを含む幅

縦方向のセル結合横方向のセル結合が出来たのですが、縦方向のセル結合を採り入れると、予想の通り縦横の結合セルが「交差」した場合の問題が出て来ました。テストして見たのですが、十字に交差した結合セルの設定自体は可能ですが、片方のセルの内容が他方の上に表示されたりして、実用上は無意味でした。そこからやはり、「セル結合は他の結合セルを侵さない」という仕様は、プログラムを組む上で妥当と判断しました。前バージョンでは、結合セルは「横方向の結合」が前提でした。そのため、他の結合セルとの衝突

セル結合表のデザインで、一部のセルを繋いで1つのセルにするレイアウトを「セル結合」と言います。下がその例です。良く見かけるレイアウトですが、ウェブ上の「table要素」もこのデザインが可能です。Excelのセル結合は、結合したセルの左端のデータが残り、他のセルのデータは無くなります。しかし「table要素」の場合は、他のセルを「非表示」で隠す事が出来るので、セル結合のやり直しでセルに書き込んだデータを復活できます。開発の経過 「セル結合」は欲しかった機能です