JavaScript/Python: 配列要素の追加と取り出し

 Arry = [0,1,2,3,4,5,6,7,8,9]

JavaScript

先頭要素を取り出す Arry.shift();

末尾要素を取り出す Arry.pop();

先頭に0を追加 Arry.unshift(0);

末尾に9を追加 Arry.push(8);

Python

先頭要素を取り出す Arry.pop(0)

末尾要素を取り出す Arry.pop(-1)

先頭に0を追加 Arry.insert(0, 0) #insert(位置, 値)

末尾に9を追加 Arry.append(8)

CSS: Bootstrap4にpopper.jsがないとどうなるか

Bootstrap4 では popper.js (https://popper.js.org/) を同時に読み込むことになっていますが、これがないと以下の三つが動作しないということです。

（１）Dropdowns（ドロップダウン）

（２）Popovers（ポップ・オーバー）

（３）Tooltips（ツールチップ）

これらが必要なければ無しで大丈夫ということです。

必見！Bootstrapの「bundle」って何！？ – console dot log
https://blog.capilano-fw.com/?p=387

CSS: display:flexで上下左右中央配置

CSSのdisplay:flexを使うと、子要素が均等に横並びになってしまいます。

子要素を幅100％で縦並びにしたい場合は、flex-direction: column; を追記します。

{

    display: flex;
    justify-content: center; /*左右中央配置*/
    align-items: center; /*上下中央配置*/
    flex-direction: column; /*子要素を縦並びにする*/
}

flex-direction: column; を指定することで、子要素が複数あったら縦に並ぶようになります。

JavaScript: 画像遅延読み込みプラグイン

 画像遅延読み込みはこれ！「lazysizes.js」の使い方を徹底解説！

https://pengi-n.co.jp/blog/js-lazysizes/

JavaScript: 背景画像の読み込み完了を検知する

 「imagesLoaded」を使って画像の読み込みを検知する｜notes by SHARESL

https://notes.sharesl.net/articles/1601/

DjangoでBasic認証を設定する

 まず、以下のサイトを参照して wsgi-basic-auth をインストールしました。（環境はAmazon Linux2、Apache）

【Django】DjangoアプリにBasic認証をかける
https://qiita.com/mizu4my/items/e8fb51d65f872f302537

まず、ライブラリをインストールします。

$ pip install wsgi-basic-auth

次に、.envファイルに、Basic認証のIDとパスワードを追加します、とありました。

.envファイルとは環境変数を保存するものというのは分かりますが、いったいどこに保存するものなのか書いてありません。
何回か検索して調べると、どうやら django-environ というライブラリを使うらしいことが分かりました。以下のサイトです。

Djangoで環境変数？ならdjango-environを使おうか。
https://qiita.com/moonwalkerpoday/items/9da47dda80d3ddac9a62

最終的には以下のようにしてできました。

wsgi.py（例）

import os
from wsgi_basic_auth import BasicAuth #追加
import environ #追加
env = environ.Env() #追加
env.read_env('/var/www/html/myproject/myproject/.env') #追加.envへのパスの例です。
application = get_wsgi_application()
application = BasicAuth(application) #追加

そして、Apacheの設定ファイル（httpd.conf等）には、WSGIPassAuthorization On を追加することも必要でした。

httpd.conf

WSGIPassAuthorization On #追加

以下を参考にさせていただきました。

WEBアプリケーション開発メモ
http://drunk.chips.jp/web/2021/04/django_basic.html

JavaScript: URLパラメータを連想配列にする

JavaScriptでURLパラメータを連想配列にするには、以下のようにするのが簡潔です。

var urlSearchParams = new URLSearchParams(window.location.search);
var params = Object.fromEntries(urlSearchParams.entries());

URLパラメータ: ?name=ABC&company=XYZ&address=Tokyo

⇒連想配列: {"name": "ABC", "company": "XYZ", "address": "Tokyo"}

参考: How can I get query string values in JavaScript?
https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript

Django: urls.pyのnameをViewで取得する

urls.py で以下のようにnameを設定した場合、

urlpatterns = [
    path('search/', views.Search.as_view(), name="search"),
]

views.pyで以下のようにnameを取得できる。

from django.urls import resolve

URL_NAME = resolve(request.path_info).url_name

Django: QuerySetに対するvalues()とvalues_list()の使い方と結果例

 メモです。

# filter(id__in=[1266, 1267]) は all() に置き換えても同様

# モデルオブジェクト取得の基本形
Product.objects.filter(id__in=[1266, 1267])
    #結果: <QuerySet [<Product: PRD-0001A>, <Product: PRD-0002/0002M>]>


# values() の使い方例
Product.objects.filter(id__in=[1266, 1267]).values('id', 'name')
    #結果: <QuerySet [{'id': 1266, 'name': 'PRD-0001A'}, {'id': 1267, 'name': 'PRD-0002/0002M'}]>
    #ValuesQuerySetと呼ばれるデータ型

# get()で一つのレコードだけ扱う場合
Product.objects.filter(id__in=[1266, 1267]).get(id=1266)
    #結果: <Product: PRD-0001A>

Product.objects.filter(id__in=[1266, 1267]).values('id', 'name').get(id=1266)
    #結果: {'id': 1266, 'name': 'PRD-0001A'}


# values_list() の使い方 ＊タプルを返す
Product.objects.filter(id__in=[1266, 1267]).values_list('id', 'name')
    #結果: <QuerySet [(1266, 'PRD-0001A'), (1267, 'PRD-0002/0002M')]>

Product.objects.filter(id__in=[1266, 1267]).values_list('id', 'name').get(id=1266)
    #結果: (1266, 'PRD-0001A')

list(Product.objects.filter(id__in=[1266, 1267]).values_list('id', 'name'))
    #結果: [(1266, 'PRD-0001A'), (1267, 'PRD-0002/0002M')]


# get()で一つのレコードだけ扱う場合
Product.objects.filter(id__in=[1266, 1267]).values_list('name').get(id=1266)
    #結果: ('PRD-0001A',)

Product.objects.filter(id__in=[1266, 1267]).values_list('name', flat=True).get(id=1266)
    #結果: 'PRD-0001A'

# flat=True の例 ＊フィールドは一つだけ指定します。複数の場合エラーになります。
Product.objects.filter(id__in=[1266, 1267]).values_list('name') #flat=True なし
    #結果: <QuerySet [('PRD-0001A',), ('PRD-0002/0002M',)]>

Product.objects.filter(id__in=[1266, 1267]).values_list('name', flat=True) #flat=Ture あり
    #結果: <QuerySet ['PRD-0001A', 'PRD-0002/0002M']>

list(Product.objects.filter(id__in=[1266, 1267]).values_list('name')) #flat=True なし
    #結果: [('PRD-0001A',), ('PRD-0002/0002M',)]

list(Product.objects.filter(id__in=[1266, 1267]).values_list('name', flat=True)) #flat=Ture あり
    #結果: ['PRD-0001A', 'PRD-0002/0002M']


# 外部キーも参照できる
Product.objects.filter(id__in=[1266, 1267]).values('id', 'name', 'category1__name')
    #結果: <QuerySet [{'id': 1266, 'name': 'PRD-0001A', 'category1__name': 'Wheel and axle'}, {'id': 1267, 'name': 'PRD-0002/0002M', 'category1__name': 'Pulley'}]>

Python: Keyを指定して辞書データをソートする

 Keyを指定して辞書データをソートする

test = 
[
    {'name': 'taro', 'age': 18},
    {'name': 'jiro', 'age': 12},
    {'name': 'saburo', 'age': 10}
]

#非破壊的 元のtestはそのまま
sorted_data = sorted(test, key=lambda item: item['age']))

#破壊的 元のtest自体を書き換える
test.sort(key=lambda item: item['age'])

#Result
[
    {'name': 'saburo', 'age': 10},
    {'name': 'jiro', 'age': 12},
    {'name': 'taro', 'age': 18}
]

Python: print関数の結果をファイルに出力する

 print関数の結果をファイルに出力する

with open('file.txt', 'w') as f:
    print('abc', file=f)

Django: Apache (WSGIモジュール) を再起動しなくてもアプリケーション変更を反映させる方法

DjangoをApacheのWSGIで本番運用している場合、アプリケーションプログラムを変更した場合、いちいちApacheを再起動していました。面倒なので簡単に変更が反映される方法がないか調べたところ、

「wsgi.py を微修正して保存する」と変更が反映されることが分かりました。

これで少し楽になりました。

参考
Is it possible to reload the view without restarting Django? - Stack Overflow

https://stackoverflow.com/questions/9183114/is-it-possible-to-reload-the-view-without-restarting-django

If you are running a production server (nginx, apache, etc) and you want code-reload, then you need to add something to your wsgi module to detect code changes.

Code reloading with apache: http://code.google.com/p/modwsgi/wiki/ReloadingSourceCode

Code reloading with uwsgi: http://projects.unbit.it/uwsgi/wiki/TipsAndTricks

