A|B|C
目次
- 1. 自分の好きなアーティストと似ているアーティストを出力するWebアプリケーションの開発 part2
- 2. [初心者必見]セマンティックHTMLとfor、id、name、valueの意味を理解しよう
- 3. iOSのブラウザにて、TDタグ内で勝手に追加される電話リンクを無効にしたかったが妥協した
- 4. カスタマイズしたGoogle Form で回答が収集できなかったとき
- 5. やってみたシリーズradioとcheckboxで遊んでみた。
- 6. html radioの使い方 JavaScript含む
- 7. 【練習】ブラウザで作った文字列コピーツール
- 8. 【PHP】フレームワークFlowで多言語に対応したページを作成する
- 9. localhostで画像が表示されない件について
- 10. やってみたシリーズ7編htmlStdio html CSS JavaScript 完結編
- 11. ボタンをゲーミング化
- 12. CSS Anchor Positioning のきほん！
- 13. 【AOS.js】スクロールアニメーションの紹介
- 14. javascriptで作るゲーム【ジャンケンマンフィーバー】完結編（音声出力）
- 15. 【会社チーム内もくもく会】基礎に立ちかえる！BEM編
- 16. 【jquery】もっとも簡単なモーダルの設置方法（複数設置可）
- 17. 相対パスと絶対パスの違い
- 18. 【一口メモ】:before :afterなどで指定したcontentが文字化けするときの対処法
- 19. 社内ブログ用のMarkdown to HTML変換ツールの作成
- 20. オフラインでも動く！音声入力メモ帳「タスクス」を開発しました！
自分の好きなアーティストと似ているアーティストを出力するWebアプリケーションの開発 part2
## はじめに
大学の授業で、入力されたアーティストと近しいアーティストのネットワーク図を作成するシステムを作ったので、今回は個人的な趣味で、そのシステムを発展させてWebアプリケーションを開発しました。その際の備忘録を残します。
part2では、フロントエンド側の実装についてまとめます。## Webアプリケーションの大まかな流れ
1. 初期画面で入力フォームを表示し、ユーザにアーティスト名を入力させる
2. 入力されたアーティストに対して、Spotipyのartist_related_artists()を使用して、そのアーティストと関連のあるアーティスト情報を取得する
3. networkxライブラリを使用して、関連のあるアーティストを芋づる式にノードで結んでネットワーク図を作り、ページランクの値が高い順に取り出す（この時、人気曲の情報も取得する）
4. リザルト画面で関連のあるアーティスト10人と取得した人気曲の情報を表示する今回の備忘録では、1.と4.のフロントエンド側の実装についてまとめます。
## ディレクトリ構造
[前回記事](https://qiita.com/
[初心者必見]セマンティックHTMLとfor、id、name、valueの意味を理解しよう
# まず初めにこれだけはやってほしいということ
### MDNには必ず目を通しておきましょう
**開発者向けのWeb技術**
https://developer.mozilla.org/ja/docs/Web
はい、これ一番大切です。というか、ぶっちゃけこれ読んどけば間違いないんですが、やはり初心者の時ほどこういうリファレンス読むのって苦手なんですよね(;’∀’)
でも、この中にはWeb開発に必要な様々なことが記載されてあります。
**HTMLとデバッグ**について、**高度なテキスト整形**についてなど中級者以上でも楽しめる内容ですので、見たことない方は目を通してみましょう。ちなみにReactやGit,GitHubの項目もちゃんとあります。
で発表した資料を噛み砕いで紹介した記事です。## 内容
### 導入
こんにちは、私はQiita株式会社の出口 裕貴です。
普段は、QiitaのPdM 兼 デザイングループのマネージャーをしています。
私は、デザイン, フロントエンドに関連する情報を中心に発信
【AOS.js】スクロールアニメーションの紹介
# はじめに
AOS.js（Animate On Scroll）は、スクロール連動型アニメーションを簡単に追加できる軽量なJavaScriptライブラリです。このライブラリを使用すると、要素が表示されるタイミングに応じてフェードイン、スライドイン、ズームインなどのアニメーションを実装することができます。AOS.jsは、直感的な設定とカスタマイズオプションを提供し、開発者にとって使いやすいツールとなっています。# 利用方法
### 1. ライブラリのインクルード
AOS.jsを使用するには、まずライブラリをHTMLファイルにインクルードします。以下は、CDNを利用した例です。
```html
AOS.js Example
javascriptで作るゲーム【ジャンケンマンフィーバー】完結編（音声出力）
前回まではこちらを参照してください。
https://qiita.com/tri-comma/items/e9790b420d9786f91149
https://qiita.com/tri-comma/items/be169c9163d637d82af3最後に音声再生を実装しました。
（ついでにコインも描画しました）# 前回ソースからの差分
```diff_javascript: [差分1] JankenFever.onstop()に引数追加、JFViewクラスの各イベントハンドラに音声再生処理を追加
if (this.status == this.STS.SPINING) {
const medal = this.ROULETTE[this.ridx];
this.medal -= medal;
this.player.medal += medal;
this.status = this.STS.STANDBY;
- this.onstop ? this.onstop() : null;
+ this.onstop ? this.ons
【会社チーム内もくもく会】基礎に立ちかえる！BEM編
デザイン、コンテンツ、ライティング、コーディングがほぼ同時並行で走るという案件にて、
htmlやscssが頻繁に書き換わるという事案が発生していました。そんな中、そもそものclass名の名付け方これであってるんだろうか。という疑問が湧き上がり、基礎の基礎に立ちかえることとしました。
個人開発で勉強していたので、「誰が見てもわかりやすい・理解しやすい」というコードをもっとめざして行きたいです。# そもそもBEMとは
**Block Element Modifierの略。**・`Block` ：大枠となる独立した要素
・`Element`：`Block`の中の要素
・`Modifier`：`Block`や`Element`スタイルこのような構成で、わかりやすくcssを設計するために作られた命名規則。
一番ポピュラーな命名規則だと思われます。# 書き方
```
class="block__element–-modifier"
```
このように、アンダースコア・ハイフンを**2文字**ずつ使う。
複数単語が発生する場合は、ハイフン**１つで区切る。**どんな単語を使
【jquery】もっとも簡単なモーダルの設置方法（複数設置可）
プラグイン不要で複数設置可能なモーダルウィンドウの実装方法をご紹介します。
【実装のポイント】
- ボタンとモーダルコンテンツをidで紐づけて複数対応を可能にしています。
- モーダルを開いた後どこをクリックしても閉じるようにしています。
CSSやhtmlの構造はお好みで調整ください。
【最低限のサンプル】
ウェブ開発において、画像やその他のリソースを参照する際に使用される相対パスと絶対パスには、それぞれの利点と欠点があります。
これらのパスの違いと、それがSEOにどのように影響するかについて詳しく説明します。
# 相対パスとは？
相対パスは、現在のページの位置を基準にしてリソースへのパスを指定する方法です。
例えば、`img src="img/xxxx.png"`という記述は、現在のページのURLを基準にして`img`フォルダ内の`xxxx.png`という画像を参照します。## 例
- **現在のページ**: `https://example.com/xxxx/index.html`
- `img src="img/xxxx.png"`は`https://example.com/xxxx/img/xxxx.png`として解釈されます
- **現在のページ**: `https://example.com/xxxx/`
- `img src="img/xxxx.png"`は`https://example.com/img/xxxx.png`として解釈されますこのように、
【一口メモ】:before :afterなどで指定したcontentが文字化けするときの対処法
# 困ったこと
beforeやafter疑似要素のcontentプロパティで，文字化けするとき（特に日本語）がある。
```html:index.html
100
```
```css:style.css
div :after {
content: "年";
}
```
#### 実行結果例
100蟷ｴ# 解決策
linkタグにcharset="utf-8"を加える。
```html:index.htmlのうち変更部分 ```
#### 実行結果例
100年
社内ブログ用のMarkdown to HTML変換ツールの作成
## はじめに
社内ブログを運営する上で、エンジニアにとってMarkdownは記事を書くのに便利な記法です。しかし、Markdownをそのまま公開することはできないため、HTMLに変換する必要があります。そこで、Markdownファイルを簡単にHTMLに変換するPythonツールを作成することにしました。
## GitHub
https://github.com/koinunopochi/convert_markdown_into_html?tab=readme-ov-file
## 簡単な動作サンプル
```md
# sample-1これはサンプルです
## sample h2
```bash
# これはサンプルです
date
# これはサンプルです
make install
```### これはサンプルです
:::note info
インフォメーション
::::::note warn
ワーニング
::::::note alert
アラート
:::
```このような状態のファイルが、次のような
オフラインでも動く！音声入力メモ帳「タスクス」を開発しました！
# はじめに
オフラインでも動作する、スマートフォン向け 音声入力メモ帳Webアプリ 「タスクス」 を開発したので紹介します！タグに「AmiVoiceAPI」と入っていますが、記事投稿キャンペーン「[音声認識APIを使ってみよう！](https://qiita.com/official-events/23333339b694ca71810a)」に参加するため、記載しています
いつかAmiVoiceAPIとWeb Speech APIの認識速度の比較もやってみたいなぁ、なんて思ってますが、今回の記事では扱ってません！ごめんなさい！
# まずは成果物
実際に動かせるものをGitHub Pagesに載せてあります
こちらからご覧ください！https://kazu-iroiro.github.io/TaskScheduler/
