Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

2014 07-19 はじめてのクラウド

806 views

Published on

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

  • Be the first to comment

2014 07-19 はじめてのクラウド

  1. 1. はじめてのクラウド インフラとWebとプログラミングと。 森 博之(極東IT-Engineers)
  2. 2. 自己紹介 • 森 博之(もり ひろゆき) • MS開発技術を専門としたフリーランスエンジニア • Microsoft MVP for Visual C# • 極東IT-Engineers 代表 • ブログ:もり ひろゆきの日々是勉強 • http://moriblog.kit-eng.com • Twitter • Windows8対応[基本+実用] Windowsストアアプリ開発入門 好評発売中!
  3. 3. Agenda • クラウドとは? • Web開発とは? • いまどきのWebやクラウド
  4. 4. クラウドとは? 巷でよく聞くキーワード。
  5. 5. クラウド/クラウドコンピューティング • Cloud • 【名詞】雲、立ちこめる物、曇り、濁り、憂鬱、落胆、不安 • 【自動詞】曇る、雲で覆われる。不透明になる。(表情などが)暗く なる • 【他動詞】~を曇らせる。~不透明にする。(論点などを)ぼかす。 (英辞郎より) • Cloud Computing • ネットワーク、特にインターネットをベースとしたコンピュータ資源 の利用形態である。ユーザーはコンピューターによる処理やデータ格 納(まとめて計算資源という)をネットワーク経由で、サービスとし て利用する。 (Wikipediaより)
  6. 6. まだもやもやとする。 もう少し具体的に・・・。
  7. 7. Pay only for what you use • 必要に応じてサービスの利用を選択できる • 必要なときに必要な分だけ利用した分だけの従量課金 • そして、これらを実現する柔軟でスケーラブルな環境
  8. 8. • さまざまな組み合わせで利用できるサービス群 • オンプレミス環境との連携やビックデータ • 必要なときに必要な分だけ。 Microsoft Azure Application building blocks
  9. 9. Web開発 ブラウザーとインターネットとWeb標準と
  10. 10. Webと開発。 • World Wide Web(WWW) • インターネット上で提供されるハイパーテキストシステム • クライアントとなるPCやスマートフォンなどのWebブラウザーから Webサーバーに対してリソースのリクエストを行う。 • Webサーバーは要求に基づいたHTMLやCSSといったリソースを返信す る。
  11. 11. サーバー開発とクライアント開発 • サーバー開発 • ブラウザーからのリクエスト時に指定されたパラメーターに応じて動 的なHTML・CSSなどのWebリソース生成を行い、レスポンスとして返 すアプリケーション開発 • バックエンドにDBMSを持つことも多いため、DBMSの知識も必要にな る。 • クライアント開発 • ユーザーの操作に対するインタラクティブな振る舞いやサーバーとの 非同期通信によるリソース取得を行い、その結果をWebページへと反 映するような主にブラウザー上で動作するアプリケーション • リッチクライアント
  12. 12. 標準規格と相互運用性(Interoperability) • さまざまな場所で利用されている標準規格 • コンセント • 電池 • 文字コード • ネットワーク • その他多数! • 標準規格が定義されていることで利便性が確保できている! • 相互運用性(Interoperability)
  13. 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. 14. Webの歴史 • 十数年前、Webブラウザーで取り扱うHTMLはブラウザによって表示が異 なったり、CSSが正しく対応していないなど、Webページを作成するには 少々大変な時代がありました。 →いわゆるブラウザ戦争 • Webに関する標準化団体「W3C」で標準化とその推進を目的として活動し ていました。 • しかし、シェアの争奪戦を背景に、各ブラウザーベンダーは独自の拡張を 行っていました。 • 現在では各ベンダーとも相互運用性を重視するようになり、標準規格に準 拠することを重視しています。
  15. 15. Webの歴史 • 前述の通り、Webに関する取り決めはW3Cという標準化団体に よって標準化・推進が行われていた。 • 十数年前、Webブラウザーは熾烈なシェア争いを背景に独自拡 張を繰り返していました。 →ブラウザーの進化に規格が追いついていなかった →ブラウザーの無償化によりWebが一気に浸透 →同時にWebページ作成者にとっては大変な時代となった
  16. 16. Web標準へ • その後、新しい動きとしてWeb標準を推進するWeb Standard Project(WaSP)が設立 • リハビリテーション法第508条「電子・情報技術アクセシビ リティ基準」が米国で実施 • アクセシビリティ→情報に対するアクセス可能性を示す指針 • これによりWeb標準をサポートする「モダンブラウザ」登場
  17. 17. Web開発者に求められるもの • 多くの利用者が情報にアクセスできること • 様々なデバイスによって情報にアクセスできること →アクセシビリティ、ユーザビリティ、SEO • 快適にアクセスできること →ユーザーエクスペリエンス(UX)
  18. 18. HTML5 • Web標準を推進していたWHATWGが定めたWeb Applications 1.0や Web Forms 2.0を取り入れてW3Cによって現在も策定が行われて いる。 • 既に多くのブラウザがHTML5の機能を実装 →よりリッチでインタラクティブな表現が行えるように! →近年はスマートフォンアプリなどもHTML5の機能を用いて作成 されるようになっている。
  19. 19. Web開発 • サーバーサイド • サーバー側に配置されるプログラムにより、HTML,CSSなどを動的に操 作する • クライアントサイド • JavaScriptを利用して
  20. 20. いまどきの Webやクラウド もっと気軽に、もっと簡単に。
  21. 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. 22. HTML5 + CSS3 • 文章構造を整理 • 表現を単純化 • 文書構造を明確化 • 下位互換 • 多様化するコンテンツへの対応 • オーディオ・ビデオの取り扱い • Web環境から活用できる各種API • グラフィカルな表現 • ブラウザー間の互換性
  23. 23. jQuery, Zen-Coding • jQuery • JavaScriptのコーディング補助を行う軽量なJavaScriptライブラリ • 利用頻度の高いDOM操作やCSS操作、エフェクトアニメーションなどを ライブラリ化 • Visual Studioで作成するASP.NETなどにも標準で組み込まれている • Zen-Coding • HTMLやCSSなどをスニペット化することで簡略化したWebページの コーディングを行うことができるライブラリ • HTML/CSSエディタなどのプラグインとして導入することで利用できる ようになる →Web Essentials
  24. 24. いまどきWeb開発に利用できる クラウドサービス • Virtual Machines • WindowsサーバーやLinuxなどをフレキシブルにサポート • 仮想プライベートネットワーク • Cloud Services • スケーラブルなアプリケーション・サービスの利用 • 自動管理をサポートし、配置・スケールアウトなどを簡単に 行える。 • Web Sites • ASP.NET/Java/PHP/Node.js/Pythonなど好みの言語で開発可能 • Wordpress,Drupal, Joomla,Umbraco,DotNetNukeなどのインス トールイメージなども利用可能
  25. 25. まとめ • クラウドとは • ネットワークを介してハードウェアやソフトウェアなどの資源をサー ビスとして利用する • Web開発 • サーバーサイド開発・クライアントサイド開発それぞれ異なる知識が 必要 • Web標準を意識した開発 • Web開発のトレンド • HTML5+CSS3+jQuery • JavaScriptの弱点をカバーするaltJS
  26. 26. Thank you! ご静聴ありがとうございました。

×