Harimauの編集記録等

３周年記念

うごキャラグループ | 20:28

そういえばまだ３周年の記事を書いていなかった。

今日でうごキャラは３周年です。私もうごメモをだいぶ昔からやってますが、スカイさんやうごキャラと係わり合いがもてるとは思っていませんでした。

グループもデザインをIEに配慮しつつ作っていましたが、結構いい感じになったと思います。

ぜひメンバーが増えて、より楽しいグループになっていくといいなと思います。

もしデザイン面でなにかあればぜひ掲示板までお寄せください。

これからあまり活動できなくなりますが、よろしくお願いします。

【重要】デザインの最適化を行います。

デザイン, CSS, うごキャラグループ, 記録 | 16:34

管理人各位

予告どうり現在HTMLとCSSの総最適化を行っています。最適化には数日かかるかもしれません

その間管理ページの「ページのヘッダ」「トップページのHTML」「ページのフッタ」「スタイルシート」の書き換えを原則として行わないでください。

掲示板やキーワードなどはいじりませんので書き換えていただいてかまいません。というか、ぜひ編集を行ってください。

また、調整中は各所のデザインが一時的に崩れる場合があります。だからといって他の人が書き換えてしまいますといろいろと問題がでる場合がありますので、修正終了の報告をするまでお待ちいただければと思います。

修正すべきところなどは掲示板で言っていただければ直しておきます。

また、編集前の状態でバックアップをとってあるので、必要なようなら差し戻しすることができます。

こちらでもグループのスピードテストを行ってみた

うごキャラグループ | 16:05

うごキャラクラブ

の記事を受けまして、こっちでもスピードテスト。

トップページでやってみました。

YSlow

Yahoo提供の有名どころですね。悪かったものを上げていきます。

E	HTTPリクエストの数を減らそう	画像を含め外部ファイルが読み込まれすぎということです。画像をつなげてCSSで位置を指定させるとか、小さい画像はBase64で埋め込んじゃうとかするといいらしいけどめんどくさい
F	CDNを使おう	使いようがないので無視
F	Expiresヘッダーを追加しましょう	やりようがないので無視
F	ETagを設定しろ	できないって
F	画像はHTMLで大きさを変えずに使用する	サイドバーのうごメモのブログパーツの画像が悪いらしい

対応可能なものがHTTPリクエスト数を減らすしかない。それをやるのは面倒だし、編集がやりにくくなるので却下。

で、かかった時間のグラフ。やはり画像が大部分を占めてしまっているようです。

なんか、うごメモのブログパーツの画像読み込みが妙に遅いという報告が・・・

まぁ、iframeで別枠で読み込んでるのでたいしたことはないんでしょうが。

追記

スカイさんが画像を軽量化してくださり、Make fewer HTTP requestsはEからCにまであがりました！

SiteSpeed

Google提供。Googleは検索ページの連続改悪を除いていい仕事しますね。

悪いのを上げていきます。

• ×ブラウザのキャッシュを活用する
• ×CSS スプライトに画像をまとめる
• ×変更後のサイズで画像を提供する

一番悪いのはこれらしいですが、YSlowでも同様の報告はあったし、対応のしようがありません。

• △画像を最適化する

これはやったほうがよさそうです。

• △Keep-Alive を有効にする

これはやりようがないです。

• △誤りのあるリクエストを送信しない

404になってるやつがいくつかうごメモのブログパーツに。

YSlowでも報告されてるけど、うごメモのブログパーツできわるくねぇかなぁ

結論

結局、画像の容量が大きいのが問題のようです。

減色

GIFにするか、PNGを256色で保存しなおしたほうがよさそうです(256色PNGのほうがGIFより小さくなるかも？)。

それなりのソフトなら256色への減色処理なんてお手のものだと思われます。

スカイさん、お願いしますm(__)m

そのほか

他にもサイズを小さくする方法はあります。

昔からよく使われる方法なのですが、例えばこの画像があります。

これを、横幅1pxで縦にのみグラデーションしている画像に変え、backgroundを使って敷き詰める、という方法です。

その上から日記の画像や文字を重ねれば何とかそれっぽいものが出来ると思います。左右の角丸もそこだけ角丸の画像を用意すれば大丈夫そうです。

(CSS3のborder-radiusを使っておくのもありですね)

さらにさらに、IEを無視するならばCSS3グラデーションやbox-shadowを使ってしまうのもありですが、まぁ、IEはユーザーが多いので避けるべきでしょう。

グループを現状ベータ版からRC版、そして正式版への道のり

うごキャラグループ | 18:21

現在このグループはデザインそのほかをベータ版としています。

うごキャラ３周年となる2012年1月5日に正式版になる予定です。

しかし、ベータから正式版に一気に上げるのは避け、RC版を12月中にはさみたいと思います。

RC版は「リリース候補」と呼ばれるバージョンで、正式版に一番近いバージョンです。特に不具合がなければそのまま正式版に出来るようなもので、かなり整えておかなければなりません。

そろそろ11月も終わりということで、そこに向かってロードマップを計画します。

11月中 [追加期]

デザインの修正や整えるのが必要な部分を片っ端から探し、修正をかけます。

キーワードで足りないものを追加し、手のあいた人が書くようにしていただきたいです。

期末試験のある方もいるでしょうから、学問に支障のないように。

12/3～12/9 [修正期]

引き続き修正を加えますが、こまごまとした修正を各ブラウザで行いたいと思います。

対応するブラウザとしては、最新版のOpera、GoogleChrome、Firefox。

考慮するものはiPhoneとDSiブラウザ、3DSブラウザ、Wii、IE8以降

そのほかのブラウザは参考までに。

12/10～12/16 [最適化期]

HTMLやCSSがわかる方ならわかると思いますが、細かい修正を加えすぎてだいぶゴタゴタしています。みにくいHTML、CSSは未来の修正の障害になるので、私が最適化を行いたいと思います。

間違った指定、後の追加で上書きされる指定、無駄な指定の修正。

インデントなどによってみやすく。そして文中のコメントを削除します。

１日ではできないでしょうから、この時期に他の方に変更を加えられるとおかしくなってしまうかもしれないので、原則としてその間の編集をなしにし、変更箇所があれば掲示板にて報告、という形にさせていただきたいと思っています。

他の方はキーワードの充実やイベントの計画などをしてくださるのがいいかもしれません。

12/17～12/22 [確認期]

みんなでおかしい部分がないかを確認して、最後の修正をします。

12/23～1/4 [RC版]

グループをRC版としていろいろあった2011年を思いつつ年越しします。

宿題は12月中に終わらせ、1月はゆっくりしましょう。ええ。

正月３日ぐらいは私は参加できそうにないです。

1/5 [正式版へ]

正式公開

候補ということで、何か意見があればコメントまで。