サンプル画像（スクリーンショット）のセキュリティ
こんな事で悩んだり工夫したりするユーザーはそう多くいないと思いますが、お話として読んでいただければ。
スクリプトツールやCSSスタイルを多く制作していると、そのマニュアルや機能の紹介記事を書く事が多くなります。 当然、スクリーンショットを使う事が増えますが、その場合に固有ユーザーの「ブログ名」「記事タイトル」「プロフィールアイコン」などがショットに入って来る事が普通にあります。
アメーバの「アイコン」にはユーザーが好みで指定した「プロフィール用画像」が使われ、「ピグ」で選択した「アバター画像」を使う事も出来ます。 それらのアイコン画像はアメーバ上で一般に公開されてはいるものの、その気になればどのユーザーのアイコンかまでは特定できる場合が多く、サンプル画像上に入って来るとセキュリティ上の配慮が必要になります。
セキュリティ用のCSSスタイルの限界
この様な配慮はかなり苦労を要し、1コマの説明画像の処理に半時間が必要という事もあります。 この労力の軽減目的で「アイコン」をボカすCSSを作って「Stylus」で適用する方法を、これまで使って来ました。
下は、「ホーム画面」でセキュリティ用CSSスタイルを使った場合ですが、これは上手く行っています。 ボカした「アイコン」は、枠線でアイコンである事が判ります。 ブログ名や記事タイトルも「▢▢▢▢」などの文字に置き換えています。
しかし、CSSを使う方法は「アイコン」周辺のページデザインによっては、良い結果にならない事があります。「管理画面」の「いいね！された記事」の場合、下の様に「アイコンの枠線」が一緒にボケて、アイコンの印象が薄れてしまいます。
この場合は、CSSで色々と工夫しても上手く仕上がらないのです。
新技術「アイコンの差換え」
今回、こんな場合のために簡単なスクリプトツールを作りました。 ページ上のアイコンを、全く別の「アバターアイコン」に差換えるツールです。
差換え用の「アバターアイコン」は、スタッフブログに行けば山ほどあります。 余り手の込んだ特徴のある「アバターアイコン」は避け、なるべく特徴のない、どこにでもあるものを適当に漁って来ました。
このアイコンSRCの入手は「Bad Iine Mute」のSRCコピー機能が役にたちました。
これで、20程の差換え用のアイコンのSRCが簡単に用意できました。
サンプルにする画面のアイコンのSRCを、用意した「適当な」アイコンのSRCで書換えれば、全く適当なアイコンが並ぶ事になります。
ボカシを使っていないので、自然なサンプル画像になり満足です。 また、説明画像上で、アイコン画像の順番が重要になる場合があります。 この場合のために、差換える対象を1つずつシフトさせる機能を追加しました。
下は、上図から 1つシフトさせた結果で、アイコンの位置が左に1個ずつ移動しています。 このツールの起動ショートカット「Ctrl+F3」を押すごとに 1個ズレます。
コードは以下の様なものですが、最初の「img_arr」は、アイコンの元ユーザーの特定を避けるためにSRCを書換えているので、このコードのまま実行すると空白になります。
〔 アイコン画像 プロテクタ 🔵 〕 ver. 0.6
// ==UserScript==
// @name アイコン画像 プロテクタ 🔵
// @namespace ameblo.jp
// @version 0.6
// @description アイコン画像プロテクタ 「Ctrl+F3」
// @author Ameba Blog User
// @match https://blog.ameba.jp/*
// @exclude https://blog.ameba.jp/ucs/entry/srventry*
// @match https://ameblo.jp/*
// @match https://www.ameba.jp/home
// @match https://www.ameba.jp/notifications
// @match https://blogger.ameba.jp/*
// @match https://comment.ameba.jp/public/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=ameblo.jp
// @grant none
// ==/UserScript==
// STAFF ICON
// https://stat100.ameba.jp/blog/img/ameba/officialblog/face/staff_120.jpg
// https://stat.profile.ameba.jp/profile_images/20200525/18/d6/PJ/p/o03000300p_1590399247329_rw286.png
// NO IMAGE
// https://stat.profile.ameba.jp/profile_images/common/noimage_m.gif
let img_arr=[
"https://stat.profile.ameba.jp/profile_images/20141128/23/9b/5O/j/o020002001417184943424.jpg",
"https://stat.profile.ameba.jp/profile_images/20161005/17/fb/MS/j/o020002001475657023460.jpg",
"https://stat.profile.ameba.jp/profile_images/20120106/20/58/70/j/o020002001325850091462.jpg",
"https://stat.profile.ameba.jp/profile_images/20191030/00/c0/Qs/j/o02000200p_1572363756008_h290l.jpg",
"https://stat.profile.ameba.jp/profile_images/20200308/00/c2/Qu/g/o01400140p_1583593877728_wzoo2.gif",
"https://stat.profile.ameba.jp/profile_images/20160328/11/12/DG/g/o014001401459132382246.gif",
"https://stat.profile.ameba.jp/profile_images/20180313/10/7e/xL/g/o01400140p_1520904665659_gnicy.gif",
"https://stat.profile.ameba.jp/profile_images/20200830/21/07/Vl/g/o01400140p_1598790164760_j3dac.gif",
"https://stat.profile.ameba.jp/profile_images/20161008/10/43/zA/g/o014001401475891590492.gif",
"https://stat.profile.ameba.jp/profile_images/20191201/05/ca/OJ/j/o02000200p_1575147045162_zxvpp.jpg",
"https://stat.profile.ameba.jp/profile_images/20160913/00/f4/P0/j/o020002001473695298938.jpg",
"https://stat.profile.ameba.jp/profile_images/20200121/00/9a/Fa/g/o01400140p_1579534701325_3mog1.gif",
"https://stat.profile.ameba.jp/profile_images/20160921/12/af/ft/g/o014001401474428158403.gif",
"https://stat.profile.ameba.jp/profile_images/20210406/11/24/Qq/g/o01400140p_1617675532461_hbmhd.gif"]
let target=document.querySelector('head');
let monitor=new MutationObserver( catch_key );
monitor.observe(target, {childList: true}); // ショートカット待受け開始
catch_key();
function catch_key(){
document.addEventListener('keydown', check_key);
function check_key(event){
let gate=-1;
if(event.ctrlKey==true){
if(event.keyCode==114){ // ショートカット「Ctrl+F3」
event.preventDefault(); gate=1; }
if(gate==1){
event.stopImmediatePropagation();
main(); }}}
} // catch_key()
let n=0;
function main(){
alert("💢 アイコン画像プロテクタ が処理を実行します")
change_icon_shift(n);
function change_icon_shift(x){
let icons=document.querySelectorAll('img');
for(let k=0; k<icons.length; k++){
let size=icons[k].clientWidth;
if(size>20 && size<60){
let src=icons[k].getAttribute('src');
if(src.includes('stat.profile')){
icons[k].setAttribute('src', img_arr[(k+x) % img_arr.length]); }}}
n=x+1; }
} // main()
/*
function change_icon(){
let icons=document.querySelectorAll('img');
for(let k=0; k<icons.length; k++){
let size=icons[k].clientWidth;
if(size>20 && size<60){
let src=icons[k].getAttribute('src');
if(src){
icons[k].setAttribute('src', img_arr[k % img_arr.length]); }}}}
*/
1回の「Ctrl+F3」入力ごとに順番をシフトさせる部分は、自分で考える必要があります。 こういうトンチが必要な部分こそ、プログラミングで楽しめる部分です。
〔追記〕 2021.11.13
アイコン画像の選択範囲上限を50pxとしていたので、ランキング等で動作出来ないことが判り、上限を90pxに変更しました。 書換えたコードを ver. 0.2 としています。
〔追記〕 2021.11.14
「HOME」で使用を試すと、記事サムネイルもアイコンになり上限を60pxに再設定しました。 また、「HOME」のimgは「style=""」でサイズ指定されているので、動作せず、幅の取得を「.clientWidth」に変更しました。 多分、この指定で殆どのページでimg要素の幅を取得できると主います。
この書換えをしたコードを ver. 0.3 としています。
〔追記〕 2022.01.08
編集画面での動作を抑止していしました。 これは編集画面では不要なツールなので、「Ctrl+F3」のショートカットを他のツールのために空ける目的です。
「// @exclude https://blog.ameba.jp/ucs/entry/srventry* 」
の指定とともに「最上位フレーム (top) のみで実行する」を「はい」に設定することが必要です。
〔追記〕 2022.01.24
「最上位フレーム (top) のみで実行」を「規定」のままでも編集画面での起動抑止ができる様、「// @noframes」の指定を追加しました。
〔追記〕 2023.09.05
アイコンのSRCに「stat.profile」が含まれる画像のみを対象にする様に改めました。
〔追記〕 2024.04.25 ver.0.5 ➔ ver.0.6
アイコンのリスト中で、無効になったアイコンを変更しました。
「アイコン画像 プロテクタ 🔵」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「アイコン画像 プロテクタ 🔵」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
「ブログタイトル」や「ユーザーネーム」など
現在は、まだ手作業でボカシをいれる場合が多く、これもランダムな文字列に並べ換えるツールなどがあれば、楽になるでしょう。 まあ、その内に作るかも知れません。