JAVASCRIPT

こんばんは！もりちゃんラーメンです。生成A.I.界隈での話ですが、現在、Googleなどが中心となって「WebBundles」という新しい規格が策定されています。これは、HTMLや画像、3DモデルなどWebサイトを構成するすべてのファイルを「1つのファイル（.wbn）」にパッケージ化し、ブラウザで直接読み込めるようにする技術の様です。まだVRブラウザでのサポートは進んでいませんが、将来的にこれが普及すれば、まさに「1つのパッケージファイルを読み込ませてオフライン再生」が

LearnwhatJavaScriptmodulesare:whatisCommonJS,AMD,System.js,require.js,ES2015,ECMAScript6andWebpack.AsJavaScriptbecomesmorecommonlyused,namespaces(namespaceswhereourapplication'sidentifierscoexist)anddependenciesbecomemo

「操作パネル」のデザイン更新「Total3months」の「操作パネル」はシンプルですが、初期の構想から少しずつ変化して来ました。当初は「操作パネル」が「今日」の「一覧表」の画面で表示される事を考えていなかったので、下の様なパネルが重なった状態になっていました。「▶」の表示が下になっていますが、これはツール「Awake」の「独自集計」のアクセス状態を表示するパネルです。ページ全体をスクロールすると、このパネルはフロート表示になります。従って、どちらのパネ

「自動スキャン」を導入過去3ヵ月分のデータを取り込む操作は、これまで手作業で行う仕様でしたが、これを自動化しました。当初は下手な自動化で複雑になるのを懸念しましたが、Ajaxで「一覧表」を差し替えるページ構成なので、一度起動した「Total3months」は「アクセス数が多い記事」の各画面内ではリセットされません。これはJavaScriptツールにとっては好都合で、おかげで3ヵ月分のデータ収集は、簡単なコードで実現できました。ただし、「一覧表」を切換えてから実際にデータが読み込まれ

「検索エンジン経由のアクセスが多い記事」の自動ロードの更新 「Total3months」の「自動ロード」機能が「検索エンジン経由のアクセスが多い記事」でも機能するので、「Total3months」側で抑止をしました。同時に「Awake」のこの画面の「一覧表」の自動ロード機能を更新しました。改善の内容「検索エンジン経由のアクセスが多い記事」の画面は、「管理トップ」のリンクから入れます。下のリンクをクリックすると、あなたのブログのこの画面が開きます。少し前は「検索流入の多い記

「補助パネル」表示を導入「ver.0.3」で、3ヵ月の集計データを専用の「リストパネル」に表示するところまで来ました。この「リストパネル」を、デフォルトの「7日間」「30日間」などのデータと見比べていて、デフォルトの「一覧表」に集計データを表示すれば、データ利用の方法が出て来るかも知れないと思い着きました。これは試行で、「そんな表示は意味ないじゃん」という事になるかも知れませんが、データの見方の開拓は、やってみないと分からないですから。上図の様に、本来の「一覧表」の各行を

「リストパネル」をソートして表示する各月のデータを採取する際に、「アクセス数が多い記事」の「一覧表」を上から順に採取するので、おおむねアクセス数の多い記事の順にデータ収集用の配列「total」が出来上がります。しかし、3ヵ月の集計のアクセス数の順位は、個別の各月と異なります。そこで、3ヵ月の集計を「リストパネル」に表示する前に、配列「total」をアクセス数の順にソートしてからリスト表示する様に改めました。「Total3months」ver.0.3124行～

「月の選択」ボタンを改善「ver.0.1」で、実際に集計が可能になりましたが、「月の選択」ボタンのキャプションは単なる背番号で、どの月を意味するのか判らないという不便に気付きました。下の例は「1月」を取り込む場合ですが、押すボタンは「先々月」の「3」でなければならないのですが、「1」を押す間違いを誘います。そこで、下部の選択ボックスの「月表示」を調べ、「月の選択」ボタンのキャプションに表示する様にしました。同時に、ボタンの並べ方を変更して、右側の方が最近となる様に変更しま

「Total3months」のプロトタイプここまで作って来たパーツを組み合わせて、集計ツール「Total3months」のプロトタイプを完成させました。未だ、突っ込みどころが沢山あるテスト段階ですが、一応は使えるのでGitHubにアップロードします。集計の表示ボタン月ごとのデータを集める操作は、ユーザーの手作業で、この自動化は後に考えることにします。一方で採取するデータは、「もっと見る」ボタンを押すと50件から100件に増えますが、この件数は「もっと見る」を自動で

集計したデータを表示する配列データを「リストパネル」に表示する方法は、通常のパネル表示するのと同じです。ただし、そのパネルが表示する「リスト」は「<ul>」「<li>」の要素で、「リスト」は100行程度になるので、全体を「div」要素でラップしてスクロール表示できる様にします。従って、リストパネルのHtml構成は下の様になります。<div><ul><list>A</list><list>B</list><list>C</list><list>D</list>

重複を整理しながらデータを追加する3個の月のデータを配列に追加して行くと、同じ記事のデータが重複するので、それを整理する必要があります。2回目の読み込みからは、全体の配列の中に同じ「記事ID」の子要素がある場合は、その子要素の「アクセス数」を前回と今回の合計に更新します。この場合は子要素の数は増えません。もし同じ「記事ID」の子要素がない場合は、全体の配列に新しい子要素として追加します。この操作を繰り返せば、全体の配列「total」内で「記事ID」の重複がなくなり、同時に「アク

簡単なインターフェイスツール名は「Total3months」にしました。最初は「Access3months」でしたが、ツール名一覧で「A」で始まるツールが多すぎるので、分散をさせる目的です。先ず最初に作ったのは、簡単なインターフェイスです。3個のボタンを用意し、それぞれ「今月」「先月」「先々月」のデータを配列に取り込む処理を実行します。下は、このスイッチパネルです。（そっけないです）「0」は「今月」、「1」は「先月」、「2」は「先々月」のデータを取り込みます。

アクセス解析のデータについてアメーバの「アクセス解析」は、一般のユーザーが使うには充分な機能を備えていると思います。ただ、データの蓄積期間は3ヵ月間を上限にしていて、それより昔のデータは見る事が出来ません。まあ、それで充分なユーザーは多いと思いますが。ブログのアクセス数の成長についてブログのアクセスを稼ぐ記事というのがあり、長くブログを続けていると、そんな記事が少しずつ増えます。その種の記事は、数ヵ月～数年と日にちが経っても、衰える事なくアクセスを稼ぎますが、さすがに数年経

「素敵な画像や文章を並べたのに、なんだかサイトが物足りない……」「スマホで見ると、メニューが長すぎて読みづらい！」そんな悩みはありませんか？現代のWebサイトでは、ただ情報を置くだけでなく、読者の操作に合わせて「心地よく動く」ことが、使いやすさ（UX）を決める重要なカギになります。今日は、あなたのサイトを「おもてなし上手」に変える、JavaScriptを使った動きの取り入れ方をご紹介します。1.「出す」と「隠す」をスマートに（ハンバーガーメニュー）ス

「JavaScript」ツールでのCookie利用JavaScriptで制作されたツールは、基本的にそのツールが動作する範囲が指定されています。指定した範囲以外で動作することは通常は無意味で、場合によっては無関係な場所で問題を生じるからです。更に、ツールの設定（動作の設定など）を記録して、その範囲（ページなど）を開いた時に、記録を呼び出して設定を再現できると、ツールはとても機能的に使えます。この「記録」に使う機能が「Cookie」（クッキー）です。この記録の実体は、ブラウザが固

リブログカードが生成されない問題サイトの各種設定、スクリプトツールの設定などが「Cookie」に記録されているので、気楽に「Cookie」の削除をしたくありません。「Cookie」削除で決定的に困った事態に陥るということはなくても、最後の手段くらいに考えておくべきでしょう。で、前ページで書いた「PopupReblog」というツールで対策をしていたのが、いつの間にか対策が無効になっていました。原因は「リブログカード」が生成されない場合に、アメーバのシステムが表示する「エラー表示」が変更

アメーバの「リブログカード」は遷移型のリンク動作をします。記事上の「リブログカード」をクリックすると、閲覧している記事はリブログ先の記事に差し替えられるので、元の記事に戻るのに苦労する事があります。「PopupReblog」は、この不便を改善するツールです。このツールの常駐で、全ての「リブログカード」のリンク動作が変更されます。「PopupReblog」操作マニュアルver.1.2以降に対応2026.03.20更新「PopupReblog」の常駐「

元データのリストのスクリプト名によるソート「Tampermonkey」の「バックアップデータ」の登録ツールの「実行順」を、「ツール一覧表」に書き込むためのツールが「UserScriptListOrderWriter」です。このツールは、完全にこのブログの更新作業の目的のために作ったツールで、一般のユーザーには利用の途はありません。殆ど自分のための覚え書きの記事になりますが、類似の処理をユーザースクリプトで行う場合には、参考になるかも知れません。これまでの「ver.0.2」では、

「補助拡大機能」とは「AmbTVComfy」の「サブウインドウ表示」で、旧アスペクト（4:3）の動画の一部に、動画がウインドウ内に最大に拡大されない場合があります。これを改善するための機能が「補助拡大機能」です。詳しくは以下の説明を参照ください。「補助拡大機能」操作マニュアル/JavaScriptameblo.jp前ページで関連する事を書きましたが、旧アスペクトの動画は、AbemaTVサイトの扱いがコンテンツによって異なります。その結果「旧アスペクト」の動画でも、

AbemaTVは「4:3動画」の扱いが統一されていない先日の左サイドメニューの変更で、他のツールで問題が生じていないかをチェックしましたが、「AmbTVSlowView」のチェックで気になる事がありました。このツールは通常の動画表示でスクリーンショットを撮るのを前提にしていますが、旧アスペクト（4:3）の動画は、通常の再生画面では上下が切れます。「名探偵コナン」は「旧アスペクト」なので、下の様に上下が欠けてしまいます。これは、「」ボタンを押して「フルスクリー

今回はかなりかっこいいデザインの計算機を作ってみました。ボタン式の計算機も作れますが使い方が簡単なポップアップの計算機を作ってみました。誰でも使えるように簡単に作ってみたのでぜひ使ってみてください。<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><styleid="webmakerstyle">button{background:linear-gradient(135deg,#00ffea,#ff00e

「更新日付」の書換え機能について前回「ElementsPalette⭐」に追加した「更新日付」の書換え機能は、必要なユーザーは限定されると思います。しかし、記事中の「日付」のデータを更新する機能の雛形として利用する事もできるので、ユーザースクリプトを利用されるユーザーの参考になると思います。「更新日付」のクラス名「ElementsPalette⭐」を常駐して「Pause+Shift➔F9」のショートカットを押下すると、記事中に「update_date」のクラス名を付け

「バージョン」「更新日付」の書式を統一する「マニュアル」の更新の際は、「VersionDateUpdate⭐」を利用する事にしましたが、このブログには100件近くの「マニュアル」の記事があります。それらの記事上の「バージョン」「更新日付」を「VersionDateUpdate⭐」で更新するには、「バージョン」に「update_ver」、「更新日付」に「update_date」のクラス名が設定されている必要があります。このクラス名は未だ設定されていないので、今後の更新に備えて

左サイドメニューが変更されました「AmbTVComfy」で「サブウインドウ表示」にすると、これまでは左サイドメニューは非表示になりましたが、下図の様にサイドメニューの一部が非表示にならず、動画画面の左隅に残る様になりました。動画幅が圧迫されるので、本来は16:9のモニターにジャストフィットする動画画面の上下部分にも隙間が出来ています。左サイドメニューの項目は、「アカウント・設定」を先頭に移動し、「番組表」「マイリスト」の利用度の高い項目を上部に集めたレイアウトに変更されて

「バージョン」「更新日付」の書換え機能先日「ElementsPalette⭐」の機能に「更新日付の書換え機能」を追加しました。これは、一般ユーザーの利用が想定できると考えて追加したのですが、「バージョン」「更新日付」のセットを更新する処理は、余り一般ユーザーの利用を想定できません。また、コードが少し複雑になることもあり、「ElementsPalette⭐」に同梱するのはためらわれました。このページで紹介する「VersionDateUpdate⭐」は、以上の理由で専用ツー

また挫折しそうだ・・・そうだ、脳内リセットしよう。学習したをことを忘れてみよう。また１からやりなおせばいいじゃん！この猫と星を動かすところから始めよう。基本に返ろう。ChatGPTがまた勉強のお手伝いしてくれる。小学生でもできるって話のScratch。アラフィフのオバサンでもできるはず！ガンバレ自分！！

「修飾キー」とはツール制作に関わっていると、ショートカットキーをツールの起動に使う場合が多くなります。そのショートカットキーには、「Shift」「Ctrl」「Alt」キー等を使う場合が多いですが、これらは「修飾キー」（Modifierkeys）と呼ぶ様です。私は「機能キー」と思っていましたが、「機能キー」はファンクションキーの「F1～F12」を指す様です。「修飾キー」の特徴は、そのキーだけを押しても何も記入されないことでしょう。後に「Windows」キー（MacではComman

「更新日付の書換え機能」「ElementsPalette⭐」は、編集時に良く使う表示要素の書込みや、編集機能を纏めたツールです。前ページで制作した「更新日付」の書換え機能は、独立させるには簡単過ぎるコンパクトなコードなので、「ElementsPalette⭐」の機能のひとつに組み込むことにしました。この様な機能が必要なユーザーはとても限定されると思いますが、必要だったユーザーには便利だと思います。「更新日付」のクラス名「ElementsPalette⭐」の「Paus

日付けの書換えを自動化する記事の日付けは、アメーバブログのデフォルトの機能が受け持ちます。PC版の編集画面を使用しているユーザーはご存知の通りで、新規記事の投稿時刻（予定投稿時刻を含む）の設定に迷う事はないでしょう。また、以前に投稿した記事を書き直して、新しい現在の日付けの記事として投稿する事も、簡単にできますね。しかし私のブログの記事の中には、記事は投稿日付のままで、記事の内容だけ更新をする「マニュアルの記事」や「ツールの纏めページ」など、少し毛色の変わった記事があります。そ

新設のセクションの割り込み未だ多くの動画では展開されていませんが、「コレクション」という新セクションが作られています。動画書庫や動画プレーヤーの画面の下部には、従来から各種の動画サムネイルを表示する「お勧め枠」があり、それに追加されたセクションです。これは現在、「姫様"拷問"の時間です」の動画でのみ確認していますが、この動画を「サブウインドウ表示」すると、下の様に「コレクション」が動画画面に割り込んで表示されます。この「コレクション」の新設と同時に、従来の「お勧め枠」と「