Articles tagged 'フロントエンド系技術'

    webpackでejsを使い、共通要素をインクルードして効率的にやりたいよね。

    フロントエンド系技術 フロントエンドエンジニア npm Node.js Yarn webpack ejs


    Posted on 2017-02-10


    数ページのサイトとはいえテンプレ化はしたい、includeを使うと共通要素を外部ファイル化できて効率いいよね。

    サンプルとしてファイルは以下におてます。
    https://github.com/shigekitakeguchi/yarn-webpack-ejs

    ちょっとした、例えばブランドサイトとかキャンペーンサイト、小規模な企業や組織、お店のサイトというと構成によっては1ページってこともあるけど数ページから20ページくらいの規模になると思う。
    いやいやもっとあるよってことになるかもしれ...

    もっと読む

    npmがわりとゆるふわ過ぎたのでYarnに移行するか検討するためにいろいろやってみた

    フロントエンド系技術 フロントエンドエンジニア npm Node.js Yarn


    Posted on 2017-02-05


    https://yarnpkg.com/

    Facebookが作ったというnpmとの互換パッケージマネージャ

    Node.js系のパッケージマネージャーといえばnpmです。いろいろありますがかなり便利なのでずっと使ってました。
    ただnpmで管理していたパッケージの機能がローカルでは動くけど、どうも本番で動いてないんじゃない?的なことがあって
    どうやらそのパッケージのバージョンの違いで動いてない的なことが起こっているんじゃないか疑惑があってnpmってそういえば、
    バージョンとかけっこうゆるふ...

    もっと読む

    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/
    で、ソシャゲーとか作ってるとアクセスは多いし負荷とな...

    もっと読む

shigeki.takeguchi

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

By year

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

© 2012 shigeki.takeguchi