manmanrai’s diary

新米フロントエンジニアの勉強記録ブログ

現在の仕事に合わせた開発環境(2017/06時点)

現在の仕事

記録のために、この記事を書きたいと思います。
今は(採用、広告)制作会社に勤めています。仕事は、大体静的なページが多いです。
例えば会社のコーポレートサイトや新卒採用サイトなど、広告寄りのサイトはランディングページなど単発なお仕事がメインです。

更新する部分が少ないため、ほぼフロントエンド側で完結できるな案件です。 ページ数もそんなに多くありません。多いときはせいぜい10ページから20ページぐらいです。

フロントエンドを極めたいなら、恐らくほとんどの方正確性や効率化を追求し始めるでしょう。 もう単純なhtml,css,javascriptを書くのは効率が悪く感じられるではないかなと思うでしょう。

そこでコンパイル必要な環境を構築し始まります。 codepenでpug,scss,sass,perl,typescriptなど便利なもの使ってらっしゃる方々よく見かけますね。

SASS

公式サイト:

Sass: Syntactically Awesome Style Sheets

最初に注目したのはsassでした。 cssって、ファイル長くなりがちなので、デザイナーさんから貰ったデザインデータたまにフォントサイズが違ったりしますので、 それで同じサイトなのに、そこでバラツキなったの個人的に気持ち悪くて、品質管理のところでも力なれたらいいなと思いまして、sassも使い始めました。

変数が使えるのがとても便利です。
extendやmixiなど機能も使えます。同じサイトで細かい色やサイズ揃えたい時(統一感)すごく助かります。
そして、一気にコードを圧縮してくれるの、そのままファイルサイズも軽くなれるのかなり良いかなと思いました。

PUG

公式サイト:

Getting Started – Pug

次はpugです。 例えば納品前の段階で全htmlファイルにある部分変更したら、いちいち手作業で変更しなければなりません。 そこでミスしたら、よく見落としたりして、本番にアップされても気づくまで結構時間経つし、 後でクレームなりやすい、リスク背負うことになるじゃないかなと思います。

もちろん、解決方法色々あると思うですが、 例えばssiとか、良いサーバーで使えるなか助かるのですが、結局お客さん側のサーバーに頼ることになって、必ずできるの保証がありません。
pugのincludeとかほぼssiと同じ感覚で、変数など使った、if elseなど使ってページよって違うもの入れるこのもできます。 すごく便利だと思います。

まとめ

多分、ここまで来たら、どうしてglupなど全自動化なもの使わないだどう疑問持ったりするかもしれません。 確かにglup使ったら画像圧縮やjs圧縮など面倒なこと一気にやってくれるだと思いますが、ただ、最初にも申し上げましたが、うちの会社の案件本当にページ数少なすぎて、そこまで開発環境を整ってから、開発スタートするのも時間もったいないと思っております。

現状はpug,scss,javascript/typejavascriptさえあれば、すぐコーディング始める手軽バージョンが今の自分んにとってのベストかもしれません。 今使ってるパソコンは一応glupの環境も作れますが、未だに出番がなかったです。 自分には必要がないと判断しましたが、10ページのサイトでもglupを導入する方社内には二人にもいます。どっちが正解、不正解なんかないから、コーディングする自体って、結構各自のスタイルありますし、もしかして、自分はただglupなど全自動コンバイラーの良さ分かってないだけかもしれないですね。

そういう機会あったら、大型案件と出会ったら、使ってみたいと思います。
これからも技術と共に一緒に進化し続けたいと思っております。

【新】Pixi.js でパララックススクローラーを作ってみる【第三回】

プロローグ

前回はFarとMidを独立させて、update functionも各自持たせるように変えました。
次はScroller functionを作って、FarとMidを配下に入れて、コントロール権をScrollerに持たせます。

Part2(続き)

Ch03 動作メソッド化

Scrollerに任せる

function init(){
  // レンダラーのサイズを指定する、コンテナ(枠)を作る
  var renderer = PIXI.autoDetectRenderer(512, 384, {view:document.getElementById("game-canvas")}),
      stage = new PIXI.Container();

  // // 画像を呼び出す(Far function使用)
  // far = new Far();
  // stage.addChild(far);

  // // 画像を呼び出す(Mid function使用)
  // mid = new Mid();
  // stage.addChild(mid);

  // 画像をまとめて呼び出す
  scroller = new Scroller(stage);

  requestAnimationFrame(update);


  // update functionの中身
  function update(){

    // 組み合わせたタイルを左へずらす
    scroller.update();
    // far.update();
    // mid.update();

   // コンテナの内容をレンダラーに伝える(setup functionから持ってくる)
    renderer.render(stage);

    // 描画処理を繰り返しupdate functionを実行する
    requestAnimationFrame(update);
  }
}


// Far画像を独立させる
function Far() {

  // 画像を読み込む、textureという名で
  var texture = PIXI.Texture.fromImage("images/bg-far.png");

  // タイル貼る範囲を指定する
  PIXI.extras.TilingSprite.call(this, texture, 512, 256);

  // 位置を指定(全てのデフォルトは0)
  this.x = 0;
  this.y = 0;
  this.tilePosition.x = 0;
  this.tilePosition.y = 0;
}
Far.prototype = Object.create(PIXI.extras.TilingSprite.prototype);
// update function追加
Far.prototype.update = function() {
  this.tilePosition.x -= 0.128;
};

