f@ctor

今さら聞けないHTML　2021年02月12日

今さら聞けないHTML　2021年02月12日
目次

オリアプのREADMEを書いてみた

#はじめに
なかなか他の人のオリアプのREADMEを見る機会はないと思い、Qiitaに投稿してみました。いたずら防止のために、アプリのURLは載せていませんので、ご了承ください。

## アプリケーション名
#### CYCLE NOTE

## 開発環境
HTML&CSS / JavaScript / Bootstrap / Ruby / Ruby on Rails / RSpec /
MySQL / EC2 / S3 / Visual Studio Code

## ログイン方法
ヘッダー右側のゲストログインボタンから、ゲストユーザーでログイン可能

## アプリケーション概要
サイクリングの体験を共有できるアプリ
アプリの主要機能は以下の通り
#### 1.

元記事を表示

【SHOWROOM】配信中のコメント・ギフトログをリアルタイムに取得する方法

# はじめに
最近SHOWROOMを見始めて、バーチャル枠を見てると配信画面にコメントやらギフトログを出している人が居るのでそれってどうやって取得できるのかな？と思ったのがこの記事を書くことになった切っ掛けです

# 調査
双方向通信って事はWebSocketでも使っているのかな？
と言う事で配信画面でブラウザの開発者ツール開いて`WS`を見てみると案の定
`online.showroom-live.com`に`SUB 何かの文字列`を送ることで配信内のコメントなど取得できるようになってるみたいです
![ws.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310163/51dbe726-8812-efc1-a1a4-725f430e25ea.png)

### 謎の文字列
WebSocket使っているのは分かったが、接続した後何の文字列を送っているのか？
色々なルームの文字列を見たところ`bXXXXX(6文字):XXXXXXXX(8文字)`の形式みたいです

