pushtape cassette
1.0.0
Pushtape Cassette는 더 나은 음악 웹 애플리케이션을 구축하기 위한 경량 프레임워크입니다. 음악을 담은 카세트를 만들고 영구 음악 플레이어를 갖춘 완전한 음악 웹 앱을 몇 초 만에 렌더링하세요.
이 프로젝트는 플랫 파일, Wordpress/Drupal, JS 프레임워크, Python 및 Ruby 등 다양한 백엔드 기술과 통합될 수 있는 정적 음악 웹앱을 만듭니다. 이 아이디어를 뒷받침하는 핵심 요소는 휴대용 음반 형식인 카세트.json 파일입니다. 이 파일은 포괄적인 단일 엔드포인트처럼 작동하며, 이 엔드포인트에서 javascript는 다양한 마이크로 라이브러리를 사용하여 단일 페이지 애플리케이션을 만드는 데 사용됩니다.
python dub.py 실행하거나 카세트.json을 수동으로 업데이트하세요.문서 루트의 하위 디렉터리에서 앱을 실행하는 경우 index.html에서 기본 태그를 다음으로 변경합니다.
<base href="/subdirectory/" />
또는 절대 경로를 사용하여 모든 자산을 로드할 수도 있습니다.
$ cd pushtape-cassette
$ python dub.py
빌드 스크립트는 작업 디렉터리의 파일을 기반으로 카세트.json을 자동으로 생성합니다. 이는 명령줄에서 로컬로 실행되도록 만들어졌지만 서버가 Python 스크립트를 실행하도록 구성된 경우 브라우저에서 실행하거나 crontab을 설정할 수 있습니다. 참고:
releases/artist-name/release-nameURL 경로에서 해시 #을 제거하고 대신 History API를 사용하려면 index.html에서 app.settings.cleanURLs를 true로 설정하세요. 모든 관련 링크 문제를 처리하므로 문서 루트에서 History API를 활성화하여 앱을 실행하는 것이 좋습니다.
참고: dub.py 빌드 스크립트를 사용하는 경우 3단계와 4단계를 건너뛸 수 있습니다.
| 재산 | 유형 | 설명 |
|---|---|---|
| 마지막 빌드 | 타임스탬프 | 파일이 마지막으로 빌드되거나 수정된 시기를 추적하는 방법입니다. |
| 페이지 | 물체 | 사이트의 정적 페이지에 대한 키:값 쌍을 포함합니다. 키는 첫 번째 수준 JS 라우터 경로, 즉 '정보'를 정의합니다. 값에는 마크다운 문서의 URL 위치가 포함됩니다. URL은 상대적이거나 절대적일 수 있습니다. 서버가 JSON/JSONP를 사용하여 문서를 반환하는 경우 "format": "json"을 설정하세요. 외부 링크를 포함하고 JS 라우터를 우회해야 하는 경우 "type" : "external"을 설정하세요. |
| 릴리스 | 물체 | 사용 가능한 음악 릴리스를 정의하는 키:값 쌍을 포함합니다. 키는 JS 라우터 경로를 정의하며 공백 없이 모두 소문자여야 합니다(예: 앨범 제목 또는 아티스트/앨범 제목). 완전히 생성된 경로는 release/album-title 또는 release/artist/album-title이 됩니다. 해당 값은 이 릴리스의 속성을 정의합니다. 최소한 Artwork.jpg 및 Notes.md의 URL을 지정해야 합니다(상대 또는 절대, 선택적으로 형식을 json으로 지정할 수 있음). 재생 목록 속성은 mp3 파일의 트랙 순서와 위치 및 기타 메타데이터를 지정하는 유효한 JSPF 재생 목록 파일의 경로여야 합니다. |
| 재산 | 유형 | 설명 |
|---|---|---|
| app.settings.cassette경로 | 끈 | 기본적으로 application.js는 로컬 카세트.json 경로를 로드합니다. application.js를 로드하기 전에 이 전역 변수를 설정하여 카세트.json에 대한 경로를 재정의할 수 있습니다. |
| app.settings.home페이지 | 끈 | 이 값은 기본적으로 로드해야 하는 페이지를 지정합니다. 해당 경로는 JS 라우터에 등록되어 있어야 합니다. |
| app.settings.cleanURL | 부울 | false인 경우 해시 # URL이 사용됩니다. true인 경우 History API는 깨끗한 URL을 처리합니다. |
알려진 문제:
제한사항:
예 카세트.json:
{
"lastBuild": {},
"pages": {
"releases" : {},
"about" : {"location" : "pages/about.md"},
"shows" : {"location" : "pages/shows.md"},
"external-link" : {"title": "Soundcloud", "location" : "http://www.example.com", "type" : "external"}
},
"releases": {
"example-release": {
"title" : "Cosmic Voyage",
"playlist" : "releases/example-release/tracklist.jspf",
"artwork" : "releases/example-release/artwork.jpg",
"notes" : "releases/example-release/notes.md"
},
"example-release-two": {
"title" : "Bird Life",
"playlist" : "releases/example-release-two/tracklist.jspf",
"artwork" : "releases/example-release-two/artwork.jpg",
"notes" : "releases/example-release-two/notes.md"
}
}
}
| URL 경로 | 설명 |
|---|---|
| / | 경로를 입력하지 않으면 기본 홈페이지가 로드됩니다. |
| /[페이지 제목] | 이는 카세트.json에 정의된 대로 페이지에 대한 마크다운을 구문 분석하고 표시합니다. |
| /출시 | 개별 릴리스 페이지에 하이퍼링크로 연결된 아트워크 및 이름이 포함된 모든 릴리스 목록입니다. |
| /release/[릴리스 제목] /release/[아티스트 이름]/[출시 제목] | 아트워크, 재생 가능한 트랙 목록, 메모 등 단일 릴리스에 대한 모든 정보를 표시합니다. |
| 문제 | 단계 |
|---|---|
| 빈 페이지 또는 누락된 CSS/JS | index.html에서 기본 URL을 다시 확인하세요. 올바른 경로를 찾는 데 어려움이 있는 경우 Chrome 검사기를 사용하여 서버 경로를 유추할 수 있는 경우가 있습니다. |
| 교차 출처 요청 문제(원격 콘텐츠가 로드되지 않음) | 원격 교차 출처 요청을 처리할 때 유효한 JSONP가 반환되어야 하며 요청 형식이 올바르게 지정되어야 합니다. 1. ?callback=?을 전달해야 합니다. URL(예: http://example.com/cassette.json?callback=?) 2: 서버의 응답은 일반 JSON이 아닌 JSONP여야 합니다. 특히, 카세트.json, jspf, Notes.md 및 Pages.md를 원격으로 로드할 때 출처 간 문제가 발생할 수 있습니다. 또는 JSONP 해결 방법을 설정할 필요가 없도록 모든 자산을 로컬로 로드할 수도 있습니다. |
| 검색 엔진에서 사이트의 색인을 생성하지 않습니다. | robots.txt 및 기타 모범 사례를 확인하는 것 외에 이는 Javascript를 사용하여 페이지 콘텐츠를 렌더링하는 프레임워크에서 알려진 문제입니다. 가장 쉬운 해결책은 prerender.io와 같은 서비스를 사용하여 렌더링된 HTML 페이지를 캐시하고 제공하는 것입니다. Apache를 통해 prerender.io 토큰을 설치하는 것이 좋습니다. 다음은 .htaccess의 모양에 대한 요지입니다(사이트의 TOKEN_VALUE 및 http://example.com을 변경해야 함). |
많은 음악 사이트는 상당히 정적이지만 프런트엔드 요구 사항이 까다롭습니다. 최고의 음악 UX는 라이너 노트 읽기, 다른 음악 탐색 등과 같은 다른 작업을 수행하는 동안 중단 없는 음악 청취 경험을 허용합니다. 일반적으로 이는 기존 CMS/정적 사이트를 AJAX화하거나 JS를 사용하여 처음부터 완전한 솔루션을 구축하는 것을 의미합니다. 이는 특히 장기적으로 구축하고 유지하는 데 골칫거리가 됩니다. 분리된 프런트엔드 프레임워크를 생성함으로써 문제를 보다 효율적으로 분리할 수 있으며 사이트 구축 및 유지 관리에 필요한 장기적인 노력을 줄일 수 있습니다. 또한 JSPF와 휴대용 음반 형식인 카세트.json을 활용하면 데이터 이식성은 나중에 고려되지 않고 처음부터 애플리케이션에 내장됩니다.
정적 음악 응용 프로그램을 렌더링하기 위한 요구 사항은 일반적으로 매우 적당하고 타사 SPA(단일 페이지 응용 프로그램) 프레임워크에 의존하는 것을 피하고 싶었기 때문에 마이크로 라이브러리를 선택했습니다. 게다가 마이크로 라이브러리를 사용했기 때문에 원하는 것을 더 쉽게 고르고 선택할 수 있었습니다. 예를 들어 내가 선택한 템플릿 시스템, 라우팅 또는 양방향 바인딩 라이브러리가 마음에 들지 않으면 선호하는 JS 라이브러리/프레임워크로 바꿀 수 있습니다.
