フロントエンドエンジニアを目指して
2015年03月23日
ここ数年Web開発に関わってきてシステムの開発だけでは生きていけないと実感し、
やっとマークアップの作業にも手を出し始めました今日このごろです。
タイトルの通り、フロントエンドエンジニアを目指してということで、
デザインチームの勉強会に混じりWEBフォントの自作を行ってみました。

皆さんは、gulpというタスク自動化ツールをご存知でしょうか?
自分も勉強会に出るまで名前すらしならなかったのですが、
少し調べてみるとCSS、JSファイルの圧縮、結合、Sassのコンパイル、AWSのS3へのファイルアップロード
など、タスクを自分で組めばかなり色々なことができるようです。
今回はそのgulpを使ってWEBフォントを作成するということで、
gulp導入までをとりあえず備忘録として書いていきたいと思います。
手順としては、
Homebrewのインストール>nodebrewのインストール>gulpのインストール
となります。
あ、ちなみに導入についてはMacが前提となりますので。。。
Windowsの方はそっと閉じて下さい。
Homebrewとは、なんぞやっという話になると思うのですが、
簡単に言うと、コマンド一発でソフトウェアのインストール、アンインストールができるものっと思っていただければOKだと思います。
では早速、Homebrewのインストールですが、
Homebrew 公式サイトに書かれているように以下のコマンドをterminalで入力+EnterしていただければOKです。
Xcodeをインストールしている方は、何事もなくインストールが完了すると思いますが、
インストールしていない方はCommand Line Toolsのインストール等を求められますので、インストールしてください。
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
インストール後、以下のメッセージが表示されれば完了です。
==> Installation successful!
You should run `brew doctor' *before* you install anything.
上記のインストール作業が完了後、以下のコマンドをterminalで実行してください。
brew doctor
Warning等が表示されていなければ、Homebrewのインストールは完了です。
nodebrewですが、node.jsを自分のマシン内でバージョン管理するためのツールです。
node.jsを普通にインストールするでも全然構いませんが、nodebrewをインストールしておけば、バージョンの切り替えが簡単に行えてかなり便利です。
nodebrewのインストールは、homebrewを使ってインストールしますので、
上記のhomebrewのインストールを行っていることを前提とします。
まずはhomebrewでnodebrewがインストール可能かを確認するため、
以下のコマンドをterminalで実行してください。
「No formula found for ...」等のメッセージが表示されず、「nodebrew」と表示されればインストール可能です。
brew search nodebrew
では、次にインストールですが、以下のコマンドをterminalで実行してください。
brew install nodebrew
最後にインストールを確認するために、以下のコマンドをterminalで実行してください。
nodebrewのバージョンが表示されれば、無事インストール完了となります。
nodebrew
nodebrewでインストールするnode.jsにパスを通す必要があるため、
「~/.bash_profile」ファイルに以下の内容を追記して、「source ~/.bash_profile」をterminalで実行してください。
export PATH=$HOME/.nodebrew/current/bin:$PATH
.bash_profileはFinderからはそのままだと確認できないため、
terminalで「vi ~/.bash_profile」を実行してもらい、編集するのが楽だと思います。
viについては、通常のテキストエディタと編集の仕方が異なりますので、「vi linux」等で調べてください!
nodebrewを使用して、node.jsをインストールします。
以下のコマンドをterminalで実行してください。
nodebrew install-binary "version" version部分は自分がインストールしたいversionに置き換えてください
今回使用したバージョンはv0.10.36なので、「nodebrew install-binary v0.10.36」となります。
以下のコマンドをterminalで実行すると、nodebrewでインストールしたnode.jsの一覧が表示されます。
currentについては、現状使用しているnode.jsのバージョンのため、何も設定していない場合は「none」と表示されます。
nodebrew list
nodebrewでインストールしたnode.jsの一覧から、使用するnode.jsを指定するために、
以下のコマンドをterminalで実行するします。
nodebrew use "version" version部分は自分がインストールしたいversionに置き換えてください
最後に以下のコマンドをterminalで実行し、自分が指定したバージョンが表示されれば、
nodebrewのインストール、設定が完了となります。
node -v
ここで、Errorが出る場合は、パスを通すことに失敗している場合が多いので、
「~/.bash_profile」の内容確認、または、「source ~/.bash_profile」を実行をしてみてください。
gulpの説明については、上記で説明しているので割愛させていただきます!
以下のコマンドをterminalで実行するだけで完了です。
npm install -g gulp
これでWarning等が表示されなければインストール完了です。
今回インストールしたものはすべてterminalからコマンドを打って行いました。
システムに関わっている人にとっては、簡単だとは思いますが、デザイナーの方には取ってはかなりハードルものとなりますので、助けになれば幸いです。
次回はインストールしたgulpの設定、タスクの作成について書いていきたいと思います!
やっとマークアップの作業にも手を出し始めました今日このごろです。
タイトルの通り、フロントエンドエンジニアを目指してということで、
デザインチームの勉強会に混じりWEBフォントの自作を行ってみました。

皆さんは、gulpというタスク自動化ツールをご存知でしょうか?
自分も勉強会に出るまで名前すらしならなかったのですが、
少し調べてみるとCSS、JSファイルの圧縮、結合、Sassのコンパイル、AWSのS3へのファイルアップロード
など、タスクを自分で組めばかなり色々なことができるようです。
今回はそのgulpを使ってWEBフォントを作成するということで、
gulp導入までをとりあえず備忘録として書いていきたいと思います。
手順としては、
Homebrewのインストール>nodebrewのインストール>gulpのインストール
となります。
あ、ちなみに導入についてはMacが前提となりますので。。。
Windowsの方はそっと閉じて下さい。
Homebrew
Homebrewとは、なんぞやっという話になると思うのですが、
簡単に言うと、コマンド一発でソフトウェアのインストール、アンインストールができるものっと思っていただければOKだと思います。
Homebrewのインストール
では早速、Homebrewのインストールですが、
Homebrew 公式サイトに書かれているように以下のコマンドをterminalで入力+EnterしていただければOKです。
Xcodeをインストールしている方は、何事もなくインストールが完了すると思いますが、
インストールしていない方はCommand Line Toolsのインストール等を求められますので、インストールしてください。
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
インストール後、以下のメッセージが表示されれば完了です。
==> Installation successful!
You should run `brew doctor' *before* you install anything.
Homebrewのインストール確認
上記のインストール作業が完了後、以下のコマンドをterminalで実行してください。
brew doctor
Warning等が表示されていなければ、Homebrewのインストールは完了です。
nodebrew
nodebrewですが、node.jsを自分のマシン内でバージョン管理するためのツールです。
node.jsを普通にインストールするでも全然構いませんが、nodebrewをインストールしておけば、バージョンの切り替えが簡単に行えてかなり便利です。
nodebrewのインストール
nodebrewのインストールは、homebrewを使ってインストールしますので、
上記のhomebrewのインストールを行っていることを前提とします。
まずはhomebrewでnodebrewがインストール可能かを確認するため、
以下のコマンドをterminalで実行してください。
「No formula found for ...」等のメッセージが表示されず、「nodebrew」と表示されればインストール可能です。
brew search nodebrew
では、次にインストールですが、以下のコマンドをterminalで実行してください。
brew install nodebrew
最後にインストールを確認するために、以下のコマンドをterminalで実行してください。
nodebrewのバージョンが表示されれば、無事インストール完了となります。
nodebrew
nodebrewのパスを通す
nodebrewでインストールするnode.jsにパスを通す必要があるため、
「~/.bash_profile」ファイルに以下の内容を追記して、「source ~/.bash_profile」をterminalで実行してください。
export PATH=$HOME/.nodebrew/current/bin:$PATH
.bash_profileはFinderからはそのままだと確認できないため、
terminalで「vi ~/.bash_profile」を実行してもらい、編集するのが楽だと思います。
viについては、通常のテキストエディタと編集の仕方が異なりますので、「vi linux」等で調べてください!
node.jsをインストール
nodebrewを使用して、node.jsをインストールします。
以下のコマンドをterminalで実行してください。
nodebrew install-binary "version" version部分は自分がインストールしたいversionに置き換えてください
今回使用したバージョンはv0.10.36なので、「nodebrew install-binary v0.10.36」となります。
node.jsの指定
以下のコマンドをterminalで実行すると、nodebrewでインストールしたnode.jsの一覧が表示されます。
currentについては、現状使用しているnode.jsのバージョンのため、何も設定していない場合は「none」と表示されます。
nodebrew list
nodebrewでインストールしたnode.jsの一覧から、使用するnode.jsを指定するために、
以下のコマンドをterminalで実行するします。
nodebrew use "version" version部分は自分がインストールしたいversionに置き換えてください
最後に以下のコマンドをterminalで実行し、自分が指定したバージョンが表示されれば、
nodebrewのインストール、設定が完了となります。
node -v
ここで、Errorが出る場合は、パスを通すことに失敗している場合が多いので、
「~/.bash_profile」の内容確認、または、「source ~/.bash_profile」を実行をしてみてください。
gulp
gulpの説明については、上記で説明しているので割愛させていただきます!
gulpのインストール
以下のコマンドをterminalで実行するだけで完了です。
npm install -g gulp
これでWarning等が表示されなければインストール完了です。
まとめ
今回インストールしたものはすべてterminalからコマンドを打って行いました。
システムに関わっている人にとっては、簡単だとは思いますが、デザイナーの方には取ってはかなりハードルものとなりますので、助けになれば幸いです。
次回はインストールしたgulpの設定、タスクの作成について書いていきたいと思います!
新卒採用始まりました!
2015年03月09日
花粉症のシステムエンジニア高山です。
各企業の採用が始まりましたね。
今年から、3月から会社説明会が始まり、選考は8月からと、数ヶ月(3ヵ月くらい?)後ろ倒しとなりました。
それに合わせてか、採用に関するニュースもかなり見られるようになってきました。
そんな、企業が採用真っ只中のなか、下記のような記事が出ており、webやIT系の重要性を言っています。
総広告費は6兆1522億円と前年比2.9%増で、3年連続で前年比プラスに。
インターネット広告費は前年比12.1%増の1兆519億円と、初めて1兆円を超えた。
http://www.itmedia.co.jp/news/articles/1502/24/news114.html
注目すべきは、
・新聞は前年比1.8%減の6,057億円
・雑誌は前年比横ばいの2,500億円
・ラジオは2.3%増の1,272億円
3媒体の合計額「9,829億円」を超える金額であるということ。
それだけ、webが広告媒体として重要視されてきているということ。
まぁ、テレビには遠く及ばないけれども、いつかは超えてくるのではないでしょうか。
2013年度におけるスマートフォン向けアプリ経済の市場規模が約8200億円に上ることが、Googleと野村総合研究所の試算でわかった。
2014年時点では、56万5000人の雇用を生み出しているのだという。
http://jp.techcrunch.com/2015/02/26/jp20150226app-economy/
注目すべきは、
「2011年度に19兆2000億円だったネットGDPは年間7%の成長率で伸びていて、2013年度は約23兆円に上った。
この数字は日本のGDPの4.3%に相当し、日本の代表産業である輸送用機械器具製造業(自動車製造業)を上回る規模」
ということで、なんと自動車産業のGDPを上回る規模であること。
それだけの雇用を生み出しているのと同時に、取って代わられた職種も必ずありますから、
単純にプラスでの増加しているわけではないでしょう。
それだけ、ネット、webに携わる人が増えているということですね。
この流れは、どんどん加速していくと思います。
ちなみに、こんな事も言われてます。
プログラミング教育を強化した国で何が起きているのか?世界の教育事情
「2020年には日本のWebビジネスの市場規模が2010年時点と比べて4.5倍に拡大すること、
またそれによりWeb系企業の雇用者数も150万人増加をすることが見込まれています。」
http://paiza.hatenablog.com/entry/2015/02/24/プログラミング教育を強化した国で何が起きてい
このように、ネット、webの重要性がかなり高まっています。
弊社でも、自分が弊社に入社した2011年時、システムエンジニアは3人(バイトの方を含め)しかいませんでしたが、
現在は3倍の9人。外部パートナーの方を含めると、もっと多くなってきます。

