自動化無しに生活無し

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

追記予定

  • 【JavaScriptカレンダー】fullcalendarを使ってみる【ライブラリ】
    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> <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.6/index.global.min.js"></script> <script> //ページが読まれたときに下記を実行 document.addEventListener('DOMContentLoaded', function() { //カレンダーの要素を取得 const calendarEl = document.getElementById('calendar'); // オブジェクトを作成 FullCalendar.Calendar() を実行。引数として要素と表示するカレンダーの設定 const calendar = new FullCalendar.Calendar(calendarEl, { initialView: 'dayGridMonth', events: [ { title : 'イベント1', start : '2023-05-01' }, { title : 'イベント2', start : '2023-05-05', end : '2023-05-07' }, { title : 'イベント3', start : '2023-04-09T12:30:00', allDay : false // will make the time show } ] }); //カレンダー ...
    続きを読む

  • 【LPIC】Level1で出てくるコマンドと用語の一覧
    順不同。LPICレベル1で出たコマンドと用語の簡単な説明を一覧にしておく。 コマンド コマンド 簡単な説明 set シェル変数やシェルオプションを設定・表示するコマンド env 環境変数を表示するコマンド history コマンド履歴を表示するコマンド mkdir ディレクトリを作るコマンド ls カレントディレクトリのファイル、ディレクトリを表示するコマンド(list segmentsの略) man マニュアルを表示するコマンド whoami ユーザー名を表示するコマンド pwd ...
    続きを読む

  • 【Django】GitとSSHを使ってUbuntuへデプロイする(virtualenvでPythonライブラリの管理)【hookでmigrateコマンドも】
    要求される知識が非常に多いため、下記対象読者に該当する方のみ、閲覧を推奨します。 対象読者 Linuxのコマンドがわかる CUIエディタ(nanoもしくはvim)が扱える すでにDjangoプロジェクトをUbuntuへデプロイをしたことがある gitを使ったことがある(ステージング→コミット→プッシュができればOK) SSHでUbuntuへリモートログインをしたことがある(パスワード認証ができればOK) vir ...
    続きを読む

  • react-router-domの使い方【Reactでルーティング】
    ページが複数あるサイトをReactで作る場合、react-router-domでルーティングを行うと良いだろう。 npm install react-router-dom 使い方 コンポーネントを作る src/components/に以下ファイルを配置。 Home.jsx Portfolio.jsx Profile.jsx Home.jsx import { Link } from "react-router-dom"; export const Home = () => { return ( <> <div>ここはホームです</div> <Link to={`/portfolio`}>ポートフォリオ</Link> <Link to={`/pr ...
    続きを読む

  • 【React】Helloworldの仕組みの解説
    勉強途中で書いているものなので、やや間違いがあるかも Reactの内部構造 srcに書かれたJavaScriptを発動させ、指定した内容を、publicにあるindex.htmlへレンダリングする。 プロジェクトを作ってHelloWorldまで プロジェクトを作る。 create-react-app myproject cd myproject 以下コマンドで、プロジェクトを起動させる。 npm start index.jsを作る srcディレクトリ内のファイルを全て削除して、新しくindex.j ...
    続きを読む

  • 【JavaScript】marked.jsでマークダウン記法をHTML上でプレビューしてみる
    以前、Pythonでマークダウンを実現させてDjangoに実装したが、最近のサイトは皆、マークダウンを書いたら即時で隣のプレビュー欄に表示させる仕様になっている事が多い。 それはJavaScriptでマークダウンを作っているからで、Pythonでマークダウンを実現させているようでは難しい。 そこで、JavaScriptマークダウンのライブラリとして名高い marked.js を使うことにした。 とりあえず作ってみたソースコ ...
    続きを読む

  • 【Django】FontAwesomeで星のアイコンを使ったレビューの投稿と表示
    最終的にこのようになる。 今回はテンプレートのwithとcenterは不使用とした。 そして、5つ星の内、4つ星でレビューした場合、空の星を1つ描画する仕様に仕立てた。 モデル from django.db import models from django.core.validators import MinValueValidator,MaxValueValidator MAX_STAR = 5 class Review(models.Model): comment = models.CharField(verbose_name="コメント",max_length=500) star = models.IntegerField(verbose_name=&qu ...
    続きを読む

  • 【Django】モデルに計算可能な時間を記録する【勉強時間・筋トレ時間の記録系ウェブアプリの作成に】【DurationField】
    例えば、勉強時間や筋トレ時間を記録するウェブアプリを作るとする。 この時に、ネックになるのが、時間を記録するモデルフィールド。 IntegerFieldで記録するべきか、DatetimeFieldでtimedeltaを使うか。 いずれにせよ、合計や平均などを出さないといけないので、このフィールド選択を間違えると後々大変なことになる。 フォームの形式も考慮する必要がある。 そこで、本記事では、時間を記録する方 ...
    続きを読む

  • django-channelsを使ってWebSocketを実現させる【チャットサイト開発に】
    django-channelsのチュートリアルに倣って、WebSocketのチャットサイトを作った。 とても実装難易度が高い。実装手順の備忘録として本記事をまとめる。 解説 ライブラリのインストール pip install django channels daphne djangoとdjango-channels、それからdaphne(ダフネ)をインストールする。 daphneは ASGI（Asynchronous Server Gateway Interface）に準拠したサーバー。 config/settings.py """ Django settings for ...
    続きを読む

  • 【保存版】追加しておくべきvimrcの設定【検索ハイライト、タブはスペース4つ、拡張子ごとの初期データ】
    とりあえず、結論から。Ubuntuの場合、usr/share/vim/vimrcの末尾に下記を追加する。 "行番号表示 set number "タイトルの表示 set title "検索時にハイライト表示 set hlsearch "マークダウンを書くときに斜体を禁止する autocmd! FileType markdown hi! def link markdownItalic Nomal "全角記号の重なりの修正 set ambiwidth=double autocmd BufNewFile *.py 0r $HOME/.vim/template/python3.txt autocmd BufNewFile *.html 0r $HOME/.vim/template/html.txt autocmd BufNewFile *.css 0r $HOME/.vim/template/css.txt autocmd BufNewFile *.js 0r $HOME/.vim/template/javascript.txt autocmd BufNewFile *.c 0r $HOME/.vim/template/c.txt autocmd BufNewFile *.java 0r $HOME/.vim/template/java.txt set tabstop=4 set softtabstop=4 set shiftwidth=4 set expandtab set autoindent set smartindent 特にautoc ...
    続きを読む