色々調べてみるとAPIがあるみたいで[まとめ

元記事を表示

Markdownからhtmlファイルを生成してアプリのヘルプファイルとして表示する

# 概要

アプリにヘルプファイルがあるとユーザーにとっては便利です。
他にも以下のような条件を満たしたいです。

– ヘルプファイルは今どきにhtmlファイルで
– オフラインでも動作するようにローカルファイルとしてアプリに同梱
– アプリからワンクリックで開きたい
– ヘルプの内容はMarkdownで書きたい
– Markdownが更新されたら自動でHtmlファイルに変換してアプリに組み込みたい

そこでMarkdownでヘルプを書いて、変換したローカルhtmlファイルをアプリに組み込み、ヘルプファイルとして使用する方法を説明します。

サンプルはWPFで書きましたが、WinFormsでもUWPでも同じようにできます。

# スクリーンショット

こんなアプリがあったとして、どうやって使うのか？という時に、中央のHELP!!ボタンを押すと、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120077/d6b241e9-7cd2-79c4-8176-ebf2e6

元記事を表示

【Rails】部分テンプレートの一部を特定のページでのみ表示するには？

共通の記述を部分テンプレート化したけど、ページによって一部分だけ記述を変えたいときってありますよね。
そんなときは、`current_page?`メソッドが便利です！

#current_page?メソッドとは？
表示中のページのパスを判定できるメソッドです。
引数にしたパスが表示中のページと同じかどうかを判定してくれています。同じであればtrueを返します。

“`
current_page?(判定したいパス)
“`
実際にHTMLファイルで使用する際は、以下のようにif文を用いて記述します。

“`
<% if current_page?(root_path) %>

現在のページはトップページです

<% end %>
“`
また、複数のページを指定することもできます。

“`
<% if current_page?(root_path, 〇〇_path, XX_path) %>
“`

#参考記事
https://railsdoc.com/page/current_page_q
https://qiita.com/zenizh/items/8b

元記事を表示

HTMLの主な要素〜初心者だった自分に向けて〜　その①メタデータ系

# HTML・メタデータ系
###はじめに
改めて知識を定着させるため、勉強してきたことを過去の自分が読んでもわかりやすいように可能な限り噛み砕いた表現で書いてみる。
まずは表題の通り、HTMLの主な要素について。
## html要素 ``
HTML文書は、１つの``要素からなり、``要素は、ページ全体を囲んでいます。この要素が全ての要素の先祖（親要素）になるので、「ルート要素」とも呼ばれています。

この要素に直接入れることができるのは、``と``を各１つずつのみです。
##head要素 ``
この要素には、html文書に関するメタデータ（機械可読な情報）が入ります。
例えば、題名(title)、スクリプト(JavaScript)、スタイルシート(CSS)、文字コード(charset)などです。
この要素に入れた内容は、ブラウザでWEBページの内容として表示されることはありません。
``を直接の親要素とします。
##body要素``
``とは逆に、ブラウザで表示されるWEBペー

元記事を表示

Macでカラーコードを調べる方法

#こんな感じ

#今見てる画面のカラーコードが知りたい！！

**この画像で使われてる色を再現したい！**
**でもCSSで使うカラーコード（`#ff3333`みたいなの）

元記事を表示

これから学ぶ言語の用途・特徴

#HTML
##HTMLとは
– HTMLはHyper Text Markup Languageの略である。
– Webページを作る際に、マークアップ言語という視覚表現や文章構造を記述するための最も基本的な言語が使われるが、HTMLはこのマークアップ言語のうちの一つである。
– Webサイトやアプリ、電子メールなどを適切に表示するために使用されている。

##HTMLでできること
– ホームページビルダーなどのWeb制作ツールがなくてもWebサイトを制作できる。
– 無料配布されているWebサイトのテンプレートを自分なりにアレンジすることができる。

#CSS
##CSSとは何か
– CSSはCascading Style Sheetsの略である。
– 先述したHTML文章に、装飾やレイアウトを施すために使用される。

##なぜCSSが必要か
– Webページの見た目はHTMLでも指定することができるが、HTMLだけで行うとWebページの情報構造が乱れ、検索エンジンに理解されにくく、ブラウザによって表示のされ方が変わってしまう。
– そのため、HTMlとは別のファイルでCSSによってス

元記事を表示

PythonでHTMLの読み取りをする方法

#使用している環境

##環境について
今回の記事で紹介するpythonのコードを実行する環境は

+ Windows10
+ Visual Studio 2019
+ Python3.7 (64bit)

となります。
他の環境では詳細が異なる場合があります。

##参照ライブラリ
標準でインストールされているライブラリ以外に

+ bs4

というライブラリをインストールする必要があります。
このライブラリはHTMLファイルから読み取るための関数が定義されています。
Visual Studio2019のトップ画面から

「ツール」→「Python」→「Python環境」

でPython環境画面を開きます。
![VS画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531515/f79610bf-b1ce-a73f-ad40-ad3d413a1ce4.png)

Python環境画面からPowerShellのコンソールを開きます。
PowerShellのコンソール画面で

“`
pip3 in

元記事を表示

JavaScript で小学生の通過算を解いてみた！

## はじめに

こんにちは。私は普段ある教育大学に通わせていただいているのですが、講義の課題で以下のようなものが出ました?

> 1両20ｍで10両編成、時速72Kmで走る上り電車と、1両20mで8両編成、時速90Kmで走る下り電車がすれ違います。すれ違い始めてからすれ違い終わるまでにかかる時間は何秒でしょうか。

これを面白く解いてみてください！とのことでした！
よく見かけるちょっと応用的な問題だな〜と感じながら、ちょうどJavaScriptのCanvasを使ってみたかったので、そちらで解いてみました！

## 実際の動作
![Train.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751101/c0a68ee2-c9f7-bda7-b6f8-60bd2d3028a8.gif)

## コード

#### HTML
“`

問題3

1両20ｍで10両編成、時速72Kmで走る上り電車と、1両20mで8両編成、時速90Kmで走る下り電車がすれ違います

元記事を表示

【GAS】Googleドキュメントを装飾そのままメール送信

##概要
Qiita質問に「ドキュメントの内容をそのままメールで送りたい」と言うのがあり、確かに出来たら便利だなぁ～と挑戦してみた。

Blobで変換したり、HTMLをgetTextすればサクっと解決するのかと思ったら、意外と面倒な手順が必要だったみたい。

質問者の方が納得する答えかどうかはさておき、割りと上手くできたので質問へ返信＆記事投稿^^

##ドキュメントと送信結果
とりあえずドキュメントで適当に文字を装飾してみた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/708687/ddf3ccfd-ca7f-7d0f-42fc-b99df9f1790b.png)
このドキュメントを元にGASでメール送信したのがコチラ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/708687/c273bc60-c57f-51fb-3536-8e449383d5cc.png)
ちゃんと装飾もリンク

