エフスタ会津 - フロントエンドエンジニアの話 -
Post on 05-Jul-2015
328 Views
Preview:
TRANSCRIPT
Session 4
フロントエンドエンジニアの話
株式会社CCL 西本浩幸
目次
l 最初に
l 自己紹介
l フロントエンドエンジニアとは
l サイト構築の流れ（私の場合）
l フロントエンドエンジニアとして生きていくということ
最初に
私はフロントエンドエンジニアとしての仕事はしていますが、
ウェブサイト制作者として生きているわけではありません。
最初に
自己紹介
l 西本浩幸（34）
l 会津大学８期生（2000年入学）
会津若松市在住l 愛知県名古屋市出身
l 略歴l- 大学卒業後はPHSのSEとして就職 (2004)
l- 会社を退職後、ウェブ業界へ (2006)
l- HTML、JavaScript、Flash、Perlの仕事に従事l- 会津で個人事業を開業、CCLに入社。現在に至る。
自己紹介
l株式会社ＣＣＬでの仕事
l - オープンデータに関する勉強会の開催l （オープンデータカフェ会津をよろしくお願いします）
- オープンデータに関する調査報告書の作成
- オープンデータに関するウェブサービスの開発
- オープンデータに関する開発イベントへの参加
フロントエンドエンジニアとは？
フロントエンドエンジニアとは？
lWebサイトの”見える部分”
lに関わるあらゆることを行う人
フロントエンドエンジニアとは？
HTML CSS
扱うテーマの変遷
～2006年
javascript
～2011年XHTML CSS js 携帯
最近HTML5 CSS3 js mobile
performance
responsive
フロントエンドエンジニアとは？
lやることが多すぎる!!
lどうすればいいの!?
lQuestion
フロントエンドエンジニアとは？
lとにかく基本を身につけてl自分の作業スタイルを
l確立してください。
lAnswer
フロントエンドエンジニアとは？
lPC対応のみのサイトを短時間でlかつ正確に制作できる。
lＰＣ対応のみのサイトを短時間でl正確にスマホ対応化できる。
サイト構築の流れ（私の場合）
サイト構築の流れ
l初回内部打ち合わせ
lディレクターが持って返ってきた内容を、デザイナーやサーバーサイドエンジニアと共に仕様の打合わせ。
lラフデザイン作成～完成
lディレクターが先方で打合わせ
l自分コーディング不可能なデザイン要素の確認l※可能な範囲で修正をしてもらう。
lディレクターが先方で打合わせ
サイト構築の流れ
l内部打ち合わせ
ディレクターが持って返ってきた内容を、デザイナーやサーバーサイドエンジニアと共に仕様の打合わせ。
l細かいギミック、サーバサイド連携の仕様の確認
l本デザイン作成～完成
l構築に必要な未修得の技術があれば調べるなどしてl準備をします。
サイト構築の流れ
lサイトの設計図作成
lh1、h2などのタグの割り振り、div要素となる箇所のl横幅や高さ、余白の値を記入した図を作成。
lデザインを紙に印刷して、その中に書き込んでいきます。
サイト構築の流れ
lコーディング開始
l設計図を元に、まずはhtmlファイルを作成。
lCSSを適用しない状態で自然に情報が表示されるかをl確認します。
lＣＳＳを作成。
l作成の都度、サーバに置いてブラウザの表示チェックlをしています。
サイト構築の流れ
lコーディング開始
l設計図を元に、まずはhtmlファイルを作成。
lCSSを適用しない状態で自然に情報が表示されるかをl確認します。
lＣＳＳを作成。
l作成の都度、サーバに置いてブラウザの表示チェックlをしています。
サイト構築の流れ
l完成
lリンク切れや文字の打ち間違いがないかチェック。
lコーディング中に気になったことやエラーの対応でうまくl解決できたことなどをまとめて今後に活かしましょう。
lJavascript の組み込み開始
lスムーズにプログラミングに移行できるようl事前の準備が必要です。
「こういうサイトを作ってください」
と頼まれたものは作れるようになる。
飽きてきます。※全ての人がそうなるわけではありません！
フロントエンドエンジニアとして生きていくということ
FEとして生きていくということ
技術は、あくまで道具。
この道具はあなたがやりたいこと、やるべきことを実現していくためのもの。
FEとして生きていくということ
友人が開いたお店をPRしたい
サークル活動を支援したい
身の回りの課題を解決したい
社会問題を解決したい
FEとして生きていくということ
自分自身で課題をみつけて解決するための１つの手段としてのＷｅｂサイト構築。
自己紹介
l 西本浩幸
l 会津大学８期生
l 愛知県名古屋市出身
l 略歴l- 大学卒業後はPHSのSEとして就職 (2004)
l- 会社を退職後、ウェブ業界へ (2006)
l- HTML、JavaScript、Flash、Perlの仕事に従事(2013)
l- 会津で個人事業を開業、CCLに入社。現在に至る。
本当にやるべきことを見つけ独立
ＦＥとして生きていくということ
l人生の目標
l- 人と人が接する所から始まる仕事をする。l そして関わった人々が喜ぶような仕事をすること。
l仕事（個人事業）の目標
l- 会津の街なかに、会津らしい風情をつくるために、l 街で暮らす人たちが求める便利、満足、安心をl 作り出す「しくみ」や「しかけ」を創っていくこと。
ＦＥとして生きていくということ
l人生の目標
l- 人と人が接する所から始まる仕事をする。l そしてその人が喜ぶような仕事をすること。
l仕事（個人事業）の目標
l- 会津の街なかに、会津らしい風情をつくるために、l 街で暮らす人たちが求める便利、満足、安心をl 作り出す「しくみ」や「しかけ」を創っていくこと。
ウェブサイト制作など
私はフロントエンドエンジニアとしての仕事はしていますが、
ウェブサイト制作者として生きているわけではありません。
ＦＥとして生きていくということ
Webサイトを作れるって本当にすばらしい！
ＦＥとして生きていくということ
top related