LIVE
ON AIR

21:00 - 22:00

Photoshopに一切触れたことがない初心者のための60分 生放送中

サーバー基礎 Webサイト公開

  • このエントリーをはてなブックマークに追加
Webサイトをネットに上げるためのサーバーについての「超」基礎知識
第1回:2014年7月20日公開 01:30:00

Webサイトをネットに上げるためのサーバーについての「超」基礎知識

受講する

「自作サイトのFTPサーバーアップロード編 全3回」

ここまでのカリキュラムでは、ビジュアルデザインのためのPhotoshop、WEBサイトに表示するためのHTML、デザインを反映するためのCSS、そして、WEBサイトサイト制作の設計・開発を学んできました。

ここまでで制作したWebサイトは、まだみなさんのパソコンのブラウザでしか見ることが出来ません。ここからは、いよいよ完成したサイトを実際にネットに上げてテスト運用していくための手順をひとつずつ進めていきます。

この授業では、どうやって世界中の人たちがWebサイトを見ることが出来るのか?サーバーって何?というような、インターネットについての基礎知識についてお話します。
また、授業の後半では「レンタルサーバーの借り方」も一緒にやっていきます。

★授業中に使用するレンタルサーバー:http://lolipop.jp/ 【ロリポップ】

※ レンタルするプランによってはサーバー会社にお金を払う必要があります

サイト制作の大まかな流れは、下記の手順です

1)クライアント(お客様)へのヒヤリング
2)ターゲット設定
3)サイト設計(ワイヤーフレーム)
4)制作仕様書策定(デザインルール、コーディングルール策定)
5)開発(デザイン&コーディング)
6)ローカルテスト
7)テストサーバーレビュー(クライアントチェック)
8)リリース(本サーバーアップ)
9)ランニング(SEO解析)

このシリーズは7番のテストサーバーレビューの為、にレンタルサーバーを借りてサイトをアップロードする演習です。
テストサーバーレビューとは、ローカル(自分のPCの中)で完成したサイトがネット上でどのような動きをするのか検証する事です。自分でデバッグをして問題なければ、クライアント(サイトの発注者)さんにURLをお伝えしてチェックしてもらいます。

授業では、10日間の無料期間のあるレンタルサーバーを使用します。無料期間終了後は月払いだと300円、年払いだと月額250円が必要になってきます。また、すでにレンタルサーバーを借りている人は、次回の授業から参加されても大丈夫です。

今回は、レンタルサーバーに挫折した人でも何なく借りれる様に始終ハンズオンでゆっくり授業を進めていきます。

授業一覧
Webサイトをネットに上げるためのサーバーについての「超」基礎知識
2014年7月20日公開
01:30:00

「自作サイトのFTPサーバーアップロード編 全3回」(1回目)

ここまでのカリキュラムでは、ビジュアルデザインのためのPhotoshop、WEBサイトに表示するためのHTML、デザインを反映するためのCSS、そして、WEBサイトサイト制作の設計・開発を学んできました。

ここまでで制作したWebサイトは、まだみなさんのパソコンのブラウザでしか見ることが出来ません。ここからは、いよいよ完成したサイトを実際にネットに上げてテスト運用していくための手順をひとつずつ進めていきます。

この授業では、どうやって世界中の人たちがWebサイトを見ることが出来るのか?サーバーって何?というような、インターネットについての基礎知識についてお話します。
また、授業の後半では「レンタルサーバーの借り方」も一緒にやっていきます。

★授業中に使用するレンタルサーバー:http://lolipop.jp/ 【ロリポップ】

※ レンタルするプランによってはサーバー会社にお金を払う必要があります

サイト制作の大まかな流れは、下記の手順です

1)クライアント(お客様)へのヒヤリング
2)ターゲット設定
3)サイト設計(ワイヤーフレーム)
4)制作仕様書策定(デザインルール、コーディングルール策定)
5)開発(デザイン&コーディング)
6)ローカルテスト
7)テストサーバーレビュー(クライアントチェック)
8)リリース(本サーバーアップ)
9)ランニング(SEO解析) 

このシリーズは7番のテストサーバーレビューの為、にレンタルサーバーを借りてサイトをアップロードする演習です。
テストサーバーレビューとは、ローカル(自分のPCの中)で完成したサイトがネット上でどのような動きをするのか検証する事です。自分でデバッグをして問題なければ、クライアント(サイトの発注者)さんにURLをお伝えしてチェックしてもらいます。