今後も絶賛採用活動中!
是非、一緒にweb、アプリの制作を行いましょう!採用申込待ってます!
http://www.esz.co.jp/recruit/index.html
各企業の採用が始まりましたね。
今年から、3月から会社説明会が始まり、選考は8月からと、数ヶ月(3ヵ月くらい?)後ろ倒しとなりました。
それに合わせてか、採用に関するニュースもかなり見られるようになってきました。
そんな、企業が採用真っ只中のなか、下記のような記事が出ており、webやIT系の重要性を言っています。
ネット広告費、初の1兆円超え--電通「2014年の日本の広告費」
総広告費は6兆1522億円と前年比2.9%増で、3年連続で前年比プラスに。
インターネット広告費は前年比12.1%増の1兆519億円と、初めて1兆円を超えた。
http://www.itmedia.co.jp/news/articles/1502/24/news114.html
注目すべきは、
・新聞は前年比1.8%減の6,057億円
・雑誌は前年比横ばいの2,500億円
・ラジオは2.3%増の1,272億円
3媒体の合計額「9,829億円」を超える金額であるということ。
それだけ、webが広告媒体として重要視されてきているということ。
まぁ、テレビには遠く及ばないけれども、いつかは超えてくるのではないでしょうか。
日本のスマホアプリ経済市場は8200億円、56.5万人の雇用を生み出している
2013年度におけるスマートフォン向けアプリ経済の市場規模が約8200億円に上ることが、Googleと野村総合研究所の試算でわかった。
2014年時点では、56万5000人の雇用を生み出しているのだという。
http://jp.techcrunch.com/2015/02/26/jp20150226app-economy/
注目すべきは、
「2011年度に19兆2000億円だったネットGDPは年間7%の成長率で伸びていて、2013年度は約23兆円に上った。
この数字は日本のGDPの4.3%に相当し、日本の代表産業である輸送用機械器具製造業(自動車製造業)を上回る規模」
ということで、なんと自動車産業のGDPを上回る規模であること。
それだけの雇用を生み出しているのと同時に、取って代わられた職種も必ずありますから、
単純にプラスでの増加しているわけではないでしょう。
それだけ、ネット、webに携わる人が増えているということですね。
この流れは、どんどん加速していくと思います。
ちなみに、こんな事も言われてます。
プログラミング教育を強化した国で何が起きているのか?世界の教育事情
「2020年には日本のWebビジネスの市場規模が2010年時点と比べて4.5倍に拡大すること、
またそれによりWeb系企業の雇用者数も150万人増加をすることが見込まれています。」
http://paiza.hatenablog.com/entry/2015/02/24/プログラミング教育を強化した国で何が起きてい
このように、ネット、webの重要性がかなり高まっています。
弊社でも、自分が弊社に入社した2011年時、システムエンジニアは3人(バイトの方を含め)しかいませんでしたが、
現在は3倍の9人。外部パートナーの方を含めると、もっと多くなってきます。

今後も絶賛採用活動中!
是非、一緒にweb、アプリの制作を行いましょう!採用申込待ってます!
http://www.esz.co.jp/recruit/index.html