RPGっぽい表示を実装 （ゲームみたいなニュースサービスを作ってみる 7）
前回のおさらい
どうも、gokeです。
前回はニュースのヘッドラインをGoogle NewsのAPIからもらってくるところをやりました。
今回は画面のデザインをやっていこうと思います。
【やることリスト】
0. 目的と目標を確認
1. アイデアを思いつく
2. そのアイデアを検証する
3. 設計する
4. ミニマムで作る
i. ニュースを取ってくる
ii. 画面のデザイン ◀︎今ここ
5. 実験する
6. ちゃんと作る２つの目とたくさんの手を意識
全体をふわっと作ってみる
チームで何かを作るときにははじめからある程度の設計をしてからじゃないと誰が何をどこまで作るかわからなくて無駄な工数が発生してしまったりしますが、ひとりで作る分には自分を信じてある程度無計画に進められます。
進め方はこんな感じです。
いったん全体をふわっと作ってみると、
「ああ、ここはこうしなきゃいけないな」
ということが見えてきます。そこからもうちょっと作ってまた振り返ってみて、、ということを繰り返していきます。
こういう進め方だと最後に差し掛かったときに
「あれ、DBをはじめから作り直したほうがいいかも・・」
なんてこともあるのですが、
僕はスピードを重視するのでこの進め方でいきます。
コラム：永遠のβ版
かつての上司が「永遠のβ版」ということをよく言っていました。
いつまでたっても正式に出す覚悟ができずに「まだ完成してませんよ」と言い訳することへの皮肉です。
僕の友人がWebサービスを作成していてたまに進捗を見せてくれていたのですが「まだ開発中だから」といつまでも表に出さずにいました。1年くらいやっていましたが、結局彼がこのサービスを世の中に出すことはありませんでした。
大事に作るあまりに時間をかけすぎて途中で断念してしまっては本末転倒です。ましてや設計時点で燃え尽きてしまっては世に出す以前に作ることもできません。「どうせそんな流行らないんだから大事に作ってもしょうがない」と思ってガンガン作ってガンガン出すことをおすすめします。
この辺の哲学的な部分は別途投稿しようと思います。
早速、ふわっと作る
事前の設計でこのページに色々使えるものがありそうだとわかりました。
先人たちの知恵を拝借するのはとても有意義なのですが、気をつけなければいけないポイントがいくつかあります。
プログラムにも著作権が認められているのでその辺りも気にするのですが、そのプログラムが本当に自分が求めているものであるかをしっかりと確認する必要があるということです。特にありがちなのが
・動いてると思ったが、一部のブラウザでは動かない
・動いてたと思ったが、ある日突然うごかくなる
→そして自分では直せない
ということです。
実際に今回借用しようかと思っていたこちらはMacのChromeでは動きましたがAndroidのChromeでは動きませんでした。
いわゆるクロスブラウザの問題ですが、これは誰かが作ったものだけじゃなく、自分が作ったプログラムの場合でも本当によく出くわします。
あれこれ試してみて、事前に良さげだったものはあまり使えなそうなことがわかりました。結果的に下記のプログラムで実装しました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$(window).bind('load',function(){
// 文字を１つずつ<span></span>で囲む
$('.message-box-text').children().andSelf().contents().each(function() {
if (this.nodeType == 3) {
$(this).replaceWith($(this).text().replace(/(\S)/g, '<span>$1</span>'));
}
});
// 一文字ずつフェードインの時間をずらして表示
$('.message-box-text').css({'opacity':1});
var msg_num = $('.message-box-text').children().size();
for (var i = 0; i < msg_num ; i++) {
$('.message-box-text').children('span:eq('+i+')').delay(50*i).animate({'opacity':1},50);
}
setTimeout(function(){
$('.message-box-text').children('span:eq('+(msg_num-1)+')').addClass('blinking');
},(msg_num+5)*50);
});
</script>
<style>
body{
background:black;
color:white;
}
.message-box-text {
opacity: 0;
}
.message-box{
padding: 10px;
border: solid 2px #fff;
border-radius: 6px;
}
.message-box-text span{opacity: 0;}
.blinking{
opacity:none;
-webkit-animation:blink 0.5s ease-in-out infinite alternate;
-moz-animation:blink 0.5s ease-in-out infinite alternate;
animation:blink 0.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{ 0% {opacity:0;} 100% {opacity:1;} }
@-moz-keyframes blink{ 0% {opacity:0;} 100% {opacity:1;} }
@keyframes blink{ 0% {opacity:0;} 100% {opacity:1;} }
</style>
</head>
<body>
<div class="message-box">
<div class="message-box-text">
<?php
$news_arr = get_news();
print $news_arr[0]['title'];
function get_news($max_num = 5){
//---- トピックを指定して呼び出すURL
$api_url = "https://news.google.com/news/atom/headlines/section/topic/POLITICS.ja_jp/%E6%94%BF%E6%B2%BB?ned=jp&hl=ja&gl=JP";
//---- APIにアクセス、結果をsimplexmlに格納
$contents = file_get_contents($api_url);
$xml = simplexml_load_string($contents);
//記事エントリを取り出す
$data = $xml->entry;
//記事のタイトルとURLを取り出して配列に格納
for ($i = 0; $i < count($data); $i++) {
$list[$i]['title'] = mb_convert_encoding($data[$i]->title ,"UTF-8", "auto");
$url_split = explode("=", (string)$data[$i]->link->attributes()->href);
$list[$i]['url'] = end($url_split);
}
//$max_num以上の記事数の場合は切り捨て
if(count($list)>$max_num){
for ($i = 0; $i < $max_num; $i++){
$list_gn[$i] = $list{$i};
$i++;
}
}else{
$list_gn = $list;
}
//配列を出力
return $list_gn;
}
?>
▼</div>
</div>
</body>
</html>一文字ずつ出すのはこちらを参考にしました。Google NewsのAPIはこっちに変更になったようなので修正しました。
結果はこんな感じです。
なんかそれっぽいですね。
とりあえずやりたいことは形にできそうです。
ふわっと作ったことで課題が見えてきたので次回課題を潰していこうと思います。
この記事が気に入ったらサポートをしてみませんか？