授業では、10日間の無料期間のあるレンタルサーバーを使用します。無料期間終了後は月払いだと300円、年払いだと月額250円が必要になってきます。また、すでにレンタルサーバーを借りている人は、次回の授業から参加されても大丈夫です。

今回は、レンタルサーバーに挫折した人でも何なく借りれる様に始終ハンズオンでゆっくり授業を進めていきます。

  • 自己紹介&アジェンダ
  • 01:52
  • ネットのしくみ
  • 03:40
  • IPアドレスって何?
  • 00:40
  • どのようなサーバーを使っているの?
  • 03:51
  • クラウドって何?
  • 03:38
  • URLって何?
  • 02:42
  • サーバーって何?
  • 01:07
  • レンタルサーバーを借りてみよう:ロリポップに行こう!
  • 02:04
  • レンタルするプランを選ぼう!
  • 02:29
  • ドメインの申し込みをしよう!
  • 01:43
  • ドメインが利用可能か確認しよう!
  • 02:24
  • メールアドレスを登録して、申し込みの確認メールを送信しよう!
  • 03:20
  • 確認メールのステップ2に進み、正式申し込みをしよう!
  • 11:09
  • 申し込み完了メールを確認しよう!
  • 34:19
  • 30分経過したページの初期ページの確認をしよう!
  • 00:50
  • サイトに表示されている物が何なのかを確認しよう!
  • 00:32
  • ユーザー専用ページにアクセスしてみよう!
  • 01:48
  • ユーザー専用ページで基本情報を確認しよう!
  • 00:38
  • ロリポップFTPについて確認しよう!
  • 01:32
  • ページを変更してみよう!
  • 02:56
  • 次回授業について
  • Q:今、授業と違う契約プランですが、これからのことを考え授業と同じにした方がいいですか?
  • 00:43
  • Q:ロリポップの場合、ロリポップのドメイン利用から独自ドメイン利用に途中で変更可能ですか?
  • 00:40
  • Q:容量50GBとは、どのくらいって事ですか?記事が投稿出来る事ですか?
  • 01:58
  • Q:ロリポップの場合、サーバにアップロードした後、サイトをオープン前には公開しないで、サイトが完成したあと公開するような機能はありますか?
  • 02:52
  • Q:1度契約したら、ずっと料金を払わないと基本的には、いけないって事でしょうか?
  • 01:25
  • Q:個人で、ドメイン名とってサーバー借りたら、毎月、最低でもいくらが平均ですか?
  • 05:13
  • Q:アドレスのディレクトリについて
  • 01:43
  • Q:「メイン・ドメイン」と「サブ・ドメイン」「独自ドメイン」の違いをもう少し教えてください。
  • 05:52
  • Q:ロリポップで簡単、WordPressインストールがありますが、もし、WordPressをインストールする時に簡単を使わず、手動でした方が、いいですか?
  • 02:30
  • Q:スクーさんのサービスはCMSを使っているんですか?
  • 03:52
  • Q:パソコンで作成したデータ(様々なもの)をサーバーに上げるメリットと、そのサーバーに作成したデータを上げる方法は次回以降の授業になりますか?
  • 15:37
  • レポート課題発表
サーバーにアップして、ネット上にWebページを表示させる方法
2014年7月22日公開
01:30:00

「自作サイトのFTPサーバーアップロード編 全3回」(2回目)

この授業では、前回の授業でレンタルしたサーバーにwebページを上げ、ネット上で表示されるか確認します。いよいよ、皆さんが制作したWebサイトを自分以外も見れるようにしていきます。

この授業では、FTP(File transfer protocol)の設定サーバーの設定、そして、作ったページをアップロードするところまで一気に90分で実施していきます!

今回の授業を受講すると、制作したサイトを自分以外も開けるような場所に置くことが出来るようになります。

サイト制作の大まかな流れは、下記の手順です

1)クライアント(お客様)へのヒヤリング
2)ターゲット設定
3)サイト設計(ワイヤーフレーム)
4)制作仕様書策定(デザインルール、コーディングルール策定)
5)開発(デザイン&コーディング)
6)ローカルテスト
7)テストサーバーレビュー(クライアントチェック)
8)リリース(本サーバーアップ)
9)ランニング(SEO解析) 

このシリーズはで7番のテストサーバーレビューの為に、レンタルサーバーを借りてサイトをアップロードする演習です。
テストサーバーレビューとは、ローカル(自分のPCの中)で完成したサイトがネット上でどのような動きをするのか検証する事です。自分でデバッグをして問題なければ、クライアント(サイトの発注者)さんにURLをお伝えしてチェックしてもらいます。

