tag:crieit.net,2005:https://crieit.net/tags/NewsAPI/feed Crieitでタグ「NewsAPI」に投稿された最近の記事 2018-12-01T14:27:52+09:00 https://crieit.net/tags/NewsAPI/feed tag:crieit.net,2005:PublicArticle/14616 2018-12-01T14:27:52+09:00 2018-12-01T14:27:52+09:00 https://crieit.net/posts/4 <p><a target="_blank" rel="nofollow noopener" href="https://twitter.com/jyouj__">じぇい</a>です！こんにちは。</p> <p>ニュースをガチャすることで、ニュースをランダムに読める「<a target="_blank" rel="nofollow noopener" href="https://gachat-news.herokuapp.com/">ガチャっとニュース</a>」をリリースしました！</p> <p><a target="_blank" rel="nofollow noopener" href="https://gachat-news.herokuapp.com/">https://gachat-news.herokuapp.com/</a></p> <blockquote class="twitter-tweet" data-lang="en"><p lang="ja" dir="ltr">【拡散希望】ニュースをランダムにガチャして見れる「ガチャっとニュース」をリリースしました㊗️情報の偏りが問題になるこの世の中でランダムにニュースを見れたなら、偏りも減るのでは？と思って作りました楽しめるようにガチャ風にニュースが出るようになってます<a target="_blank" rel="nofollow noopener" href="https://t.co/95AlF0d9Tr">https://t.co/95AlF0d9Tr</a></p>— じぇい👨‍💻 (@jyouj__) <a target="_blank" rel="nofollow noopener" href="https://twitter.com/jyouj__/status/1068155029582864384?ref_src=twsrc%5Etfw">November 29, 2018</a></blockquote> <p>ぜひいろんな人に触ってもらいたいのでリツイートしてもらえると泣いて喜びます:stuck_out_tongue_closed_eyes:</p> <h2 id="作った背景"><a href="#%E4%BD%9C%E3%81%A3%E3%81%9F%E8%83%8C%E6%99%AF">作った背景</a></h2> <p>上のツイートにも書いてあるように、情報の偏りを無くそうと思いました。ただランダムにニュースを閲覧できるようにしても面白くないので、ガチャというエンターテイメント性を入れました。</p> <p>ガチャしてニュースを読むという新たなアプローチ方法です！</p> <h2 id="製作期間"><a href="#%E8%A3%BD%E4%BD%9C%E6%9C%9F%E9%96%93">製作期間</a></h2> <p>水曜日3時間、木曜日1時間の計4時間で完成させました。</p> <p>水曜日にメインの機能であるNewsAPIでニュースをランダムで取得するコードや大まかなサイトのレイアウトを作成しました。</p> <p>木曜日はTwiiterでシェアされる画像の設定や細かいレイアウトを作成しました。</p> <h2 id="ガチャっとニュースってどんなサービス？"><a href="#%E3%82%AC%E3%83%81%E3%83%A3%E3%81%A3%E3%81%A8%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%B9%E3%81%A3%E3%81%A6%E3%81%A9%E3%82%93%E3%81%AA%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%EF%BC%9F">ガチャっとニュースってどんなサービス？</a></h2> <p>「ガチャっと」というボタンを押すとランダムでニュースが一つガチャされます。</p> <p><img width="1252" alt="スクリーンショット 2018-11-30 18.31.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/252295/c6babb97-62cc-50e8-dd48-1f6e18aa3082.png"></p> <p><img width="1248" alt="スクリーンショット 2018-11-30 18.32.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/252295/5706c062-30ca-867d-2faf-0a6ac3a1c63d.png"></p> <p>1ページで完結している、シンプルなサービスです。</p> <p>もちろんスマホ対応してます。</p> <p><img width="321" alt="スクリーンショット 2018-11-30 18.35.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/252295/f01547b4-ae28-bfaf-c91f-d67a7aa9837f.png"></p> <p><img width="314" alt="スクリーンショット 2018-11-30 18.35.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/252295/a44e31fc-26e5-b19d-116c-142d2f6c178e.png"></p> <h2 id="使ったもの"><a href="#%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%82%E3%81%AE">使ったもの</a></h2> <ul> <li><p>Django</p> <ul> <li>使い慣れているから、サクッとできる</li> <li>Flaskとかでもよかったかも</li> </ul></li> <li><p>Bulma</p> <ul> <li>1ページだけだけどレイアウトはそれなりには整えたかった</li> <li>サクッとCSS適用できて便利</li> <li>モーダルウィンドウやボタン、画像サイズの部分で活躍しました</li> </ul></li> <li><p>jQuery</p> <ul> <li>モーダルウィンドウの表示の部分で活用しました</li> <li>小さな機能ならjQueryで十分</li> </ul></li> <li><p>News API</p> <ul> <li>国別、カテゴリー別など様々なニュースを取得できるAPI</li> <li>newsapi-pythonというパッケージがあってよかった</li> <li>最新のニュースを常に取得できるのもいい！</li> </ul></li> </ul> <p>NewsAPIについては僕自身が使い方をブログに記事書いてます(笑)</p> <p><a target="_blank" rel="nofollow noopener" href="https://jyouj.hatenablog.com/entry/2018/11/26/222639">［Django］NewsAPIを使ってニュースサイトを作ってみる</a><br /> <a target="_blank" rel="nofollow noopener" href="https://jyouj.hatenablog.com/entry/2018/11/27/214832">［Django］NewsAPIを使って色々なニュースを取り出してみよう</a></p> <ul> <li><p>Github</p> <ul> <li>使わない選択肢がなかった</li> </ul></li> <li><p>Heroku</p> <ul> <li>とりあえず無料のを使った</li> <li>サーバーの知識なくてもOKなのありがたい</li> </ul></li> </ul> <h2 id="最後に"><a href="#%E6%9C%80%E5%BE%8C%E3%81%AB">最後に</a></h2> <p>今回で二つ目のサービスのリリースとなります。個人で色々開発する上のメリットは思い立ったらすぐ形にできたり、自分の気分の乗るときに作れるところだと思います。</p> <p>まだまだ開発するぞ！</p> <p>Qiitaにいいねくれたら舞って喜びます:sunglasses:</p> <p>お読みいただきありがとうございました！</p> じぇい👨‍💻Hundread運営&Punizm開発中