なぜ作ったか
最初に私がこのサイトを作ったのは2006年の高校生の時でしたので、10年も経ち、そろそろ作り直したいなと思い、リニューアルすることにしました。
また、もっとスタジアムに足を運んでもらうために、初心者に優しいサイトを作ろうと思います。
当時のコンテンツは応援歌と画像でしたが、少しプログラミングなどの知識を付けたので、もっとコンテンツを増やしたいと考えています。
今後の予定
今、考えているコンテンツは以下です。
- 観戦ガイド
- カレンダー(試合とか選手の誕生日とか)
- 試合結果
- 順位表(過去シーズンのインポート)
- 選手一覧
などです。
特に初心者のための観戦ガイドをじっくり作ろうかと思ってます。
なのでサイト名は「浦和レッズ観戦ガイド」にしました。
何かアイデアがあればご教授をいただけたら助かります。
お世話になったツール
お世話になったフレームワークやライブラリの紹介です。
ロリポップ
サーバは格安サーバのロリポップです。
全くトラフィックは無いので重くは無いです。
ただ、共有サーバなので深夜はまれに503が出ることがあります。
https://lolipop.jp/
お名前.com
ドメインの取得は定番のお名前.comです。
このドメインは中古ドメインのようで、2000年ぐらいはレッズサポに紛れた出会い系、2006年頃はクレジットカードのサイトでした。
http://www.onamae.com/
CakePHP
PHPのフレームワークであるCakePHPで作っています。
プログラミング初心者の私にとってはMySQLが手軽にできるのが嬉しいです。
https://cakephp.org/jp
Michelf
MarkdownをHTMLに変換してくれるPHPのライブラリです。
Markdownで書くのが好きなので、このブログもmarkdownで書いて、サーバ側でHTMLに変換しています。
ただ、tableタグが変換できないのが不満です。
https://michelf.ca/projects/php-markdown/
simple html dom
PHPのスクレイピングライブラリです。
アンテナページで使用しています。
浦和レッズの公式サイトはRSSが無いのでスクレイピング(HTMLを解析)して、
更新情報に入れています。
http://simplehtmldom.sourceforge.net/
twitteroauth
Twitterの認証ライブラリです。
@urawareds_botで選手のブログを更新するとTwitterに自動投稿するアカウントも当システムで動いています。
ionic
ここからはフロントエンド編。
スマートフォン向けのCSSフレームワークです。
デザインが良くとても使いやすいです。
https://ionicframework.com/
colorbox
画像の拡大する定番のjQueryライブラリです。
http://www.jacklmoore.com/colorbox/
jQueryAutoHeight.js
要素の高さを揃えるjQueryライブラリです。
https://github.com/tinybeans/jQueryAutoHeight
Sass Compass
CSSはSass+Compassで書いてます。
Prepros
Sass+CompassのコンパイルとJavaScriptの圧縮ができるGUIツールです。
Gulpを使おうとしたら、コンパイルに時間がかかるので、今回はこれを使用しました。
https://prepros.io/
Bitbucket + SourceTree
バージョン管理ツールはGitで、 GitはBitbucket、ソフトはSourceTreeを使っています。