元記事を表示

Firebaseを使ってコメント機能を実装する

## はじめに
Webページにコメントフォームを埋め込み、閲覧者がコメントを投稿できる機能をシンプルに作りたいと思ったので、`Firebase`を使ってコメントの保存と取得して一覧表示をする方法をご紹介します。

## こんなものを作っていきます

![画面収録-2021-02-10-22.22.45.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134712/a33380c4-c941-e517-5a08-d1f35385bca7.gif)

## 前提
* 今回`Firebase`を使うのでGoogleアカウントが必要です。
* ReactやAngularなどを使ったほうがやりやすいですが、今回はピュアなJavaScriptを使って実装していきます。
* 実装には関係ないですがデザインは`UIKit`を使いました。

## Firebaseとは
Firebaseは、Googleが提供するモバイル及びWebアプリケーションのバックエンドサービスです（これを`mBaaS`と言います）
通常、今回のよう

元記事を表示

カスタム要素を使ったタブによるフォーカスの抑止

# はじめに
ダイアログを表示した場合、タブで後ろのコンテンツにフォーカスが行かないようにしたいなど、
タブによるフォーカスの遷移を抑止したい場合がかなりあると思います。
そんなときに役に立つ小技を見つけたので共有します。

# 環境
– Chrome, Firefoxで確認

# やり方
## CustomElementを用意
shadow domの中に子要素を表示するだけのカスタム要素を用意します。

“`js
customElements.define(
“custom-element”,
class CustomElement extends HTMLElement {
constructor(){
super()
this.attachShadow({mode: “open”})
this.shadowRoot.appendChild(document.createElement(“slot”))
}
}
)
“`

## 使う
“`html

元記事を表示

position: relativeは安易に使わない方が良いのかも。。

アプリ作成にて学んだ心構えを書いていきます。

それはズバリ！ 、、、
### position: relativeは極力使わない！！

これです。

このcssプロパティ、position: relativeは、
役割として、指定した要素を基準点とする機能となっています。

普通にdiv要素を積むと、
index.html.erb

“`

“`

css

“`
.red {
height: 50vh;
width: 50vw;
background-color: red;
}

.blue {
height: 50vh;
width: 50vw;
background-color: blue;
}
“`

[![Image from Gyazo](https://i.gyazo.com/068e246663d285a23247eb4a0e0e82f2.png)](https://gyazo.com/

元記事を表示

CSSだけでハートを作る方法

# どうも7noteです。フォントの♥では面白くないので、CSSでオリジナルハートを作ります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/15b565d8-5c26-bef4-448b-c727d7a33889.png)

CSSだけでできちゃうハートの作り方です。
正直な話、使いどころはあまり思いつかないですが、結構自由に作ることができると思うので
画像じゃなくCSSの勉強として取り組んでみるのはアリかなと思います。

## ハートの作り方

“`index.html

