「JavaScript」カテゴリーアーカイブ

Twitterのアイコンを青い鳥に戻すTampermonkeyスクリプト

投稿日時: 投稿者:
返信

Twitterのアイコンが青い鳥からXに変わってしまいました。
どうしても青い鳥が良いという方のために用意しました。

ページ（https://twitter.com/home）の読み込み完了後、3秒後にロゴを書き換えます。
ページが読み込まれてから画面が書き換わるまで時間がかかるようであれば、タイマーの3000を5000など大きく変更してください。
動作確認はPCのみ、ブラウザはChrome・Edge・Vivaldiです。
Firefoxは少し前からTampermonkeyは動かなくなっている感じです。

※ 色の指定が抜けていたので、追加したものが0.2


// ==UserScript==
// @name Twitterのアイコンを青い鳥に戻す
// @namespace http://tampermonkey.net/
// @version 0.2
// @description none
// @author penlabo
// @match https://twitter.com/*
// @grant none
// ==/UserScript==

(function() {
'use strict';
setTimeout(change, 3000);
function change(){
var target = document.querySelector('h1 > a > div');
target.innerHTML = '<svg viewBox="0 0 24 24" style="fill:#1da1f2" aria-hidden="true" class="r-1cvl2hr r-4qtqp9 r-yyyyoo r-16y2uox r-8kz0gk r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-lrsllp"><g><path d="M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.392.106-.803.162-1.227.162-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.093 7.14 2.093 8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602.91-.658 1.7-1.477 2.323-2.41z"></path></g></svg>';
}
})();

更新：クリックポストで「Amazon Pay」の支払手続きをTampermonkeyで自動実行するスクリプト

投稿日時: 投稿者:
返信

前の記事から更新しました。
一日使用してみまして、実際の挙動を確認したところで修正を行いました。
ボタンをクリックしてページ変移が始まればTampermonkeyでの処理が終わるかと思っていたのですが、ループが進んでいたので明示的に抜けるように変更しました。

// ==UserScript==
// @name         クリックポスト：一時保存（Amazon Pay）
// @namespace    http://tampermonkey.net/
// @version      2023-05-01
// @description  “内容品”が「/skip」ではないお届け先の“支払手続き”を自動で実行します。
// @author       penlabo
// @match        https://clickpost.jp/packages/list
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    onload = function (){
        var line = 1;
        while (1) {
            var elmTarget = document.getElementById('AmazonPayCV2Button' + line);
            if (!elmTarget) return false;
            var elmParent = elmTarget.parentNode;
            var elmPrevious = elmParent.previousElementSibling;
            var elmText = elmPrevious.innerText;
            if (elmText != '/skip') {
                elmTarget.click();
                return false;
            }
            elmParent.style.backgroundColor = 'lightgrey';
            line++;
        }
    };
})();

その後の手続きを実行するものも追記しておきます。

// ==UserScript==
// @name         クリックポスト：決済（Amazon Pay）
// @namespace    http://tampermonkey.net/
// @version      2023-05-01
// @description  決済を実行します。
// @author       penlabo
// @match        https://payments.amazon.co.jp/checkout?*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    var target = document.querySelector('#a-autoid-0 > span > input');
    target.click();
})();


// ==UserScript==
// @name         クリックポスト：支払手続き完了（Amazon Pay）
// @namespace    http://tampermonkey.net/
// @version      2023-05-01
// @description  支払手続き完了を実行します。
// @author       penlabo
// @match        https://clickpost.jp/amazon_pay/confirm?*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    var target = document.querySelector('#payment_complete_message > input');
    target.click();
})();


これで全自動で処理が進みます。

クリックポストで「Amazon Pay」の支払手続きをTampermonkeyで自動実行するスクリプト

投稿日時: 投稿者:
2

日本郵便のクリックポストは、お届け先毎に支払手続きを実行しなければなりません。
さらに、その先で決済を実行する手続きも必要になります。
件数が多くなると、PCに張り付いて作業しなければならず、操作が面倒です。
ということで、この手続きを自動で実行させようということです。
…が、このスクリプトはお届け先の一覧画面から個別の決済画面に飛ぶだけのものです。
決済を実行するものは近いうちに用意します。

