mini-preview에서 링크된 콘텐츠를 미리 보기

어차피 잊기 때문에, 일단 정리해 써 둔다.

'mini-preview'라는 jQuery 패키지를 Rails 앱에서 사용해 본다.
Rails 앱에 jQuery를 도입 할 때 Gem을 사용하는 방법과 yarn을 사용하는 방법이 있습니다.

이번에는 jQuery를 yarn으로 도입했으므로, 그 순서를 정리한다.

환경

macOS Mojave 10.14.4
Ruby 2.6.1
Ruby on Rails 5.1.7
yarn 1.15.2
jquery 3.4.1

yarn이란?

자바 스크립트 패키지 관리자.

지금까지는 npm이라는 패키지 매니저가 사용되고 있었다.

yarn은 npm과 호환됩니다. 둘 다 node_modules에 패키지를 배치하고 관리합니다.

npm보다 빠르고 패키지 관리도 쉽다.

Rails 5.1부터 대응하고 있어, jQuery나 Bootstrap의 도입에는 이쪽을 사용하도록 유의하고 있다.

도입 절차

yarn 설치

yarn을 사용하기 전에 원래 yarn이 설치되어 있어야합니다.
공식 사이트를 참고로 도입한다.
명령 두드릴 때의 디렉토리는 앱 내가 아니어도 OK.

$ brew install yarn

무사히 진행하면 설치되지만, 직후에는 아마 패스가 적용되어 있지 않은 채이므로yarn --version 그래도 오류가 발생합니다.

경로 설정을 반영하기 위해 터미널을 다시 시작합니다.
다시 버전을 확인하고 설치가 성공적으로 수행되었는지 확인합니다.

# brew install yarn　の後、ターミナル再起動
$ yarn --version
1.15.2

문제없이 설치되어 있는지 확인할 수있었습니다.

Rails 앱의 병아리 만들기

편리한 scaffold 옵션을 사용하여 간단한 블로그 앱을 만듭니다.

$ rails new minipreview -d postgresql -B

$ cd minipreview

$ bundle install --path vendor/bundle

$ bin/rails db:create

$ bin/rails g scaffold blogs title:string content:text

$ bin/rails db:migrate

yarn을 사용하여 jQuery 도입

앱의 루트 디렉토리에서 다음을 실행합니다.

$ yarn add jquery

실행 후 node_modules라는 디렉토리가 추가되었습니다.
이 안의 jquery에 필요한 파일이 들어 있으면 OK.

mini-preview 도입

jQuery를 사용하여 링크의 미리보기를 표시합니다.

mini-preview
htps : // 기주 b. 코 m / ぉ 네 이것 안 / 미니 p ゔ ぃ에 w

필요한 파일은
"jquery.minipreview.css"와 "jquery.minipreview.js"만.
리포지토리마다 적당한 장소에 클론했지만 내용만 직접 복사해도 좋았을지도 모른다.

CSS 파일을 assets/stylesheet에 배치

js 파일을 assets/javascript에 배치

사용하는 페이지 내에서 스크립트를 사용하여 읽을 수 있습니다

index.html

# 省略

<%= link_to 'teratail', 'https://teratail.com/', class: 'URL' %>

<script>
  $('.URL').miniPreview({
    width: 256,
    height: 144,
    scale: .25,
    prefetch: 'pageload'
  });
</script>

마우스 오버 때 미리보기가 표시되었습니다.

추가 미리보기가 불가능한 경우

프리뷰 화상을 표시할 수 있는 사이트와, 왠지 할 수 없는 사이트가 있었으므로 조사했다.
(teratail은 할 수 있었지만 qiita는 안 되었다)

HTTP의 응답 헤더, X-Frame-Options의 설정으로 허가되어 있지 않은 경우는 표시할 수 없다.

사이트의 콘텐츠가 다른 사이트로 로드되는 것을 방지하는 옵션입니다.

클릭 재킹 공격을 방지하는 데 사용됩니다.

X-Frame-Options
htps : //로 ゔぇぺぺr. 모잖아. 오 rg / 음 / cs / u b / Ht tP / X-F Rame-p chion s

클릭 재킹
htps : // 그럼.ぃきぺぢ아. 오 rg/우키/%에 3% 82% 오 F% 에 3% 83% 아 % 에 3% 83% 83% 에 3% 82% 아 F% 에 3% 82% B8% % 3 % 83 % 83 % 3 % 82 % A D % 3 % 83 % B3 % 3 % 82 % B0