非エンジニアのためのこれだけは押さえておきたいWEBサービスの基礎技術

1. 非エンジニアのためのこれだけは押さえておきたい WEBサービスの基礎技術株式会社we-b 代表取締役真子就有

2. 今日の最後にテストをします。

3. 自己紹介＆プロローグ

4. 自己紹介真子就有  (まこゆきなり)   株式会社we-b 代表取締役  TECH::CAMP Founder

5. 未経験から１ヶ月でサービスを作れるエンジニアになる  プログラミングキャンプ、TECH::CAMPを運営しています。 https://tech-camp.in/

6. これまで５００名以上の  未経験者にプログラミングを教えてきました。

7. 今は「エンジニアを育てる」  お仕事をさせて頂いておりますが、

8. 過去は、1日16時間×週7でコードを  書き続ける数年間送っていました。

9. 大企業の開発案件をこなしたこともあります。

10. プロデューサー、ディレクター、営業の方と  何度もやりとりする中で気づいたこと

11. エンジニアと非エンジニアの間にある大きな壁

12. ディレクターAさん：  「仕様変更をお願いしたいけど、  どのくらい大変なのかわからないから頼みにくい…  的外れなことを言って怒らせてしまったらどうしよう」

13. エンジニアBさん：  「仕様変更頼まれたけど、技術的に難しいな…気持ち分かってもらいたいけど、説明のしようがないから『無理』と言うしかない。」

14. なぜ壁ができてしまうのか？

15. 言語の壁とまったく同じ

16. 言語の壁＝文化の壁＝心の壁

17. ①エンジニアが分かりやすく伝える  ②非エンジニアが技術を学ぶ壁をなくす方法：

18. エンジニア側も歩み寄りが必要です

19. しかし、IT業界にいる限り、  技術から離れることはできません

20. ネイティブ(エンジニア)になる必要はありませんが、  日常会話（基礎技術）くらいは分かるように  なることをおすすめします。非エンジニアの皆様

21. さらにいうと、今日をきっかけに自分でサービスを作れるよう  になってしまえば、良いなともおもっています。

22. さっそく勉強を始めていきましょう

23. 今日の勉強会のゴール WEBサービスに関連した基礎技術が  それぞれどのような役割を持っているか  イメージできるようになること

24. ※本勉強会では、  「イメージをつかむ」ことが目的のため  意図的に簡略化して説明している箇所があります。

25. 目次 1. リクエストとレスポンス 2. サーバーとは何か 3. ウェブサイトの仕組み 4. サーバーサイドスクリプトとデータベース

27. ウェブサービスや、スマホアプリなど  インターネットを使ったサービスは、  サーバーと通信をしています。 ※サーバーについては後程、詳しく解説します

28. PC、スマホからサーバーに情報を  要求することをリクエストと呼びます http:://tech-camp.in  を見せて！

29. リクエストに応えて、サーバーからPC、スマホ側  に情報を返すことをレスポンスと呼びます。 OK! サイトの情報渡すね！

30. ちなみに情報を要求する側は、クライアントサイド  情報を返す側をサーバーサイドと呼ばれます「いろいろ要求するのはお客さん（クライアント）」  と覚えてしまいましょう。クライアントサイドサーバーサイド

31. WEBサービスは、リクエストとレスポンスの  連続で成り立っています。

32. 手紙のように往復でやりとりをするので  住所にあたるものが必要になります。

33. IPアドレス IPアドレス：  54.248.81.201 住所：  渋谷区桜丘町29番24号リクエストを送る際に必要なサーバーの住所

34. 例えばfacebookのIPアドレスはこちらです「31.13.82.1」  こんな数字を打ち込んだことはないですよね？

35. ちなみに「31.13.82.1」と打ち込んでも  ちゃんとアクセスできます。

36. http://facebook.com よく知っているのはこっちだと思います。

37. ドメイン数字の羅列であるIPアドレスに人間が分かりやすい  ようにつけられた紐付けられたIPアドレスの別名 31.13.82.1 わかりにくい！ facebook.com わかりやすい！この変換を名前解決と呼ぶ

38. リクエストを送る時、  http://facebook.comだけではIPアドレスがわからないので、名前解決を行なおうとします。 facebookのサーバー http://facebook.comの  IPアドレスを知りたい！ IPアドレス:？？？？

39. どうやって名前解決しているのか？

40. DNS(ドメインネームシステム) インターネット上のドメイン名を管理するシステム。  複数のDNSサーバーによって成り立っている。 facebook.com? 54.248.81.201 DNSサーバー

41. 普段は意識することはありませんが、  リクエストを送る前には、  まずドメインの名前解決をして  IPアドレスを取得しています。