“`

“`style.css
.heart {
width: 100px; /* 正方形を作る */
height: 100px; /* 正方形を作る */
position: relative;/* 基準位置とする */
}
.heart::before,
.heart::after {
content: “”; /*

元記事を表示

えっ、著作権の帰属を表すHTMLタグがあるんですか？

## `small`タグ

`small`タグです。

かつては文字を小さく表示するために使われるタグでしたが、今ではセマンティックな役割が与えられています。

そのうちの1つが`著作権の帰属を表す`です。

## なんでこの記事を書いたのか

– `small`の役割って意外と知られていない気がする
– 最近レビューで連続でこの話をした

という2つの理由から記事を書きました。

## 内容の補足

コピーライト表記ってありますよね？

`© 2019-2021 Example Corporation All rights reserved.` みたいなやつです。

色々なサイトのマークアップを見学していて`span`タグで実装されていることが多いことに気がつきました。

しかし[HTML Living Standardのsmallタグの章](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-small-element)を見てみると

> Small print typically feature

元記事を表示

Web Serial API を使って micro:bit からセンサーの値（XYZ）を読み取る＆リアルタイムなグラフ化

この記事は、以下の内容の続きです。

●Web Serial API を使って micro:bit からセンサーの値を読み取る（途中段階） – Qiita
　https://qiita.com/youtoy/items/9606c58369796a65f8f5

上記の段階では、micro:bit から書き出された値をうまく読み取れない部分があったため、その問題解決のための対応をしました。それと合わせて、読み取った値のグラフ化も行ってみました。

最終的な完成形は以下となります。

Web Serial API を使って micro:bit からセンサーの値を読み取る（途中段階まで）

これまで、以下の 2つの記事を書いた際に使った「[Web Serial API](https://www.chromestatus.com/feature/6577673212002304)」。

– [Web Serial API を最短の手順で試したくてやったこと（micro:bit を利用） – Qiita](https://qiita.com/youtoy/items/a0071a6d2ef7f6930d33)
– [Web Serial API を使った micro:bit への値の書き込み – Qiita](https://qiita.com/youtoy/items/f77dc205e817f31a4e18)

まだ、シリアル通信での値の読み取りを実装できてなかったので、それを試します。

## micro:bit 側のプログラムを準備する
シリアル通信で Webサイト側へ値を書き出すためのプログラムを作ります。
[Microsoft MakeCode for micro:bit](https://makecode.microbit.org/) を使い、以下のプログラムを

元記事を表示

フロントコーディング時に使ったリンクまとめ

最近ようやく、flaskとpythonに関して$\tiny{基礎}$の$\normalsize{基礎}$の$\large{基礎}$を一通り学んだので、そのOUTPUT(?)としてPython*flask*MySQLを使ったステートレスな超初心者向けWebアプリを制作していました。
その際にフロントエンドの組み方でHTML,CSSのコーディングで参考にさせて頂いたいくつかのサイトを貼っておきます。
$\tiny\color{blue}{（制作したアプリについては、デプロイテストが未完なので、終わり次第あげていくつもりです。）}$:cry:

—
アコーディオンメニューの実装
https://copypet.jp/630/

ヘッダー固定(グローバルナビゲーション)

ヘッダー・ナビゲーションを固定表示させるアイデア5つ

テキストロゴアニメーション(jquery)
https://on-ze.com/archives/7387
画像アニメーション(jquery)
https://w

Web Serial API を使った micro:bit への値の書き込み

先日、以下の記事を書いた際に使った「[Web Serial API](https://www.chromestatus.com/feature/6577673212002304)」。

●Web Serial API を最短の手順で試したくてやったこと（micro:bit を利用） – Qiita
　https://qiita.com/youtoy/items/a0071a6d2ef7f6930d33

この時は、シリアル通信で値の読み書きをするところは、以下の Googleさんが提供しているサンプルを使いました。
⇒ https://googlechromelabs.github.io/serial-terminal/

今回は、Web Serial API を使った値の書き込みの処理を自分で書いてみます。

## micro:bit 側のプログラムを準備する
シリアル通信で Webサイト側から値を受け取るためのプログラムを作ります。
[Microsoft MakeCode for micro:bit](https://makecode.microbit.org/?lang=ja)

OTHERカテゴリの最新記事