Mixcloud（soundcloudのようなオーディオホスティングサービス）のAPIからのデータを使用して、新しい投稿がMixcloudに投稿されたときに新しいサブページ（ディープリンクと呼ばれますか？）が作成されるようにしたいです。
私のプロジェクトはポッドキャストのウェブサイトです。私は、リスト内のすべてのポッドキャストエピソードを特徴とするindex.htmlを想像しています。各サブページは、単一のエピソード専用です。モックアップ
私はウェブ開発にとても慣れていないので、我慢してください。したがって、私は参考文献/資料を読んでみたいと思います。
JSON APIからデータを取得してJavascript文字列に解析し、index.htmlの要素のinnerHTMLを変更する方法を理解しました。
新しい投稿がMixcloudに投稿されるたびに、新しいサブページを生成する方法を理解するのに苦労しています。
また、これについて読むための適切な資料を検索するのも困難です。おそらく、検索する適切な単語や用語がわからないためです。
これが私のコードのスニペットです。そして、私が使用しているAPI / JSONファイル。
<div class="episode">
<div class="episode-title">Loading episode...</div>
</div>
<div class="episode">
<div class="episode-title">Loading episode...</div>
</div>
<div class="episode">
<div class="episode-title">Loading episode...</div>
</div>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//parse JSON to javascript objects
var response = JSON.parse(xhttp.responseText);
//array of the first 3 podcast episodes
var episodes = document.getElementsByClassName("episode");
//array of the first 3 podcast episode titles
var episodeTitles = document.getElementsByClassName("episode-title");
//loop to update innerHTML
for(var i = 0; i < episodes.length; i++) {
var episodeTitle = response.data[i].name;
episodeTitles[i].innerHTML = episodeTitle;
}
}
};
xhttp.open("GET", "https://api.mixcloud.com/radiomodem/cloudcasts/", true);
xhttp.send();
クライアント側のコードを使用してページの階層構造を作成できることを期待しているようです。クライアントとサーバーについて読み始めることをお勧めします。このリンクは最初のグーグル検索結果です。
これをJavaScriptでクライアント側のコードとして実行することを計画している場合、作成するページは物理的に存在しません。ページのように見えるがメモリにのみ保存されるリソースを参照するシングルページアプリケーションを作成することになります。これらのページの配信は、サーバーリソースへのWeb要求が行われることなく、クライアント側ルーターを介して行われます。シングルページアプリケーションのアプローチでは、同じキャッシュバージョンのMixcloud投稿を複数のユーザーに提示することはできません。作成するメモリ内ページは、個々のユーザーのブラウザにのみ存在します。
これを正しく機能させるには、コードをサーバーとクライアントのコードベースに分割する必要があります。
サーバーはhttps://api.mixcloud.com/radiomodem/cloudcasts/にリクエストを送信し、子ページごとに新しい物理サブページファイルを作成します。ホームページはサブページディレクトリの内容を読み取り、ナビゲート可能な選択肢として表示できます。
クライアント側では、HTMLだけがあります。
1つの言語だけを学習したい場合は、Node withExpressを使用することをお勧めします。これにより、サーバー上でJavaScriptを実行できるようになります。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加