• Save
Webapp startup example_to_dolist
Upcoming SlideShare
Loading in...5
×
 

Webapp startup example_to_dolist

on

  • 480 views

 

Statistics

Views

Total Views
480
Views on SlideShare
480
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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

Webapp startup example_to_dolist Webapp startup example_to_dolist Presentation Transcript

  • TODOアプリで学ぶWEBアプリケーションのクライアント開発の事始め @天王洲で勉強会とか(2012/10/4) キヤノンソフト情報システム 内 慎一朗(Kumeuchi Shinichiro)
  • おことわり本発表は発表者個人の見解及び調査したものであり所属する企業とは何ら関係ありません。また、発表の内容についてはすでに古かったり、間違っている内容が含まれている事もあります。こういった発表にまだまだ慣れていないため、不手際があるとは思いますが、ご了承ください。
  • 自己紹介 内慎一朗。28歳独身おうし座。2009年キヤノンソフト情報システム入社。入社ともに上京した関西人。業務では、主にWebメールのパッケージ製品のスマートフォン版UI開発などクライアント開発の全般に従事。業務中ではJavaScript, CSS3, HTML5, Javaなど 趣味は登山、アーチェリー、ランニング、歩き旅などが趣味。リアルタイムWeb関連技術(WebSocket, node.jsなど)に興味があります。 @kumetter Kumeuchi Shinichiro
  • お話しする内容1.クライアントって?2.Webアプリケーションのクライアント3.HTMLについて4.CSSについて5.JavaScriptについて6.ToDOリストを作りながら考えてみよう
  • 1.クライアントって?
  • 1. クライアントって?クライアント【client】コンピュータネットワークにおいて、サーバコンピュータの提供する機能やデータを利用するコンピュータのこと。家庭でインターネットを利用する際のパソコンなどが該当する。また、サーバソフトウェアの提供する機能やデータ利用するソフトウェアのこと。Webブラウザなどが該当する。 IT用語辞典 e-Wordより引用
  • 1. クライアントって? 機能を提供。 リクエスト(要求)に応じて、レスポンス(応答)を返す。 機能を使う。 リクエストを送り、レスポンスを受け取る。
  • 1. クライアントって? 機能を提供。 リクエスト(要求)に応じて、レスポンス(応答)を返す。 サーバー 機能を使う。 リクエストを送り、レスポンスを受け取る。
  • 1. クライアントって? 機能を提供。 リクエスト(要求)に応じて、レスポンス(応答)を返す。 サーバー 機能を使う。 リクエストを送り、レスポンスを受け取る。 クライアント
  • 1. クライアントって? クライアントは人が直接使うもの
  • 2.WEBアプリケーションの クライアント
  • 2. Webアプリケーションのクライアント Webアプリケーションの クライアントが指す範囲
  • 2. Webアプリケーションのクライアント
  • 2. Webアプリケーションのクライアント
  • 2. Webアプリケーションのクライアント
  • 2. Webアプリケーションのクライアント 今回お話しする範囲は 原則的にWebブラウザです。
  • 2. Webアプリケーションのクライアント クライアントを構成する テクノロジー
  • 2. Webアプリケーションのクライアントデータ構造 HTMLデザイン CSS Flash Silverlight 動作 JavaScript
  • 2. Webアプリケーションのクライアントデータ構造 HTMLデザイン CSS Flash Silverlight 動作 JavaScript
  • 2. Webアプリケーションのクライアントデータ構造 HTMLデザイン CSS Flash Silverlight 動作 JavaScript
  • 3.HTMLについて
  • 3. HTMLについて •データをタグで囲み意味を持たせる文書 •開始タグ <html> •終了タグ </html> •属性 <div id=”hoge”> •タグは様々なものがあり、108もある •<title>, <h1>∼<h6>, <img>, <table>など •HTML5では新しいデータの表示も対応 (audio,videoなど)
  • 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>
  • 3. HTMLについて •ドキュメント宣言について •ドキュメント宣言はブラウザにする挨拶 •HTMLのバージョンなどを知らせます •HTML5で記述する場合には •<!DOCTYPE html> •HTML4で記述する場合には •<!DOCTYPE html4.0> •HTMLのバージョンが違うと見え方が変わっ たりするので意外と重要です
  • 3. HTMLについて •ヘッダ情報について •HTMLファイル全体にかかる情報を記述 •文書タイトルや、文字コードなど様々 •後述するCSSファイル、JSファイルの読み込みも •検索キーワードなどの宣言も •スマホで表示した際の倍率や拡大縮小の可否 •結構いろいろあってやっぱりここも意外と重要
  • 3. HTMLについて コンテンツ部分について コンテンツに使われるタグは 実に様々なタグがあります
  • 3. HTMLについて 大きく分けて4つに分類できます
  • 3. HTMLについて インライン要素 ボックス要素 大きく分けて4つに分類できます フォーム要素 メディア要素
  • 3. HTMLについて インライン要素 それ自体は形を持たない、 主に文字を格納するタグ要素  <a> リンクを貼る  <span> 特定の範囲をグループ化する  <br> 改行する  <code>, <ruby>など
  • 3. HTMLについて ボックス要素 形を持っているタグ。 ページを構成する際に、 一番重要で一番よく使われるタグ要素。 様々なデータ形式がある。
  • 3. HTMLについて ボックス要素  <p> 段落の単位でグルーピングする  <table>表形式のデータを表現する  <ul> リスト形式のデータを表現する  <div> 特定の範囲をグルーピングする  <header>, <footer>, <nav>など
  • 3. HTMLについて フォーム要素 サーバに送信するデータなどを 入力したり、送信する際に用いる要素。 Webアプリケーションではよく使う要素。  <form> データを送信するフォームを作成  <input> ボタンとか文字とか色々な要素  <select>,<option> セレクトメニュー要素  <textarea> 改行を含む文字列の情報  <fieldset>,<label>など
  • 3. HTMLについて メディア要素 画像などのメディアデータを表示するタグ。 HTML5で大幅に拡張されたタグ。  <img> 画像を表示するタグ  <canvas> ベクトルイメージを描画するタグ  <audio> 音楽を表示するタグ  <video> ビデオを表示するタグ  など
  • 3. HTMLについて 説明しきれないほど いろんなタグがあります…  <!-- 画面に表示されない    コメントタグも意外と重要です -->
  • 4.CSSについて
  • 4. CSSについて CSSはHTMLファイルの見栄えをよくするものです。 様々なことを指定することができます。 •文字の大きさや色、フォント •ボックスの外枠、内枠の幅や、枠線について •背景色や、背景イメージ •要素自体の高さや横幅 •配置される位置
  • 4. CSSについて 今までのCSSは基本的な事しか指定できなかった CSS3からはオシャレな事も指定できるように •みんな大好き角丸 •グラデーション •ボックスの影、文字の影 •アニメーションなども
  • 4. CSSについて ブラウザごとに挙動が違ったりするので注意! IE6~8の暗黒時代…
  • 4. CSSについて •CSSを指定する方法は大きく3つ •タグの中にstyle属性を定義して記述する •HTMLファイルの<head>タグ内に <style>タグを定義して記述する •CSSファイルを作成してファイル内に記述する •後者2つの方法はセレクタと呼ばれるスタイル が適用される範囲を指定する方法がポイントに
  • 4. CSSについて •実際にCSSはどのように書くかの例 CSSのテスト 見出しにありがちなデザインをどう書くか
  • 4. CSSについて •実際にCSSはどのように書くかの例 CSSのテスト 文字の色を青っぽい色に ボックスの内枠が10px左の枠線を10pxで青色に
  • 4. CSSについて •実際にCSSはどのように書くかの例 CSSのテスト 文字の色を青っぽい色に color: #3377FF; ボックスの内枠が10px左の枠線を10pxで青色に
  • 4. CSSについて •実際にCSSはどのように書くかの例 CSSのテスト 文字の色を青っぽい色に color: #3377FF; ボックスの内枠が10px padding: 10px;左の枠線を10pxで青色に
  • 4. CSSについて •実際にCSSはどのように書くかの例 CSSのテスト 文字の色を青っぽい色に color: #3377FF; ボックスの内枠が10px padding: 10px;左の枠線を10pxで青色に border-left: 10px solid blue;
  • 4. CSSについて •タグにstyle属性を定義して記述する方法 <h1 style=”color: #3377FF; padding: 10px; border-left: 10px solid blue;”> CSSのテスト</h1>
  • 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>
  • 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; }
  • 4. CSSについて •style属性に書く方法はお手軽 •量が増えてくると重複したものが増えるかも •style属性によるcss指定は描画速度が遅くなる •cssによる指定が多い場合はできるだけセレクタ を用いる •cssファイルに分離した方が1つのファイルで複 数のページでスタイルが使い回せてGood!!
  • 4. CSSについて できるだけCSSファイルを使いましょう
  • 5.JAVASCRIPTについて
  • 5. JavaScriptについて JavaScriptとは •ブラウザ上で動作するスクリプト言語 •Webアプリケーションで欠かせない存在に •コンパイルをする必要はない •ページを読み込めば実行される •ページ上の要素を操作するのに重要な言語 •ページのデータの計算や、動きを実現する •今日サーバ側で動作させるようなものもある •コンパイルしてjsを書き出す言語も登場 •DART, JSX, TypeScriptなど
  • 5. JavaScriptについて 書き方
  • 5. JavaScriptについて 書き方 •HTMLタグのonclick属性に記述する •HTML上に<script>タグを定義し記述する •jsファイルに記述して、HTMLで読み込む なんだかCSSと同じような感じ…
  • 5. JavaScriptについて HTMLタグのonclick属性に記述する <input type=”button” onclick=”JavaScript: alert(‘タグの中でJavaScriptを実行’);”>
  • 5. JavaScriptについて HTML上に<script>タグを定義し記述する <script> alert(‘JavaScriptを<script>タグで実行’); </script>
  • 5. JavaScriptについて jsファイルに記述して、HTMLで読み込む jstest.html <html> <head> <script src=”./script.js”></script> </head> </html> script.js alert(‘jsファイルでJavaScriptを実行’);
  • 5. JavaScriptについて •タグ上に書く方法はその場でかけるのでお手軽 •CSSと同じで共通化できなかったり見づらい •<script>タグに書くのとjsファイルに書くのは  原則的には同じ意味 •ファイル化すると同じ処理を複数のページ使用可
  • 5. JavaScriptについて できるだけjsファイルを使いましょう
  • 5. JavaScriptについて JavaScriptは読み込んだ時点で実行されるので 記述する位置は大切です。
  • 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>
  • 5. JavaScriptについて <html> 1 読 <head> <script>alert(‘JS’);</script> み </head> <h1>○○○○○</h1> 込 <p> み ○○○○○○○○○○ ○○○○○○○○ 順 ○○○○○○○○○○○○ </p> 序 <input type=”button” onclick=”JavaScript:alert(‘JS’);”> <script>alert(‘JS’);</script> </html>
  • 5. JavaScriptについて <html> 1 読 <head> <script>alert(‘JS’);</script> み </head> <h1>○○○○○</h1> 込 <p> み ○○○○○○○○○○ ○○○○○○○○ 順 ○○○○○○○○○○○○ </p> 序 <input type=”button” onclick=”JavaScript:alert(‘JS’);”> <script>alert(‘JS’);</script> </html> 2
  • 5. JavaScriptについて <html> 1 読 <head> <script>alert(‘JS’);</script> み </head> <h1>○○○○○</h1> 込 <p> み ○○○○○○○○○○ ○○○○○○○○ 順 ○○○○○○○○○○○○ 押された時 </p> 序 <input type=”button” onclick=”JavaScript:alert(‘JS’);”> <script>alert(‘JS’);</script> </html> 2
  • 5. JavaScriptについて Webアプリケーションにおける JavaScriptの役割
  • 5. JavaScriptについて •データの操作を行う •ユーザの操作によって、処理を行う •イベントリスナー •onclick属性、onload属性などもある •画面上のデータをサーバへ送信する •Formの場合はsubmitでも送信できる •サーバから受信したデータを画面に反映する •jsでサーバから受信する仕組みはAjax
  • 6.実際にTODOリストを作りながら考えてみよう
  • 6. 実際にToDoリストを作りながら考えてみよう ToDoリストの機能 •入力したデータの登録、送信 •あらかじめ登録されたデータの受信、表示 基本的なWebアプリケーションの機能 を学習する事ができる
  • 6. 実際にToDoリストを作りながら考えてみよう 送信 受信 登録 入力 ToDoリスト サーバ (Client) 参照 表示 DB ユーザ
  • 6. 実際にToDoリストを作りながら考えてみよう 入力 ToDoリスト (Client) 表示 ユーザ
  • 6. 実際にToDoリストを作りながら考えてみよう 登録 入力 ToDoリスト 参照 (Client) 表示 WebStrage ユーザ
  • 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
  • 6. 実際にToDoリストを作りながら考えてみよう では、実際に作ってみましょう
  • 6. 実際にToDoリストを作りながら考えてみよう ライブコーディング中に出てきたjQueryは 便利なのでぜひ使ってみてください http://jquery.com/•jQuery日本語リファレンス - http://semooh.jp/jquery/•Qrefy - http://s3pw.com/qrefy/
  • まとめ
  • まとめ•Webアプリケーションを構成する要素は3つ •HTML, CSS, JavaScript•HTMLには4つの要素がある •インライン、ボックス、フォーム、メディア•CSSは見た目の設定を記述する•JavaScriptはデータ処理や動きを記述する •JavaScriptは実行されるタイミングに注意する•CSS, JavaScriptは原則的に外部ファイルに記述する
  • 以上、長らくの間ご清聴ありがとうございます。