소개

Bookmarklet은 매우 편리하고 일상적으로 사용하고 있으며, 약간의 작업을 할 때 바삭하게 만들 수 있으면,
단순 작업의 반복 등이 있는 경우에 대개 시간을 단축할 수 있습니다.
그런 Bookmarklet을 만들 때 평상시 사용하고 있는 Web 툴이나 소프트웨어를 정리해 보았습니다.
더 좋은 방법이 있습니다! 등, 만약 있으면 꼭 가르쳐 주세요.

Bookmarklet은 무엇입니까?

원래 Bookmarklet은 무엇입니까? 라는 분은 사용법도 포함하여 아래를 읽어주십시오.
북마크 등록 방법 - Qiita

처음부터 만들어 보면 다음 페이지를 알기 쉬울지도 모릅니다.
북마크릿/Bookmarklet 만드는 법 - catch.jp-wiki

주의사항

웹상의 툴에 대해서는, 선의로 운영되고 있지만, 외부 시스템에 정보를 건네주기 때문에,
이용할 때에는 코드에 사외·조직외에 내놓지 말아야 할 정보가 포함되지 않도록 하십시오.

개발 흐름

목적에 가까운 샘플 Bookmarklet 및 Javascript 코드 찾기

코드를 Online JavaScript beautifier 으로 인간이 보기 쉬운 포맷으로 변환한다.

코드를 텍스트 편집기에 붙여넣습니다. (내 경우에는 Notepad++)

붙여 넣은 코드를 편집합니다.

bookmarklet maker 에 코드를 붙여 동작 테스트.

4-5 반복.

코드 편집 완료.

bookmarklet maker의 맨 아래에 생성 된 Bookmarklet을 브라우저의 북마크 바에 드래그 앤 드롭으로 삽입합니다.

완성!

개발 시 사용하는 도구

bookmarklet maker
그 이름과 같이, 쓴 Javascript의 코드로부터 Bookmarklet를 생성해 주는 것. 개행과 스페이스를 삭제해 준다.


Online JavaScript beautifier
원래는 JavaScript 코드의 체재를 정돈해 주는 것입니다만, Bookmarklet의 코드를 다시 읽기 쉬운 포맷으로 되돌리는데도 사용할 수 있습니다.

텍스트 에디터 「Notepad++」의 사용 【처음자용】 | TechAcademy 매거진
자바스크립트 등의 코드를 색으로 구분하여 보기 쉽게 해주는 외, 다양한 기능으로 편하게 개발할 수 있습니다.
정규 표현식을 사용하는 데 TextFX라는 플러그인이 매우 유용합니다.

Regexper
정규식 시각화 도구.
Bookmarklet을 만들 때 비교적 정규 표현식을 잘 사용하지만 머리가 피곤해서 정규 표현식으로 끓이거나 생각하고 싶지 않을 때,
만든 정규 표현을 일단 방치하면 구조를 가시화 해주고 이해가 진행됩니다.

정규식 검사기 PHP: preg_match() / JavaScript: match()
텍스트 편집기에서도 할 수 있습니다만, 이러한 형식의 툴을 사용하는 편이 편한 일이 있습니다.

URL 인코딩/디코딩 양식 2
Bookmarklet에서 취급하는 문자열 등에 굳이 공간을 넣고 싶은 경우 등에 사용.
※Bookmarklet의 경우, Bookmarklet Maker에 의해 스페이스가 삭제되거나, 실제로 호출할 때에 스페이스가 무시되므로,
공백을 %20과 같은 URL 인코딩된 형식으로 변환하여 처리해야 합니다.

참조

익숙해지면 별로 보이지 않을지도 모르지만, 참고가 되는 사이트의 일례.

북마크릿 모음

JAVASCRIPT::BOOKMARKLET

Hatena::Let

정규식 샘플집

편리한 정규식 | Shinta's Site
정규식 샘플집

정규식의 조견표

RegEx Chart ::: donovanh.com ::: |)()||()\//|| |-|

일본어의 것으로 표시가 빠르고 확실히 일람으로 볼 수 있는 것이 없는 생각이 든다

덤

예를 들어 Google 크롬의 경우 Bookmarklet을 개발할 때 사용하는 도구를 하나의 폴더에 함께 넣어두고,
그 폴더를 마우스 오른쪽 버튼으로 클릭하고 "모두 열기"라고하면 자주 사용하는 도구를 단번에 열어 개발시의 설정이 순식간에 끝나 편리합니다.