自動化無しに生活無し

WEB開発関係を中心に備忘録をまとめています

  • 【Django】使用頻度の高いカテゴリをプルダウンメニューの上部に表示させる【.annotate(count=Count("topic")).order_by("-count")】
    コードは『Djangoで1対多のリレーションを構築する【カテゴリ指定、コメントの返信などに】【ForeignKey】』の https://github.com/seiya0723/startup_bbs_foreignkey から引用。 モデルが class Category(models.Model): name = models.CharField(verbose_name="カテゴリ名",max_length=20) def __str__(self): return self.name class Topic(models.Model): category = models.ForeignKey(Category,verbose_name="カテゴリ" ...
    続きを読む

  • 【jscolor】カラーピッカーを実装できるJavaScriptライブラリ【シンプル】
    例えば、投稿した内容に色をつけたいというとき。 通常は、type="color"のinputタグを使う。 <input type="color" name="color"> だが、これはブラウザごとに見た目が大きく異なる。しかも見た目があまりよろしくない。 そこで、以下を考慮して、JavaScriptのライブラリを選定した。 無料 フォームの見た目が良い 扱いやすい jQueryに依存していない 実装が非常にシンプルでわかりやすい コピペですぐに使えるジェ ...
    続きを読む

  • 【Django】検索結果(QuerySet)を結合する【.union()】
    クエリビルダでまとめて検索ができない状況下で、検索処理を複数回に分けて実行し、得られたQuerySetを1つにまとめたいとき。 .union() もしくは|が使える。 from django.shortcuts import render,redirect from django.views import View from .models import Topic class IndexView(View): def get(self, request, *args, **kwargs): topics = Topic.objects.all() context = { "topics":topics } # 重複は自動的に除外される topics = topics.union( Topic.objects.all() ) print(topics) first = Topic.objects.filter(id=1) second = Topic.objects.filter(id=2) third = Topic.objects.filter(id=3) # パイプを使用して連結しても良い。 topics = first | second | third return render(request,"bbs/index.html",context) def post(self, request, *args, **kwargs): posted = Topic( comment = request.POST["comment"] ) posted.save() return redirect("bbs:index") index = IndexView.as_view() ...

  • Vimで自動的にインデントする。gg=Gでファイル内の全てをオートインデントする
    • 作成日時:
    • 最終更新日時:
    • Categories: others
    • Tags: vim 開発効率化 tips
    インデントが雑だったり全くされていない見づらいコードを読まないといけなくなることがある。 いつもは、A Delete Enter を実行したあと、 . で何度も改行をさせるようにしていた。 が、これもめんどくさいなと思うとき、 gg=G を実行すると良い。 gg でファイルの上部にカーソルを移動。=Gを打つことで、ファイルの末尾まで自動的にインデントしてくれるようだ。 逆に考えると、=G とすると今のカーソル位置から最後までを自動的にインデントする ...
    続きを読む

  • GitHubからクローンしたReactを動作させる方法
    Reactのgitignoreには、node_modulesが含まれている。 そのため、クローンしたReactのプロジェクトを動かすには、 npm installを前もって実行しておく必要がある。 git clone https://github.com/seiya0723/startup-react cd startup-react npm install npm start ...

  • UbuntuのBash(gnome-terminal)で新しいタブを開き、新しいタブでコマンドを実行する
    • 作成日時:
    • 最終更新日時:
    • Categories: インフラ
    • Tags: ubuntu bash tips
    最近のlaravelでは、php artisan serveだけでなくnpm run devも実行しておく必要がある。 参考: 【Laravel】GitHubからダウンロードしたプロジェクトを動作させるには？ 故に、ターミナルのタブを開いて双方のコマンドを実行しておく必要がある。 しかし、これを手動でやっていくのはちょっとめんどくさい。 そこで、ワンライナーで新しいタブを開き、開いた新しいタブでコマンドを実行してもらう。 新しいタブ ...
    続きを読む

  • 【Django】JavaScriptのfetchAPIでリクエストを送る
    XMLHttpRequest(XHR)はAjaxの初期のAPIでコードが長くて複雑。jQuery.ajaxは昨今のjQuery離れが深刻。 では、何でリクエスト送信機能を実装すれば良いか。 FetchAPIである。 軽量で簡潔に書ける上に、CORSに対応しており、なおかつインストールは不要。 本記事では、DjangoでFetchAPIを使ってPOSTメソッドのリクエストを送信してみた。 テンプレート {% load static %} ...
    続きを読む

  • 【Django】管理サイトで1対多(ForeignKey)、多対多(ManyToManyField)のフォームを扱いやすくする【admin】
    1対多、多対多を管理サイトで扱うには、デフォルトのフォームではとても使いづらい。 そこで、更に管理サイトをカスタムして、フォームを扱いやすくさせる。 モデルは下記記事から引用し、一部編集した。 【Django】ManyToManyFieldで検索をする方法、追加・削除を行う方法【多対多はクエリビルダの検索は通用しない】 【Django】デフォルトの認証機能を網羅し、カスタムユーザーモデルとメール認証も実装 ...
    続きを読む

  • Javascriptでクリックした時、要素内文字列をクリップボードにコピーさせる
    よく見かける、JavaScriptでクリックした時、コピーするアレを再現する。 ソースコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> <style> pre { background:black; padding:0.5rem; overflow:auto; position:relative; } pre code { color:#0fc; } .copy_button{ user-select: none; display:inline-block; position:absolute; top:0; right:0; color:white; background:black; cursor:pointer; margin:0.25rem 0.75rem; padding:0.25rem 0.5rem; border:solid 0.1rem white; border-radius:0.5rem; transition:0.2s; } .copy_button:hover{ background:#0fc; color:black; } .copy_button:active{ background:black; color:white; } </style> </head> <body> <pre><code>console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");</code></pre> <script> const pre_elems = document.querySelectorAll("pre"); // コピー用のボタンを配置する。 for (let pre_elem of pre_elems ){ pre_elem.innerHTML += '<span class="copy_button">Copy</span>'; } const copy_buttons = document.querySelectorAll(".copy_button"); for (let copy_button of copy_buttons){ copy_button.addEventListener("click" , (event) => { const code = event.currentTarget.closest("pre").querySelector("code"); if (navigator.clipboard && code){ navigator.clipboard.writeText( code.textContent ); } }); } </script> </body> </html> 結論 ウェブアプリでコピーして別のウェブアプリのフォームにペーストしたい ...
    続きを読む

  • 【シェルスクリプト】git clone した後、クローンしたディレクトリへ移動する
    git cloneコマンドを実行してクローンした後、cdコマンドでディレクトリ移動するのがめんどくさい。 そこで、git clone とcd コマンドを1つにまとめたシェルスクリプトを用意した。 #! /bin/bash # $1 https://github.com/seiya0723/django-auth/tree/main/accounts echo $1 # ここでtree以降は切り捨てる。 repo=$(echo "$1" | sed s/tree.*//g) # 移動対象のディレクトリを取り出す。 destination=$(echo ./"$1" | sed "s/tree\/[[:alnum:]_-]*\///g" | sed "s/https:\/\/github.com\/[[:alnum:]_-]*\///g") git clone $repo cd $destination 例えば、特定のディレクトリ(tree/main/accounts)を指定している場合、そのディレクトリへ移動 ...
    続きを読む