CSSスプライトをやってみて思ったこと

ブラウザゲーや半ネイティブ半ブラウザみたいなゲームを作ってると、読み込みの速さが課題に上がることはよくあります(その分の予算や工数確保サれることは少ないですが)。

で、ならばと画像加工ソフト使って勝手にCSSスプライトやってみたのですが、やってみて色々と気がつくところがあったのでまとめます。

  • CSSスプライトって何?
  • CSSスプライトの利点
  • CSSスプライトの欠点
  • ソシャゲ特有?の問題点
  • 現状の方針

CSSスプライトって何?

CSSスプライトについてあれこれ。

こちらがよくまとまってます。ゲーム作ってる人は割りと馴染みのある手法だったり(ドット絵配布サイトとか見るとイメージつかみやすいかと)。

CSSスプライトの利点

  • 複数の画像がまとまることでHTTPリクエストが減り、ページの読み込み速度が向上する
  • 個々の画像サイズが小さかったりほぼ共通の色調の画像だった場合、ひとまとめにすることで個々の画像の合計よりファイルサイズが減ることが多い
  • 画像ファイルが散らばらない(個人的に嬉しい)

画像ファイルが小さいと、データの転送にかかる時間より通信にかかるコストが出かかったりします。

またソシャゲは見た目や訴求の問題で特にかく画像パーツが多いので、どんなにディレクトリやファイル名工夫しても何がなんだかよくわからなくなることが多いのですが、それが多少なりとも解消されるのも嬉しい。

CSSスプライトの欠点

  • 画像作るのがめんどくさい
  • デザインの変更があった場合に大変

デザイナーさんに納品して貰う前に全体のページデザインを共有してもらいスプライト化できそうな部分は予めそのように作ってもらうことができればベストですが、まあできた試しがないので依頼し直すか自分で勝手に作るかの2択です。私は自分でちまちま作りました。

で、面倒くささが身にしみました。この面倒くささを補完するツールやサービスはあるのですそれを使えば多少はマシになるかもしれません。が、それとは別の問題もあります。

ソシャゲ特有?の問題点

更新頻度が高い、動的な要素が多い

ソシャゲはリリースしただけでは意味がなく、日々修正や改善の手が加えられていきます。先週と今週でページのデザインが一新、なんてこともありえます。

そんな時に画像をまとめてCSS書きなおしてーとかやってると死にます(リソースが十分あれば違うんでしょうけど)。

また、ユーザーの状態や時刻によって動的に切り替わる部分まで1枚の画像にまとめると不要なときには余計な容量読み込むことになるのであまり変わらない、なんてこともありえます(キャッシュを期待するのもありですが、端末ごとにキャッシュサイズが異なるのでAndroidだとびみょい)。

現状の方針

ここまで書いておいてなんですが無理をしないこと。これに尽きると思います。

  • スプライトとしてまとめる画像は項目やパーツごと(いつでもその部分だけ捨てられるように)
  • 動的な部分はすっぱり諦める(動的に切り替わる部分ほど目立たせたい部分だったりするので変更激しいですし)

可能な範囲で、日々の更新に支障がでないよう工夫して、けど速度を求める。このへんのバランス感覚を磨きながらちょっとずつ工夫するしかないですね、というオチ。

Android4.3(Nexus7)で文字入力してるといきなりGoogle検索が開いてうざい

いや、タイトルのママなんですが。

特にボタンも見当たらないのになんで立ち上がるんだと色々調べてたら、ホームボタンの長押しで起動するんですね、これ。

気づくかそんなもん。

なんでそんな人が誤操作しやすい場所にショートカット置くんだと思いましたが、よく考えると英字キーボードだとスペース入力ボタンなんですねここ。もうちょっとスワイプ入力ユーザーのこと考えて欲しかった。

とりあえずアプリの設定でGoogle検索を停止して一件落着。ホームに意味のない検索バーの残骸が残るのが目障りですが、まあ諦めます(これもどうよと思いますが)。

CODEPREPやってみた

無料でプログラミングが学習できるサービスが最近ちらほら増えてます

自分の中で「学習」という分野には強く興味があって、それをサービスとしてどうやって提供しているか興味シンシン。

で、今回はそんな中でCODEPREPってサービスを試してみて、今のところある学習項目全部終わったので感想をメモ。

CODEPREPってどんなサービス?

ブラウザ上で学習内容とエディタとビューワがセットになっていて、学んだことをその場で入力して出力内容を確かめながら学習をすすめるサービスです。

やってみてよかったこと

基礎を延々と繰り返すタイプではなく、HTMLとCSSを組み合わせるとこんなことができるんだよ、という表現のバリエーションをたくさん見せてくれるので復習にもなるし新しく覚えたことも多い。

とくに、表現のパターンなんて自分の中でどれだけのストックがあるかが重要(思いつけるほど天才ならいいんだけどね)なので、パターンを見せてくれるのはとても有りがたかった。そのままコードの一部を流用して仕事に活用できたこともあったし。

微妙だなと感じたこと

