pushtape cassette
1.0.0
Pushtape Cassette は、より優れた音楽 Web アプリケーションを構築するための軽量フレームワークです。音楽のカセットを作成し、永続的な音楽プレーヤーを備えた完全な音楽 Web アプリを数秒でレンダリングします。
このプロジェクトでは、フラット ファイル、Wordpress/Drupal、JS Frameworks、Python、Ruby などのバックエンド テクノロジと統合できる静的音楽 Web アプリを作成します。このアイデアを推進する重要な要素は、ポータブル ディスコグラフィー形式であるカセット.json ファイルです。このファイルは単一の包括的なエンドポイントのように機能し、このエンドポイントから JavaScript を使用して、さまざまなマイクロ ライブラリを使用する単一ページ アプリケーションが作成されます。
python dub.py実行するか、casset.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 をスキップできます。
| 財産 | タイプ | 説明 |
|---|---|---|
| 最後のビルド | タイムスタンプ | ファイルが最後に構築または変更されたときを追跡する方法。 |
| ページ | 物体 | サイト上の静的ページのキーと値のペアが含まれます。キーは、第 1 レベルの JS ルーター パス、つまり「about」を定義します。値には、マークダウン ドキュメントの URL の場所が含まれます。 URL は相対 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.cassettePath | 弦 | デフォルトでは、application.js はローカルのcasset.jsonパスをロードします。 application.js をロードする前にこのグローバル変数を設定することで、casset.json へのパスをオーバーライドできます。 |
| app.settings.homePage | 弦 | この値は、デフォルトでどのページをロードするかを指定します。パスはJSルーターに登録する必要があります。 |
| app.settings.cleanURLs | ブール値 | 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パス | 説明 |
|---|---|
| / | パスが入力されていない場合は、デフォルトのホームページがロードされます。 |
| /[ページタイトル] | これは、casset.json で定義されているページのマークダウンを解析して表示します。 |
| /リリース | アートワークと名前を含むすべてのリリースのリスト。個々のリリース ページにハイパーリンクされています。 |
| /release/[リリースタイトル] /release/[アーティスト名]/[リリースタイトル] | アートワーク、再生可能なトラックリスト、メモなど、単一のリリースに関するすべての情報を表示します。 |
| 問題 | ステップ |
|---|---|
| 空白のページまたはCSS/JSが欠落しています | Index.html のベース URL を再確認してください。正しいパスを見つけるのが難しい場合は、Chrome インスペクターを使用してサーバー パスを推測できる場合があります。 |
| クロスオリジンリクエストの問題 (リモートコンテンツが読み込まれない) | リモートのクロスオリジンリクエストを処理する場合は、有効な JSONP が返され、リクエストが正しくフォーマットされている必要があります。 1. ?callback=? を渡す必要があります。 URL 内、つまり http://example.com/cassette.json?callback=? 2: サーバーからの応答は、通常の JSON だけでなく、JSONP である必要があります。特に、casset.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 ライブラリ/フレームワークに置き換えることができます。
