31年目のRealize

プログラミング、イラスト、家族の事を書いたりするブログにする予定

Web画面の作り方

フレームワークの流れ

覚えたこと。 DjangoでのWebアプリ画面の作り方。

  1. templatesディレクトリ配下にWeb画面の基礎部分となるhtmlファイルを作成する。

  2. htmlファイルに対するhttpリクエストの対応をview.pyに記述する。

  3. 対象のhtmlファイルが呼ばれる際のURLパターンをurls.pyに記述する。

htmlファイル

記述としては↓のような感じ。(body部を抜粋)

<body>
  <form action="" method="POST" >
    {% csrf_token %}
    <p>記号<br>
      <select name="suit">
    <option value="H">Heart</option>
    <option value="D">Dia</option>
    <option value="S">Spade</option>
    <option value="H">Clov</option>
      </select>
    </p>
    <p>数字<br>
    <select name="rank">
      {% for i in rank_list %}
      <option value={{i}}>{{i}}</option>
      {% endfor %}
    </select>
    </p>
    <p>
      <input type="submit" value="送信">
    </p>
  </form>

画面はこうなる。

f:id:altrlz:20180722232058p:plain

通常のhtmlの記述に加えて、{% %}で囲まれた部分にDjangoが用意したpythonっぽいロジックを記述できたり、view.pyとの変数のやり取りができたりします。

なお、templatesディレクトリ自体をDjangoが認識するために、setting.pyに今回作成したアプリの情報を記載する必要がある。

INSTALLED_APPS = [
    'firstApp', #←これ#
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

view.py

記述はこんな感じ。

def form_card(request):
        if request.method =='GET':
                rank_list=[]
                for i in range(1,14):
                        rank_list.append(str(i))
                dictionary = {'rank_list':rank_list}

                dictionary.update(csrf(request))
                return render(request, 'select_card.html', dictionary)
        
        if request.method == 'POST':
                suit = request.POST['suit']
                rank = request.POST['rank'].zfill(2)
                dictionary = {'suit':suit, 'rank':rank}
                print(suit,rank)
                return render(request, 'display_card2.html', dictionary)

form_card関数が呼ばれたら、この処理が動く。 最終的にはrender関数で遷移先のhtmlファイルを決定し、dictionaryの部分にhtml内で使用する変数などなどを格納して受け渡しする。

ちなみに、dictionary.update(csrf(request))Djangoが用意してくれているセキュリティ対策で、CSRFクロスサイトリクエストフォージェリ)という攻撃を防ぐ機能を準備してくれている!

フレームワークって…いいね…。

urls.py

正規表現を使って、URLのパターンと、呼び出す関数の紐づけを行う。

urlpatterns = [
    url(r'^form_card/$',views.form_card),
]

ここで記述する関数名と、view.pyに定義した関数名が違って何度もDjango先生に怒られました…。そして削られていく時間。

ちなみに送信ボタン押すと

対応するトランプのカードが表示されます。

f:id:altrlz:20180722234236p:plain

画面作成の基本的な流れはこんなところですかね。 次はDjangoでデータを保管したりする動作を覚えて、最後にブラックジャックを動かす!

…もうちょっと進めるペース上げたいけど、8月、9月は誘惑が多くて更に時間が削られることが想定されます。

  • 8月~9月末までの誘惑

www.fantasylife.jp

  • 9月末~の誘惑

www.falcom.co.jp

これらの壁をどう乗り切って行くかが鍵。 目標を見失わないようにせねば。

Djangoに触れてみる

再スタート

ひとまず心のモヤモヤも晴れ、やっと本筋に戻ることができました。心なしか、以前よりテキスト読みやすくなった気がします。

たぶん気のせい。

仮想OS上でWebサーバを動かす

閑話休題(使ってみたかっただけ)

3週間も経ってどこまでやったかあやふやですが、確かWin10のPC上の仮想マシンにCentOS7をインストールするところまでやっていました。

Webサーバソフトをインストール

CentOSにWebサーバ機能を持たせます。 Webサーバといえば、apacheが有名で、今読んでいるテキストもそれを導入しています。

しかし最近はnginx(エンジンエックス)というソフトが普及してきているらしく、今後主流になりそうなので、こちらを入れてみました。

apacheには「C10k問題」という、1つのWebサーバにクライアントが1万台接続すると、動作が重くなってしまう問題があります。

その点nginxは軽量でかつ1つのプロセスで複数のリクエストを処理する「イベント駆動モデル」であり、クライアント台数が1万台を超えても余裕で動く。

…という特徴があるので、ユーザ数が多いWebシステムにおいて利点があります。

