Last active
June 18, 2018 10:33
-
-
Save nakanoasaservice/12728bf621ede32fd993b4e51760bc74 to your computer and use it in GitHub Desktop.
Qiitaのすべての投稿を取ってきて表示する
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="js" dir="ltr"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Qiita All Contributions</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css"> | |
| </head> | |
| <body> | |
| <section class="section"> | |
| <div class="container"> | |
| <h1 class="title">Qiita すべての投稿</h1> | |
| <div id="dashboard"></div> | |
| </div> | |
| </section> | |
| <script type="text/javascript"> | |
| function rendarDashboard(json) { | |
| console.log(json) | |
| var dashboard = document.getElementById("dashboard") | |
| for (var item of json) { | |
| var div = document.createElement("div") | |
| div.classList.add("box") | |
| div.innerHTML = "<p>" | |
| div.innerHTML += "<strong>" + item.title + "</strong><br>" | |
| div.innerHTML += "公開日時: " + item.created_at + "<br>" | |
| div.innerHTML += "いいね: " + item.likes_count + "<br>" | |
| div.innerHTML += "タグ: " | |
| for (var tag of item.tags) { | |
| div.innerHTML += "<span class='button is-rounded is-small is-primary'>" + tag.name + "</span>" | |
| } | |
| div.innerHTML += "</p>" | |
| dashboard.appendChild(div) | |
| } | |
| } | |
| fetch("https://qiita.com/api/v2/items") | |
| .then(res => res.json()) | |
| .then(json => rendarDashboard(json)) | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="ja" dir="ltr"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Qiita All Contributions(Use Vue.js)</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css"> | |
| <script src="https://unpkg.com/vue/dist/vue.js"></script> | |
| </head> | |
| <body> | |
| <div id="app" class="section"> | |
| <div class="container"> | |
| <h1 class="title">Qiita すべての投稿(vue.js使用)</h1> | |
| <div class="box" v-for="item in items"> | |
| <p> | |
| <strong>{{item.title}}</strong><br> | |
| 公開日時: {{item.created_at}}<br> | |
| いいね: {{item.likes_count}}<br> | |
| タグ: <span class='button is-rounded is-small is-primary' | |
| v-for="tag in item.tags">{{tag.name}}</span> | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <script type="text/javascript"> | |
| var app = new Vue({ | |
| el: "#app", | |
| data: { | |
| items: [] | |
| }, | |
| created: async function() { | |
| var res = await fetch("https://qiita.com/api/v2/items") | |
| this.items = await res.json() | |
| } | |
| }) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment