Tip:
Highlight text to annotate it
X
ページのバージョン履歴を追加するという ボーナス問題の解説です
historyをクリックし 1つ前のバージョンのページが出たら正解です
ページの内容を更新したい時は editリンクにアクセスします
更新後に保存をして編集完了です
もう一度historyをクリックすると バージョン3が追加されています
ページの内容がテキストで表示されます
すべてのページの履歴を見ることが 1つ目の課題でした
2つ目の課題は特定のバージョンを見ることです
どのバージョンのnew pageか 分からなければいけません
例えば真ん中のバージョンのnew pageを 選択します
GETパラメータでバージョンを指定します 今は5にします
単なるデータベースIDです
他のオブジェクトも作ったので このページはバージョン10になっています
Googleが自動的に付番するIDです
どのバージョンも編集できます
各バージョンにそれぞれURLがあります
これはバージョン4のnew pageで オリジナルのページです
ここでSaveをクリックすると 最新バージョンに書き換えられます
そこでhistoryを見ると 新しいバージョンが追加されています
最新バージョンを格納したければ editからSaveをするだけです
これが最新のページです historyに入ると今までの履歴が見られます
次にインプリメンテーションを説明します
まず実行するにはいくつかの方法があります
内容ではなく そのリストが羅列されたページを持つことができ
そのリストのページを データストアに格納する方法があります
すべてのページにはpagesという名前がついており
'/root'+pathで呼び出される親がいます
あらかじめ/rootを入れておいたのは 皆さんが混乱すると思ったからです
ただデータストアには大元となる先祖がいることを 知っておいてください
この序列に関しては今は詳しく話しません
理解したところで 課題を解くために必要ではないからです
他にも解く方法はあります
それがこのコードです
基本的にURLはそれぞれ共通の先祖を持っています
ですのでby_pathでページ検索をする時は
まず特定の先祖を共通して持つページを呼び出します
大抵は共通するURLで呼び出し 日付が若い順に並べます
そしてGET関数で最新のものを引っ張ります
古いバージョンが欲しい時はgetbyid関数で 引っ張ります
その際はIDとparent_keyを参照します
parent_keyはメインのパスクエリが参照するのと 同じものです
ここではクラスでページを参照しています
なぜなら ここはクラスメソッドで組み立てているからです
IDでページを引っ張るように指示し
欲しいページのIDと親を引数にします
こうすれば古いページも履歴から引っ張り出せます
そのページをレンダリングするには 編集ページへ行きます
by_pathとGET関数で クエリが出した最初の結果を引っ張ります
別の方法として vパラメータでバージョンを出すものがあります
バージョンが見つかりそれがdigitであれば by_id関数を適用し引っ張ります
そのバージョンがない場合は NotFoundが表示されます
バージョンで探せなければ 一般的な検索方法もあります
Wikiにはどのページも見られるよう すべてのページに共通したコードがあります
重複したコードなので後ほど削除します
私の完成版のWikiには このコードは残っていないでしょう
テンプレートをいくつか見ていきましょう
仕組みが分かると思います
またテンプレート継承を使います
元のテンプレートはWikiのタイトルが入っており
スタイルシートを参照の上 ブラウザの基本構成を定めていました
そこからやいくつかのdivを派生させました
このクラスはブラウザの様式を決めるものなので できなくても課題に影響はありませんが
皆さんのWikiをより美しくしてくれます
私は自分のWikiをきれいに見せたいので使っています
ここはブラウザのヘッダに表示されるものです
ユーザがログインしていれば ユーザ名とlogoutのリンクを参照します
基本的な/logoutのURLです
ユーザがログインしていなければ loginとsignupの2つのリンクを引っ張ります
この2つも基本的なURLです
gray-linkもつけて色をグレーの様式にし
リンクをポイントした際の下線も表示します
ここにdivを置きましたが中身はありません
これはただのブロックで テンプレート継承する時に使う方法です
同じHTMLを何度も書く必要がなくなります
元から派生したテンプレートがここに入ります
controlsはページを編集したり ページと履歴を閲覧する時に使われます
テンプレートの中が更新されていきます
divのclearはリンクを小さく右側に並べる技術で 単精度不動小数点数型と呼びます
小さいため場所を取りません
ブラウザのスペースを節約したい時は divのclearをしてください
ここでは詳しく説明しませんが 基本的にはCSSでのレイアウトで
スクリーンの端に垂直に並べて置くものです
ここに実際のテキストが書かれています
編集後に飛ぶページの内容を参照します
定義だけで中身がなくテンプレートが上書きされます
実際にWikiページの内容を参照している page htmlのテンプレートを見てみましょう
base htmlを継承しており テンプレートを変えると2ブロックが上書きされます
普通に閲覧する時のページにはリンクが2つあります
editリンクとhistoryリンクです
editが有効になるのは ユーザがログインしている時だけです
editリンクはログインしているという条件で書き historyリンクでは条件を絞りません
リンクの構成はシンプルです _editにレンダ関数で参照されるパスを付けます
historyも同じです
シンプルな構成なのでハンドラが正しく参照します
そして実際のページを表示する時は Jinjaのsafe記号を使います
これはHTMLを別の文字列に置き換えずに そのままページに入れ込むものです
今回HTMLを入力したのは自分なので問題ありません
皆さんがこのWebサイトを公開するなら 特別な置き換えをしたいかもしれませんが
大抵のウェブサイトは限られたHTMLのみ許可するか HTMLに変換される特別な言語を使っています
HTML自体を許可しないウェブサイトもありますが 使えないWikiになってしまいます
あくまでも表示方法なので皆さんにお任せします
次に編集ページのテンプレートです
controlsは閲覧ページとほぼ同じコードです
ページに戻るviewリンクがあり クリックすると編集がキャンセルされます
historyリンクも貼るので editページから履歴を見に行くことができます
これらのリンクは すでに存在するページに限り有効です
作っている段階ではページも履歴も存在しないので if関数で条件付けします
このテンプレートは すでに存在するページにだけ渡されます
このフォームはpostメソッドで main-editはブラウザの様式を定義するクラスです
大きくて見やすいページになります
巨大なtextareaをcontentで呼び出し pageとpage.contentを参照します
ページが存在する時はその内容を引っ張り 存在しない時は空の文字列を引っ張ります
最後にsaveボタンを表示するform footerを入れます
CSSのレイアウトです
editページはシンプルな構成です
次は閲覧履歴を見るhistoryページです
今までと同様にユーザがログインしていれば 閲覧ページと同じようにeditリンクを貼ります
次にログイン状況を考慮しない場合の条件で historyリンクの代わりにviewリンクを貼ります
ここからがcontentでテーブルを使います
この授業ではテーブルの説明はまったくしなかったので この例を参考にしてください
今までにもいくつか出てきました
ここで少し説明します
historyテーブルを書きましょう
もう一度gray_style関数を説明します
ここでは偶数行と奇数行において postの中で反復が行われます
つまり行の色が白とグレーの交互になるのです
実際の画面で見てみましょう
これはhistoryページです
上の行から順に白、グレー、白、グレーとなります
テーブルが分かりやすくなります
ここでは簡単なメソッドにしましたが
特定の行だけをグレーにするコードは このようになります
あとでテンプレートにしますが gray_style関数はlstを参照し列挙します
Python固有の関数で リストのエレメントをタプルに戻しそのインデックスを
リスト内に戻すものです
xとlstで定義すると ページが1ページずつ繰り返されます
enumerateをつけて定義すると タプルとしてインデックスもリストに戻り反復されます
nを2で割った余りが0の場合は 偶数行でブランクが繰り返され
奇数の場合はグレーが繰り返されます
この関数内では様々なことが行われます
ジェネレータをどう作るか定義するyieldもあります
難しいので課題にはしていませんが 私が定義したブラウザの様式を紹介しました
変数を利用しさらに偶数奇数を見分けることで
テンプレートでもこの効果を定義できます
よりPythonを使いこなす方法です
ではテンプレートに戻ります pとrowstyleで文字列の色を変えられます
rowstyleを各行のクラス名にします
行のクラスは 中身が空のものとgrayと入るものを作ります
CSSでの行の色づけ方法です
そしてtdで3つの列を定義します
1つ目の列はdateですので 最後に修正した日付を入れます
2つ目の列にはcontentが入り 投稿された内容の最初の100文字を反映します
3つ目の列はページの履歴を見るリンクです
これは普通のリンクでgray-linkの様式にします
他のリンクも同じ様式です
hrefでpathを呼び出しGETパラメータを羅列し その投稿のIDを参照します
key.IDはGoogleデータストアや他の格納庫から エレメントのIDを引き出します
URLは基本的に現在のページのパスと vパラメータが引き出すIDで構成されます
編集とWikiハンドラを学んだ時 vパラメータで特定のものを検索しました
少し下に行くと ユーザのログインを条件にeditリンクが入っています
ブラウザ上ではeditボタンになり URLは/_editになりますが構造は上と同じです
pathに?v=を加えページのIDを付けます
このコードはおそらく削除し ページのリンクをedit URLやhistory URL
normal URLやversion URLと表示し 使いやすくします
そしてテンプレートで残します 今の状態はエラーになりやすいので変更が必要です
同じコードや文字列が入る関数が多数あるので
1つを変えると他も変えなくてはいけないからです
ifとループとテーブルの条件文を閉じ historyページの完成です
テンプレートもすべて紹介したので CSSを説明して終わりです
頭にhtmlと打ちbody以外をhtmlエレメントにして heightを100%と入れます
こうするとHTMLテキストの編集ページが 100%のサイズになります
実際に見てみましょう
editをクリックしてテキストページを見ると ページがブラウザいっぱいに表示されています
通常はテキストのサイズのみですが スクリーン全体のサイズになります
これが100%と入れた効果です
bodyの要素も同じく100%にします
positionをrelativeにするのは要素の配置場所を 他の要素と相対的に調整したい時や
その要素の親要素の配置場所を 固定したい時などに適用します
ページ上の要素の配置を 具体的に決めるプロパティです
フォントやデフォルトのサイズを選び テキストの幅を800ピクセルにします
margin: 0 autoの場合は中央揃えとなります
テキストのデフォルトカラーはグレーです
headerの高さは30ピクセルで line-heightは30にし中央に垂直に配置します
marginは10ピクセル取ります
control要素は編集や閲覧や履歴のリンクで floatプロパティで右に置きます
ブラウザ上ではここに置かれます
floatをrightにするとコンテントが右に並びます
色はグレーでフォントは13ピクセルです
controlsは2つを並べて間にスペースを入れます
このメソッドはログインとサインアップ そしてページ操作で使いました
実際にお見せします
これは20ピクセルで 両方がそれぞれcontrol要素です
右側に並べて位置を固定しています
これがcontrolsプロパティです
gray-linkはよく出てきました リンクの色をグレーにして下線は引きません
アクセスされても 紫には変えずにグレーのままにします
カーソルが上に来ることをhoverと呼び このようにリンクに下線が引かれます
マウスでカーソルを文字に合わせると下線が現れます すべてのリンクがこうなります
私が好きな効果です
ここはすべてgray-linkを適用したため マウスを合わせると下線が出ます
これがCSSレイアウトです
エラーは今まで同様赤色です
main-editはメインフォームのクラスで positionはabsoluteです
つまりこの要素の配置は絶対となるので ここで指定した上から45ピクセルで右から0ピクセル
下から10ピクセルで左から0ピクセルという配置で フォームをページ全体に広げられます
main-editのtextareaの配置位置は 上から0ピクセルの下から30ピクセルなので
リンクを貼る場所を空けています 左右の余白はありません
テキスト欄がスクリーンをほぼ埋める形になります
form-footerのpositionはabsoluteで ページの下に配置されます
左右と下に余白はありません
topを書いていない時は標準に従うという意味です heightは30ピクセルにしたので
30ピクセルの高さのsaveボタンが下に置かれます
submitボタンのフォントは18ピクセルです
テーブルではborder-collapseをcollapseにして テーブルを少し小さくし
セルにデフォルトで入るスペースを消します
tableにセルの色分けをする.grayが入っていたら background colorを
eeeと入れてライトグレーにして下さい
date-cellはwidthを200ピクセルに設定します
content-cellはpaddingプロパティで テーブルを大きくします
paddingに10ピクセルといれると 上下左右が10ピクセルずつ広がります
link-cellも同様にします 縦幅となる最初の数値を0にして
横幅を5にするとこのような表示になります
viewとeditの間に5ピクセルの幅ができました
テーブル形式では この操作をして間にスペースを入れます
たくさんありましたが以上で終わりです
CSSはコースの範囲外ですが今後のために触れました
今後も私はCSSを使うので それを参考に各自で作ってみてください
講義すべてを理解できれば上出来です
最終テストは難しかったでしょう ボーナス問題も複雑でした
すべてをこなせた方は大変頑張りましたね
とても多くのことを学べたと思います 途中で挫折した方は
これから頑張ってください
これで講義はすべて終了です
最後までお付き合いいただき有難うございました
たくさん学んでもらえたら幸いです
この数週間はとても楽しかったです
それではWeb上でまたお会いしましょう