If you are running Django as a WSGI application in daemon mode you just need to touch the wsgi.py for your site and it will reload the application next time there is a request. (So no need for any special options).

Django: Admin モデル一覧画面でリストのリンクをすべて無効にする

list_display_links = [] としても、モデルのIDだけが勝手にリンクにされてしまいますが、以下のように None にするとすべて無効化できました。

class TestAdmin(admin.ModelAdmin):

    list_display_links = None #リストのリンクをすべて無効化

Django: request.FILESの構造

通常のフィールドは、request.POST によりデータ受け渡しされるが、ファイルフィールドは、request.FILES で受け渡しされる。

フィールドが以下のような形だとすると、

<input type="file" name="file_1"> (選択したファイル名: filename_1.pdf)
<input type="file" name="file_2"> (選択したファイル名: filename_2.jpg)
<input type="file" name="file_3"> (選択したファイル名: filename_3.png)

request.FILES (dict型オブジェクト)は、

object = { 'file_1': file_1, 'file_2': file_3, 'file_1': file_3, }

という構造になっている。

ファイル名を取得するには、

ファイル名取得　object['file1'].name => filename_1.pdf

とする。

その他、以下が取得できる。

ファイルサイズ取得　object['file1'].size

ファイルMIMEタイプ取得　object['file1'].content_type

ファイル文字コード取得　object['file1'].charset

JavaScript: ファイルフィールド (input type=file) からファイル名を取得する

ファイルフィールド (input type=file) からファイル名を取得するには

jQueryの場合

$('.class_name').prop('files')[0].name

Django: shellでsettings.pyの設定値を取得する

例

$ python manage.py shell

>>> from django.conf import settings

>>> settings.BASE_DIR

>>> '/var/www/html/myproject/'

Django: urls.pyで単純にリダイレクトする方法

例：

/abc/任意文字列 ⇒ /xyz/任意文字列

from django.views.generic.base import RedirectView

urlpatterns = [

    url(r'^abc/(?P<path>.*)$', RedirectView.as_view(url='/xyz/%(path)s', query_string=True)),

]

Windows11「USBデバイスが認識できません」という通知が繰り返し表示される

Windows11を起動したところ、「USBデバイスが認識できません」という通知が延々と繰り返されるようになり、うるさくて困ってしまいました。

デバイスマネージャーを見ると、

不明なUSBデバイス（デバイス記述子要求の失敗）

というエラーが出ています。

原因：PCがスリープ中に、電源コード（USB-Cタイプ）を抜いて、再度挿していたため。

解決方法：PC起動中に電源コードを抜き差しする。

無事解決できました。

※Googleで検索すると、デバイスをアンインストールして再度インストールしなさいという解決方法がほとんどでしたが、それでは解決できなくて上記方法で簡単にできました。

ImageMagickでExifデータの確認

ImageMagickで画像ファイルのメタデータ（Exifデータ）を確認するには

以前バージョンのコマンド
$ identify -verbose (ファイル名)

新しいImageMagickでは以下のコマンド
$ magick identify -verbose (ファイル名)

※Exifデータを編集するには，exiftoolというExifの操作に特化したツールが便利です。

参考 Ubuntuで写真のメタデータを扱う方法
https://gihyo.jp/admin/serial/01/ubuntu-recipe/0553

Headless Chromeでページロード完了後にPDF出力する

Headless ChromeでPDF出力したところ、ページロード完了前にPDF出力してしまうので、画像など真っ白になってしまう場合が多発した。

以下のオプションを追加すれば大丈夫でした。

--run-all-compositor-stages-before-draw 

例:
chrome --headless --disable-gpu --no-sandbox --run-all-compositor-stages-before-draw --print-to-pdf=C:\\tmp\\tmp.pdf --virtual-time-budget=10000 http://localhost:8080/banana/key 

--virtual-time-budget=10000
これは最大待ち時間のことのようである。

参考 Make Chrome Headless to Wait for Ajax Before Printing to PDF - Stack Overflow
https://stackoverflow.com/questions/49614437/make-chrome-headless-to-wait-for-ajax-before-printing-to-pdf