自動化無しに生活無し

WEBとかAIとかLinux関係をひたすら書く備忘録系ブログ

  • 【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 とすると今のカーソル位置から最後までを自動的にインデントする ...
  • 【Vim】ReactでHTMLをコーディングするときだけ改行でインデントしてほしい

    ReactをVimでコーディングしているとき、不自由だと感じることが多々ある。 その1つが、.jsxファイルのHTML部をコーディングしているとき、改行でインデントしてくれないこと。 例えば、下記のコードのHTMLで改行をしても、HTML形式でインデントをしてくれない。 return ( <> <textarea id="textarea" className="form-control"></textarea> <input onClick={ addTopic } type="button" value="送信" /> {topics.map( (topic,i) => ( <div className="border" key={i}> <div> { topic } </div> <div className="text-right"> <input onClick={ deleteTopic } className="btn btn-danger" type="button" value="削除 ...
  • GitHubからクローンしたReactを動作させる方法

    Reactのgitignoreには、node_modulesが含まれている。 そのため、クローンしたReactのプロジェクトを動かすには、 npm installを前もって実行しておく必要がある。 git clone https://github.com/seiya0723/startup-react cd startup-react npm install npm start ...
  • DjangoとReactのSPAウェブアプリで、使用することができない(と思われる)Djangoの技術

    Djangoで開発を進めていき、途中でReactのSPAを考える場合。 一部のDjangoの技術が使用できない。 本記事ではDjango+ReactのSPAを作る際、使用できない(もしくは使用できないと思われる)Djangoの技術をまとめる。 Django Template Language 当然だが、Reactがレンダリングを行うため、DjangoTemplateLanguageは使えなくなる。 ifやforはJavaScriptに含まれるため問 ...
  • UbuntuのBash(gnome-terminal)で新しいタブを開き、新しいタブでコマンドを実行する

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

    Javaのパッケージの実行方法でちょっと詰まったので、覚書としてまとめておく。 【例】ソースコードとディレクトリ構成 ディレクトリ構成は以下の通り、このとき、myprojectのディレクトリ名は任意とする。 myproject ├── vehicle │ └── Car.java └── main └── CarExec.java Car.javaの内容はこちら // vehicle/Car.java package vehicle; public class Car { private String model; public Car(String model) { this.model = model; } public void start() { System.out.println(model + " is starting."); } public void drive() { System.out.println(model + " is driving."); } } CarExec.javaの内容はこちら // main/CarExec.java package main; import vehicle.Car; public ...
  • 【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】デフォルトの認証機能を網羅し、カスタムユーザーモデルとメール認証も実装 ...