hoppingRobot

test2

chatgpt.icon

"test"という言葉は、一般的には何かを試すための行動や手続きを指すことがあります。例えば、ソフトウェアやシステムの動作を確認するために行われるテストなどがあります。

https://scrapbox.io/files/662c4f1d4f1eca0024015228.gif

https://scrapbox.io/files/662c4d0d8567610024cb4793.webp

code:style.css

.tzmk_hopBot {

height: 48px;

background-size: 200%;

width: 48px;

position: fixed;

bottom: 50px;

left: 10px;

}

.tzmk_hopBot_1 {

background-position-y: 100%;

}

.tzmk_hopBot_2 {

background-position-x: 100%;

background-position-y: 100%;

}

.tzmk_gptLogModal {

z-index: 301;

position:fixed;

top: 50px;

left:10px;

width: 60%;

min-width: 400px;

padding: 20px;

height: 80%;

overflow: scroll;

padding-bottom: 40px;

background-color: white;

}

.tzmk_gptQuery {

margin: 2px;

}

.tzmk_gptAnswer {

width: 80%;

}

.tzmk_gptLog {

padding: 5px;

margin: 2px;

}

.tzmk_copyButton {

text-align:center;

padding: 4px;

}

.tzmk_copyButtonDone {

color: white;

background-color: black;

}

code:export.js

export let hopBot = {};

function hashCode(str) {

let hash = 0;

let i, chr;

if (str.length === 0) return hash;

for (i = 0; i < str.length; i++) {

chr = str.charCodeAt(i);

hash = ((hash << 5) - hash) + chr;

hash |= 0; // Convert to 32bit integer

}

return hash;

}

function hopping() {

let hopBotDom = $('#tzmk_hopBot');

if (hopBotDom.hasClass('tzmk_hopBot_1')) {

hopBotDom.removeClass('tzmk_hopBot_1');

} else {

hopBotDom.addClass('tzmk_hopBot_1');

}

}

function complete() {

let hopBotDom = $('#tzmk_hopBot');

clearInterval(hopBotDom.attr('tzmk_animeId'));

hopBotDom.removeClass('tzmk_hopBot_1');

hopBotDom.addClass('tzmk_hopBot_2');

}

function setHopping() {

let hopBotDom = $('#tzmk_hopBot');

hopBotDom.removeClass('tzmk_hopBot_2');

let id = setInterval(hopping, 500);

hopBotDom.attr('tzmk_animeId', id);

setTimeout(complete, 2000);

}

let hopBotDom = $('<div id="tzmk_hopBot" class="tzmk_hopBot tzmk_hidden"></div>');

$('body').append(hopBotDom);

let hopBotModal = [

'<div id="tzmk_gptLogModal" class="tzmk_gptLogModal tzmk_hidden">',

'<div>askGPT log<button id="tzmk_gptLogModalCloseButton" class="tzmk_closeButton" href="#">close</button></div>',

'</div>'

].join('\n');

$('body').append(hopBotModal);

$('#tzmk_gptLogModalCloseButton').on('click',function() {

$('.tzmk_customModalBack').addClass('tzmk_hidden');

$('.tzmk_gptLogModal').addClass('tzmk_hidden');

});

hopBotDom.on('click', function(){

$('.tzmk_customModalBack').removeClass('tzmk_hidden');

$('.tzmk_gptLogModal').removeClass('tzmk_hidden');

});

hopBot.startHopping = function() {

$('#tzmk_hopBot').removeClass('tzmk_hidden');

setHopping();

}

hopBot.completePase = function() {

complete();

}

hopBot.addLog = function(query) {

let id = hashCode(query);

let domString = [

' <textarea class="tzmk_gptAnswer">running...</textarea>',

' <button class="tzmk_copyButton">copy</button>',

'</div>',

].join('\n');

$('#tzmk_gptLogModal').append(domString);

.then((success)=>{

.text('copied').addClass('tzmk_copyButtonDone');

setTimeout(function(){

.text('copy').removeClass('tzmk_copyButtonDone');

}, 1000);

},

(error)=>alert('failed'));

});

return id;

}

hopBot.addAnswer = function(logId, answer) {

}

let descriptionId = hopBot.addLog('ここにaskGPTのクエリが表示されます');

hopBot.addAnswer(descriptionId, 'ここにaskGPTの結果が表示されます');