Build a Wiki - Web Development Udacity Japanese English

Build a Wiki - Web DevelopmentYouTube↗ IA↗(long shot)
Education 3.2K views 3 likes 0 dislikes 27 May 2012

Udacity 651K subscribers United States YouTube↗

Click to Play Video

それでは最終テストについて説明します

Okay everybody. We are gonna talk about the final exam.

今までの講義の集大成で

This is basically building on everything you've learned in this class.

今まで学んだ内容を網羅すべく[br]Wikiを作成してもらいます

It's just another cohesive project, and what I'm going to ask you to do is build a wiki.

Wikiを知らない方のために実際にお見せしましょう

For those of you who don't know what a wiki is, I will give you a demo.

トップページはこのようになります

It should look something like this. Here's the front page of a wiki.

Wikiはすべてのページが編集可能なwebサイトです

A wiki is just a website where any page can be edited.

例えばeditをクリックしてみます

For example, if I were to click edit on this page,

するとHTMLが現れテキストを記入できます

you see the HTML of this page and I can add some text.

1行空けてテキストをタイプしSaveをクリックします

Let's add a blank line. So I just added some text in this text box and I click save.

するとタイプしたテキストが表示されます

Then we save the page and then it has this text in here.

Wikiの優れた点で[br]今回皆さんに学んでもらいたいことは

Now, one of the things that's cool about a wiki or at least in this one that we want you to build is

どんなURLにもアクセスできるということです

you can go to any URL or in this case /newpage, which doesn't exist yet.

/newpageでまだ存在しないURLにアクセスしても[br]代わりのURLに飛びます

If the URL does not exist, it'll redirect you to another URL.

ここでは間に/_editが入り[br]編集できるページに移ります

In my case, I'm using /_edit and then the page name where you can edit some content in here.

テキストを入れ保存すると先ほどのURLに移ります

And if you were to click save, it will take you to that URL.

/newpageのURLができ上がり[br]テキストも編集可能です

In my case /newpage with the content and of course you can edit this content.

トップページのリンクを貼ってみましょう

Let's add a link to the front page.

でトップページを引っ張ります

We just use the anchor tag with an href to slash, which is the front page.

そして保存すると[br]今入力したHTMLがレンダリングされます

And if we click save, we can see that it renders that HTML I typed as a link.

ここをクリックするとトップページへ飛びます

If I were to click on this link, it'll take me to the front page, which is a slash.

これから具体的に組み立て方を説明しますが[br]まず覚えてほしいのは

W'll go through the specific requirements in the instructor comments, but the important thing--

まだ存在しないURLにアクセスすると[br]編集ページに移るということです

the first thing--is if you type in a URL that doesn't exist, you go to an edit page.

すでに存在するURLにアクセスすると[br]そのページがレンダリングされます

If you type in a URL that does exist, it renders the content of that page,

そしてどのページも編集可能です

and you can edit the content of that page if you want.

ページを編集するにはアカウントを作り[br]ログインが必要です

Now, I've been logged in this whole time. You should have user accounts integrated in this.

ログアウトしても現在のページにはとどまります

If I were to click logout here, it keeps me on the same page.

レッスン4で学んだ手順が行われているのです

What this did is that it did just like we did in Unit 4.

Cookieを削除し[br]参照元のページへ戻すものです

It cleared my user clear key and just redirected me to the page that I came from.

ログアウト後もページは閲覧でき[br]トップページにも行けますが

I can view any page logged out, I can view the front page as well,

editリンクが消え編集はできなくなります

but I can't edit any pages. See, the edit link is gone.

この状態ではこれ以上進めないので[br]ここまでにしますが

Now, we can't grade how things look very well, so we're not going to bother doing that,

後ほどログアウトの状態で編集をしてみて[br]できないことを確かめましょう

but we will try to submit an edit form while being logged out and that should fail.

再度ログインする時は[br]今までと同じ入力ページです

Now, I will log back in. Now notice it's the same signup form we've been using all along.

このサイトを公開する前に[br]中身を少し整理すると思います

Actually, in the version I'll put online, I'll probably clean this up a little bit before I do that,

コードがよく不具合を起こすからです

because it's been bugging me in the code, but this is actually

今までも使っているコードなんですけどね

the exact same code I've been using the whole time.

ログインするとeditリンクが表示されます

I'll log in as my user and you can see now I have a new edit link.

ここまでがWikiの大まかな仕組みです[br]新しいアカウントは

That's the gist of the main wiki--of course, instead of clicking login,

