Your SlideShare is downloading. ×
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
【プログラミング教室】テキスト
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

【プログラミング教室】テキスト

398

Published on

2013年8月にNTT東日本新潟支社ひかりパークで開催した。「はじめてのプログラミング教室」で利用したテキストです。 …

2013年8月にNTT東日本新潟支社ひかりパークで開催した。「はじめてのプログラミング教室」で利用したテキストです。
本教室で作成したプログラムのソースは以下のURLより取得可能です。
https://code.google.com/p/mfp0805-practice/

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
398
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. はじめてのコンピュータ プログラミング教室
  • 2. スケジュール 1日目 午前 オリエンテーション 自己紹介 この教室で作成するプログラムのデモ まずは簡単なプログラムを作ろう プログラムに必要なファイルの説明 午後 名前を入力するプログラムを作ろう プログラムを作るための基本を知ろう クイズのデータを入力しよう 2日目 午前 プログラムの動きを知ろう クイズプログラムを作ろう(1) HTMLを覚えよう 午後 クイズプログラムを作ろう(2) 感想の発表
  • 3. この教室の目的 インターネットで動くプログラムを 作成する方法を学習します
  • 4. 教室のルール 1. できないことは恥ずかくない – できなくても恥ずかしくありません。わからな かったら元気よく質問しよう! 2. みんなが先生 – この教室ではみんなが先生です。わからない人 がいたら積極的に助けましょう。 3. 人前で発表しよう – 人とわかりあうためには意見を発表できることが 大切です。自分の意見を積極的に発信しよう!
  • 5. 準備作業
  • 6. [1-4-1] 端末の起動 画面左上の「Dashホーム」をクリッ ク、検索に「teminal」と入力、下に 表示された「端末」をダブルクリッ クします
  • 7. [1-4-2] 準備の作業 $ sudo apt-get update $ sudo apt-get install python-pip $ sudo apt-get install sqlite3 $ sudo pip install django --------------------------------------------------------- $ django-admin.py startproject quiz $ cd quiz $ python manage.py runserver 端末の中に次のコマンドを入力します。
  • 8. 準備の作業 画面左の「Firefox」を起動してアドレ スに「127.0.0.1:8000」を入力して Enterを押す
  • 9. 最初のプログラム
  • 10. [2-1-1] 新しい機能の作成 $ python manage.py startapp quiz 「quiz」という名前の新しい機能を作成しま す。
  • 11. [2-1-2] quiz/settings.py ① 12. DATABASES = { 13. 'default': { 14. 'ENGINE': 'django.db.backends.sqlite3', 15. 'NAME': 'quiz.sqlite3', 16. 'USER': '', 17. 'PASSWORD': '', 18. 'HOST': '', 19. 'PORT': '’, 20. } 21. } ….. 32. TIME_ZONE = 'Asia/Tokyo’ ….. 36. LANGUAGE_CODE = 'ja-jp'
  • 12. [2-1-3] quiz/settings.py ② 116. INSTALLED_APPS = ( 117. 'django.contrib.auth', 118. 'django.contrib.contenttypes', 119. 'django.contrib.sessions', 120. 'django.contrib.sites', 121. 'django.contrib.messages', 122. 'django.contrib.staticfiles', 123. # Uncomment the next line to enable the admin: 124. 'django.contrib.admin', 125. # Uncomment the next line to enable admin documentation: 126. # 'django.contrib.admindocs', 127. 'quiz’, 128. )
  • 13. [2-1-4] quiz/models.py 1. # -*- coding: utf-8 -*- 2. from django.db import models 3. 4. class Quiz(models.Model): 5. question = models.CharField('問題', max_length=255) 6. answer01 = models.CharField('答え01', max_length=255) 7. answer02 = models.CharField('答え02', max_length=255) 8. answer03 = models.CharField('答え03', max_length=255) 9. answer = models.IntegerField('正解番号')
  • 14. [2-1-5] データベースの作成 データベースの定義をしたので、データ ベースの作成を行います。 $ python manage.py syncdb
  • 15. [2-2-1] quiz/admin.py 1. from quiz.models import Quiz 2. from django.contrib import admin 3. 4. admin.site.register(Quiz)
  • 16. [2-2-2] quiz/urls.py 1. from django.conf.urls import patterns, include, url 2. 3. # Uncomment the next two lines to enable the admin: 4. from django.contrib import admin 5. admin.autodiscover() 6. 7. urlpatterns = patterns('', … 15. # Uncomment the next line to enable the admin: 16. url(r'^admin/', include(admin.site.urls)), 17. )
  • 17. [2-2-3] 実行してみよう コマンドを入力してブラウザを起動しましょう。 ブラウザのアドレスに「127.0.0.1:8000/admin/」と入力するとデータの入力が できるようになります。 $ python manage.py runserver
  • 18. 「◯◯さん、こんにちは」 プログラムの作成
  • 19. [3-1-1] 新しいプロジェクトの作成 $ django-admin.py startproject hato $ cd hato $ python manage.py startapp nameform $ mkdir templates 「hato」という名前の新しいプロジェクトを作成 して、作業場所をhatoディレクトリにします。 次に名前を入力する機能「nameform」を作成しま す。 さらに画面を入れるフォルダ「templates」を作成 します。
  • 20. [3-1-2] フォルダ構成 hato ・・・ プロジェクトの設定をするフォルダ __init__.py ・・・ 無視してOK settings.py ・・・ プログラム全体の設定 urls.py ・・・ プログラムの名前を書く wsgi.py ・・・ 無視してOK manage.py ・・・ 管理コマンド nameform ・・・ 機能を入れるフォルダ __init__.py ・・・ 無視してOK models.py ・・・ データベースの設定 test.py ・・・ 無視してOK views.py ・・・ データベースと画面の処理 templates ・・・ 画面のファイルを入れる
  • 21. [3-1-3] hato/settings.py ① 2. import os ….. 32. TIME_ZONE = 'Asia/Tokyo’ ….. 36. LANGUAGE_CODE = 'ja-jp’ ….. 111. TEMPLATE_DIRS = ( 112. # Put strings here, like "/home/html/django_templates" or "C:/www/django/templates". 113. # Always use forward slashes, even on Windows. 114. # Don't forget to use absolute paths, not relative paths. 115. os.path.join(os.path.dirname(__file__), '..', 'templates').replace('','/'), 116. )
  • 22. [3-1-4] hato/settings.py ② 116. INSTALLED_APPS = ( 117. 'django.contrib.auth', 118. 'django.contrib.contenttypes', 119. 'django.contrib.sessions', 120. 'django.contrib.sites', 121. 'django.contrib.messages', 122. 'django.contrib.staticfiles', 123. # Uncomment the next line to enable the admin: 124. # 'django.contrib.admin', 125. # Uncomment the next line to enable admin documentation: 126. # 'django.contrib.admindocs', 127. ’nameform’, 128. )
  • 23. [3-1-5] hato/urls.py 1. from django.conf.urls import patterns, include, url 2. 3. urlpatterns = patterns('', 4. url(r'^$', 'nameform.views.index'), 5. )
  • 24. [3-2-1] フォームファイルの作成 1. ホームフォルダーの左ペインから「hato-namefom」を選択 2. マウスの右ボタンをクリックして「新しいドキュメントの 作成ー空のドキュメント」を実行 3. 無題のドキュメントを「forms.py」に変更
  • 25. [3-2-2] hato/forms.py 1. # -*- coding: utf-8 -*- 2. from django import forms 3. 4. class MynameForm(forms.Form): 5. myname = forms.CharField( 6. label='あなたの名前は', 7. max_length=20, 8. help_text='(最大文字数20文字)' 9. )
  • 26. [3-2-3] hato/views.py 1. # -*- coding: utf-8 -*- 2. from django.shortcuts import render_to_response 3. from django.template import RequestContext 4. from django.http import HttpResponse 5. from nameform.forms import MynameForm 6. 7. def index(request): 8. 9. if request.method == 'POST': 10. myname = request.POST.get('myname') 11. massage = u'こんにちは、' + myname + u'さん' 12. return HttpResponse(massage) 13. else: 14. form = MynameForm() 15. return render_to_response('form.html', { 16. 'from': form, 17. }, context_instance=RequestContext(request))
  • 27. [3-2-4] templates/form.html 1. <form action="" method="POST">{% csrf_token %} 2. {{ from.as_p }} 3. <input type="submit" value="実行する"> 4. </form>
  • 28. [3-2-5] 実行してみよう コマンドを入力してブラウザを起動しましょう。 ブラウザのアドレスに「127.0.0.1:8000/admin/」と入力するとデータの入力が できるようになります。 $ python manage.py runserver
  • 29. プログラムの基本
  • 30. [4-2-1] 変数 たろう じろう さぶろう しろう 変数はコンピュータの中に作る箱です。 • 箱はいくつでも作れます • 箱は好きなもの(型)を好きなだけ 入れられます • 箱には名前をつけます
  • 31. [4-2-2] 型 今日の天気は? 12345 0.54321 2013/07/29 10, 15, 20, 24, 18
  • 32. [4-2-3] 代入と式 箱に型を入れることを代入と呼 びます value = 21+14 value 「21」と「+」と「14」を 箱(value)に代入と箱(value)には35が入ります。
  • 33. [4-2-3] 判断 変数に何が入っているかを確認 するときに判断を利用します。 変数Aに入っている値は10より大きい? 大きかったら5を引く、少なかった5を足す if a > 10: a = a – 5 else: a = a + 5
  • 34. [4-2-3] 繰り返し 複数回同じ処理を繰り返すことを ループと呼びます。 goukei = 0 for i in range(10) : goukei = goukei + i 0から9までを足します
  • 35. [4-2-3] 処理 式と判断と繰り返しを組分せせたものを処 理と呼びます。 # 登録ブログのクロールを開始する for blog in blogs: logging.info('-[' + str(blog.id) + ']' + blog.blog_title) now = datetime.datetime.now() blog.last_crawled = pytz.timezone(settings.TIME_ZONE).localize(now) blog.save() # 各エントリーの取得 feeds = feedparser.parse(blog.blog_rss) for feed in feeds.entries: logging.info('---' + feed.title) # 日付のタイムゾーンを設定情報に合わせる dt = feed.updated_parsed update_date_local = datetime.datetime(dt[0], dt[1], dt[2], dt[3], dt[4]) update_date = pytz.timezone(settings.TIME_ZONE).localize(update_date_local)
  • 36. クイズプログラムの 作成
  • 37. [5-3-1] quiz/models.py 1. # -*- coding: utf-8 -*- 2. from django.db import models 3. 4. class Quiz(models.Model): 5. 6. question = models.CharField(‘もんだい', max_length=255 7. answer01 = models.CharField(’こたえ01', max_length=255) 8. answer02 = models.CharField(‘もんだい02', max_length=255) 9. answer03 = models.CharField(‘もんだい03', max_length=255) 10. answer = models.IntegerField(‘せいかいばんごう') 11. 12. def __unicode__(self): 13. return self.question
  • 38. [5-3-2] quiz/urls.py 1. # -*- coding: utf-8 -*- 2. from django.conf.urls import patterns, include, url 3. 4. # Uncomment the next two lines to enable the admin: 5. from django.contrib import admin 6. admin.autodiscover() 7. 8. urlpatterns = patterns('’, 9. url(r'^$', ’quiz.views.home’), 10. url(r'^start/', ’quiz.views.start'), 11. url(r'^admin/', include(admin.site.urls)), 12. )
  • 39. [5-3-3] templates/home.html 1. <h1>メニュー</h1> 2. <p> 3. <a href="/start/">始める</a> 4. </p> 5. <p> 6. <a href="/ranking/">ランキングを見る</a> 7. </p>
  • 40. [5-3-4] templates/start.html 1. <form action="/question/" method="POST">{% csrf_token %} 2. <p>あなたの名前を入力してください</p> 3. <input type="text" name="challenger" size="20" maxlength="20" /> 4. <input type="hidden" name="question_count" value="0" /> 5. <input type="hidden" name="correct_count" value="0" /> 6. <input type="submit" value="クイズを始める" /> 7. </form>
  • 41. [5-4-1] quiz/views.py 1. # -*- coding: utf-8 -*- 2. from django.shortcuts import render_to_response 3. from django.http import HttpResponse 4. from django.template import RequestContext 5. from quiz.models import Quiz 6. import random 7. 8. def home(request): 9. return render_to_response('home.html', { 10. }, context_instance=RequestContext(request)) 11. 12. def start(request): 13. return render_to_response('start.html', { 14. }, context_instance=RequestContext(request))
  • 42. [5-4-2] quiz/urls.py 1. # -*- coding: utf-8 -*- 2. from django.conf.urls import patterns, include, url 3. 4. # Uncomment the next two lines to enable the admin: 5. from django.contrib import admin 6. admin.autodiscover() 7. 8. urlpatterns = patterns('’, 9. url(r'^$', 'quiz.views.home’), 10. url(r'^start/', 'quiz.views.start'), 11. url(r'^question/', 'quiz.views.question'), 12. url(r'^admin/', include(admin.site.urls)), 13. )
  • 43. [5-6-1] templates/question.html 1. <form action="/check/" method="POST">{% csrf_token %} 2. <input type="hidden" name="question_id" value="{{ question_id }}" /> 3. <input type="hidden" name="challenger" value="{{ challenger }}" /> 4. <input type="hidden" name="question_count" value="{{ question_count }}" /> 5. <input type="hidden" name="correct_count" value="{{ correct_count }}" /> 6. <p>{{ challenger }}さん、がんばれ!</p> 7. <p>{{ question_count }}問目 8. <h1>問題:{{ question }}</h1> 9. 解答 10. <ol> 11. <li>{{ answer1 }}</li> 12. <li>{{ answer2 }}</li> 13. <li>{{ answer3 }}</li> 14. </ol>
  • 44. [5-6-2] templates/question.html 15. <input type="text" name="input_answer" size="5" maxlength="1" /> 16. <input type="submit" value="答える" /> 17. </form>
  • 45. [5-6-3] quiz/views.py 1. def question(request): 2. if request.method == 'POST': 3. # 問題の取得 4. record_count = Quiz.objects.count() 5. get_id = random.randint(1, record_count) 6. record = Quiz.objects.get(pk=get_id) 7. # -- 挑戦者名 8. challenger = request.POST.get('challenger', '') 9. # -- 何問目か 10. question_count = int(request.POST.get('question_count', '')) 11. question_count = question_count + 1 12. # -- 正解数 13. correct_count = request.POST.get('correct_count', '’)
  • 46. [5-6-4] quiz/views.py 1. # -- 問題のID 2. question_id = record.id 3. # -- 表示する問題と解答群 4. question = record.question 5. answer01 = record.answer01 6. answer02 = record.answer02 7. answer03 = record.answer03 8. 9. return render_to_response('question.html', { 10. # -- チャレンジの最後まで保有する値 11. 'question_count': question_count, 12. 'correct_count': correct_count, 13. 'challenger': challenger,
  • 47. [5-6-5] quiz/views.py 1. # -- 正解のチェックまで保有する値 2. 'question_id': question_id, 3. # -- その他の値 4. 'question': question, 5. 'answer1': answer01, 6. 'answer2': answer02, 7. 'answer3': answer03, 8. }, context_instance=RequestContext(request)) 9. 10. else: 11. massage = u'挑戦者名が設定されていません。’ 12. return HttpResponse(massage)
  • 48. [5-6-6] templates/check.html 1. <form action="/question/" method="POST">{% csrf_token %} 2. <input type="hidden" name="challenger" value="{{ challenger }}" /> 3. <input type="hidden" name="question_count" value="{{ question_count }}" /> 4. <input type="hidden" name="correct_count" value="{{ correct_count }}" /> 5. <input type="submit" value="次の問題に進む" /> 6. </form>
  • 49. [5-6-7] quiz/views.py 1. def check(request): 2. if request.method == 'POST': 3. # -- 挑戦者名 4. challenger = request.POST.get('challenger', '') 5. # -- 何問目か 6. question_count = int(request.POST.get('question_count', '')) 7. # -- 正解数 8. correct_count = int(request.POST.get('correct_count', '')) 9. # -- 入力された答 10. input_answer = int(request.POST.get('input_answer', '')) 11. # -- 問題の正解の取得 12. question_id = request.POST.get('question_id', '') 13. record = Quiz.objects.get(pk=question_id) 14. answer = int(record.answer)
  • 50. [5-6-8] quiz/views.py 1. # -- 正解のチェック 2. if input_answer == answer: 3. correct_count = correct_count + 1 4. message = u'すごい!正解です!!' 5. else: 6. message = u'ざんねん!不正解です!!' 7. 8. if question_count == 5: 9. # -- ランキングデータの保存 10. histry = Histry(name=challenger, points=correct_count) 11. histry.save() 12. return render_to_response('finish.html', { 13. # -- チャレンジの最後まで保有する値 14. 'correct_count': correct_count, 15. 'challenger': challenger, 16. }, context_instance=RequestContext(request))
  • 51. [5-6-9] quiz/views.py 1. else: 2. return render_to_response('check.html', { 3. # -- チャレンジの最後まで保有する値 4. 'question_count': question_count, 5. 'correct_count': correct_count, 6. 'challenger': challenger, 7. # -- 正解、不正解のメッセージ 8. 'message': message, 9. }, context_instance=RequestContext(request)) 10. 11. else: 12. massage = u'挑戦者名が設定されていません。' 13. return HttpResponse(massage)
  • 52. [5-6-10] quiz/urls.py 1. # -*- coding: utf-8 -*- 2. from django.conf.urls import patterns, include, url 3. 4. # Uncomment the next two lines to enable the admin: 5. from django.contrib import admin 6. admin.autodiscover() 7. 8. urlpatterns = patterns('’, 9. url(r'^$', 'quiz.views.home'), 10. url(r'^start/', 'quiz.views.start'), 11. url(r'^question/', 'quiz.views.question'), 12. url(r'^check/', 'quiz.views.check'), 13. url(r'^ranking/', 'quiz.views.ranking'), 14. url(r'^admin/', include(admin.site.urls)), 15. )
  • 53. [5-7-1] quiz/views.py 1. def ranking(request): 2. persons = Histry.objects.all().order_by('-points')[:10] 3. return render_to_response('ranking.html', { 4. 'persons':persons, 5. }, context_instance=RequestContext(request))
  • 54. [5-7-2] templates/ranking.html 1. <h1>得点ランキング</h1> 2. <ol> 3. {% for person in persons %} 4. <li>{{ person.name }}さん - {{ person.points }}点</li> 5. {% endfor %} 6. </ol>
  • 55. 用語 • データベース – データを保管するためのプログラム。データベース保管するとデータ の取り出しが簡単になる。 • Python – プログラミング言語。プログラムを作成するための言葉。Pythonの他に もPHPやJAVA等がある。 • Django – プログラミングフレームワーク。プログラムを簡単につるくための道 具。 • エディタ – 文字を入力するためのプログラム。 • Terminal(端末) – コンピュータに命令を入力するためのプログラム。 • WEBブラウザ – インターネットを見るためのプログラム。
  • 56. TIPS • アルファベットと漢字の切り替え – [CTRL] を押しながら [SPACE] を押す
  • 57. この教室で利用したソフト • OS – Ubuntu Desktoo 日本語 Remix 12.04 • データベース – sqlite3 3.7.9 • プログラム言語 – Python 2.7.4 • フレームワーク– Django 1.5.1

×