Submit Search
Upload
非エンジニアカンファレンス資料の抜粋
•
47 likes
•
100,428 views
div Inc
Follow
非エンジニアカンファレンスでの資料をカリキュラム向けに再編集したものです
Read less
Read more
Technology
Report
Share
Report
Share
1 of 93
Download now
Download to read offline
Recommended
非エンジニアのためのこれだけは押さえておきたいWEBサービスの基礎技術
非エンジニアのためのこれだけは押さえておきたいWEBサービスの基礎技術
div Inc
初心者のためのWeb標準技術
初心者のためのWeb標準技術
Shogo Sensui
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
Yusuke Hirao
人は一ヶ月でエンジニアになれるのか - 詳細解説
人は一ヶ月でエンジニアになれるのか - 詳細解説
Livesense Inc.
ウェブパフォーマンスの基礎とこれから
ウェブパフォーマンスの基礎とこれから
Hiroshi Kawada
Yii Framework 2.0 いま求められるRAD標準とは #phpkansai
Yii Framework 2.0 いま求められるRAD標準とは #phpkansai
Hisateru Tanaka
大規模Perl初心者研修を支える技術
大規模Perl初心者研修を支える技術
Daisuke Tamada
エンジニア採用ヤバイ! PHPカンファレンス関西 懇親会LT
エンジニア採用ヤバイ! PHPカンファレンス関西 懇親会LT
Tomoyuki Sugita
Recommended
非エンジニアのためのこれだけは押さえておきたいWEBサービスの基礎技術
非エンジニアのためのこれだけは押さえておきたいWEBサービスの基礎技術
div Inc
初心者のためのWeb標準技術
初心者のためのWeb標準技術
Shogo Sensui
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
Yusuke Hirao
人は一ヶ月でエンジニアになれるのか - 詳細解説
人は一ヶ月でエンジニアになれるのか - 詳細解説
Livesense Inc.
ウェブパフォーマンスの基礎とこれから
ウェブパフォーマンスの基礎とこれから
Hiroshi Kawada
Yii Framework 2.0 いま求められるRAD標準とは #phpkansai
Yii Framework 2.0 いま求められるRAD標準とは #phpkansai
Hisateru Tanaka
大規模Perl初心者研修を支える技術
大規模Perl初心者研修を支える技術
Daisuke Tamada
エンジニア採用ヤバイ! PHPカンファレンス関西 懇親会LT
エンジニア採用ヤバイ! PHPカンファレンス関西 懇親会LT
Tomoyuki Sugita
中の下のエンジニアを脱出するための仕事術
中の下のエンジニアを脱出するための仕事術
Noriaki Kadota
我が家のフロントエンド開発事情
我が家のフロントエンド開発事情
Naoki Yamada
最近誰かに「やったほうがいいよ」と伝えた7のこと
最近誰かに「やったほうがいいよ」と伝えた7のこと
Noriaki Kadota
PHPにないセキュリティ機能
PHPにないセキュリティ機能
Yasuo Ohgaki
ブラウザのPerformance APIの話
ブラウザのPerformance APIの話
Hiroshi Kawada
DevOpsが引き金となるインフラエンジニアの進撃
DevOpsが引き金となるインフラエンジニアの進撃
Teruo Adachi
PHPカンファレンス2015
PHPカンファレンス2015
Daisuke Kasuya
まだタスクランナー使っていないって本当(マジ)? 仕事に対する効率化意識向上のための gulp ハンズオン : Wordcamp tokyo 2015
まだタスクランナー使っていないって本当(マジ)? 仕事に対する効率化意識向上のための gulp ハンズオン : Wordcamp tokyo 2015
Hiromu Hasegawa
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
Fumio SAGAWA
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
Naoki Yamada
[MW10] Xamarin / OSS プロジェクトを活用したエンタープライズモバイルアプリケーションの実装 - Project Blue Monkey -
[MW10] Xamarin / OSS プロジェクトを活用したエンタープライズモバイルアプリケーションの実装 - Project Blue Monkey -
de:code 2017
2015年GMOペパボ新卒エンジニア研修 Webオペレーション研修イントロダクション
2015年GMOペパボ新卒エンジニア研修 Webオペレーション研修イントロダクション
Takahiro Okumura
three.jsによる一歩進めたグラフィカルな表現
three.jsによる一歩進めたグラフィカルな表現
Kei Yagi
Spring Boot + Doma + AngularJSで作るERP #jjug_ccc #ccc_r12
Spring Boot + Doma + AngularJSで作るERP #jjug_ccc #ccc_r12
学 松崎
エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織
Takafumi ONAKA
20141116 jjug ccc_2014_keynote1_public
20141116 jjug ccc_2014_keynote1_public
Yoshiharu Hashimoto
Learning from theme review requirements
Learning from theme review requirements
Shinichi Nishikawa
プロジェクトマネジメントは仕組み化が9割
プロジェクトマネジメントは仕組み化が9割
Mharu
速度改善のためにフロント:アプリ:インフラ エンジニアが使うツールについて
速度改善のためにフロント:アプリ:インフラ エンジニアが使うツールについて
Daisuke Tamada
【B-1】kintoneでお手軽コールセンター!
【B-1】kintoneでお手軽コールセンター!
Sakae Saito
Webワークフローシステム R@bitFlow
Webワークフローシステム R@bitFlow
Ricoh IT Solutions
Web appsとcleardbで作る簡単webサイト
Web appsとcleardbで作る簡単webサイト
Tsukasa Kato
More Related Content
What's hot
中の下のエンジニアを脱出するための仕事術
中の下のエンジニアを脱出するための仕事術
Noriaki Kadota
我が家のフロントエンド開発事情
我が家のフロントエンド開発事情
Naoki Yamada
最近誰かに「やったほうがいいよ」と伝えた7のこと
最近誰かに「やったほうがいいよ」と伝えた7のこと
Noriaki Kadota
PHPにないセキュリティ機能
PHPにないセキュリティ機能
Yasuo Ohgaki
ブラウザのPerformance APIの話
ブラウザのPerformance APIの話
Hiroshi Kawada
DevOpsが引き金となるインフラエンジニアの進撃
DevOpsが引き金となるインフラエンジニアの進撃
Teruo Adachi
PHPカンファレンス2015
PHPカンファレンス2015
Daisuke Kasuya
まだタスクランナー使っていないって本当(マジ)? 仕事に対する効率化意識向上のための gulp ハンズオン : Wordcamp tokyo 2015
まだタスクランナー使っていないって本当(マジ)? 仕事に対する効率化意識向上のための gulp ハンズオン : Wordcamp tokyo 2015
Hiromu Hasegawa
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
Fumio SAGAWA
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
Naoki Yamada
[MW10] Xamarin / OSS プロジェクトを活用したエンタープライズモバイルアプリケーションの実装 - Project Blue Monkey -
[MW10] Xamarin / OSS プロジェクトを活用したエンタープライズモバイルアプリケーションの実装 - Project Blue Monkey -
de:code 2017
2015年GMOペパボ新卒エンジニア研修 Webオペレーション研修イントロダクション
2015年GMOペパボ新卒エンジニア研修 Webオペレーション研修イントロダクション
Takahiro Okumura
three.jsによる一歩進めたグラフィカルな表現
three.jsによる一歩進めたグラフィカルな表現
Kei Yagi
Spring Boot + Doma + AngularJSで作るERP #jjug_ccc #ccc_r12
Spring Boot + Doma + AngularJSで作るERP #jjug_ccc #ccc_r12
学 松崎
エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織
Takafumi ONAKA
20141116 jjug ccc_2014_keynote1_public
20141116 jjug ccc_2014_keynote1_public
Yoshiharu Hashimoto
Learning from theme review requirements
Learning from theme review requirements
Shinichi Nishikawa
プロジェクトマネジメントは仕組み化が9割
プロジェクトマネジメントは仕組み化が9割
Mharu
速度改善のためにフロント:アプリ:インフラ エンジニアが使うツールについて
速度改善のためにフロント:アプリ:インフラ エンジニアが使うツールについて
Daisuke Tamada
【B-1】kintoneでお手軽コールセンター!
【B-1】kintoneでお手軽コールセンター!
Sakae Saito
What's hot
(20)
中の下のエンジニアを脱出するための仕事術
中の下のエンジニアを脱出するための仕事術
我が家のフロントエンド開発事情
我が家のフロントエンド開発事情
最近誰かに「やったほうがいいよ」と伝えた7のこと
最近誰かに「やったほうがいいよ」と伝えた7のこと
PHPにないセキュリティ機能
PHPにないセキュリティ機能
ブラウザのPerformance APIの話
ブラウザのPerformance APIの話
DevOpsが引き金となるインフラエンジニアの進撃
DevOpsが引き金となるインフラエンジニアの進撃
PHPカンファレンス2015
PHPカンファレンス2015
まだタスクランナー使っていないって本当(マジ)? 仕事に対する効率化意識向上のための gulp ハンズオン : Wordcamp tokyo 2015
まだタスクランナー使っていないって本当(マジ)? 仕事に対する効率化意識向上のための gulp ハンズオン : Wordcamp tokyo 2015
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
[MW10] Xamarin / OSS プロジェクトを活用したエンタープライズモバイルアプリケーションの実装 - Project Blue Monkey -
[MW10] Xamarin / OSS プロジェクトを活用したエンタープライズモバイルアプリケーションの実装 - Project Blue Monkey -
2015年GMOペパボ新卒エンジニア研修 Webオペレーション研修イントロダクション
2015年GMOペパボ新卒エンジニア研修 Webオペレーション研修イントロダクション
three.jsによる一歩進めたグラフィカルな表現
three.jsによる一歩進めたグラフィカルな表現
Spring Boot + Doma + AngularJSで作るERP #jjug_ccc #ccc_r12
Spring Boot + Doma + AngularJSで作るERP #jjug_ccc #ccc_r12
エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織
20141116 jjug ccc_2014_keynote1_public
20141116 jjug ccc_2014_keynote1_public
Learning from theme review requirements
Learning from theme review requirements
プロジェクトマネジメントは仕組み化が9割
プロジェクトマネジメントは仕組み化が9割
速度改善のためにフロント:アプリ:インフラ エンジニアが使うツールについて
速度改善のためにフロント:アプリ:インフラ エンジニアが使うツールについて
【B-1】kintoneでお手軽コールセンター!
【B-1】kintoneでお手軽コールセンター!
Similar to 非エンジニアカンファレンス資料の抜粋
Webワークフローシステム R@bitFlow
Webワークフローシステム R@bitFlow
Ricoh IT Solutions
Web appsとcleardbで作る簡単webサイト
Web appsとcleardbで作る簡単webサイト
Tsukasa Kato
20200708サーバーレスでのAPI管理の考え方
20200708サーバーレスでのAPI管理の考え方
Amazon Web Services Japan
2014年12月 ソネット bit-drive セミナー資料
2014年12月 ソネット bit-drive セミナー資料
wintechq
[CTO Night & Day 2019] グローバルのサービス展開に向けたマルチリージョンアーキテクチャ- #ctonight
[CTO Night & Day 2019] グローバルのサービス展開に向けたマルチリージョンアーキテクチャ- #ctonight
Amazon Web Services Japan
20170705 apiをつくろう
20170705 apiをつくろう
CData Software Japan
[CTC Forum 2019/10/25] 事例から学ぶ!AWS 移行でデータベースの管理・コストを削減する方法
[CTC Forum 2019/10/25] 事例から学ぶ!AWS 移行でデータベースの管理・コストを削減する方法
Takanori Ohba
API Academy:マイクロサービス化へのファーストステップ
API Academy:マイクロサービス化へのファーストステップ
CA Technologies
NiFi amateur struggled story
NiFi amateur struggled story
Jun Ichinose
SQLWorld★大阪#8
SQLWorld★大阪#8
Atsuo Yamasaki
企業のビジネス戦略を体系化するWebサイト設計とは
企業のビジネス戦略を体系化するWebサイト設計とは
loftwork
オープニング
オープニング
konekto
JJUG CCC 2015 Spring: Liberty Profile Technical Deepdive:IBMの新しいアプリケーションサーバーの...
JJUG CCC 2015 Spring: Liberty Profile Technical Deepdive:IBMの新しいアプリケーションサーバーの...
Takakiyo Tanaka
Automation with SoftLayer and Zabbix
Automation with SoftLayer and Zabbix
softlayerjp
Tech Ed 2009 Japan T3-309 Microsoft Business Productivity Online Services 技術概要
Tech Ed 2009 Japan T3-309 Microsoft Business Productivity Online Services 技術概要
kumo2010
Aws summits2014 nttデータaws上のシステムはこう作る!
Aws summits2014 nttデータaws上のシステムはこう作る!
Boss4434
WebサービスStartUP向け AWSスケーラブルな構成例
WebサービスStartUP向け AWSスケーラブルな構成例
Amazon Web Services Japan
03 pepper io_t_web
03 pepper io_t_web
dsuke Takaoka
事例でわかるBIGLOBEクラウドホスティング
事例でわかるBIGLOBEクラウドホスティング
ビジネスBIGLOBE
[REV UP] あなたならどう使う?最新Azureレシピ for LINE Platform
[REV UP] あなたならどう使う?最新Azureレシピ for LINE Platform
拓将 平林
Similar to 非エンジニアカンファレンス資料の抜粋
(20)
Webワークフローシステム R@bitFlow
Webワークフローシステム R@bitFlow
Web appsとcleardbで作る簡単webサイト
Web appsとcleardbで作る簡単webサイト
20200708サーバーレスでのAPI管理の考え方
20200708サーバーレスでのAPI管理の考え方
2014年12月 ソネット bit-drive セミナー資料
2014年12月 ソネット bit-drive セミナー資料
[CTO Night & Day 2019] グローバルのサービス展開に向けたマルチリージョンアーキテクチャ- #ctonight
[CTO Night & Day 2019] グローバルのサービス展開に向けたマルチリージョンアーキテクチャ- #ctonight
20170705 apiをつくろう
20170705 apiをつくろう
[CTC Forum 2019/10/25] 事例から学ぶ!AWS 移行でデータベースの管理・コストを削減する方法
[CTC Forum 2019/10/25] 事例から学ぶ!AWS 移行でデータベースの管理・コストを削減する方法
API Academy:マイクロサービス化へのファーストステップ
API Academy:マイクロサービス化へのファーストステップ
NiFi amateur struggled story
NiFi amateur struggled story
SQLWorld★大阪#8
SQLWorld★大阪#8
企業のビジネス戦略を体系化するWebサイト設計とは
企業のビジネス戦略を体系化するWebサイト設計とは
オープニング
オープニング
JJUG CCC 2015 Spring: Liberty Profile Technical Deepdive:IBMの新しいアプリケーションサーバーの...
JJUG CCC 2015 Spring: Liberty Profile Technical Deepdive:IBMの新しいアプリケーションサーバーの...
Automation with SoftLayer and Zabbix
Automation with SoftLayer and Zabbix
Tech Ed 2009 Japan T3-309 Microsoft Business Productivity Online Services 技術概要
Tech Ed 2009 Japan T3-309 Microsoft Business Productivity Online Services 技術概要
Aws summits2014 nttデータaws上のシステムはこう作る!
Aws summits2014 nttデータaws上のシステムはこう作る!
WebサービスStartUP向け AWSスケーラブルな構成例
WebサービスStartUP向け AWSスケーラブルな構成例
03 pepper io_t_web
03 pepper io_t_web
事例でわかるBIGLOBEクラウドホスティング
事例でわかるBIGLOBEクラウドホスティング
[REV UP] あなたならどう使う?最新Azureレシピ for LINE Platform
[REV UP] あなたならどう使う?最新Azureレシピ for LINE Platform
Recently uploaded
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Hiroki Ichikura
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
Recently uploaded
(8)
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
非エンジニアカンファレンス資料の抜粋
1.
※本資料は、2015年4月に弊社主催で行われた 「非エンジニア向けカンファレンス」で利用した資料を 再度編集したものとなります。ご了承ください。
2.
これだけは押さえておきたい WEBサービスの基礎技術 株式会社we-b 代表取締役 真子
就有
3.
本資料のゴール WEBサービスに関連した基礎技術が それぞれどのような役割を持っているか イメージできるようになること
4.
目次 1. リクエストとレスポンス 2. サーバーとは何か 3.
ウェブサイトの仕組み 4. サーバーサイドスクリプトとデータベース
5.
目次 1. リクエストとレスポンス 2. サーバーとは何か 3.
ウェブサイトの仕組み 4. サーバーサイドスクリプトとデータベース
6.
ウェブサービスや、スマホアプリなど インターネットを使ったサービスは、 サーバーと通信をしています。 ※サーバーについては後程、詳しく解説します
7.
PC、スマホからサーバーに情報を 要求することをリクエストと呼びます http:://tech-camp.in を見せて!
8.
リクエストに応えて、サーバーからPC、スマホ側 に情報を返すことをレスポンスと呼びます。 OK! サイトの情報渡すね!
9.
ちなみに情報を要求する側は、クライアントサイド 情報を返す側をサーバーサイドと呼ばれます 「いろいろ要求するのはお客さん(クライアント)」 と覚えてしまいましょう。 クライアントサイド サーバーサイド
10.
WEBサービスは、リクエストとレスポンスの 連続で成り立っています。
11.
手紙のように往復でやりとりをするので 住所にあたるものが必要になります。
12.
IPアドレス IPアドレス: 54.248.81.201 住所: 渋谷区桜丘町29番24号 リクエストを送る際に必要なサーバーの住所
13.
例えばfacebookのIPアドレスはこちらです 「31.13.82.1」 こんな数字を打ち込んだことはないですよね?
14.
ちなみに「31.13.82.1」と打ち込んでも ちゃんとアクセスできます。
15.
http://facebook.com よく知っているのはこっちだと思います。
16.
ドメイン 数字の羅列であるIPアドレスに人間が分かりやすい ようにつけられた紐付けられたIPアドレスの別名 31.13.82.1 わかりにくい! facebook.com わかりやすい! この変換を名前解決と呼ぶ
17.
リクエストを送る時、 http://facebook.comだけではIPアドレスがわからな いので、名前解決を行なおうとします。 facebookのサーバー http://facebook.comの IPアドレスを知りたい! IPアドレス:????
18.
どうやって名前解決しているのか?
19.
DNS(ドメインネームシステム) インターネット上のドメイン名を管理するシステム。 複数のDNSサーバーによって成り立っている。 facebook.com? 54.248.81.201 DNSサーバー
20.
普段は意識することはありませんが、 リクエストを送る前には、 まずドメインの名前解決をして IPアドレスを取得しています。
21.
ドメインを購入したことはあるでしょうか?
22.
ドメインを買うと、サーバーのIPアドレスと 紐付ける設定を行ないます。 ドメイン IPアドレス ※サーバーを借りるとIPアドレスを教えてもらえます
23.
復習:リクエストとレスポンス •WEBサービスは、リクエストとレスポンスの 連続で成り立っている •情報を要求する側は、クライアントサイド、情報を返 す側をサーバーサイドと呼ぶ •IPアドレスはサーバーの住所をしめす数字の羅列 •ドメインは人間が分かりやすいようにつけられたIPア ドレスの別名
24.
目次 1. リクエストとレスポンス 2. サーバーとは何か 3.
ウェブサイトの仕組み 4. サーバーサイドスクリプトとデータベース
25.
先ほど、サーバーとはリクエストに対して レスポンスを返すものだと学びました。
26.
サーバーと聞くとなんだか凄いものだと 思ってる方は多いようです。
27.
こんなごついイメージですか?
28.
ざっくりいうと電源つけっぱで ネットに繋がった画面のないパソコンです。
29.
みなさんのお持ちのパソコンでも 設定をすればサーバーにできます。
30.
必要な設定の1つがIPアドレスを固定する ということです。
31.
みなさんのお持ちのPCはIPアドレスが コロコロ変わる住所不定の状況にあります。 ✕ 自分のPCがリクエストを 受けることはないので固定されたIPは必要ない
32.
IPアドレスを固定するには、 プロバイダーと別途契約が必要です。
33.
ところで、 みなさんのお持ちのパソコンの OSはなんですか?
34.
デスクトップOSの世界では 未だwindowsのシェアが圧倒的です。 Linux 2% Mac 7% Windows 92% 2015年2月デスクトップOSシェア/円グラフ - Net
Applications報告 OSシェア:デスクトップ
35.
ちなみにモバイルOSだとiOSとAndroidが二強です。 このあたりはご存知の方も多いと思います。 その他 11% Android 36% iOS 53% OSシェア:モバイル/タブレット 全体 -
NetMarketShare 2014年2月 OSシェア:モバイル/タブレット
36.
サーバーも普通のPC・モバイル端末と 同じようにOSが入っています。
37.
UnixというOSを聞いたことがあるでしょうか。 サーバー用OSのシェアではwindowsは少数派です。 その他 10% Windows 32% Unix(Linux含む) 59% 参照URL: http://w3techs.com/technologies/details/os-unix/all/all OSシェア:Webサーバー
38.
Unix ざっくり言うと、OSの元祖のようなもの 1969年にAT&Tのベル研究所で開発開始 http://ja.wikipedia.org/wiki/UNIX#/media/File:Unix_history-simple.svg UNIX
39.
さらにUnixの内訳をみると、 LinuxというOSが大半を占めています。 その他 10% Windows 32% Unix(Linux含む) 59% 参照URL: http://w3techs.com/technologies/details/os-unix/all/all Linux:60% Unknown:40% UNIXの内訳
40.
Linux UNIXをベースにしたOSの一種 サーバーOSとして世界的に大きなシェアを占めている Linuxをベースとして様々なバージョンが存在している ■代表的なLinuxベースOS
41.
例:CentOSのデスクトップ画面 WindowsとMac以外の画面を見る機会は少ないですが LinuxOSもPCにインストールすれば普通に使えます。
42.
少しややこしいですが、 サーバー用のOSはLinuxがよく使われていると 理解できれば大丈夫です。
43.
サーバーとOSについて学んだので それに関連した話をします。
44.
エンジニアが黒い画面を開いて カタカタしてるのを見た事ありませんか?
45.
表示されているのは得たいのしれない文字だけ
46.
マウスやトラックパッドを使って直感的に パソコンを操作できるのは今や当たり前です
47.
昔のパソコンは文字を打つことしかできませんでした。 これはCUI(character-based user interface)と 呼ばれます。
48.
クリックだけで誰もが使える 今のGUI(グラフィカルユーザーインターフェイス)を 普及させようと推し進めたのは、 故スティーブジョブズ氏だったりします。
49.
エンジニアはいつも黒い文字だけの画面を 開いている理由は、開発はCUIを中心に行なうこ とが多いからです。
50.
すごい勢いでタイピングしてるように見せて、 実はただフォルダを移動してるだけだったりします。
51.
復習:サーバーとは何か • サーバーは特定のリクエストに対してレスポンスを 返す電源ネットつけっぱのコンピューター • サーバーのOSはLinuxが使われていることが多い •
直感的にマウス等で操作ができるGUIに対し、開発 はコマンド操作のみのCUIが中心である
52.
目次 1. リクエストとレスポンス 2. サーバーとは何か 3.
ウェブサイトの仕組み 4. サーバーサイドスクリプトとデータベース
53.
みなさんは、 ブラウザを使って多くのウェブサイトを 見ていると思います。
54.
ウェブサイトの画面は どのような技術で表示されているのか 学んでいきましょう。
55.
HTML ウェブページを作成するために開発された言語。 文書の構造を明確にしたり文書の中に画像や動画を配 置できる。 HTMLファイル ブラウザの画面
56.
世の中のあらゆるウェブサイトは HTMLで書かれています。
57.
こちらはTECH::CAMPのウェブサイトです
58.
HTMLを表示するとこのようになります。
59.
しかし、注意すべき点としては HTMLはあくまでサイトの文章、画像の構造を 決めるためのものだということです。
60.
いわゆるデザインに関する情報は CSSという言語で指定していきます
61.
CSS ウェブページのスタイル(見た目)を指定するための言 語です。文章構造とデザインを切り分けることができ ます。 CSSファイル HTMLファイル 実行結果
62.
見た目に関する情報はCSSで まとめて管理することができます。
63.
例えばウェブサイトの見出しの色だけ変えたい時、 HTMLが見た目の情報を持っていると、 全てを編集しないといけないので骨が折れます。 修正 修正 修正
64.
CSSでまとめて管理していると 1つのファイルを編集するだけで済みます 修正
65.
ウェブサイトをつくりたいとおもったら、サーバーに HTMLとCSSファイルをアップロードしておきます。 アップロード
66.
レスポンスでHTMLファイルとCSSファイルを 返すことでウェブページを表示することができます。
67.
復習:ウェブサイトの仕組み • HTMLはウェブページを制作するための言語で、文 章の構造を決めることができる。 • CSSは、ウェブページのスタイル(見た目)を指定す ることができる •
レスポンスでHTMLとCSSを返すことでウェブペー ジを表示することができる
68.
目次 1. リクエストとレスポンス 2. サーバーとは何か 3.
ウェブサイトの仕組み 4. サーバーサイドスクリプトとデータベース
69.
次に、サーバーがリクエストを 受け取ったときの処理について考えていきます。 http:://tech-camp.in を見せて!
70.
最後はレスポンスを 返すことがゴールです レスポンス OK! サイトの情報渡すね!
71.
サーバー内部でどんなことが 行われているか見ていきましょう!
72.
あらゆるプログラムは、先ほど解説した LinuxOSの上で動作します リクエスト レスポンス
73.
ここにただHTMLファイルを置くだけでも ウェブサイトは作れます リクエスト レスポンス
74.
そのかわり、いつ見ても まったく同じページが表示されます。
75.
ただのブログなら良いかもしれませんが サービスをつくることはできません。
76.
サービスをつくるには、 ①データを保存する仕組み ②サービスの仕様を反映したロジック が必要です。
77.
サーバーサイドスクリプト (ruby/java/PHP) データベース ロジックはサーバーサイドスクリプト、 データの保存はデータベースが担当します。 リクエスト レスポンス
78.
データベースから解説していきます サーバーサイドスクリプト (ruby/java/PHP) データベース リクエスト レスポンス
79.
facebookのようなウェブサービスには 多くの情報がのっています。
80.
これらのデータを保存しておく場所が必要です。
81.
データベース データを保存するシステム。通常エクセルのような 表形式で保存され、1つの表をテーブルと呼ぶ。 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 投稿テーブル
82.
データベースを操作するための言語も存在します
83.
SQL(エスキューエル) データベースを操作するための言語。 テーブルの読み出し、追加、更新などの操作ができる id 名前 性別
年齢 住所 1 真子 男性 25 東京 2 木村 女性 21 神奈 3 鈴木 男性 22 栃木 SELECT * FROM USERS WHERE ID = 1; 例:ユーザーテーブルからIDが1のレコード(列)を取り出す
84.
次にサーバーサイドスクリプトについて説明します サーバーサイドスクリプト (ruby/java/PHP) データベース リクエスト レスポンス
85.
データベースはただデータが 保存されているだけなので、 それだけでサービスをつくることはできません。
86.
サービスの仕様にもとづいたロジックや 実際に返すHTMLの情報をプログラムしておく 必要があります。
87.
サーバーサイドスクリプト Ruby、Java、PHPを始めとするサーバー での処理を担うプログラム。これらを用いてロジック を書くことで動的なアプリケーションを作成できる
88.
サーバーサイドスクリプトは、必要に応じて SQLを用いてデータベースから情報を取得します サーバーサイドスクリプト (Ruby/Java/PHP) データベース SELECT * FROM
USERS WHERE ID = 1;
89.
サーバーサイドサイドスクリプトは、データベースから 取得したデータを利用して HTML/CSS を生成します。 サーバーサイドスクリプト (
Ruby / Java / PHP ) データベースから取得したデータ
90.
Ruby、PHP、Javaなど複数のサーバーサイドス クリプトの言語がありますが、書き方が違うだけ で役割は変わりありません。
91.
サーバーサイドスクリプト (Ruby/Java/PHP) データベース 最後は、サーバーからクライアントサイドに HTML/CSSを返して終了です。 リクエスト レスポンス
92.
ブラウザが理解できるのは HTML/CSS だけです。 データベースやサーバーサイドスクリプトは、ブラ ウザとは全く関係ありません。
93.
復習: サーバーサイドスクリプトと データベース • データベースは、データの保存するシステムで テーブルとよばれる表形式で保存される •
SQLはデータベースを操作するための言語 • サーバーサイドスクリプト(Ruby、Java、PHP等)は ウェブサービスのロジックを担当する • サーバーサイドスクリプトは、データベースから必要な データを取得する
Download now