PHP 値の送信と受け取りをしてみる

## はじめに
PHPといえば値の入力フォームに入力した値を送信し、別で受け取ります。勉強していることのまとめなので完璧ではありません。参考程度にお願いします。

## 値の送信
“`php
//Post.php

//get.phpに送信
　//messageという名前でテキストを送信
Send

“`
method=”get”はurlの後に値を付与します。
method=”post”はurlから見えません。

## 値の受信
値の受信にも色々ありそうですが今回は以下のやり方でやります。多分別は$_GETを使うものです。
“`php
//Get.php

$message = filter_input(INPUT_GET, ‘message’); //getメソッドで送られたmessage
“`
フォームから送信された値の取得にはfilter_inputを使います。filter

【JavaScript】Canvasのバグを疑ってしまう興味深い現象

## 何が言いたいのか

PCとスマホでCanvasの表示が変わる現象があった。

## 何を表示したいのか

Canvasいっぱいに
“`
🌓🌓🌓🌓🌓🌓🌓🌓🌓🌓🌓
🌓🌓🌓🌓🌓🌓🌓🌓🌓🌓🌓
🌓🌓🌓🌓🌓🌓🌓🌓🌓🌓🌓
🌓🌓🌓🌓🌓🌓🌓🌓🌓🌓🌓
“`

といった感じに表示したい。

## const emoji = “🌓”;

### PC

### スマホ

## const emoji = “🌗”;

### PC

GitHub PagesでCSSが反映されない

GitHub Pagesを使ってサイトを作成した際に、デプロイには成功したがCSSが読み込まれず、デザインが崩れてしまうという問題が発生しました。そのときの対処法をネットで調べると、GitHubに上がっているCSSファイルの絶対パスを指定するというものばかりで、こんなん絶対面倒だろ！と思ったので代わりの方法を書いておきます。

慣れている人にとってはなんてことない内容ですが、初心者の方が使用することも多い機能だと思ったのでこの記事を作成しました。

# 前提
以下のような簡単なファイル構成だとします。ファイル構成が違えばURLも異なってくるのでご注意ください。
“`
└── portfolio
├── style.css
└── index.html
“`

# 面倒な例：絶対パスを使用

“`html “`

:::note info
`https://[githubユーザーネーム].

HTMLタグの意味と使い方を理解しよう

## 1. HTMLタグとは何か？

HTML（HyperText Markup Language）は、ウェブページを作成するための標準マークアップ言語です。テキストや画像、リンク、その他のコンテンツを構造化するために使用されます。

### HTMLタグとは

HTMLはタグ（\）と呼ばれる特殊な記号で構成されています。タグは要素を定義し、ブラウザにコンテンツを表示する方法を指示します。例えば、\

タグは段落を定義し、\タグは画像を表示します。

#### タグの役割

– 意味のあるコンテンツを囲む
– コンテンツの種類や構造を示す
– ページのデザインやスタイルを指定する際にCSSと組み合わせて使われる

#### タグの例

– `

`: 段落を表します。
– `

〜

`: 見出しを示すタグで、`

`が最も重要度が高いです。
– ``: ハイパーリンクを作成します。
– ``: 画像を表示します。

HTMLタグを使うことで、コンテンツを構造化し、ウェブページを作成することができます。

## 2. HTMLタグの基

Bootstrap5　汎用的なクラス＆書き方まとめ

## 幅
“`
w-
“`

## テキストカラー
“`
text-light
“`

## ボーダー
https://getbootstrap.jp/docs/5.0/utilities/borders/

ボーダー(全、上、下、右、左)
“`html

“`

カラー
“`html

HTML/CSS/JavaScriptで年越しカウントダウン + 辰カービィを作った

あけましておめでとうございます。うえむーです。
2023年は大変お世話になりました。
本年度もよろしくお願いします。

さて、本題に入りますが、HTML/CSS/JavaScriptで年越しカウントダウン + 辰カービィを作りました！
また、レスポンシブ対応しており、ウィンドウサイズを変更しても崩れないように対応しております。

## カービィを作る

まずはカービィを作成します。
ここはとにかく、border-radiusをFANCY-BORDER-RADIUSのツールを使って実装しました。

https://9elements.github.io/fancy-border-radius/

## 辰の帽子

次に辰の帽子を作成します。
特に、辰のひげ、後ろの髪型のような曲線状はどのように実装しようか苦労しました。

後ろの髪型は以下のように実装しました。

“`html

“`

