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

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に
ついて

JavaScriptの役割
• 楽しい
– サイトにエンターテインメント性を加える
• 分かりやすい
– きちんと情報を伝達
• 便利
– サイトに付加価値を与える

JavaScriptの役割
• 楽しい
– MUJI to Relax - 無印良品
– 株式会社闇
– SVOLME Team Order
• 便利
– チャットワーク
– Google Map
– Google検索のサジェスト

7
古い時代のWebサイトの仕組み
• Webは提供者とユーザが分断されており、
一方的な情報発信であった
ユーザー
情報表示

8
現代のWebサイトの仕組み
• 提供者とユーザの垣根がなくなり、ユーザが容易に情報発
信できる
– Twitter、facebookなどが分かりやすいユーザー参加型の仕組み
ユーザー
情報追加・更新
情報表示

9
Webサイトコンテンツの作り方
• 基本は、HTML + CSS
• 動きは、JavaScript
• ショッピングサイトのようなシステム
• ブログやSNSのようなユーザ参加型システム

10
Webサイトが見られる仕組み
Webサーバー
ユーザー
③作成したファイル送信
②サーバーサイド
プログラムで
ページ作成
①ユーザ入力情報を発信

現代のWebサイトの仕組みを
支える技術
サーバーサイドプログラム
（Webサーバで動くプログラム：PHP, Javaなど）
＝

12
サーバーサイド
プログラムの役割

JavaScriptの役割
• 楽しい
• 便利

サーバーサイドプログラムの役割
• 楽しい
• 便利を実現するための裏方作業

15
プログラムは裏方

Webサイトの表示
Webサーバー
ユーザー
②サーバーサイド
プログラムで
ページ制作
（通常プログラミング
言語は一種類）
HTML・CSS
JavaScriptで表示
①ユーザ入力情報を発信
③作成したファイル送信

Webの仕組み
• ブラウザで表示している内容
– HTML・CSS・JavaScriptで制作
• サーバーサイドプログラムの仕事
– 表示用のHTML・CSS・JavaScriptを生成
– 生成しているところは見えない

サーバーサイドプログラムの役割
• 情報の保存、保存情報の表示、メール送信
– ショッピングサイト
• ユーザー情報を登録・表示
• カート内アイテムを記憶・表示
• 検索結果を表示
– SNS
• 投稿した内容を記憶・表示
– アンケートフォーム
• ユーザ情報の登録
• 確認メール送信

19
プログラミング言語
の種類

プログラミング言語の種類
• サーバーサイドプログラム
– PHP, Ruby, Scala, Go, Java, C++, JavaScript
• クライアントサイドプログラム（ブラウザ側）
– JavaScript
• アプリ開発言語
– Objective-C, Swift, Java, C++, C#
• 組み込み用言語
– C

サーバーサイドプログラム言語の種類
• PHP
– シェアNo1, HTMLと混在できる
• Ruby
– Railsフレームワークにより、Webアプリ開発が容易
• Scala
– Twitter が Ruby(Rails) から Scalaに変更し有名
• Go
– C++に限界を感じ、Googleが開発
• JavaScript
– Node.JSというサーバーサイド環境を用いることで可能

アプリ開発言語とツール
• Xcode（Apple製OS限定）
– 言語は、Objective-C・Swiftに対応
• Android Studio（Androidアプリ限定）
– 言語は、Javaに対応
• Unity（複数端末に対応３Dゲームが有名）
– 言語は、C#・Unity Scriptに対応
• Visual Studio（MS製OSに対応）
– 言語は、C#・C++・Basicなどに対応

23
Webデザイナとプログラマの仕事

24
Webの仕事（技術）
クライアントサイド
（ブラウザ上で動作する技術）
（サーバ上で動作する技術）
HTML
CSS
JavaScript
Flash（ActionScript）
ユーザビリティ
アクセスビリティ
映像
・・・・
Webデザイナの仕事 Webプログラマの仕事
PHP
データベース
Webサーバ
メールサーバ
ネットワーク
OS
・・・・

