自動化無しに生活無し

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

  • よく出るReactのエラー一覧

    textarea要素には、valueプロパティを使って値を与える 普通のHTMLでは、textareaに最初から値を入れておきたい場合、子要素に直接文字を書くと良い。 しかし、Reactで同じことをやるとエラーになる。 <textarea className="form-control" name="comment" onChange={this.handleChange}>{this.state.activeItem.comment}</textarea> そこで、valueプロパティを使う。 <textarea className="form-control" name="comment" onChange={this.handleChange} value={this.state.activeItem.comment}></textarea> これで、 Use the `defaultValue` or `value` props instead of setting children on <textarea>. というエラーは解決される。 リスト内の要素を識別できるよう、keyプロパティを与える Each child in a list should have a unique ...
  • 【Django】任意の順番で並び替えて表示させる【Sortable.js + FetchAPI 】

    データを一覧で並べる時、並び順を任意に変更させたいときがある。 そういう時、sortable.jsを使えば良い。 JavaScriptで並び替えをするならSortable.js【jQuery不要のライブラリ】 しかし、並び替えた順番をDBに記録する場合は、別途対応が必要だ。 モデルに並び替えの順番を記録するフィールドを追加 並び替えた順番を送信する(FetchAPIによるリクエスト) 別途ビューを作り、並び替 ...
  • 複数のPDFファイルを1つのPDFファイルにまとめる

    書類(PDF)を1つにまとめる必要が出てきたので。 複数のPDFを1つにまとめるPythonコードを作ることにした。 前提 pip install PyPDF2==3.0.1 ソースコード PyPDF2 をインストールしておく。 PyPDF2 では PdfFileMerger は削除されたため、 PdfMerger を使う。 import glob import datetime from PyPDF2 import PdfMerger now = datetime.datetime.now() now_str = now.strftime("%Y-%m-%d_%H:%M:%S") # TIPS: 既存のPDFファイル名を指定した場合、上書きではなく、追記されるので注意。 def merge_pdfs(output_filename=f"{now_str}.pdf"): # すべてのPDFファイルを取得。 # ファイル名順に並び替える。 pdfs = sorted( glob.glob(f"./*.pdf") ) #print(pdfs) if not pdfs: print(& ...
  • 【HTML】inputタグで画像を複数枚指定する【multiple】

    画像を複数枚指定できるようにする。 <form method="POST" enctype="multipart/form-data"> <!-- CSRF token --> <input name="content" type="file" multiple> <input type="submit" value="送信"> </form> このフォームで指定された画像は、下記のように同じname属性の値のフォームが複数存在する状態と同じ。 <form method="POST" enctype="multipart/form-data"> <!-- CSRF token --> <input name="content" type="file"> <input name="content" type="file"> <input name="content" type="file"> <input name="content" type="file"> <input name="content" type="file"> <!-- 略 --> <input type="submit" value="送信"> </form> そのため、例えばDjangoでは .getlist() を使って取り出す。 request.FILES.getlist("content") ...
  • 【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からダウンロードしたプロジェクトを動作させるには? 故に、ターミナルのタブを開いて双方のコマンドを実行しておく必要がある。 しかし、これを手動でやっていくのはちょっとめんどくさい。 そこで、ワンライナーで新しいタブを開き、開いた新しいタブでコマンドを実行してもらう。 新しいタブ ...