42. ドメインを購入したことはあるでしょうか？

43. ドメインを買うと、サーバーのIPアドレスと  紐付ける設定を行ないます。ドメイン IPアドレス ※サーバーを借りるとIPアドレスを教えてもらえます

44. 復習：リクエストとレスポンス •WEBサービスは、リクエストとレスポンスの  連続で成り立っている •情報を要求する側は、クライアントサイド、情報を返す側をサーバーサイドと呼ぶ •IPアドレスはサーバーの住所をしめす数字の羅列 •ドメインは人間が分かりやすいようにつけられたIPアドレスの別名

46. 先ほど、サーバーとはリクエストに対して  レスポンスを返すものだと学びました。

47. サーバーと聞くとなんだか凄いものだと  思ってる方は多いようです。

48. こんなごついイメージですか？

49. ざっくりいうと電源つけっぱで  ネットに繋がった画面のないパソコンです。

50. みなさんのお持ちのパソコンでも  設定をすればサーバーにできます。

51. 必要な設定の１つがIPアドレスを固定する  ということです。

52. みなさんのお持ちのPCはIPアドレスが  コロコロ変わる住所不定の状況にあります。 ✕ 自分のPCがリクエストを  受けることはないので固定されたIPは必要ない

53. IPアドレスを固定するには、  プロバイダーと別途契約が必要です。

54. ところで、  みなさんのお持ちのパソコンの OSはなんですか？

55. デスクトップOSの世界では  未だwindowsのシェアが圧倒的です。 Linux 2% Mac 7% Windows 92% 2015年2月デスクトップOSシェア/円グラフ - Net Applications報告 OSシェア：デスクトップ

56. ちなみにモバイルOSだとiOSとAndroidが二強です。  このあたりはご存知の方も多いと思います。その他 11% Android 36% iOS 53% OSシェア：モバイル／タブレット全体 - NetMarketShare 2014年２月 OSシェア：モバイル／タブレット

57. サーバーも普通のPC・モバイル端末と  同じようにOSが入っています。

58. UnixというOSを聞いたことがあるでしょうか。  サーバー用OSのシェアではwindowsは少数派です。その他 10% Windows 32% Unix(Linux含む) 59% 参照URL： http://w3techs.com/technologies/details/os-unix/all/all OSシェア：Webサーバー

59. Unix ざっくり言うと、OSの元祖のようなもの  1969年にAT&Tのベル研究所で開発開始 http://ja.wikipedia.org/wiki/UNIX#/media/File:Unix_history-simple.svg UNIX

60. さらにUnixの内訳をみると、  LinuxというOSが大半を占めています。その他 10% Windows 32% Unix(Linux含む) 59% 参照URL： http://w3techs.com/technologies/details/os-unix/all/all Linux:60%  Unknown:40% UNIXの内訳

61. Linux UNIXをベースにしたOSの一種  サーバーOSとして世界的に大きなシェアを占めている  Linuxをベースとして様々なバージョンが存在している ■代表的なLinuxベースOS

62. 例：CentOSのデスクトップ画面 WindowsとMac以外の画面を見る機会は少ないですが  LinuxOSもPCにインストールすれば普通に使えます。

63. 少しややこしいですが、サーバー用のOSはLinuxがよく使われていると理解できれば大丈夫です。

64. なぜエンジニアは、Macを使っているのか？

65. 「単純にかっこいい、つかいやすい。」  というのもありますが、

66. OSXがUNIXをベースとしたOSで、実際に動かすサーバーの環境と近いというのも理由のひとつです OSXはUnixがベースになっている  WindowsはUnixベースではありません

67. サーバーとOSについて学んだので  それに関連した話をします。

68. エンジニアが黒い画面を開いて  カタカタしてるのを見た事ありませんか？

69. 表示されているのは得たいのしれない文字だけ

70. マウスやトラックパッドを使って直感的に  パソコンを操作できるのは今や当たり前です

71. 昔のパソコンは文字を打つことしかできませんでした。これはCUI（character-based user interface）と呼ばれます。

72. クリックだけで誰もが使える  今のGUI（グラフィカルユーザーインターフェイス）を  普及させようと推し進めたのは、  故スティーブジョブズ氏だったりします。

73. エンジニアはいつも黒い文字だけの画面を  開いている理由は、開発はCUIを中心に行なうことが多いからです。

74. すごい勢いでタイピングしてるように見せて、  実はただフォルダを移動してるだけだったりします。

75. 復習：サーバーとは何か • サーバーは特定のリクエストに対してレスポンスを返す電源ネットつけっぱのコンピューター • サーバーのOSはLinuxが使われていることが多い • 直感的にマウス等で操作ができるGUIに対し、開発はコマンド操作のみのCUIが中心である

77. みなさんは、  ブラウザを使って多くのウェブサイトを  見ていると思います。

78. ウェブサイトの画面は  どのような技術で表示されているのか  学んでいきましょう。

79. HTML ウェブページを作成するために開発された言語。  文書の構造を明確にしたり文書の中に画像や動画を配置できる。 HTMLファイルブラウザの画面

80. 世の中のあらゆるウェブサイトは  HTMLで書かれています。

81. こちらはTECH::CAMPのウェブサイトです 

82. HTMLを表示するとこのようになります。 

83. しかし、注意すべき点としては  HTMLはあくまでサイトの文章、画像の構造を  決めるためのものだということです。

84. いわゆるデザインに関する情報は  CSSという言語で指定していきます

85. CSS ウェブページのスタイル(見た目)を指定するための言語です。文章構造とデザインを切り分けることができます。 CSSファイル HTMLファイル実行結果

86. 見た目に関する情報はCSSで  まとめて管理することができます。 

87. 例えばウェブサイトの見出しの色だけ変えたい時、 HTMLが見た目の情報を持っていると、  全てを編集しないといけないので骨が折れます。修正修正修正

88. CSSでまとめて管理していると  １つのファイルを編集するだけで済みます  修正

89. ウェブサイトをつくりたいとおもったら、サーバーに HTMLとCSSファイルをアップロードしておきます。アップロード

90. レスポンスでHTMLファイルとCSSファイルを  返すことでウェブページを表示することができます。

91. 復習：ウェブサイトの仕組み • HTMLはウェブページを制作するための言語で、文章の構造を決めることができる。 • CSSは、ウェブページのスタイル(見た目)を指定することができる • レスポンスでHTMLとCSSを返すことでウェブページを表示することができる 

93. 次に、サーバーがリクエストを  受け取ったときの処理について考えていきます。 http:://tech-camp.in  を見せて！

94. 最後はレスポンスを  返すことがゴールですレスポンス OK! サイトの情報渡すね！

95. サーバー内部でどんなことが  行われているか見ていきましょう！

96. あらゆるプログラムは、先ほど解説した  LinuxOSの上で動作しますリクエストレスポンス

97. ここにただHTMLファイルを置くだけでも  ウェブサイトは作れますリクエストレスポンス

98. そのかわり、いつ見ても  まったく同じページが表示されます。

99. ただのブログなら良いかもしれませんが  サービスをつくることはできません。

100. サービスをつくるには、  ①データを保存する仕組み  ②サービスの仕様を反映したロジック  が必要です。

101. サーバーサイドスクリプト  (ruby/java/PHP) データベースロジックはサーバーサイドスクリプト、  データの保存はデータベースが担当します。リクエストレスポンス

102. データベースから解説していきますサーバーサイドスクリプト  (ruby/java/PHP) データベースリクエストレスポンス

103. facebookのようなウェブサービスには  多くの情報がのっています。

104. これらのデータを保存しておく場所が必要です。

105. データベースデータを保存するシステム。通常エクセルのような  表形式で保存され、１つの表をテーブルと呼ぶ。 id 名前性別年齢住所 1 真子男性 25 東京 2 木村女性 21 神奈 3 鈴木男性 22 栃木 4 小林男性 23 群馬ユーザーテーブル id 本文日時投稿者id 1 おはよう 14/1/1 1 2 こんにちは 14/1/2 2 3 おやすみ 14/1/3 3 4 さよなら 14/1/4 4 投稿テーブル

106. データベースを操作するための言語も存在します

107. SQL（エスキューエル）データベースを操作するための言語。  テーブルの読み出し、追加、更新などの操作ができる id 名前性別年齢住所 1 真子男性 25 東京 2 木村女性 21 神奈 3 鈴木男性 22 栃木 SELECT * FROM USERS WHERE ID = 1; 例:ユーザーテーブルからIDが１のレコード(列)を取り出す

108. 次にサーバーサイドスクリプトについて説明しますサーバーサイドスクリプト  (ruby/java/PHP) データベースリクエストレスポンス

109. データベースはただデータが  保存されているだけなので、  それだけでサービスをつくることはできません。

110. サービスの仕様にもとづいたロジックや  実際に返すHTMLの情報をプログラムしておく  必要があります。

111. サーバーサイドスクリプト Ruby、Java、PHPを始めとするサーバー  での処理を担うプログラム。これらを用いてロジック  を書くことで動的なアプリケーションを作成できる

112. サーバーサイドスクリプトは、必要に応じて  SQLを用いてデータベースから情報を取得しますサーバーサイドスクリプト  (Ruby/Java/PHP) データベース SELECT * FROM USERS   WHERE ID = 1;

113. サーバーサイドサイドスクリプトは、データベースから取得したデータを利用して HTML/CSS を生成します。サーバーサイドスクリプト  ( Ruby / Java / PHP ) データベースから取得したデータ

114. Ruby、PHP、Javaなど複数のサーバーサイドスクリプトの言語がありますが、書き方が違うだけで役割は変わりありません。

115. サーバーサイドスクリプト  (Ruby/Java/PHP) データベース最後は、サーバーからクライアントサイドに  HTML/CSSを返して終了です。リクエストレスポンス

116. ブラウザが理解できるのは HTML/CSS だけです。  データベースやサーバーサイドスクリプトは、ブラウザとは全く関係ありません。

117. 復習：  サーバーサイドスクリプトとデータベース • データベースは、データの保存するシステムで  テーブルとよばれる表形式で保存される • SQLはデータベースを操作するための言語 • サーバーサイドスクリプト(Ruby、Java、PHP等)は  ウェブサービスのロジックを担当する • サーバーサイドスクリプトは、データベースから必要な  データを取得する 

118. おまけライブコーディングによる  Rubyプログラミング基礎講座

119. 最後にTECH::CAMPについて  ご紹介させてください。 https://tech-camp.in/

120. TECH::CAMPとは？未経験から最短１ヶ月でサービスを作れるエンジニアを育てるプログラミング学習キャンプです。未経験から急成長短期集中キャンプいつでも質問可能

121. TECH::CAMPで急成長できる理由土日祝日含む12∼24時で即疑問解消する手厚い質問サポート × わかりやすさにこだわった完全オリジナルのオンライン学習システム

122. オリジナル学習システム TECH::MASTER Ruby HTML・CSS Ruby on Rails わかりやすさにこだわり抜き、既に９００回以上のアップデートを重ねています。用語集や練習問題も充実、他に教材を用意する必要はありません

123. 12時∼24時まで質問し放題の質問サポート体制桜丘のキャンプでメンターが質問に即回答します。オフィスは土日を含め１２時∼２４時まで開放キャンプで直接質問オンライン質問対応自宅や職場で学習していても画面共有しながらメンターに質問する事ができます。オンラインは土日を含め１２時∼２４時まで受付。

124. 学習コース①：WEBアプリケーションコース 124 Ruby on Rails を中心に、Webアプリケーションをつくるために必要な技術力を身につけます。 Ruby & Ruby on Rails Rubyは近年で最も伸びているプログラミング言語の１つです。世界的なフレームワークRuby On Railsを使いWEBアプリケーション開発を学びます。ソースコード管理Git Gitはプログラマーにとって必須のソースコード管理ツールです。Gitを使いチーム開発をどのように行っていくかも学んで頂きます。 HTML5 & CSS3 SQL Webブラウザの表示で必要なマークアップ言語の基礎です。モバイル、タブレッドあらゆるデバイスでも美しくに描画できるコーディング技術を身につけます。 SQLはデータベースを扱うための言語で、データベースを絡めたアプリケーションを構築するには必須の知識です。

125. 学習コース②：iPhoneアプリコース 125 Swift・Xcodeを中心にiPhoneアプリをリリースするために必要な技術力を身につけます。 iPhoneアプリコースは５月３０日よりスタート予定(初回は招待制)

126. 実施予定と参加要項 ■次回実施 5/30 ∼ 6/30 ※締め切り5月24日(日)18時 5/30(土)夕方にキックオフ会を予定 ■参加要項 • 期間内に合計100時間以上、学習時間を確保できる方  (受講期間は1ヶ月か2ヶ月をお選びいただけます。) • Mac(PC)を持参できる方  ※月額5000円(税抜)でMacのレンタルを行っています • キャンプ終了後も継続的に学習を続け、技術を活かして活躍していく意志のある方 

127. 復習テスト！！

128. 全問正解すると TECH::CAMPノートもしくはペンお好きなほうをプレゼント！！

129. サーバーのOSは？？？が使われていることが多い B：RelaxA：Linux

130. サーバーの住所をしめす数字の羅列のことを？？と呼ぶ B：ITアドレスA：IPアドレス

131. 開発はコマンド操作のみの？？が中心である B：CUIA：GUI

132. データベースを操作するための言語は？？？である。 B：SSLA：SQL

133. 次のRubyコードの出力結果は？ B：8A：4

134. 本日はありがとうございました。

非エンジニアのためのこれだけは押さえておきたいWEBサービスの基礎技術

we-b Inc

Transcript