블로그나 기술서용으로 스크린샷을 찍기 위한 사이트를 만들어 보았다

줄거리

아무래도, 4/14의 기술서전에 출전하기로 한 @scrpgil 입니다.
현재 기술서를 예의 집필 중입니다. 집필은 처음이므로 고생하면서 즐겁게 하고 있습니다만, 하나만 불만이 있습니다. 그것은 기술서에 실는 웹 사이트의 이미지를 준비하는 것이 귀찮다는 것입니다.



위는 Chrome DevTools의 스크린 샷 기능을 사용하여 만든 이미지입니다. 보시다시피 테두리가 없기 때문에 어쩐지 불편하네요.

이렇게 하지 않기 위해 테두리를 붙이는 등의 방법이 있습니다만, 개인적으로 제일 깨끗하다고 ​​생각하는 것은 Mac의 디폴트의 box-shadow를 붙여 스쿠쇼를 취하는 방법입니다.



어때? 방금 전보다 깨끗하지 않습니까? 가능하면 항상 이런 스크린샷을 찍고 싶습니다.

하지만 , 이 스쿠쇼를 취하기 위해서는 흰색 배경을 준비하거나 불필요한 윈도우를 닫거나 하지 않으면 안됩니다. 이것은 의외로 귀찮습니다 .... 아, 어떻게든 하고 싶다....

스쿠쇼를 취하는 사이트를 만들자

그래서 Chrome 같은 화면에서 스쿠쇼를 취하기 위해서만 사이트를 만들어 보았습니다.



그러나

제작 시간은 Heroku에 업로드 포함하여 작은 1 시간 정도였다고 생각합니다.
소스 코드는 이쪽

다른 사이트 로드

이것은 iframe에서 갈 수있었습니다.

<iframe src="<読み込みたいサイトのURL>"></iframe>

URL, 세로폭 및 가로폭 바인딩

Stencil과 Ionic을 사용합니다.
ion-input에 EventListener를 붙이고 있습니다.

  async componentDidLoad() {
    const widthInput: any = this.el.querySelector("#width-input");
    widthInput.addEventListener("ionInput", async ev => {
      if (ev && ev.target && ev.target.value) {
        this.width = ev.target.value;
      }
    });
    const heightInput: any = this.el.querySelector("#height-input");
    heightInput.addEventListener("ionInput", async ev => {
      if (ev && ev.target && ev.target.value) {
        this.height = ev.target.value;
      }
    });
    const input: any = this.el.querySelector("#url-input");
    input.addEventListener("ionInput", async ev => {
      if (ev && ev.target && ev.target.value) {
        this.url = ev.target.value;
      }
    });
  }

Chrome 같은 탭 막대 만들기

「CSS Chrome like」로 구그하면 처음으로 나왔습니다.
htps : // 코데펜. 이오 / jcblw / 펜 / D ぁ JF

사이트로 게시

이번, 1번의 빠져 포인트였습니다. 당초 Netlify로 공개하고 있습니다만, 그것이라고 iframe으로 localhost를 표시할 수 없다.
아무래도 오늘 MixContent 대책이 진행되고 있어 https의 사이트로부터 http의 사이트는 거의 열 수 없는 것 같았습니다.
어쩔 수 없이 http로 공개하려고 했습니다만, 이것 또 오늘날 무료이고 http로 공개할 수 있는 서비스는 확실히 보이지 않았습니다(Firebase Hosting, Netlify는 모두 강제 SSL 통신).

결국, Heroku를 사용하기로 했습니다만 평소 Heroku를 사용하지 않았기 때문에 빠져 버렸습니다. 결국, 다음의 기사에 도움을 받아 공개를 할 수 있었습니다. 선인의 지혜에 감사 ....
ionic framework로 만든 앱을 heroku로 공개

요약

이상, 웹 사이트의 스쿠쇼용의 사이트를 만들어 보았다고 기사였습니다. 생각했던 것보다 쉽게 ​​만들어 버렸기 때문에 더 빨리 만들고 있으면 좋았을까? 라고 생각합니다.
다만, 저는 이번 기술서는 이미 필요한 이미지를 찍어 마치고 있으므로 사용하지 않는다고 생각합니다.

마지막이지만 자신이 원하는 사이트도 1시간 후에 만들 수 있기 때문에 Ionic, Stencil은 정말 좋은 프레임워크라고 생각합니다.
흥미가 있는 분은 꼭 마스터합시다! 그럼.

Ionic - Cross-Platform Mobile App Development
Stencil - The magical, reusable web component compiler