なお、このスクリプトは「Amazon Pay」用に用意したもので、「Yahoo!ウォレット」では動作しません。

このスクリプトは、クリックポストのサイト「一時保存」でお届け先を一覧表示した状態で動作するように制限を設けています。
「まとめ申込み」では動作しません。
ところで、クリックポストでは登録したお届け先を任意に削除することができません。
そこで、誤って登録したり保留したいものなど、支払いを実行したくないお届け先は、内容品を「/skip」に変更してください。
これ以外のお届け先について、支払手続きを自動で実行します。
なお、内容品の変更時には一度決済画面を表示することになりますので、決済用のスクリプトは切っておかないと決済が実行されますのでご注意ください。

この画面の場合、1件目の手続きは実行せず、2件目を実行します。
お届け先の一覧が空になるか、内容品が「/skip」のものだけが残った状態で動作を終了します。

余談ですが、他サイトで紹介されている同様のスクリプトでは、お届け先の全てが処理の対象になっているものしかないと思います。
日本郵便側で受付処理を行うまでは決済が確定することはありませんが、発行済として一覧から消えるため処理済みとして扱ってしまう、追跡番号が発行されることで発送通知を誤って送信してしまう、などの問題に繋がる可能性があります。
有用そうな記事が一つ上がると、内容を精査せずパクり記事が量産されるので本当にたちが悪いと感じます。
便利なものほど、実際に挙動を確認したり、実務への影響を考慮して欲しいところです。

コードは分かりやすいように努めました。
コメントや説明がなければ処理を追えない場合は、このスクリプトは使わない方がよいでしょう。

ブラウザで手続きを自動化するには、拡張機能のTampermonkeyを利用します。
おそらくGreasemonkeyでも動作しますが未確認です。
これらの使い方はここでは説明しませんので、他所で確認してください。

以下のコードを保存してください。

// ==UserScript==
// @name         クリックポスト：一時保存（Amazon Pay）
// @namespace    http://tampermonkey.net/
// @version      2023-04-30
// @description  “内容品”が「/skip」ではないお届け先の“支払手続き”を自動で実行します。
// @author       penlabo
// @match        https://clickpost.jp/packages/list
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    onload = function (){
        var line = 1;
        while (1) {
            var elmTarget = document.getElementById('AmazonPayCV2Button' + line);
            if (!elmTarget) return false;
            var elmParent = elmTarget.parentNode;
            var elmPrevious = elmParent.previousElementSibling;
            var elmText = elmPrevious.innerText;
            if (elmText == '/skip') {
                elmParent.style.backgroundColor = 'lightgrey';
            }
            else {
                elmTarget.click();
            }
            line++;
        }
    };
})();

jQuery Tabsのタブを下側に

投稿日時: 投稿者:
返信

jQuery UIのウィジェットの１つ、Tabsです。

タブコントロールを実現するライブラリです。 解説ページを参考に導入したのですが、一部の修正が必要だったのでメモっておきます。

参考ページは以下の通り
http://js.studio-kingdom.com/jqueryui/widgets/tabs
スタイルシートに漏れがあって、タブに下線が表示されないのでそれを追加します。
.tabs-bottom .ui-tabs-nav li
に
border-bottom-width: 1px
を追加すればOK

ところでこのWordPress、いつのまにかピンバックを送るフォームが消えてるんですけど、どこで設定するんでしょう… WordPressってどんどん使いにくくなる印象なのですが、クラシックモードとか無いのでしょうか。

JavaScriptでURLをカッコよくパースする

投稿日時: 投稿者:
返信

次のようなURLがあったとします。
「http://www.printry.jp/product/category/detail.php?product_category_id=15#productId193」
これをパースしていろいろ弄りたいのですが、
「?」で分割して、右側を「&（&amp;）」で分割して、「=」で分割して…
というのが何をやっているのか一目瞭然なのですが、次の方法があるようです。


var elm = document.createElement('a');
elm.href = 'http://www.printry.jp/product/category/detail.php?product_category_id=15#productId193';

console.log(elm.hostname);
// www.printry.jp
console.log(elm.pathname);
// /product/category/detail.php
console.log(elm.search);
// ?product_category_id=15
console.log(elm.hash);
// #productId193

