DJango_info
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
]
開始行:
#contents
** インストールとプロジェクトの初期化、アプリの初期化 [#v...
*** インストール [#l192eb6c]
[local] munakata:~/source/python/vlman$ pip3 install dja...
[local] munakata:~/source/python/vlman$ python3 -m djang...
2.2.2
*** PYTHONPATH の指定[#lb4d603c]
- vscode 上の lint が Django のパッケージが見つけられない...
- PYTHONPATH には pip show django を実行して location で...
- PYTHONPATH 自体は vscode の設定ファイル （プロジェクト...
*** プロジェクト と アプリ の初期化 [#t5ca0f8e]
[local] munakata:~/source/python/vlman$ django-admin sta...
[local] munakata:~/source/python/vlman/vlmanui$ django-a...
*** 管理用ユーザーの登録 [#p6099483]
[local] munakata:~/source/python/vlman/vlmanui$ python3 ...
Username (leave blank to use 'munakata'):
Email address: magu775@gmail.com
Password:
Password (again):
Superuser created successfully.
*** timezone とロケールの設定 (settings.py) [#l8c0ab8b]
LANGUAGE_CODE = 'ja'
TIME_ZONE = 'Asia/Tokyo'
*** インストール完了時のディレクトリー構造 [#n21cb74e]
- プロジェクトの下にアプリケーションを追加していく構造
[local] munakata:~/source/python/vlman$ tree
.
├── video_top
│ ├── sample_A.mp4
├── vlman.py
├── vlmandb.sqbpro
├── vlmandb.sqlite3
├── file_viewer <--------- application definition
│ ├── __init__.py
│ ├── admin.py
│ ├── apps.py
│ ├── migrations
│ │ └── __init__.py
│ ├── models.py <----------- database access definition
│ ├── tests.py
│ └── views.py <--------- look & feel definition
└── vlmanui <------------ total system settings
├── manage.py
└── vlmanui
├── __init__.py
├── settings.py <---------- application directory
├── urls.py <------------ URL entry point defin...
└── wsgi.py
** django ビルトイン管理ツール（= manage.py) [#i85b1ed8]
- ビルトイン Web サーバーの起動
[local] munakata:~/source/python/vlman/vlmanui$ python3 ...
*** カスタムコマンドの追加 [#q3ed478e]
- BaseCommand クラスもしくはその サブクラス の一つを継承...
- python プログラム名がコマンド名になる（但し実行時に .py...
- プログラムを配置する場所は決まっている ( アプリ/managem...
- プログラム引数は def add_arguments(self, parser): とい...
- プログラム実体は def handle(self, *args, **kwargs): と...
- 参考 URL
-- [[カスタム django-admin コマンドの実装 (Django 公式マ...
-- [[argparse --- コマンドラインオプション、引数、サブコ...
*** python argument parser (argpaser) [#ebe69f6f]
- [[Argparse チュートリアル (python 公式チュートリアル):h...
- [[argparseの引数と設定例について調べてみた:https://kami...
-- [[argparseでコマンドライン引数を使ってみよう！:https:/...
-- ArgumentParser()の引数
ArgumentParser([description][, epilog][, prog][, usage][...
|引数|デフォルト値|概要|h
|prog|sys.argv[0]|プログラム名 (デフォルト: sys.argv[0])|
|usage|パーサーに追加された引数から生成される|プログラム...
|description|None|引数のヘルプの前に表示されるテキスト|
|epilog|None|引数のヘルプの後で表示されるテキスト|
|parents|???|ArgumentParser オブジェクトのリストで、この...
|formatter_class|???|ヘルプ出力をカスタマイズするためのク...
|prefix_chars|‘-‘|オプションの引数の prefix になる文字集...
|fromfile_prefix_chars|None|追加の引数を読み込むファイル...
|argument_default|None|引数のグローバルなデフォルト値|
|conflict_handler|???|衝突するオプションを解決する方法 (...
|add_help|True|-h/–help オプションをパーサーに追加する|
-- add_argument()の引数
add_argument(name or flags...[, action][, nargs][, const...
|引数|概要|h
|name or flags|名前か、あるいはオプション文字列のリスト (...
|action|コマンドラインにこの引数があった時のアクション|
|nargs|消費すべきコマンドライン引数の数|
|const|一部の action と nargs の組み合わせで利用される定数|
|default|コマンドラインに引数がなかった場合に生成される値|
|type|コマンドライン引数が変換されるべき型|
|choices|引数として許される値のコンテナー|
|required|コマンドラインオプションが省略可能かどうか (オ...
|help|引数が何なのかを示す簡潔な説明|
|metavar|使用法メッセージの中で使われる引数の名前|
|dest|parse_args() が返すオブジェクトに追加される属性名|
-- nargsに設定できる値
|設定値|概要|h
|N|N 個の引数がコマンドラインから集められ、リストに格納さ...
|?|コマンドライン引数が存在しない場合、 default の値が生...
|*|全てのコマンドライン引数がリストに集められます|
|+|全てのコマンドライン引数がリストに集められます|
-- [[agrparse (関数の引数のパーシング関数):https://docs.p...
-- [[ArgumentParserの使い方を簡単にまとめた:https://qiita...
-- [[Python argparseの使い方:https://qiita.com/dodo5522/i...
-- [[ちょっとしたコマンドラインツールをpythonで作る時に便...
-- [[Djangoカスタムコマンドを作成し、引数を送る(type にカ...
** URL ディスパッチャー（パスコンバーターによるリインテリ...
path('abc/', include('(プロジェクト名).urls', name = 're...
-- http://aaa.com/abc/ の場合 abc/ の部分だけ記載する
-- include で各アプリの urls.py を読み込ませる
rpath(r'^abc*$', include('application name.urls'), name=...
-- 正規表現を使ってパス変換する場合には rpath を使うと py...
-- name で逆引き（ URL をハードコードしないで済むように名...
- （プロジェクトルート）／（プロジェクト名）／urls.py <-...
-- プロジェクト全体のルーティング設定を書く
- （プロジェクトルート）／（アプリケーションルート）／url...
-- 各アプリケーション毎のルーティング（＝view との対応関...
** Model (データー構造の定義） [#xb793560]
*** Django における DB の扱い方（SQL 文は一切使わなくても...
- DjangoではORM（オブジェクト関係マッピング）を使ってデー...
- DjangoのORMの実装は [[ActiveRecord:https://qiita.com/ki...
-- モデルを設計すればマイグレーション機能でDB定義を自動作...
-- SQLの記述は不要。モデルマネージャ経由でクエリを実行す...
-- クエリは人間に読みやすく命名されたマネージャメソッドの...
- [[Django データベース操作 についてのまとめ:https://qiit...
|大分類|小分類|メソッド|h
|全件取得する||all()|
|検索条件を指定|肯定|filter(**kwargs)|
|~|NOT条件|exclude(**kwargs)|
|~|IN条件の中身をリストで指定する|in_bulk(id_list=None, f...
|並び順を指定|昇順|order_by(*fields)|
||降順|reverse()|
|クエリセットからインスタンスを取得する|検索に一致したも...
|~|指定した日付順で最新のもの|latest(*fields)|
|~|指定した日付順で最古のもの|earliest(*fields)|
|~|クエリセットの先頭|first()|
|~|クエリセットの最後|last()|
|レコードを新規登録する|新規登録|create(**kwargs)|
|~|条件に一致するものを取得、無い場合は新規登録して取得|g...
|~|条件に一致するものを更新、無い場合は新規登録|update_or...
|一括登録する||bulk_create(objs, batch_size=None)|
|一括更新する||update(**kwargs)|
|一括削除する|| delete()|
|特定のフィールドを集計する|テーブル内の集計|aggregate(*a...
|参照先テーブルの集計||annotate(*args, **kwargs)|
|該当のレコード件数||count()|
|抽出したレコードから重複の無い日付配列を作る||dates(fiel...
|抽出したレコードから重複の無い時刻配列を作る||datetimes(...
|クエリセットの存在チェックをする||exists()|
|インスタンスの一部だけを取得|結果を辞書のリストで取得す...
|結果をタプルのリストで取得する||values_list(*fields, fla...
|特定のフィールドの重複無しリストを作る||distinct(*fields)|
|SQLを直接実行する|SQLを直に設定する（一部）|extra(select...
|~|SQLを直に設定する（全部）|raw(raw_query, params=None, ...
|クエリセット同士の集合演算をする|和集合|union(*other_qs,...
|~|積集合|intersection(*other_qs)|
|~|差集合|difference(*other_qs)|
|パフォーマンスチューニング キャッシング|SQLのJOIN句を使...
|~|関係先を先行取得してキャッシュする。1-N、N-Nで有効。|p...
|パフォーマンスチューニング 重いカラムを取得しない|指定カ...
||指定カラムだけ取得する|only(*fields)|
|パフォーマンスチューニング 巨大なテーブルをループで扱う|...
|データベースのレコードロックを使う||select_for_update(no...
|デフォルト以外のデータベースを使う||using(alias)|
|空のクエリセットを作る||none()|
*** Django 外で作成した DB を利用するには制約がある場合も...
- &color(red){DJANGO で利用するデーターベースは model の...
- [[モデルフィールド 設定テンプレート:https://qiita.com/o...
- &color(red){DJANGO からデーターベースを操作する場合には...
-- [[データベース操作まとめ:https://e-tec-memo.herokuapp....
*** model と DB の同期処理 （＝migration) [#z77f6ca2]
- &color(red){モデル変更時には以下のコマンドでデータベー...
-- python3 manage.py makemigrations (アプリケーション名)
-- python3 manage.py migrate
[local] munakata:~/source/python/vlman/vlmanui$ python3 ...
Migrations for 'fview':
fview/migrations/0001_initial.py
- Create model Filedir
[local] munakata:~/source/python/vlman/vlmanui$ python3 ...
Operations to perform:
Apply all migrations: admin, auth, contenttypes, fview...
Running migrations:
Applying contenttypes.0001_initial... OK
Applying auth.0001_initial... OK
Applying admin.0001_initial... OK
Applying admin.0002_logentry_remove_auto_add... OK
Applying admin.0003_logentry_add_action_flag_choices.....
Applying contenttypes.0002_remove_content_type_name......
Applying auth.0002_alter_permission_name_max_length......
Applying auth.0003_alter_user_email_max_length... OK
Applying auth.0004_alter_user_username_opts... OK
Applying auth.0005_alter_user_last_login_null... OK
Applying auth.0006_require_contenttypes_0002... OK
Applying auth.0007_alter_validators_add_error_messages...
Applying auth.0008_alter_user_username_max_length... OK
Applying auth.0009_alter_user_last_name_max_length... OK
Applying auth.0010_alter_group_name_max_length... OK
Applying auth.0011_update_proxy_permissions... OK
Applying fview.0001_initial... OK
Applying sessions.0001_initial... OK
- migration のリセット
-- アプリケーションディレクトリーにある migrations という...
-- キャッシュデータのクリア
(vman) munakata@muna-E450:~/code/python/vman/vmanhmi$ py...
Python 3.6.8 (default, Jan 14 2019, 11:02:34)
[GCC 8.0.1 20180414 (experimental) [trunk revision 25938...
Type "help", "copyright", "credits" or "license" for mor...
(InteractiveConsole)
>>> from django.core.cache import cache
>>> cache.clear()
-- データーベースの中の django_migrations というテーブル...
sqlite> select * from django_migrations; <------- 該当...
sqlite> delete from django_migrations where app='fview (...
sqlite>.exit
(vman) munakata@muna-E450:~/code/python/vman/vmanhmi$ py...
(vman) munakata@muna-E450:~/code/python/vman/vmanhmi$ py...
-- manage.py showmigrations で該当アプリのマイグレーショ...
-- manage.py makemigrations (アプリ名） で明示的にアプリ...
(vman) munakata@muna-E450:~/code/python/vman/vmanhmi$ py...
-- それでも migrate 処理がエラーになる場合には fake migra...
(vman) munakata@muna-E450:~/code/python/vman/vmanhmi$ py...
(vman) munakata@muna-E450:~/code/python/vman/vmanhmi$ py...
-- [[(参考) manage.py migrateをおかしな感じにやってしまっ...
*** pylint の Class '(クラス名)' has no 'objects' member ...
- pip install pylint-django
- vscode の 設定 → ユーザー設定 (setting.json) に以下を記述
"python.linting.pylintArgs": [
"--load-plugins=pylint_django"
],
*** Django キャッシュクリア （データーベース更新時など） ...
-- from django.core.cache import cache
-- cache.clear()
munakata@muna-E450:~/code/python/vman/vmanhmi$ python ma...
Python 3.6.8 (default, Jan 14 2019, 11:02:34)
[GCC 8.0.1 20180414 (experimental) [trunk revision 25938...
Type "help", "copyright", "credits" or "license" for mor...
(InteractiveConsole)
>>> from django.core.cache import cache
>>> cache.clear()
** View（ビジネスロジック） [#we18c449]
- Djangoのビューは以下の条件を満たす必要がある
-- request オブジェクトを(第一引数として)受け取る
-- callable であること
-- response オブジェクトを返す
- view には各アプリケーション内でデーターベース内のデータ...
- python の関数として定義する方法
- python の Class として定義し、（クラス名）.as_view() で...
** Template（Look & Feel の規定） [#xbe65980]
*** bootstrap4 の導入 [#w7165802]
- 1) [[bootstrap:https://getbootstrap.com/]]
- 2) [[jquery:http://jquery.com/]]
munakata@muna-E450:~/code/python/vman/vmanhmi$ tree
(project root)
├── fview (application root)
│ (snip)
│ ├── static <------ 各アプリの下に専用の css/js を配...
│ │ └── fview
│ │ ├── css
│ │ │ ├── bootstrap.min.css
│ │ │ └── bootstrap.min.css.map
│ │ └── js
│ │ ├── bootstrap.bundle.min.js
│ │ ├── bootstrap.bundle.min.js.map
│ │ ├── jquery-3.4.1.min.js
│ │ └── jquery-3.4.1.min.map
- 3) [[django-bootstrap4:https://pypi.org/project/django-...
pip3 install django-bootstrap4
munakata@muna-E450:~/code/python/vman/vmanhmi$ pip insta...
Collecting django-bootstrap4
Downloading https://files.pythonhosted.org/packages/02...
Building wheels for collected packages: django-bootstrap4
Running setup.py bdist_wheel for django-bootstrap4 ......
Stored in directory: /home/munakata/.cache/pip/wheels/...
Successfully built django-bootstrap4
Installing collected packages: django-bootstrap4
Successfully installed django-bootstrap4-0.0.8
- bootstrap4 ボタン [#tc3adc6f]
-- &ref(button1.jpg);
-- &ref(button2.jpg);
-- [[Bootstrap4に用意されているクラス【ボタン編】:https:/...
*** [[font-awesome:https://fontawesome.com/]] [#q83736bd]
- e-mail = g-mail
- pass = frex7785
- my kit ID = [[f70a45d16f:https://fontawesome.com/kits/f...
<script src="https://kit.fontawesome.com/f70a45d16f.js">...
- インストール
munakata@muna-E450:~/code/python/vman/vmanhmi$ pip insta...
munakata@muna-E450:~/code/python/vman/vmanhmi$ pipenv in...
- [[(参考URL) django-fontawesome-5 1.0.16:https://pypi.or...
*** choice に対応した専用フォーム（ラジオボタン、ドロップ...
- [[Djangoフォームを使ってみよう:https://eiry.bitbucket.i...
*** ページネーション [#ub08d1af]
- [[Django 1.0 Documents ペジネータ (paginator):https://d...
- [[Django、ページング処理まとめ:https://narito.ninja/blo...
- [[Djangoで、前のデータ・次のデータを取得する:https://na...
*** url タグ（別画面へのリンク）= {% url '{namespace}:{na...
- namespace = プロジェクト全体の urls.py に指定された名前
- name = アプリケーションの urls.py に指定された名前
<a href="{% url 'fview:list_view' %}" class="btn btn-pri...
*** url タグでページ遷移する時に引数を渡す方法 [#p2504b5f]
- 第三引数に引数名、外側に該当する変数名を書く
<a href={% url 'app:table' table.id %}>{{ table.name }}<...
-[[Django - URLに引数を指定してページ遷移する:https://hir...
*** <a タグを使って別ページへのリンクを指定するときには v...
- 下記の例では fview:detail_view は view 内でメソッド関数...
<a scope="row" href="{% url 'fview:detail_view' fid=v...
- アプリケーションの urls.py で name= で規定した名前が UR...
- &color(red){ここでは urls.py 内で規定した name と view ...
*** 画面遷移を伴わない イベントによるデータ操作 [#heb74024]
- template に POST 処理を書いて view で受け取る
<form action="" method="POST">
{% csrf_token %}
<button type="submit" class="btn btn-outline-success...
</form>
- [[Djangoで、フォームの内容を保持する（セッションを使う...
*** {% csrf_token %} = クロスサイトリクエストフォージェリ...
- POST 処理がエラーとして誤検出されないようにする目的で追...
*** 画像の取扱い [#za579f2d]
- DJANGO は Instagram に使われているくらいなので写真のデ...
- 画像を扱うには pillow というライブラリが必要
munakata@muna-E450:~/code/python/vmanhmi/fview/templates...
Collecting pillow
Using cached https://files.pythonhosted.org/packages/d...
Installing collected packages: pillow
Successfully installed pillow-6.0.0
-- プロジェクトルートディレクトリに media ディレクトリー...
-- settings.py に以下の行を追加
# media file for "pillow"
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
-- ルート URL ルーティングファイル (urls.py) に以下の行を...
# To support media directory path finding
from . import settings
from django.contrib.staticfiles.urls import static
from django.contrib.staticfiles.urls import staticfiles_...
urlpatterns += staticfiles_urlpatterns()
urlpatterns += static(settings.MEDIA_URL, document_root=...
-- model に画像を扱うための設定を追加（upload_toを’docume...
class Document(models.Model):
description = models.CharField(max_length=255, blank...
photo = models.ImageField(upload_to='documents/', de...
uploaded_at = models.DateTimeField(auto_now_add=True)
ImageField 型を宣言することが重要な意味を持つ
--- データが画像データであるかの validity check が行われる
--- 更に実際の画像データ（バイナリー）はデーターベースに...
- 参考 URL
-- [[Display Image in a Django Template (using ImageField...
-- [[Djangoで画像アップローダを作る:https://hombre-nuevo....
-- [[画像をアップロードして表示する:https://ymgsapo.com/2...
*** 画面分割 = boostrap4 のグリッドシステム [#u1287e3b]
- container 領域内を水平方向に 12分割 された領域に画面を...
- &ref(twelve-sectors2.jpg);
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
</div>
<div class="col-lg-4"></div>
</div>
</div>
- &ref(layout-example2.jpg);
- [[Bootstrapのグリッドシステムの使い方を初心者に向けてお...
** [[django/channels (非同期処理拡張):https://github.com/...
- [[公式ドキュメント（英語）:https://channels.readthedocs...
*** [[コンセプト (Django ChannelsでできるリアルタイムWeb ...
-- &ref(ASGI_0.jpg);
-- &ref(ASGI_1.jpg);
*** インストール [#i436d49e]
(vman) munakata@muna-E450:~/code/python/vman$ pip3 insta...
- [[radis をインストール:https://symfoware.blog.fc2.com/b...
munakata@mvc:~$ sudo apt install redis
munakata@mvc:~$ redis-server -v
Redis server v=4.0.9 sha=00000000:0 malloc=jemalloc-3.6....
munakata@mvc:~$ ss -nlt
State Recv-Q Send-Q ...
LISTEN 0 128 ...
(snip)
LISTEN 0 128 ...
-- [[Redisのインストール・セットアップ (自動起動の設定な...
- routing.py をプロジェクト直下（アプリの下ではなく）に作成
from channels.routing import ProtocolTypeRouter
application = ProtocolTypeRouter({
# (http->django views is added by default)
})
- setting.py の installed apps に channels を追加
INSTALLED_APPS = [
'channels',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'fview',
'bootstrap4',
'fontawesome_5',
]
- channels 2.0 では (参考にした記事で使っている) delay s...
Delay server
If you used the delay server before to put things on hol...
class PingConsumer(AsyncConsumer):
async def websocket_receive(self, message):
await asyncio.sleep(1)
await self.send({
"type": "websocket.send",
"text": "pong",
})
- setting.py に ASGI (=Asynchronous Server Gateway Interf...
# websocket (channels) のために ASGIの起点を指定
ASGI_APPLICATION = 'vmanhmi.routing.application'
- runserver 時にASGI が有効になっている事を確認する
System check identified no issues (0 silenced).
July 20, 2019 - 15:43:38
Django version 2.2.2, using settings 'vmanhmi.settings'
Starting ASGI/Channels version 2.2.0 development server ...
Quit the server with CONTROL-C.
- ASGI サーバーが起動するようになって以降、web サーバーを...
Listen failure: Couldn't listen on 127.0.0.1:8000: [Errn...
-- lsof -i:(ポート番号) で 8000番ポートを使っているプロセ...
munakata@muna-E450:~/code/python/vman/vmanhmi$ lsof -i:8...
COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE N...
chrome 3143 munakata 57u IPv4 57585 0t0 TCP l...
python3 4055 munakata 26u IPv4 57446 0t0 TCP l...
python3 4055 munakata 29u IPv4 57621 0t0 TCP l...
python3 4055 munakata 30u IPv4 55067 0t0 TCP l...
python3 4055 munakata 31u IPv4 58463 0t0 TCP l...
python3 4055 munakata 32u IPv4 57175 0t0 TCP l...
munakata@muna-E450:~/code/python/vman/vmanhmi$ sudo kill...
munakata@muna-E450:~/code/python/vman/vmanhmi$ lsof -i:8...
COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE N...
python3 4055 munakata 26u IPv4 57446 0t0 TCP l...
python3 4055 munakata 29u IPv4 57621 0t0 TCP l...
python3 4055 munakata 30u IPv4 55067 0t0 TCP l...
python3 4055 munakata 31u IPv4 58463 0t0 TCP l...
python3 4055 munakata 32u IPv4 57175 0t0 TCP l...
-- が、LISTREN ポートのプロセスが死なない。 &color(red){k...
munakata@muna-E450:~/code/python/vman/vmanhmi$ kill -s Q...
munakata@muna-E450:~/code/python/vman/vmanhmi$ lsof -i:8...
*** [[websocket の基本:http://yagisuke.hatenadiary.com/en...
- WebSocketはフレーム探知で送受信しますが、相手が決まって...
- WebSocketが他のHTTPベースのプロトコル異なるのは「ステー...
- 通信はサーバーが受信を受けている状態で、必ずクライアン...
*** python プログラムから Websocket を利用する方法 [#w401...
- Websocket は通常は Java Script の中で送受信するが、今回...
- python で websocket を使うためのライブラリーは2種類 (we...
- [[python websockets API1 (websocket-client):https://pyp...
- [[python websockets API2 (websockets):https://pypi.org/...
-- pip install websockets
--- Here’s how a client sends and receives messages:
#!/usr/bin/env python
import asyncio
import websockets
async def hello(uri):
async with websockets.connect(uri) as websocket:
await websocket.send("Hello world!")
await websocket.recv()
asyncio.get_event_loop().run_until_complete(
hello('ws://localhost:8765'))
--- And here’s an echo server:
#!/usr/bin/env python
import asyncio
import websockets
async def echo(websocket, path):
async for message in websocket:
await websocket.send(message)
asyncio.get_event_loop().run_until_complete(
websockets.serve(echo, 'localhost', 8765))
asyncio.get_event_loop().run_forever()
*** Channels (ワーカーと consumer 間の通信のは channel を...
- backscan_worker.py (← manage.py のカスタムコマンド）を ...
- そのままでは &color(red){backscan_worker は Radis バッ...
munakata@muna-E450:~/code/python/vman/vmanhmi$ python3 m...
[16/Aug/2019 16:05:22] INFO [django.channels.worker:40] ...
(snip)
File "/home/munakata/code/python/vman/lib/python3.6/site...
"No application configured for scope type %r" % scope["t...
ValueError: No application configured for scope type 'ch...
- そんな事はない。1つの websocket 接続で複数の通信をハン...
-- [[How to use multiple websocket connections using Djan...
from django.conf.urls import url
from channels.routing import ProtocolTypeRouter, URLRouter
from channels.auth import AuthMiddlewareStack
application = ProtocolTypeRouter({
# WebSocket chat handler
"websocket": AuthMiddlewareStack(
URLRouter([
url(r"^first_application/stream/$", app_2_co...
url(r"^second_application/stream/$", app_2_c...
])
),
})
- 参考 URL
-- [[Django Channels - Cannot send event to a consumer As...
-- [[How to use ChannelNameRouter to communicate between ...
*** channels group_send を使った同期（イベント一斉送信） ...
- backscan_worker (Django custom command, standalone pyth...
- manage.py runworker backscan_worker prog-sync (=グルー...
- 結局 ブラウザー(=JavaScript) ⇔ Consumer 間とは別に ワー...
- WebSocket にはアドレス情報を付加できない（組み込まれて...
- Consumer の中で別々のハンドラーを用意し、その間を group...
- group_send は非同期処理になるので async_to_sync で命令...
- それぞれのハンドラーに対して、明示的にグループへの登録...
-- グループへの参加
def connect(self):
#print("websocket [browser] connected >>>>>")
self.accept()
async_to_sync(self.channel_layer.group_add)("fvi...
-- グループからの離脱
def disconnect(self, close_code):
print("Web socket [browser] disconnect code = ["...
async_to_sync(self.channel_layer.group_discard)(...
self.close()
- group_send 時には グループ名、type、メッセージ本体を指...
-- type は アプリ名.タイプ名 の形を指定する
-- アプリ名_タイプ名 の名前の ハンドラーを別に用意する （...
--- https://github.com/andrewgodwin/channels-examples/blo...
*** 参考 URL [#mba8e51e]
-- [[Django 2.0 + Channels 2.xを使ってWebSocketを扱う(そ...
-- [[Django 2.0 + Channels 2.xを使ってWebSocketを扱う(そ...
-- [[Django 2.0 + Channels 2.xを使ってWebSocketを扱う(そ...
-- [[Django 2.0 + Channels 2.1 でチュートリアルやっていく...
-- [[Django 2.0 + Channels 2.1 でチュートリアルやっていく...
-- [[Django 2.0 + Channels 2.1 でチュートリアルやっていく...
-- [[Django を WebSocket サーバにする:https://qiita.com/e...
-- [[REAL-TIME PROGRESS UPDATES WITH DJANGO CHANNELS:http...
--- &ref(The Fool - real-time progress updates with djang...
-- [[Django, Background Processes, and Keeping Users in t...
-- [[Finally, Real-Time Django Is Here: Get Started with ...
-- [[Getting Started with Django Channels:https://realpyt...
-- [[Django Channels — Talking to Channels from my non-Dj...
-- [[Sending messages to groups in Django Channels 2:http...
** Java Script から view を呼び出す [#u0378c2c]
*** 参考 URL [#g0a51c67]
- [[Djangoでリダイレクトのレスポンスを返してJavaScript(JS...
** [[subprocess.Popenによる詳細な外部プログラムの実行:htt...
通常はcheck_allやcheck_output（およびrun）などを使えばよ...
# -- test.py --
from time import sleep
print('child start!')
sleep(1)
print('child end!')
# -- main.py --
import subprocess
print('parent start!')
ps = subprocess.Popen(['python','test.py'])
print('parent end!')
$ py main.py
parent start!
parent end!
child start!
child end!
** [[Django アプリの中から 重い処理を別の実行プロセスに登...
- Celery は非同期処理の登録の方法として使えるが（理解が正...
- が処理の途中経過を通知する（=同期する）手段は提供されな...
-&ref(cerely_60.jpg);
-- Task = 非同期処理をひとかたまりにまとめたもの。ブラウ...
-- Queue = タスクを格納する入れ物です。構造が先入れ先出し...
-- Producer = タスクを作成してブローカーに渡す役割を持っ...
-- Broker = タスクをキューに登録したり、登録されたタスク...
-- Woker = ブローカーによってキューから取り出されたタスク...
-&ref(cerely2_60.jpg);
*** [[やりたい実装 例:https://stackoverflow.com/questions...
- &ref(django_woker.JPG);
*** wscat (websocket テストツール) [#ucf2e2ee]
- インストール（node.js のツールなので npm でインストー...
munakata@muna-E450:~/code/python/vman/vmanhmi$ sudo npm ...
/usr/local/lib
└── ws@7.1.1
- サーバーに接続
*** python プログラム内で別の python プログラムを起動する...
- 実現方法
-- os.fork
import os
if os.fork()==0:
long_process()
else:
return HttpResponse()
-- subprocess
import subprocess
p = subprocess.Popen([sys.executable, '/path/to/script.p...
stdout=subprocess.PI...
stderr=subprocess.ST...
(where the script is likely to be a manage.py command)
-- threads
import threading
t = threading.Thread(target=long_process,
args=args,
kwargs=kwargs)
t.setDaemon(True)
t.start()
return HttpResponse()
--- &color(red){Due to the Global Interpreter Lock, in CP...
-- multiprocessing
from multiprocessing import Process
p = Process(target=_bulk_action,args=(action,objs))
p.start()
return HttpResponse()
- python interpreter には thread scheduler が無い。 故に...
- これを GIL (Global Interpreter Lock) 問題とよぶ
- python で並列化を実現するにはプロセス単位で実行を分ける...
- 参考 URL
-- [[Django long running asynchronous tasks with threads/...
--- &ref(django-threads.pdf);
-- [[PythonのGILについて簡単に調べてみました:https://blog...
-- [[[Python] multiprocessing 備忘録:http://note.crohaco....
*** [[Integrating a data producer as worker to Django Cha...
*** [[(WebSocket を使わない方法) Djangoで、進捗表示する:h...
** Ajax (Javascript 内でクライアント内での動的ページ書き...
*** Ajax の概念 [#kb87dae9]
- Ajax = Asynchronous JavaScript + XML、&color(red){XMLHt...
-- Ajaxを利用すれば、サーバーから必要な情報だけを取得えき...
-- [[AJAX in a nutshell の説明:https://hackernoon.com/aja...
--- &ref(ajax_dialog2.jpg);
-- [[django#AJAX の説明:https://qiita.com/soup01/items/f3...
--- まずイベントがWEB PAGEの中に発生。（例えばPAGEがLOAD...
--- JavascriptはXMLHttpRequestオブジェクトを生成。
--- XMLHttpRequestはWEB Serverに要求を送る。
--- サーバー側が要求を処理する。
--- サーバー側が返事する。
--- Javascriptが返事内容をEncodeする。
--- 画面が変わる。
-- という事は、実際には多くの Web アプリケーションで Ajax...
-- Ajaxアプリケーションでは &color(red){動的にページの一...
-- こうした問題を解決するために Jquerry 等のアプリケーシ...
--- [[jQuery:https://jquery.com/]]
--- [[Google Web Toolkit:http://www.gwtproject.org/]]
--- [[Prototype JavaScript Framework:http://prototypejs.o...
- Javascript 内の script セクションに Ajax 処理を追記する
- Jquerry を使った簡易記述を利用することができる（一般的...
- Django の場合、実際のページ書き換え（クライアント内での...
*** jQuerry (= Javascript Library) [#h27e77c4]
- jQueryでスクリプトを書くときには &color(red){まずready...
- jQueryを利用したスクリプトでは、
-- &color(red){（1）$("...")の内側にどの(X)HTMLの要素を操...
-- &color(red){（2）その後ろに .(ドット) で処理の内容 (=j...
$(function(){
$("セレクター").jQueryの命令
})
- jQuerry で Ajax を使う場合の記述方法は異なる
-- ajax()にはセレクターの指定はない
-- $. で始まり、括弧内の {...} に設定（オプション）を記述
-- 設定は左側に項目名を、右側には項目に対応する値を記述し...
-- 複数の設定は ,(カンマ)区切りでつなげていきます。
-- データーの取得に成功すると、取得内容は function(data){...
-- success にはデータ取得成功時に実行する処理を function(...
$.ajax({
url: '取得するXMLファイル',
dataType: 'xml',
success : function(data){
//取得したファイルに対する処理
}
})
- セレクター 一覧
|名称|書式|指定対象|h
|>|>|BGCOLOR(#5f9ef0):CSSでよく利用されるセレクター|
|要素セレクター|$("要素名")|特定のhtml要素|
|IDセレクター|$("#ID名")|特定のid属性の値を持つ要素|
|クラスセレクター|$(".クラス名")|特定のclass属性の値を持...
|子孫セレクター|$("要素1 要素2")|特定の要素の内側にある要...
|ユニバーサルセレクター|$("*")|すべての要素|
|>|>|BGCOLOR(#5f9ef0):CSS2のセレクター|
|グループセレクター|$("セレクター1,セレクター2,...")|複数...
|子セレクター|$("親要素名 > 子要素名")|特定の要素の直下の...
|隣接セレクター|$("要素1 + 要素2")|特定の要素の次の要素|
|first-child擬似クラス|$("要素:first-child")|特定の要素内...
|>|>|BGCOLOR(#5f9ef0):CSS3のセレクター|
|間接セレクター|$("要素1 ~ 要素2")|特定の要素の後に出現す...
|否定擬似クラス|$("要素1:not(要素2)")|特定の要素内の指定...
|empty擬似クラス|$("要素:empty")|子要素やテキストを含まな...
|nth-child擬似クラス|$("要素:nth-child(番号)")|特定の要素...
|last-child擬似クラス|$("要素:last-child")|特定の要素内の...
|only-child擬似クラス|$("要素:only-child")|指定した要素が...
|>|>|BGCOLOR(#5f9ef0):CSSの属性セレクター|
|[attribute]|$("[属性名]")|特定の属性を持つ要素|
|[attribute='value']|$("[属性名='値']")|特定の属性が指定...
|[attribute!='value']|$("要素名[属性名!='値']")|特定の属...
|[attribute^='value']|$("[属性名^='値']")|特定の属性が特...
|[attribute$='value']|$("[属性名$='値']")|特定の属性が特...
|[attribute*='value']|$("[属性名*='値']")|特定の属性が特...
|[attributeFilter1][attributeFilter2]|$("[属性セレクター1...
|>|>|BGCOLOR(#5f9ef0):jQueryの独自フィルター|
|firstフィルター|$("要素:first")|指定した要素の最初の要素|
|lastフィルター|$("要素:last")|指定した要素の最後の要素|
|evenフィルター|$("要素:even")|指定した要素の偶数番目の要...
|oddフィルター|$("要素:odd")|指定した要素の奇数番目の要素|
|eqフィルター|$("要素:eq(番号)")|指定した番号の要素（番号...
|gtフィルター|$("要素:gt(番号)")|指定した番号より後の要素...
|ltフィルター|$("要素:lt(番号)")|指定した番号より前の要素...
|headerフィルター|$("要素:header")|h1～h6までのheader要素|
|containsフィルター|$("要素:contains(文字列)")|特定の文字...
|hasフィルター|$("要素1:had(要素2)")|特定の要素が含まれて...
|parentフィルター|$("要素:parent")|子要素やテキストを含む...
*** jQuerry UI [#vd5f8349]
- jQuery UIは、jQuery のユーザー・インターフェイス（UI）...
- [[jQuery UIを利用するには？:https://www.buildinsider.ne...
- jQuery UI project は &color(red){2016年9月の [[ver.1.12...
- jQuery UI 1.12.1 は &color(red){jQuery 1.7.0 – 3.1.0}; ...
- 今回は Ajax + jQuery 環境で jQuery UI が提供する progre...
- jQuery UIで提供されているコンポーネント
|分類|コンポーネント名|概要|h
|Interactions|Draggable|ドラッグ可能な要素を定義|
|~|Droppable|ドロップ可能な要素を定義|
|~|Resizable|サイズ変更可能な要素を定義|
|~|Selectable|マウス操作で選択可能な要素を定義|
|~|Sortable|並べ替え可能な要素を定義|
|Widgets|Accordion|アコーディオン・パネル|
|~|Autocomplete|オート・コンプリート機能付きのテキストボ...
|~|Button|ボタンやリンク、ラジオボタンなどからボタンを生成|
|~|Datepicker|日付入力ボックスを生成|
|~|Dialog|汎用的なダイアログを生成|
|~|Menu|展開可能なリッチ・メニューを生成|
|~|Progressbar|進捗（しんちょく）バーを生成|
|~|Slider|スライダーを生成|
|~|Spinner|アップダウン・ボタンを伴う数値入力ボックスを生...
|~|Tabs|タブ・パネルを生成|
|~|Tooltip|ツールチップを生成|
|Effects|Effect|基本的なエフェクトを提供|
|~|Show／Hide／Toggle|要素の表示／非表示にエフェクトを適用|
|~|Add／Remove／Toggle／Switch Class|スタイル・クラスの適...
|~|Color Animation|色を徐々に変化させるエフェクトを提供|
- [[jQuery UI Progressbar 仕様:https://api.jqueryui.com/p...
- 参考 URL
-- [[ASCII 初めてのjQuery：セレクターAPIを一挙解説（前編...
-- [[ASCII 初めてのjQuery：セレクターAPIを一挙解説（後編...
-- [[ASCII jQueryによるフォームのデザインの基礎（前編）:h...
-- [[ASCII jQueryによるフォームのデザインの基礎（後編）:h...
-- [[ASCII jQueryでAjaxを利用する基本チュートリアル:https...
-- [[:]]
*** 参考 URL [#i5d1b223]
- [[:]]
- [[:]]
- [[:]]
- [[jQuery日本語リファレンス（Ajax/API/jQuery）:http://se...
- [[Django クロスサイトリクエストフォージェリ (CSRF) 対策...
- [[s-cookie/js-cookie:https://github.com/js-cookie/js-co...
- [[:]]
- [[:]]
** vscode を使ったデバッグ [#x9aada46]
- vscode 全般の説明は [[VsCode]] にまとめている
- vscode を使ってdjango のデバッグができる。
-- vscode のデバッガー設定で python django を選択する
-- デバッガーの RUN コマンド（緑色の矢印ボタン）でサーバ...
-- ブラウザーでアプリを起動してブレークポイントにヒットす...
** 参考 URL [#u00645c3]
-- [[Python Django入門 (1) Django イントロ:https://qiita....
-- [[Python Django入門 (2) install mac編:https://qiita.c...
-- [[Python Django入門 (3) Django 導入～Admin ツール:http...
-- [[Python Django入門 (4) bootstrap による Web 画面作成:...
-- [[Djangoチュートリアル - 汎用業務Webアプリを最速で作る...
-- [[IT技術相互 Python Django の使い方:https://jpn.itlibr...
-- [[Djangoを最速でマスターする part1:https://qiita.com/g...
-- [[Djangoを最速でマスターする part2:https://qiita.com/g...
-- [[Django入門編 (paiza トレーニング):https://paiza.jp/w...
終了行:
#contents
** インストールとプロジェクトの初期化、アプリの初期化 [#v...
*** インストール [#l192eb6c]
[local] munakata:~/source/python/vlman$ pip3 install dja...
[local] munakata:~/source/python/vlman$ python3 -m djang...
2.2.2
*** PYTHONPATH の指定[#lb4d603c]
- vscode 上の lint が Django のパッケージが見つけられない...
- PYTHONPATH には pip show django を実行して location で...
- PYTHONPATH 自体は vscode の設定ファイル （プロジェクト...
*** プロジェクト と アプリ の初期化 [#t5ca0f8e]
[local] munakata:~/source/python/vlman$ django-admin sta...
[local] munakata:~/source/python/vlman/vlmanui$ django-a...
*** 管理用ユーザーの登録 [#p6099483]
[local] munakata:~/source/python/vlman/vlmanui$ python3 ...
Username (leave blank to use 'munakata'):
Email address: magu775@gmail.com
Password:
Password (again):
Superuser created successfully.
*** timezone とロケールの設定 (settings.py) [#l8c0ab8b]
LANGUAGE_CODE = 'ja'
TIME_ZONE = 'Asia/Tokyo'
*** インストール完了時のディレクトリー構造 [#n21cb74e]
- プロジェクトの下にアプリケーションを追加していく構造
[local] munakata:~/source/python/vlman$ tree
.
├── video_top
│ ├── sample_A.mp4
├── vlman.py
├── vlmandb.sqbpro
├── vlmandb.sqlite3
├── file_viewer <--------- application definition
│ ├── __init__.py
│ ├── admin.py
│ ├── apps.py
│ ├── migrations
│ │ └── __init__.py
│ ├── models.py <----------- database access definition
│ ├── tests.py
│ └── views.py <--------- look & feel definition
└── vlmanui <------------ total system settings
├── manage.py
└── vlmanui
├── __init__.py
├── settings.py <---------- application directory
├── urls.py <------------ URL entry point defin...
└── wsgi.py
** django ビルトイン管理ツール（= manage.py) [#i85b1ed8]
- ビルトイン Web サーバーの起動
[local] munakata:~/source/python/vlman/vlmanui$ python3 ...
*** カスタムコマンドの追加 [#q3ed478e]
- BaseCommand クラスもしくはその サブクラス の一つを継承...
- python プログラム名がコマンド名になる（但し実行時に .py...
- プログラムを配置する場所は決まっている ( アプリ/managem...
- プログラム引数は def add_arguments(self, parser): とい...
- プログラム実体は def handle(self, *args, **kwargs): と...
- 参考 URL
-- [[カスタム django-admin コマンドの実装 (Django 公式マ...
-- [[argparse --- コマンドラインオプション、引数、サブコ...
*** python argument parser (argpaser) [#ebe69f6f]
- [[Argparse チュートリアル (python 公式チュートリアル):h...
- [[argparseの引数と設定例について調べてみた:https://kami...
-- [[argparseでコマンドライン引数を使ってみよう！:https:/...
-- ArgumentParser()の引数
ArgumentParser([description][, epilog][, prog][, usage][...
|引数|デフォルト値|概要|h
|prog|sys.argv[0]|プログラム名 (デフォルト: sys.argv[0])|
|usage|パーサーに追加された引数から生成される|プログラム...
|description|None|引数のヘルプの前に表示されるテキスト|
|epilog|None|引数のヘルプの後で表示されるテキスト|
|parents|???|ArgumentParser オブジェクトのリストで、この...
|formatter_class|???|ヘルプ出力をカスタマイズするためのク...
|prefix_chars|‘-‘|オプションの引数の prefix になる文字集...
|fromfile_prefix_chars|None|追加の引数を読み込むファイル...
|argument_default|None|引数のグローバルなデフォルト値|
|conflict_handler|???|衝突するオプションを解決する方法 (...
|add_help|True|-h/–help オプションをパーサーに追加する|
-- add_argument()の引数
add_argument(name or flags...[, action][, nargs][, const...
|引数|概要|h
|name or flags|名前か、あるいはオプション文字列のリスト (...
|action|コマンドラインにこの引数があった時のアクション|
|nargs|消費すべきコマンドライン引数の数|
|const|一部の action と nargs の組み合わせで利用される定数|
|default|コマンドラインに引数がなかった場合に生成される値|
|type|コマンドライン引数が変換されるべき型|
|choices|引数として許される値のコンテナー|
|required|コマンドラインオプションが省略可能かどうか (オ...
|help|引数が何なのかを示す簡潔な説明|
|metavar|使用法メッセージの中で使われる引数の名前|
|dest|parse_args() が返すオブジェクトに追加される属性名|
-- nargsに設定できる値
|設定値|概要|h
|N|N 個の引数がコマンドラインから集められ、リストに格納さ...
|?|コマンドライン引数が存在しない場合、 default の値が生...
|*|全てのコマンドライン引数がリストに集められます|
|+|全てのコマンドライン引数がリストに集められます|
-- [[agrparse (関数の引数のパーシング関数):https://docs.p...
-- [[ArgumentParserの使い方を簡単にまとめた:https://qiita...
-- [[Python argparseの使い方:https://qiita.com/dodo5522/i...
-- [[ちょっとしたコマンドラインツールをpythonで作る時に便...
-- [[Djangoカスタムコマンドを作成し、引数を送る(type にカ...
** URL ディスパッチャー（パスコンバーターによるリインテリ...
path('abc/', include('(プロジェクト名).urls', name = 're...
-- http://aaa.com/abc/ の場合 abc/ の部分だけ記載する
-- include で各アプリの urls.py を読み込ませる
rpath(r'^abc*$', include('application name.urls'), name=...
-- 正規表現を使ってパス変換する場合には rpath を使うと py...
-- name で逆引き（ URL をハードコードしないで済むように名...
- （プロジェクトルート）／（プロジェクト名）／urls.py <-...
-- プロジェクト全体のルーティング設定を書く
- （プロジェクトルート）／（アプリケーションルート）／url...
-- 各アプリケーション毎のルーティング（＝view との対応関...
** Model (データー構造の定義） [#xb793560]
*** Django における DB の扱い方（SQL 文は一切使わなくても...
- DjangoではORM（オブジェクト関係マッピング）を使ってデー...
- DjangoのORMの実装は [[ActiveRecord:https://qiita.com/ki...
-- モデルを設計すればマイグレーション機能でDB定義を自動作...
-- SQLの記述は不要。モデルマネージャ経由でクエリを実行す...
-- クエリは人間に読みやすく命名されたマネージャメソッドの...
- [[Django データベース操作 についてのまとめ:https://qiit...
|大分類|小分類|メソッド|h
|全件取得する||all()|
|検索条件を指定|肯定|filter(**kwargs)|
|~|NOT条件|exclude(**kwargs)|
|~|IN条件の中身をリストで指定する|in_bulk(id_list=None, f...
|並び順を指定|昇順|order_by(*fields)|
||降順|reverse()|
|クエリセットからインスタンスを取得する|検索に一致したも...
|~|指定した日付順で最新のもの|latest(*fields)|
|~|指定した日付順で最古のもの|earliest(*fields)|
|~|クエリセットの先頭|first()|
|~|クエリセットの最後|last()|
|レコードを新規登録する|新規登録|create(**kwargs)|
|~|条件に一致するものを取得、無い場合は新規登録して取得|g...
|~|条件に一致するものを更新、無い場合は新規登録|update_or...
|一括登録する||bulk_create(objs, batch_size=None)|
|一括更新する||update(**kwargs)|
|一括削除する|| delete()|
|特定のフィールドを集計する|テーブル内の集計|aggregate(*a...
|参照先テーブルの集計||annotate(*args, **kwargs)|
|該当のレコード件数||count()|
|抽出したレコードから重複の無い日付配列を作る||dates(fiel...
|抽出したレコードから重複の無い時刻配列を作る||datetimes(...
|クエリセットの存在チェックをする||exists()|
|インスタンスの一部だけを取得|結果を辞書のリストで取得す...
|結果をタプルのリストで取得する||values_list(*fields, fla...
|特定のフィールドの重複無しリストを作る||distinct(*fields)|
|SQLを直接実行する|SQLを直に設定する（一部）|extra(select...
|~|SQLを直に設定する（全部）|raw(raw_query, params=None, ...
|クエリセット同士の集合演算をする|和集合|union(*other_qs,...
|~|積集合|intersection(*other_qs)|
|~|差集合|difference(*other_qs)|
|パフォーマンスチューニング キャッシング|SQLのJOIN句を使...
|~|関係先を先行取得してキャッシュする。1-N、N-Nで有効。|p...
|パフォーマンスチューニング 重いカラムを取得しない|指定カ...
||指定カラムだけ取得する|only(*fields)|
|パフォーマンスチューニング 巨大なテーブルをループで扱う|...
|データベースのレコードロックを使う||select_for_update(no...
|デフォルト以外のデータベースを使う||using(alias)|
|空のクエリセットを作る||none()|
*** Django 外で作成した DB を利用するには制約がある場合も...
- &color(red){DJANGO で利用するデーターベースは model の...
- [[モデルフィールド 設定テンプレート:https://qiita.com/o...
- &color(red){DJANGO からデーターベースを操作する場合には...
-- [[データベース操作まとめ:https://e-tec-memo.herokuapp....
*** model と DB の同期処理 （＝migration) [#z77f6ca2]
- &color(red){モデル変更時には以下のコマンドでデータベー...
-- python3 manage.py makemigrations (アプリケーション名)
-- python3 manage.py migrate
[local] munakata:~/source/python/vlman/vlmanui$ python3 ...
Migrations for 'fview':
fview/migrations/0001_initial.py
- Create model Filedir
[local] munakata:~/source/python/vlman/vlmanui$ python3 ...
Operations to perform:
Apply all migrations: admin, auth, contenttypes, fview...
Running migrations:
Applying contenttypes.0001_initial... OK
Applying auth.0001_initial... OK
Applying admin.0001_initial... OK
Applying admin.0002_logentry_remove_auto_add... OK
Applying admin.0003_logentry_add_action_flag_choices.....
Applying contenttypes.0002_remove_content_type_name......
Applying auth.0002_alter_permission_name_max_length......
Applying auth.0003_alter_user_email_max_length... OK
Applying auth.0004_alter_user_username_opts... OK
Applying auth.0005_alter_user_last_login_null... OK
Applying auth.0006_require_contenttypes_0002... OK
Applying auth.0007_alter_validators_add_error_messages...
Applying auth.0008_alter_user_username_max_length... OK
Applying auth.0009_alter_user_last_name_max_length... OK
Applying auth.0010_alter_group_name_max_length... OK
Applying auth.0011_update_proxy_permissions... OK
Applying fview.0001_initial... OK
Applying sessions.0001_initial... OK
- migration のリセット
-- アプリケーションディレクトリーにある migrations という...
-- キャッシュデータのクリア
(vman) munakata@muna-E450:~/code/python/vman/vmanhmi$ py...
Python 3.6.8 (default, Jan 14 2019, 11:02:34)
[GCC 8.0.1 20180414 (experimental) [trunk revision 25938...
Type "help", "copyright", "credits" or "license" for mor...
(InteractiveConsole)
>>> from django.core.cache import cache
>>> cache.clear()
-- データーベースの中の django_migrations というテーブル...
sqlite> select * from django_migrations; <------- 該当...
sqlite> delete from django_migrations where app='fview (...
sqlite>.exit
(vman) munakata@muna-E450:~/code/python/vman/vmanhmi$ py...
(vman) munakata@muna-E450:~/code/python/vman/vmanhmi$ py...
-- manage.py showmigrations で該当アプリのマイグレーショ...
-- manage.py makemigrations (アプリ名） で明示的にアプリ...
(vman) munakata@muna-E450:~/code/python/vman/vmanhmi$ py...
-- それでも migrate 処理がエラーになる場合には fake migra...
(vman) munakata@muna-E450:~/code/python/vman/vmanhmi$ py...
(vman) munakata@muna-E450:~/code/python/vman/vmanhmi$ py...
-- [[(参考) manage.py migrateをおかしな感じにやってしまっ...
*** pylint の Class '(クラス名)' has no 'objects' member ...
- pip install pylint-django
- vscode の 設定 → ユーザー設定 (setting.json) に以下を記述
"python.linting.pylintArgs": [
"--load-plugins=pylint_django"
],
*** Django キャッシュクリア （データーベース更新時など） ...
-- from django.core.cache import cache
-- cache.clear()
munakata@muna-E450:~/code/python/vman/vmanhmi$ python ma...
Python 3.6.8 (default, Jan 14 2019, 11:02:34)
[GCC 8.0.1 20180414 (experimental) [trunk revision 25938...
Type "help", "copyright", "credits" or "license" for mor...
(InteractiveConsole)
>>> from django.core.cache import cache
>>> cache.clear()
** View（ビジネスロジック） [#we18c449]
- Djangoのビューは以下の条件を満たす必要がある
-- request オブジェクトを(第一引数として)受け取る
-- callable であること
-- response オブジェクトを返す
- view には各アプリケーション内でデーターベース内のデータ...
- python の関数として定義する方法
- python の Class として定義し、（クラス名）.as_view() で...
** Template（Look & Feel の規定） [#xbe65980]
*** bootstrap4 の導入 [#w7165802]
- 1) [[bootstrap:https://getbootstrap.com/]]
- 2) [[jquery:http://jquery.com/]]
munakata@muna-E450:~/code/python/vman/vmanhmi$ tree
(project root)
├── fview (application root)
│ (snip)
│ ├── static <------ 各アプリの下に専用の css/js を配...
│ │ └── fview
│ │ ├── css
│ │ │ ├── bootstrap.min.css
│ │ │ └── bootstrap.min.css.map
│ │ └── js
│ │ ├── bootstrap.bundle.min.js
│ │ ├── bootstrap.bundle.min.js.map
│ │ ├── jquery-3.4.1.min.js
│ │ └── jquery-3.4.1.min.map
- 3) [[django-bootstrap4:https://pypi.org/project/django-...
pip3 install django-bootstrap4
munakata@muna-E450:~/code/python/vman/vmanhmi$ pip insta...
Collecting django-bootstrap4
Downloading https://files.pythonhosted.org/packages/02...
Building wheels for collected packages: django-bootstrap4
Running setup.py bdist_wheel for django-bootstrap4 ......
Stored in directory: /home/munakata/.cache/pip/wheels/...
Successfully built django-bootstrap4
Installing collected packages: django-bootstrap4
Successfully installed django-bootstrap4-0.0.8
- bootstrap4 ボタン [#tc3adc6f]
-- &ref(button1.jpg);
-- &ref(button2.jpg);
-- [[Bootstrap4に用意されているクラス【ボタン編】:https:/...
*** [[font-awesome:https://fontawesome.com/]] [#q83736bd]
- e-mail = g-mail
- pass = frex7785
- my kit ID = [[f70a45d16f:https://fontawesome.com/kits/f...
<script src="https://kit.fontawesome.com/f70a45d16f.js">...
- インストール
munakata@muna-E450:~/code/python/vman/vmanhmi$ pip insta...
munakata@muna-E450:~/code/python/vman/vmanhmi$ pipenv in...
- [[(参考URL) django-fontawesome-5 1.0.16:https://pypi.or...
*** choice に対応した専用フォーム（ラジオボタン、ドロップ...
- [[Djangoフォームを使ってみよう:https://eiry.bitbucket.i...
*** ページネーション [#ub08d1af]
- [[Django 1.0 Documents ペジネータ (paginator):https://d...
- [[Django、ページング処理まとめ:https://narito.ninja/blo...
- [[Djangoで、前のデータ・次のデータを取得する:https://na...
*** url タグ（別画面へのリンク）= {% url '{namespace}:{na...
- namespace = プロジェクト全体の urls.py に指定された名前
- name = アプリケーションの urls.py に指定された名前
<a href="{% url 'fview:list_view' %}" class="btn btn-pri...
*** url タグでページ遷移する時に引数を渡す方法 [#p2504b5f]
- 第三引数に引数名、外側に該当する変数名を書く
<a href={% url 'app:table' table.id %}>{{ table.name }}<...
-[[Django - URLに引数を指定してページ遷移する:https://hir...
*** <a タグを使って別ページへのリンクを指定するときには v...
- 下記の例では fview:detail_view は view 内でメソッド関数...
<a scope="row" href="{% url 'fview:detail_view' fid=v...
- アプリケーションの urls.py で name= で規定した名前が UR...
- &color(red){ここでは urls.py 内で規定した name と view ...
*** 画面遷移を伴わない イベントによるデータ操作 [#heb74024]
- template に POST 処理を書いて view で受け取る
<form action="" method="POST">
{% csrf_token %}
<button type="submit" class="btn btn-outline-success...
</form>
- [[Djangoで、フォームの内容を保持する（セッションを使う...
*** {% csrf_token %} = クロスサイトリクエストフォージェリ...
- POST 処理がエラーとして誤検出されないようにする目的で追...
*** 画像の取扱い [#za579f2d]
- DJANGO は Instagram に使われているくらいなので写真のデ...
- 画像を扱うには pillow というライブラリが必要
munakata@muna-E450:~/code/python/vmanhmi/fview/templates...
Collecting pillow
Using cached https://files.pythonhosted.org/packages/d...
Installing collected packages: pillow
Successfully installed pillow-6.0.0
-- プロジェクトルートディレクトリに media ディレクトリー...
-- settings.py に以下の行を追加
# media file for "pillow"
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
-- ルート URL ルーティングファイル (urls.py) に以下の行を...
# To support media directory path finding
from . import settings
from django.contrib.staticfiles.urls import static
from django.contrib.staticfiles.urls import staticfiles_...
urlpatterns += staticfiles_urlpatterns()
urlpatterns += static(settings.MEDIA_URL, document_root=...
-- model に画像を扱うための設定を追加（upload_toを’docume...
class Document(models.Model):
description = models.CharField(max_length=255, blank...
photo = models.ImageField(upload_to='documents/', de...
uploaded_at = models.DateTimeField(auto_now_add=True)
ImageField 型を宣言することが重要な意味を持つ
--- データが画像データであるかの validity check が行われる
--- 更に実際の画像データ（バイナリー）はデーターベースに...
- 参考 URL
-- [[Display Image in a Django Template (using ImageField...
-- [[Djangoで画像アップローダを作る:https://hombre-nuevo....
-- [[画像をアップロードして表示する:https://ymgsapo.com/2...
*** 画面分割 = boostrap4 のグリッドシステム [#u1287e3b]
- container 領域内を水平方向に 12分割 された領域に画面を...
- &ref(twelve-sectors2.jpg);
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
</div>
<div class="col-lg-4"></div>
</div>
</div>
- &ref(layout-example2.jpg);
- [[Bootstrapのグリッドシステムの使い方を初心者に向けてお...
** [[django/channels (非同期処理拡張):https://github.com/...
- [[公式ドキュメント（英語）:https://channels.readthedocs...
*** [[コンセプト (Django ChannelsでできるリアルタイムWeb ...
-- &ref(ASGI_0.jpg);
-- &ref(ASGI_1.jpg);
*** インストール [#i436d49e]
(vman) munakata@muna-E450:~/code/python/vman$ pip3 insta...
- [[radis をインストール:https://symfoware.blog.fc2.com/b...
munakata@mvc:~$ sudo apt install redis
munakata@mvc:~$ redis-server -v
Redis server v=4.0.9 sha=00000000:0 malloc=jemalloc-3.6....
munakata@mvc:~$ ss -nlt
State Recv-Q Send-Q ...
LISTEN 0 128 ...
(snip)
LISTEN 0 128 ...
-- [[Redisのインストール・セットアップ (自動起動の設定な...
- routing.py をプロジェクト直下（アプリの下ではなく）に作成
from channels.routing import ProtocolTypeRouter
application = ProtocolTypeRouter({
# (http->django views is added by default)
})
- setting.py の installed apps に channels を追加
INSTALLED_APPS = [
'channels',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'fview',
'bootstrap4',
'fontawesome_5',
]
- channels 2.0 では (参考にした記事で使っている) delay s...
Delay server
If you used the delay server before to put things on hol...
class PingConsumer(AsyncConsumer):
async def websocket_receive(self, message):
await asyncio.sleep(1)
await self.send({
"type": "websocket.send",
"text": "pong",
})
- setting.py に ASGI (=Asynchronous Server Gateway Interf...
# websocket (channels) のために ASGIの起点を指定
ASGI_APPLICATION = 'vmanhmi.routing.application'
- runserver 時にASGI が有効になっている事を確認する
System check identified no issues (0 silenced).
July 20, 2019 - 15:43:38
Django version 2.2.2, using settings 'vmanhmi.settings'
Starting ASGI/Channels version 2.2.0 development server ...
Quit the server with CONTROL-C.
- ASGI サーバーが起動するようになって以降、web サーバーを...
Listen failure: Couldn't listen on 127.0.0.1:8000: [Errn...
-- lsof -i:(ポート番号) で 8000番ポートを使っているプロセ...
munakata@muna-E450:~/code/python/vman/vmanhmi$ lsof -i:8...
COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE N...
chrome 3143 munakata 57u IPv4 57585 0t0 TCP l...
python3 4055 munakata 26u IPv4 57446 0t0 TCP l...
python3 4055 munakata 29u IPv4 57621 0t0 TCP l...
python3 4055 munakata 30u IPv4 55067 0t0 TCP l...
python3 4055 munakata 31u IPv4 58463 0t0 TCP l...
python3 4055 munakata 32u IPv4 57175 0t0 TCP l...
munakata@muna-E450:~/code/python/vman/vmanhmi$ sudo kill...
munakata@muna-E450:~/code/python/vman/vmanhmi$ lsof -i:8...
COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE N...
python3 4055 munakata 26u IPv4 57446 0t0 TCP l...
python3 4055 munakata 29u IPv4 57621 0t0 TCP l...
python3 4055 munakata 30u IPv4 55067 0t0 TCP l...
python3 4055 munakata 31u IPv4 58463 0t0 TCP l...
python3 4055 munakata 32u IPv4 57175 0t0 TCP l...
-- が、LISTREN ポートのプロセスが死なない。 &color(red){k...
munakata@muna-E450:~/code/python/vman/vmanhmi$ kill -s Q...
munakata@muna-E450:~/code/python/vman/vmanhmi$ lsof -i:8...
*** [[websocket の基本:http://yagisuke.hatenadiary.com/en...
- WebSocketはフレーム探知で送受信しますが、相手が決まって...
- WebSocketが他のHTTPベースのプロトコル異なるのは「ステー...
- 通信はサーバーが受信を受けている状態で、必ずクライアン...
*** python プログラムから Websocket を利用する方法 [#w401...
- Websocket は通常は Java Script の中で送受信するが、今回...
- python で websocket を使うためのライブラリーは2種類 (we...
- [[python websockets API1 (websocket-client):https://pyp...
- [[python websockets API2 (websockets):https://pypi.org/...
-- pip install websockets
--- Here’s how a client sends and receives messages:
#!/usr/bin/env python
import asyncio
import websockets
async def hello(uri):
async with websockets.connect(uri) as websocket:
await websocket.send("Hello world!")
await websocket.recv()
asyncio.get_event_loop().run_until_complete(
hello('ws://localhost:8765'))
--- And here’s an echo server:
#!/usr/bin/env python
import asyncio
import websockets
async def echo(websocket, path):
async for message in websocket:
await websocket.send(message)
asyncio.get_event_loop().run_until_complete(
websockets.serve(echo, 'localhost', 8765))
asyncio.get_event_loop().run_forever()
*** Channels (ワーカーと consumer 間の通信のは channel を...
- backscan_worker.py (← manage.py のカスタムコマンド）を ...
- そのままでは &color(red){backscan_worker は Radis バッ...
munakata@muna-E450:~/code/python/vman/vmanhmi$ python3 m...
[16/Aug/2019 16:05:22] INFO [django.channels.worker:40] ...
(snip)
File "/home/munakata/code/python/vman/lib/python3.6/site...
"No application configured for scope type %r" % scope["t...
ValueError: No application configured for scope type 'ch...
- そんな事はない。1つの websocket 接続で複数の通信をハン...
-- [[How to use multiple websocket connections using Djan...
from django.conf.urls import url
from channels.routing import ProtocolTypeRouter, URLRouter
from channels.auth import AuthMiddlewareStack
application = ProtocolTypeRouter({
# WebSocket chat handler
"websocket": AuthMiddlewareStack(
URLRouter([
url(r"^first_application/stream/$", app_2_co...
url(r"^second_application/stream/$", app_2_c...
])
),
})
- 参考 URL
-- [[Django Channels - Cannot send event to a consumer As...
-- [[How to use ChannelNameRouter to communicate between ...
*** channels group_send を使った同期（イベント一斉送信） ...
- backscan_worker (Django custom command, standalone pyth...
- manage.py runworker backscan_worker prog-sync (=グルー...
- 結局 ブラウザー(=JavaScript) ⇔ Consumer 間とは別に ワー...
- WebSocket にはアドレス情報を付加できない（組み込まれて...
- Consumer の中で別々のハンドラーを用意し、その間を group...
- group_send は非同期処理になるので async_to_sync で命令...
- それぞれのハンドラーに対して、明示的にグループへの登録...
-- グループへの参加
def connect(self):
#print("websocket [browser] connected >>>>>")
self.accept()
async_to_sync(self.channel_layer.group_add)("fvi...
-- グループからの離脱
def disconnect(self, close_code):
print("Web socket [browser] disconnect code = ["...
async_to_sync(self.channel_layer.group_discard)(...
self.close()
- group_send 時には グループ名、type、メッセージ本体を指...
-- type は アプリ名.タイプ名 の形を指定する
-- アプリ名_タイプ名 の名前の ハンドラーを別に用意する （...
--- https://github.com/andrewgodwin/channels-examples/blo...
*** 参考 URL [#mba8e51e]
-- [[Django 2.0 + Channels 2.xを使ってWebSocketを扱う(そ...
-- [[Django 2.0 + Channels 2.xを使ってWebSocketを扱う(そ...
-- [[Django 2.0 + Channels 2.xを使ってWebSocketを扱う(そ...
-- [[Django 2.0 + Channels 2.1 でチュートリアルやっていく...
-- [[Django 2.0 + Channels 2.1 でチュートリアルやっていく...
-- [[Django 2.0 + Channels 2.1 でチュートリアルやっていく...
-- [[Django を WebSocket サーバにする:https://qiita.com/e...
-- [[REAL-TIME PROGRESS UPDATES WITH DJANGO CHANNELS:http...
--- &ref(The Fool - real-time progress updates with djang...
-- [[Django, Background Processes, and Keeping Users in t...
-- [[Finally, Real-Time Django Is Here: Get Started with ...
-- [[Getting Started with Django Channels:https://realpyt...
-- [[Django Channels — Talking to Channels from my non-Dj...
-- [[Sending messages to groups in Django Channels 2:http...
** Java Script から view を呼び出す [#u0378c2c]
*** 参考 URL [#g0a51c67]
- [[Djangoでリダイレクトのレスポンスを返してJavaScript(JS...
** [[subprocess.Popenによる詳細な外部プログラムの実行:htt...
通常はcheck_allやcheck_output（およびrun）などを使えばよ...
# -- test.py --
from time import sleep
print('child start!')
sleep(1)
print('child end!')
# -- main.py --
import subprocess
print('parent start!')
ps = subprocess.Popen(['python','test.py'])
print('parent end!')
$ py main.py
parent start!
parent end!
child start!
child end!
** [[Django アプリの中から 重い処理を別の実行プロセスに登...
- Celery は非同期処理の登録の方法として使えるが（理解が正...
- が処理の途中経過を通知する（=同期する）手段は提供されな...
-&ref(cerely_60.jpg);
-- Task = 非同期処理をひとかたまりにまとめたもの。ブラウ...
-- Queue = タスクを格納する入れ物です。構造が先入れ先出し...
-- Producer = タスクを作成してブローカーに渡す役割を持っ...
-- Broker = タスクをキューに登録したり、登録されたタスク...
-- Woker = ブローカーによってキューから取り出されたタスク...
-&ref(cerely2_60.jpg);
*** [[やりたい実装 例:https://stackoverflow.com/questions...
- &ref(django_woker.JPG);
*** wscat (websocket テストツール) [#ucf2e2ee]
- インストール（node.js のツールなので npm でインストー...
munakata@muna-E450:~/code/python/vman/vmanhmi$ sudo npm ...
/usr/local/lib
└── ws@7.1.1
- サーバーに接続
*** python プログラム内で別の python プログラムを起動する...
- 実現方法
-- os.fork
import os
if os.fork()==0:
long_process()
else:
return HttpResponse()
-- subprocess
import subprocess
p = subprocess.Popen([sys.executable, '/path/to/script.p...
stdout=subprocess.PI...
stderr=subprocess.ST...
(where the script is likely to be a manage.py command)
-- threads
import threading
t = threading.Thread(target=long_process,
args=args,
kwargs=kwargs)
t.setDaemon(True)
t.start()
return HttpResponse()
--- &color(red){Due to the Global Interpreter Lock, in CP...
-- multiprocessing
from multiprocessing import Process
p = Process(target=_bulk_action,args=(action,objs))
p.start()
return HttpResponse()
- python interpreter には thread scheduler が無い。 故に...
- これを GIL (Global Interpreter Lock) 問題とよぶ
- python で並列化を実現するにはプロセス単位で実行を分ける...
- 参考 URL
-- [[Django long running asynchronous tasks with threads/...
--- &ref(django-threads.pdf);
-- [[PythonのGILについて簡単に調べてみました:https://blog...
-- [[[Python] multiprocessing 備忘録:http://note.crohaco....
*** [[Integrating a data producer as worker to Django Cha...
*** [[(WebSocket を使わない方法) Djangoで、進捗表示する:h...
** Ajax (Javascript 内でクライアント内での動的ページ書き...
*** Ajax の概念 [#kb87dae9]
- Ajax = Asynchronous JavaScript + XML、&color(red){XMLHt...
-- Ajaxを利用すれば、サーバーから必要な情報だけを取得えき...
-- [[AJAX in a nutshell の説明:https://hackernoon.com/aja...
--- &ref(ajax_dialog2.jpg);
-- [[django#AJAX の説明:https://qiita.com/soup01/items/f3...
--- まずイベントがWEB PAGEの中に発生。（例えばPAGEがLOAD...
--- JavascriptはXMLHttpRequestオブジェクトを生成。
--- XMLHttpRequestはWEB Serverに要求を送る。
--- サーバー側が要求を処理する。
--- サーバー側が返事する。
--- Javascriptが返事内容をEncodeする。
--- 画面が変わる。
-- という事は、実際には多くの Web アプリケーションで Ajax...
-- Ajaxアプリケーションでは &color(red){動的にページの一...
-- こうした問題を解決するために Jquerry 等のアプリケーシ...
--- [[jQuery:https://jquery.com/]]
--- [[Google Web Toolkit:http://www.gwtproject.org/]]
--- [[Prototype JavaScript Framework:http://prototypejs.o...
- Javascript 内の script セクションに Ajax 処理を追記する
- Jquerry を使った簡易記述を利用することができる（一般的...
- Django の場合、実際のページ書き換え（クライアント内での...
*** jQuerry (= Javascript Library) [#h27e77c4]
- jQueryでスクリプトを書くときには &color(red){まずready...
- jQueryを利用したスクリプトでは、
-- &color(red){（1）$("...")の内側にどの(X)HTMLの要素を操...
-- &color(red){（2）その後ろに .(ドット) で処理の内容 (=j...
$(function(){
$("セレクター").jQueryの命令
})
- jQuerry で Ajax を使う場合の記述方法は異なる
-- ajax()にはセレクターの指定はない
-- $. で始まり、括弧内の {...} に設定（オプション）を記述
-- 設定は左側に項目名を、右側には項目に対応する値を記述し...
-- 複数の設定は ,(カンマ)区切りでつなげていきます。
-- データーの取得に成功すると、取得内容は function(data){...
-- success にはデータ取得成功時に実行する処理を function(...
$.ajax({
url: '取得するXMLファイル',
dataType: 'xml',
success : function(data){
//取得したファイルに対する処理
}
})
- セレクター 一覧
|名称|書式|指定対象|h
|>|>|BGCOLOR(#5f9ef0):CSSでよく利用されるセレクター|
|要素セレクター|$("要素名")|特定のhtml要素|
|IDセレクター|$("#ID名")|特定のid属性の値を持つ要素|
|クラスセレクター|$(".クラス名")|特定のclass属性の値を持...
|子孫セレクター|$("要素1 要素2")|特定の要素の内側にある要...
|ユニバーサルセレクター|$("*")|すべての要素|
|>|>|BGCOLOR(#5f9ef0):CSS2のセレクター|
|グループセレクター|$("セレクター1,セレクター2,...")|複数...
|子セレクター|$("親要素名 > 子要素名")|特定の要素の直下の...
|隣接セレクター|$("要素1 + 要素2")|特定の要素の次の要素|
|first-child擬似クラス|$("要素:first-child")|特定の要素内...
|>|>|BGCOLOR(#5f9ef0):CSS3のセレクター|
|間接セレクター|$("要素1 ~ 要素2")|特定の要素の後に出現す...
|否定擬似クラス|$("要素1:not(要素2)")|特定の要素内の指定...
|empty擬似クラス|$("要素:empty")|子要素やテキストを含まな...
|nth-child擬似クラス|$("要素:nth-child(番号)")|特定の要素...
|last-child擬似クラス|$("要素:last-child")|特定の要素内の...
|only-child擬似クラス|$("要素:only-child")|指定した要素が...
|>|>|BGCOLOR(#5f9ef0):CSSの属性セレクター|
|[attribute]|$("[属性名]")|特定の属性を持つ要素|
|[attribute='value']|$("[属性名='値']")|特定の属性が指定...
|[attribute!='value']|$("要素名[属性名!='値']")|特定の属...
|[attribute^='value']|$("[属性名^='値']")|特定の属性が特...
|[attribute$='value']|$("[属性名$='値']")|特定の属性が特...
|[attribute*='value']|$("[属性名*='値']")|特定の属性が特...
|[attributeFilter1][attributeFilter2]|$("[属性セレクター1...
|>|>|BGCOLOR(#5f9ef0):jQueryの独自フィルター|
|firstフィルター|$("要素:first")|指定した要素の最初の要素|
|lastフィルター|$("要素:last")|指定した要素の最後の要素|
|evenフィルター|$("要素:even")|指定した要素の偶数番目の要...
|oddフィルター|$("要素:odd")|指定した要素の奇数番目の要素|
|eqフィルター|$("要素:eq(番号)")|指定した番号の要素（番号...
|gtフィルター|$("要素:gt(番号)")|指定した番号より後の要素...
|ltフィルター|$("要素:lt(番号)")|指定した番号より前の要素...
|headerフィルター|$("要素:header")|h1～h6までのheader要素|
|containsフィルター|$("要素:contains(文字列)")|特定の文字...
|hasフィルター|$("要素1:had(要素2)")|特定の要素が含まれて...
|parentフィルター|$("要素:parent")|子要素やテキストを含む...
*** jQuerry UI [#vd5f8349]
- jQuery UIは、jQuery のユーザー・インターフェイス（UI）...
- [[jQuery UIを利用するには？:https://www.buildinsider.ne...
- jQuery UI project は &color(red){2016年9月の [[ver.1.12...
- jQuery UI 1.12.1 は &color(red){jQuery 1.7.0 – 3.1.0}; ...
- 今回は Ajax + jQuery 環境で jQuery UI が提供する progre...
- jQuery UIで提供されているコンポーネント
|分類|コンポーネント名|概要|h
|Interactions|Draggable|ドラッグ可能な要素を定義|
|~|Droppable|ドロップ可能な要素を定義|
|~|Resizable|サイズ変更可能な要素を定義|
|~|Selectable|マウス操作で選択可能な要素を定義|
|~|Sortable|並べ替え可能な要素を定義|
|Widgets|Accordion|アコーディオン・パネル|
|~|Autocomplete|オート・コンプリート機能付きのテキストボ...
|~|Button|ボタンやリンク、ラジオボタンなどからボタンを生成|
|~|Datepicker|日付入力ボックスを生成|
|~|Dialog|汎用的なダイアログを生成|
|~|Menu|展開可能なリッチ・メニューを生成|
|~|Progressbar|進捗（しんちょく）バーを生成|
|~|Slider|スライダーを生成|
|~|Spinner|アップダウン・ボタンを伴う数値入力ボックスを生...
|~|Tabs|タブ・パネルを生成|
|~|Tooltip|ツールチップを生成|
|Effects|Effect|基本的なエフェクトを提供|
|~|Show／Hide／Toggle|要素の表示／非表示にエフェクトを適用|
|~|Add／Remove／Toggle／Switch Class|スタイル・クラスの適...
|~|Color Animation|色を徐々に変化させるエフェクトを提供|
- [[jQuery UI Progressbar 仕様:https://api.jqueryui.com/p...
- 参考 URL
-- [[ASCII 初めてのjQuery：セレクターAPIを一挙解説（前編...
-- [[ASCII 初めてのjQuery：セレクターAPIを一挙解説（後編...
-- [[ASCII jQueryによるフォームのデザインの基礎（前編）:h...
-- [[ASCII jQueryによるフォームのデザインの基礎（後編）:h...
-- [[ASCII jQueryでAjaxを利用する基本チュートリアル:https...
-- [[:]]
*** 参考 URL [#i5d1b223]
- [[:]]
- [[:]]
- [[:]]
- [[jQuery日本語リファレンス（Ajax/API/jQuery）:http://se...
- [[Django クロスサイトリクエストフォージェリ (CSRF) 対策...
- [[s-cookie/js-cookie:https://github.com/js-cookie/js-co...
- [[:]]
- [[:]]
** vscode を使ったデバッグ [#x9aada46]
- vscode 全般の説明は [[VsCode]] にまとめている
- vscode を使ってdjango のデバッグができる。
-- vscode のデバッガー設定で python django を選択する
-- デバッガーの RUN コマンド（緑色の矢印ボタン）でサーバ...
-- ブラウザーでアプリを起動してブレークポイントにヒットす...
** 参考 URL [#u00645c3]
-- [[Python Django入門 (1) Django イントロ:https://qiita....
-- [[Python Django入門 (2) install mac編:https://qiita.c...
-- [[Python Django入門 (3) Django 導入～Admin ツール:http...
-- [[Python Django入門 (4) bootstrap による Web 画面作成:...
-- [[Djangoチュートリアル - 汎用業務Webアプリを最速で作る...
-- [[IT技術相互 Python Django の使い方:https://jpn.itlibr...
-- [[Djangoを最速でマスターする part1:https://qiita.com/g...
-- [[Djangoを最速でマスターする part2:https://qiita.com/g...
-- [[Django入門編 (paiza トレーニング):https://paiza.jp/w...
ページ名:
![[PukiWiki]](image/taikyoku.gif "[PukiWiki]")
