- 1.
- 1.0.1. 【JavaScript】querySelector よりもパワフルに DOM からノードを取得しよう！【XPath】
- 1.0.2. 素数判定関数を使って簡単なゲームを作った話③
- 1.0.3. 素数判定関数を使って簡単なゲームを作った話②
- 1.0.4. テンプレートファイルでも自動補完を使いたい
- 1.0.5. 素数判定関数を使って簡単なゲームを作った話①
- 1.0.6. 素数判定関数を使って簡単なゲームを作った話(目次用)
- 1.0.7. Brainfuckを簡単に書けるサイトを作った
- 1.0.8. htmlとhtmの違い
- 1.0.9. MBOX を HTML に変換し、Chrome で MBOX ファイルを開くにはどうすればよいですか?
- 1.0.10. img{width:100%,height:auto}の認識を改めた話
- 1.0.11. test20240125
- 1.0.12. 改行をコントロールするためのカンタン手法
- 1.0.13. formタグの外の要素もリクエストパラメータに渡したい！を解決する方法
- 1.0.14. JavaScript+HTMLによる844bytesのFile圧縮伸長program(圧縮力gzip以上)
- 1.0.15. 【CSS】とにかく楽に簡単にページ遷移時のふわっとアニメーションを実現する方法。
- 1.0.16. ChatGPTによるコピペ差異計算
- 1.0.17. JavaScript（php smarty内 .tpl 記述） ラジオボタン、テキストエリア 制御
カスタムタグヘルパーでタグの表示／非表示切り替え（権限対応）ASP.NET CORE Custom TagHelper
## やりたいこと
・ASP.NET CORE 環境下
・Webアプリ
・ログインユーザーの権限でタグ（\)の表示／非表示切り替え
・できるだけ簡潔に実現## 実行結果イメージ
利用者=ALL（全権限）の場合
利用者=test1の場合
:::note info
test2権限が割り振られていた test2ボタンと test2 divが非表示になった。
:::## 実装方法（HTML側のイメージ）
“`html
GoでSSG(静的サイトジェネレーター)を手作りしてみた
## 目的
この記事([Writing a Static Blog Generator in Go](https://www.zupzup.org/static-blog-generator-go/index.html))を読んでから自分でもやってみたいなと思っていたのでゴリっと作ってみました。
既存のSSGの置き換え等々は全く考えておらず、あくまでも興味駆動の開発になります。
## 作ったもの
https://github.com/K-Sato1995/go-simple-ssg
↑を使用して作った静的サイト
https://go-simple-ssg.vercel.app/
## 構成
やった事としては大枠
– マークダウン(記事のコンテンツ)＋テンプレート(HTML)を元に静的なファイルを生成する部分
– CLIで↑を利用して誰でもプロジェクトの骨組みができるようにする部分だけなので大したことはしていないのですが全体感としては下記のようになりました。
“`
./
├── parser/ (MarkdownをパースしてHTMLに変換する部分)
│ ├HTMLであまり知られていないタグ（自己偏見）
# おはよう
皆さん、おはようございます・こんにちは・こんばんは・おかえり(?)
今回はタイトル通りHTMLであまり知られていないタグについて紹介します。
# むっちゃ短い本編
皆さんはHTMLといえば``や`
`を思い浮かべると思います。いろいろありますが、HTMLでは独自のタグが普通利用できません。Custom Elementsを使うのは別の話になりますが、例えば`
`というタグを作ってもダメなわけです。
## タグ10選
### No.1
``
`` は HTML の要素で、ページが読み込まれたときにすぐにレンダリングされるのではなく、実行時に JavaScript を使って後からインスタンス化することができる HTML を保持するためのメカニズムです。https://developer.mozilla.org/ja/docs/Web/HTML/Element/template
### No.2
``
`` は HTML の要素で、文書 【JavaScript】querySelector よりもパワフルに DOM からノードを取得しよう！【XPath】
## 1. はじめに
これは [XPath](https://developer.mozilla.org/ja/docs/Web/XPath) を利用して DOM からノードを取得する方法を紹介する記事です。
最近 XPath の存在を知り、「XPath を利用して `document.querySelector()` のように DOM からノード（要素）を取得したい！」と思い立ったため、その方法をまとめていきます。
:::note warn
最近 XPath の存在を知ったばかりの拙いエンジニアによる記事です。誤りや不適切な記述がある場合はご指摘ください。
:::## 2. 結論
XPath を利用して DOM からノードを取得する関数です。取得したノードは配列に格納して返却します。
“`js
const getNodesByXPath = (xpath) => {
const evaluator = new XPathEvaluator();
const expression = evaluator.createExpression(xpath);
co素数判定関数を使って簡単なゲームを作った話③
ご覧いただきありがとうございます。
この内容は、複数に分けて投稿しています。全体をご覧になりたい方は、以下のリンク先よりご確認ください。https://qiita.com/hitoki_univ/items/8e3feab0add17befc700
前回の内容については、こちらからどうぞ。
https://qiita.com/hitoki_univ/items/5893785797243794d33a
# 今回やること
第2回では、ゲームのタイトル画面を作成しました。
今回は、タイトル画面からのリダイレクト先である、プレイヤー名と制限時間を設定する画面を作成します。# プレイヤー名、制限時間の設定画面
前回作成したページでは、選択したプレイヤー人数に応じて異なるページにリダイレクトするようにしました。
今回はそのリダイレクト先のページを作成するので、複数のページを作成します。しかし、基本構造はどのページも同じなので、今回は2人用のページを主に確認していきます。### HTML
“` html
素数判定関数を使って簡単なゲームを作った話②ご覧いただきありがとうございます。
この内容は、複数に分けて投稿しています。全体をご覧になりたい方は、以下のリンク先よりご確認ください。https://qiita.com/hitoki_univ/items/8e3feab0add17befc700
前回の内容については、こちらからどうぞ。
https://qiita.com/hitoki_univ/items/e1b8ec9e6c7c39d5e761
# 今回やること
前回は、これから作成するゲームの概要などについて説明しました。
今回は、そのタイトル画面を作成していきます。# ゲームのタイトル画面
タイトル画面では、プレイヤー人数を選択し、人数に対応したプレイヤー名入力画面に遷移する機能を実装します
1. プレイヤー人数を選択し、人数に対応したプレイヤー名入力画面に遷移する機能
2. 過去のランキングを表示する画面に遷移する機能具体的なコードは以下の通りです。
### HTML
“` html
テンプレートファイルでも自動補完を使いたい## はじめに
業務の中でVSCodeでSmartyのテンプレートファイルを編集する際、HTMLの自動補完機能がうまく機能しないことがありました。VSCode上でSmartyテンプレートファイルにおいてもHTMLの自動補完を有効にする方法について紹介します。
## 手順
1. 設定ファイルを開く
– Windowsの場合: “`Ctrl + ,“`
– Macの場合: “`Cmd + ,“`
1. テンプレートファイルをHTMLに関連付ける
“`
“files.associations”: {
“*.tpl”: “html”
},
“`
1. 該当拡張子のファイル内で補完出来ることの確認をする
– タグの自動補完: “`タグ名 + Tabキー“`
– タグ内にクラス名の付与: “`タグ名 + クラス名 + Tabキー“`## まとめ
上記設定をすることでかなり作業の効率化ができたと思っています｡
HTMLに使用できる拡張機能等も利用可能になるので是非設定してみてください｡素数判定関数を使って簡単なゲームを作った話①
ご覧いただきありがとうございます。
この内容は、複数に分けて投稿しています。全体をご覧になりたい方は、以下のリンク先よりご確認くださいhttps://qiita.com/hitoki_univ/items/8e3feab0add17befc700
# ゲームの概要
このゲームは、複数人による対戦形式を想定して作成しています。
動作の概要は以下の通りです。①プレイヤーの人数を選択
②プレイヤーの名称を入力
③順番に素数を入力していく。この時、前回より大きな素数を入力する必要がある。制限時間内に前の人より大きな素数を見つけられないとゲームオーバー今回は、生徒たちにより楽しみながらプレイしてもらえるように、ランキング機能も作成します。
ちなみに、前の人より大きな素数を入力していく、という遊び方は、学習支援事業で会った生徒さんの発案です。# 次の投稿について
次回(第2回)は、このゲームのタイトル画面を作成します。
~~投稿次第、リンクを追加するので、ぜひご覧ください~~
以下のリンク先から、是非ご覧ください。https://qiita.com/hitoki_univ/i
素数判定関数を使って簡単なゲームを作った話(目次用)
こんにちは。
私は、週に何度か某市の学習支援事業の指導員として活動しています。そこでは中学生に指導を行っているのですが、その休憩時間に、生徒たちに多少なり頭を使いながら遊んでもらえるものを作れないかと思い、今回のゲームの開発に至りました。
以前の大学の授業で、JavaScriptで素数判定を行うプログラムを作成していたので、今回はそれを活用して、Webアプリケーションの形式でゲームを作っています。# この投稿の構成
一度にすべての内容を書くと長くなりそうなので、何回かに分けて投稿します。このページは、その目次のような形で使っていければと思います。# 第1回
1回目は、作成したゲームの概要等について簡単に説明しています。
詳しくは、↓のリンク先をご参照ください。https://qiita.com/hitoki_univ/items/e1b8ec9e6c7c39d5e761
# 第2回
2回目は、ゲームのタイトル画面を作成します。
詳しくは、↓のリンク先をご参照ください。https://qiita.com/hitoki_univ/items/589378579724379
Brainfuckを簡単に書けるサイトを作った
[Brainfuck Compiler](https://shinoshike005.github.io/brainfuck/compiler/)
打つコード量は増えますが、圧倒的に見やすくなります
# サンプル
“`text:足し算
def x 1
def y 2goto x
change = 4goto y
change = 7[
goto x
change + 1goto y
change – 1
]
“`
↓
“`brainfuck:足し算
>++++>+++++++[<+>-]
# メモリ1に4+7で11が入る
“`
“`text:かけ算def res 1
def a 2
def b 3
def copy1 4
def copy2 5
def copy3 6def zero 48
goto a
input 0
change – zero
goto b
input 0
change – zero# copy1へaを移動する
goto a
[
goto copy1
change + 1
goto a
change – 1
]g
htmlとhtmの違い
# 1.はじめに
HTMLファイルを出力したところ、拡張子として「.html」を想定していたが「.htm」であったため、これらの違いについてまとめます。# 2. htmlファイルとhtmファイルの違い
ファイル名の最後につけて種類を表す拡張子ですが、htmlとhtmはどちらもhtmlファイルであることを意味します。つまり内容に関する違いはなく、単に文字数が異なるだけです。
拡張子は元々アフファベット3文字でつける慣例があったため、htmlの3文字バージョンとしてhtmが生まれました。# 3.さいごに
htmlとhtmに違いがないことを理解していただけたら幸いです。MBOX を HTML に変換し、Chrome で MBOX ファイルを開くにはどうすればよいですか?
このブログ記事では、MBOX ファイルを HTML に変換する方法について適切なガイダンスを提供します。 ただし、最初に MBOX ファイルを HTML にエクスポートする必要がある理由を見てみましょう。 次に、専用ツールを使用してMBOXファイルをHTMLに切り替える方法と、HTMLファイルをChomeで開く方法を説明します。
**[ダウンロード中](https://www.datavare.com/dl/n/mboxtohtmldemo.exe)**
「重要な情報を含む孤立したファイルを所有している場合。MBOX ファイルを開くためにどのインターネット ブラウザを使用しますか?Chrome または別のブラウザです。Google Chrome で MBOX ファイルを開く方法をお手伝いします。理由を簡単に説明します。 ただし、最初に MBOX ファイルを HTML に移行する必要があります。
## MBOX を HTML ファイルに変換する動機
さまざまな理由から、ユーザーは MBOX ファイルを HTML に変換する必要があります。 まず、MBOX メールボックスからのメー
img{width:100%,height:auto}の認識を改めた話
## はじめに
現役エンジニアではありません。
2020年ごろにほんの少しWeb系フリーランスの方のお手伝いをしていた程度です。
現在はこれからWebデザイナーを目指す方に、HTML/CSSのさわりを教える仕事をしています。ですので、現場でhotな技術を持ち合わせておらず、化石状態。
これからの方に誤った情報を伝えないためにも、考え方が間違っている、もっとよい方法がある等、ぜひご指導お願いいたします。## imgタグへの漠然とした恐怖
imgタグそのものに任意の幅を与えるとなんかおかしい。（ことになる気がする）
もちろん大丈夫なこともあるけれど、レスポンシブ対応やposition:absoluteにしたときになんか変。そんなわたしを救ってくれたのが
“`html:hoge.html
“`
“`css:hoge.css
.img-wrapper{
width:任意の幅;
/*height:任意の高さ;*/
}.
test20240125
改行をコントロールするためのカンタン手法単語ごとに区切る英文と違って日本語の区切りは難しく、要素の端に文章が達したときには単語の途中であっても改行されてしまいます。
英単語はデフォルトでは途中で途切れそうになると自動で改行され、単語は常に一つの塊として表示され続けるので、日本語と織り交ぜても英単語の途中ではみ出しそうになると単語の前で改行されます。
じゃあ日本語を単語ごとに改行させたいというときはどうすればいいのか？ということですが、`
`+`word-break: keep-all`を組み合わせることで可能になります。 “`html
長い人生
一度や二度は、 道に迷ったり 行き先を 見失ったり するもんさ。 そんな時 どうすればいいか わかるか？ “`
“`CSS
p {
word-break: keep-all;
}
“`
何の変哲もない、gzip以上の圧縮力しか持たない程度のprogramを紹介します。その正体はscript要素のみからなるのhtmlです。いささか無作法な記述法であるため、環境によっては動作しないかもしれません。例によって制御文字盛り沢山なのでBase64形式で書いておきます。復号すればきっちり844bytesとなります。
“`
PHNjcmlwdD5mb3IoRj0nPj4+fn4wWi5jWTspdltYaWYoVztXVj0xVGQ9UysrXVE9MCxQWzBdS2lsZUo9MjU2LElBcnJheUhubG9hZEdjaGVjax8pex5yZR1BW2FRHGI9Z3x8HBsgdHlwZT0aLnMZO0w8PD04KRg9NjU1MzUmFy5sZW5ndGgWPXYVVVtjFGYsU2MTPUE9PnsSTH4yNBE9ZC5sEG5ldyAPdCs9ZlQrY1kOfWVsc2V7DD1bXSwLT1tvUT0JZm9yKAgIYyBvZiBGKQd0PTA7B1chFBldBg9VaW50OEgoBWw9ZixyPXQEPGlucHV0IGlTA109e3【CSS】とにかく楽に簡単にページ遷移時のふわっとアニメーションを実現する方法。
Next.jsで作成したMDXベースの静的サイトでふわっと遷移アニメーションを実装したかったある日。
調べてみるとちゃんとライブラリとかAPI通すのはなんかめんどくさそう。どうせWebなんだしCSSでゴリ押すことに。
CSSだからReactだろうがVueだろうがなんだっておっけー！(多分)。## 実装
なんでもとにかくふわっと。
“`scss
* {
animation-name: fuwa;
animation-duration: 1s;
}@keyframes fuwa{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
“`一部分だけふわっとさせたい時。
※main内をふわっとさせたいけどh1はさせたくない想定。“`scss
main {
* {
animation-name: fuwa;
animation-duration: 1s;
}h1 {
animation-name: unset;
}
}@keyframes fuwa{
ChatGPTによるコピペ差異計算
備忘録。javascriptとVBAのコードはchat gptに書かせた。いろいろと未熟なので、改善点を教えてくれると嬉しいです。
以下のように与えられたデータの差異計算をする。売り上げが０のタイトルは一方のデータでは表示されていない。
htmlで書かれた表が表示されたページで開発者ツールを開き、
.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478380/ab05efe8-21ac-cf11-a637-3f5a9dc53d02.png)・ラジオボックス（香炉）香炉有りの場合は、連絡事項に追記
・テキストエリア（連絡事項）
※香炉以外の他にラジオボタンが３つ
## ■ソースコード
“`javascript main.js// === コンテンツをロードしたら実行
document.addEventListener(“DOMContentLoaded”, function() {
OTHERカテゴリの最新記事
-
- 2024.09.19
JavaScript関連のことを調べてみた
-
- 2024.09.19
JAVA関連のことを調べてみた
-
- 2024.09.19
iOS関連のことを調べてみた
-
- 2024.09.19
Rails関連のことを調べてみた
-
- 2024.09.19
Lambda関連のことを調べてみた
-
- 2024.09.19
Python関連のことを調べてみた