webpack+spritesmithでページの高速化、複数のスプライト画像とRetina対応について

フロントエンド系技術 フロントエンドエンジニア webpack spritesmith


Posted on 2017-01-31


webpack-spritesmithで複数のスプライト画像を作るってどうやるのか今ひとつわからなくてやってみたやり方の紹介。
やってみたら単純なことですね。SpritesmithPluginをnewしてpluginに複数設定してやればいい。 元となる画像をディレクトリわけて配置してそれぞれのディレクトリからスプライト画像を作る。
わける基準は例えばスプライト化した画像を最適化(減色をする)場合なんかは色味でわけると減色効率がよかったりする。
赤系は赤系だけでスプライト化するとかね。

...もっと読む

webpack+spritesmithでページの高速化

フロントエンド系技術 webpack spritesmith


Posted on 2017-01-30


ページの表示を高速化しようとしたら手法はいろいろあるけどフロントエンドエンジニアができることのひとつに画像のスプライト化ってのがある。
たくさんの画像ファイルをサーバーへリクエストして表示ってのをやるとサーバーの負荷になる。 負荷になると応答が遅くなる。こういうことからリクエスト数を減らせば表示の高速化が見込まれたりするので少しでも快適にページを観てもらおうと思えばやったほうがいい。

http://compass-style.org/
で、ソシャゲーとか作ってるとアクセスは多いし負荷とな...

もっと読む

iPhone 7 Plusのケースで迷った件。

iPhone 7 Plus 5.5インチ Anker iPhoneケース


Posted on 2017-01-27


iPhoneのケースにこだわることもそこまでなくて透明のシンプルなものか黒、前回のiPhone 6sはアップルの純正の皮のを使ってた。
iPhone 7 Plusにして5.5インチの画面がやっぱり大きいというのもあったのでこれで映画を観る機会も増えるかなー、そしたら手帳型の方だったら自律して立つよなーとか思ってた。
iPhone 7 Plusが到着するっていうんでいろいろ探したらカメラが2つあるってことでiPhone 6s Plusと互換性がない、
じゃあ7 Plusに対応したやつじゃない...

もっと読む

iPhone 7 Plus 128GB ジェットブラックの入手顛末と3ヶ月ほどの使用感。

iPhone 7 Plus ジェットブラック Apple Pay モバイルSuica


Posted on 2017-01-22


予約完了時刻は『2016/09/09 16:02:43』と書いたけどauオンラインショップから「本申し込みのご案内」がきたのが10月5日で入手できたのが予約から1ヶ月たった10月8日。 iPhone3Gから毎年機種変更を繰り返して、この端末で9台目。いやはや、こんなにも端末を替えていくことになるとは当時はまったく想像していなかったな。
最初のころはもう四苦八苦して端末を予約して手に入れていたと思うけどここのところそこまで予約から待つことはなくなったなと思ってた。
けど今回はなかなか長く...

もっと読む

iPad Pro9.7インチとApple Pencilの手書き入力は革新的。

iPad Pro Apple Pencil Anker


Posted on 2016-09-28


iPad Pro9.7インチとApple Pencilを購入した。
iPhone 7 Plus 128GB ジェットブラックの入荷連絡がまったくないけどそれなりに穏やかに待つ気になっているのはこのiPad Pro9.7インチとApple Pencilで新しガジェット欲求とでも言うんだろうか「新しいガジェットを使って何か新しい体験をしてみたいぞ」という心情をある程度満たされているからかもしれない。

iPad歴は初代から→iPad 2→iPad Retina→iPad mini Retina...

もっと読む

iPhone 7 Plus 128GB ジェットブラックをauの機種変更で予約した件。

iPhone 7 Plus ジェットブラック


Posted on 2016-09-27


