JavaScript関連のことを調べてみた2021年08月17日

javascript・CSSを使って要素を表示・非表示にする。

javascriptを使ってhtmlの要素を表示・非表示にする方法。

表示されているものを非表示にする方法

“`html

　　非表示にさせたい。！

“`
“`css
.test1{
display: none;
}
“`
非表示にさせたい要素にclassまたはidをつけて上げて display: none;をcssに記述してあげることによって非表示にすることができます。

非表示にさせたものを表示したい。

“`html

　　非表示にさせたい。！

　
“`
“`css
.test1{
display: none; /* ページが読み込まれた時点で非表示 */
}
“`
“`javascri

JavaScript文字列操作関連 – 逆引きリファレンス的なやつ

例によって育てていきます。永遠に完成しない説

# 0. 利用に関する注意事項

・あくまで実現手段の例であり、特定のメソッドの使用を推奨するものではありません。

・記載内容や参考サイトの内容について、動作検証等は検証しておりませんので、内容が誤っている可能性があります。動作確認等の検証を実施した上でご利用ください。

・JavaScriptに限らず、サロゲートペア[^1]や結合文字列などの落とし穴があるので、基本は明示的にケアする必要があります。
日曜プログラミングの範疇では無視っててもよいと思いますが、世に出すものであればケアしときましょう。
[^1]: 簡単に（雑に）いうと、見た目は１文字なのに２文字分のデータとして扱われるヤベーやつです。
参考： [サロゲートペア・結合文字列・合字 – Qiita](https://qiita.com/Nabetani/items/8c69bdd8060f2503683c)

# 1. 部分文字列の取得

# 1-1. 位置や長さを指定して取得

| 機能 | メソッドなど | 備考 |
|—-|—-|—-|
|

【実践】VSCodeでサーバ上のWEBアプリをリモートデバッグする(第1回：JavaScript編)

第1回はVSCode(Visual Studio Code)からサーバ上のWEBアプリを直接編集できる環境構築とJavaScriptのデバッグを行う。

#やりたいことイメージ

| |
|:-:|


#使用するもの
ローカルホストPCにはWindows10、WEBサーバには試験機として最適なオンプレミス型の
[WeBBoX](https://www.offset.co.jp/webbox/index.html)を使用する。

#

ただただ公式ドキュメントのリンクを並べただけ

タイトルの通り、ただ公式ドキュメントのリンクを並べました。
私が勉強した or 勉強に使いたいな、と思っている範囲のものです。
読んだ感想なども記しました。
適宜、更新するかもしれません。

# Java関係

### Java
|タイトル |リンク |その他 |
|—|—|—|
|ドキュメント |https://docs.oracle.com/javase/jp/11/ |Java 11 |

Javaに関しては、公式を見るよりも市販の本とかの方がいい気がしています。

### Spring Boot

|タイトル |リンク |その他 |
|—|—|—|
|チュートリアル |https://spring.io/guides |英語 |
|チュートリアル |https://spring.pleiades.io/spring-boot/docs/current/reference/html/getting-started.html |日本語|

日本語だと、最近こちらの本が出たようです。amazon prime会員だとタダで読めるようです。
https

input要素に入力した文字列がはみ出ないようフォントサイズを調整

input要素に入力した文字列がはみ出る場合、指定したフォントサイズを下限としてはみ出なくなるサイズに調整します。


“`html:

通常

JavaScript

元記事を表示

chartjs-node-canvasで動的OGP画像を生成する関数をVercelにデプロイするのに苦労した話

とあるサービスの開発をしているとchart.jsで生成したグラフをOGP画像にする必要が出て、Vercelならサーバレス関数を無料でデプロイできると知り試したのですが、謎のエラーが発生して困っていました。
その回避策(？)をとりあえず見つけたのでメモ書き程度に書きます。

# version

canvas: 2.6.1
chartjs-node-canvas: ^3.2.0
chart.js: ^3.5.0

# 発生してたエラー

“`
ERROR Unhandled Promise Rejection
{
“errorType”:”Runtime.UnhandledPromiseRejection”,
“errorMessage”:”Error: Cannot find module ‘canvas’\n
Require stack:\n
– /var/task/node_modules/chartjs-node-canvas/dist/freshRequire.js\n
– – /var/task/node_modules/chartjs-node-canvas/dist/

React-Redux-TypescriptアプリでCarousel機能を実装

# 初めに
この記事は現在アプリ開発している際に、自身が使用したものに対しての備忘録用として記載します。

# Carouselとは
Carouselとは以下画像のようにセットした枚数分を一枚ずつスライド式で表示するもの

イメージ画像（以下に記載するコードとは関係ありません）

# ライブラリの使用
このCarousel機能を１から実装するととても手間がかかるので、用意されているライブラリを使用しました。

何個かあるのですが、自分はreact-material-ui-carouselを使用しました。
これを使用した理由はCSSを整えたい場合に簡単に変更が可能だからです。

もし、インポートしたCarouselをそのまま使用するのならreact-res

元記事を表示

jQuery: レスポンシブなWebサイトの構築

Alex, [Alibaba Cloud Community Blog](https://www.alibabacloud.com/blog?spm=a2c65.11461447.0.0.6d025eab6MdSwv) 著者

jQueryは、軽量でより少ない記述でより多くのことができ、JavaScriptライブラリと呼ばれ、HTMLプログラムの開発を容易にします。jQueryの主な目的は、Webサイトの開発にJavaScriptを使用することを容易にすることです。jQueryは、反復的な作業を排除し、1行のコードで呼び出されるメソッドを通じてJavaScriptの問題に取り組みます。ブラウザ技術の高度化やクライアントロジックの要求により、JavaScriptやHTMLを扱うことは非常に困難になっています。しかし、代表的なJSライブラリの1つであるjQueryは、機能の標準化とその実装を容易にします。

jQueryを使用する利点の1つは、ライブラリの習得や作業にそれほど苦労することなく、生産性が大幅に向上することです。jQueryを使うことで、UIの要求やフロントエンドの論理的な問題

元記事を表示

前回のアニメが重要回かどうかを自動通知する機能をつくってみた

この記事は「[マイスター・ギルド：夏のアドベントカレンダー2021](https://note.com/meisterguild/n/nec8f2665b32e)」6日目の記事です。

こんにちは、マイスター・ギルド開発部のヤマホンです。毎週見ているアニメの前回放送が、重要回かどうかを調べて通知する機能を作り、自動化しようと思います。

いったい、なんのアニメかって？バーロー、そんなこと教えられっかよ。

（本当は、次回の重要度が調べられたらいいんですが、さすがに未放送の回がまとめられることはないので、そこは目をつぶっていただきます・・・）

**この記事で行う行為はWebスクレイピングといわれる行為です。スクレイピング自体は違法ではありませんが、著作権にかかわる場合や、当該サイトの利用規約で禁止されている場合など、違法となる場合があります。**

## 方針

1. アニメ公式サイトにアクセスし、前回のタイトルを取得
2. まとめサイトにアクセスし、重要回のリストを取得
3. 上記を照合し、前回放送の重要度（A、B、C）を判定
4. 上記の処理を、Node.jsで実行できるようにす

元記事を表示

flask と socket.ioで2つの画像を合成する

#概要
canvasのデータをflask_socketioで、送り
サーバー側でbase64デコード、numpyにして
opencvで合成し、再度base64にエンコードして送り返す
いろいろ試しましたが、この方法じゃないと、ノイズが出たりとうまくいきませんでした。

#環境
mac10.15
python3.9.2

#template
“`javascript:top.html