- 1. 欲しい地域の天気予報情報を取得できます
- 1.0.1. ビジュアルプログラミングで高位合成 その8
- 1.0.2. ビジュアルプログラミングで高位合成 その7
- 1.0.3. FastAPIで簡単なリアルタイムチャットの仕組みを作る
- 1.0.4. GASを叩くSlack BotのEvent Subscriptions → Request URL Verifiedを無理やりクリアする
- 1.0.5. ビジュアルプログラミングで高位合成 その6
- 1.0.6. RSSとAtom 記事一覧の取得方法の話
- 1.0.7. ビジュアルプログラミングで高位合成 その5
- 1.0.8. LINEのWebhookをPostmanで再現したい
- 1.0.9. なでしこで自身のDOM要素を削除したい
- 1.0.10. 初心者エンジニアが体験！indexedDBの便利さと実践的な活用法
- 1.0.11. TypeScript/JavaScriptで配列の重複データを効率的に除去する
- 1.0.12. sortの仕組みを整理した (JavaScript)
- 1.0.13. JavaScriptで画像に動きをつける【初級編⑤】
- 1.0.14. Cesium で自作3Dモデルを表示する
- 1.0.15. [Android] Javascript Interface
- 1.0.16. ビジュアルプログラミングで高位合成 その4
Material UIの無料テンプレートであるDashboardを実装する方法
初投稿です。Dashboardの実装に大変苦労したため、備忘録として作成しました。
## はじめに
この記事はMaterial UIのインストールから無料テンプレートであるDashboardを実装するまでの手順を書いたものです。
また、この方法は2024年9月22日時点においての実装方法です。今後実装方法が変わり、本記事のやり方では実装できなくなる可能性があることをご了承ください。
それでは、始めていきます。## Material UIのインストール
以下のコードを順番に実行します。
“`
npm install @mui/material @emotion/react @emotion/styled
npm install @fontsource/roboto
npm install @mui/icons-material
“`
## プロジェクトの下準備
次に、https://github.com/mui/material-ui/tree/master/examples/material-ui-cra/src に存在する4つのファイルのコー
#ウルティマオンライン のUO職人サイトの錬成成功率計算( #Javascript #プログラミング )を現バージョンに合わせる方法
**本内容を利用した場合の一切の責任を私は負いません。**
# 概要
下記の通り、補正率が合っておらず、合わせるにはHP変換属性無は2.25、有は0.9にする必要がある。
https://x.com/tw388192/status/1837703362680442963
本記事は合わせる方法である。# 結論
HTMLにHP変換属性無と有の識別コードがあるので、それを変更する。
それぞれ5コで計10ヶ所。
`# 内訳
補正率は識別コードを利用して保持している。
識別コードの100未満の桁が補正率の10倍値、100以上の桁は表示値換算種別値になっている。
後者は、例えば、HP増なら上限は5、MP増なら上限は8で、この値から現在値の強度割合を計算できるようにしている。
現在値が2の場合、HP増なら40、MP増なら25で計算が異なるため、これを表示値換算種別値で識別している。
HP変換は上限が15で、命中
トップに戻るボタンの作り方【初級編⑥】
# はじめに
今回は、下記のサイトを参考に、トップに戻るボタンを作っていきます。https://www.solluna.blog/web/javascript/to-top/
# ずっと表示されているトップに戻るボタン
javascript json 天気予報
### javascriptの勉強とhtmlの勉強とjsonの勉強でした。
参考サイト
https://itsakura.com/js-selectbox“`html
天気予報取得
欲しい地域の天気予報情報を取得できます
ビジュアルプログラミングで高位合成 その8
# 概要
ビジュアルプログラミングで組み合わせ回路を組み立てて、シュミレーションして、verilogを生成します。
高位合成です。
実は、今の実装では、全加算器が高位合成できません。
全加算器の高位合成を計画します。
ワイヤーの概念を導入します。
構想編# 論理デバイスと論理デバイスが繋がっている。
今のコードでは、対応できない。
# ワイヤーの概念を導入する。
論理デバイスと論理デバイスが繋がっている場合、ワイヤーがあると設定する。
# 生成されるverilog
“`
module x(input B, input A, input Cin, output Sum, output Cout);
wire w0;
wire w1;
wire w2;
assign Sum = (Cin ^ w0);
as
ビジュアルプログラミングで高位合成 その7
# 概要
ビジュアルプログラミングで組み合わせ回路を組み立てて、シュミレーションして、verilogを生成します。
高位合成です。
実は、今の実装では、全加算器が高位合成できません。
全加算器の高位合成を計画します。
設計編# 全加算器を動作させて、真理値表を作る。
こちらに、simcirjsがあります。動作させて、真理値表を作成しましょう。https://embed.plnkr.co/plunk/UOeNFNBciol1kqprJ2Pu
# 左のデバイス一覧から、FullAdder、DC、In、Out、Toggle、LEDをドラッグします。
# ワイヤーをつなぎます。
;
assign Sum = (A ^ B);
assign Carry = (A & B);
endmodulemodule test;
reg A;
reg B;
x u(.A(A), .B(B), .Sum(Sum), .Carry(Carry));
initial
begin
$display(” A B Sum Carry”);
$monitor(” %b %b %b %b”, A, B, Sum, Carry);
A = 0;
B = 0;
#10;
A = 0;
B = 1;
#10;
A = 1;
B = 0;
#
RSSとAtom 記事一覧の取得方法の話
# はじめに
複数のプラットフォームから記事一覧を取得したい！
なるべく処理を共通化したい！# RSS1.0 / RSS2.0 / Atom
https://medifund.jp/seo/rss-atom/こちらの記事がとても参考になります。
記事情報の取得（**Feed**）のための仕組みは３種類あるようです。| 仕組み | 採用プラットフォーム | タイトルの取得方法 |
| :-: | :-: | :-: |
| RSS1.0| | |
| RSS2.0 | Zenn / しずかなインターネット / note | `channel > item > title`|
| Atom | Qiita / Github（コミット情報）| `entry > title` |同じ仕組みを採用している場合、処理を共通化することができます。
# 共通化した処理
プラットフォームごとのURLを受け取り、共通化された処理を行います。返り値は`{title:string, link:string, published:date}`です。
仕組みによりますが、以下の要素も取得可
ビジュアルプログラミングで高位合成 その5
# 概要
ビジュアルプログラミングで組み合わせ回路を組み立てて、シュミレーションして、verilogを生成します。
高位合成です。
実は、今の実装では、半加算器、全加算器が高位合成できません。
半加算器の高位合成を実装します。
実装編# 成果物
https://embed.plnkr.co/plunk/3dX40SUC5LEbZD7j
# 生成したverilog
“`
module x(input A, input B, output Sum, output Carry);
assign Sum = (A ^ B);
assign Carry = (A & B);
endmodule“`
# サンプルコード
“`
function make(s) {
var i;
var j;
var k;
var res = “”;
var ins = [];
var outs = [];
var divs = [];
var ass = [];
var json = JSON.parse(s);
var koko = document.getE
LINEのWebhookをPostmanで再現したい
# 概要
今回は、LINEの`Messaging API`を使った開発において、メッセージ（Webhook)の機能を、`Postman`を使用しパラメーターを送信することで、ローカル環境でのみテストできるようにしたいと考えています。
# メッセージ（Webhook)の仕組み
Webhookの設定をLINE Developersで指定していると、LINE上でメッセージが送信されている場合にアプリにメッセージが送信されます。（下記の図を参照）
Webhookで使用できるイベントは、メッセージだけではなく「フォローしたとき」や「メッセージを取り消したとき」など色々と用意されています。（詳しくは、公式のAPIドキュメントを参照ください。）
https://developers.line.biz/ja/docs/messaging-api/r
なでしこで自身のDOM要素を削除したい
# はじめに
最近、こんなものを、日本語プログラミング言語「なでしこ」で作りたいと思った。
追加ボタンは非常に簡単で、`ラベル作成`という命令を用いることで、比較的簡単に実現できる。
https://nadesi.com/v3/doc/index.php?plugin_browser%2F%E3%83%A9%E3%83%99%E3%83%AB%E4%BD%9C%E6%88%90&show
例えば、以下のようなプログラムを作成すると追加することができる。
“`html:index.html
<
初心者エンジニアが体験！indexedDBの便利さと実践的な活用法
## はじめに
こんにちは。入社2年目、実務経験約半年の駆け出しフロントエンドエンジニアです。日々の業務では主にNuxt、Vue、AWS、TypeScriptを使って開発を行っています。今回は、最近“indexedDB“というものを触る機会があったので、便利だと感じた部分を共有したいと思います。
駆け出しのエンジニアの方にとって、少しでも参考になる情報をお届けできれば嬉しいです。## indexedDBとは
indexedDBは、ブラウザ上で動作する強力なクライアントサイドのデータベースシステムです。WebStorageよりも高度な機能を持ち、大量のデータを扱えるのが特徴です。主な特徴は以下の通りです:
– ブラウザ上で動作するNoSQLデータベース
– キーと値のペアでデータを保存
– 非同期APIを使用
– トランザクションをサポート
– 大容量のデータを扱えるhttps://developer.mozilla.org/ja/docs/Web/API/IndexedDB_API
## indexedDBの便利な点
indexedDBを使ってみて、以下の点が特に
TypeScript/JavaScriptで配列の重複データを効率的に除去する
配列データの処理において、重複した値を取り除く作業はよく必要になります。今回では、TypeScriptやJavaScriptを使用して配列内の重複データを簡単かつ効率的に取り除く方法を説明します。
### なぜ重複除去が必要か
重複データを持つ配列を処理する場合、パフォーマンスや正確なデータ分析に悪影響を与えることがあります。例えば、APIから取得したデータやユーザー入力を扱う際に、意図せず重複が発生することがあります。そのため、データのクリーンアップを行うことが重要です。
### Setを使った重複除去
最もシンプルで効率的な方法は、“Set“オブジェクトを使用することです。“Set“は一意の値のみを保持するコレクションで、重複する値を自動的に除外します。
例
“`javascript
const array = [‘A’, ‘B’, ‘A’, ‘C’, ‘B’];
const uniqueArray = Array.from(new Set(array));console.log(uniqueArray); // 結果: [‘A’, ‘B’, ‘C’]
sortの仕組みを整理した (JavaScript)
業務では、配列のソートはlodashを使うのですが、細かく条件を入れてソートしたい時はsortメソッドの方が便利です。そこで、今一度このsortの仕組みを整理してみました。
## sortメソッドとは
配列に対して、順番に２個ずつ要素を取り出して計算/比較した結果を**正もしくは負の数**で返す事で並び替えをしてくれる。
“`javascript
[ARRAY_DATA].sort((a, b) => ここでa, bを計算,比較して,正か負の数を返す)
“`**並び替えの仕組み：**
結果が**正** → 第一引数 a を 第二引数 b の後に並べる → [b, a]
結果が**負** → 第一引数 a を 第二引数 b の前に並べる → [a, b]実際に見ていきましょう、本記事内のコードは以下のサンプルデータを使っています。
“`javascript
// サンプルデータ
// *startDateは本来UNIXタイムスタンプですが、便宜上わかりやすくしてます。
const arr = [
{ eventName: “イベントB”, startDate: 3,
JavaScriptで画像に動きをつける【初級編⑤】
# はじめに
今回は、Webサイトでよく使われている、画像をスクロールさせると上下からフェードイン、左右からスライドインさせるアニメーションを作っていきます。## 画像を上からフェードイン
See the Pen
画像を上からフェードイン by Uka
Cesium で自作3Dモデルを表示する
先日、たまたま [PLATEAU](https://www.mlit.go.jp/plateau/) を知り、その流れで [Cesium](https://cesium.com/) を知り、Cesium で自作の3Dモデルを表示してみたくなったので、後で読み返せるように、その時のことをまとめておこうと思います。
## まずは Cesium を動かす
Cesium の Github リポジトリで、Webpack で Cesium を使用するアプリケーションの（最小の）雛形が公開されているので、これを利用します。
https://github.com/CesiumGS/cesium-webpack-example
作業用ディレクトリで以下のコマンドを実行します。
Webpack4 と Webpack5 用の雛形が用意されているようで、今回は Webpack5 用を使用します。“`bash
git clone https://github.com/CesiumGS/cesium-webpack-example.git
cd cesium-webpack-example
cd w
[Android] Javascript Interface
# Javascript Interfaceとは？
スマホアプリ内にウェブページを埋め込むwebViewを使う際、
フロントエンドのコードがスマホアプリのネイティブコードを叩く手段が提供されている。それがJavascriptInterface
# 使い方導入
## kotlin実装
“`kotlin
class MyJavascriptInterfaces {
@JavascriptInterface
fun hello(){
Log.i(“webViewApp”, “Hello, World”)
}
}
“`
というJavascript Interfaceを搭載したクラスを作り
“`kotlin
binding.webView.apply {
settings.javaScriptEnabled = true
addJavascriptInterface(MyJavascriptInterfaces(), “MyJavascriptInterface”)
loadUrl(“https://www.googl
ビジュアルプログラミングで高位合成 その4
# 概要
ビジュアルプログラミングで組み合わせ回路を組み立てて、シュミレーションして、verilogを生成します。
高位合成です。
実は、今の実装では、半加算器、全加算器が高位合成できません。
半加算器の高位合成を計画します。
設計編# 半加算器を動作させて、真理値表を作る。
こちらに、simcirjsがあります。動作させて、真理値表を作成しましょう。https://embed.plnkr.co/plunk/UOeNFNBciol1kqprJ2Pu
左のデバイス一覧から、HalfAdder、DC、In、Out、Toggle、LEDをドラッグします。
ワイヤーをつなぎます。
