Webアプリ開発　記事の詳細とコメント編

# 初めに
webアプリを開発したので、開発中に考えたことをまとめます
今回は記事の詳細とコメント機能についてです。

# 開発環境
macOS Sonoma 14.4.1
CentoOS Stream X_86_64
Apache/2.4.57
PHP 8.3.6
mysql Ver 8.0.36
phpMyAdmin 5.2.1
composer version 2.7.2
Laravel Installer 5.7.1
Laravel Framework 11.0.5

# ソースコード

https://github.com/opatu07/portfolio

# 考えたこと
## 記事の詳細
### 実装事例
ホーム画面から


記事のタイトルまたは「この記事を読む」を押してもらうと記事の詳細を確認できます。
今回の例では「スープ

Webアプリ開発　記事の更新、削除編

# 初めに
webアプリを開発したので、開発中に考えたことをまとめます
今回は作成した記事の更新、削除機能についてです。

# 開発環境
macOS Sonoma 14.4.1
CentoOS Stream X_86_64
Apache/2.4.57
PHP 8.3.6
mysql Ver 8.0.36
phpMyAdmin 5.2.1
composer version 2.7.2
Laravel Installer 5.7.1
Laravel Framework 11.0.5

# ソースコード

https://github.com/opatu07/portfolio

# 考えたこと
## 記事の更新
### 実装事例
ダッシュボード画面から「記事を編集する」を押してもらうと


記事の編集画面が出てくるのでここで記事を編集

Webアプリ開発　記事の新規登録編

# 初めに
webアプリ開発ができたので、どんな感じで作成したのかをまとめたいと思います。
今回はマイページ編集についてです。

# 開発環境
macOS Sonoma 14.4.1
CentoOS Stream X_86_64
Apache/2.4.57
PHP 8.3.6
mysql Ver 8.0.36
phpMyAdmin 5.2.1
composer version 2.7.2
Laravel Installer 5.7.1
Laravel Framework 11.0.5

# ソースコード

https://github.com/opatu07/portfolio

# 考えたこと
## 記事の新規登録
### 実装事例


権限があるユーザーには投稿一覧ボタンが出てきます。
押すと