そんなでかいシステム作れませんが、流行りに乗っておきたい。

インストール自体は簡単で、CentOSに含まれているyumコマンドで一発!

  1. rootユーザで、/etc/yum.repos.d/nginx.repoファイルを作成し、以下の内容で保存。これで、yumコマンドで参照するリポジトリが追加される。

    [nginx]

    name=nginx repo

    baseurl=http://nginx.org/packages/mainline/centos/7/$basearch/

    gpgcheck=0

    enabled=1

  2. そして、yum install nginxコマンドを実行!終わり!
  3. 一応、バージョン確認コマンドnginx -vで、インストール成功しているのを確認。

やっとDjango

やっとDjango(ジャンゴ)に戻ってきました。 Webサーバの準備はできたので、そこに乗せるWebアプリを作っていきます。

pythonをインストールした際についでに入っているpipツールでDjanoをインストールできました。yumpython版ってところですかね?

プロジェクト作成

ここから、Webアプリ開発に便利なフレームワークを使っていきます。

django-admin startproject プロジェクト名のコマンドでプロジェクト用ディレクトリが作成され、その中に部品達が生成されます。 中でもmanage.pyというpythonファイルの部品が、アプリを作るための各種雛形ファイルを作ってくれたり、開発用の簡易サーバを起動したりしてくれるみたいです。

  • python manage.py runserverでサーバ起動。(ポートは8000番)
  • python manage.py startapp アプリ名でアプリ用雛形作成。

Webアプリ用の雛形ファイル

主要なものをメモメモ。

view.py

画面に何を表示させるか、どんな処理をするかを記述する。

apps.py

アプリケーションの設定を記述する。

models.py

データベース関係のファイル。

admin.py

管理画面の設定を記述する。

urls.py(これは自作)

URLと、呼び出される処理の関係を記述する。

今週はこんなところ。

今後の予定

今読んでいる本をマスターするまでは、と思っていましたが衝動買いしてしまった。

以前の投稿で書いた、直近で欲しいアプリを作るための技術「スクレイピング」(Webサイトのデータを取得するもの)について記述があったのでつい…。

altrlz.hateblo.jp

積み本が増えないように早く進めなければ…。

「理解する」について理解していく

ブログを始めて1ヵ月

経ちました。早すぎますね…。

一番のメインテーマである、プログラミングスキルアップの前に立ちはだかった壁、「理解するということ」について、更に、理解へ繋がりそうなインプットを得たので、それをアプトプットしたいと思います。

新たなテンプレート構築のための「技」

カッコイイ見出しにしてみました。

前回の投稿で、自分が理解するために、事象をテンプレート化して脳内に保管する、という概念を学びました。

altrlz.hateblo.jp

そのテンプレートを新たに構築するためには、「仮説立証」が有効という話でしたが、そのやり方を深堀りします。

インプットにした書籍

ビジネスマンのための「発想力」養成講座 (ディスカヴァー携書)

ビジネスマンのための「読書力」養成講座 小宮流 頭をよくする読書法 (ディスカヴァー携書)

経営コンサルタント小宮一慶さんの本です。 会社の先輩から4冊借りて、1週間で上記含む3冊を一気に読みました。

前回の本もですが、まさか自分がこんなに必死に自己啓発の本を読むことになるとは思いませんでした…。それだけ必要に駆られているということでしょう。

仮説検証することで、理解する

畑村さんの本の概念をベースに、小宮さんの本のテクニックを加えることで自分なりに解釈した内容を記します。

1.「関心」からの「疑問」

ある事象に対し、理解しようとする際に自分が持つ知識(テンプレート)を当てはめるにしても、まずはその事象に関心を持つこと!

そして、関心を持った上で、「何故そうなっているのか?」と疑問を持ってみます。

疑問も持たずに読み進めれば、これまでのように「理解したつもり」になってスルーしてしまいます。

2.「疑問」に対し「仮説」を立てる

疑問を持つことで、それが自分のテンプレートのどれに当てはまるか考え始めます。 ここで、重要なのはそのテンプレートを当てはめた理由が自分の中で論理的に説明できること

What(何が)、Why(なぜ)、How(どのようにして)そうなっているのか。

論理的でなければ、そのテンプレートの「構造」が成り立たないはずなので、それもまた「理解したつもり」になっているのです。

3.実際に動かし・観察することで「検証」する

自分が論理的に考えた仮説が合っているか否か、検証します。 その結果を踏まえ、仮説が正しければそのままの「構造」で、間違っていればを「構造」を修正した上で、自分の中で新たなテンプレートが構築されます。

