はじめてのクラウドインフラとWebとプログラミングと。

森 博之(極東IT-Engineers)

自己紹介

•森 博之（もり ひろゆき）• MS開発技術を専門としたフリーランスエンジニア

• Microsoft MVP for Visual C#

• 極東IT-Engineers 代表

• ブログ：もり ひろゆきの日々是勉強• http://moriblog.kit-eng.com

• Twitter

• Windows8対応[基本＋実用]

Windowsストアアプリ開発入門 好評発売中！

Agenda

•クラウドとは？

• Web開発とは？

•いまどきのWebやクラウド

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

クラウド／クラウドコンピューティング

• Cloud• 【名詞】雲、立ちこめる物、曇り、濁り、憂鬱、落胆、不安

• 【自動詞】曇る、雲で覆われる。不透明になる。（表情などが）暗くなる

• 【他動詞】～を曇らせる。～不透明にする。（論点などを）ぼかす。（英辞郎より）

• Cloud Computing• ネットワーク、特にインターネットをベースとしたコンピュータ資源の利用形態である。ユーザーはコンピューターによる処理やデータ格納（まとめて計算資源という）をネットワーク経由で、サービスとして利用する。（Wikipediaより）

まだもやもやとする。

もう少し具体的に･･･。

Pay only for what you use

•必要に応じてサービスの利用を選択できる

•必要なときに必要な分だけ利用した分だけの従量課金

•そして、これらを実現する柔軟でスケーラブルな環境

•さまざまな組み合わせで利用できるサービス群

•オンプレミス環境との連携やビックデータ

•必要なときに必要な分だけ。

Microsoft AzureApplication building blocks

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

Webと開発。

• World Wide Web(WWW)• インターネット上で提供されるハイパーテキストシステム

• クライアントとなるPCやスマートフォンなどのWebブラウザーからWebサーバーに対してリソースのリクエストを行う。

• Webサーバーは要求に基づいたHTMLやCSSといったリソースを返信する。

サーバー開発とクライアント開発

•サーバー開発• ブラウザーからのリクエスト時に指定されたパラメーターに応じて動的なHTML・CSSなどのWebリソース生成を行い、レスポンスとして返すアプリケーション開発

• バックエンドにDBMSを持つことも多いため、DBMSの知識も必要になる。

•クライアント開発• ユーザーの操作に対するインタラクティブな振る舞いやサーバーとの非同期通信によるリソース取得を行い、その結果をWebページへと反映するような主にブラウザー上で動作するアプリケーション

• リッチクライアント

標準規格と相互運用性(Interoperability)

•さまざまな場所で利用されている標準規格• コンセント

• 電池

• 文字コード

• ネットワーク

• その他多数！

•標準規格が定義されていることで利便性が確保できている！• 相互運用性(Interoperability)

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ページにおける振る舞い・動作を記述

Webの歴史

• 十数年前、Webブラウザーで取り扱うHTMLはブラウザによって表示が異なったり、CSSが正しく対応していないなど、Webページを作成するには少々大変な時代がありました。

→いわゆるブラウザ戦争

• Webに関する標準化団体「W3C」で標準化とその推進を目的として活動していました。

• しかし、シェアの争奪戦を背景に、各ブラウザーベンダーは独自の拡張を行っていました。

• 現在では各ベンダーとも相互運用性を重視するようになり、標準規格に準拠することを重視しています。

Webの歴史

•前述の通り、Webに関する取り決めはW3Cという標準化団体によって標準化・推進が行われていた。

•十数年前、Webブラウザーは熾烈なシェア争いを背景に独自拡張を繰り返していました。

→ブラウザーの進化に規格が追いついていなかった

→ブラウザーの無償化によりWebが一気に浸透

→同時にWebページ作成者にとっては大変な時代となった

Web標準へ

•その後、新しい動きとしてWeb標準を推進するWeb Standard Project(WaSP)が設立

•リハビリテーション法第５０８条「電子・情報技術アクセシビリティ基準」が米国で実施• アクセシビリティ→情報に対するアクセス可能性を示す指針

•これによりWeb標準をサポートする「モダンブラウザ」登場

Web開発者に求められるもの

•多くの利用者が情報にアクセスできること

•様々なデバイスによって情報にアクセスできること

→アクセシビリティ、ユーザビリティ、SEO

•快適にアクセスできること

→ユーザーエクスペリエンス（UX）

HTML5

• Web標準を推進していたWHATWGが定めたWeb Applications 1.0やWeb Forms 2.0を取り入れてW3Cによって現在も策定が行われている。

•既に多くのブラウザがHTML5の機能を実装

→よりリッチでインタラクティブな表現が行えるように！

→近年はスマートフォンアプリなどもHTML5の機能を用いて作成されるようになっている。

Web開発

•サーバーサイド• サーバー側に配置されるプログラムにより、HTML,CSSなどを動的に操作する

•クライアントサイド• JavaScriptを利用して

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

いまどきの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

HTML5 + CSS3

•文章構造を整理• 表現を単純化

• 文書構造を明確化

• 下位互換

•多様化するコンテンツへの対応• オーディオ・ビデオの取り扱い

• Web環境から活用できる各種API

• グラフィカルな表現

•ブラウザー間の互換性

jQuery, Zen-Coding

• jQuery• JavaScriptのコーディング補助を行う軽量なJavaScriptライブラリ

• 利用頻度の高いDOM操作やCSS操作、エフェクトアニメーションなどをライブラリ化

• Visual Studioで作成するASP.NETなどにも標準で組み込まれている

• Zen-Coding• HTMLやCSSなどをスニペット化することで簡略化したWebページのコーディングを行うことができるライブラリ

• HTML/CSSエディタなどのプラグインとして導入することで利用できるようになる

→Web Essentials

いまどきWeb開発に利用できるクラウドサービス

• Virtual Machines• WindowsサーバーやLinuxなどをフレキシブルにサポート• 仮想プライベートネットワーク

• Cloud Services• スケーラブルなアプリケーション・サービスの利用

• 自動管理をサポートし、配置・スケールアウトなどを簡単に行える。

• Web Sites• ASP.NET/Java/PHP/Node.js/Pythonなど好みの言語で開発可能• Wordpress,Drupal, Joomla,Umbraco,DotNetNukeなどのインストールイメージなども利用可能

まとめ

•クラウドとは• ネットワークを介してハードウェアやソフトウェアなどの資源をサービスとして利用する

• Web開発• サーバーサイド開発・クライアントサイド開発それぞれ異なる知識が必要

• Web標準を意識した開発

• Web開発のトレンド• HTML5+CSS3+jQuery

• JavaScriptの弱点をカバーするaltJS

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