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の仕組みとプログラミング言語

More Related Content

What's hot

Viewers also liked

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

More from Yossy Taka

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