それが「理解する」ということかなと思いました。

書いてあることの理解を深めるために

上記の、「関心→疑問→仮説→検証」を回しながら読み進めることが重要です。 それにより、書いてあることの論理的な「構造」が分かり、「構造」が分からなければ、それを構成する「要素」が何なのか知ることで、また新たなテンプレートとして自分の理解につながります。

という仮説を立てました

この自分なりの解釈もまた「仮説」ということです…!

本に書いてあることを鵜呑みにするだけでは理解出来たとは言えない!ということですね。 これが今まで出来ていませんでした…。

そういえば、僕が通っていた大学の教授が「教科書に書いてあること(数式)を信用するな。自分できちんと検証しろ。」と仰っていたのを思い出しました。10年近く前のことですが、今になって漸く分かった気がします。

「理解する」って何!

二歩下がる

仮想サーバの構築+Djangoの導入を進めているうちに問題が発生。

手順通りに進まない…。

書いてあることは理解しているつもりだけど、上手くいかない。

仕事でも似たような状況になることは多々あったのですが、その時は「そういうものだ」と思い込み、深く考えないようにしていました。

しかし最近になってようやく自覚しました。

今まで、理解したと思っていたが、理解した”つもり”になっていただけだったということです。

どういう状況かと言うと…

資料を読み込み、ポイントになりそうな部分をピックアップし、まとめる。そこまでは良いのですが、その後、他者へ説明しようとすると…できない。言葉が詰まる。質問に回答出来ない。

他者に説明できるくらいに理解しなきゃ…とは思いますが、でも今のやり方ではダメだよなぁ…と悩んでいた所

…そもそも、理解するってどういう状態?

と考えるようになりました。
そこで見つけたのが、この本です!

畑村式「わかる」技術 (講談社現代新書)

畑村式「わかる」技術 (講談社現代新書)

ズバリなタイトルで目に留まりました。

この本について

工学者で東京大学名誉教授の、畑村洋太郎さん著作。「失敗学」という学問の提唱者で有名な方の本でした。

2005年に出版された本ですが、これは自分の悩みにマッチしているし、有名な方の本だし、信頼できそうだ!という単純思考で即買い。

学べたこと

ひとまず1週間弱で一通り読み、分かった事をここに記します。

「わかる」とはどういうことか?

人が「わかった」と感じる時、以下の3パターンの事が脳内で判断されているのです。

  1. 「要素」の一致
  2. 「構造」の一致
  3. 「新たなテンプレートの構築」

前提として

世の中の全ての事象は「要素」が組み合わさり「構造」化され、さらに「構造」が組み合わさることで成り立っています。

それらの「要素」や「構造」について、人は今までの経験の中で知識として蓄え、「テンプレート(雛形)」化して脳内に保管しています。

「要素・構造」の一致

上記1,2については、ある事象に対して、自分が持っている「要素」または「構造」のテンプレートとのマッチングを試み、一致させることで「わかった」と感じます。

「新たなテンプレートの構築」

自分が経験したことのない、新たな事象が発生した場合、自分が持っているテンプレートを組み合わせ、より近いものとマッチングさせることで「わかった」と感じ、それを新たなテンプレートとして保管します。

テンプレートに関し、面白い話がありました。
脳科学の分野で研究されている現象として、「脳神経の髄鞘化(ずいしょうか)」というものがあります。

これは脳神経の周りに鞘ができる現象で、これにより神経の情報伝達速度が一桁から二桁早くなるとのこと。

そこで、新たなテンプレートを作るということは、この「髄鞘化」そのものではないか、と著者の畑村さんは考えていました。

そう考えると、「理解したつもり」では新たなテンプレートも作られず、髄鞘化も起きないので、他者へ説明するときに言葉が出てこないのかも?というのも一理あるのではと思います。

つまり、理解をしていくためには

資料を読んだり、経験をする中で、それにはどんな「要素」が含まれ、「構造」化されているかを意識することで、テンプレートを増やしていくこと。

また、新たなテンプレートを構築する時には「仮説立証」のプロセスを踏む事が有効らしいので、まずは先に答えを知るのではなく、自分で考え、予想してみた上で実際に動かし答え合わせすること。

その他にも

「直観」と「直感」の違いや、暗記の良し悪し、定量化訓練などが述べられていたり、「あー自分はこういうタイプだなー、だから理解力が足りないのか…」と思える具体事例があったりして面白いので、興味がある方は是非読んでみてください。

また、今回の紹介ではごちゃごちゃしそうだったので「要素」「構造」って具体的にどういうことを指す?といったことは書きませんでしたが、その例も豊富にありますので…。