![dashboard.png](h

ウェブアクセシビリティ改善に取り組んだ話

こんにちは、グロービスで[「GLOBIS 学び放題」](https://unlimited.globis.co.jp/)のフロントエンドエンジニアをしているAgataです。

「GLOBIS 学び放題」では、[アクセシビリティ](https://www.gov-online.go.jp/useful/article/202310/2.html)改善に向けたプロジェクトを開始しました。この記事では活動を通じて学んだアクセシビリティの課題発見方法と解決方法を紹介します。

# ウェブアクセシビリティとは？

デジタル庁の[『ウェブアクセシビリティ導入ガイドブック』](https://www.digital.go.jp/assets/contents/node/basic_page/field_ref_resources/08ed88e1-d622-43cb-900b-84957ab87826/53f76eaa/20240329_introduction_to_weba11y.pdf)では、ウェブアクセシビリティは以下のように定義されています。

> ウェブアクセシビリティは、利用者の障害

PythonでHTMLをPDF、画像、XML、XPSに変換する

ウェブコンテンツは、情報発信の主要な形態のひとつです。 ウェブ開発では、HTMLファイルをPDF、画像（PNGやJPEGなど）、XML、XPSなど、さまざまな形式で保存したり共有したりする必要が生じることがあります。 これらのフォーマットにはそれぞれ利点があり、異なる目的に適しています。 この記事では、[**Spire.Doc for Python**](https://www.e-iceblue.com/Introduce/doc-for-python.html) ライブラリを使用してHTMLドキュメントをこれらの形式に変換する方法について説明します。

## Python Wordライブラリをインストールする
始める前に、以下のpipコマンドを使用して[Spire.Doc for Python](https://www.e-iceblue.com/Introduce/doc-for-python.html)をインストールすることができます。
“`
pip install Spire.Doc
“`

Spire.Doc for PythonはPython言語をベースとした文書処理

学習日記（エンジニアへの道）

CSSの基礎を学ぼう②〜文字・寸法の装飾〜
①エリアを作る要素
②一般的な装飾の設定（背景色・テキスト・グラデーション・透明度）
③余白の設定（外側・内側の余白・枠線の設定）
④要素のサイズ変更（高さ・幅）
⑤セレクタの複数指定

CSSの基礎を学ぼう③〜エリア配置の装飾〜
　今回の学習では、要素の配置について学習。
前回学習したpadding、marginとは違い、一定間隔で要素を配置できるように学習を進める。
ブロック要素とインライン要素の理解度によって学習の進み具合が変わってくるので、心配な方はブロック要素とインライン要素について再度見直し！

学習の内容
①ブロック要素の性質
②要素の配置
③displayの使い方

特に③displayプロパティの使い方は整理が必要かな
ブロック要素、インライン要素を変更できるプロパティ
『flex:横並び』display: flex ;
・水平方向の配置調整にはプロパティ
・垂直方向の配置調整にはプロパティ
を使用しますので、とセットで覚える！！
・flex-st

htmxとは何なのか？

htmxは、HTML属性を使用してAJAX、CSSトランジション、WebSockets、Server Sent Eventsを直接操作できる軽量なJavaScriptライブラリです。複雑なJavaScriptコードを書くことなく、シンプルでパワフルなハイパーテキストベースのモダンなユーザーインターフェースを構築することを可能にします。

**htmxの特徴**

* **シンプルで軽量**: htmxはわずか14KB（gzip圧縮時）の軽量ライブラリであり、依存関係もありません。
* **使いやすい**: htmxはHTML属性を使用して動作するため、JavaScriptの知識がなくても簡単に使用できます。
* **パワフル**: htmxは、AJAX、CSSトランジション、WebSockets、Server Sent Eventsなど、モダンなWeb開発に必要な機能をすべて備えています。
* **アクセシビリティ**: htmxは、JaJavaScriptが無効なユーザーでもセマンティックHTMLの利用、プログレッシブエンハンスメント、フォールバック機能等により動作します。
* **

Webアプリ開発 マイページ編集編

# 初めに
webアプリの開発ができたので、どんな感じで作成したのかをまとめたいと思います。
今回はマイページ編集についてです。
# 開発環境

macOS Sonoma 14.4.1
PHP 8.3.3
Laravel Installer 5.2.0
Laravel Framework 11.0.5

# ソースコード

https://github.com/opatu07/portfolio

# 考えたこと
## マイページ編集
### ビュー
マイページに移動する前に
自分の名前を押すとドロップダウンのメニューが出てくるようにして、「プロフィール」を押すとマイページ画面に飛べるようにしました。
マイページはLarave Breezeを参考にしました。

![updateProfile.png](https://

【CSS】ボタンの外側に半透明のoutlineをつける

## 背景

ボタンの外側に半透明のoutline（外枠）をつける方法がわからなかったため、備忘録的に記載する。

## 実装結果


## 実装

“`html:html

ボタン

“`

“`css:css
.btn-outside {
padding: 4px;
background-color: rgba(243, 240, 242, 0.1); // 半透明に指定
width: 352px;
height: 64px;
border-radius: 32px;
}

.btn {
width: 100%;
he

Markup言語の備忘録 (超初心者)

CSS fileを作成して、簡単なウェブページを作ってみた

CSS (Cascading Style Sheet)

CSSはHTMLで表現可能と考えられるデザインの大部分を実現できる要素を取り入れつつ、新たなデザイン機能を備える。

1. ページを表示するメディアに合わせてスタイルシートを切り替えることで、メディアごとに表示を変化させることができる。

2. ウェブブラウザ、ウェブサイト制作者、ユーザがそれぞれ定義した CSSのもたらす効果を重ね合わせることができる

CSSはhtml fileに対してデザインを施すためのfileと言える

1) セレクター:

▽要素のタイプ（例えば、< p >要素など）にスタイルを適用します。

“`css:type_selector.css
p {
color: blue;
}
“`

▽特定のクラス属性を持つ要素にスタイルを適用します。同じク

Python初日

HTMLがなんとなく掴めてきたので、Pythonを触ってみた。

VScodeで伝統のHello World!を記述し、ターミナルで表示されるかチェック。

Hello World!を表示

print("Hellow World!")

【CSS】position: fixed の使い方

## 基本的な使い方
ある要素を画面に固定配置する際に使用される。

<固定ヘッダーの例>
“`html

これはヘッダーです。

“`

“`css
.header {
/*ヘッダーを上部に固定*/
position: fixed
top: 0;
}
“`

## z-indexについて
position: fixedと併用して使用する。
要素同士の重なり順を指定する。

“`css
.header {
/*ヘッダーを上部に固定*/
position: fixed
top: 0;
/*数字が大きいほうが上のレイヤーになる*/
z-index: 10;
}

“`

【React】Buttonの有効・無効状態でcssを分ける

“`typescript:sample.tsx
//ボタンの状態
const [disabled, setDisabled] = useState(true);
“`

“`html:sample.html

“`

“`scss:sample.scss
.testbutton {
～
～
button:disabled {
～
～
}
button:enabled {
～
～
}
}
“`

【React】テキストボックス1でエンターキーを押してテキストボックス2にフォーカスを変更する

タイトル通り、Reactでテキストボックス1でエンターキーを押してテキストボックス2にフォーカスを変更できるよう実装します。

“`html:sample.html

テキストボックス1

テキストボックス2

“`

“`typescript:sample.tsx
const handleKeyDown = (e: React.KeyboardEvent) => {
if (e.nativeEvent.isComposing || e.key !== “Enter”) return;
// 次のテキストボックスへ飛ばす処理を記載
document.getElementById(“

月相・休日付きカレンダー

「[Date に休日情報を追加した派生クラスを作ってカレンダーを表示する](https://qiita.com/ikiuo/items/4ab99731ecac076f3608)」に「[月の満ち欠けの簡易表示](https://qiita.com/ikiuo/items/88037ba8e0238c6a0ff2)」と月相を求める処理を追加して、背景に目安となる月相を表示してみる。

月相の計算 (JavaScript)

“`javascript:
/*
* 月相の計算
*
* 計算方法は下記のものを使用しています
* 書籍：天体の位置計算(増補版) [長沢 工 著]
* 【7-2表】月の位置の略算式（海上保安庁水路部による）
* 【7-3表】太陽の位置の略算式（海上保安庁水路部による）
*/
class MoonPhaseRC {
static Tbase = Date.UTC(1975, 1-1, 0);

/*
* コンストラクタ
* 引数は日時(Date コン

【HTML】要素を追加・移動する 4メソッド【JS】

# はじめに

HTMLに要素を追加・移動をするには
– `prepend()`
– `append()`
– `before()`
– `after()`

の4つのメソッドを使用します。

# 4メソッドの違い

– `prepend()`：子要素として先頭に挿入
– `append()`：子要素として末尾に挿入

– `before()`：同じ階層の要素として上に挿入
– `after()`：同じ階層の要素として下に挿入

正確な説明ではないですが、イメージを掴むには十分かと思います。
## 要素の追加

CodePenの使い方

| |
|:–:|
||
|【使い方】Resultをクリック|
|![スクリーンショット 2024-05-0

javascriptで作るゲーム【ジャンケンマンフィーバー】表示処理編

前回まではこちらを参照してください。
https://qiita.com/tri-comma/items/e9790b420d9786f91149

表示は何で実装しようか考えた結果、canvasにしました。
まだメダル枚数表示とか音とか、実装すべきものは残ってますが、いったん出来たところまでで記事にします。
最後に動くソース一式を掲載しますが、まずはhtmlからどうぞ。

# HTML部分

シンプル。

“`html