自分としては勉強にもなってためにもなったんだけど、「初学者が基礎を学ぶ」サービスとして見ると、

  • 範囲がやたら広い
  • ○○がしたいという明確な目的のある人か、全部を網羅的にやりたい人以外には何を最初にやればいいか、それが終わったら次は何を選べばいいのかがわかりにくい
  • 省略してる部分が多い(Javascript系は特に)

とくに省略してる部分がやっかいで、いざ自分で再現してみようと一から作業してみようとするとそこでつまずくことになるかなぁと。しかし、長ったらしいと多分みんなそれはそれで躓くんだよね。難しい……。

学習の方向性

学びたいことは多く、手を付けたいことも多く。

されど時間は有限で適当にあれこれ手をつけてたらそれこそ何もできない残念なエンジニアになりそう。

ってことをつらつらと考えているとやはりむやみに時間だけが過ぎていくので、ある程度方向性を絞りたいなと思いながら書いてみる。書くことでまとまるかもしれない。

やりたいこと一覧(業務に関係のある順)

じゃあ、どれからやるの?

絶対にやるべきものは割りと明確で、

この3つ。なぜなら現在進行形で業務で使用するから費用対効果が高い。

個人的に一番効率の高い学習環境って、業務で使用しながら学び続けることだと思っているのでその環境が用意されてるのはでかい。

では何に悩んでいるかというと、幅が広がらないから。

必要な勉強と投資としての勉強

必要な勉強はやればやるだけ「現在の業務」にはプラスになるから安心して学習できる。

けど、安心して学習できるはずの内容ばかりやってると「不安」がムクムクと沸き上がってくる。

今の業務内容が永遠に続くことなんてありえないんだから、先を見越して自分の手数を増やさないと気がついたら役立たずになってることが想像できるので、不安。

時間は有限。何に投資するか。自分なりの指標を作る必要がある。

なんかまとまらなくなってきたのでまた書く。

運動はじめました

運動なんて体に悪いと常日頃言ってたけど、医者と整骨院の先生に怒られたので少しだけ運動することに。

で、ウォーキングを始めてわかったこと。どれも普段運動してる人には当たり前すぎるんだろうけど、実際自分の体動かすとわかることって多い。

  • 靴のサイズ大事
  • 靴紐をしっかりむすぶの大事
  • 体からのフィードバック大事

靴のサイズ大事

まあ、のっけからなんだけど、普段歩いてない人が40分歩くとそりゃ無理もあるわけで、足裏にマメができてそれが潰れました。

運動不足以外の原因を調べてみると、どうも靴のサイズが原因の一つじゃないかと。私は足の幅が横に広いので幅が大きめのサイズの靴をよく買うのですが、広すぎたようで。

靴屋で足のサイズをちゃんと測ってもらったところ、縦横ともに1サイズ大きかったみたいです。そりゃ擦れるわ。

ちなみに靴は新しく買いました。

靴紐をしっかりむすぶの大事

靴屋さんに靴紐締めてもらったら歩く感覚が全く違う(靴は同じ)。歩く前に(靴を履く際に)しっかり閉めれば少なくとも擦れはだいぶましになってたかも。

体からのフィードバック大事

足裏の潰れた部分も治ってまた歩き始めたのですが、一度ケガをすると意識がちゃんと足に向かうので、それで色々わかってきます。

どうも私は足裏の力だけで歩こうとする癖があるらしく、歩く際の負荷が足裏に集中してるみたいなんですよね。なので、擦れると。

歩幅と腰つかって歩いたところ、疲労度は倍になるけど足裏の負担はさほどでもなくなったので歩き方から改善する余地があるかも。

多分これランニングだと走るのに精一杯で気が付かなかったんだろうと思うので、ウォーキング選んでよかった。

結論

トライアンドエラーを繰り返せると体動かすのも(1万歩ほど譲って)悪くないかも(と勘違いできそうなきがする)。

最近知ったAndroid関連情報

Android Development - Japan - コミュニティ - Google+
ぐぐたすでの日本語版公式コミュニティ。なぜもっと早く作らなかったし

Android アプリ品質ガイドライン - Google Japan Developer Relations Blog
公式ドキュメントを公式が翻訳。いや、そうじゃなくて、ドキュメントそのものを置き換えてください……

タブレット向けアプリ品質チェックリスト - Google Japan Developer Relations Blog
いや、そうじゃなくて(ry

Android Design 翻訳 by チームEGG
有志でAndroidデザインガイドの翻訳をしてくださってるサイト。ありがたや

Android Niceties
デザインガイドラインに則ったかっこいいアプリ集。素敵

オレオレ逆引きRuby目次

基本2.0系基準

もう、いちいち本開いたりググったりするのめんどくさい

参考サイト

参考文献

Ruby 逆引きレシピ すぐに美味しいサンプル&テクニック 232 (PROGRAMMER’S RECIPE)

Ruby 逆引きレシピ すぐに美味しいサンプル&テクニック 232 (PROGRAMMER’S RECIPE)