今さら聞けないHTML　2023年09月22日

【HTML】inputタグにinputmodeを設定してみよう！

?inputmodeを設定してみよう！
✨スマホユーザーのユーザビリティ向上✨

?電話番号のフォームをタップしたら
　　数字キーボードを表示したい！

?いちいちひらがなから数字キーボードに
　　変更するのがめんどくさい！

そんな方はぜひ！

?Youtube

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2525847/c636e46e-9

デザインパターン[MVCの章]

## 1. はじめに

### MVCとは？
MVC（Model-View-Controller）は、アプリケーションの構造や役割を分離するためのデザインパターンです。特にウェブアプリケーションやGUIアプリケーションでよく利用されます。

### なぜMVCが必要なのか？
MVCは、アプリケーションの各部分が独立して動作することで、メンテナンスや拡張が容易になるという利点があります。

### 注意点
注意というか前提として学んだもののまとめとして書いたので認識が間違っていること,もっと深ぼった方がいい部分も多々あろうと思います!!
その際はぜひコメントで教えてください!!
この記事はお前らと作っていくぞ!!!
## 2. Model（モデル）の役割

### データ管理とビジネスロジック
モデルはデータの取得や保存、ビジネスロジックの適用などを行います。

### データベースとの連携
多くの場合、モデルはデータベースと連携して動作します。

### モデルの例と実装
“`python
from sqlalchemy import Column, Integer, String

【HTML】imgタグには alt、width/height、loading=”lazy”を設定しよう！そして補足decording=”async”

?imgタグにはこれを付けよう！

今日は動画にしましたが画面があまり動かないので
ラジオ感覚で聞いていただければ嬉しいです?

?Youtube

?decording=”async”について詳しく調べてくれている記事はこちら！
https://zenn.dev/ixkaito/articles/deep-dive-into-decoding

もう、、すごいです！（語彙）

ブラウザ拡張機能プログラムの練習として広告を消してみる

[MDNのブラウザー拡張機能](https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions)を見つつ広告を消すプログラムを作ってみた。

https://github.com/ikiuo/google-chrome-extension-admodifier

処理する項目は少ないが、実行タイミングの罠は沢山ありました。

input type=”date”, “time”の途中入力バリデーションをしてみる

# 結論
input type=”date”, “time”を利用する際に、以下のプロパティを使うことで、入力値が正常かどうか（途中までしか入力されていないか）のチェックができます。
“`validity.badInput“`
https://developer.mozilla.org/ja/docs/Web/API/ValidityState/badInput

# 実装サンプル
“`
var isBadInput = document.getElementById(”).validity.badInput;
if (isBadInput) {
console.log(‘正しい形式で入力してください。’);
}
“`

input type=”date”, “time”を使わずにdatepickerなどで実装したほうがリッチに

【備忘録】Flaskで家計簿アプリを作った

# 0. これはなに
* Webアプリなんも知らん人間が、勉強の一環として家計簿アプリを作ってみたので、その過程などを備忘録として残す
* 言語はPython、アプリケーションのフレームワークはFlask、データベース管理システムとしてはSQLiteを使った
* 他にもCSSフレームワークとしてBootStrapを使って、オシャレ（？）な感じの見た目にした


※[実装内容](https://github.com/Syuko4omi/kakeibo_app)はGitHubで公開しています

# 1. 概要・モチベ
* オタク活動用の出金管理アプリを作りたいと思ったので、アプリやHTMLの勉強がてら作ってみようと思った
* サービスごとに対してお金をどれくらい使っているかを記録し、それが設定したラ

月の満ち欠けの簡易表示

– CanvasAPI を使って、月相らしき簡易形状を表示します。
– スライダーを動かすと形状が変化します。
– 日時や月齢などの計算は一切行っていません。

See the Pen
月の満ち欠け by Ikiuo (@ikiuo)
on Pythonの標準ライブラリであるreを使ったHTML文書からのHTMLタグの消去

:::note info
**`OpenCV`** の不調( **`cv2.imshow()`** が使えない症状が発生)により投稿が遅れてしまいました。
記事を楽しみにしていただいている方は、お待たせしてしまい大変申し訳ございませんでした:bow:
現在は、 **`cv2.imshow()`** が問題なく使えています。
今後は、このようなこと(**記事の投稿が遅れる**)が無いよう最善を尽くします。

策としては、
– **事前にプログラムデータを作成**
– 記事を投稿する**直前**には**あまり環境をいじらない**

ようにすることで**余裕をもって**記事を投稿できるようにします
:::

# 目次
[はじめに](#はじめに)
[作成した経緯](#作成した経緯)
[実行環境](#実行環境)
[テキストファイル生成時の日付の取得方法](#テキストファイル生成時の日付の取得方法)
[テキストファイルのパスの設定方法

LiveEditを使ってフロント開発(SpringBoot)

## はじめに
### 対象者
– SpringBoot + Gradle + Tymeleafでフロント開発する方
– 対象スクリプト：html, css

# 前提
– Win11 WSL Ubuntus22.*
– Docker Desktop
– 開発環境が構築されていること
※開発環境が未構築の場合は下記URLをご参考に
https://zenn.dev/junki555/articles/4358b1c7ca169d

# 必要なもの
– IntelliJ IDEA 2023.2.2 (Ultimate Edition)
– Windows Terminal Preview

# SpringBoot設定

①application.propertiesをresources下へ配置
~~~src/main/resources/application.properties
src
└── main
├── java
└── resources
├── application.properties ←ココ
├── st

【初心者必見！】絶対パスと相対パス

https://youtu.be/bjF2D2zF4QA

# パスとは・・・
フォルダやファイルがある場所を指します！

# 絶対パス
例えば自宅には住所がありますよね？
その住所は全世界どこからみても絶対ココ！ですよね？
それが絶対パスです！
例）http://www.example.com/images/apple.jpg

# 相対パス
例えば郵便局はどこですか？と郵便局の目の前で聞かれたら、あなたは何て答えますか？
私は「目の前ですよ！」と答えると思います
この答え方は、自分からみてあっちこっちという見方をしていますよね？
これが相対パスです！
例）images/apple.jpg

HTMLでは＜a＞タグや＜img＞タグなどで使用します

### 【問題1】index.htmlにorange.jpgを＜img＞タグで表示したい


＜

じゃんけんアプリ　Vue.jsを勉強したし取り敢えずアプリを作ってみた。　Part１

ここまでVueの基本を勉強しました。
アウトプットの為にWEBアプリを作って行きたいと思います。

Vueを学んでいる中で最初に作ろうと決めていたものがあります。
　『じゃんけん』アプリです！！

理由は簡単、作りやすそうだから笑
最初から躓き、壁に当たりまくってもモチベが下がるので初心者の自分でもギリ超えれそうなものを選ばせて貰いました。

目標
ボタンを押したら変化を加える
・こちらの手によって相手の手を出す。
・最初から表示されている文字を消す。
・勝ち負けの結果を表示させる。
・相手の手を画像にて表示させる。
以上です。

ある程度構成が出来ているのでカチカチと終わらせます。

まずは、HTMLとCSSにて見た目を作ります。
ここは何なくクリア！
こんな所では転びません笑

次は、JavaScriputの動きをつけます。
ボタンを押したら文字を表示と非表示にして、
v-ifでじゃんけんの勝ち負けの条件式を書いて保存をしたら、、、、、、、、、

![スクリーンショット 2023-09-18 20.45.46.png](https://qiita-image-store.s3.a

zlibで圧縮されたswfファイル（CWS）を非圧縮のswfファイル（FWS）に変換するPHPコード

Flashのswfファイルは本体データ部分が圧縮されている場合があるようです。
それを非圧縮のファイルに変換するコードです。

swfを再生表示するJSのライブラリがいくつかありますが、ものによっては圧縮されていると再生できないライブラリがあったので調べて対応しました。
他の言語や圧縮形式でもほぼ同様の処理で対応できると思います。

“`PHP

【Instagram API】Instagram の投稿内容をサイトにも掲載したい

## はじめに
SNSを利用したブランディング・マーケティング活動が普通になってきている昨今、タイムラインをサイトに掲載しているところも少なくありません。
筆者が所属する制作会社にもSNSの投稿をサイトに反映したいという要望をいただくことがあり、Facebook や Twiiter だと比較的楽に実装できたのですが、Instagram の場合は **Instagram API を使用**する必要があって少し特殊でした（当該 Instagram アカウントのコンテンツ情報が記述された json データを利用することで実装します）。

そこで今回、筆者が実装した際の手順や注意事項、Instagram API で取得した各コンテンツへあてているCSS を紹介していきたいと思います。

::: note warn
WordPress を使用したサイトだと、Instagram の投稿内容をプラグインで比較的簡単に実装できる場合もあります。
:::

## Instagram API の使用
Instagram API を利用するには当然ですが、コンテンツを取得したい Instagram のアカウ

【HTML】タグ：種類ごとのサンプルコードと使い方ガイド

# 背景
`input`タグには`type`属性ごとに様々な種類があるので情報の整理として本記事を作成しました。
本記事では全種類ではないですが、よく見る`ipuut`タグの使い方をサンプルコードを例にまとめています。

# 本記事の対象
– タイトルに興味を持った方
– `input`タグの種類と使い方をザックリ把握した方
– とりあえず`input`タグをコピペで動かしたい方

# inputタグのサンプル例
– テキスト入力欄
“`html

テキスト入力

“`

– パスワード入力欄
“`html

パスワード入力

jQueryのキーボードライブラリを作りたい話

どうもAtsu1209です。
早速ですが、キーボードとボタンを連動させたいと思って
jQueryをいじってたら一つ思いついたことが…
ライブラリ化してどこでも使えるようにしよう!
ということで キーボードライブラリ(自分用)を作ります。
# jQuery読み込み
まず jQueryを読み込まないと何もできません
“`html:index.html

“`
これを読み込みたいhtmlに書きます。

# ライブラリ作成
早速JSをかきます。
“`javascript:lib.js
document.addEventListener(“keydown”, function(event) {
if (event.key === “1”) {
var button1 = document.getElementById(“button1”);
button1.click();

フォームのバリデーションチェック（jQueryボタン有効化編）

お世話になっております。コウヤです。

課題も並行しつつ、上級編へそろそろ進もうとしておりますが、フォームのバリデーションチェックに関して記事を書き忘れたのでここで紹介します！

過去にフォームのデザイン（テキスト・テキストエリア）について説明しました。こちらもあわせて確認していただければと思います。（必須ではありませんが、デザインをしているという前提で話を進めていきます）
https://qiita.com/ko0821/items/3359c891315a2b989f64

また、チェックボックスに関する記事やラジオボタンに関するデザインの記事のリンクもありますのでご確認ください。
【チェックボックス】
https://qiita.com/ko0821/items/d600bbe372e8146effda

【ラジオボタン】
https://qiita.com/ko0821/items/19c4c15ef9cf1aba6c20

【プルダウンメニュー】
https://qiita.com/ko0821/items/86a50198bf9a9ba51843

## バリデーションチェ

uBlock Origin (UBO) で、ネットを優しい世界に（見えるように）しよう

# この記事の目的
– ネットで嫌なものを見なくて済むようにする
– 邪魔な広告を非表示にする（よくあるやつ）
– **ニュースサイトで嫌なニュースだけ非表示にする（←特にこれ）**
– 対象ブラウザ
– Google Chrome/Microsoft Edge（本記事で説明）
– Firefox, Operaとかでもできるらしい
– 対象ウェブサイト（リクエストあれば追加します）
– Googleニュース
– Yahoo! ニュース
– BBC News
– Gigazine

手っ取り早く読みたい方は、[ここ](https://qiita.com/shtainze/items/1136dfc8e245f5c250fe#%E5%88%9D%E5%BF%83%E8%80%85%E5%90%91%E3%81%91%E3%81%AE%E8%A7%A3%E8%AA%AC%E3%81%A8%E3%82%8A%E3%81%82%E3%81%88%E3%81%9A%E4%BD%BF%E3%81%84%E3%81%9F%E3%81%8

Google Chrome 拡張 / 下準備として「空っぽのChrome 拡張を作り、ブラウザに認識させる」

ふと、自分のためのChrome 拡張を作ってみようかと

ふと、日々の仕事を効率化するための「Chrome 拡張」を自作してみようと思いました。

あくまで自分だけが使うものなのでストアで公開するつもりはなく、Google Chrome のデベロッパーモードで使えればそれでOK。

JavaScript とHTML は多少理解していますが、Chrome 拡張の作り方はさっぱり分からないので、自分がやりたいことや欲しい機能をひとつひとつ明確にしながら、学んだことを備忘録的に記事化してみようと思います。

今回やりたいこと

ということで今回は、この先のChrome 拡張開発の下準備として、「空っぽの（機能が一切ない）Chrome 拡張を作り、Google Chrome（ブラウザ）に認識させる」ということをやってみたいと思います。

Chrome 拡張を作るうえで必要なもの

• Google Chrome（ブラウザ）

<

CSSにクエリパラメータを設定してキャッシュクリアを実施

CSSなどの更新をした際に、修正が確認出来ない貯めキャッシュ削除のお願いをすることなどがあったため、CSS更新時にキャッシュをクリアするようにする。

“` “`
上記の様に記載されている読み込み箇所のファイルの末尾にクエリパラメータを設定する
“` “`
ファイル更新時にパラメータが変更されていればブラウザが自動ででキャッシュ更新を行ってくれます。

自前サイトを３ヵ国語対応させたい話

僕は、将来スペイン語圏に移住したいという夢を持っています。

若いうちに稼げるだけ稼いで、早くリタイアして、その国で多くを求めず幸せに暮らす。

今から興味津々なので、スペイン語も勉強しています。

なので、自前の創作サイトも勉強がてらスペイン語に対応させることにしました。

サイト自体はすでに英語に標準対応しているので、あとは適切な表現に変えていくだけなのですが、

まだ始めたてなのでそれがわからず…

それでも、とりあえず入口ページだけでもスペイン語を追加しようと思い立ったのでした。

そのコードがこちらです。

“`HTML

Select language: