Webサイトの仕組みと
プログラミング言語について
Webデザイナに必要なWeb知識
プログラミング言語の種類、FTP、.htaccessなど
Ⓒ 2015 Yoshihiro Takahashi All Rights Reserved.
2
Webサイトが見られる仕組み
Webサーバー
ユーザー
②HTTPでファイル送信
①アドレス入力、
リンククリック
Ⓒ 2015 Yoshihiro Takahashi All Rights Reserved. 3
Webサイトの表示
サイト表示の基本は、HTML + CSS
動きは、JavaScript
Webサーバー
ユーザー
4
JavaScriptに
ついて
Ⓒ 2015 Yoshihiro Takahashi All Rights Reserved.
Ⓒ 2015 Yoshihiro Takahashi All Rights Reserved. 5
JavaScriptの役割
• 楽しい
– サイトにエンターテインメント性を加える
• 分かりやすい
– きちんと情報を伝達
• 便利
– サイトに付加価値を与える
Ⓒ 2015 Yoshihiro Takahashi All Rights Reserved. 6
JavaScriptの役割
• 楽しい
– MUJI to Relax - 無印良品
– 株式会社 闇
• 分かりやすい
– SVOLME Team Order
• 便利
– チャットワーク
– Google Map
– Google検索のサジェスト
7
古い時代のWebサイトの仕組み
• Webは提供者とユーザが分断されており、
一方的な情報発信であった
Ⓒ 2015 Yoshihiro Takahashi All Rights Reserved.
ユーザー
情報表示
8
現代のWebサイトの仕組み
• 提供者とユーザの垣根がなくなり、ユーザが容易に情報発
信できる
– Twitter、facebookなどが分かりやすいユーザー参加型の仕組み
Ⓒ 2015 Yoshihiro Takahashi All Rights Reserved.
ユーザー
情報追加・更新
情報表示
Ⓒ 2015 Yoshihiro Takahashi All Rights Reserved.
9
Webサイトコンテンツの作り方
• 基本は、HTML + CSS
• 動きは、JavaScript
• ショッピングサイトのようなシステム
• ブログやSNSのようなユーザ参加型システム
Ⓒ 2015 Yoshihiro Takahashi All Rights Reserved.
10
Webサイトが見られる仕組み
Webサーバー
ユーザー
③作成したファイル送信
②サーバーサイド
プログラムで
ページ作成
①ユーザ入力情報を発信
Ⓒ 2015 Yoshihiro Takahashi All Rights Reserved. 11
現代のWebサイトの仕組みを
支える技術
サーバーサイドプログラム
(Webサーバで動くプログラム:PHP, Javaなど)
=
12
サーバーサイド
プログラムの役割
Ⓒ 2015 Yoshihiro Takahashi All Rights Reserved.
Ⓒ 2015 Yoshihiro Takahashi All Rights Reserved. 13
JavaScriptの役割
• 楽しい
– サイトにエンターテインメント性を加える
• 分かりやすい
– きちんと情報を伝達
• 便利
– サイトに付加価値を与える
Ⓒ 2015 Yoshihiro Takahashi All Rights Reserved. 14
サーバーサイドプログラムの役割
• 楽しい
– サイトにエンターテインメント性を加える
• 分かりやすい
– きちんと情報を伝達
• 便利を実現するための裏方作業
– サイトに付加価値を与える
15
サーバーサイド
プログラムは裏方
Ⓒ 2015 Yoshihiro Takahashi All Rights Reserved.
Ⓒ 2015 Yoshihiro Takahashi All Rights Reserved. 16
Webサイトの表示
Webサーバー
ユーザー
②サーバーサイド
プログラムで
ページ制作
(通常プログラミング
言語は一種類)
HTML・CSS
JavaScriptで表示
①ユーザ入力情報を発信
③作成したファイル送信
Ⓒ 2015 Yoshihiro Takahashi All Rights Reserved. 17
Webの仕組み
• ブラウザで表示している内容
– HTML・CSS・JavaScriptで制作
• サーバーサイドプログラムの仕事
– 表示用のHTML・CSS・JavaScriptを生成
– 生成しているところは見えない
Ⓒ 2015 Yoshihiro Takahashi All Rights Reserved. 18
サーバーサイドプログラムの役割
• 情報の保存、保存情報の表示、メール送信
– ショッピングサイト
• ユーザー情報を登録・表示
• カート内アイテムを記憶・表示
• 検索結果を表示
– SNS
• 投稿した内容を記憶・表示
– アンケートフォーム
• ユーザ情報の登録
• 確認メール送信
19
プログラミング言語
の種類
Ⓒ 2015 Yoshihiro Takahashi All Rights Reserved.
Ⓒ 2015 Yoshihiro Takahashi All Rights Reserved. 20
プログラミング言語の種類
• サーバーサイドプログラム
– PHP, Ruby, Scala, Go, Java, C++, JavaScript
• クライアントサイドプログラム(ブラウザ側)
– JavaScript
• アプリ開発言語
– Objective-C, Swift, Java, C++, C#
• 組み込み用言語
– C
Ⓒ 2015 Yoshihiro Takahashi All Rights Reserved. 21
サーバーサイドプログラム言語の種類
• PHP
– シェアNo1, HTMLと混在できる
• Ruby
– Railsフレームワークにより、Webアプリ開発が容易
• Scala
– Twitter が Ruby(Rails) から Scalaに変更し有名
• Go
– C++に限界を感じ、Googleが開発
• JavaScript
– Node.JSというサーバーサイド環境を用いることで可能
Ⓒ 2015 Yoshihiro Takahashi All Rights Reserved. 22
アプリ開発言語とツール
• Xcode(Apple製OS限定)
– 言語は、Objective-C・Swiftに対応
• Android Studio(Androidアプリ限定)
– 言語は、Javaに対応
• Unity(複数端末に対応 3Dゲームが有名)
– 言語は、C#・Unity Scriptに対応
• Visual Studio(MS製OSに対応)
– 言語は、C#・C++・Basicなどに対応
Ⓒ 2015 Yoshihiro Takahashi All Rights Reserved.
23
Webデザイナとプログラマの仕事
Ⓒ 2015 Yoshihiro Takahashi All Rights Reserved.
24
Webの仕事(技術)
クライアントサイド
(ブラウザ上で動作する技術)
サーバーサイド
(サーバ上で動作する技術)
HTML
CSS
JavaScript
Flash(ActionScript)
ユーザビリティ
アクセスビリティ
映像
・・・・
Webデザイナの仕事 Webプログラマの仕事
PHP
データベース
Webサーバ
メールサーバ
ネットワーク
OS
・・・・
Ⓒ 2015 Yoshihiro Takahashi All Rights Reserved.
25
Webデザイナとプログラマの関係
Ⓒ 2015 Yoshihiro Takahashi All Rights Reserved.
26
Webデザイナとプログラマの関係
• あまり仲が良くない??
– 仲が悪いわけではないが、お互いコミュニ
ケーションが取れていない
• 文化が違うから?
– お互いが何を考えているのか知り、もっと上
手く付き合いたい
Ⓒ 2015 Yoshihiro Takahashi All Rights Reserved.
27
デザイナ側の問題点&改善
• もっと楽が出来ると思う
– 同じような内容を何回もコピー&ペーストで繰り返し
作業している
• メニューを共通化してみる
• for文などを利用してみる
• 作業環境を軽視している
– 手動でFTPのアップを行なっている
• ツールを上手く利用しよう
• 必要な情報をきちんと伝えていない
– プログラマが設計する際に必要な情報を伝えて欲しい
Ⓒ 2015 Yoshihiro Takahashi All Rights Reserved.
28
デザイナ側の問題点&改善
• 最低限のプログラムの知識を身に付けて
– <?php ~ ?>は壊さないで・・・
– Smarty {~}は壊さないで・・・
• if文やfor文は覚えて欲しい
• JSはある程度覚えて欲しい、jQueryはデザイナの
領域
29
FTPについて
Ⓒ 2015 Yoshihiro Takahashi All Rights Reserved.
Ⓒ 2015 Yoshihiro Takahashi All Rights Reserved.
30
FTPについて
FTPサーバー
ユーザー
Webデザイナ
FTPで
制作ファイルを
アップロード
HTTPで
ファイルを
表示
Ⓒ 2015 Yoshihiro Takahashi All Rights Reserved.
31
FFFTP(Windows)
Fetch(Macintosh)
• 主なFTPソフトについて
FileZilla(Windows/Mac)
FTPとデバッグについて
Ⓒ 2015 Yoshihiro Takahashi All Rights Reserved.
32
• DreamweaverのFTPは便利
FTPとデバッグについて
Ⓒ 2015 Yoshihiro Takahashi All Rights Reserved.
33
FTP公開前の注意事項
Ⓒ 2014 Yoshihiro Takahashi All Rights Reserved.
34
誤字/脱字
HTML文法チェック
リンクチェック
Scriptの動作チェック
画面の表示速度
複数のブラウザ表示チェック
・・・など
• 公開前のサイトのチェック項目
FTPとデバッグについて
Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 35
HTMLの文法チェック
• W3CによるHTML文法チェック
Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 36
CSSの文法チェック
• W3CによるCSS文法チェック
Ⓒ 2014 Yoshihiro Takahashi All Rights Reserved.
37
リンクチェック
• Dreamweaverのリンクチェックが便利
– サイト内のリンクチェックができる
– 自サイトからの外部リンクもチェックできる
Ⓒ 2014 Yoshihiro Takahashi All Rights Reserved.
38
複数ブラウザチェック
• 動作チェック対象ブラウザ
– Windows
• Edge,IE11,IE10,IE9,IE8
• Google Chrome
• Firefox
– iPhone、Android
• Google Chrome,Safari,Firefox・・・
– Mac
• Safari ,Google Chrome,Firefox
Ⓒ 2014 Yoshihiro Takahashi All Rights Reserved.
39
リンクチェックの問題点
• 自分のサイト外からのリンクチェック
– File Not Foundの設定方法
.htaccess ファイルをサーバに設置
ErrorDocument 404 /~user/404.html
Ⓒ 2015 Yoshihiro Takahashi All Rights Reserved.
40
.htaccessについて
Ⓒ 2014 Yoshihiro Takahashi All Rights Reserved.
41
.htaccessについて
• .htaccessファイル
– Webデザイナは、Apache(Webサーバ)の設定を直
接行えないため、.htaccessというファイルを利用して、
Apacheの設定を一部を変更することができる
– ファイル名の先頭にあるドットはUNIX系OSにおいて
「隠しファイル」を意味し、拡張子だけのファイルで
はない
Ⓒ 2014 Yoshihiro Takahashi All Rights Reserved.
42
.htaccessファイルの用途
• htaccessファイルの用途例
– パスワードによる制限
• Basic認証によるパスワード制限
– エラーページの表示
• Webサーバの各エラーに対して、表示するページが設定できる
– URLの変更(リダイレクト)
• スマホからPCサイトにアクセスした時に、スマホ用URLへ転送
できる
– 画像などの直接リンク拒否設定
• 外部サイトから、自サイト内の画像を読み込みをされると自サ
イトに負荷が掛かるので対策する
Ⓒ 2014 Yoshihiro Takahashi All Rights Reserved.
43
.htaccessファイルの注意事項
• htaccessファイルの作成
– .htaccessはテキストファイルなので、テキストエディタで作成
改行コードはLFが良い
– .ドットをファイル名の先頭に指定できない場合があるので、
a.htaccessなどのファイル名で作成し、FTPでサーバーにアップ
後ファイル名を.htaccessに変更する
– 最終行は改行する
– レンタルサーバで、.htaccessファイルが使用できるか必ず確認す
ること

