Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

エフスタ会津 - フロントエンドエンジニアの話 -

761 views

Published on

Published in: Technology
  • Be the first to comment

エフスタ会津 - フロントエンドエンジニアの話 -

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

×