on
OpenLibrary로 개인 디지털 책장을 만드는 방법
OpenLibrary로 개인 디지털 책장을 만드는 방법
반응형
왜 우리 모두가 디지털 책장을 가져야 하는가?
나는 도서관을 좋아한다. 이사를 많이 한 사람으로서, 저는 책을 보관하지 않고도 책을 읽고 모으는 주된 방법으로 도서관에 의존해 왔습니다. 킨들은 괜찮지만, 모든 사람들은 좋은 하드백을 좋아한다. 그리고 여러분은 그것들을 공짜로 얻을 수 있어요! 도서관에서!
하지만, 때때로 나는 내 과거 책을 읽으면서 실제 책장을 바라볼 수 있었던 그 느낌을 그리워한다. 그래서 몇 년 전, 저는 굿리츠 앱을 친구가 추천해 준 후 사용하기 시작했습니다. 열렬한 독자로서, 저는 즉시 그것에 빠져서 "읽을 것", "이미 읽을 것", "현재 읽을 것"을 종교적으로 추적하는데 사용했어요.
외견상, 이것은 완전히 이치에 맞는다: 제 본업인 일은 데이터를 가지고 일하고, 시각화하고, 설명하는 것이다. 그래서 나의 모든 움직임/읽기/시계/등을 추적하려는 모든 계량화된 자기 경향은 추적하는 것처럼 보인다. 하지만 책에서는 그 이상입니다.
공정하게 말하자면, 나는 (1년 동안) 모든 계량화된 자기 일을 해 왔다. 저는 심지어 그것에 대한 시각적 포스터 시리즈를 디자인했습니다. 그러나 이것은 계량화를 위해 계량화하는 것에 관한 것이 아니다.
시간이 흐르면서 내 기억의 틈새로 책이 얼마나 많이 새어나가는지 놀랍기도 하고 우울하기도 하다. 저는 아주 많은 멋진 것들을 읽었고, 제가 만나는 모든 것들을 간직하고 싶습니다. 나는 이것이 거의 불가능하다는 것을 인정하게 되었다; 하지만 아마도 약간의 연습이 있다면, 기억의 기억은 더 쉬워질 수 있을 것이다.
저는 이 관행이 성공적이었다는 것을 상기하면서 작년에 2020년에 제가 읽은 모든 책에 대한 롱폼 데이터 시각화 에세이를 발표했을 때 깨달았습니다. 그 해는, 어느 모로 보나, 형편없는 해였다. COVID-19 대유행은 시작되었고, 봉쇄가 시작되었으며, 시위가 발생했으며, 산불이 맹위를 떨쳤다. 나는 탈출을 위해 책을 찾았지만, 내 주변의 혼란을 이해하기 위한 노력도 했다. 에세이를 쓰면서 나는 그 동안 책에서 발견한 아름다움을 떠올렸다.
Goodreads의 제 데이터는 이 모든 것을 가능하게 했지만, 저는 여전히 앱에 대해 상반된 감정을 가지고 있었습니다. 앱이 아마존에 인수된 후 거의 포기할 뻔했지만, 그 유용성은 포기하기가 너무 힘들었다.
그리고 올해 초, 그들은 공공 API를 폐쇄한다고 발표했습니다. 데이터에 더 이상 프로그래밍 방식으로 액세스할 수 없습니다. 전 빠질래요.
이후 Goodreads에서 모든 데이터를 마이그레이션하고 Internet Archive에서 관리하는 비영리 단체인 OpenLibrary로 전환했습니다.
이 튜토리얼은 OpenLibrary를 사용하여 실시간으로 책을 웹페이지로 가져와서 결과를 표시하는 방법에 대한 것입니다. 제게 있어, 제 책을 돌아볼 수 있는 것은 기억하는 연습입니다. 여러분은 제가 이것을 디지털 가든에서 만든 다른 이유들에 대해 더 많이 읽을 수 있습니다.
이제 코드로 들어가! 도중에 일부 내용을 포함하고 있지만, 만약 여러분이 모든 것을 한번에 보고 싶다면, 이 Gist를 보세요.
계정 만들기
먼저 OpenLibrary에서 계정을 만듭니다. OpenLibrary는 인터넷 상의 모든 것을 디지털 도서관으로 만드는 비영리 단체인 Internet Archive에 의해 운영된다. 그러니 만약 여러분이 몇 달러의 여유가 있다면, 기부하는 것도 고려해야 합니다!
다음으로 Goodreads와 같은 서비스를 사용해 온 경우 데이터를 가져올 수 있습니다. OpenLibrary는 이를 수행하는 방법에 대한 블로그 게시물을 가지고 있습니다. Goodreads가 API를 폐기하고 모든 키를 비활성화한다고 발표한 후에 OpenLibrary는 작성했습니다.
또는, 책 추적에 익숙하지 않은 경우 검색란을 사용하여 최근 책을 찾아 책장에 추가할 수도 있습니다.
데이터 가져오기
좋아요, 이제 코딩에 들어가죠. OpenLibrary의 좋은 점은 거의 모든 페이지가 API라는 것입니다. 페이지에 .json 접미사를 추가할 수 있으며 voila, JSON 개체가 반환됩니다.
간단하게 하기 위해, 저는 데이터를 가져오는 자바스크립트 방법으로 페치를 선택했어요. 먼저 나중에 액세스하려는 기본 URL 중 일부를 저장해 보겠습니다.
// store URLs as variables for future reference const pastReadUrl = "https://openlibrary.org/people/bendextercooley/books/already-read.json"; const currentlyReadingUrl = "https://openlibrary.org/people/bendextercooley/books/currently-reading.json"; const coverUrl = "http://covers.openlibrary.org/b/olid/"; const olBookUrl = "https://openlibrary.org/books/";
또한 몇 가지 빈 글로벌 변수를 설정하려고 합니다. 참고로, 제 사이트는 Svelte 프레임워크에서 실행되지만, 이 코드의 대부분은 순수한 자바스크립트이며 적응이 가능합니다. Svelte에서 빈 변수를 초기에 설정하면 이러한 변수를 표시하고 싶을 때 HTML 템플릿에 항상 액세스할 수 있습니다.
// create some empty variables for storing data later // these need to be before onMount so they are global, and can be used in the template let formattedBooks = []; let formattedReading = []; let bookList = []; let currentList = []; let finalBooks, nowReading, booksLength;
그리고 나서 우리는 데이터에 접근하기 위한 두 가지 주요 기능을 설정할 것이다. 먼저, 구성 요소가 마운트될 때 올바른 작업을 수행하기 위해 마운트 시 Svelte 라이프사이클 방법을 사용할 것입니다. 그런 다음 OpenLibrary에서 JSON 개체를 수락하고 관련 속성을 추출하여 일부 출력으로 변환하는 형식데이터 함수를 만듭니다.
OnMount 내부에서 대기 명령을 사용하여 두 개의 가져오기 호출을 수행하여 코드가 계속하기 전에 유효한 응답을 대기하도록 합니다. 작업이 완료되면 가져오기 응답을 형식데이터 함수에 전달한 다음 전역 변수에 저장합니다.
onMount(async () => { currentList = await fetch(currentlyReadingUrl).then((x) => x.json()); bookList = await fetch(pastReadUrl).then((x) => x.json()); nowReading = formatData(currentList, formattedReading); finalBooks = formatData(bookList, formattedBooks); booksLength = finalBooks.length; console.log(nowReading); });
데이터 응답 형식을 지정할 시간입니다. 이것은 여러분이 책장을 어떻게 진열하는가에 따라 좀 더 구체적이 될 것입니다. 그래서 저는 예를 들어 제 책장을 보여드리겠습니다. 이 기능을 사용하여 몇 가지 주요 작업을 수행합니다.
템플릿에 필요한 변수(색상, 너비 등)를 설정하여 각 "책"에 전달합니다.
dataObject를 반복하여 새 개체를 만들고 HTML 템플릿에 표시할 변수만 유지합니다.
// function to pull out the data that I want function formatData(dataObject, arr) { const colors = ["#730A16", "#BB4F24", "#2F7894", "#D28F33"]; let widths = [60, 70, 90]; function getRandomInt(max) { return Math.floor(Math.random() * max); } // pull out relevant data dataObject.reading_log_entries.forEach((d) => { let obj = {}; // some splitting to make sure I get the right edition if (d.logged_edition == null) { obj.ol_id = d.work.key.split("/")[2]; } else { obj.ol_id = d.logged_edition.split("/")[2]; } // store all the values (obj.title = d.work.title), (obj.color = colors[getRandomInt(4)]), (obj.width = widths[getRandomInt(3)]), (obj.tilt = getRandomInt(4) * 1.3), (obj.read_date = d.logged_date), (obj.read_timestamp = new Date(d.logged_date.split(",")[0])), (obj.book_link = d.work.key), (obj.cover_url = coverUrl + d.work.cover_edition_key + "-M.jpg"), (obj.author = d.work.author_names[0]), (obj.author_link = d.work.author_keys[0]); arr.push(obj); }); return arr; }
마지막에 개체 배열을 위로하면 제대로 포맷된 데이터 세트가 있어야 합니다!
책장을 만드세요.
이제 책꽂이에 책 몇 권을 꽂을 시간이다. 물론, 여기서 당신이 원하는 것을 하세요. 간단한 제목과 저자 목록이 좋은 출발이 될 것이다.
저는 제 책을 전시하는 두 가지 방법을 사용하기로 결정했습니다: 2D 디지털 책장 복제와 Goodreads 스타일의 목록입니다. 나는 웹에서 개인 디지털 도서관을 위한 깨끗하고 목록형 디자인을 많이 보았다. 하지만 저는 실제 책장의 느낌을 재현하고 싶었습니다. 그래서 좀 더 시각적인 것을 선택했죠.
그 책장은 분명히 코드를 좀 더 고쳐야 했다. 책장을 만들기 위해 {각} 루프를 사용하여 각 책을 디브로 표현했습니다. 이것은 매우 스벨테-Y로 할 수 있는 일이지만, 개념은 보편적입니다. 이것은 단지 루프에 대한 개념입니다. Vue를 사용하면 v-for입니다. jQuery인 경우 일부 추가사항이 있는 루프에 대한 일반입니다.
이 루프 내에서 HTML 요소를 생성하고 각 "책" 디브에 대해 데이터 객체로부터 다양한 속성을 전달합니다.
{#each finalBooks as book} pullOffShelf(book)} in:fade="{ duration: 2000 }" style="background-color: {book.color}; transform: rotate({book.tilt}deg); width: {book.width}px" > {book.title} {/each}
책꽂이에 책을 쌓기 위해, 저는 CSS 수업을 몇 개 추가했습니다. 책꽂이 #컨테이너에 유연한 포장을 사용하여 책이 가로로 쌓이고 페이지 너비 변화에 자동으로 응답합니다. 내부 및 회전 클래스는 제목이 책 척추에 맞춰 45도 회전하도록 합니다.
#container { display: flex; flex-wrap: wrap; border: solid 2px brown; padding: 5px; margin: 20px; min-height: 500px; }
마지막으로 데이터가 준비되기 전에 요소가 렌더링되지 않도록 하기 위해 {#if finalBooks != null}을 사용하여 null 체커를 my for 루프 앞에 추가했습니다. 이렇게 하면 템플릿은 응답이 돌아온 후 완전히 포맷된 후에만 렌더링됩니다.
책장이 있어요! 목록과 비교했을 때, 몇 가지 분명한 한계가 있습니다. 책이 너무 작아서 많은 정보를 볼 수 없다. 게다가 텍스트가 회전되어 있습니다(제가 좋아하는 것은 라이브러리처럼 느껴지지만 머리를 젖혀야 하는 목에는 마모됩니다).
자세한 정보를 얻기 위해 클릭 핸들러를 추가하여 "책꽂이에서 책을 꺼냅니다." 스벨트에서는, 이것은 아주 간단합니다.
먼저 책장 옆에 있는 디브를 만듭니다. 이 div 안에 null 검사기 {#if bookOffShelf != null}을 추가합니다. 그리고 이 if 문장의 안에는 주어진 책에 대한 데이터를 표시하는 HTML 요소를 만듭니다. 이미지, 제목, 작성자 및 OpenLibrary에 있는 책에 대한 링크입니다.
이제 빈 가변형 BookOffShelf를 데이터로 채워야 합니다. 다음 기능을 사용하여 이 작업을 수행할 수 있습니다.
let bookOffShelf; function pullOffShelf(data) { bookOffShelf = data; }
그런 다음 템플릿의 각 "책" 요소를 클릭하면 해당 기능을 호출할 수 있습니다.
on:click={() => pullOffShelf(book)}
사용자가 책을 클릭하면 이 데이터 개체를 식별하여 방금 작성한 함수에 전달합니다. 그런 다음 이 오브젝트는 HTML을 아래와 같이 책장의 왼쪽(적어도 바탕 화면)에 채웁니다.
저는 또한 제 사이트에 "현재 독서" 코너를 추가했는데, 이 코너는 제 활동 중인 책들을 꺼내서 제 책장 위에 표지, 제목, 작가를 표시합니다. 새 버전에서 추가하고자 하는 내용은 다음과 같습니다.
책을 끝낸 날짜(Goodreads에서 가져온 경우 OpenLibrary에서 이해하기 더 어렵습니다)
그 책의 평론 (내가 한 권을 쓴 것을 기억했을 때)
그 책에 대한 나의 평점.
내 "읽고 싶다" 목록에 있는 책들, 아마도 두 번째 책장으로서의 책들
나중에 더 생각해 볼게요. 자신만의 디지털 책장을 만들고 싶다면(Svelte에 익숙한) 제 모든 코드는 오픈 소스입니다. 이 Gist에서 전체 구성 요소를 자유롭게 가져와 OpenLibrary 프로필 URL로 바꾸십시오! Svelte를 모르면 제가 글리치에서 만든 최소 프로토타입 뒤에 있는 코드를 체크 아웃할 수도 있습니다(jQuery만 사용).
즐거운 책 읽으세요!
from http://it-ground.tistory.com/243 by ccl(A) rewrite - 2021-09-25 05:27:24