Webの仕組みとプログラミング言語

  • 1.
  • 2.
    Ⓒ 2015 YoshihiroTakahashi All Rights Reserved. 2 Webサイトが見られる仕組み Webサーバー ユーザー ②HTTPでファイル送信 ①アドレス入力、 リンククリック
  • 3.
    Ⓒ 2015 YoshihiroTakahashi All Rights Reserved. 3 Webサイトの表示 サイト表示の基本は、HTML + CSS 動きは、JavaScript Webサーバー ユーザー
  • 4.
    4 JavaScriptに ついて Ⓒ 2015 YoshihiroTakahashi All Rights Reserved.
  • 5.
    Ⓒ 2015 YoshihiroTakahashi All Rights Reserved. 5 JavaScriptの役割 • 楽しい – サイトにエンターテインメント性を加える • 分かりやすい – きちんと情報を伝達 • 便利 – サイトに付加価値を与える
  • 6.
    Ⓒ 2015 YoshihiroTakahashi All Rights Reserved. 6 JavaScriptの役割 • 楽しい – MUJI to Relax - 無印良品 – 株式会社 闇 • 分かりやすい – SVOLME Team Order • 便利 – チャットワーク – Google Map – Google検索のサジェスト
  • 7.
  • 8.
  • 9.
    Ⓒ 2015 YoshihiroTakahashi All Rights Reserved. 9 Webサイトコンテンツの作り方 • 基本は、HTML + CSS • 動きは、JavaScript • ショッピングサイトのようなシステム • ブログやSNSのようなユーザ参加型システム
  • 10.
    Ⓒ 2015 YoshihiroTakahashi All Rights Reserved. 10 Webサイトが見られる仕組み Webサーバー ユーザー ③作成したファイル送信 ②サーバーサイド プログラムで ページ作成 ①ユーザ入力情報を発信
  • 11.
    Ⓒ 2015 YoshihiroTakahashi All Rights Reserved. 11 現代のWebサイトの仕組みを 支える技術 サーバーサイドプログラム (Webサーバで動くプログラム:PHP, Javaなど) =
  • 12.
  • 13.
    Ⓒ 2015 YoshihiroTakahashi All Rights Reserved. 13 JavaScriptの役割 • 楽しい – サイトにエンターテインメント性を加える • 分かりやすい – きちんと情報を伝達 • 便利 – サイトに付加価値を与える
  • 14.
    Ⓒ 2015 YoshihiroTakahashi All Rights Reserved. 14 サーバーサイドプログラムの役割 • 楽しい – サイトにエンターテインメント性を加える • 分かりやすい – きちんと情報を伝達 • 便利を実現するための裏方作業 – サイトに付加価値を与える
  • 15.
  • 16.
    Ⓒ 2015 YoshihiroTakahashi All Rights Reserved. 16 Webサイトの表示 Webサーバー ユーザー ②サーバーサイド プログラムで ページ制作 (通常プログラミング 言語は一種類) HTML・CSS JavaScriptで表示 ①ユーザ入力情報を発信 ③作成したファイル送信
  • 17.
    Ⓒ 2015 YoshihiroTakahashi All Rights Reserved. 17 Webの仕組み • ブラウザで表示している内容 – HTML・CSS・JavaScriptで制作 • サーバーサイドプログラムの仕事 – 表示用のHTML・CSS・JavaScriptを生成 – 生成しているところは見えない
  • 18.
    Ⓒ 2015 YoshihiroTakahashi All Rights Reserved. 18 サーバーサイドプログラムの役割 • 情報の保存、保存情報の表示、メール送信 – ショッピングサイト • ユーザー情報を登録・表示 • カート内アイテムを記憶・表示 • 検索結果を表示 – SNS • 投稿した内容を記憶・表示 – アンケートフォーム • ユーザ情報の登録 • 確認メール送信
  • 19.
  • 20.
    Ⓒ 2015 YoshihiroTakahashi All Rights Reserved. 20 プログラミング言語の種類 • サーバーサイドプログラム – PHP, Ruby, Scala, Go, Java, C++, JavaScript • クライアントサイドプログラム(ブラウザ側) – JavaScript • アプリ開発言語 – Objective-C, Swift, Java, C++, C# • 組み込み用言語 – C
  • 21.
    Ⓒ 2015 YoshihiroTakahashi All Rights Reserved. 21 サーバーサイドプログラム言語の種類 • PHP – シェアNo1, HTMLと混在できる • Ruby – Railsフレームワークにより、Webアプリ開発が容易 • Scala – Twitter が Ruby(Rails) から Scalaに変更し有名 • Go – C++に限界を感じ、Googleが開発 • JavaScript – Node.JSというサーバーサイド環境を用いることで可能
  • 22.
    Ⓒ 2015 YoshihiroTakahashi All Rights Reserved. 22 アプリ開発言語とツール • Xcode(Apple製OS限定) – 言語は、Objective-C・Swiftに対応 • Android Studio(Androidアプリ限定) – 言語は、Javaに対応 • Unity(複数端末に対応 3Dゲームが有名) – 言語は、C#・Unity Scriptに対応 • Visual Studio(MS製OSに対応) – 言語は、C#・C++・Basicなどに対応
  • 23.
    Ⓒ 2015 YoshihiroTakahashi All Rights Reserved. 23 Webデザイナとプログラマの仕事
  • 24.
    Ⓒ 2015 YoshihiroTakahashi All Rights Reserved. 24 Webの仕事(技術) クライアントサイド (ブラウザ上で動作する技術) サーバーサイド (サーバ上で動作する技術) HTML CSS JavaScript Flash(ActionScript) ユーザビリティ アクセスビリティ 映像 ・・・・ Webデザイナの仕事 Webプログラマの仕事 PHP データベース Webサーバ メールサーバ ネットワーク OS ・・・・
  • 25.
    Ⓒ 2015 YoshihiroTakahashi All Rights Reserved. 25 Webデザイナとプログラマの関係
  • 26.
    Ⓒ 2015 YoshihiroTakahashi All Rights Reserved. 26 Webデザイナとプログラマの関係 • あまり仲が良くない?? – 仲が悪いわけではないが、お互いコミュニ ケーションが取れていない • 文化が違うから? – お互いが何を考えているのか知り、もっと上 手く付き合いたい
  • 27.
    Ⓒ 2015 YoshihiroTakahashi All Rights Reserved. 27 デザイナ側の問題点&改善 • もっと楽が出来ると思う – 同じような内容を何回もコピー&ペーストで繰り返し 作業している • メニューを共通化してみる • for文などを利用してみる • 作業環境を軽視している – 手動でFTPのアップを行なっている • ツールを上手く利用しよう • 必要な情報をきちんと伝えていない – プログラマが設計する際に必要な情報を伝えて欲しい
  • 28.
    Ⓒ 2015 YoshihiroTakahashi All Rights Reserved. 28 デザイナ側の問題点&改善 • 最低限のプログラムの知識を身に付けて – <?php ~ ?>は壊さないで・・・ – Smarty {~}は壊さないで・・・ • if文やfor文は覚えて欲しい • JSはある程度覚えて欲しい、jQueryはデザイナの 領域
  • 29.
    29 FTPについて Ⓒ 2015 YoshihiroTakahashi All Rights Reserved.
  • 30.
    Ⓒ 2015 YoshihiroTakahashi All Rights Reserved. 30 FTPについて FTPサーバー ユーザー Webデザイナ FTPで 制作ファイルを アップロード HTTPで ファイルを 表示
  • 31.
    Ⓒ 2015 YoshihiroTakahashi All Rights Reserved. 31 FFFTP(Windows) Fetch(Macintosh) • 主なFTPソフトについて FileZilla(Windows/Mac) FTPとデバッグについて
  • 32.
    Ⓒ 2015 YoshihiroTakahashi All Rights Reserved. 32 • DreamweaverのFTPは便利 FTPとデバッグについて
  • 33.
    Ⓒ 2015 YoshihiroTakahashi All Rights Reserved. 33 FTP公開前の注意事項
  • 34.
    Ⓒ 2014 YoshihiroTakahashi All Rights Reserved. 34 誤字/脱字 HTML文法チェック リンクチェック Scriptの動作チェック 画面の表示速度 複数のブラウザ表示チェック ・・・など • 公開前のサイトのチェック項目 FTPとデバッグについて
  • 35.
    Copyright © 2015Yoshihiro Takahashi All Rights Reserved. 35 HTMLの文法チェック • W3CによるHTML文法チェック
  • 36.
    Copyright © 2015Yoshihiro Takahashi All Rights Reserved. 36 CSSの文法チェック • W3CによるCSS文法チェック
  • 37.
    Ⓒ 2014 YoshihiroTakahashi All Rights Reserved. 37 リンクチェック • Dreamweaverのリンクチェックが便利 – サイト内のリンクチェックができる – 自サイトからの外部リンクもチェックできる
  • 38.
    Ⓒ 2014 YoshihiroTakahashi All Rights Reserved. 38 複数ブラウザチェック • 動作チェック対象ブラウザ – Windows • Edge,IE11,IE10,IE9,IE8 • Google Chrome • Firefox – iPhone、Android • Google Chrome,Safari,Firefox・・・ – Mac • Safari ,Google Chrome,Firefox
  • 39.
    Ⓒ 2014 YoshihiroTakahashi All Rights Reserved. 39 リンクチェックの問題点 • 自分のサイト外からのリンクチェック – File Not Foundの設定方法 .htaccess ファイルをサーバに設置 ErrorDocument 404 /~user/404.html
  • 40.
    Ⓒ 2015 YoshihiroTakahashi All Rights Reserved. 40 .htaccessについて
  • 41.
    Ⓒ 2014 YoshihiroTakahashi All Rights Reserved. 41 .htaccessについて • .htaccessファイル – Webデザイナは、Apache(Webサーバ)の設定を直 接行えないため、.htaccessというファイルを利用して、 Apacheの設定を一部を変更することができる – ファイル名の先頭にあるドットはUNIX系OSにおいて 「隠しファイル」を意味し、拡張子だけのファイルで はない
  • 42.
    Ⓒ 2014 YoshihiroTakahashi All Rights Reserved. 42 .htaccessファイルの用途 • htaccessファイルの用途例 – パスワードによる制限 • Basic認証によるパスワード制限 – エラーページの表示 • Webサーバの各エラーに対して、表示するページが設定できる – URLの変更(リダイレクト) • スマホからPCサイトにアクセスした時に、スマホ用URLへ転送 できる – 画像などの直接リンク拒否設定 • 外部サイトから、自サイト内の画像を読み込みをされると自サ イトに負荷が掛かるので対策する
  • 43.
    Ⓒ 2014 YoshihiroTakahashi All Rights Reserved. 43 .htaccessファイルの注意事項 • htaccessファイルの作成 – .htaccessはテキストファイルなので、テキストエディタで作成 改行コードはLFが良い – .ドットをファイル名の先頭に指定できない場合があるので、 a.htaccessなどのファイル名で作成し、FTPでサーバーにアップ 後ファイル名を.htaccessに変更する – 最終行は改行する – レンタルサーバで、.htaccessファイルが使用できるか必ず確認す ること