Swift UIとWebとの表示制御の仕方の違い
## はじめに
SwiftUIで作るアプリと、WebのようなHTML、CSSで作る画面の作り方の違いを通してSwift UIというものに触れたいと考えています。
SwiftUIはWebと比較すると、難しい言い方をすると、Viewプロトコルに準拠したコンポーネントを作成してUIを構築するというところです。
SwiftUIはHTMLとCSSでのレイアウトとスタイル指定に似た役割を果たします。
## 例：SwiftUIでの`VStack`と`HStack`
ここでは、SwiftUIの`VStack`と`HStack`を使用した例と、それに相当するHTMLとCSSのコードを示します。
縦に文字を表示する場合、横に表示する場合の例になります。
### SwiftUI の例
SwiftUIでの`VStack`と`HStack`の使用例です。これは縦と横に並べたテキストを表示するシンプルなレイアウトです。
“`swift
VStack {
Text(“上のテキスト”)
HStack {
Text(“左のテキスト”)
Text(“右のテキ
過去に作ったものを1つにしたものです。
入力されたテキストを変換したり、文字コードの確認ができます。
– 正規化：NFC,NFD,NFKC,NFKD の各種で正規化します
– 変換された文字は背景の色が変化します
– コードポイント：文字ごとに文字コードをルビとして表示します
– innerHTML：出力タグの innerHTML に代入します
– 入力されたテキスト次第では正常動作しなくなるので注意してください
– 英数字(他)変換：ASCIIの英数文字をボールドやイタリックなどの文字コードに変換します（できない場合もあります）
– “Sample” → “𝐒𝐚𝐦𝐩𝐥𝐞”, “𝑆𝑎𝑚𝑝𝑙𝑒”, “𝕊𝕒𝕞𝕡𝕝𝕖” など
– 円内文字への変換：円の中に該当文字があれば変換します
– “SAMPLE 10” → “ⓈⒶⓂⓅⓁⒺ ⑩”, “🅢🅐🅜🅟🅛🅔 ❿” など
– 丸括弧付き文字への変換：丸括弧で括られた文字との対応があれば変換します
– “(祝) (A)(B)(C) (a)(b)(c) (10)” → “㈷ 🄐🄑🄒 ⒜⒝⒞ ⑽”
– 異字体設定 : 各文字に
browser上で動作していたものに限定。知られていないとする根拠はそこら中で引用されまくっていないからですが、私の調査不足という可能性も否定できません。そんな真偽の程はどうでもいいかどうか定かではないかもしれないので、とっとと紹介していきます。
## u-lzss
lzss系の圧縮を施します。圧縮後はUTF8文字列となります。
[Demo](https://web.archive.org/web/20080203052918/http://llamerada.sakura.ne.jp/u-lzss/)
[source](https://storage.googleapis.com/google-code-archive-source/v2/code.google.com/u-lzss/source-archive.zip)
## LZ77JSCompressor
名前通りLZ系の圧縮を施します。今はひっそりとお休みになっておられます。
[LZ77JSCompressor](https://demo.java2script.org/lz77js)
## JSquash
手始めに不要な空
こんにちは。
Bootstrapを学ぶ必要ができたので勉強中ですが、意味が分からないところにぶつかったのでメモ書きです。
これを見た誰か、どうか教えてほしいです。それだけが私のなんとかかんとか。
そういえば正式名称は __Bootstrap__ のみで
* BootStrap
* Boot Strap
* bootstrap
* Twitter Bootstrap
など、すべて誤記みたいですね。
気を付けないとBootstrap警察が出てくるよ。
# 現在の理解度
* グリッドシステムは「横を12分割したレイアウトのいくつを使いたいか？」を指定することでいい感じの見た目にできるもの
* 列のグリッド数が12未満の場合、空列が左詰めされる
* 列毎に12を超える場合、表示が開発者の期待した通りにはならない（次段に移ったり）
* グリッドを入れ子構造にする場合、入れ子の中がまた12分割される
→ 例えば8:4に分けた場合、8側をさらに分割する場合は4:4でなく6:6や4:4:2で分割する
* “row-cols-n”（nは任意の自然数）を使う場合上記の制約は解消できる
:::not
こういうやつ。再生中によく出るやつ。
HLSとかプレイヤーを自分でゴニョゴニョ実装してた時、個人的にすげぇ困ったのでメモる。
HLSのやり方は https://stream.77lab.cloud のソースを開発者ツールで見てくれたらいいよ。
今回はこの「ロード中だお少し待て」の探知方法を書くので。
こんなVIDEOタグを使っている前提だお:
“`
“`
したが再生が詰まった時の
“`
VIDEO_EL = document.getElementById(“VIDEO”); //VIDEOタグを取得するお
VIDEO_EL.addEventListener(‘waiting’,
HTMLとCSS Progate
【HTML】
・最初に〈!DOCTYPE html〉を付ける。
・HTMLは細かい要素の〈head〉とHPのデザインに関わる〈body〉に要素が分けられる。
・〈head〉は
〈title〉(一番左上に出る小さいタイトル)や、
〈meta charet = utf-8〉で文字化けしないように文字コード(英数字だよーとか)の指定、
〈link rel=”stylesheet(読み込むファイルの種類を宣言)”href=”stylesheet.css(読み込むファイルの名前を宣言)”〉でCSSの読み込み(別のファイルと連携するよー)などを行う。
レスポンシブデザインを適用する準備としてviewportを設定する↓。
〈meta name=”viewport”
content=”width=device-width,initial-scale=1.0”〉
・〈body〉はさらに
ヘッダー→〈div class=”header”〉〈/div〉
メイン→〈div class=”main”〉〈/div〉
フッター→ 〈div class
# はじめに
私は初学者のエンジニアです。
実務を通しての気付きなどを記事にしていきます。
これからエンジニアを志す方や同じ初学者の方の力になれれば幸いです。
# チェックボックスでフォームの活性・非活性を切り替える
・チェックボックスでのアンケートで、「その他」を選んだ際のみ理由を記述してもらう
入力フォームをデザインしている中で、こうった実装が必要となりました。
「その他」の場合のみ入力した内容を受け付けたいので、チェックが入っていない時に書かれたら困る。
バックエンドでフラグを使って実装しても良いですが、わざわざ書くまでもないしそもそも入力出来ないようにしたらええやん、と。
そこで、
① 遷移した段階の初期画面ではテキストボックスは非活性で入力できない
②「その他」にチェックが入ったらテキストボックスを活性化させる
③「その他」のチェックを外したら再び非活性とする
これをJavaScriptで書くことにしました。
# 実装方法
まずはHTMLでチェックボックスとテキストボックスを実装します。
“`HTML:HTML
JavaScript: ALZ_JAの圧縮力を上げまくる企画
[ALZ_JA](https://web.archive.org/web/20081217022409/http://nurucom-archives.hp.infoseek.co.jp/digital/alz-ja.html)とはかつてweb業界で暗躍しまくったかどうか定かではないもしれないとされる程の名作programです。[AlphamericHTML](https://web.archive.org/web/20100625005602/http://nurucom-archives.hp.infoseek.co.jp/digital/Alphameric-HTML.html)同様、web素材(html,js,css等)を圧縮して下さるのですが、動作速度はほぼ変わらないのに圧縮率はそれ以上という代物です。その驚異的な性能により、web開発者を度肝を抜きまくり震撼させ恐怖のどん底に叩き落としたわけがないのは言うまでもありません。
たださすがに約20年前の中古programですので、現代の超巨大過ぎるweb素材の圧縮には不向きとなりつつあります。そんな名作を蘇らせるべく改良を施すの
PDFファイルは、文書を共有および配布するための人気のある選択肢ですが、PDFのコンテンツを抽出して再利用することは非常に難しい場合があります。幸いにも、Pythonを使用してPDFファイルをHTMLに変換することは、PDF情報の取得と再利用のための優れた解決策を提供します。これにより、アクセシビリティ、検索性、適応性が向上します。さらに、HTML形式では、検索エンジンがコンテンツをインデックス化できるため、ウェブ上でより見つけやすくなります。さらに、Pythonの柔軟性と使いやすさにより、初心者から経験豊富な開発者まで、**PDFをHTMLに簡単かつ効率的に変換**するためにPythonを使用することができます。
この記事では、**PythonプログラムでPDFをHTMLに変換する方法**に焦点を当てています。以下のトピックが主に含まれます：
– **[Pythonを使用したPDFからHTMLへの変換の概要](#pythonを使用したpdfからhtmlへの変換の概要)**
– **[Pythonコードを使用した単一のHTMLファイルへのPDF変換](#pythonコードを使用した
## ♰はじめに♰ 🦔
初投稿である。
JS初心者がクイズゲームを作ってみた。(製作時間20分)
最初はバニラJSだけで書こうと思ったが、古よりの技術「jQuery」を取り入れようと思う。
まずはHTML。
“`index.html
asobi
```
で、それを適用させる
```HTML:HTML
この後ろで改行したいここで改行したい
```
そうするとこうなる
```HTML:view
この後ろで改行したい
ここで改行したい
```
これで終わりです。
## つまりどういうことかを簡単に説明すると
◆ wbrタグ
テキストが親要素の幅に収まりきらない時、特定の位置で改行するように指示し
## はじめに
この記事では、Android 14で導入されたウェブ開発の課題について取り上げます。具体的には、type="file" accept="image/*" というinput elementでは、ユーザーが写真のアップロードかカメラの使用かの選択ができなくなった問題です。この記事では、何が変わったのか、既存のアプリにどのような影響があるのか、そしてAndroidだけでなくiOSを含む全OSで一貫性のあるアプリを実現可能な修正方法を2つ紹介します。
## 問題の理解
まず、Android の以前のバージョンと Android 14 が画像ファイルinputをどのように扱っているかを理解しましょう。まず、画像ファイルのみのinput elementを含むシンプルなウェブページを作成します。次に、iOS の Safari と Android 14 および 10 の Chrome でページを開きます。
```html
```
iOS での動作を見てみましょう。選択肢を提供するポップアップウィンドウが
# 課題
Qiitaの記事のマークダウンで`#`で始まる行は`h1`、`##`の場合は`h2`という記法があります。
前々から思ってたのですが、フォントサイズがちょっと違うくらいだと、違いがわからない。つまり今どのレベルを読んでいるのかわからなくなります。
この記事では、Qiitaでの根本的な解決方法ではなく、自作のブログシステムとかでMarkdownを読み取ってh1とかを書く場合の話が主です。
具体的には、`1.1.2.` みたいな微妙なパラグラフのとき、`1.1.2.`なのか、`1.2.`なのか、実は`2.`なのか、みたいな。右に出るインデックスみたいなとこではちゃんと字下げされてるんですけど。
本来のhighlightの役割から外れるけど、ここでやってみますと、、、ここからサンプル↓
----
# 1. トップ（h1）
文章サンプル１２３。。。
## 1.1. ひとつ下げた２つ目（h2）
文章サンプル１２３。。。
### 1.1.1. ３つ目（h3）
文章サンプル１２３。。。
#### 1.1.1.1. ４つ目、段落細かすぎ（h4）
文章サンプル１２３。。。
### 1.
[AlphamericHTML](https://web.archive.org/web/20100625005602/http://nurucom-archives.hp.infoseek.co.jp/digital/Alphameric-HTML.html)とはかつてweb素材の圧縮で一世を風靡しまくったかどうか定かではないかもしれないとされる程の伝説のprogramです。browser上で動作し、圧縮率、動作速度、使い勝手どれをとっても文句のつけどころがないもの **でした**。
たださすがに約20年前の化石ですので、もはや現代の巨大過ぎるweb素材の圧縮には実用的ではなくなりました。まあそんな歴史的裏話はどうでもいいかもしれないので、そろそろ本題にすり替えていきましょう。
## 仕様
* 文字列(Unicode)を`[0-9A-Za-z_]`の63種からなる文字列に変換
* LZ77系の圧縮法を採用(圧縮率60～70%)。無圧縮も可。
* 辞書(滑走窓)819文字
* 一致長3～64文字
* 半角空白1024個のpreset辞書搭載
圧縮関数
```js
EncodeAlph
## 横並びってどうやるんだっけ？
ってなる度に検索しちゃうので覚えるためにも記事にしていきます。
## Flexboxで横になりました
なぜフレックスボックスがいいかはMDNさんに書いてありました。
浮動要素と位置指定などはイライラするから らしいです。
https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Flexbox
```.html
YOKO1
YOKO2
YOKO3
YOKO4
YOKO5
YOKO6
```
```.css
.yoko{
# 概要
写真中の長方形（被写体）を正面向きに補正します。
以下、末尾プログラムのスクリーンショットです。
# 手法
次の図は透視投影された長方形とします。
内側の四角形は立体感を出すための模様です。全てテキトーに描いたので正確な投影図ではありません。
頂点 $p_{n=(1,2,3,4)}$ の画面上の座標を $ p_n \left( s_n , t_n \right) $ とします。
対角線の交点 $q$ の座標<
