2014-07-19 技術ひろば.net勉強会でのセッション資料です。

1. はじめてのクラウド
インフラとWebとプログラミングと。
森 博之(極東IT-Engineers)

2. 自己紹介
• 森 博之（もり ひろゆき）
• MS開発技術を専門としたフリーランスエンジニア
• Microsoft MVP for Visual C#
• 極東IT-Engineers 代表
• ブログ：もり ひろゆきの日々是勉強
• http://moriblog.kit-eng.com
• Twitter
• Windows8対応[基本＋実用]
Windowsストアアプリ開発入門 好評発売中！

3. Agenda
• クラウドとは？
• Web開発とは？
• いまどきのWebやクラウド

4. クラウドとは？
巷でよく聞くキーワード。

5. クラウド／クラウドコンピューティング
• Cloud
• 【名詞】雲、立ちこめる物、曇り、濁り、憂鬱、落胆、不安
• 【自動詞】曇る、雲で覆われる。不透明になる。（表情などが）暗く
なる
• 【他動詞】～を曇らせる。～不透明にする。（論点などを）ぼかす。
（英辞郎より）
• Cloud Computing
• ネットワーク、特にインターネットをベースとしたコンピュータ資源
の利用形態である。ユーザーはコンピューターによる処理やデータ格
納（まとめて計算資源という）をネットワーク経由で、サービスとし
て利用する。
（Wikipediaより）

6. まだもやもやとする。
もう少し具体的に･･･。

7. Pay only for what you use
• 必要に応じてサービスの利用を選択できる
• 必要なときに必要な分だけ利用した分だけの従量課金
• そして、これらを実現する柔軟でスケーラブルな環境

8. • さまざまな組み合わせで利用できるサービス群
• オンプレミス環境との連携やビックデータ
• 必要なときに必要な分だけ。
Microsoft Azure
Application building blocks

9. Web開発
ブラウザーとインターネットとWeb標準と

10. Webと開発。
• World Wide Web(WWW)
• インターネット上で提供されるハイパーテキストシステム
• クライアントとなるPCやスマートフォンなどのWebブラウザーから
Webサーバーに対してリソースのリクエストを行う。
• Webサーバーは要求に基づいたHTMLやCSSといったリソースを返信す
る。

11. サーバー開発とクライアント開発
• サーバー開発
• ブラウザーからのリクエスト時に指定されたパラメーターに応じて動
的なHTML・CSSなどのWebリソース生成を行い、レスポンスとして返
すアプリケーション開発
• バックエンドにDBMSを持つことも多いため、DBMSの知識も必要にな
る。
• クライアント開発
• ユーザーの操作に対するインタラクティブな振る舞いやサーバーとの
非同期通信によるリソース取得を行い、その結果をWebページへと反
映するような主にブラウザー上で動作するアプリケーション
• リッチクライアント

12. 標準規格と相互運用性(Interoperability)
• さまざまな場所で利用されている標準規格
• コンセント
• 電池
• 文字コード
• ネットワーク
• その他多数！
• 標準規格が定義されていることで利便性が確保できている！
• 相互運用性(Interoperability)

13. Web標準
• Webの標準化はWorld Wide Web Consortium(W3C)によって推進さ
れている
• http://www.w3.org/
• Web標準では
• Hyper Text Markup Language(HTML)
• Webで利用する文章を記述
• Cascade Style Sheet(CSS)
• Web文章の装飾・見た目を記述
• JavaScript
• Webページにおける振る舞い・動作を記述

14. Webの歴史
• 十数年前、Webブラウザーで取り扱うHTMLはブラウザによって表示が異
なったり、CSSが正しく対応していないなど、Webページを作成するには
少々大変な時代がありました。
→いわゆるブラウザ戦争
• Webに関する標準化団体「W3C」で標準化とその推進を目的として活動し
ていました。
• しかし、シェアの争奪戦を背景に、各ブラウザーベンダーは独自の拡張を
行っていました。
• 現在では各ベンダーとも相互運用性を重視するようになり、標準規格に準
拠することを重視しています。

15. Webの歴史
• 前述の通り、Webに関する取り決めはW3Cという標準化団体に
よって標準化・推進が行われていた。
• 十数年前、Webブラウザーは熾烈なシェア争いを背景に独自拡
張を繰り返していました。
→ブラウザーの進化に規格が追いついていなかった
→ブラウザーの無償化によりWebが一気に浸透
→同時にWebページ作成者にとっては大変な時代となった

16. Web標準へ
• その後、新しい動きとしてWeb標準を推進するWeb Standard
Project(WaSP)が設立
• リハビリテーション法第５０８条「電子・情報技術アクセシビ
リティ基準」が米国で実施
• アクセシビリティ→情報に対するアクセス可能性を示す指針
• これによりWeb標準をサポートする「モダンブラウザ」登場

17. Web開発者に求められるもの
• 多くの利用者が情報にアクセスできること
• 様々なデバイスによって情報にアクセスできること
→アクセシビリティ、ユーザビリティ、SEO
• 快適にアクセスできること
→ユーザーエクスペリエンス（UX）

18. HTML5
• Web標準を推進していたWHATWGが定めたWeb Applications 1.0や
Web Forms 2.0を取り入れてW3Cによって現在も策定が行われて
いる。
• 既に多くのブラウザがHTML5の機能を実装
→よりリッチでインタラクティブな表現が行えるように！
→近年はスマートフォンアプリなどもHTML5の機能を用いて作成
されるようになっている。

19. Web開発
• サーバーサイド
• サーバー側に配置されるプログラムにより、HTML,CSSなどを動的に操
作する
• クライアントサイド
• JavaScriptを利用して

20. いまどきの
Webやクラウド
もっと気軽に、もっと簡単に。

21. いまどきのWebクライアントサイド開発
• HTML5 + CSS3
• jQuery
• Zen-Coding
• Responsive Web Design
• CSSフレームワーク
• Sass, Compass
• Bootstrap
• JavaScriptによるデータバインディングフレームワーク
• Ember.js, Backbone.js, Ractive.js, Knockout.js, AngualrJS, Vue.js, Polymerなど
• altJS
• TypeScript, CoffeeScript, Haxe

22. HTML5 + CSS3
• 文章構造を整理
• 表現を単純化
• 文書構造を明確化
• 下位互換
• 多様化するコンテンツへの対応
• オーディオ・ビデオの取り扱い
• Web環境から活用できる各種API
• グラフィカルな表現
• ブラウザー間の互換性

23. jQuery, Zen-Coding
• jQuery
• JavaScriptのコーディング補助を行う軽量なJavaScriptライブラリ
• 利用頻度の高いDOM操作やCSS操作、エフェクトアニメーションなどを
ライブラリ化
• Visual Studioで作成するASP.NETなどにも標準で組み込まれている
• Zen-Coding
• HTMLやCSSなどをスニペット化することで簡略化したWebページの
コーディングを行うことができるライブラリ
• HTML/CSSエディタなどのプラグインとして導入することで利用できる
ようになる
→Web Essentials

24. いまどきWeb開発に利用できる
クラウドサービス
• Virtual Machines
• WindowsサーバーやLinuxなどをフレキシブルにサポート
• 仮想プライベートネットワーク
• Cloud Services
• スケーラブルなアプリケーション・サービスの利用
• 自動管理をサポートし、配置・スケールアウトなどを簡単に
行える。
• Web Sites
• ASP.NET/Java/PHP/Node.js/Pythonなど好みの言語で開発可能
• Wordpress,Drupal, Joomla,Umbraco,DotNetNukeなどのインス
トールイメージなども利用可能

25. まとめ
• クラウドとは
• ネットワークを介してハードウェアやソフトウェアなどの資源をサー
ビスとして利用する
• Web開発
• サーバーサイド開発・クライアントサイド開発それぞれ異なる知識が
必要
• Web標準を意識した開発
• Web開発のトレンド
• HTML5+CSS3+jQuery
• JavaScriptの弱点をカバーするaltJS

26. Thank you!
ご静聴ありがとうございました。