Bootstrap5を使ったレビュー一覧画面を作りました。

概要 2019年に作成したプログラムを改修し、bootstrap5を利用したレビューの一覧画面を作成しました。テンプレートはWordPress用ではなく、自ら開発する方向けとなっています。例えば、現在作成しているサービスのレビューサイトへ追加するといったことが…

2020-01-26

material-iconsをchrome拡張のcontent-scriptで使用する方法

技術 javascript css Chrome拡張 typescript

環境を整える開発環境を整えます。今回使うライブラリは以下のものを使います。 "dependencies": { "css-loader": "^2.1.1", "file-loader": "^3.0.1", "jquery": "^3.4.1", "material-icons": "^0.3.1", "webpack": "^4.32.2", "sass-loader": "^7.1.0", …

2019-12-22

属性付きセレクタを作成する関数を作った。

html typescript javascript 技術

属性付きセレクタを作成する関数を作った。 jqueryである属性がついたタグを取得したいと思ったときに、セレクタをハードコーディングすることがあります。例えば以下のようなものです。 $("div[id='hoge']") hogeという値が動的に指定できる場合はもう少し…

2019-12-18

環境ごとに分けたtsconfigを作成する

javascript typescript

環境ごとに分けたtsconfigを設定する想定するのはdevelop環境とprod環境の２つの設定を分けて管理します。 dev環境では、sourceMap: trueで、prod環境ではsourceMap: falseとします。製品として出すのに元のソースを出すのはかっこ悪いので。。。 devとpro…

2019-11-24

webpack4とelectronでfsモジュールが見つからないエラーの解決方法について

javascript electron エラー対応

webpack4とelectronでfsモジュールが見つからない問題 webpack4とelectronを使って開発している場合にfsモジュールが見つからないエラーが出てきました。まずfsモジュールについてですが、これはファイルシステムを使用する際に利用するものです。 fs.readF…

2019-01-06

textarea内でtabを使えるようにするためのまとめ

html javascript

textareaでtabを使えるようにするために参考にしたサイト Qiitaの記事なのですが、うまく動かなかったと思います。 https://qiita.com/laineus/items/12a220d2ab086931232d tabを押すと、文字の前にTAB_STRが挿入されます。自分が望んでいたのは、tabを押す…

2019-01-03

左側に表示するナビゲーションメニューについて調べたときに参考にしたサイト

css html javascript

ナビゲーションのメニューがまとまっているサイトです。 http://photoshopvip.net/97481 こういったサイトはよく見ます。とても助かりますね。この中で使えそうだなと思ったものを紹介したいと思います。まずはこれです。 https://codepen.io/MrsColombo/p…

2018-11-04

DjangoでCSRFを含んだリクエストをtagを使って実行する方法

Django python html javascript

CSRFトークンを含んだAPIの実行方法で、ドキュメントに載っているような方法ではなく、tagを使った方法を紹介します。 tagを使った方法というのは、{% cookie 'csrftoken' %}でhtml内にtokenを入れて、その値を使う方法です。修正が必要な箇所は以下の3箇所…

2018-10-12

シンプルなカレンダーフォームを作る方法

javascript html

日付選択をする際にでてくるあのカレンダーを作る方法を紹介します。 documentではdomに属性をつけてオプションを指定しているのがほとんどですが、属性をつけるとごちゃごちゃするので、jsに書きます。準備以下のライブラリが必要です。リンクを付けまし…

2018-10-09

javascriptのreduceを使って配列を更新する方法

javascript

reduceを使用すると、ある配列を使って単一の値を計算したい場合に使えます。いくつかreduceを使った例を紹介します。配列内のデータを加算する var datas = [1,2,3,4,5] var result = datas.reduce(function(num, item) { // numの初期値は0 return num +…

2018-10-07

javascriptでカレンダーを作成する

javascript html css

html、css、javascriptを使ってカレンダーを作成します。この記事では、htmlとcssの部分についてはcodepenで見つけたデザインを使用しています。なので、javascriptをメインで紹介したいと思います。参考にしたデザインはこちらです。 https://codepen.io…

2018-10-05

frappe-ganttでグラフを更新する方法

javascript html

frappe-ganttのドキュメントからチャートの更新apiを探してみたのですが、見つけられませんでした。 issueを見てみたところ、解決策が見つかったので紹介します。 https://github.com/frappe/gantt/issues/44 jsfiddleにコードを公開してくださっているので…