タグ: エンジニア

【コピペですぐできる】node.jsを使った画像の容量圧縮

【コピペですぐできる】node.jsを使った画像の容量圧縮

1~11のコマンドを実行すると画像の圧縮がすぐに行えるようになります

自分で導入する際にgulpやimageminを調べたりして
大変だったのでコピペだけで使えるようにまとめました。
ターミナルでコマンドを実行してください。

1 – nodebrewをインストール

brew install nodebrew

2 – yarnをインストール

brew install yarn

3 – npm init (npmを使うための設定)

npm init

4 – srcファイルを作成

mkdir src

5 – distファイルを作成

mkdir dist

6 – gulpfile.jsを作成

touch gulpfile.js

7 – gulpをインストール

npm install gulp

8 – imageminをインストール

imageminのnpm公式

npm i gulp-imagemin

9 – imagemin-mozjpegをインストール

imagemin-mozjpegのnpm公式
npm i imagemin-mozjpeg

10 – imagemin-pngquantをインストール

imagemin-pngquantのnpm公式

npm i imagemin-pngquant

ここまで実行するとこのようなディレクトリ構造になっています。

スクリーンショット 2019-02-09 17.35.34.png


├ dist              ・圧縮した画像が置かれる (ディストリビューションの略)
├ gulpfile.js          ・gulpの設定を行う
├ node_modules         ・nodeの設定が補完される
├ package-lock.json      ・nodeのバージョンを表記する
├ package.json         ・nodeの設定を記述する
└ src               ・圧縮前の画像を保管する

11 – gulpfile.jsに下記をコピぺする


 gulpfile.js
 const gulp = require('gulp');
 const distDir = 'dist';
 const srcDir = 'src';
 const imagemin = require('gulp-imagemin');
 const pngquant = require('imagemin-pngquant');
 const mozjpeg = require('imagemin-mozjpeg');

 gulp.task('img', () = {
  return gulp.src(srcDir + '/*.{png,jpg,gif}')
  .pipe(imagemin([
  pngquant('65-80'),// 配列を渡すと文字列を渡すようにエラーが出たので画質のみを設定
  mozjpeg({
   quality: 85,
   progressive: true
  }),
  imagemin.svgo(),
  imagemin.optipng(),
  imagemin.gifsicle()
  ]))
  .pipe(gulp.dest(distDir));
 });

実行


gulp img


png画像を圧縮

圧縮前 (37KB)


Using gulpfile ~/test_gulp/gulpfile.js
Starting 'img'...
gulp-imagemin: Minified 1 image (saved 25 kB - 67%)
Finished 'img' after 527 ms

圧縮後 (12KB)

jpg画像を圧縮

スマホで撮った写真を圧縮してみる。

圧縮前 (1.9MB)



Using gulpfile ~/test_gulp/gulpfile.js
Starting 'img'...
gulp-imagemin: Minified 1 image (saved 25 kB - 67%)
Finished 'img' after 571 ms

圧縮後 (1.2MB)

まとめ

画像容量を6割近く削減することができました。
デザイナーではない素人目ですが画像の劣化などあまり気になりませんでした。

・基本的に `gulpfile.js` を変更すれば設定を変更可能です。
・細かい圧縮の設定などを変更したい場合はリンクの公式のオプションを参考にしてみてください。

ここまでお読みいただきありがとうございました。

雑談:iPhoneXの画質すごい

エンジニアとして最短で成長するための戦略

エンジニアとして最短で成長するための戦略

僕は23歳でエンジニアをしています。
工業高校時代に機械のプログラミングに触れてプログラミングの楽しさを知ったのですが
周囲に流され大手メーカーで機械と電力系の仕事について3年ほど過ごしていました。
ですが本当にやりたいことはプログラミングだと思い転職を決意し
22歳の時に未経験からwebエンジニアとして働いています。

エンジニアとして最短で成長するための戦略

Read More Read More

エンジニアの1日の仕事の流れ

エンジニアの1日の仕事の流れ

エンジニアの1日の仕事の流れ

エンジニアになる前のイメージと実際になってみてからのギャップが大きかったので書いてみます。

SESドナドナ時代

エンジニアになりたい方で「SESってなに?」という方は必ず検索しましょう。

WEB系でブラックの代名詞とも呼ばれる悪しき業態です。事前に把握して避けるのが無難です。

自分はエンジニアとして働き始めた時はSESでソシャゲのイベント開発・運用現場に派遣されていました。

チーム内容

エンジニア2名、QA兼企画3名

初めての仕事はHTMLとCSS、たまにJavaScriptを使ったマークアップでした。

ソシャゲは連休前(特に年末年始)が繁忙期で施策が多いので残業が多い傾向にあります。

1日の流れ

  • 10時〜 勤務開始
  • 10時20分〜 朝会
  • 10時40分〜 作業開始(コーディング作業)
  • 12時30分〜 昼休み兼ランチ
  • 13時30分〜 午後の仕事開始
  • 15時〜 エンジニアの勉強会
  • 16時〜 ミーティング(イベントや企画やQAの方と仕様やスケジュール確認など)
  • 17時〜 コーディング作業
  • 〜19時 業務終了

こんな感じでした。意外かもしれませんがほぼ毎日定時で帰っていました。

繁忙期は残業することもありましたが稀でした。

また派遣された企業がいい職場でエンジニアの勉強会に時間を割いている企業で勤務業態に関係なく参加できた為、様々な知識を身につけることができました。

転職して上場企業時代

転職してからはソーシャルゲームの開発を行なっています。超有名タイトルのためかなりの大所帯です。

チーム内容

