ブログ記事10件
アメーバブログ専用ならではの機能汎用の「UniLightboxJS」はネット上の色々なページで動作する様に制作しているので、拡大率を変更は出来ますが、その拡大率をセッション内でしか維持できません。StorageやCookieの許容の容量を考えると、訪れたサイトごとに拡大率を保存しておく余裕があるとは思えません。そのため、仕方なく初期値「200%」として、変更した場合はセッションの範囲内で維持する仕様にしています。一方、「AmebloLightboxJS」はアメーバブログ専用なの
「AmebloLightboxJSMovie」の機能ブログ埋込のYouTube動画は、動画のコントロール部の「」ボタンを押す事で、全画面表示にできます。通常はこれで充分だと思いますが、全画面にすると他の事が出来なくなります。全画面ではなく、ブラウザウインドウの中で最大サイズで表示する「Lightbix」の様な拡大表示の方法があれば、別ウインドウで作業が出来ます。埋込動画からYouTubeサイトに移動して動画を続けて見る機能があるので、余りこのツールの出番はない
「X」（旧ツイッター）サイトでは「XV-Walker」を優先「UniLightboxJS」は基本的に全てのウェブページで動作しますが、同種の機能を持つ画像ビューアが同じページ上で動作した場合は、コンフリクト（動作の競合）を生じる可能性があります。コンフリクトが生じると、どちらかのツールが動作しなかったり、両方のツールが交互に動作するなど、扱い難くなる場合が多いです。「X」サイトでは「UniLightboxJS」は不完全な部分が多いため、専用のビューア「XV-Walker」を
「暗背景」のページでボタンが読めない問題「UniLightboxJS」は色々なページで動作し、実行したページで設定されたCSSの影響を受ける場合があります。この種の問題は、たまたまそういう条件のページに出会わないと判らないものです。問題点 今回、暗背景にした「X」の画面でこのツールのボタンのキャプションが読めない事に気付きました。ページ全体の文字色が「白」に設定されたので、「黒」しか想定していなかったボタンの文字が読めなくなってしまったのです。下の赤枠は、サンプルの
「リンク付き画像」に対応一般的なページ設計で、「a要素」で「img要素」をラップする画像掲載の方法が使われる場合があります。通常、何かの画像をクリックしたら、その画像に関連する別の説明ページや、商品の画像なら、その販売元のページなどを表示するリンクが作られます。しかし、上の場合の「a要素」（リンク）は、画像サーバーに置かれた大サイズの「オリジナル画像」へのリンクで、「img要素」はそれを小サイズにした「表示用画像」の構成です。この画像の掲載方法は、本来のページは軽い「表示用画
YouTube動画は外掘りの加工しかできない「AmebloLightboxJSMovie」は、ブログ埋込のYouTube動画を最も年頭に置いていますが、最近の「YouTube動画」はJavaScriptツールの侵襲的改変に対するガードを強固にしています。動画内のコントロールを操作すると、動画内にフォーカスが取られてそれ以外の周囲に対して操作が出来なくなり、反対に動画外をクリックして記事側にフォーカスを与えると、今度は動画のコントロールが出来なくなります。これは「iframe」
各種の表示要素の割り込み「AmebloLightboxJSMovie」はアメーバブログに掲載された動画を、ブログを表示したウインドウ内で拡大表示するツールです。動画の「全画面」のボタンは他のウインドウも全て隠れますが、「JSMovie」は他のウインドウを邪魔しません。今回、コードを全面的に見直して、このツールの拡大を使う場合に「Ctrl」キーを押した時の反応を改善しました。 「AmebloLightboxJSMovie」操作マニュアルver.
「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