まだレンタルサーバーを借りてない人は20日の授業を録画授業を見てサーバーを借りておいて下さい。(授業では、10日間の無料期間のあるレンタルサーバーを借りる演習をしています。無料期間終了後は月払いだと300円、年払いだと月額250円が必要になってきます。)

今回は、初めての人に加えてFTPサーバー設定で挫折した人、ネット上で巧く表示できなかった人を対象にゆっくりハンズオン授業をしていきます。

受講にあたって準備するもの

1)Sublimeのインストール(授業中コードを打つのに使います)

下記のURLからダウンロードしてください。

http://www.sublimetext.com/2

設定は何も必要ありません。インストールして授業が始まる時間に立ち上げられる様にだけしておけば大丈夫です。

※DreamWeaverが慣れている人は、こちらを使用されてもかまいません。

2)解凍ツール (授業中配布する教材の解凍に使います)

授業中にダウンロードしたファイルをすぐに解凍できる様になっていれば大丈夫です。(Mac OSXの場合はダブルクリックで展開します。windows7~の場合は右クリックのコンテキストメニュー「全て展開」を選択でOK)

3)その他のバージョンのOSは、MacであればApp StoreでWinArchiver Lite.appを検索してダウンロードしインストールしておきます。

Wiondwsであれば、下記のURLよりLhaplusをダウンロードし、インストールしておきます。

http://www.forest.impress.co.jp/library/software/lhaplus/

 

  • 自己紹介&アジェンダ
  • 02:10
  • 前回の復習
  • 02:29
  • ロリポップのFTPにいってみよう
  • 06:27
  • index.htmlを作ってみよう
  • 08:49
  • welcome.htmlを削除しよう
  • 03:11
  • SublimeText開いて、デスクトップなどわかり易い場所に「TestSite」をいうフォルダをつくろう
  • 05:42
  • 「TestSite」フォルダにschoo_fashionフォルダに入れよう
  • 02:58
  • installation - Package Controlのページに行き、コードをコピーしよう
  • 06:28
  • SublimeTextを再起動しパッケージコントロールを起動しよう
  • 07:45
  • レンタルサーバーの情報に書き換えよう
  • 03:07
  • レンタルサーバーの情報に書き換えよう:実践
  • 06:50
  • サイトをフォルダごと上げてみよう
  • 04:15
  • 上がったフォルダやファイルもアップロードされているのを確認してみよう
  • 06:37
  • Q:見せる必要のないデータなどを保管したい場合に、サーバーはHD代わりにできますか?
  • 02:07
  • Q:「SFTP」と「FTPS」はちがうものですか?
  • 02:50
  • Q:今回は親フォルダを丸ごとアップロードしましたが、後日特定のフォルダの特定のファイルのみをアップロードしたい場合はSublime上からはできますか?
  • 01:52
  • Q:他のサーバーと契約してもサーバー情報というのは必ず配布されるのでしょうか。
  • 02:10
  • Q:ストレージサーバーとレンタルサーバーの違いを教えてください。
  • 01:13
  • Q:sublime_textの操作で「複数所有のサーバアカウントの切換え」というのが有るなら、取り上げて頂けたら..
  • 06:05
  • Q:学生なのですが、個人向けのおすすめのレンタルサーバーがありましたら教えてください。
  • 01:55
  • Q:今回の授業は、ロリポップを使ってしてますが、ロリポップではない他社のサーバーを借りて、しても大丈夫でしょうか?
  • 01:15
  • レポート課題
「ファビコン」を設定して、サイトを目立たせる方法
2014年7月27日公開
01:00:00

「自作サイトのFTPサーバーアップロード編 全3回」(3回目)

今日は、7月22日に完成したサイトにファビコン(favicon)を表示してみましょう。ファビコンとは、ブラウザのタブやお気に入りやブックマークに登録した時に表示されるアイコンの事です。

作ったサイトをよりたくさんの人に知ってもらい親しみを持ってもらうためにもファビコンの設定をしましょう。また、仕事を発注して下さったクライアントさんの満足度も上がりそうです。

▼ファビコンの例

フリーイメージを使ってファビコンを表示させる方法を学んでいきます。
自作のイラストを使用する方は授業前までに、用意しておいて下さい。

サイト制作の大まかな流れは、下記の手順です

1)クライアント(お客様)へのヒヤリング
2)ターゲット設定
3)サイト設計(ワイヤーフレーム)
4)制作仕様書策定(デザインルール、コーディングルール策定)
5)開発(デザイン&コーディング)
6)ローカルテスト
7)テストサーバーレビュー(クライアントチェック)
8)リリース(本サーバーアップ)
9)ランニング(SEO解析) 


このシリーズは7番のテストサーバーレビューの為に、レンタルサーバーを借りてサイトをアップロードする演習です。
テストサーバーレビューとは、ローカル(自分のPCの中)で完成したサイトがネット上でどのような動きをするのか検証する事です。自分でデバッグをして問題なければ、クライアント(サイトの発注者)さんにURLをお伝えしてチェックしてもらいます。

まだレンタルサーバーを借りてない人は20日の授業を録画授業を見てサーバーを借りておいて下さい。(授業では、10日間の無料期間のあるレンタルサーバーを借りる演習をしています。無料期間終了後は月払いだと300円、年払いだと月額250円が必要になってきます。)

7月15日までの授業を見ていない人には、アップロード用のサンプルを配布しています。
今回初めて授業を受ける方は、サンプルをブラッシュアップをして、オリジナルのサイトにカスタマイズしてして行きましょう!

受講にあたって準備するもの

1)Sublimeのインストール(授業中コードを打つのに使います)

下記のURLからダウンロードしてください。

http://www.sublimetext.com/2

設定は何も必要ありません。インストールして授業が始まる時間に立ち上げられる様にだけしておけば大丈夫です。

※DreamWeaverが慣れている人は、こちらを使用されてもかまいません。

2)解凍ツール (授業中配布する教材の解凍に使います)

授業中にダウンロードしたファイルをすぐに解凍できる様になっていれば大丈夫です。(Mac OSXの場合はダブルクリックで展開します。windows7~の場合は右クリックのコンテキストメニュー「全て展開」を選択でOK)

3)その他のバージョンのOSは、MacであればApp StoreでWinArchiver Lite.appを検索してダウンロードしインストールしておきます。

Wiondwsであれば、下記のURLよりLhaplusをダウンロードし、インストールしておきます。

http://www7a.biglobe.ne.jp/~schezo/

 

  • 自己紹介&アジェンダ
  • 04:35
  • ファビコンって何?
  • 06:48
  • ファビコンを作ろう!:素材をダウンロードしよう
  • 00:55
  • ファビコンを作ろう!:画像解像度の設定で48pxの画像を作ろう
  • 02:36
  • ファビコンを作ろう!:画像解像度の設定で32pxの画像を作ろう
  • 01:59
  • ファビコンを作ろう!:画像解像度の設定で16pxの画像を作ろう
  • 05:27
  • 作った画像をジェネレータにアップロードしよう
  • 04:44
  • ロリポップのFTPを開こう
  • 03:56
  • 作った画像をFTPにアップロードしよう
  • 03:20
  • 他のブラウザでも見れるように、ジェネレーターサイトからコードをコピペしよう
  • 05:18
  • ルートをおこう
  • 02:45
  • ファビコンをアップロードしよう
  • 08:55
  • Q:企業のロゴなどをファビコンにアレンジする場合、どんな事に気をつけたらいいでしょうか?
  • 00:48
  • Q:初受講なのですが、1、2回目のサンプルはどこでダウンロードすればいいのでしょうか?
  • 00:30
  • Q:今回、ファビコン作成でファビコン作成サイトを使ったのですが、他にも作成の方法はあるのでしょうか?
  • 00:59
  • Q:いくつかのブラウザで勝手に解釈して空気を読んでいるところをはっきりと明記するような感じでしょうか?
  • 00:55
  • Q:jQueryのbxsliderを使用して、カルーセルを実装したのですが、サーバーにアップすると表示されませんでした。サーバーにアップするとjQueryを編集しないといけないなどありますか?
  • 01:08
  • レポート課題発表
こんな人にオススメ
WEBデザイナー(初心者)

Webサイトを公開したい方

タグ
担当の先生
受講生代表
  • 未定

    未定

この授業を受けたい(874人)
その他 794人

受けたい授業ランキング

もっと見る

新着の生放送授業

もっと見る

関連授業

生放送授業への参加は無料です
Schooの会員登録および生放送授業への参加は無料です。生放送授業では先生に質問したり他のユーザーと一緒に楽しく学ぶことができます。
×