25
Webデザイナとプログラマの関係

26
Webデザイナとプログラマの関係
• あまり仲が良くない？？
– 仲が悪いわけではないが、お互いコミュニ
ケーションが取れていない
• 文化が違うから？
– お互いが何を考えているのか知り、もっと上
手く付き合いたい

27
デザイナ側の問題点＆改善
• もっと楽が出来ると思う
– 同じような内容を何回もコピー＆ペーストで繰り返し
作業している
• メニューを共通化してみる
• for文などを利用してみる
• 作業環境を軽視している
– 手動でFTPのアップを行なっている
• ツールを上手く利用しよう
• 必要な情報をきちんと伝えていない
– プログラマが設計する際に必要な情報を伝えて欲しい

28
デザイナ側の問題点＆改善
• 最低限のプログラムの知識を身に付けて
– <?php ～ ?>は壊さないで・・・
– Smarty ｛～｝は壊さないで・・・
• if文やfor文は覚えて欲しい
• JSはある程度覚えて欲しい、jQueryはデザイナの
領域

29
FTPについて

30
FTPについて
FTPサーバー
ユーザー
Webデザイナ
FTPで
制作ファイルを
アップロード
HTTPで
ファイルを
表示

31
FFFTP(Windows)
Fetch(Macintosh)
• 主なFTPソフトについて
FileZilla(Windows/Mac)
FTPとデバッグについて

32
• DreamweaverのFTPは便利

33
FTP公開前の注意事項

34
誤字/脱字
HTML文法チェック
リンクチェック
Scriptの動作チェック
画面の表示速度
複数のブラウザ表示チェック
・・・など
• 公開前のサイトのチェック項目

37
リンクチェック
• Dreamweaverのリンクチェックが便利
– サイト内のリンクチェックができる
– 自サイトからの外部リンクもチェックできる

38
複数ブラウザチェック
• 動作チェック対象ブラウザ
– Windows
• Edge，IE11，IE10，IE9，IE8
• Google Chrome
• Firefox
– iPhone、Android
• Google Chrome，Safari，Firefox・・・
– Mac
• Safari ，Google Chrome，Firefox

39
リンクチェックの問題点
• 自分のサイト外からのリンクチェック
– File Not Foundの設定方法
.htaccess ファイルをサーバに設置
ErrorDocument 404 /~user/404.html

40
.htaccessについて

41
.htaccessについて
• .htaccessファイル
– Webデザイナは、Apache（Webサーバ）の設定を直
接行えないため、.htaccessというファイルを利用して、
Apacheの設定を一部を変更することができる
– ファイル名の先頭にあるドットはUNIX系OSにおいて
「隠しファイル」を意味し、拡張子だけのファイルで
はない

42
.htaccessファイルの用途
• htaccessファイルの用途例
– パスワードによる制限
• Basic認証によるパスワード制限
– エラーページの表示
• Webサーバの各エラーに対して、表示するページが設定できる
– URLの変更（リダイレクト）
• スマホからPCサイトにアクセスした時に、スマホ用URLへ転送
できる
– 画像などの直接リンク拒否設定
• 外部サイトから、自サイト内の画像を読み込みをされると自サ
イトに負荷が掛かるので対策する

43
.htaccessファイルの注意事項
• htaccessファイルの作成
– .htaccessはテキストファイルなので、テキストエディタで作成
改行コードはLFが良い
– .ドットをファイル名の先頭に指定できない場合があるので、
a.htaccessなどのファイル名で作成し、FTPでサーバーにアップ
後ファイル名を.htaccessに変更する
– 最終行は改行する
– レンタルサーバで、.htaccessファイルが使用できるか必ず確認す
ること

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (9)

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

Similar to Webの仕組みとプログラミング言語 (20)

More from Yossy Taka

More from Yossy Taka (15)

Recently uploaded

Recently uploaded (8)

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