予約は完了したらしいが、もちろんまだ本申込みの連絡はない。
端末が確保でき次第連絡がくることになっているので、要するにまだ確保できていないということになる。
iPhone 7 Plus 128GB ジェットブラックをauのオンラインショップで機種変更、予約完了時刻は『2016/09/09 16:02:43』。
予約開始が2016/09/09 16:01:00だったのでけっこうイケてる感じの完了時刻だと思う。
どこかのブログではあらかじめ入力する内容を書いておいてそれをコピペすれば早いっ...

もっと読む

台北でマンゴーかき氷を食べまくった。(台湾、4泊5日の旅を格安航空バニラエアで安く行ってみた。)

アジア 台湾 台北 マンゴーかき氷 バニラ・エア


Posted on 2016-09-05


Untitled

隙があったら小籠包、そしてその後はマンゴーかき氷。で、どこが美味しいの?ということで今回の旅行では5店舗で食べました。
台北に夏に行ったらマンゴーかき氷でしょ。マンゴーが安くて美味しい。日本のかき氷と違うところはふわさら感の氷。
どこもレベルが高すぎて甲乙つけがたい。

関連ランキング:かき氷 | 雙連駅周辺

ここは4月から10月まで期間限定でやっているんですね。
ふわさらのミルク氷にマンゴーどっさり。店によってマンゴーの味にばらつきがあるのが発見でした。

もっと読む

台北で小籠包を食べまくった。(台湾、4泊5日の旅を格安航空バニラエアで安く行ってみた。)

アジア 台湾 台北 小籠包 バニラ・エア


Posted on 2016-09-02


Untitled

隙があったら小籠包。どこが美味しいの?ということで今回の旅行では3店舗で食べました。 熱々の小籠包に生姜をのせて酢醤油でハフハフと食べると最高ですよね。 食べることに集中しすぎて写真撮るの忘れたので街で見かけたピカチューの写真です。

関連ランキング:台湾料理 | 市政府駅周辺

まずは、台北で小籠包ならここは外せないだろうということで「鼎泰豊(ディンタイフォン) 101店」。本店はかなり待つので101店に行きました。
日本でも店舗があってさすが人気店でいつ...

もっと読む

台湾、4泊5日の旅(格安航空バニラエアで安く行ってみた)。台風9号でまったく飛び立てる気がしない初日。

アジア 台湾 台北 バニラ・エア


Posted on 2016-09-01


Untitled

会社を5日間休んで(計9日連続の休み!)4泊5日で台湾に行ったわけですが初日は何と関東に直撃した台風の上陸ともろかぶりでした。まずはその顛末から。

台湾まで飛行機で約4時間。それくらいの時間だったら格安航空の座席でもまぁ大丈夫だろうということでバニラ・エアにしました。
もともとは朝8時50分に成田発だったのが機材調整やらで12時05分出発に遅延。台風の上陸予想が昼過ぎだったので嫌な予感がしながら成田に向かいました。

格安航空だったので第3ターミナル。しかし第3ターミナルって駐車場も...

もっと読む

npmとwebpackで作るVue.js、学習のためのいい感じのフロントエンド開発環境 2016年8月の場合。

JavaScript webpack npm Vue.js


Posted on 2016-08-10


npm+webpack+vuejs

Vue.js

Vue.jsは日本語のドキュメントも整備されていて情報も多いので助かりますね。
でそのVue.js + webpackでいい感じの環境を作る必要があって用意してみました。

  • Vue.js
  • webpack
  • vue-router(あったほうが良さそうなので使います)
  • Babel(これもあったほうが良さそう的なので使います)
  • サーバーとのHTTP通信はjQueryを使います(元々プロジェクトに入っていたのでさらに追加するよりもいいだろうという判断です)

必要なものあるか...

もっと読む

shigeki.takeguchi

渋谷の某ソーシャルゲームの会社でフロントエンドエンジニアとして働いてます。20世紀よりウェブ業界。気づいたらアラフィフ業界人です。
まだまだ現場で粘り強く作る側でいたいと思います。

By year

  1. 2017 (14)
  2. 2016 (23)
  3. 2015 (13)
  4. 2013 (15)
  5. 2012 (21)
  6. 2011 (34)

© 2012 shigeki.takeguchi