スマホで簡単にワールドカップの放送予定をチェックできる『オレのW杯』というサイトを作りました。

ワールドカップ開幕が目前に迫ってきましたね。

昨日からはてぶやTwitterなどでワールドカップの放送予定をチェックできるサイトや画像などを目にする機会が増えてきました。

「んじゃ、自分でもちょっと作ってみるか」ということで即席ではありますがサイトを作ってみました。

『オレのW杯』(http://wc2014.olein-design.com

簡単に仕様など

簡単ではありますが、中身の説明なんかも含めてメモしておきます。

WordPressを使用

僕の選択肢としては、手打ちと気合で静的ページを作るか、WordPressをどうにかして使うか、その他のCMSを利用するか(本当は勉強中のRailsで作ってみたかったけど、思いついたのが11日の夜遅かったので…)という選択肢に限られます。

ですので、今回も不必要にWordPressを使っています。

通常の記事投稿とカスタムフィールド

試合の情報を淡々と紹介するだけのサイトなのでカスタム投稿を使う必要もありませんでした。入力に関してはできるだけ簡略化したかったのでカスタムフィールドを使っています(画像参照)。

カスタムフィールド参照画面

Yahoo!へ飛びます

オリジナルのコンテンツはありませんので、クリックするとYahoo!ワールドカップ特別ページのコンテンツへリンクされています。各リンク先はこのようになっています。

リンク先情報

終わった試合はトップページに表示しない仕様

ちょっとコードをこねこねしまして、終了した試合をトップになるべく長い時間表示しておかないようにしてあります。ある程度のタイムラグはあるかと思いますが、比較的直近の試合をトップの最上位に表示させるようにしてあります。

PCでアクセスしても見れません

表示をスマートフォンに最適化してあるので、PCで見るとメッチャきたないです。ですので、PCでアクセスするとスマートフォンへのアクセスを促すページが表示されますので、アドレスを手打ちしていただくか、表示されているQRコードを利用していただくか、Twitterで呟いてもらったり、Facebookでシェアしてもらいながら、スマートフォンまたはタブレットでご利用いただければと思います。

ホーム画面に登録するとかっこよさげなアイコン見れるよ!

iPhoneなどのスマートフォン端末でホーム画面に登録していただくととても便利かと思います。しかも、ブラジルっぽいかっこよさげなアイコンを見ることができます。こんな感じです。よろしくお願いします。

アイコンサンプル

さぁ、ワールドカップ視聴の予定を考えておこう!

ということで、『オレのW杯』(http://wc2014.olein-design.com)をリリースします。今のところは情報は各国第一試合分は入力されていますが、順次追加していきますのでお待ちください。

さぁ、ワールドカップの開幕だぁぁ!!!!

書籍を出版しました!

WordPress デフォルトテーマ Twenty Twenty-Four を使って、シンプルなブログやポートフォリオサイト、そしてコーポレートサイトを作りながら、ブロックテーマやサイトエディターの基本を理解することができます。