개요

자동화하고 싶은 사이트의 HTML을 확인하고 북마크렛을 만들어 보았습니다.
현재 검색 창에 문자열을 추가하거나 컴퓨터를 켜서 스스로 검사하거나 아마존에서 책 이름을 복사할 수 있습니다.나도 디버깅 도구의 사용 방법을 좀 알았다.
이번에는 장르 사이트 이외에도 똑같이 대응할 수 있을 것이다.

입문

나는 스스로 북마크렛을 만들어 보았다.지금까지 검색해 보니 같은 일을 하고 싶은 사람이 복제되어 등록되었다.이번에는 하고 싶은 일을 찾지 못해 스스로 해보았다.HTTP, HTML, JavaScript 모두 알고 있지만 드디어 해결되었습니다.

하고 싶은 일

시 도서관의 사이트가 미묘하기 때문에 좀 가볍게 검색하고 예약하고 싶습니다.(일단 적어주세요. 인터넷에서 예약할 수 있어서 편해요. 고맙습니다.)

환경

브라우저는 Chrome입니다.

디버그 환경

여기 참고했어.디버깅 잘 할 수 있어요.너무 좋아요.
Chrome Dev 도구를 사용하여 책갈피 -Qiita 실행 ｀
ChromeCtrl+Shift+I에서 열린 Developer Tools를 엽니다.
콘솔에 복사하고 리턴 키를 사용합니다.console.log() 같은 것은 사용할 수 있다.잘못된 줄 번호도 있습니다.브레이크를 설정할 수도 있습니다.해보면 아주 간단해요.실제 사용 때와 마찬가지로 크롬 환경에서 활동하기 때문에 안심이 됩니다.

자동화하고 싶은 사이트의 내용을 조사하다

Developer Tools를 사용하거나 Ctrl+u 에서 HTML의 원본 코드를 보고 자동화하고 싶은 부분의form이나 input를 확인합니다.이번에는 대상의 사이트가 낡아서 그런지 HTML에 이렇게 많이 쓰여 있다.
하지만 자동화하고 싶은 사이트authenticity_token는 매번 바뀐다.귀찮아.
검색은 HTTP GET가 아니라 HTTP가 켜져 자체 검색하는 것도 미묘하다.일단 이 사이트authenticity_token를 열면 켜서 자체 검사할 수 없습니다.예약도 같은 시스템이야.북마크렛은 다른 사이트에서 직접 검색하거나 예약할 수 없습니다.아깝다
사이트와 HTML은 이런 느낌↓

단축 코드

구글의 Closure Compler를 사용하면 단축할 수 있다.디버깅도 가능합니다.

Closure Compiler Service

등록

적당히 책갈피로 등록하다.URL 섹션으로 복사

Bookmarklet

몇 가지 시도해 본 것을 발췌하였다.

아마존 책의 제목 얻기

HTML을 확인한 후 제목에 작성자 이름|이 추가되었습니다.책의 제목만 가져오고 복사(클립보드에 넣기)합니다.
(이곳에서 얻은 책의 제목을 도서관 사이트의 검색창에 넣고 싶었지만 자동화가 잘 되지 않아 결국 수동으로 하기로 했다.)

javascript:(
    function(){
      const title = document.title;
      var title1 = title.split('|');
      console.log('ページタイトル=%s\n', title1[0]);
      alert('ページタイトル：'+title1[0]);

      var tmp = document.createElement('p');
      var pre = document.createElement('p');
      pre.style.userSelect = 'auto';
      tmp.appendChild(pre).textContent = title1[0];
      document.body.appendChild(tmp);
      document.getSelection().selectAllChildren(tmp);
      document.execCommand('copy');
    }
)();

검색 창에 문자열 삽입

form의 이름을 확인하고 텍스트를 마음대로 입력했습니다.정상적으로 돌아가다.
(결과적으로 쓸모가 없어요. 클립보드에 붙여도 되는데 자동화가 잘 안 돼서 포기했어요.)

javascript:(
    function(){  
      document.forms['search_form'].elements['keywords'].value = 'test';
    }
)();

form과 input를 열심히 설정합니다.

form과 관련된 모든 input를 켜서 자체 검사하는 모드를 설정합니다.상당히 번거롭다.var request 부분에 대해 댓글을 달면 마지막 append 부분만 보냅니다.변수를 재활용할 수 없을 것 같습니다.자바스크립트가 그런 건가요?

javascript: (
    function postForm() {
        var form = document.createElement('form');
        form.method = 'POST';
        //    form.accept-charset = 'UTF-8';                                                                                          
        form.action = 'https://xxx';

        var request = document.createElement('input');
        request.name = 'y';
        request.value = 'z';
        form.appendChild(request);

        var request = document.createElement('input');
        request.name = 'a';
        request.value = 'b';
        form.appendChild(request);
        form.submit();
    }
)();

form 검색, input,submit 추가

HTML의 form을 다시 사용합니다.사용자의 입력에 따라 달라지는 부분이 있기 때문에 거기만 추가했습니다.form은 이름과 ID가 없기 때문에 몇 번째 form을 지정했습니다.x[2]의 부분.셋째

javascript: (
    function postForm() {
        var x = document.getElementsByTagName("form");
        var request = document.createElement('input');
        request.name = 'commit';
        request.value = '予約';
        x[2].appendChild(request);
        x[2].submit();// Form submission                                                                                              
    }
)();

페이지 변환 후 스크립트

한 번 켜서 새 페이지로 가서 다른 스크립트를 실행하려고 했지만 북마크렛은 할 수 없을 것 같습니다.아깝다크롬으로 확장해서 방법을 생각해봐.

끝내다

하고 싶은 것으로 공부를 구동할 수 있어서 정말 좋다.
디버깅 도구가 있기 때문에 시도하면서 할 수 있다.
만약 HTTP, HTML, JavaScript에 대한 지식이 좀 더 있다면 더욱 순조롭게 할 수 있을 것이다.
하지만 자동화만 하고 싶어서 마침 배운 것 같아요.
여러 페이지를 뛰어넘어 자동화하고 싶지만 찾아보면 안 될 것 같아요.아깝다
다음은 크롬 확장을 시도해 봅시다.