Hisatoshi Kikumoto                     1
自己紹介菊本 久寿ngi groupの技術開発部部長ですtwitter: hisaju01facebook: hisaju        ©2011 ngi group inc. All Rights Reserved   2
©2011 ngi group inc. All Rights Reserved   3
一発屋ブロガーです   ©2011 ngi group inc. All Rights Reserved   4
最初に©2011 ngi group inc. All Rights Reserved   5
私の主観が 結構入るのでご了承ください  ©2011 ngi group inc. All Rights Reserved   6
ところで©2011 ngi group inc. All Rights Reserved   7
エンジニアって何?   ©2011 ngi group inc. All Rights Reserved   8
エンジニアって? 各業界、各分野のエキスパート  • レコーディングエンジニア  • フライトエンジニア  • 構造エンジニア(建築)  • フィナンシャルエンジニア    (金融)      ©2011 ngi group inc. All ...
でも今時はエンジニアって言うと   ©2011 ngi group inc. All Rights Reserved   10
ITエンジニアです  ©2011 ngi group inc. All Rights Reserved   11
だからと言ってブログに エンジニアって書くと    ©2011 ngi group inc. All Rights Reserved   12
はてぶ民にITだけがエンジニアじゃ  ないとかDisられます    ©2011 ngi group inc. All Rights Reserved   13
ITエンジニアって?  • システムエンジニア    • ほとんどが業務系エンジニアで、主に色々な      会社の受託開発を行っています  • 組み込みエンジニア    • 受託や自社開発でハードウェアとソフトウェ      アをセットで考え...
今回はWebエンジニアについてお話します   ©2011 ngi group inc. All Rights Reserved   15
Webエンジニアのお仕事    ©2011 ngi group inc. All Rights Reserved   16
Webサイトを作る   お仕事です  ©2011 ngi group inc. All Rights Reserved   17
Webエンジニアのお仕事フロー                        企画                  (要件定義)   運用                                              設計    ...
Webエンジニアに必要なスキル• LL(LightweightLanguage)系のプログラミ  ング知識  • Perl,Python,Ruby,PHPなど  • それに付随するフレームワークやライブラリの知    識  • DBをコントロー...
簡単でしょ? ©2011 ngi group inc. All Rights Reserved   20
たったこれだけ 覚えるだけで  ©2011 ngi group inc. All Rights Reserved   21
安定した生活が  送れます  ©2011 ngi group inc. All Rights Reserved   22
終電で帰るのが安定しているかどうかは    別として    ©2011 ngi group inc. All Rights Reserved   23
でも1つ問題があります    ©2011 ngi group inc. All Rights Reserved   24
安定した生活が 送れるのは  ©2011 ngi group inc. All Rights Reserved   25
だいたい数年です  ©2011 ngi group inc. All Rights Reserved   26
なんでか? ©2011 ngi group inc. All Rights Reserved   27
あっという間に技術が変わっていくんで     す    ©2011 ngi group inc. All Rights Reserved   28
最近は特に早いです   ©2011 ngi group inc. All Rights Reserved   29
あっという間に 干されます  ©2011 ngi group inc. All Rights Reserved   30
だから©2011 ngi group inc. All Rights Reserved   31
一生勉強しないと  いけません  ©2011 ngi group inc. All Rights Reserved   32
はっきり言うと  ©2011 ngi group inc. All Rights Reserved   33
知的好奇心や  知識欲求が強い人じゃないと  ©2011 ngi group inc. All Rights Reserved   34
続けていくのは  難しい と思います  ©2011 ngi group inc. All Rights Reserved   35
ここで©2011 ngi group inc. All Rights Reserved   36
エンジニアに 向いている人の性格を発表します  ©2011 ngi group inc. All Rights Reserved   37
怠惰©2011 ngi group inc. All Rights Reserved   38
短気©2011 ngi group inc. All Rights Reserved   39
傲慢©2011 ngi group inc. All Rights Reserved   40
これはプログラマの3大美徳です ©2011 ngi group inc. All Rights Reserved   41
エンジニアに向いている性格 • 怠惰  • 全体の労力を減らすために手間を惜しまない気質。この    気質の持ち主は、役立つプログラムを書いてみんなの苦    労を減らしたり、同じ質問に何度も答えなくてもいいよ    うに文書を書いたりする。 ...
スピリチュアルな話はそろそろ飽きてきたので    ©2011 ngi group inc. All Rights Reserved   43
まずは©2011 ngi group inc. All Rights Reserved   44
インターネットの   お勉強  ©2011 ngi group inc. All Rights Reserved   45
URLとHTTP通信  ©2011 ngi group inc. All Rights Reserved   46
URLの意味 http://adsta.jp/foo/bar.html   • http:// HTTPでアクセス   • adsta.jp adsta.jpというサー     バー   • /foo fooというディレクトリ   • bar....
adsta.jpというアドレスの サーバー(adsta.jp)                                       サーバーを探してhttpで通信サーバー(ad-stir.com)                    ...
サーバー(adsta.jp)     AAAAA        BBBBB                                        クライアント                                       ...
これをプログラムで   やる場合   ©2011 ngi group inc. All Rights Reserved   50
http://adsta.jp/index.cgi?foo=bar                                               へアクセスサーバー(adsta.jp)                       ...
ではプログラムを作ってみましょう  ©2011 ngi group inc. All Rights Reserved   52
でもどうやって 開発するの?  ©2011 ngi group inc. All Rights Reserved   53
開発する場所(ngi group編)    開発サーバ                  ステージサーバ                                本番サーバ開発を行うサーバです。         本番にリリースする前に最 ...
開発に必要なツール• SSHクライアント • Poderosa、TeraTerm、Putty• テキストエディタ • Vim、Emacs          ©2011 ngi group inc. All Rights Reserved   55
SSHってなんだよ  ©2011 ngi group inc. All Rights Reserved   56
SSH(Secure SHell) • 主にUNIXコンピュータで利用される、ネッ   トワークを介して別のコンピュータにログ   インしたり、遠隔地のマシンでコマンドを   実行したり、他のマシンへファイルを移動   したりするためプログラム...
Vim?©2011 ngi group inc. All Rights Reserved   58
Vim • UNIX系の古くからあるViエディタの派生エ   ディタです。 • SSHもVimもCUIで使うものなので、基本的には   マウスは使いません! • その為Vimで作業をする場合、まとめて選択し   て消すとか出来ないので、コマンド...
では実際に サーバーにつないで開発をしてみましょう   ©2011 ngi group inc. All Rights Reserved   60
今日のアジェンダ  ©2011 ngi group inc. All Rights Reserved   61
1. 環境セットアップ2. Linuxに慣れよう3. Webアプリケーションのひな型を作   ろう4. マッシュアップサイトの作り方      ©2011 ngi group inc. All Rights Reserved   62
1.環境セットアップ   ©2011 ngi group inc. All Rights Reserved   63
• Poderosaインストール                                    (SSHクライアン ト)• WinSCPインストール                                    (SSHでのファ...
2.Linuxに慣れよう    ©2011 ngi group inc. All Rights Reserved   65
SSHで開発サーバーに    つなぎます   ©2011 ngi group inc. All Rights Reserved   66
WinSCPでつないでみて  実際の動作をGUIで確認しながら進めます    ©2011 ngi group inc. All Rights Reserved   67
ディレクトリの作成、確認、移 動• pwd  • ディレクトリの確認• mkdir  • ディレクトリ作成• cd  • ディレクトリ移動• ls  • ディレクトリ内のファイル一覧      ©2011 ngi group inc. All ...
ファイルの作成、コピー、移動、削除• touch  • ファイルの作成• mv  • ファイルの移動• cp  • ファイルのコピー• rm  • ファイルの削除      ©2011 ngi group inc. All Rights Res...
3. Webアプリケーション        の    ひな型を作ろう     ©2011 ngi group inc. All Rights Reserved   70
Webアプリケーションのひな型作成1.   dancerコマンドでひな型を作ります     dancer –a demo2.   publicディレクトリにシンボリックリンクを     貼ります     ln -s demo/public .3...
Dancerフレームワークのファイル   解説demo|- config.yml     ・・・ 設定ファイル|- environments ・・・ 環境設定ファイル|- lib    |- demo.pm   ・・・ プログラムファイル(Pe...
Dancerフレームワーク処理の流れリクエ                                                          レスポン スト                                    ...
4. マッシュアップサイト       の      作り方    ©2011 ngi group inc. All Rights Reserved   74
まずは出来ているファイルをコ ピー1.   ファイルをまるっとコピーしましょう     cp –Rfp /tmp/shoppy .2.   シンボリックリンクを削除してshoppyのシン     rm public     ボリックリンクを貼り...
処理内容1.     TwitterのOauth認証でログイン     1. Twitter認証画面へ遷移     2. 認証後戻ってきたらログイン処理            ©2011 ngi group inc. All Rights Re...
©2011 ngi group inc. All Rights Reserved   77
Upcoming SlideShare
Loading in …5
×

エンジニアという職業について

3,045 views

Published on

エンジニア疑似体験イベントの資料です。
結構主観で書いたのであんまり真に受けすぎないでね

Published in: Technology
  • Be the first to comment

エンジニアという職業について

  1. 1. Hisatoshi Kikumoto 1
  2. 2. 自己紹介菊本 久寿ngi groupの技術開発部部長ですtwitter: hisaju01facebook: hisaju ©2011 ngi group inc. All Rights Reserved 2
  3. 3. ©2011 ngi group inc. All Rights Reserved 3
  4. 4. 一発屋ブロガーです ©2011 ngi group inc. All Rights Reserved 4
  5. 5. 最初に©2011 ngi group inc. All Rights Reserved 5
  6. 6. 私の主観が 結構入るのでご了承ください ©2011 ngi group inc. All Rights Reserved 6
  7. 7. ところで©2011 ngi group inc. All Rights Reserved 7
  8. 8. エンジニアって何? ©2011 ngi group inc. All Rights Reserved 8
  9. 9. エンジニアって? 各業界、各分野のエキスパート • レコーディングエンジニア • フライトエンジニア • 構造エンジニア(建築) • フィナンシャルエンジニア (金融) ©2011 ngi group inc. All Rights Reserved 9
  10. 10. でも今時はエンジニアって言うと ©2011 ngi group inc. All Rights Reserved 10
  11. 11. ITエンジニアです ©2011 ngi group inc. All Rights Reserved 11
  12. 12. だからと言ってブログに エンジニアって書くと ©2011 ngi group inc. All Rights Reserved 12
  13. 13. はてぶ民にITだけがエンジニアじゃ ないとかDisられます ©2011 ngi group inc. All Rights Reserved 13
  14. 14. ITエンジニアって? • システムエンジニア • ほとんどが業務系エンジニアで、主に色々な 会社の受託開発を行っています • 組み込みエンジニア • 受託や自社開発でハードウェアとソフトウェ アをセットで考える人 • ネットワークエンジニア • 主にサーバーを管理する人。サーバーを貸し たりしている会社にいっぱいいます。 • 大手サービス会社では専属のネットワークエ ンジニアが結構います。 ©2011 ngi group inc. All Rights Reserved 14
  15. 15. 今回はWebエンジニアについてお話します ©2011 ngi group inc. All Rights Reserved 15
  16. 16. Webエンジニアのお仕事 ©2011 ngi group inc. All Rights Reserved 16
  17. 17. Webサイトを作る お仕事です ©2011 ngi group inc. All Rights Reserved 17
  18. 18. Webエンジニアのお仕事フロー 企画 (要件定義) 運用 設計 テスト & 開発 リリース ©2011 ngi group inc. All Rights Reserved 18
  19. 19. Webエンジニアに必要なスキル• LL(LightweightLanguage)系のプログラミ ング知識 • Perl,Python,Ruby,PHPなど • それに付随するフレームワークやライブラリの知 識 • DBをコントロールするSQLの知識 • その他HTML、Javascriptなどは最低限必要• Linux系の知識• ミドルウェア系の知識 • ウェブサーバ、データベースなど ©2011 ngi group inc. All Rights Reserved 19
  20. 20. 簡単でしょ? ©2011 ngi group inc. All Rights Reserved 20
  21. 21. たったこれだけ 覚えるだけで ©2011 ngi group inc. All Rights Reserved 21
  22. 22. 安定した生活が 送れます ©2011 ngi group inc. All Rights Reserved 22
  23. 23. 終電で帰るのが安定しているかどうかは 別として ©2011 ngi group inc. All Rights Reserved 23
  24. 24. でも1つ問題があります ©2011 ngi group inc. All Rights Reserved 24
  25. 25. 安定した生活が 送れるのは ©2011 ngi group inc. All Rights Reserved 25
  26. 26. だいたい数年です ©2011 ngi group inc. All Rights Reserved 26
  27. 27. なんでか? ©2011 ngi group inc. All Rights Reserved 27
  28. 28. あっという間に技術が変わっていくんで す ©2011 ngi group inc. All Rights Reserved 28
  29. 29. 最近は特に早いです ©2011 ngi group inc. All Rights Reserved 29
  30. 30. あっという間に 干されます ©2011 ngi group inc. All Rights Reserved 30
  31. 31. だから©2011 ngi group inc. All Rights Reserved 31
  32. 32. 一生勉強しないと いけません ©2011 ngi group inc. All Rights Reserved 32
  33. 33. はっきり言うと ©2011 ngi group inc. All Rights Reserved 33
  34. 34. 知的好奇心や 知識欲求が強い人じゃないと ©2011 ngi group inc. All Rights Reserved 34
  35. 35. 続けていくのは 難しい と思います ©2011 ngi group inc. All Rights Reserved 35
  36. 36. ここで©2011 ngi group inc. All Rights Reserved 36
  37. 37. エンジニアに 向いている人の性格を発表します ©2011 ngi group inc. All Rights Reserved 37
  38. 38. 怠惰©2011 ngi group inc. All Rights Reserved 38
  39. 39. 短気©2011 ngi group inc. All Rights Reserved 39
  40. 40. 傲慢©2011 ngi group inc. All Rights Reserved 40
  41. 41. これはプログラマの3大美徳です ©2011 ngi group inc. All Rights Reserved 41
  42. 42. エンジニアに向いている性格 • 怠惰 • 全体の労力を減らすために手間を惜しまない気質。この 気質の持ち主は、役立つプログラムを書いてみんなの苦 労を減らしたり、同じ質問に何度も答えなくてもいいよ うに文書を書いたりする。 • 短気 • コンピューターが怠慢な時に感じる怒り。この怒りの持 ち主は、今ある問題に対応するプログラムにとどまらず、 今後起こりうる問題を想定したプログラムを書く。少な くともそうしようとする。 • 傲慢 • 神罰が下るほどの過剰な自尊心。または人様に対して恥 ずかしくないプログラムを書き、また保守しようとする 気質。 Programming Perlより抜粋 ©2011 ngi group inc. All Rights Reserved 42
  43. 43. スピリチュアルな話はそろそろ飽きてきたので ©2011 ngi group inc. All Rights Reserved 43
  44. 44. まずは©2011 ngi group inc. All Rights Reserved 44
  45. 45. インターネットの お勉強 ©2011 ngi group inc. All Rights Reserved 45
  46. 46. URLとHTTP通信 ©2011 ngi group inc. All Rights Reserved 46
  47. 47. URLの意味 http://adsta.jp/foo/bar.html • http:// HTTPでアクセス • adsta.jp adsta.jpというサー バー • /foo fooというディレクトリ • bar.html bar.htmlというファ イル ©2011 ngi group inc. All Rights Reserved 47
  48. 48. adsta.jpというアドレスの サーバー(adsta.jp) サーバーを探してhttpで通信サーバー(ad-stir.com) クライアントサーバー(adplatform.jp) ©2011 ngi group inc. All Rights Reserved 48
  49. 49. サーバー(adsta.jp) AAAAA BBBBB クライアント fooフォルダの bar.htmlを bar.html クライアントに foo 返す ©2011 ngi group inc. All Rights Reserved 49
  50. 50. これをプログラムで やる場合 ©2011 ngi group inc. All Rights Reserved 50
  51. 51. http://adsta.jp/index.cgi?foo=bar へアクセスサーバー(adsta.jp) クライアント Index.cgiがfoo=barという パラメータを受け取って プログラムさん その情報を元に (index.cgi) HTMLを生成 HTMLを生成して返却 ©2011 ngi group inc. All Rights Reserved 51
  52. 52. ではプログラムを作ってみましょう ©2011 ngi group inc. All Rights Reserved 52
  53. 53. でもどうやって 開発するの? ©2011 ngi group inc. All Rights Reserved 53
  54. 54. 開発する場所(ngi group編) 開発サーバ ステージサーバ 本番サーバ開発を行うサーバです。 本番にリリースする前に最 実際に稼働するサーバーでLinux上でSSHで接続して 終確認を行うサーバです。 す。CUI上でViやEmacsといった 主にプロデューサーやテス 開発後にステージでのテスエディタソフトを使って ターが動作や表示の確認を トが通ったプログラムを配コーディングを行います。 行います。 置してユーザが使用できる ように設定するサーバーで す。 ©2011 ngi group inc. All Rights Reserved 54
  55. 55. 開発に必要なツール• SSHクライアント • Poderosa、TeraTerm、Putty• テキストエディタ • Vim、Emacs ©2011 ngi group inc. All Rights Reserved 55
  56. 56. SSHってなんだよ ©2011 ngi group inc. All Rights Reserved 56
  57. 57. SSH(Secure SHell) • 主にUNIXコンピュータで利用される、ネッ トワークを介して別のコンピュータにログ インしたり、遠隔地のマシンでコマンドを 実行したり、他のマシンへファイルを移動 したりするためプログラム。ネットワーク 上を流れるデータは暗号化されるため、イ ンターネット経由でも一連の操作を安全に 行うことができる。 • 簡単に言うと、これを使うと開発サーバー につないで作業ができるんですね ©2011 ngi group inc. All Rights Reserved 57
  58. 58. Vim?©2011 ngi group inc. All Rights Reserved 58
  59. 59. Vim • UNIX系の古くからあるViエディタの派生エ ディタです。 • SSHもVimもCUIで使うものなので、基本的には マウスは使いません! • その為Vimで作業をする場合、まとめて選択し て消すとか出来ないので、コマンドモードと 編集モードがありコマンドモードで色々な作 業をします(ショートカットみたいなもの) • 以下のサイトなどでコマンド参照 • http://archiva.jp/web/tool/vim_basic.html ©2011 ngi group inc. All Rights Reserved 59
  60. 60. では実際に サーバーにつないで開発をしてみましょう ©2011 ngi group inc. All Rights Reserved 60
  61. 61. 今日のアジェンダ ©2011 ngi group inc. All Rights Reserved 61
  62. 62. 1. 環境セットアップ2. Linuxに慣れよう3. Webアプリケーションのひな型を作 ろう4. マッシュアップサイトの作り方 ©2011 ngi group inc. All Rights Reserved 62
  63. 63. 1.環境セットアップ ©2011 ngi group inc. All Rights Reserved 63
  64. 64. • Poderosaインストール (SSHクライアン ト)• WinSCPインストール (SSHでのファイル転 送)• Sakura Editorインストール (エディ タ) ©2011 ngi group inc. All Rights Reserved 64
  65. 65. 2.Linuxに慣れよう ©2011 ngi group inc. All Rights Reserved 65
  66. 66. SSHで開発サーバーに つなぎます ©2011 ngi group inc. All Rights Reserved 66
  67. 67. WinSCPでつないでみて 実際の動作をGUIで確認しながら進めます ©2011 ngi group inc. All Rights Reserved 67
  68. 68. ディレクトリの作成、確認、移 動• pwd • ディレクトリの確認• mkdir • ディレクトリ作成• cd • ディレクトリ移動• ls • ディレクトリ内のファイル一覧 ©2011 ngi group inc. All Rights Reserved 68
  69. 69. ファイルの作成、コピー、移動、削除• touch • ファイルの作成• mv • ファイルの移動• cp • ファイルのコピー• rm • ファイルの削除 ©2011 ngi group inc. All Rights Reserved 69
  70. 70. 3. Webアプリケーション の ひな型を作ろう ©2011 ngi group inc. All Rights Reserved 70
  71. 71. Webアプリケーションのひな型作成1. dancerコマンドでひな型を作ります dancer –a demo2. publicディレクトリにシンボリックリンクを 貼ります ln -s demo/public .3. http://名前.event.ngigroup.comへアクセス ©2011 ngi group inc. All Rights Reserved 71
  72. 72. Dancerフレームワークのファイル 解説demo|- config.yml ・・・ 設定ファイル|- environments ・・・ 環境設定ファイル|- lib |- demo.pm ・・・ プログラムファイル(Perl)|- public ・・・ 公開領域|- views ・・・ テンプレートファイル ©2011 ngi group inc. All Rights Reserved 72
  73. 73. Dancerフレームワーク処理の流れリクエ レスポン スト ス ① ④ プログラム ファイル (Perl) ② ③ テンプレートファ 設定ファイル イル ©2011 ngi group inc. All Rights Reserved 73
  74. 74. 4. マッシュアップサイト の 作り方 ©2011 ngi group inc. All Rights Reserved 74
  75. 75. まずは出来ているファイルをコ ピー1. ファイルをまるっとコピーしましょう cp –Rfp /tmp/shoppy .2. シンボリックリンクを削除してshoppyのシン rm public ボリックリンクを貼りましょう ln -s shoppy/public . ©2011 ngi group inc. All Rights Reserved 75
  76. 76. 処理内容1. TwitterのOauth認証でログイン 1. Twitter認証画面へ遷移 2. 認証後戻ってきたらログイン処理 ©2011 ngi group inc. All Rights Reserved 76
  77. 77. ©2011 ngi group inc. All Rights Reserved 77

×