JavaScript関連のことを調べてみた2023年09月30日

ページ内に含まれるRSSのURLを取得するChromeの拡張機能作ってみた

# 概要

## Chrome拡張機能とは

Chromeの機能を拡張するアドオンプログラムです。
JavaScriptで作成可能で、開いているページ上で、画面の操作や補助など作業の効率化が図れます。

画面表示時に広告をブロックしてくれる**AdBlock**や、画面上の英文を変換してくれる**Google翻訳**などが有名かと思います。

## RSSとは

RSSとは、ニュースやブログなど各種のウェブサイトの更新情報を配信するための文書フォーマットの総称です。XML形式で配信され、大きく分けると`RSS1.0` `RSS2.0` `ATOM`のフォーマットがあります。

## 今回のやりたいこと

**RSS解析のために様々なサイトのRSSを取得**したいというのと、Chromeの拡張機能を作成してみて、**Chromeの拡張機能の開発手法**を理解したいというのが目的です。

そのため、画面表示時にRSSのURLがページ上に存在していた場合に、RSSのURLを表示してくれるChromeの拡張機能を作成します。

# 完成したもの

### Chrome拡張機能へのリンク

h

JavaScript基礎学習①JavaScriptとは？

JavaScript学習中。
復習・備忘録のために記述していきます。