エンジニアだけで25名以上、チーム全体で50名を超えます。

開発は仕様変更で残業しなければいけないことがとにかく多いです。

ここで確認のためにコミュ力が問われます。

1日の流れ

  • 9時30分〜 勤務開始(メールチェックやチャット確認)
  • 10時〜 フロントチーム朝会(担当タスクの確認や連絡事項の共有)
  • 10時30分〜 デイリースクラム(スクラム開発を採用)
  • 11時〜 ミーティング
  • 11時30分〜 その日に着手するタスクを着手開始
  • 12時〜 昼休み兼ランチ
  • 13時〜 午後の作業開始(ここでタスクに本着手)
  • 15時〜 エンジニア技術共有
  • 15時30分〜 再度作業再開
  • 18時30分 定時(軽食など軽く休憩)
  • 22時〜24時 業務終了

WEB系企業でよく取り入れられるアジャイル開発を行なっています。そのため日中の半分は他のエンジニアや企画とのコミュニケーションです。

ここでしっかりと仕様を固めないと手戻りなどが発生してしまうため仕事を進めていく上で重要な要素の一つです。

開発は運用よりも多忙なことが多く残業がとにかく多いです。定時で帰れる日は2か月に1回ほどです。

また期限などに追われている時は休日も出勤したりしています。とにかく全てを仕事に捧げている感じです。

まとめ

自分がエンジニアになって過ごしてき1日の流れを書いてみました

自分にあった働き方を考えるのは重要です。本当に!

とにかく仕事をして実績を積みたい人もいれば自分の時間や家族との時間を尊重する働き方もありです。

同じエンジニアの仕事でもスキルや実績を積んでフルリモートやフリーで契約されている方もいて様々な働き方ができるのがエンジニアの魅力なので一度今の自分にあった働き方を考えてみるのをおすすめします!

ご一読ありがとうございます。

未経験からエンジニアになってみて

未経験からエンジニアになってみて

未経験からエンジニアになってみて

プログラミングを学び出してからエンジニアになって2年以上経ったので少しまとめてみます。

簡単なプロフィール

  • 工業高校卒、18年間九州の海と畑しかないど田舎で育つ
  • 高卒で東芝に入社3年半勤務する
  • 大企業で安泰だと思っていたが不正会計問題で転落したので興味があったエンジニアに転向する
  • 派遣系中小企業にエンジニアとして入社。ドナドナされる。
  • 現在は上場企業のエンジニアとして勤務

まずプログラミングに触れよう、まずはそれから

自分がプログラミングに触れたのは工業高校での授業がきかっけでした。最新の言語ではなくシーケンスというすごいニッチなプログラミングでコンベアやライトを光らせたりしていました。

これが自分にとって初めてのプログラミングでした。

プログラミングに夢中になれるかどうかはエンジニアを目指すうえで一番重要になってきます。

手を動かしてできなかったことができるようになることが喜び

プログラミングの醍醐味は何と言っても自分のイメージが形になって行くことです。思い通りにいかないこともありますがどうやったらうまく行くかを考えて工夫を続けていける人がエンジニアに向いているんじゃないかと思います。

未経験だと実務経験がないので最初の仕事はSESだった

エンジニアになる上で一番の壁は最初の実務経験をどう積むかだと思います。いまの知識がある状態だったら絶対あり得ないのですが自分はSESというエンジニアを派遣する会社に入社し業務委託としてドナドナされる道を選びました。

わからないに飛び込んでできるようになるのが最短、ハードルは高く

派遣される際に意識したのは現場の業務の難易度が今の自分のスキルと比較して高いかどうかでした。いまのスキルでできることを仕事にしても成長は無いと思って行きないりブラウザゲームの開発・運用にアサインされました。

エンジニアにコミュ力は必要ないは大嘘

エンジニアとして働き始めて驚きだったのがずっとパソコンとにらめっこというイメージが大きかったのですが実際には企画やQAなど違う職種との会話や認識合わせがとにかく重要だということです。

コミュ障=エンジニア のイメージは間違っていたことを思い知りました。

ミスを指摘してくれたり教えてくれる人は重要

最初の現場で気づいたことが今までほぼ一人でプログラミングをしていたのですが他の方と仕事をするようになりコードの書き方などが我流でいろいろ指摘してもらいコードレビュー文化の重要性を感じました。

エンジニアとしての仕事の進め方なども先輩エンジニアに教わりながら成長することができました。

業界には未経験からエンジニアになって大成している人は多い

この業界に来て驚きだったのは元バンドマンや調理師など未経験からエンジニアになった人が多いことでした。特に資格も必要ないためなるためのハードルが低いことは知っていましたがこれには驚きでした。

不思議なことに低学歴のエンジニアでも凄い方は多いので高卒の自分にとっては大きな追い風でした。

文系理系は関係ないが学習し続けられないと辛い

よく文系でもエンジニアになれるかなどの話がありますが関係ないと思っています。

ただ、エンジニアになる以上常に自分の興味がある内容や業務で必要とされる技術の学習をしなければなりません。業界年数が少なければなおさらです。
自分の課題を意識し自走できないとエンジニアとしてやって行くのは大変だと思い自分も日々学習を続けています。

まとめ

未経験からエンジニアになりましたが学習意欲と負けん気があれば自分次第でどんどん成長できる業界だと思います。

ブラック企業やブラック上司はどの業界にもあるので距離をおいて自分に火の粉が降りかからないように意識するのは大事です。

個人的な意見ですがいい会社ほど優秀さと人間性が伴ったエンジニアが多いのでやはりより良い環境を求めて自分を磨き続けることが重要だと思います。

一読ありがとうございました。