最近の主流は後でアップデート
長い間、ブログの更新を止めて連日この「JETS狂の宴」新バージョンの制作を行っていました。
シーズン開幕前までに公開すればOKとしていたのですが、公開しないとスマホで見れませんので、一旦公開して不具合修正や追加コンテンツをアップデートしていく事にしました。
[SPONSORED LINK]
新 JETS狂の宴(ver.5.00) オープン
前のバージョンのデザインが結構長く使っており、おそらくハンター×ハンターの2回の休載期間を合わせたぐらいは使っていました。
しかし、常に不満はありました。ただ、ブログの構成や開発の過程上、修正に手間がかかるため放置していました。
今回のリニューアルは見た目自体にあまり変化はないのですが、中身はかなり改善しました。
せっかくなので何が変わったのか、ざっくり説明いたします。
ソース量の大幅削減、不要機能のカット
まず一番やりたかったのが、不要なソースの削減でした。
細かい話をすると、以前のブログ(Ver.4)は「boostrap」と言う有名なフレームワークで構成していました。
しかし、がっちりしたフレームワークを使うと、ソース量が多くなり不要な機能も多く加えられます。
今回、フレームワークは最小と言われる「Simple」を使用しました。
このフレームワークを選んだ最大の理由はコンパクトなのはもちろん、フレームワーク独自専用のクラス名を使わず要素自体にスタイルを当てている事です。
(分からない人は無視)
さらに、ほぼ使われていないサイト内のコンテンツやバナー、リンクの削除により以前よりもかなり軽量化しております。
アメフト系YoutubeのRSS取得
TOP画面に「アメフト系Youtube」というコーナーを追加しました。
文字通りアメフト関連のYoutubeが更新されたら、ここに表示されるという機能です。
私、Youtubeをあまり見ないので、表示されるチャンネルは適当に選びました。特に許可は取っていません!
「Youtubeを見ない」というのは、動画は知りたい情報以外の不要な情報が多いので。
NFLのダイジェスト映像は見ますが、それ以外はのんびり見てる事があまりないため、Youtube業界には疎いです。
「JETS狂チャンネル」がありますが、ブログに乗せる動画を保存するためにしか使っておらず、特に再生回数を稼ぐ目的ではありません。
しかし、世間はYoutubeと切っては切り離せない状況。需要がありますし、力を入れているチャンネルもあるので、今回のリニューアルを機にYoutube更新情報も載せることにしました。
掲載するチャンネルに関しては、このブログのポリシー(一応ある)に乗っ取ったものを選んで、タイミングがあれば追加・削除を行っていきたいと思います。
バラバラのリンクをヘッダーに集約
一番、変化したのはヘッダーです。設計に時間をかけてPCとスマホとで全く別物にしました。
かつ、以前まではヘッダーやバナーなどバラバラに配置していたブログ内コンテンツのリンクをヘッダーに集約することに成功。
ここからブログ内のだいたいのコンテンツが分かります。
とにかく、「見たいものをすぐ見れる」という事を目的に、徹底的にやりました。
あと「速報リンク」というのは、シーズン中に私が試合結果やスケジュールなど確認するのによく見る外部リンクをまとめたものです。
このブログの元々のコンセプトは、あくまで「私のNFL情報の収集」なのです。
Git管理、Gulpの排除
また専門的なワードを出しますが、今回からちゃんと「Git」でソース管理しております。
以前は一人開発なのでGitを使う必要がないと考えていましたが、修正や新機能の追加はちゃんとブランチを切ってソース管理します。
(今更)
あと以前は「Gulp」と呼ばれるタスクランナーを使ってコンパイルやソースの出力を行っていましたが、これをやめました。
設定がややこしいGulpを使わずとも「NPM」の機能だけで十分です。
いちいちGulpでCSSやJSをコンパイルせずとも、そもそものソース量を最小にすればいいのです。
さらにGulpはバージョンUPや不具合で動かなくなった時が致命傷で、その修正に多大な時間を浪費するリスクもあります。
Stylus(スタイラス)、Pug(パグ)でサクサクコーディング
今回の制作は勉強がてら、CSSを簡略して書ける「Stylus」とHTMLを簡略化して描ける「Pug」を取り入れました。
書いたら「NPM」ですぐに自動コンパイルできますし、非常に書くのが楽になります。
その他・・まだ追加していない機能もアリ
公開1発目の完成度は8割ぐらいです。
他にも追加したい機能がありますが、それは後に追加していこうかと思います。
あと、公開後は不具合が大量に出ると思います。なんせ、スマホ実機でサイトを全く見ていません。
iPhoneで見た時にどのような事になるのかが恐ろしいです。
((((;゚Д゚))))ガクガクブルブル
今後はデバッグと改善、そして新機能の追加を進めて、NFL2022年シーズン開幕までには完成系に持っていこうと思います。
レイアウト刷新乙です。把握済みかもしれませんが、使ってみて気になった点を羅列します
・iPadで見ると横幅がウィンドウ内に収まっておらず、微妙に左右にスクロールしてしまう。(最大幅が固定値になってる?)
・PCのChromeで、「元のサイズに戻す」(閉じるの左)を使ってウィンドウサイズを1000pxくらいにすると、ヘッダー内のサブメニューが開かない
・NFL反則集のページを開くと、同じ画像が2枚表示されている(改修前からかも)。ベリチックが2人いて不愉快
・HEAD LINEの下5枚の画像が何の記事なのかわからないので、オンマウスするとタイトルが表示されるような仕組みがあると嬉しい
・ページのタイトルってなくしました?昔は「JETS狂の宴」ってタブに出てたような…
当方、Web系のシステム屋なので構築の大変さは痛いほどわかります。無理のない範囲で修正と記事投稿待ってます
通りすがりさん>
ありがとうございます。画像2枚のはサムネと固定画像を入れるタグを2ついれちゃったので修正範囲に入ってます。
タブも設定が外れてますねぇ。。
横に微妙にスクロールするのは、いろんなところで出ていて悩みとタネです。何かはみ出さないテクニックをご存じないでしょうか?
出来る限り改修してご期待に添えるサイトを目指します!
更新してはるかなーとチェックしたら、リニューアルしてはってびっくしました。
色々と凄いです。本当にお疲れ様です。
まだ色々と見させてもらってませんが、iPhoneでも大丈夫そうです。
こんだけリニューアルしたからには今年のJETSは大爆発してくれそうですね。(でもそれならこのブログも消えてしまうのが悲しいですが…)
すいません。ついさっきコメントさせてもらったとこで申し訳ないのですが、スマホを横にした時メインメニュー、オリジナルコンテンツ、人気カテゴリ・タグの表示のバー?が勝手に出てきます。
重箱の隅をつつくようなことゆうて大変申し訳ありません。
初心者マークの蒼獅子>
そうなんですよ。開発中は縦横の比率が変わると自動で画面がリロードされる機能をつけてカバーしていたのですが、スマホ実機では上下が勝手にせりあがったりするたびにリロードされるので、その機能を消したため今はそうなってます。
「サイト見てるときに解像度をコロコロ変える人はいないか!」と、楽観的に見てたらさっそく突っ込まれましたね。
複雑な動作をいれると、制御が難しくなってきますが、おいおい直します。
ソースコードの良し悪しは存じませんが、クロムで見る限りすごく見やすくなったと思います。
でも、後ろにいたチアは・・・
今年もこのブログをNFLを楽しむブースターにさせていただきます!
イルカの介さん>
ありがとうございます。
不具合は順次修正していきます。
しかし、開幕まであと100日は長いです・・・
Androidですが、表示が阿部さんのサイトの次に早い感じで驚きました!
ロード中の円もかっこいいです。
これからも進化されるとのこと期待です。
とりあえずお疲れさまでした。
よしさん>
ありがとうございます。
表示スピード上がったのですが、Googleさんのテストでは悪い数字を取っていまして、まだまだ改良の余地があります。
あと、どうしてもコメントを頂いても反応に遅れる悪い私も改善すべきだとおもいました。