ブログ記事10件
「srcset」対応のコードに不備がありました未だまだ完全ではない様で、この画像なら問題なく「Lightbox表示」ができるだろうと思ったのに、また「画像なし」の黒画面になるページがありました。なんでやねんと、HTMLを見ると以下の形でした。（不要部分を省略した上で、判り易い様に改行しています）<imgsrc="https://eximg.jp/uploads/98de08-300.png"srcset="https://eximg.jp/uploads/98d
「srcset」に対応近年のスマートフォン・タブレット等のディスプレイ多様化に対応して、画像のSRCをデバイスによって切り換える方法が一般化しました。サイトによって採り入れ方は異なりますが、1個の画像に複数のSRCを用意するのが基本です。これは「srcset」という属性で複数のSRCを設定して、閲覧環境に合わせて適当な解像度の画像を選択して表示する仕組みです。「UniLightboxJS」はこのタイプの画像に未対応で、「srcset」の書式によっては低解像度の画像を「Li
「インスタグラム」での画像参照 と取得私は「インスタグラム」を利用していないので、たまに何かの記事上のリンクを辿ってインスタグラム（PC版）のページを見る程度です。アカウントがないと、インスタグラムの他のページにもアクセスがし難い仕様ですが、これはアカウント稼ぎ？まあそれは良いとして、インスタグラムは動画や画像の投稿サイトで、投稿された画像をPC上で閲覧するユーザーも居られるでしょう。そこで調べると、ユーザーの投稿画面には、画像の取得を妨げる「ガード」が設けられ、画像のドラッグが出来
問題点の修正 「UniLightboxJS」の「起動」や「Lightbox内拡大」の操作を、従来の「Ctrl+右Click」から「Ctrl+左Click」に変更する事のリスクは、思っていた以上に影響がでました。「ver.0.9」で問題はほぼクリアしたつもりでしたが、Lightbox内からの画像のドラックアウトが出来ない問題が残っていました。やはり、ドラッグ操作の「Click」操作で「Lightbox」が閉じます。「Ctrl+」の状態でドラッグすれば良さそうですが、全くドラッグできま
問題点の修正 「ver.0.8」で「Lightbox」の起動方法を「Ctrl+左Click」に変更しましたが、これはコードの各所に問題を生じました。チェックした所では以下の問題がありました。◎「」ボタンを「左Click」してマニュアルを表示しようとすると「Lightbox」が閉じてしまう。◎「Lightbox内拡大」の状態で、ウインドウのスクロールバーをマウスで操作しようとすると、「Lightbox」が閉じてしまう。これらの問題は、Lightbox内での「Click」操
「AmebloLightboxJS」と「UniLightboxJS」 「アメーバブログ関連」のページでは「AmebloLightboxJS」を私は日常的に利用していますが、「UniLightboxJS」は一般的（平均的）なページを対象にしているため、アメーバサイトで扱える画像は限られます。やはりアメーバ専用ビューアにはかないません。そのため、「UniLightboxJS」はコンフリクトを避けるために「アメーバブログ関連」のページでは起動しない様にしています。（コード最初
「UniLightboxJS」は、ネット上の画像（img要素）をライトボックス表示するツールです。ネット上にはダウンロード抑止を施された画像が多く、このツールはなるべくその影響を受けない工夫をしています。とりわけ「ヤフーオークション」「メルカリ」などの商品画像の確認操作を意識してこのツールを制作しましたが、その他のサイトでもライトボックスが表示できる場合は多くあります。ライトボックス内の画像は、ドラッグアウトして画像ファイルとして利用が可能です。（著作権上の注意をする事は当然です）
アメーバブログ専用の画像ビューア スマホやデジタルカメラによる高品位・高精細な写真が、ブログ上には沢山掲載されています。写真やグラフィックに興味のある方は、掲載された画像をもっと詳しく見たいと思う場合があると思います。「AmebloLightboxJS」は、ブログ掲載画像をウインドウ内全体に拡大表示します。これを「Lightbox表示」と言いますが、その画像の一部を更に最大400%まで拡大表示できます。また、4コマ漫画などの閲覧に適した縦スクロールする拡大表示が可能です。
ブログページには圧縮した画像が表示される アメブロのブログ記事に画像を掲載すると、ブログ記事に表示された画像の画質が低くてがっかりする事は、多くの方が経験すると思います。ブログページで圧縮画像が表示される仕組み 下は、投稿した画像の扱われる様子を簡単に示した図です。以前にも同様の模式図を掲載しましたが、近年は圧縮が2段階で行われていて、少し図が異なります。「画像のアップロード」の操作で、アップロードした画像は圧縮されて画像サーバーに「圧縮❶」が保存されます。「
画像一覧ページのclass名変更に修復対応しました「画像一覧」ページのclass名変更が行われたのは、以下の記事によると12月13日あたりの様です。「ブログページ」「画像一覧」「動画一覧」の更新に対応/AmebloManagement各種ページのクラス名更新 何か理由があるのだと思いますが、ページのHtml構成は変わった様に見えないのですが、要素（表示パーツ）のclass名が書換えられる…∽ameblo.jpCSSスタイルやJavaScriptツールで、このページの要素
「background-image」に対応する ブラウザで色々なページを閲覧していると、殆どのページに「画像」があります。現在のウェブページでは、目の前の画像がどんな種類でどんなHTML構成で表示されているか、素では言い当てられないくらいです。これは、画像（グラフィック）に興味を持つ人には、百花繚乱で楽しい状況です。「UniLightboxJS」はそんなユーザーには便利なツールになり得ます。◎ページ上の任意の画像をライトボックスに拡大表示し、更に部分拡大が可能◎画像の元データに
右クリックメニューの「新しいタブで画像を開く」 ブラウザの「右クリックメニュー」（コンテキストメニュー）は、使い慣れると無くてはならない機能です。これはブラウザに組込まれたプログラムで、同条件で同様に右クリックしても、ブラウザによってメニューが違う事があります。「右クリックメニュー」は、右クリックした対象に合わせた適当で可能なメニューが表示される仕組みで、内容は対象によって変化します。例えばページ上の「画像」には「リンクが設定された画像」と「リンクがない画像」があり、それによって「右
การออกแบบป้ายไฟวงกลมสวยงามเป็นจุดเด่นที่ช่วยเพิ่มความน่าสนใจให้กับร้านของคุณไม่ว่าจะมีป้ายไฟจากร้านอื่นๆออกมาประชันกันอยู่บนริมถนนเท่าไหร่ก็ตามแต่ถ้าคุณออกแบบป้ายไฟวงกลมได้น่าสนใจและมีความสวยงามจะช่วยสร้างความจำในใจของลูกค้าได้ดีและไม่ว่าคุณจะเปิ
マウスホイールで「拡大率」を調節する 「Lightbox」系のツールで、「拡大率」をマウスホイールで調節する操作を採り入れるのは初めてです。マウスホイールがスクロール操作と拡大率調節の両方に使用されるので、上手く切り分ける事が必要です。今回は、そのための簡単な関数を作っています。「UniLightboxJS」ver.0.5181行functionac_check(elem){letopa=window.getComputedStyle(elem).getPr
「MutationObserver」を使わない Firefox環境でのテストが疎かになっていたのですが、最初のver.3.0のコードではブラウザがフリーズ状態になる事を、ユーザーの方から教えて戴きました。◞(..)◟現在、改善したコードに改めましたが、原因は「MutationObserver」の過剰動作と思われます。ページの対象要素が後から呼込まれる（遅延読込み機能）場合や、「Ajax」などの機能で対象要素が無くなった再現したりする場合に、JavaScriptは対象要素を取得できず
「Lightbox」の中で拡張拡大 「sessionStorage」（セッションストレージ）は、セッションが続いている間（ひとつのサイト参照しているタブを閉じない間）は、ページが切換っても登録した値を保持し続けるというものです。ヤフーオークションのサイトでテストすると、思わぬ所で値がリセット（保持が無くなる）されたり、思わぬ所まで保持が継続したりといった感じですが、使わないよりはかなりマシです。全サイト対応のツールで、やたらとブラウザのストレージ容量を減らすのは良くないので、このストレージ
「Lightbox」の中で拡張拡大 「ヤフーオークション」「メルカリ」「Amazon.com」「PayPayフリマ」「楽天」のサイトで利用できたので、まずまずのスタートです。ver.0.2では「Lightbox」内で更に拡大する機能を追加しました。ただ、拡大率の設定維持の問題が出て来ますが、全サイト対応だとCookieを使う必要があり、使ったサイトごとにCookieをPCに書き込むので、PC環境に対しては好ましくありません。ここは便利さを棄てて、セッションストレージ等で一時的
「ヤフーオークション」「メルカリ」などで使える「Lightbox」 「ヤフーオークション」「メルカリ」などの出品物の画像は、特に購入を考えている時は重要な情報です。当然、画像を詳しく調べたくなります。しかし、「ヤフオク」の出品画像などは右クリックが出来ない様になっていて、最近のブラウザの画像に対する各種機能が使えません。私の場合は、画像をブラウザ外にドラッグアウトして、更にその画像を画像ビューア等で拡大観察する様な事をして来ましたが、こういうのは「AmebloLightboxJS
JavaとかJQueryを使わずにCSSとHTMLでLightBoxができるのを見つけたのでアメブロで、できるか試してみます。参考にしたサイトCSSだけで作るライトボックス（疑似クラス:target）パソコンの方はこちらの画像をクリックしてみてください。(スマホの方は画像が2枚並んでいるように見えます)CSSにコピペ#home_link{position:fixed;top:0;left:0;width:1px;height:1px;
最新の「AmebloLightbox」「AmebloLightboxJS」は「AmebloLightboxP」統合しました。下は、現在までのバージョン推移です。一番上の「LightboxJS」ver.2.7までは、「Lightbox」内の拡大を「EX拡大」「スクロール拡大」と呼んでいました。スクロール拡大は縦か横方向のスクロールだけの拡大仕様で、その中で縦方向を特別に「Cz」と呼び、両方向スクロールの「EX拡大」を「Cz」と対比して「Gz」と呼んでいました。結
バージョン「P」を「JS」に統合「AmebloLightboxP」をテスト使用して来ましたが、ComicZoomが使えるので「JS版」と置き換えても全く不足がなく、これをメインストリームに使って良いと判断しました。「AmebloLightboxP」の更新版は「AmebloLightboxJS」ver.3.0とします。下は、バージョンの推移です。「Gz」「Cz」の切換えもうひと工夫 「ver.2.8」では、「拡大率表示」ボタンで「GraphicZoom
派生バージョン「P」「AmebloLightboxP」をメインにして使用していると、やはり「ComicZoom」の機能が別に欲しくなります。「GraphicZoom」の拡大率を下げて代用できますが、いちいち拡大率を変更するのが手間で、実用的ではありません。そこで、「ComicZoom」と「GraphicZoom」を切替え可能にするインターフェイスを考えました。「GraphicZoom」のみにしたのは、拡大位置を指定する「ポイント拡大」を採り入れたからですが、「Lightbo
アメーバブログに掲載された画像は、元画像が高精細であっても、記事上には圧縮して間引きされた画像が表示されます。これは、アメーバシステムの通信上でやむを得ない処理です。しかし「AmebloLightboxJS」は、アメーバの画像サーバーの元画像を呼び出して表示するので、非圧縮の高品位な画像を見る事ができます。とりわけ画像に重きを置くPCユーザーにとって、このツールは価値があるでしょう。ブログページ上の画像の価値に、このツールは何度も気付かせてくれます。「Ameblo
派生バージョン「P」「AmebloLightboxJS」の「ver.2.7」のアップデートは2022年3月でした。もう半年以上経ちました。さて、この間「PHOTOHITOVIEWER」の制作で、クリックしたポイントを拡大する機能を作り、使い勝手が良いので「AmebloLightbox」に還元することにしました。ただ、「EX拡大」⇄「スクロール拡大」を往復する「Lightbox」の仕様に、「ポイント拡大」の機能を追加する事は不可能ではありませんが、インターフェイスが複雑にな
各種の表示要素の割り込み「AmebloLightboxJSMovie」はアメブロに掲載された動画を、ブログを表示したウインドウ内に暗転拡大表示（Lightbox表示）するツールです。動画には「全画面」拡大のボタンがたいていありますが、これを使うと他のウインドウは全部隠れてしまいます。この「JSMovie」を使えば、モニターに余裕がある場合は他のウインドウが同時に使えます。同様の静止画版ツール「AmebloLightboxJS」に比べると、実際の出番は多くありません。その
Cookieの扱い方が不適当だったCookieの知識の未熟さに少し落ち込みました。何となく気になっていたのですが、都合が良いので採用したCookieの使い方が、大いに問題ありと判明しました。下は、私のブラウザがドメイン「ameblo.jp」で使用する「Cookie」を表示したところですが、「Lightbox」が書き込んだCookieが山ほどあります。これが140個程ありました。Chromeのドメインあたりの上限数は180らしく、ブログシステム等が20個位を使い、C
マニュアルページにリンク「AmebloLightboxJS」はアメーバブログ専用の画像ビューアです。ブログに掲載された画像を高品位に拡大表示（Lightbox表示）できます。下は、このツールの動作対象ページです。▪アメーバブログの各ユーザーの「ブログ」ページ▪アメーバブログの各ユーザーの「画像一覧」ページ（詳細表示/リスト表示）▪アメーバブログの「アメンバー記事」ページ▪アメーバニュースの各種ページ▪アメーバランキングページ▪ハッシュタグページ
「YouTube動画プレーヤー」のADYouTube動画の表示開始時や途中に挿入されるADは、「ADブロック」を専業とする拡張機能を使って抑止するのが一番でしょう。しかし、YouTube動画は余り見ないし、「ADブロック」が想定外にページの機能を奪う場合があり、敢えて使わないというユーザーもおられるかもしれません。一方、ブログに埋め込んだYouTube動画は、ADの割り込みが控え目の様に思えます。但し、動画プレーヤー常設の「ADエリア」が、ブログページ上でも時々オーバーレイ表示されま
前バージョンの動作検証前ページのバージョンでテストを行っていると、幾つか問題がある事が判りました。①スマホ動画プレーヤーのボカシ背景非表示の動作が不安定で、表示されたままになる事が多い。➁スマホ動画プレーヤーのiframe内に、ブログページのHTMLに埋込むstyleタグが埋込まれる。以上の問題に関してコードを修正しました。①の原因と対策 iframe内の動画プレーヤーは、動的な書換えが頻繁に行われるらしく、要素に対するインラインの「style指定」は、
