Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

2,290 views

Published on

Webデザイナに必要なWeb知識
プログラミング言語の種類、FTP、.htaccessなどを説明

Published in: Technology
  • Be the first to comment

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

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

×