signupから作成できます

I could also click signup to create a new user.

エラーや不明時に出る赤字は[br]講義中に何度か現れたと思います

This is the same form we've been using for this entire class with the errors and whatnot.

すでに存在するアカウントを新規で登録しようとすると[br]エラーが出ます

If I were to try to create a user that already exists, I give out that error.

ですのでユーザ名をSpez2で登録しログインします

That's why I'm going to sign a different user spez2, click submit, and I'm logged on as spez2.

皆さんにやってもらう課題は[br]ログインとログアウトに加え

That is the main task that I'm going to ask you to do. Log in. Log out. You've already done that.

ページの編集とリダイレクトです[br]フォームは難しくないと思います

Editing a page. It's basically a simple form submission and some fancy redirecting in there.

解説で詳しい作成法を説明します

Again, in the instructor comments we'll include more specifically how to do that.

課題ができたらここにURLを提出してください

When you have that working, submit the URL here.

Similar videos:

Locking and Memcache - Web Development
Udacity
5.6K views 16 likes 0 dislikes 27 May 2012100% match

Making Links
Udacity
53.9K views 21 likes 0 dislikes 23 Feb 2015100% match

Dynamic Content - Web Development
Udacity
6.1K views 2 likes 0 dislikes 23 Feb 2015100% match

Best Browser - Web Development
Udacity
14.9K views 7 likes 0 dislikes 23 Feb 2015100% match

Code Organization - Web Development
Udacity
7.2K views 25 likes 1 dislikes 27 May 2012100% match

Content Type - Web Development
Udacity
7.5K views 5 likes 1 dislikes 22 Apr 2012100% match

Inline Vs Block
Udacity
17.3K views 139 likes 5 dislikes 23 Feb 2015100% match

The Method Attribute - Web Development
Udacity
9.6K views 14 likes 8 dislikes 22 Apr 2012100% match

Components of the Web Solution - Web Development
Udacity
9.6K views 19 likes 0 dislikes 23 Feb 2015100% match

Scaling Databases - Web Development
Udacity
64.3K views 795 likes 7 dislikes 25 Apr 2012100% match

Web Applications - Web Development
Udacity
19.5K views 59 likes 4 dislikes 02 Jun 2014100% match

Best Browser Solution - Web Development
Udacity
9.6K views 22 likes 1 dislikes 23 Feb 2015100% match

Shopping List Take 1 - Web Development
Udacity
841 views 1 likes 0 dislikes 23 Feb 2015100% match

Reddit Architecture - Web Development
Udacity
27.7K views 397 likes 3 dislikes 27 May 2012100% match

Span and Div Solution - Web Development
Udacity
17.4K views 7 likes 0 dislikes 23 Feb 2015100% match

Adding Images
Udacity
12.9K views 36 likes 0 dislikes 23 Feb 2015100% match

User Agent Header - Web Development
Udacity
11.6K views 24 likes 7 dislikes 23 Feb 2015100% match

User Input - Web Development
Udacity
7.7K views 3 likes 0 dislikes 22 Apr 2012100% match

Part 2 - Web Development
Udacity
643 views 2 likes 0 dislikes 07 May 2012100% match

Reddit Architecture 2 - Web Development
Udacity
11.1K views 88 likes 2 dislikes 27 May 2012100% match

Rot13 - Web Development
Udacity
9.3K views 46 likes 8 dislikes 23 Apr 2012100% match

The Action Attribute - Web Development
Udacity
7.5K views 7 likes 0 dislikes 22 Apr 2012100% match

Frameworks - Web Development
Udacity
28.7K views 154 likes 25 dislikes 23 Feb 2015100% match

Security - Web Development
Udacity
5.7K views 64 likes 0 dislikes 23 May 2012100% match

Datastore Types Solution - Web Development
Udacity
656 views 1 likes 0 dislikes 25 Apr 2012100% match

URL Encoding - Web Development
Udacity
13.7K views 17 likes 13 dislikes 22 Apr 2012100% match

Course Outline - Web Development
Udacity
46.2K views 169 likes 0 dislikes 23 Feb 201567% match

Most Common Method - Web Development
Udacity
9.7K views 5 likes 0 dislikes 23 Feb 201567% match

Bold Tag - Web Development
Udacity
53K views 29 likes 0 dislikes 23 Feb 201567% match

Correct URL - Web Development
Udacity
10.9K views 6 likes 1 dislikes 23 Feb 201567% match

Settings Privacy About Contact Donate