まだまだ一度読んだだけでは理解しきれないので、この本をバイブルとして、実生活に当てはめながら理解を深めていきたいと思っています。

ブログタイトル

ブログを始めるきっかけも、この投稿のきっかけも、自分自身のことを知ることができたからでした。(目標が無いから興味も持てない、理解したつもりになり説明ができない)

それにちなんで、ブログのタイトルは

[31年目のRealize]

にしました。

realizeの意味

〔頭で思考・理解して〕~に気付く、~を悟る、自覚する、実感する

また

〔夢・望ましい状況などを〕実現する

31年目の人生で新たに気づき・自覚したことを期に、目標を実現させたい、という意味を込めてみました。いい感じの単語ですね。馴染む馴染む。

以上!

pythonコーディングひと段落

次はWEBアプリ

さて、プログラミングの方も、ちまちま進めています。 前回紹介した本の、ブラックジャックpythonで作るところまでは完了です。

とはいえ、コマンドラインのみで動く簡単なものですが。

[ H 7 ]とか[ D 5 ]というのは、それぞれハートの7ダイヤの5といった表記です。

モヤっとコード

このプログラムはfor文やif文、リスト等が分かっていればすぐに作れるので、あまり躓くことはありませんでした。
関数についても、メインのモジュールに関数を直書きして、メイン関数の中で使う、という流れ。
クラスを作ってインスタンス化→インスタンスメソッドを使う、といった処理は無かったため、物足りない感じ…。 (クラスメソッドとかスタティックメソッドとかがまだ腹落ちしていないので…次の課題ですね)

そんな中でも、ちょっとモヤっとするコード(完全にマスターしたとは言い切れないもの)があったのでメモ。

いわゆるリスト内包表記

#デッキを作る
def make_deck():
    rank = range(1,14)
    suit = ('S','H','C','D')
    deck = [(i,j) for i in rank for j in suit]
    random.shuffle(deck)
    return deck

