- 0.1. 絶頂度の計算方法についてそれなりに真剣に考えた
- 0.2. JavaScript 配列のメソッド
- 0.3. 【簡単3 steps】Vue.jsサンプルをLaravelアプリに実装する方法
- 0.4. Slickでslick-slideのheightを100%にする方法
- 0.5. 分割代入を利用したstate[ ]の更新
- 0.6. 【JavaScript】ハンバーガーメニューが閉じているのに中のリンクを押せる不具合の解消方法
- 0.7. node.js実践編(Markdown導入編)
- 0.8. ES2022 Array#at がちょっとおかしい
- 0.9. ほんやくコンニャクお味噌味を食べて論文を読もう！
- 0.10. ブラウザにROS画像の送信 ROS/Javascript
- 0.11. 【JavaScript】入力フォームを使ったHTMLページをスッキリした見た目にする
- 0.12. [JavaScript] named export と default export の違い
- 0.13. Module parse failed: Unexpected string in JSON at position 93 while parsing と表示された時の対処
- 0.14. 【jquery+Datatables】行削除と各要素の値チェックに対応した簡単なテーブルを作る
- 0.15. [Jexcel]Excelで開けるUTF-8ファイルを作る
- 0.16. Nuxt jsonデータからバインディングした値で画像を表示させる
- 1. {{ result.text }}
絶頂度の計算方法についてそれなりに真剣に考えた
少し前にバズっていた以下の記事があまりに面白かったので
https://anond.hatelabo.jp/20210408000218
この絶頂度計算なるものを誰か編み出してくれないかなーと思っていたのですが誰もやってくれないので自分で考えてみました。
結論としてあまり良い結果は得られませんでしたが、firebaseで公開しましたのでよかったら遊んでみてください。
https://crimax-metrics.web.app
# 記事内容からの仕様読み取り
> 「あえぎエディタ.xls」と題されたエクセルファイルは、前任者が残したあえぎ声専用のマクロ
Excelのマクロ（VBA）で作成されている。この場合、分かち書きなどはできないはずなので、特定の発言をしていればポイントを高くするなどの文章解析処理にあたるものは行なっていない可能性が高い。
> 縦に並んだセルにセリフを一つずつ入力していくと、各セリフに含まれる母音・子音等の音声的要素が自動で数値化される。
> さらに、その数値を足し引き計算することで、「絶頂度」と呼ばれる値が算出される仕組み母音・子音に分解し、
JavaScript 配列のメソッド
JavaScriptの学習の備忘録と振り返りの記事です。
何かの参考になれば幸いです。
付け足しや訂正などある場合ご教授いただけると
大変嬉しく思います！！##pushメソッド
#####配列の最後に新しい要素を追加するメソッド
pushメソッドの後の()の中に追加したい要素を入力する“定数.push(追加したい要素);“
“`js
//const numbers = [1,2,3];
//console.log(numbers);
numbers.push(4);
//console.log(numbers);
“`
出力結果:[1,2,3,4]##forEachメソッド
#####配列の中の要素を1つずつ取り出し、全ての要素に繰り返し同じ処理を行うメソッド“配列名.forEach((引数) => {処理内容});“
“`js
//const numbers = [1,2,3];
/【簡単3 steps】Vue.jsサンプルをLaravelアプリに実装する方法
今回の記事は下記の方におすすめです！
:::note info
Laravelの基礎はOK
Vue.jsの基礎はOK
でもLaravelでVue.jsサンプルを使う方法が不明
:::自分でゴリゴリコードを書くのもありですが、最初のうちは「Vue.js」のサンプルをLaravelのサイトに埋め込むところから始めるのはありかもしれません。
今回は、「Vue.js」のサンプルが多数紹介されている海外のサイトを紹介しつつ、サンプルを実際の自分のプロジェクトに埋め込む方法について共有いたします！
今回の記事が参考になれば幸いです:relaxed:
なお、間違いやご指摘ありましたら、コメント下さると幸いです。—
# 実行環境
– PHP 7.4
– Laravel 6.2
– VSlickでslick-slideのheightを100%にする方法
通常は下のような感じ（オプションなし）
“`javascript
$(‘.slider’).slick();
“`ここでslick-slideのheightを100%にする場合は
“`javascript
$(‘.slider’).slick()
.on(‘setPosition’, function(event, slick) {
slick.$slides.css(‘height’, slick.$slideTrack.height() + ‘px’);
});
“`これでOK
分割代入を利用したstate[ ]の更新
“`ts
const [state, setState] = useState({id:1, firstName:”taro”, lastName:”sato”});const obj = {firstName:”hanako”, lastName:”sato”};
const pushFunction = (state) => {
setState( […state, {id:2, …obj}] )
}// …state => {id:1, firstName:”taro”, lastName:”sato”}
// …arr => firstName:”hanako”, lastName:”sato”
// id:2, …arr => id:2, firstName:”hanako”, lastName:”sato”
// […state, {id:2, …obj}] => [{id:1, firstName:”taro”, lastN【JavaScript】ハンバーガーメニューが閉じているのに中のリンクを押せる不具合の解消方法
#対象者
* ハンバーガーメニュー実装を考えている方
* メニューを閉じているのに中身をクリックできる不具合が出ている方#目的
* ハンバーガーメニューの実装
* 不具合の解消#実際の手順と実例
###1.前提とエラー下記の記事を参考にハンバーガーメニューを実装しました。
しかし、閉じている状態でも中身のリンクをクリックできる不具合に遭遇したので、これを解消していきたいと思います。
###2.結論(解決策)
CSSが今回の原因でした。
before
““application.scss
/* ナビが開いた状態 */
nav.globalMenuSp {
position: fixed;
z-index : 2;
top : 0;
left : 0;
color: #fff;
background: rgba(0,0,0,0.7);
text-align: center;
width: 100node.js実践編(Markdown導入編)
# 準備
以下のコマンドで必要なパッケージをインストールします。“`
npm install markdown-it
“`
1から作る場合は以下のパッケージをインストールします。“`
npm install express-session
npm install express-validator
npm install sqlite3
npm install knex
npm install bookshelf
npm install markdown-it
“`# モデル作成
以下のコマンドでモデルを作成します。“`
npx sequelize-cli model:generate –name Markdata –attributes userId:integer,title:string,content:text
“`
モデルファイルを修正、追記します。“`javascript:models/markdata.js
‘use strict’;
module.exports = (sequelize, DataTypes) => {
conES2022 Array#at がちょっとおかしい
https://twitter.com/petamoriken/status/1435170216304988160
これについて解説します。ちなみに答えは `1` です。
## 配列のプロパティアクセスについて
JavaScript においてオブジェクトのプロパティにアクセスするキーは文字列（とシンボル）だけとなっています。その他の値をキーに入れた場合、文字列に暗黙的型変換されます[^impl]。ちなみに配列はオブジェクトの一種です。
[^impl]: 仕様の上ではそうですが、実装では同じ結果さえ返せばいいのでどうなっているかわかりません。普通配列に対して数値でアクセスすることが多いため、実装ではそれを前提とした最適化を行っているかもしれません。無駄に文字列で配列のプロパティにアクセスするコードを書くのは辞めたほうがいいです。
“`js
const arr = [1, 2, 3];
console.log(arr[“0”]); // => 1
console.log(arr[“1”]); // => 2
console.log(arr[“10”]); // => undeほんやくコンニャクお味噌味を食べて論文を読もう！
# Abstract
ブラウザ上で論文を”Read online”で読む際に、DeepLを用いたページ翻訳もどきを行うツールを紹介する。このツールはChromeさえ入っていれば、会社などのインストールに制限がある環境でも実行できる利点がある。
[Github「TranslationGummyOmiso」](https://github.com/KYU49/TranslationGummyOmiso)に導入方法と使用方法を示してあるため、別途こちらも参考にしていただきたい。この記事は半分お遊びで執筆したため、技術的な内容に興味がない場合や、使用のみを目的とする場合はGithubだけを読むことを強く推奨する。# Introduction
> ほんやくコンニャクお味噌味は「ドラえもん のび太の日本誕生」にて使用された、食べると未知の言語間でも会話が可能となるひみつ道具である。……という話はここではおいておいて、このツールは2020年12月に[岩崎 修登](https://twitter.com/cabernet_rock) 氏が「[「ほん訳コンニャク」 を食べて 論文を読もう
ブラウザにROS画像の送信 ROS/Javascript
# 概要
ブラウザ上にROSのイメージトピックを配信
# インストール
– web-video-serverをインストール
– sensor_msgs/Imageをブラウザへ配信してくれる“`
sudo apt install ros-noetic-web-video-server
“`# 実行
“`
roscore
“`“`
rosrun web_video_server web_video_server
“`別端末で好きなイメージを引数に与えて,image_publisherの実行(静止画をROSメッセージとして送信してくれる)
“`
rosrun image_publisher image_publisher {イメージファイル}ex.
rosrun image_publisher image_publisher temp.png
“`# 結果
ブラウザからhttp://localhost:8080 へアクセス
すると以下の写真のようにトピックが選択でき,クリックするとそのストリームを見ることができる!
![Screens
【JavaScript】入力フォームを使ったHTMLページをスッキリした見た目にする
コードだけをみたい人は最後に全体を載せてますのでそちらへ。
それでは本題の前に、
まずは普通にhtmlでselect要素1つ、input-text要素1つを設置します。“`HTML
text and select form
年
“`上のHTMLをブラウザで見るとselect要素とinput-text要素が表示されます。
これらを多用して「入力ページ」を作るのはいいのですが、
そのページを印刷してそのまま利用するわけにはいきませ[JavaScript] named export と default export の違い
export とか import の構文をES Modulesと呼びます。
ES Modulesを使うために、Deno 環境を用意するとよいです。Node.js でも package.json 記載すればうまく動きます。
この記事ではどちらでも動かしてみます。“`js:fileA.js
export const funcA = () => {
console.log(‘funcA output’)
};
“`
これが named export 。関数名付きでファイルからexportしています。“`js:fileB.js
const funcB = () => {
console.log(‘funcB output’)
};export default funcB;
“`
これが default export 。名前なしでファイルからexportしています。使い方はそれぞれこんな感じ。全て同一ディレクトリ内に配置してください。
“`js:index1.js
import { funcA } from ‘./fileA.js’
import funcModule parse failed: Unexpected string in JSON at position 93 while parsing と表示された時の対処
## jsonファイルを手動で弄ると起こるエラー
“`
Module parse failed: Unexpected string in JSON at position 93 while parsing ‘{
“name” : “text”,
“sex”: {
“‘
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
SyntaxError: Unexpected string in JSON at position 93 while parsing ‘{…
“`このエラーが起こった時の対処です。
## カンマ(,)が無かった
“`json
{
“name” : “abc”
“sex”: {
“male”: “true”
}
“age”: “123”【jquery+Datatables】行削除と各要素の値チェックに対応した簡単なテーブルを作る
フロントエンドエンジニアではない人が作った簡単な画面です。
だけど、体感的にこういう画面が使いたいときは結構ある気はする（すでにライブラリもあるかもしれないが）。# 作ったもの
サーバサイドからajax経由でデータを受け取る
名前に日本語などの変な文字列が入っていたり、数式に変な文字(画像の場合は大かっこ[])が入っていると、validation errorを発生させ、テキストフィールドに色を付けて、エラーメッセージをセルの近くに出す
IDの付近を押すと「削除」のメニューが近くに出てくる
[Jexcel]Excelで開けるUTF-8ファイルを作る
※いわゆる「//なぜか動く」もので、個人の覚え書きです。
いまはJexcelでなく「[Jspreadsheet](https://bossanova.uk/jspreadsheet/v4/)」に改名したようですね。
設置方法については他の方の記事をご参照ください。# CSVダウンロードすると当然のごとくUTF-8で落ちてくる
CSVビューアーを使ってくれればいいのですが、だいたいの企業の人間はCSVファイルを開くのにExcelを使います。
Excelで直接CSVファイルを開くと、文字コードがSJISでないと日本語が文字化けします。# ダウンロード文字コードを変える
jexcel.jsの5926行目あたりにある以下の記述を変える“`javascript:jexcel.js
var blob = new Blob([“\uFEFF”+data], {type: ‘text/csv;charset=utf-8;’});
“`↓
“`javascript:jexcel.js
var blob = new Blob([“\uFEFF”+data], {type: ‘teNuxt jsonデータからバインディングした値で画像を表示させる
#はじめに
タイトルの日本語があってるのかわかりませんが、やりたいのはこういう事?です。ソースを見てわかってください。。。“`js:assets/js/data.js
export const resultsData = [
{
id: “00”,
text: “熱中する人”,
img: “charmander.png”
},
{
id: “01”,
text: “達成する人”,
img: “caterpie.png”
},
{
id: “02”,
text: “挑戦する人”,
img: “charmeleon.png”
},
]
“`ここで定義したデータに画像が入ってます。
それを
“`html
{{ result.text }}