// Mid画像を独立させる
function Mid() {

  // 画像を読み込む、textureという名で
  var texture = PIXI.Texture.fromImage("images/bg-mid.png");

  // タイル貼る範囲を指定する
  PIXI.extras.TilingSprite.call(this, texture, 512, 256);

  // 位置を指定(全てのデフォルトは0)
  this.x = 0;
  this.y = 128;
  this.tilePosition.x = 0;
  this.tilePosition.y = 0;
}
Mid.prototype = Object.create(PIXI.extras.TilingSprite.prototype);
// update function追加
Mid.prototype.update = function() {
  this.tilePosition.x -= 0.64;
};


// farとmid二枚画像をまとめる
function Scroller(stage){
  this.far = new Far();
  stage.addChild(this.far);

  this.mid = new Mid();
  stage.addChild(this.mid);
}
// updateもまとめる
Scroller.prototype.update = function(){
  this.far.update();
  this.mid.update();
}

window.onload = init;
続きを読む

【新】Pixi.js でパララックススクローラーを作ってみる【第二回】

プロローグ

前回は画像を貼って、アニメーションまで完結しました。
これからの第二回と第三回はコードのメソッド化していきます。

Part 2

Ch02 画像メソッド化

Far functionにを作る

function init(){
  // レンダラーのサイズを指定する、コンテナ(枠)を作る
  var renderer = PIXI.autoDetectRenderer(512, 384, {view:document.getElementById("game-canvas")}),
      stage = new PIXI.Container();


  // 画像を読み込む
  var farTexture = PIXI.Texture.fromImage("images/bg-far.png");

  // タイル貼る範囲を指定する
  // far = new PIXI.extras.TilingSprite(farTexture, 512, 256);
  far = new Far(farTexture, 512, 256);

  // 位置を指定(全てのデフォルトは0)
  far.x = 0;
  far.y = 0;
  far.tilePosition.x = 0;
  far.tilePosition.y = 0;

  stage.addChild(far);


  // 画像を読み込む
  var midTexture = PIXI.Texture.fromImage("images/bg-mid.png");
  // タイル貼る範囲を指定する
  mid = new PIXI.extras.TilingSprite(midTexture, 512, 256);

  // 位置を指定(全てのデフォルトは0)
  mid.x = 0;
  mid.y = 128;
  mid.tilePosition.x = 0;
  mid.tilePosition.y = 0;

  stage.addChild(mid);

  requestAnimationFrame(update);


  // update functionの中身
  function update(){

    // 組み合わせたタイルを左へずらす
    far.tilePosition.x -= 0.128;
    mid.tilePosition.x -= 0.64;

   // コンテナの内容をレンダラーに伝える(setup functionから持ってくる)
    renderer.render(stage);

    requestAnimationFrame(update);
  }
}



// Far画像を独立させる
function Far(texture, width, height) {
  PIXI.extras.TilingSprite.call(this, texture, width, height);
}
Far.prototype = Object.create(PIXI.extras.TilingSprite.prototype);

window.onload = init;
続きを読む

【新】Pixi.js でパララックススクローラーを作ってみる【第一回】

プロローグ

前回のものをもう一回見直して、コードを綺麗に整理しないとここにアップしないと決めました。まだまだ未熟なので、説明うまく伝えないところ、間違ってるところあれば、いつでもご指導頂ければ嬉しいです。
宜しくお願いいたします。

出処

Pixi.js公式サイトがお薦めのチュートリアル

Tutorials - PixiJS v4

kittykatattackさんのチュートリアルを勉強した上に

GitHub - kittykatattack/learningPixi: A step-by-step introduction to making games and interactive media with the Pixi.js rendering engine.

Christopher Calebさんのチュートリアルを参照しながら作ってみたものになります。

Building a Parallax Scroller with Pixi.js: Part 1

続きを読む

Pixi.js でパララックススクローラーを作ってみる【反省】

反省

チュートリアルを見ながら作ってましたが、理解間違ってるところあるじゃないかなと思って、part1から勉強し直しました。
そして、やっぱりミスを発見しました。


pixi.jsの最初のkittykatattackさんのチュートリアル
GitHub - kittykatattack/learningPixi: A step-by-step introduction to making games and interactive media with the Pixi.js rendering engine.

で学んだことを生かして、Christopher Calebさんのチュートリアル
Building a Parallax Scroller with Pixi.js: Part 1

を改造しながら、勉強したいと思ってました。


しかし、中途半端な理解で新しいことを取り込もうとしたら、あまりきれいじゃないコード書いちゃって、間違ってるコードもありました。
普通に動作はしますが、余計なものも入ってました。しかもブログで公開しちゃいました。 チュートリアルとしては一番やっちゃいけないことをやってしまいました。 ご迷惑をかけてしまって、誠に申し訳ございません。

今できることは、 このシリーズの全コードも見直し、もう一回正しいコードを公開したいと思います。既に前に公開したコードを読んだ方、申し訳ないのですが、一緒にコードを見直していきましょう。