“`css
.dragon_hair_bk {
position: absolute;
top: -15%;

リフレッシュして、perl と python を楽しもう。

私は、たまーに、頭をクリーニングするのに、音楽をききます。始まりは、μ’s(ミューズ)で、スクールアイドルシリーズの礎を築いた、現在まで続くアイドルグループの創設者であります。
よく聞くスタート・ミュージックが輝夜の城で踊りたい(μ’s)で始まります。
https://music.youtube.com/watch?v=VTKMRBPCut0&list=RDAMVMVTKMRBPCut0
(YouTube music)
このシリーズ初代には、
https://music.youtube.com/watch?v=yCz_vEmTHFQ&list=RDAMVMVTKMRBPCut0
![myuzu2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3625232/e

タッチイベント追加（JS）

“`js
// HTML要素を取得
const target = document.querySelector(‘#target’)

// タッチイベントを追加
target.addEventListener(‘touchstart’, (event) => {
// タッチが開始された時の処理（指が触れた時）
console.log(‘開始’, event)
})

target.addEventListener(‘touchmove’, (event) => {
// タッチが移動した時の処理（指を動かした時）
console.log(‘移動’, event)
})

target.addEventListener(‘touchend’, (event) => {
// タッチが終了した時の処理（指を離した時）
console.log(‘終了’, event)
})
“`

ElectronでHello World!（index.htmlのspanタグ操作）

# はじめに
ElectronでHello World!してみました。[Quick-start](https://www.electronjs.org/ja/docs/latest/tutorial/quick-start)では、「Hello World!」はindex.htmlのHタグのリテラル文字列だったので、そのあたりだけちょいとアプリケーション的な感じに書き換えてみました。

# Electronとはとかインストールとか

すべて割愛します。Qiita上にたくさん親切に記述された記事がありますので、それらからなるべく新し目の情報を参照するとよいかと思います。

# 配置
“`cmd
C:\electron>dir /B
index.html
main.js
node_modules
package-lock.json
package.json
preload.js
“`

# index.html
Quick-start記載のindex.htmlを下記のように変更しました。
従来は\

タグの中にリテラルで書かれていましたが、\タグにしました。

“`di

ReactでWebアプリをどうやって作成するかを確認してみる

こんにちは。
株式会社クラスアクト インフラストラクチャ事業部の大塚です。

今回はReact環境で、今まで触っていたSign-up画面を出力させるための方法をChatGPTを使いつつ、確認していきたいと思います。

https://qiita.com/ohtsuka-shota/items/b6f8f4208aa5c2596193

# 元となるHTML/CSS/JavaScript
## HTML
“`test.html

永久無料でサイトを作成する方法

とある理由でサイトを作りたくなったのですがお金を使いたくなかったので方法を探しました。その備忘録的な記事です。

# 前提
HTMLやCSSファイルは完成しているものとします。

# 使うサイト
・GitHub

https://github.com

・DDNS Now

https://ddns.kuku.lu/index.php

# リポジトリを用意
まずGithubにログインして作成したファイルをリポジトリにアップロードします。
無料で公開するにはパブリック リポジトリにする必要があります。

# ドメインを用意
(これはやらなくても公開できますが短いURLが作れるのでやるのをおすすめします)

WEBサイトを公開するにはドメインが必要ですがドメインは持ってるだけで更新料がかかります。
無料のドメインも無い訳ではないですが安全性に不安があるのでここではダイナミックDNSサービスのDDNS Nowを使います。

DDNS Nowは永久無料で維持費やドメイン購入費などもかかりません。
.f5.siのサブドメインが取れて削除しない限り、他人にドメインが取られることがないという優れも

CSVファイルをFileAPIで読み込む

言わずと知れたCSVファイルを、EXCEL等で出力されるシフトJIS形式の状態で読み込めるJavaScriptコードを書いてみます。
# 実行条件
– 入力対象となるCSVはソフトJIS形式である。例えば郵便局の[郵便番号データ](https://www.post.japanpost.jp/zipcode/download.html)を加工無しで読めるようにする。
– フレームワークは用いずVanillaJSで書く。
– なるべくシンプルなコードとし装飾も最低限にする。
# 対象コード
シフトJIS形式によるテキストファイルを読み込む場合、問題になるのは **実際のHTML上で使用されているキャラクターコードとの相違をどうするか？** ということです。下記コードにおいては、[encoding.js](https://github.com/polygonplanet/encoding.js/blob/master/README_ja.md)により解決しています。
“`



PCのみでのスワイプして削除

# html css
“`PHP

スワイプ削除

“`

# Jquery
“`javascript
$(function() {
var swWrap = $(‘#wrap’);
var sw = swWrap.children(‘.box’);
var basePoint;
var distanceMoved = 0

【JavaScript】正規表現を使ってみたりパスワードを画面上に表示させたりする

こんにちは。
株式会社クラスアクト インフラストラクチャ事業部の大塚です。

前回、JavaScriptの勉強の一環でユーザ/パスワードを入力するフォームでデータが入っていない場合の警告ダイアログを表示する方法を学びました。

https://qiita.com/ohtsuka-shota/items/a5a3fcedc7734879e2bd

これだけでも勉強になったのですが、ダイアログを出さないまでも入力を求めるようにするくらいであればHTMLのrequiredでも出来たりします。
そこでもう少しJavaScriptの利便性を確認するために、入力された文字列が英語かどうかを確認するためのコードの書き方や●●という風に隠されているパスワードをどうやって表示させるのかを勉強してみました。

# 実装した画面
パスワードの目の部分が雑ですが、こんな感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/f229834c-ab57-5795-081a-ce0b53be35a

式の余興に「AWS＋GASシステム」で超盛り上がった件　〜①画面編〜

「式の余興に「[AWS＋GASシステム」で超盛り上がった件　〜はじまり〜](https://qiita.com/shun-gondo/items/44924e25f2b19fd5f522)」の続きになります。
※**前回記事を読んでいない人はぜひ読んでください。お願いします!!**
今回の記事は主に、**システムの構成と画面周り**の実装に焦点を当てています。

# 🙋‍♂️プランナーさんに確認
そもそも自作したとして、**会場側から許可が降りるのか**。**会場スクリーンにどのように出力できるのか**を確認しなければ、作る意味もないし、何も決められません。

とりあえずプランナーさんに確認してしたところ、二つ返事で**許可が降りました**。
会場スクリーンの出力はHDMIに対応しているようでした。
意外にも、パソコンを利用した余興は一般的らしいです。
※どんな余興をしてるんだろう。。すごい気になる….

さっそく、システム構成を考えてみました。

# 📏システム構成
Webアプリケーションでの実装としました。

!

grid使ったらheight:autoのトランジションのアコーディオンできんで。

# はじめに
いつもお世話になってるコリスさんのこの記事みて、
久しぶりにテンションが上がったので早速やってみた。

[Web制作者の念願がついに叶った！ height: 0;からheight: auto;へのトランジションをJavaScriptは無し、CSSで実装する方法](https://coliss.com/articles/build-websites/operation/css/css-transition-from-height-0-to-auto.html)

ひと昔前は表示要素が可変な場合、min-heightを使ってしのいでたから懐かしみ。
（できるだけjs使わない派のワイ）

# 結論からいうとgrid使って`0fr → 1fr`する。

“`html:main.html

Hover me!

“`

“`css:index.css
.body {

Plotlyで作成したグラフをMarkdownに埋め込み【備忘録】

# はじめに
　報告書の作成って手間ですよね。私は研究職という職業上（？）報告書を書くことが多いのですが、普段Markdownでザザっと書いてHTMLにして上長にぶん投げています。
とある報告書でPlotlyで作成したグリグリ動くグラフをMarkdownに貼り付けたいなぁと思い、作業したことを備忘録として残しておきます。
　手法としては、plotlyで作成したfigをHTMLで出力し、Markdownに＜iframe＞タグで埋め込みます。

# 埋め込みたいグラフ
以下のようなマウスでグリグリ動かせる感じのグラフを埋め込みます。


# コード
まずは普通に散布図を作成します（別に散布図でなくてもいいです）

“`python:figの作成
import pandas as pd
import plotly.express as px
imp

睡眠時間を計りたくて（計算）。

# 睡眠時間を計りたくて（計算）。
無性に睡眠時間を計りたくて作ってみた。スマホのストップウォッチを使用すれば計れるのですが、なんか目覚めとともに作りたくなったので作りました。
—
—
“`html:index.html








就床時間–

【ブラウザ拡張機能】Reactサイトに外部からHTMLタグを挿入する

## 事象
Chrome拡張機能にて、**Reactを使用しているサイトに対し** 下記のようにHTMLコードを直書きしたところ、
“`javascript
root.innerHTML += new_HTML
“`
そのサイトの更新が停止した。

## 解決手法
`innerHTML`書き込みでは、 **`React`のレンダリングが機能しない**

`appendChild`で解決される。
“`javascript
root.appendChild(new_tag)
“`

これで [ページ乗っ取りの王、ページ乗っ取りキング](https://qiita.com/uts1_6/items/11e348ead4bae71571b8)ですね。

Djangoで読書メモアプリを作る

Djangoで読書メモアプリを作りました。
はやたすさんの記事を参考にしました。

https://tech-diary.net/django-todo-tutorial/

この記事では、Pythonのインストール、仮想環境の構築、Djangoのインストール、アプリ作成の流れを書きます。
実行環境：MacBook Air M1, 2020

# Pythonのインストール
以下のサイトにアクセスし、Latest Python 3 Release – Python 3.12.1をクリックします。
https://www.python.org/downloads/macos/

開いたページを下にスクロールし、macOS 64-bit universal2 installerをクリックします。

![