◆学習内容
書籍：[『確かな力が身につくJavaScript「超」入門』](https://amzn.asia/d/9wYTExP “『確かな力が身につくJavaScript「超」入門』”)
参考サイト：[JavaScriptができることとは？よく使われる処理、分野を徹底解説](https://career.levtech.jp/guide/knowhow/article/700/ “JavaScriptができることとは？よく使われる処理、分野を徹底解説”)

– JavaScriptとは？？
ブラウザを操作するためのプログラミング言語。
HTML＆CSSだけではできない事をする。
（HTML＆CSSは一度ブラウザに読み込まれたら変化せず静止したデータである。JavaScriptを使用する事でその場でリアルタイムに書き換えて一部コンテンツを入れ替えたり、画像スライドショーのように動きをつける事が可能に。）
＜書き換えの例＞
①タグに囲まれたテキストの書き換え。
②HTML要素への新たな要素の追加や削除。
③タグの属

訪問した都道府県を日本地図に表示する方法

備忘録のために。
旅行した場所を投稿するアプリを作成する上で投稿をする→旅行した都道府県に色を付ける機能を作成しました。

参考までに。こんな感じです。
↓　↓　↓


◆参考サイト

[【Rails】日本地図を簡単に出力できるjapanMapの導入方法](https://miau-katze.com/2019/02/01/260/)

まずは日本地図の表示方法から。

(1)下記サイトよりjsファイルをダウンロードする。
[Japan Map(jQuery plugin)](http://takemaru-hirai.github.io/japan-map/)

解凍後のファイルの中から、
「jquery.japan-map.min.js」のみ
「app/assets/javascripts」　配下に格納。

(2)asset.r

Uncaught TypeError: Cannot read properties of null のエラー対処

# エラーが起きた状況
DOM操作を行うjsファイルをhtmlから読み込んだ時、addEventListenerの行に上記のエラー
# エラーの意味
直訳で「nullのプロパティは読みこめない」と言う意味。
主に、タイプミスなどで間違ったidによってDOM操作を行った場合に起こるエラー。
しかし、以下に示すように要素の指定自体には問題はなかった。
“`HTML:event.html
//前後省略

文字列の出力

リストの追加

“`

“`JavaScript:event.js
//前後略
const addBtn = document.getElementById(‘add-btn’);
addBtn.addEventListener(‘click’, () => )

個人サイトに動的ogを作ってつまづいたところ

個人サイトを作ろうとしたときのはなしその 2。

## 経緯

なわしろ「ブログ書いたら Twitter とかで共有したいぞ」

識者「動的 og が必要だね。Vercel を利用して動的 og を生成する小さいサービスを作ってみるといいよ」

## vercel/og チュートリアル

なわしろ「今度は古い情報に踊らされないぞ。検索すると`og-image`の使用例が最初に出てくるけど、GitHub に但し書きが書いてある」

> Warning This repo is outdated and only works with Node.js 14. Please use @vercel/og for new projects.
>
> If you have a problem that reproduces using the playground, please create an issue in the satori repo.
>
> For all other issues with @vercel/og, please reach out to Vercel Sup

Mantine UIをNext.js App Routerで使用したいよって話

# Mantine UI とは？
ReactのUIライブラリです。
有名どころだとMaterialUi , ChakraUI と似たようなやつです。 ←適当

特徴としては、
– カスタマイズ性が高く種類か豊富
– 120種類以上の豊富なコンポーネントがある

– ドキュメントがわかりやすい
– こんな感じで使いたいコンポーネントの使用方法だったり、Sizeや色などを選択してコードをそのまま持っていくこともできます
– React-Hook-Formなどの別ライブラリの必要がない
– Mantine/form自体がform関連のhookを提供しているのでそれを使えば簡単にフォームにバリデーションをつけれる

などなど、比較的独自のスタイルを当てる必要がない管理画

再利用できるプレゼン用WEBページを作ろう 第４回

第３回から気がつけば半年以上たってます。今回からは JavaScript 編です。
この半年で機能追加したこともあり、当初の予定より回数が増えそうです。

# JavaScript の構成

[再利用できるプレゼン用WEBページを作ろう 第２回](https://qiita.com/shindomasayuki/items/2708ff55d807e07cf2a1) で書いたときと比べて、テーブル操作用のファイルと、環境依存部分を切り出した分ファイルが増えています。

“`
common – js ──┬ Env.js.example ドキュメントルートなど環境依存部分を外出しするサンプル
├ functions.js 大文字で始まる JS から呼ばれるちょっとした関数群
├ Breadcrumb.js 各ページに共通するパンくずリストを生成
├ Definitions.js ページの定義やレイアウトの定義などをまとめたもの

ランダムに文字を表示させよう～DOM～

# 初めに
ここではHTMLにJavaScriptを使ってランダムに文字を表示させる方法について説明します。
JavaScriptからHTMLに反映させるために自分が行っていた非推奨な例と推奨される例について紹介します。
# 非推奨方法
* **HTML**
“`

```

次に、htmlファイル内に`

`要素を定義します。テーブルの見出し行には`

`要素、データ行には`

`要素を使用します。 ```html 元記事を表示 NeosVR コンパイラ その10 # 概要 NeosVRのオブジェクトを外部で生成するコンパイラを開発した。 遂にLogiXノードを繋いでみた。 # 写真  # 俺コード LogiXノード、TとDisplayを繋ぐコード。 ``` use Ore test1 new LogiX.T new LogiX.Display {a} = LogiX.T {} = LogiX.Display a add LogiX.T add LogiX.Display ``` # 成果物 コンパイラはこちら。 https://embed.plnkr.co/plunk/LbFjkD6fqzPwtuKt 以上。 元記事を表示 【kintone/javascript】ルックアップ取得をあいまい検索したい！ # はじめに お客さんの既存マスタが半角英数字(スペースとか入っていたり)を含むデータで、kintone標準機能のルックアップだと検索にヒットしないやん！ という方いらっしゃいませんか？ [検索したいデータがヒットしません](https://jp.cybozu.help/k/ja/id/040315.html) 「お客様、大変申し訳ございませんがこれはkintoneの仕様です。」 「毎度完全一致する文字列(まぁまぁ長い文字列)を指定して運用回避いただけないでしょうか？」 なんて言えないのがシステム屋です。 # プラグインとか無いの？ プラグインも探したのですが、APIの10,000件問題が本当に考慮されているか疑わしかったり、 マスタデータが数万レコードに及びため、APIコール数上限に簡単に引っかかるような実装仕様になっていないか不安と思う部分がありコスト掛けて購入するメリットを見いだせず。 [1日に実行できるAPIリクエスト数](https://jp.cybozu.help/k/ja/id/04044.html#limitation_limit_3040) # どうしよう ググ 元記事を表示 【JavaScript】LocalStorageで値が保持されるカウンター作成 # はじめに webサイト制作の学習で「ボタンを押したらカウントが増える」という仕組みを作成した際、 ページの再読み込みをするとカウントが初期値に戻ってしまうという問題が発生しました。 しかし、「Local Storage」を使うことでこの問題を簡単に解決することができたので、 Local Storageを利用した「値が保持されるカウンター」の作成方法をまとめました。 # 作成したもの 「クリック」のボタンを押すと数字が1ずつ増えるカウンターを作成しました。 ポイントは**ページ更新をしたり、ブラウザを開き直したりしてもカウントの値が保持される**ということです。  # ブラウザに値を保存する「Local Storage」 今回、値の保持を実現させるために「Local Storage」を利用しました。 **Local Srotra 元記事を表示 ［Javascript］関数の書き方 # 概要 JavaScriptで関数を定義する方法は大きく分けて２つ「関数宣言」と「関数式」がある。 違いはFunctionオブジェクトの生成タイミングで「関数宣言」ではコードブロックが実行する前に生成され、「関数式」はコードブロック実行時に生成される。 そのため関数宣言では関数定義より前に記述しても関数を呼び出せる。 # function【関数宣言】 functionというキーワードを使って、関数名を定義する。 どのタイミングでも呼び出せる。 ```js: function sample(args){ console.log(args); } sample('hello world'); ``` # 関数リテラル【関数式】 関数名を変数のように定義し、その中に関数の機能を代入するようなイメージ。 定義後でしか呼び出せない。 ```js: const sample = function(args){ console.log(args); }; sample('hello world'); ``` # アロー関数【関数式】 アロー関数は「=>」というキーワードを使って 元記事を表示 YouTube Liveの配信予定を見逃したくない人のための記事【非エンジニア・初心者向け】【詳細版】 ## この記事を読むと出来るようになること - 記事中の**コードをコピペするなど**して、**YouTube Liveの枠立ての通知をGoogleカレンダーを通じて自動で受け取れる**ようになる。 - YouTube Liveの**配信予定をカレンダー上でいつでも確認出来る**ようになる。 - ひと手間加えれば**Appleカレンダーなど他のカレンダーアプリ経由でも通知を受け取れる**。 ::: note info 基本的に**プログラミングの知識は不要です。** ::: ::: note info VTuberや実況者、その他YouTubeで活動されている配信者を追っている方にオススメです ::: # 0. 前提 ## 0-1. 目標 - **YouTube Liveでの配信予定を見逃したくない**。 - 枠立ての通知を事前に**自動で**受け取りたい。 - 配信予定を**カレンダー上でいつでも確認したい**。 ## 0-2. 筆者が採った手法 1. GAS (Google Apps Script) 上 元記事を表示 Javascript の map と reduce の違い JavaScript `map` と `reduce` の違いを説明します。 ### map メソッド 1. `map` メソッドは、配列の各要素に対して与えられたコールバック関数を実行し、新しい配列を作成します。 2. 元の配列は変更されず、新しい配列が作成されるため、元の配列の要素に影響を与えません。 3. コールバック関数は、各要素に対して適用され、その結果が新しい配列の要素となります。 ```javascript const numbers = [1, 2, 3]; const doubledNumbers = numbers.map((num) => num * 2); // doubledNumbers: [2, 4, 6] // numbers: [1, 2, 3] (元の配列は変更されない) ``` ### reduceメソッド 1. `reduce` メソッドは、配列の各要素に対して与えられたコールバック関数を使って、単一の値を生成します。 2. 初期値を指定することができ、この初期値は最初のコールバックの第一引数になります。 3. コールバック関数は、前の 元記事を表示 [Tips] 異なるオリジンのスクリプトをWeb Workerとして動作させる この記事は [個人開発エンジニア応援 - 個人開発の成果や知見を共有しよう！- - Qiita](https://qiita.com/official-events/09dee22c436b60f856c9) の参加記事です。 https://qiita.com/official-events/09dee22c436b60f856c9 ## はじめに Web Worker用のスクリプトをサイトのオリジンとは別でホストしたいというとき、 クロスオリジン制約により、スクリプトとサイトのオリジンが異なる場合はWeb Workerを起動できません。 https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers なんとかできないかと調べていたところ、スクリプトのBlobを指すURLをつくることでできたので記事にします。 ## 方法 Web Worker用のスクリプトをfetchし、Blobとして取得します。 そして、そのBlobを指すオブジェクトURLを生成し、そのURLでWor 元記事を表示 plunkerでobject viewer # 概要 plunkerでobject viewerやってみた。 # 参考にしたページ # 写真  # 成果物 https://embed.plnkr.co/plunk/5bEsD4d3WfwLhgwX # サンプルコード ``` function jsonViewer(json, collapsible = false) { var TEMPLATES = { item: ' %KEY% %VALUE% ', itemC 元記事を表示 NeosVR コンパイラ その9 # 概要 NeosVRのオブジェクトを外部で生成するコンパイラを開発した。 phoenixのapiサーバを使ったコンパイラ書いてみた。 # 俺コード - このコードはlogixのTノードとDisplayノードを生成する。 ``` use Ore test0 new LogiX.T new LogiX.Display add LogiX.T add LogiX.Display ``` # 写真  # 成果物 - コンパイラは、こちら。 https://embed.plnkr.co/plunk/1XTEfvcjxG7qkiV9 # 実行確認の手順。 - 上のページで生成されたjsonを、メモ帳で「test0.json」で保存する。 - NeosVRを起動して、セッションに入る。 - ファイル 元記事を表示 Web Share API で、canvasに描画した画像と、指定したハッシュタグをTwitterの投稿にコピーペーストする ## 使用想定シーン 画像合成して特定のハッシュタグでつぶやくキャンペーンの時に、サーバーや端末に合成画像を保存させずにコピーペースト操作でハッシュタグと画像をツイートしてもらう。 ### html ``` クリップボードにコピー ``` ### script ``` const previewCanvas = document.getElementById('js-previewCanvas'); const previewImage = d 元記事を表示 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関連のことを調べてみた 名前 年齢 山田太郎 25