LoginSignup
4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@ksyunnnn(小橋 俊介)

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

Last updated at Posted at 2017-05-20

概要

ある日

なので作りました！ドンッ https://codepen.io/ksyunnnn/pen/oWQjOM

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

利用するAPIの選択

とりあえず、画像とタイトルとリンクが取得できるものを選びました。

画面設計＆どこまで作るか判断

new_joh.jpg

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

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);
});

完成

できること

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

できること少なっ

とか言わないでください

最後に

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

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

4
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?