Rot13 - Web Development Udacity English Japanese

Rot13 - Web DevelopmentYouTube↗ IA↗(long shot)
Education 9.3K views 46 likes 8 dislikes 23 Apr 2012

Udacity 651K subscribers United States YouTube↗

Click to Play Video

Okay, so homework 1--what I'd like you to do is make a web page with a form on it

レッスン1の宿題はWebページの作成です

that let's you ROT 13 some text.

ROT13を使って作りましょう

First, I'll explain what ROT 13 is.

最初にROT13について説明します

Okay, so ROT 13 is a simple cipher to run a simple encryption algorithm on some text.

ROT13はテキストの簡単な暗号アルゴリズムです

So it looks something like this.

このような暗号です

Okay, if I were to take this string 'Hello' and apply ROT 13 to it,

HelloにROT13を適用してみましょう

it would look like this--Uryyb.

するとUryybに変換されます

What I've done is I've incremented every letter by 13.

アルファベットを13文字先と置き替えているのです

So H becomes U. E becomes r. L becomes y. L becomes y, and o becomes b.

HはUに、eはrに、lはyに、oはbに変換されました

So if I had an alphabet like so--

アルファベットを並べて考えてみます

if I were to convert each letter, I increment them by 13.

13先の文字に変換ですから

So 'a' moves 13 spaces and becomes 'n' or 'h' moves 13 spaces and becomes 'u'.

aは13先のnにhは13先のuに

'z' wraps around moving 13 spaces and becomes 'm'.

そしてzは13文字折り返してmになります

So is you were to apply a Caesar cipher to itself,

このシーザー暗号を解くと

you get the string you originally typed in.

最初に入力した文字になります

It's not the fanciest cipher in the world, but I'm not trying to test your cryptography skills.

単純な暗号ですが今は暗号について学んでいるわけではないので

There's another class for that.

それはまた別の講義があるでしょう

I'm just trying to test your web handling skills.

今はWeb作成について学んでいます

Let me show you what this should look like when it's all working.

どのように動作するかお見せしましょう

Okay, so here's the app running on my appspot account at /unit2/ROT13.

これはappspot.com/unit2/ROT13の画面です

If I type some text in this field and click submit,

ここにテキストを入れて送信をクリックすると

it rerenders this form with my text in the text box, and if I were to hit submit again,

テキストボックスに入力したテキストはこのように変わり再度送信をクリックすると

it converts it back to 'Hello".

Helloに戻ります

Okay, this is what I'd like you to build.

これを作成してみてください

A couple things to notice--1 is that it preserved case, so the capital H became a capital U

注意点があります　大文字のHは大文字のUに

and the lowercase 'ello' became the lowercase 'ryyb'.

小文字のelloは小文字でryybとしてください

I'd also like you to preserve punctuation.

句読点も変えないでください

So I've expanded my text here to have an exclamation mark and a question mark.

感嘆符やクエッションマークをテキストに加えてみます

When I ROT 13 this, it preserves the exclamation mark and the question mark,

ROT13で変換後も記号類はそのままにしてください

and everything else becomes ROT 13.

その他はすべてROT13で変換します

You know it's working because when you run it again,

再度送信した時に

you get the original text.

元に戻れば成功です

I'd also like you to preserve whitespace, okay?

スペースもそのままです

I've added some whitespace and another exclamation mark and everything worked.

スペースを入れてテキストと感嘆符を追加してみます

And, here's one thing to look out for.

うまく動作しますもう一点お教えしましょう

Remember you might need to escape some HTML.

HTMLをエスケープしたい時には

Now this box here--this box for the text is using an element we haven't talked about.

このテキストボックスに他の要素も入れます

It's called a text area, and it's another form element for entering large pieces of text.

と入れると容量の大きいテキストを入力することができます

If I were to include this in my text field and not escape it properly,

これをテキストフィールドに入れてうまくエスケープできなければ

we could have problems.

問題が生じたということです

But as you can see, I have escaped my less thans and greater thans properly,

しかしこのようにうまくエスケープされているので

so everything works.

きちんと動作したということです

I can go back to text area, and all is well.

textareaに戻しても問題ありません

Now this is running online, so you can verify what my expectations are

これはオンラインで見られるので

by playing around with my own version at this URL.

このURLであなたの好きなように変更して構いません

You can also if you want view the source of this page to see the HTML I was using

私の作ったHTMLのソースページで

to draw the bigger box and that sort of thing.

ボックスを大きくしたりできるので

It's fine if you want to use that.

色々と試してみてください

What I want you to do is implement the backend part, and once you have it working,

バックエンド部分を実装してうまく動作したら

I'd like you to enter the full URL where it's running here.

ここにあなたのURLを提出してください

Now when we grade this, it's a little challenging.

これを評価するのは少し難しいです

Obviously, we're not going to be able to grade how it looks.

見栄えについては評価しません

We're going to have an automated script that submits some data and looks at the response.

データを送信する自動スクリプトがあり

Make sure you follow the notes below to have the correct input name,

インプット名は注意書きに従ってください

so when I submit directly to your form, I can find my text in the result.

あなたのフォームに送信すれば私は自分のテキストが見れます

Okay, good luck!

それでは頑張ってください

Similar videos:

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

Scaling - Web Development
Udacity
12.5K views 81 likes 1 dislikes 27 May 2012100% match

Memcached - Web Development
Udacity
13.5K views 115 likes 3 dislikes 23 Feb 2015100% match

Problems with Memcachedb - Web Development
Udacity
6K views 13 likes 0 dislikes 27 May 2012100% match

More Handlers - Web Development
Udacity
9.1K views 9 likes 2 dislikes 22 Apr 2012100% match

Whitespace Solution - Web Development
Udacity
15.7K views 10 likes 1 dislikes 23 Feb 2015100% match

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

Cache Architecture - Web Development
Udacity
7.2K views 16 likes 1 dislikes 27 May 2012100% match

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

Whitespace
Udacity
47.8K views 26 likes 4 dislikes 23 Feb 2015100% match

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

Submitting Input - Web Development
Udacity
6.8K views 5 likes 0 dislikes 22 Apr 2012100% match

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

Install Google App Engine
Udacity
7.1K views 40 likes 48 dislikes 17 Apr 2012100% match

Most Common Method - Web Development
Udacity
9.7K views 5 likes 0 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

Correct URL - Web Development
Udacity
10.9K views 6 likes 1 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

Forms - Web Development
Udacity
6.2K views 16 likes 1 dislikes 22 Apr 2012100% match

Introduction - Web Development
Udacity
23.3K views 107 likes 0 dislikes 23 Feb 2015100% match

Missing End Tag Solution - Web Development
Udacity
22.8K views 7 likes 0 dislikes 23 Feb 2015100% match

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

Valid Headers - Web Development
Udacity
7.9K views 1 likes 0 dislikes 23 Feb 2015100% match

Caching Techniques - Web Development
Udacity
34.4K views 216 likes 7 dislikes 23 Feb 2015100% match

Differences Between Get and Post - Web Development
Udacity
78.3K views 516 likes 18 dislikes 22 Apr 2012100% match

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

App Server Scaling - Web Development
Udacity
28.2K views 277 likes 8 dislikes 23 Feb 2015100% match

Settings Privacy About Contact Donate