deck=[(i,j) for...の部分ですね。
(i,j)というタプル(要素を変更できない配列)のリストを生成しています。
rankが1から13までfor文で回る間、それぞれS,H,C,Dがfor文で回る二重ループの表記。これで全ての組合せのリストとなっています。
こういうのサラっと書けるようになりたい。

複数の戻り値を格納

#勝敗の結果を判定
message, player_money = win_lose(dealer_hand, player_hand, bet, player_money)
print(message)

win_loseという関数で勝敗が確定し、表示する文字列と所持金の増減値を返します。
それらをそれぞれ、messageplayer_moneyに格納しています。
これは便利ですが…その関数が何をどの順番で返してくるのか、注意しないとすぐにバグ化する予感。

そしてDjango

ついつい心の中で「ディージャンゴ」って呼んじゃいますが、「ジャンゴ」なんですよね。なぜだ。

ここでWEBアプリを動かす為のサーバが必要になるのですが、現在はその環境を構築中です。
自宅にあるWindows10のノートPC上に、CentOS7の仮想サーバを構築し、そこにDjangoを乗せて見ようと思っています。

CentOS

Linuxを基本にしたOS(ディストリビューション)の1つ。いくつかある中で、結構メジャーに使われているらしい。これも使いながら勉強していきましょう…。

参考

  1. 以下のサイトで仮想環境を構築・接続するツールVMWare Workstation Player」を入手してインストールします。
    downloads

  2. 以下のダウンロードサイトから、CentOSのisoイメージを入手します。
    Index of /pub/Linux/CentOS/7/isos/x86_64

  3. VMWare Workstation Player」を起動し、「新規仮想マシンの作成」でCentOSのisoイメージを選択し、OSをインストール。

所感

Djangoへの道のりはもうちょっと長かっ た…。

イラスト投稿

お絵描きについて

今回は趣味のイラストのお話です。
初回の投稿に書いた通り、CLAMPカードキャプターさくらがきっかけで絵を描きはじめました。

学生時代、教科書やテスト用紙の隙間、机にラクガキしていた人が周りに居ませんでしたか?私です。

木之本 桜

カードキャプターさくら より
四月頃に描いたやつです。
アニメの新章観てます。

作成環境について

大学時代までは、WACOMペンタブレットを使っていました。(リンク先は最近のモデルですが、当時はintuos3というモデルを使っていました。)

当然、PCに繋いでディスプレイを見ながら作業するので、PCの前に座る必要があるわけです。

…ただし、今はそれがキツイ!

大学時代は常にPCの前にいたので良かった。
しかし今は、仕事から帰って、家族でご飯を食べ、子供とお風呂に入って…子供も寝静まった後に、さぁPC立ち上げて作業するぞ!というエネルギーはもう残ってないんです。

そんな時にオススメなのがコレです!

raytrektab DG-D08IWP

8インチのタブレットで持ち運び便利。

なので、家のどこにいてもお絵描きできる。さらに、ちょっとした隙間時間にすぐ起動して使える、という

まさに、子育て家庭のお絵描きさん向けの神デバイスなのである!

ブログ用のアイコンも描いてみた

娘をモデルに。

イラストも、こんな感じで投稿していこうと思います!

小さな一歩

プログラミングの勉強開始!

2回目の更新です。今回はプログラミングの話。

初回のブログに書いた通り、pythonという言語を勉強して最終的に何かアプリを作りたいと思ってます。
まだどんなことが出来るか分かってませんが、自分が使いたくなるものを自分のために作る!…というモチベーションでやって行く。

ちなみに今直近で欲しいものは…

市営テニスコート予約(補助)+管理

ができるアプリです。

なぜなら、今利用している市の施設予約システムがとても不便だから。

その理由は

  1. レスポンシブでない。 (スマホで見辛い…pc起動したくない)
  2. 一昔前のUIで使いづらい。 (期間を範囲指定して空いている日を一括で見たい…)
  3. 管理画面見ても、いつ抽選が実施され予約確定になるのか分からない。

などなど。

なんかこう、アプリで指定した条件で、市のシステムにリクエスト投げてその結果をアプリで受ける、みたいなのが作れたら後は自分向けのUIにしたり。
また、その予約情報をLineとかでシェアできるようにして参加者への連絡の手間を減らすとか出来たらいいなぁ!(そういうの既にあったら教えてください…使いたい!)

パパ友とのテニスが捗る。

入門書を買いました

とりあえず基本的な文法とかは↓のサイトで勉強しています。

Python-izm | Python の入門から応用までをサポートする学習サイト

他にもWeb上で勉強できることはありますが、何か手元にひとつバイブル的なものが欲しいのと、何かアプリを作りながら進められるものが無いかと。その方が理解が深まりますからね。

そう思い立ち、先週、池袋ジュンク堂で色々眺めていたところ良さそうな本があったので、買いました。

Pythonプログラミングのツボとコツがゼッタイにわかる本

Pythonプログラミングのツボとコツがゼッタイにわかる本

この本で学べること

今コードを書きながら読み進めているところですが…軽く内容を紹介します。

pythonの基礎

どの本でもまずはここから。

pythonのインストール方法、基本的な文法、プログラムの実行の仕方…。
電子書籍もいいですが、文法なんかは紙の本ですぐにページめくって確認できた方がいいですよね。

pythonブラックジャックのゲームを作る

実際にトランプゲームを作りながら、pythonに慣れることができます。(まだやってないので、そう信じています)

WEBアプリを作る

前段で作ったブラックジャックをWEBブラウザ上で遊べるようにすることで、WEB開発のスキルを身につける。

WEBサーバも構築が必要になりますが…それを簡単に作るためにDjangoというWEBアプリのフレームワークを使うようです。
こいつをインストールすれば、簡単にサーバを立てられる!便利!

ブラックジャックのディーラーに人工知能を導入

プレイヤーの入力(戦略)を人工知能機械学習させ、ディーラーがその戦略に従うようになる…と。なんか凄そうでかなりワクワクしますね!
学びたかったディープラーニングにも触れられている点もGOOD!

実際に人工知能のプログラミングまではやらず、既に出来上がっているモジュールを導入するだけのようですが、考え方は載っています。

ちなみに、使われているライブラリは以下の通り。

Numpy

数値計算ライブラリ。
高度な数学関数、ベクトル計算を正確かつ高速にできる。

Theano

数値計算ライブラリ。
数式そのものから解法を考えてくれる。
Numpyよりも最適な計算方法を編み出してくれる特徴がある。

Keras

ディープラーニング用のモジュールを含んだライブラリ。
ディープラーニングの基礎となるニューラルネットワークの構成を上手いことこう…やってくれるらしい。まだよくわかりません…要勉強orz

Pandas

データ処理をするためのライブラリ。
簡単にデータの検索、変更ができる。

7月中にはマスターしたい

本って色々買って手を出したくなるけど、まずは1冊をとことんやることが大事って偉い人が言ってた。
そして自分が理解したことを、自分の言葉で説明できるよう腹落ちさせることが重要です。
それが、このブログの目的でもあります。

時には間違った理解を書いてしまうこともあるかも知れません…そんな時はどんどんコメントでツッコんで頂けると助かります!