ブログ記事81件
アメーバブログ専用の画像ビューアブログに掲載された画像を拡大して詳しく見たいと思う事はありませんか。それを可能にするのが「AmebloLightboxJS」です。ブログ掲載画像は圧縮されて表示されますが、このツールは圧縮劣化が少ない画像データを画像サーバーから呼出します。通常より高品位な画像データは、その一部の拡大表示（Gz拡大最大400%）が可能です。更に、縦長の4コマ漫画等の画像には、適切な拡大と縦スクロールで閲覧するコミック拡大（Cz拡大）が使えます。写真や画像に
アメーバブログ専用の画像ビューアブログに掲載された画像を、もっと拡大して見たいと思う事はありませんか。それを可能にするのが「AmebloLightboxJS」です。ブログの掲載画像は、ユーザーが記事作成時に登録した画像から、一般には2段階の圧縮をされて記事上に表示されます。このツールは、最初の圧縮（画像サーバーから送信する際の圧縮）のみに抑えた画像を閲覧できます。また、その画像の一部を更に拡大表示する事ができ、その際の拡大率を最大400%まで指定できます。（Gz拡大）更に、
Edgeの新機能「拡大」EdgeはChromeに負けじと色々と新機能を追加して来ます。先日Edgeを開くと、新しい「画像拡大機能」の説明がディスプレイされました。私は、以前から以下のツールを作って使っているので、ブラウザ標準の「Edge」の機能がどれほどのものか、チェックしました。（競争心？）Edgeの画像拡大機能 Edgeの画像拡大機能 は以下のページに説明があります。拡大|マイクロソフトエッジwww.microsoft.com操作は「画像をマウスでポイント」
アメーバブログ専用ならではの機能汎用の「UniLightboxJS」はネット上の色々なページで動作する様に制作しているので、拡大率を変更は出来ますが、その拡大率をセッション内でしか維持できません。StorageやCookieの許容の容量を考えると、訪れたサイトごとに拡大率を保存しておく余裕があるとは思えません。そのため、仕方なく初期値「200%」として、変更した場合はセッションの範囲内で維持する仕様にしています。一方、「AmebloLightboxJS」はアメーバブログ専用なの
「PhotoHitoViewer」と「PhotoHitoChecker」「PhotoHito」サイトに投稿された撮影サンプルを通じて「特定のレンズの特性を調べる」目的で「PhotoHitoViewer」と「PhotoHitoChecker」を制作しました。「PhotoHitoViewer」は、サイトのデフォルトのビューアの扱い難さを改善して、素早く画像のチェックが出来ます。写真愛好家には便利なツールだと思います。今回、この両ツールのソースコードの公開仕様を「自動更新」対
「X」（旧ツイッター）サイトでは「XV-Walker」を優先「UniLightboxJS」は基本的に全てのウェブページで動作しますが、同種の機能を持つ画像ビューアが同じページ上で動作した場合は、コンフリクト（動作の競合）を生じる可能性があります。コンフリクトが生じると、どちらかのツールが動作しなかったり、両方のツールが交互に動作するなど、扱い難くなる場合が多いです。「X」サイトでは「UniLightboxJS」は不完全な部分が多いため、専用のビューア「XV-Walker」を
「暗背景」のページでボタンが読めない問題「UniLightboxJS」は色々なページで動作し、実行したページで設定されたCSSの影響を受ける場合があります。この種の問題は、たまたまそういう条件のページに出会わないと判らないものです。問題点 今回、暗背景にした「X」の画面でこのツールのボタンのキャプションが読めない事に気付きました。ページ全体の文字色が「白」に設定されたので、「黒」しか想定していなかったボタンの文字が読めなくなってしまったのです。下の赤枠は、サンプルの
「リンク付き画像」に対応一般的なページ設計で、「a要素」で「img要素」をラップする画像掲載の方法が使われる場合があります。通常、何かの画像をクリックしたら、その画像に関連する別の説明ページや、商品の画像なら、その販売元のページなどを表示するリンクが作られます。しかし、上の場合の「a要素」（リンク）は、画像サーバーに置かれた大サイズの「オリジナル画像」へのリンクで、「img要素」はそれを小サイズにした「表示用画像」の構成です。この画像の掲載方法は、本来のページは軽い「表示用画
「画像一覧」画面へのリターン表示「多数の撮影サンプルから特定のレンズの特性を知りたい」といった、私自身のニーズから制作したのが、「PhotoHitoViewer」と「PhotoHitoChecker」です。特に「PhotoHitoViewer」は、デフォルトのビューアの扱い難さを改善して、素早く画像のチェックが出来ます。写真愛好家には便利なツールだと思います。「画像一覧」に戻る操作 このツールの操作性を見直していて、「個別の画像」の画面から「画像一覧」の画面に移動する
Exifの「焦点距離」「絞り値」を表示「PhotoHitoChecker」は「レンズ情報」の間違いをチェックするツールです。原因は写真登録時のユーザーの情報の書込みにあると思われますが、画像のレンズ情報（単焦点レンズの焦点距離）が実際と異なる場合をチェックします。この種の誤りが問題になるのは、特定の単焦点レンズによる撮影画像を「PhotoHito」サイトで閲覧する場合です。ユーザーの多数の投稿画像から、目的のレンズの特性を知ることができるのは、「PhotoHito」の有効なところで
「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コマ漫画などの閲覧に適した縦スクロールする拡大表示が可能です。
「FooterAD」が追加されていました最近の下降経済の影響なのか、「PhotoHito」サイトのサービスの一部が廃止され、主要な画面のフッター部に「せりだし型のAD」が設けられていました。ツールの機能には問題はありませんでしたが、「FooterAD」（下図の赤枠の部分）は邪魔になるので、各ページで適用するスタイルを改善しました。久しぶりに「PhotoHito」を覗いたのですが、デフォルトの閲覧機能は、単一ユーザーの写真のスライドショー閲覧には向いていますが、個別画像の細部
日夏なつお(YouTubu)さんの動画で、画像ビューアソフト『PureRef』をやっていたので紹介します。お絵描きをしたり3D画像を作成するのに画像資料を管理しやすくなるツールです。簡単！最強！資料画像管理ツールの使い方【イラスト便利ソフト紹介】・画像ビューア画像ビューアは画像ファイルを閲覧および管理を行う目的で使うソフトです。webサイト↳https://www.pureref.com/・PureRefの特徴と機能指定した画像を、デスクトップの
ブログページには圧縮した画像が表示される アメブロのブログ記事に画像を掲載すると、ブログ記事に表示された画像の画質が低くてがっかりする事は、多くの方が経験すると思います。ブログページで圧縮画像が表示される仕組み 下は、投稿した画像の扱われる様子を簡単に示した図です。以前にも同様の模式図を掲載しましたが、近年は圧縮が2段階で行われていて、少し図が異なります。「画像のアップロード」の操作で、アップロードした画像は圧縮されて画像サーバーに「圧縮❶」が保存されます。「
画像一覧ページのclass名変更に修復対応しました「画像一覧」ページのclass名変更が行われたのは、以下の記事によると12月13日あたりの様です。「ブログページ」「画像一覧」「動画一覧」の更新に対応/AmebloManagement各種ページのクラス名更新 何か理由があるのだと思いますが、ページのHtml構成は変わった様に見えないのですが、要素（表示パーツ）のclass名が書換えられる…∽ameblo.jpCSSスタイルやJavaScriptツールで、このページの要素
「background-image」に対応する ブラウザで色々なページを閲覧していると、殆どのページに「画像」があります。現在のウェブページでは、目の前の画像がどんな種類でどんなHTML構成で表示されているか、素では言い当てられないくらいです。これは、画像（グラフィック）に興味を持つ人には、百花繚乱で楽しい状況です。「UniLightboxJS」はそんなユーザーには便利なツールになり得ます。◎ページ上の任意の画像をライトボックスに拡大表示し、更に部分拡大が可能◎画像の元データに
Windowsのオフラインの画像ビューアにirfanviewというのを使っている。読み方はイルファンビューかイーファンビューかで論争が有るようだ…以前はGoogleのビューアを使っていたがなくなってしまったので。動作も軽快でスライドショー機能もあるのでちょっとした確認などにとても便利だ。操作性もいいと思う。最近気づいたのだけど、画像をフルスクリーンで表示したままF2キーを押すと画像を表示したままファイル名変更できるのね。知らなかった。そういう機能をもったアプリは普通にあったのかな？今
右クリックメニューの「新しいタブで画像を開く」 ブラウザの「右クリックメニュー」（コンテキストメニュー）は、使い慣れると無くてはならない機能です。これはブラウザに組込まれたプログラムで、同条件で同様に右クリックしても、ブラウザによってメニューが違う事があります。「右クリックメニュー」は、右クリックした対象に合わせた適当で可能なメニューが表示される仕組みで、内容は対象によって変化します。例えばページ上の「画像」には「リンクが設定された画像」と「リンクがない画像」があり、それによって「右
マウスホイールで「拡大率」を調節する 「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環境に対しては好ましくありません。ここは便利さを棄てて、セッションストレージ等で一時的
