どっかからデータ取得してきて表示するだけのやつ作りました

# 概要

ある日
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">どっかからデータ取得してきて、表示するだけのやつ作る</p>&mdash; こばしゅん (@ksyunnnn) <a href="https://twitter.com/ksyunnnn/status/865812339072802816">2017年5月20日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
なので作りました！ドンッ
https://codepen.io/ksyunnnn/pen/oWQjOM

成果物はたいしたことしてませんが、結果的に書いたコードや学んだ技術の共有というよりはそこに至った工程を残しておきたいと思います。

# 利用するAPIの選択
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">New York Timesに決めた<br><br>The New York Times API - Live news headlines from The New York Times: <a href="https://t.co/gmey7YxXTC">https://t.co/gmey7YxXTC</a></p>&mdash; こばしゅん (@ksyunnnn) <a href="https://twitter.com/ksyunnnn/status/865812796792913920">2017年5月20日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
とりあえず、画像とタイトルとリンクが取得できるものを選びました。

# 画面設計＆どこまで作るか判断
![new_joh.jpg](https://qiita-image-store.s3.amazonaws.com/0/117615/0943744e-be88-e038-5f93-316493c018c4.jpeg)

Googleスプレッドシートで5秒で作成

どこまで作るか(機能的なところ)は

* Tinder Likeに記事が表示される
* Like Dislike のみ
* LikeしたらURL先に飛ぶ
* titlle&descコンポネをランダムな位置で表示

こんなところ。8割くらいはできた。

# index.htmlとなる部分書く
骨組的なやつ

最初書いたのがこれ

```index.html
<div class="container">
  <div id="swipeParts">
    <div class="article">
      <div class="title">
        <h1>Security researcher found a WannaCry <br>fix for some infected computers</h1>
      </div>
      <div class="author pull-right">
        <div class="row">
          <div class="cl-sm-4">
            <img src="https://lh3.googleusercontent.com/-DA3l_H2kIAU/AAAAAAAAAAI/AAAAAAAAAAA/AHalGhrBhAjY1v8jskxV2shsY0shZQhytw/s96-c-mo/photo.jpg">
          </div>
          <div class="cl-sm-8">
            <p class="name">Rachel Kaser</p>
            <a href="#">The New York Times</a>
          </div>
        </div>
        
      </div>
    </div>
    <div class="swipe row text-center">
      <div class="col-sm-4">DISLIKE</div>
      <div class="col-sm-4">READMORE</div>
      <div class="col-sm-4">LIKE</div>
    </div>
  </div>
</div>
```
利用してるライブラリはこれ

```
https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css
//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css
https://afeld.github.io/emoji-css/emoji.css
```

# style.css的なのを書く
bootstrapでうまくいかないとこの補助。
実際にはSCSSで書きました。
参考: [Sass チートシート - Qoosky](https://www.qoosky.io/techs/ca7f68faa6)

2回めCSS完成時のソース

```index.html
<!--  
https://code.jquery.com/jquery-2.2.3.js
https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js
https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css
//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css
https://afeld.github.io/emoji-css/emoji.css
-->
<div class="container">
  <div id="swipeParts">
    <div class="article">
            <div class="author pull-right">
        <div class="row">
          <div class="cl-sm-4">
            <img src="https://lh3.googleusercontent.com/-DA3l_H2kIAU/AAAAAAAAAAI/AAAAAAAAAAA/AHalGhrBhAjY1v8jskxV2shsY0shZQhytw/s96-c-mo/photo.jpg">
          </div>
          <div class="cl-sm-8 info">
            <p class="name">Rachel Kaser</p>
            by <a href="#">The New York Times</a>
          </div>
        </div>
      </div>
      <div class="title">
        <h1>Security researcher found a WannaCry fix for some infected computers</h1>
      </div>
    </div>
    <div class="swipe row text-center">
      <div class="col-sm-4">DISLIKE<i class="em em-sleepy"></i><a href="#1"></a></div>
      <div class="col-sm-4">READMORE<i class="em em-hand"></i><a href="#2"></a></div>
      <div class="col-sm-4">LIKE<i class="em em-innocent"></i><a href="#3"></a></div>
    </div>
  </div>
</div>
```

```style.scss
%gradient-background{
  background: rgba(214,227,240,1);
  background: -moz-linear-gradient(left, rgba(214,227,240,1) 0%, rgba(230,233,237,1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(214,227,240,1)), color-stop(100%, rgba(230,233,237,1)));
  background: -webkit-linear-gradient(left, rgba(214,227,240,1) 0%, rgba(230,233,237,1) 100%);
  background: -o-linear-gradient(left, rgba(214,227,240,1) 0%, rgba(230,233,237,1) 100%);
  background: -ms-linear-gradient(left, rgba(214,227,240,1) 0%, rgba(230,233,237,1) 100%);
  background: linear-gradient(to right, rgba(214,227,240,1) 0%, rgba(230,233,237,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6e3f0', endColorstr='#e6e9ed', GradientType=1 );
}

body{
  @extend %gradient-background;
  font-family: Yu Gothic UI Light,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Hiragino Kaku Gothic ProN,"メイリオ",meiryo,sans-serif;
}


#swipeParts{
  margin-top: 20px!important;
  margin-bottom: 20px!important;
  background-color: white;
  margin: 0 auto;
  max-width: 560px;
  // max-height: 534px;
  
  border-radius: 5px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  &:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }
}
.article{
  border-radius: 5px 5px 0 0;
  /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
  padding-top: 56.25%;
  background: url('https://static01.nyt.com/images/2017/05/20/us/20russiameeting/20russiameeting-facebookJumbo-v2.jpg') 0 0 no-repeat;
  background-size: contain;
  margin-bottom: 10px;
  
  .title {
    padding: 5px;
  }
  .author{
    background-color: rgba(0,0,0,0.2);
    width:280px;
    height:80px;
    .row{
      margin-left: 0;
    }
    img{
      margin-top: 10px;
      margin-left: 10px;
      margin-right: 10px;
      border-radius: 30px;
      height: 60px;
      width: 60px;
    }
    .info{
      padding: 5px 0px 15px 5px;
    }
  }
}
.swipe{
  font-size: 25px;
  height:50px;
  margin-top: 10px;
  i{
    font-size: 20px;
    margin:0 0 10px 10px;
  }
  a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height:100%;
    width: 100%;
  }
  a:hover{
    color: #222;
    text-decoration: none;
    opacity: 0.25;  /* 要素を透明にするタグ */
    background-color: #E6EBE0;
  }
}
```

# javascript&jQueryで処理＆見た目の動き作る

json取得するあたりはつまづいたら悲しいので、予め作ってました実は。

```index.js
var json ;

function getJson(url) {
  var req = new XMLHttpRequest();
  req.onreadystatechange = function() {	
    if(req.readyState == 4 && req.status == 200){ 
      json = req.responseText;
    }
  };
  req.open("GET", url, false); 
  req.send(null);		
}

var url = 'https://newsapi.org/v1/articles?source=the-new-york-times&sortBy=top&apiKey=4a5d65aed060459abaeb0ffcad9322ee';
getJson(url);
var parsed = JSON.parse(json);

function articleObj(i){
  var obj = {
    author: parsed.articles[i].author,
    desc: parsed.articles[i].description,
    publishedAt: parsed.articles[i].publishedAt,
    title: parsed.articles[i].title,
    url: parsed.articles[i].url,
    image: parsed.articles[i].urlToImage
  }
  return obj;
}

obj = articleObj(0);

function setArticle(obj){
  $('#swipeParts .article .title h1').text(obj.title);
  $('#swipeParts .article').css('background-image', 'url('+obj.image+')');
  // $('#swipeParts .author .name').text(obj.author);
  
  return obj;
}

setArticle(obj);

// });
$('#swipeParts .swipe .dislike').on('click',function(){
  var rand = Math.floor( Math.random() * 11 ) ;
  obj = articleObj(rand);
  setArticle(obj);
});
$('#swipeParts .swipe .read').on('click',function(){
  window.open(obj.url);
});
$('#swipeParts .swipe .like').on('click',function(){
  var rand = Math.floor( Math.random() * 11 ) ;
  obj = articleObj(rand);
  setArticle(obj);
});
```

# 完成

https://codepen.io/ksyunnnn/pen/oWQjOM

## できること

* The New York Timesの最新のニュースの取得＆表示
* Dislike＆Like（挙動は、現在は表示記事の更新のみ）
* READMORE：記事ページに遷移


## できること少なっ

とか言わないでください

# 最後に

トータルで4時間くらいでできました。
ちなみにフロントエンドのことは入門して3週間の初心者なので、色々と許して下さい。。。。

なんか作ってみよ、と思った時に何から始めて良いかわからない人の参考になれば～～～。