javascript

 「TrustedHTML」下ではsvg画像が表示できない前ページに書いた様に、「TrustedHTML」の環境下では、JavaScriptのメソッドやプロパティで使えないものが出て来ます。それを避ければ、「div要素」「p要素」「span要素」「input要素」「img要素」などを、従来の通り対象のHTML上に生成する事はできます。ただ、比較的良く使う「svg画像」に関して調べると、これは要素生成ができるのですが、画像として表示されません。このページでは、この検証した事を纏めま

 「TrustedHTML」はXSS攻撃を防ぐ機能私が制作したスクリプトツールが、「TrustedHTML」によって無効化された最初の経験は「YouTubeShot」（スクリーンショットツール）です。「TrustedHTML」はChrome/Edgeで有効ですが、現時点でFirefoxは非対応の機能なので、Chromeでツールが使えなくなり、Firefoxでのみツールが使えるという状態になりました。「ユーザースクリプト」や「拡張機能」が使用するコードが、「TrustedHTM

 「YouTube」サイトでの「insertAdjacentHTML」の抑止「YouTubeShot」はYouTubeの動画のスクリーンショットを簡便に取得するためのツールです。このツールは「canvas」という要素を動画ページ上に生成してキャプチャを実行しますが、2024年秋以降に、YouTubeサイトでJavaScriptによる要素生成が制限され、「canvas要素」の生成が出来なくなっていました。「YouTubeShot」ver.0.4以前のコードでは、「insertAd

記事を投稿する前に整える「BRChecker+OutroStyle⭐」は、ブログ記事の文書整形をするツールです。地道な処理ですが、記事の体裁を統一し、他のスクリプトの操作を賦活したりと、私には無くてはならない機能です。◎記事の編集でどうしても「<br>」タグによる改行が紛れ込みます。これをアメーバブログの標準の「<p>」タグによる改行に統一します。◎本文末の空白行を、自動的に指定した行数に調整します。◎記事の正確な文字数をカウント表示します。以上が主な機

pnpmの最初のメジャーリリース（v1）は2016年1月27日らしいけど知らんかった初めてpnpm初めてインストールして利用したが使い勝手よかったpnpmとは？npmとの違いとインストール方法pnpmとは何か？npmやyarnとの違いやインストール方法について詳しく解説します。mjeld.comJavaScriptJSONKey一覧取得-MjeldTechnologiesJavaScriptのJSONには型の概念が無いので引数に渡されたJSONが正しいかなどをキ

toLocaleStringを使えば日本時間で日時が表示できるようでした【保存版】JavaScriptでタイムゾーン変換！UTCとJST（日本時間）の変換方法JavaScriptでUTCとJST（日本標準時）の変換方法を徹底解説。コード例やISO形式への対応も紹介。mjeld.com`toISOString()`は常にUTCで出力される

1980年台のホビー用のコンピューターは作ることが大前提居なっていたので、コーディング環境を動かして制作する用途のものになっていました。このような制作をするものについては電気工作なども含まれるので、コンピューターの登場前だと■電子ブロック■マイコンの・ようなものが存在していました。電子ブロックはブロックを並べることで回路の仕組みを作って動作させるガジェットになりますが、マイコンは評価ボードのような仕組みのワンボードマイコンの状態の製品なので、出来ることが限定されていました

▼こちらの続きです。『やっと重い腰が上がった？AIと試してみたかったことをやってみることにした④』うぎゃ～気付いたら、最終更新日から10日も経ってたぁ如月、没頭してしまって、時間が分からなくなってたみたいです(ｫｨ『やっと重い腰が上がった？AIと…ameblo.jp7月末までに何とか～と思いやってましたが、間に合わず。1日に完成してアップロード。言い訳させてもらうと、間にスムダさんが突然の食欲低下。水分も取らずで、排尿も減ってしまい、病院を予約するもなかなか予約が

うぎゃ～気付いたら、最終更新日から10日も経ってたぁ如月、没頭してしまって、時間が分からなくなってたみたいです(ｫｨ『やっと重い腰が上がった？AIと試してみたかったことをやってみることにした③』▼過去記事はこちら！『やっと重い腰が上がった？AIと試してみたかったことをやってみることにした』イライラ期を抜けたかもしれない？如月です。情緒不安定ってヤ…ameblo.jp▲このブログで、普段如月がやってるコーディングとは？みたいな、コードを書いて作ったものを紹介してたん

返信コメントに即対応できる「コメントへ直行」機能他の方のブログでコメントをした場合、それに返信があると「HOME」の「お知らせ」に返信があった事が表示されますね。「コメントへ直行」機能は、そのお知らせをクリックするだけで、コメントをやり取りしているコメント欄に直行できるツールです。その他にも、「HOME」を中心とした日常的な行き来を便利にする機能が、幾つかありますが、詳しくは下の操作マニュアルを参照ください。操作マニュアル 「AidAmbH」のもう少し詳しい内容は、以下のマ

LocallyToolsがリリースされてしばらく経ちました。製品はブラウザの機能を利用してローカルでデータを処理していますが、ユーザーからは常に信頼性について疑問を持たれていました。「本当にファイルがアップロードされないのですか？」「データが漏洩しないことをどう証明できますか？」これらの疑問により、完全なオフライン機能の実装を決意しました。考え方はシンプルです：アプリがインターネットから切断された状態で正常に動作すれば、データがユーザーのデバイスから離れないことを確実に証明できます。

アメーバブログ専用の画像ビューアブログに掲載された画像を、もっと拡大して見たいと思う事はありませんか。それを可能にするのが「AmebloLightboxJS」です。ブログの掲載画像は、ユーザーが記事作成時に登録した画像から、一般には2段階の圧縮をされて記事上に表示されます。このツールは、最初の圧縮（画像サーバーから送信する際の圧縮）のみに抑えた画像を閲覧できます。また、その画像の一部を更に拡大表示する事ができ、その際の拡大率を最大400%まで指定できます。（Gz拡大）更に、

「検索流入が多い記事」のインターフェイスを改善「検索流入が多い記事」のリストから記事を選択すると「検索パフォーマンス・検索キーワード」の画面に遷移します。どの記事を問題にしたのかが、元のリスト上では判らなくなります。これは問題にならない事の方が多いと思いますが、元のリスト上で判断できた方がありがたいという場合もありそうです。選択した記事の詳細画面を別タブ表示 そこで、リストで記事を選択した場合に、別タブで「検索パフォーマンス・検索キーワード」の画面を表示する様に改めました。そ

複数日幅の「解析データ」を枠線幅で表示「検索流入が多い記事」と「検索パフォーマンス・検索キーワード」の画面を表示すると「解析データの範囲」が「30日」または「7日」に自動的に切り換わります。慣れもあるのですが、ユーザーが気付かない間に「データの範囲」が変わり、間違う可能性が増えています。前記事で、「アクセス解析トッへに戻る」のリンクを変更したので、かなり問題は改善したと思いますが、さらに「データの範囲」を明瞭にするため、「データ幅」の「選択ボックス」の枠線をデザインしました。

「検索流入が多い記事」へのリンクと「解析トップ」に戻るリンク「検索流入が多い記事」の画面（ページ）の位置付けは、最初から私には違和感があります。階層としてはこの画面の一覧リストが先で、各記事の詳細データは更に下だと思うのですが、デフォルトは最階層の各記事データに直行したがる設計です。これはユーザーの理解を妨げるので、私は階層通りに移行し易くする事にしました。下は「アクセス解析全体」の機能画面の階層と、その間の動線を示した図です。「アクセス数が多い記事」での変更 デフォ

有効な「検索流入が多い記事」のリスト「検索パフォーマンス・検索キーワード」の画面は、記事単位の解析の最終段階で利用しますが、そこに至る前に良く読まれる記事を適確に把握することも必要です。そのための機能が「検索流入が多い記事」のリストです。ただ、このリストのデフォルトは上位5件しか表示しません。実際は、上位100件までのデータがあるのですが、データアクセスの増大を懸念して5件にしているのでしょうか？しかし、ブログ全体の俯瞰的観測のためには、せめてウインドウの下端まではリスト

特定のお店の従業員のレジ点検、売上精算時に、予備釣り銭として常備している小銭や紙幣を数える業務、という毎日しなければならない地味な作業があります。で、そういうのは多分、お店によって専用のシステムがあって、コンピューターを使えば簡単にできるんですが、ストアコンピューターに入力する前に確認したくなったり、レジ点検をさっき済ませたけどまた確認したかったり、どにかくお金を数える作業は色々な場面で必要です。そのために、スマホの計算機でボチボチ計算したり、レシートの裏などで計算したり…。パソコンとエク

また毛色の違う記事を。HTMLコーディングというよりはJavaScriptの紹介になります。ちなみにアメブロではscriptタグの記述が禁止されており実装不可。試されたい方はホームページスペースを別所に持っていることが条件となります。また、こちらは2008年頃の古いプログラムです。当時のWEBサイト閲覧はPCが主流だったので、本プログラムもPC向けです。スマホの小さい画面では使いづらい。セキュリティ面でも不安が残るので、導入される方は自己責任でどうぞ。さて、書籍風のWEBサイトを作りたい

▼過去記事はこちら！『やっと重い腰が上がった？AIと試してみたかったことをやってみることにした』イライラ期を抜けたかもしれない？如月です。情緒不安定ってヤツをもろに体感しました。ご飯を食べるのがつらく？感じて、涙を流しながら食べ…目の前に祐茶が居てイ…ameblo.jp『やっと重い腰が上がった？AIと試してみたかったことをやってみることにした②』如月です。いろいろありましたが、落ち着いて参りました。『やっと重い腰が上がった？AIと試してみたかったことをやってみることにした』

記事を投稿する前に整える「BRChecker+OutroStyle⭐」は、ブログ記事の文書整形をするツールです。地道な処理ですが、価値を発揮する時があります。◎記事の編集でどうしても「<br>」タグによる改行が紛れ込みます。これをアメーバブログの標準の「<p>」タグによる改行に統一します。◎本文末の空白行を、自動的に指定した行数に調整します。◎記事の正確な文字数をカウント表示します。以上が主な機能ですが、このツールの「BRChecker」は、記事のタグ

デジタル化を目指す皆さん、おはようございます！デジタル化推進アカデミーの岩田敏彰です。７月末、８月末に山口大学の先生のお手伝いでMicro:bitを使ったプログラミングイベントをやることになりました。これまでESP32やArduinoを主に扱ってきていて、Micro:bitはほとんど触っていませんでしたが、触ってみると興味深いです。まず、開発環境がWebなので、インストールする必要がありません。そして、シミュレーション環境も整っているので事前にプログラムによる動作確認を画面上のM

前回はスプレットシートに直接メールアドレスを入力してアドレス管理を行う方法を紹介しました。主婦がプログラミングを学ぶ！miniさんのブログです。最近の記事は「【GAS初心者】スクリプトを触らずにメールアドレスを追加・削除する方法（画像あり）」です。ameblo.jp今回は管理者のみがメールアドレスを管理するのではなく、Googleフォームを使ってメール配信を希望する本人がメールアドレスを登録・削除する方法を紹介します。1.Googleフォームで

メール配信の設定でメールアドレスを追加・削除したい場合、毎回スクリプトファイルを開いて編集する必要があるため、手間がかかってしまいます。さらに、スクリプトには正しい書き方があるため、少しでも書き方を間違えると動作しないリスクがあるため確認も必要となります。そこで！GAS初心者でもできる、スクリプトを触らずにメールアドレスを追加・削除することができる方法を紹介します！1.スプレットシートでメールアドレスを管理そこでおすすめするのは、スプレッドシート

アメーバがログアウトする問題 セキュリティ上の配慮で、アメーバブログはユーザーのログイン状態を定期的にログアウトします。ログイン状態が一定期間を過ぎるとログアウト処理をするサイトが一般的ですが、今年の春頃は、アメブロは24時間ごとにログアウトを強制していた様で、当初は不満が多かったと思うのですが、皆さんの現在はどうでしょう。その対策として自動ログイン処理ツール「LoginAmeba」を制作して、私自身はずっと使用していますが、最近はその動作頻度が減った様な気がしていたので、現状を再観

狭幅ウインドウでLightboxが表示できない問題（再対策） 前ページでの対策、テストしていると早速に様に思い通りには機能しない事が発覚。少し不安だった点が、やはり原因でした。「ver.0.8」の対策コードで、ウインドウの狭幅を判定する「width_check()」が、想定の通りには機能せず、タイムライン上の画像を常にLightbox表示してしまいます。mainの「r-16xksha」のクラス名が付けられるタイミングが微妙で、不安だったのですが、予想以上にダメな結果になりました。

狭幅ウインドウでLightboxが表示できない問題 前ページで少し書きましたが、ウインドウ幅が720px以下になると、Lightboxが表示されない事が判りました。デフォルトの画像の暗転表示場所の「div要素」が、ウインドウ幅が720px以上の場合は、下のhtmlで❶の場所に生成されます。❶は、ポストの添付画像をクリックした時に生成され、画像の暗転表示が終わると消滅します。一方、ウインドウ幅が720px未満になると❶は消滅して、タイムライン等を表示す

こんにちは！徳島市国府町で開講中の国府プログラミングスクールソフトです今回の記事は受講生さんのコンテストについてと卒業生についての記事になります。コンテストの制作状況について去年から受講生さんには、プログラミングの基礎を学習した後はコンテストに応募するゲームなどを制作してもらっています制作のみになりますと、プログラミング学習が疎かになりますのでプログラミング検定の模擬やタイピング練習を２０分～３０分ぐらいしてから、残り時間はコンテストの流れで行っ

プログラミング言語をまたいでコードを書く際に注意が必要なのが、条件判定における「空のデータ構造」の扱い。JavaScriptでは、空の配列（[]）や空のオブジェクト（{}）はtrueと評価される。つまり、条件式で使うと「中身がなくても存在するもの」として扱われる。Javascriptでのif([]){console.log("空の配列はtrue");}if({}){console.log("空のオブジェクトもtrue");}は、どちらの論理も成立するので「

「詳細解析」ページの追加に対応昨日、「アクセス解析」に「リンク流入」等の情報を表示する新しいページが追加されました。スタッフブログで報告がありませんが、以下のページに簡単な説明を書いています。アクセス解析の新機能ページが追加されるらしい/アメブロ24時アクセス解析に新機能 これまで、アクセス解析の一番深い層は、「アクセス数が多い記事」のリストページでした。以下のリンクをクリックすると、その画面が開きます。…ameblo.jp実質的に2種類の「詳細解析」のページが出来まし

「アクセス解析」の扱いを快適にするこのブログをある程度続けていると、年間を通じて良くアクセスを拾う記事というのが出来てきます。そういう記事は、丁寧に見直したり微細な更新をしたりする事で、より多くのアクセスを得る入口になります。必要以上にアクセス数に拘泥するのではなく、楽しくブログのアクセス解析機能に親しむのが、一番と思います。「Awake」はアクセス解析に関する便利ツールです。アクセス解析の朝の更新を明瞭化する機能や、管理トップと解析ページの往復をし易くするリンク設置、管理トップの現在