API

基礎

• Web API の紹介 - ウェブ開発を学ぶ | MDN

• 【JavaScript入門 #8】WebAPIを叩いてみよう！async await構文を使うと簡単！【ヤフー出身エンジニアの入門プログラミング講座】 - YouTube

リソース

• JSONPlaceholder - Free Fake REST API
• 海外・国内の便利なAPI一覧 - API LIST 100+

はてなブックマーク

• はてなブックマークドキュメント一覧 - Hatena Developer Center
• はてなブックマークエントリー情報取得API - Hatena Developer Center

• はてブAPIでwebサービスを作りたい全ての人に向けて書きました

ホッテントリ取得用 RSS

• https://b.hatena.ne.jp/hotentry?mode=rss

ホッテントリ総合 取得

• API が用意されていない
  • RSS の配信はある
• RSS to JSON というサービスの API を使用して、ホッテントリ総合の xml を json に変換させて表示させる
  • RSS to JSON API ： JavaScript example - rss2json.com
  • 『rss to json』 というサービスを使って RSS フィードを JSON として取得して表示してみよう

単一 URL から情報取得

• JSではてブのデータを取得してWebに表示させてみよう！ | 56DOC BLOG
• element.insertAdjacentHTML - Web API | MDN

<script type="text/javascript">
function displayHatena(data) {
    // タイトル
    let title = document.getElementById('title');
    title.insertAdjacentHTML('afterbegin', '<a target="_blank" rel="noopener noreferrer" href="' + data.url + '">' + data.title + '</a>');
    // はてブ数
    let count = document.getElementById('count');
    count.insertAdjacentHTML('afterbegin', '<a href="' + data.entry_url + '">' + data.count + ' users</a>');
    // コメント
    let comment = document.getElementById('comment');
    let commentContent = '';
    for (let i = 0; i < data.bookmarks.length; i++) {
        if(data.bookmarks[i].comment != '') {
            commentContent += '<p>' + data.bookmarks[i].comment + '</p>';
        }
    }
    comment.insertAdjacentHTML('afterbegin', commentContent);
}
</script>

<div>
    <div id="title"></div>
    <div id="count"></div>
    <!-- <div id="comment"></div> -->
</div>

<script type="text/javascript" src="https://b.hatena.ne.jp/entry/jsonlite/?url=https://hatenanews.com/articles/2019/12/27/110000&callback=displayHatena"></script>

図書館API

• 図書館API仕様書 | カーリル