Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a Webapp startup example_to_dolist
Similar a Webapp startup example_to_dolist (20)
Webapp startup example_to_dolist
- 1. TODOアプリで学ぶ WEBアプリケーションの クライアント開発の事始め ＠天王洲で勉強会とか(2012/10/4) キヤノンソフト情報システム 内 慎一朗(Kumeuchi Shinichiro)
- 3. 自己紹介 内慎一朗。 28歳独身おうし座。 2009年キヤノンソフト情報システム入社。 入社ともに上京した関西人。 業務では、主にWebメールのパッケージ製品のスマートフォン版UI開発 などクライアント開発の全般に従事。 業務中ではJavaScript, CSS3, HTML5, Javaなど 趣味は登山、アーチェリー、ランニング、歩き旅などが趣味。 リアルタイムWeb関連技術（WebSocket, node.jsなど）に興味があります。 @kumetter Kumeuchi Shinichiro
- 4. お話しする内容 1.クライアントって？ 2.Webアプリケーションのクライアント 3.HTMLについて 4.CSSについて 5.JavaScriptについて 6.ToDOリストを作りながら考えてみよう
- 5. 1.クライアントって？
- 6. 1. クライアントって？ クライアント 【client】 コンピュータネットワークにおいて、サーバコンピュータの提供する機能やデータを利用 するコンピュータのこと。家庭でインターネットを利用する際のパソコンなどが該当す る。また、サーバソフトウェアの提供する機能やデータ利用するソフトウェアのこと。 Webブラウザなどが該当する。 IT用語辞典 e-Wordより引用
- 7. 1. クライアントって？ 機能を提供。 リクエスト（要求）に応じて、レスポンス（応答）を返す。 機能を使う。 リクエストを送り、レスポンスを受け取る。
- 8. 1. クライアントって？ 機能を提供。 リクエスト（要求）に応じて、レスポンス（応答）を返す。 サーバー 機能を使う。 リクエストを送り、レスポンスを受け取る。
- 9. 1. クライアントって？ 機能を提供。 リクエスト（要求）に応じて、レスポンス（応答）を返す。 サーバー 機能を使う。 リクエストを送り、レスポンスを受け取る。 クライアント
- 10. 1. クライアントって？ クライアントは人が直接使うもの
- 11. 2.WEBアプリケーションの クライアント
- 12. 2. Webアプリケーションのクライアント Webアプリケーションの クライアントが指す範囲
- 16. 2. Webアプリケーションのクライアント 今回お話しする範囲は 原則的にWebブラウザです。
- 17. 2. Webアプリケーションのクライアント クライアントを構成する テクノロジー
- 18. 2. Webアプリケーションのクライアント データ構造 HTML デザイン CSS Flash Silverlight 動作 JavaScript
- 19. 2. Webアプリケーションのクライアント データ構造 HTML デザイン CSS Flash Silverlight 動作 JavaScript
- 20. 2. Webアプリケーションのクライアント データ構造 HTML デザイン CSS Flash Silverlight 動作 JavaScript
- 21. 3.HTMLについて
- 22. 3. HTMLについて •データをタグで囲み意味を持たせる文書 •開始タグ <html> •終了タグ </html> •属性 <div id=”hoge”> •タグは様々なものがあり、108もある •<title>, <h1>∼<h6>, <img>, <table>など •HTML5では新しいデータの表示も対応 (audio,videoなど)
- 23. 3. HTMLについて •基本的なHTMLの書き方 <!DOCTYPE html> ドキュメン ト宣言 <html> <head> <title>HTMLの書き方</title> ヘッダ部分 <meta charset="UTF-8"> 報を記述 </head> 文書のヘッダ情 <body> <header> <h1>HTMLの書き方</h1> <nav> <h1>ナビゲーション</h1> <ul> <li id=”navMenuA”>メニューA</li> <li id=”navMenuB”>メニューB</li> ンツ部分 コンテ <li id=”navMenuC>メニューC</li> を記述 され る部分 </ul> 実際に表示 </nav> </header> <div> </div> </body> </html>
- 24. 3. HTMLについて •ドキュメント宣言について •ドキュメント宣言はブラウザにする挨拶 •HTMLのバージョンなどを知らせます •HTML5で記述する場合には •<!DOCTYPE html> •HTML4で記述する場合には •<!DOCTYPE html4.0> •HTMLのバージョンが違うと見え方が変わっ たりするので意外と重要です
- 25. 3. HTMLについて •ヘッダ情報について •HTMLファイル全体にかかる情報を記述 •文書タイトルや、文字コードなど様々 •後述するCSSファイル、JSファイルの読み込みも •検索キーワードなどの宣言も •スマホで表示した際の倍率や拡大縮小の可否 •結構いろいろあってやっぱりここも意外と重要
- 26. 3. HTMLについて コンテンツ部分について コンテンツに使われるタグは 実に様々なタグがあります
- 27. 3. HTMLについて 大きく分けて４つに分類できます
- 28. 3. HTMLについて インライン要素 ボックス要素 大きく分けて４つに分類できます フォーム要素 メディア要素
- 29. 3. HTMLについて インライン要素 それ自体は形を持たない、 主に文字を格納するタグ要素 <a> リンクを貼る <span> 特定の範囲をグループ化する <br> 改行する <code>, <ruby>など
- 30. 3. HTMLについて ボックス要素 形を持っているタグ。 ページを構成する際に、 一番重要で一番よく使われるタグ要素。 様々なデータ形式がある。
- 31. 3. HTMLについて ボックス要素 <p> 段落の単位でグルーピングする <table>表形式のデータを表現する <ul> リスト形式のデータを表現する <div> 特定の範囲をグルーピングする <header>, <footer>, <nav>など
- 32. 3. HTMLについて フォーム要素 サーバに送信するデータなどを 入力したり、送信する際に用いる要素。 Webアプリケーションではよく使う要素。 <form> データを送信するフォームを作成 <input> ボタンとか文字とか色々な要素 <select>,<option> セレクトメニュー要素 <textarea> 改行を含む文字列の情報 <fieldset>,<label>など
- 33. 3. HTMLについて メディア要素 画像などのメディアデータを表示するタグ。 HTML5で大幅に拡張されたタグ。 <img> 画像を表示するタグ <canvas> ベクトルイメージを描画するタグ <audio> 音楽を表示するタグ <video> ビデオを表示するタグ など
- 34. 3. HTMLについて 説明しきれないほど いろんなタグがあります… <!-- 画面に表示されない コメントタグも意外と重要です -->
- 35. 4.CSSについて
- 36. 4. CSSについて CSSはHTMLファイルの見栄えをよくするものです。 様々なことを指定することができます。 •文字の大きさや色、フォント •ボックスの外枠、内枠の幅や、枠線について •背景色や、背景イメージ •要素自体の高さや横幅 •配置される位置
- 37. 4. CSSについて 今までのCSSは基本的な事しか指定できなかった CSS3からはオシャレな事も指定できるように •みんな大好き角丸 •グラデーション •ボックスの影、文字の影 •アニメーションなども
- 38. 4. CSSについて ブラウザごとに挙動が違ったりするので注意！ IE6~8の暗黒時代…
- 39. 4. CSSについて •CSSを指定する方法は大きく３つ •タグの中にstyle属性を定義して記述する •HTMLファイルの<head>タグ内に <style>タグを定義して記述する •CSSファイルを作成してファイル内に記述する •後者２つの方法はセレクタと呼ばれるスタイル が適用される範囲を指定する方法がポイントに
- 40. 4. CSSについて •実際にCSSはどのように書くかの例 CSSのテスト 見出しにありがちなデザインをどう書くか
- 41. 4. CSSについて •実際にCSSはどのように書くかの例 CSSのテスト 文字の色を青っぽい色に ボックスの内枠が10px 左の枠線を10pxで青色に
- 42. 4. CSSについて •実際にCSSはどのように書くかの例 CSSのテスト 文字の色を青っぽい色に color: #3377FF; ボックスの内枠が10px 左の枠線を10pxで青色に
- 43. 4. CSSについて •実際にCSSはどのように書くかの例 CSSのテスト 文字の色を青っぽい色に color: #3377FF; ボックスの内枠が10px padding: 10px; 左の枠線を10pxで青色に
- 44. 4. CSSについて •実際にCSSはどのように書くかの例 CSSのテスト 文字の色を青っぽい色に color: #3377FF; ボックスの内枠が10px padding: 10px; 左の枠線を10pxで青色に border-left: 10px solid blue;
- 45. 4. CSSについて •タグにstyle属性を定義して記述する方法 <h1 style=”color: #3377FF; padding: 10px; border-left: 10px solid blue;”> CSSのテスト</h1>
- 46. 4. CSSについて •<head>タグ内に<style>タグを定義して記述する <html> <head> <style> h1 { color: #3377FF; padding: 10px; border-left: 10px solid blue; } </style> </head> <body> <h1>CSSのテスト</h1> </body> </html>
- 47. 4. CSSについて •CSSファイルに記述する csstest.html <html> <head> <link rel=”stylesheet” href=”./style.css” tyle=”text/css”> </head> <body> <h1>CSSのテスト</h1> </body> </html> style.css h1 { color: #3377FF; padding: 10px; border-left: 10px solid blue; }
- 48. 4. CSSについて •style属性に書く方法はお手軽 •量が増えてくると重複したものが増えるかも •style属性によるcss指定は描画速度が遅くなる •cssによる指定が多い場合はできるだけセレクタ を用いる •cssファイルに分離した方が1つのファイルで複 数のページでスタイルが使い回せてGood!!
- 49. 4. CSSについて できるだけCSSファイルを使いましょう
- 50. 5.JAVASCRIPTについて
- 51. 5. JavaScriptについて JavaScriptとは •ブラウザ上で動作するスクリプト言語 •Webアプリケーションで欠かせない存在に •コンパイルをする必要はない •ページを読み込めば実行される •ページ上の要素を操作するのに重要な言語 •ページのデータの計算や、動きを実現する •今日サーバ側で動作させるようなものもある •コンパイルしてjsを書き出す言語も登場 •DART, JSX, TypeScriptなど
- 52. 5. JavaScriptについて 書き方
- 53. 5. JavaScriptについて 書き方 •HTMLタグのonclick属性に記述する •HTML上に<script>タグを定義し記述する •jsファイルに記述して、HTMLで読み込む なんだかCSSと同じような感じ…
- 54. 5. JavaScriptについて HTMLタグのonclick属性に記述する <input type=”button” onclick=”JavaScript: alert(‘タグの中でJavaScriptを実行’);”>
- 55. 5. JavaScriptについて HTML上に<script>タグを定義し記述する <script> alert(‘JavaScriptを<script>タグで実行’); </script>
- 56. 5. JavaScriptについて jsファイルに記述して、HTMLで読み込む jstest.html <html> <head> <script src=”./script.js”></script> </head> </html> script.js alert(‘jsファイルでJavaScriptを実行’);
- 57. 5. JavaScriptについて •タグ上に書く方法はその場でかけるのでお手軽 •CSSと同じで共通化できなかったり見づらい •<script>タグに書くのとjsファイルに書くのは 原則的には同じ意味 •ファイル化すると同じ処理を複数のページ使用可
- 58. 5. JavaScriptについて できるだけjsファイルを使いましょう
- 59. 5. JavaScriptについて JavaScriptは読み込んだ時点で実行されるので 記述する位置は大切です。
- 60. 5. JavaScriptについて <html> 読 <head> <script>alert(‘JS’);</script> み </head> <h1>○○○○○</h1> 込 <p> み ○○○○○○○○○○ ○○○○○○○○ 順 ○○○○○○○○○○○○ </p> 序 <input type=”button” onclick=”JavaScript:alert(‘JS’);”> <script>alert(‘JS’);</script> </html>
- 61. 5. JavaScriptについて <html> １ 読 <head> <script>alert(‘JS’);</script> み </head> <h1>○○○○○</h1> 込 <p> み ○○○○○○○○○○ ○○○○○○○○ 順 ○○○○○○○○○○○○ </p> 序 <input type=”button” onclick=”JavaScript:alert(‘JS’);”> <script>alert(‘JS’);</script> </html>
- 62. 5. JavaScriptについて <html> １ 読 <head> <script>alert(‘JS’);</script> み </head> <h1>○○○○○</h1> 込 <p> み ○○○○○○○○○○ ○○○○○○○○ 順 ○○○○○○○○○○○○ </p> 序 <input type=”button” onclick=”JavaScript:alert(‘JS’);”> <script>alert(‘JS’);</script> </html> 2
- 63. 5. JavaScriptについて <html> １ 読 <head> <script>alert(‘JS’);</script> み </head> <h1>○○○○○</h1> 込 <p> み ○○○○○○○○○○ ○○○○○○○○ 順 ○○○○○○○○○○○○ 押された時 </p> 序 <input type=”button” onclick=”JavaScript:alert(‘JS’);”> <script>alert(‘JS’);</script> </html> 2
- 64. 5. JavaScriptについて Webアプリケーションにおける JavaScriptの役割
- 65. 5. JavaScriptについて •データの操作を行う •ユーザの操作によって、処理を行う •イベントリスナー •onclick属性、onload属性などもある •画面上のデータをサーバへ送信する •Formの場合はsubmitでも送信できる •サーバから受信したデータを画面に反映する •jsでサーバから受信する仕組みはAjax
- 67. 6. 実際にToDoリストを作りながら考えてみよう ToDoリストの機能 •入力したデータの登録、送信 •あらかじめ登録されたデータの受信、表示 基本的なWebアプリケーションの機能 を学習する事ができる
- 68. 6. 実際にToDoリストを作りながら考えてみよう 送信 受信 登録 入力 ToDoリスト サーバ (Client) 参照 表示 DB ユーザ
- 69. 6. 実際にToDoリストを作りながら考えてみよう 入力 ToDoリスト (Client) 表示 ユーザ
- 70. 6. 実際にToDoリストを作りながら考えてみよう 登録 入力 ToDoリスト 参照 (Client) 表示 WebStrage ユーザ
- 71. 6. 実際にToDoリストを作りながら考えてみよう 使用する開発ツール Aptana Studio http://www.aptana.com/ Javaでおなじみのeclipseベースの HTML,CSS,JavaScriptに特化した 総合開発環境(IDE) 現状これといった定番のエディタはない… •WebStorm - http://www.jetbrains.com/webstorm/ •DreamWeaver, eclipse(with HTML Editor Plugin),etc
- 72. 6. 実際にToDoリストを作りながら考えてみよう では、実際に作ってみましょう
- 73. 6. 実際にToDoリストを作りながら考えてみよう ライブコーディング中に出てきたjQueryは 便利なのでぜひ使ってみてください http://jquery.com/ •jQuery日本語リファレンス - http://semooh.jp/jquery/ •Qrefy - http://s3pw.com/qrefy/
- 74. まとめ
- 75. まとめ •Webアプリケーションを構成する要素は３つ •HTML, CSS, JavaScript •HTMLには４つの要素がある •インライン、ボックス、フォーム、メディア •CSSは見た目の設定を記述する •JavaScriptはデータ処理や動きを記述する •JavaScriptは実行されるタイミングに注意する •CSS, JavaScriptは原則的に外部ファイルに記述する
Notas del editor
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n