これはなるほど、DOMに丸投げというわけですね。
カッコよく決まってデメタシデメタシ。

印刷用画像サイズ計算ツール公開

投稿日時: 投稿者:
返信

印刷用に画像を用意する場合、サイズの計算が少々面倒です。
仕上げサイズ？解像度？塗り足し？
一気に解決できるツールをご用意しました。

その名もまんまの「印刷用画像サイズ計算」です。
計算はJavascriptで行います。
全体では10分ぐらい要したと思います。

印刷注文は、管理人が運営するプリントライまでどうぞ。

ブラウザ用管理画面を作る際に注意すること

投稿日時: 投稿者:
返信

ブラウザで管理画面にアクセスする場合、フレームにするとだめだとか、新しいウィンドウをポコポコこさえるなとか言われます。
けれど、何気にフレームが便利だったり、window.openがあちこちに出現するものです。

どうしてもこうなってしまう場合は、子ウィンドウで親ウィンドウを、親ウィンドウで子ウィンドウを追跡できるようにしておくと、どこかで救われるかもしれません。

必要な場面としては、レコードのリストを表示して、指定したレコードを編集する子ウィンドウを開いて、編集が完了したら子ウィンドウを閉じて親ウィンドウを更新する、などなど。

子から見た親はwindow.openerで何とかなりますが、親から見た子はウィンドウ名を持っておく必要があって、ちょっと面倒ですね。
DOMのchildNodesみたく、childWindowsとかあれば楽なんですが。

D&Dで複数ファイルをアップロードしたい、けど無理そう

投稿日時: 投稿者:
返信

ファイルアップロードのはなしです。
ファイル選択が面倒なので、D&Dでできないかと相談されました。
まず思い立ったのがFlashを使ったもの。
しかし、サポートを狭めていく落ち目のFlashはあまり乗り気がしません。
適当に調べてもプログレスバーが表示できるという売りしか見つかりませんでした。

時代はHTML5に移って行くし、そっちの方向で何かないか調べてみました。
適当に検索ワードを入力して見つけたのが、html5uploaderと、ｊQuery File Uploadの2つ。
結局はどちらも、W3CのFile APIが基のようです。
この2つのデモ画面から動作確認したところ、正常に機能したのはFirefox、Chrome、Safariでした。
IEとOperaは動きませんでした。

結局は、<input type=”file” name=”files[]”>で妥協するしかなさそうです。

フォームパーツがフォームの何番目かを調べるJavaScript

投稿日時: 投稿者:
返信

フォームでちょっとゴニョろうとしまして、パーツが何番目にあるのか取得する必要が出てきました。
ちょっとだけ調べてみましたが、ズバリそのものを取得できるメソッドがないようです。
document.form(0).item(0).focus()みたいに、指定は出来るんですが、オブジェクトから逆引きが出来ないみたいです。
ライブラリにあるとは思うんですけど、それっぽいのが見つからず、コード自体も大したことないですし、自前で用意してみました。
やり方は簡単、パーツを順番に走査するだけ、こんな感じ。

function getNumberByItem( itemObj ){
	var formObj = itemObj.form;
	for( var i = 0; i < formObj.length; i++ ){
		if( itemObj == formObj[i] ) return i;
	}
	return null;
}

指定されたオブジェクトの種類の確認もつけておけば安心ですね！

InternetExplorer8でJavaScriptのimageオブジェクトの挙動が怪しい

投稿日時: 投稿者:
返信

FLASHに頼らずJavaScriptで画像なとを扱うツールをこさえているのですが、IE7では問題なかったものがIE8でおかしくなっている。
IE8に搭載されているIE7互換モードでもだめ、どうやら純粋なIE7のレンダリングエンジンではないようだ。
問題となっているのは、非同期でimageを読んで表示を更新するものだけど、imageオブジェクトでcompleteがtrueになっているにもかかわらずwidthとheightの値が更新されていない。FirefoxやOpera、safariではもちろん正常に機能する。だめなのはIE8のみ。IE7を信じて調整を行って損した。
これからは絶対にIEを信じることはないだろう･･･