- 1. Rubyの古いgemで自動ファイルアップロード Watirでの対処法
- 2. 無料でSSR・ホスティング・API鯖を立てれるVercel。TypeScript・ExpressでAPI鯖を立てる。
- 3. 【JavaScript・関数学習・output】
- 4. 論理演算子はboolean以外も返す const = AA || BB みたいなの
- 5. Microsoft Teamsにメッセージと画像を送る(Node.js)
- 6. gatsby入門 ブログ作ってサーバーにアップしてみる
- 7. fitbitのapi連携と集中力判定(PHP,Javascript)
- 8. 【とりあえず動かしたい超初心者向け】はじめてのVue.js環境構築
- 9. AWSLambda(Node.js)の入力パラメータチェック
- 10. Reactでnpm startができなくなった話。
- 11. クジラとネコの親子プログラミング – Docker for Windowsを使ってScratch3.0のオリジナル拡張機能を試してみよう。
- 12. stdout is not a ttyに叱られる
- 13. 個人的な疑問だった用語のメモリストを共有する
- 14. Twitterでかっこよくソースコードを表示するCarbonを君は知っているか。
- 15. 【Hash関数】できるだけ衝突率を上げずにIDを短くしたい
- 16. svelte/transitionでさくっと使うことができる5つのアニメーション
- 17. TypeScriptの型上級チートシート
- 18. Vuetify でフィルタリング機能付きセレクトボックスを実装する
- 19. TSでArray.reduce使ったら第一引数のaccumulatorがnever型になって混乱した話
- 20. WebGazer.jsを使って、Webカメラで顔認識してみた
Rubyの古いgemで自動ファイルアップロード Watirでの対処法
## 本稿について
WatirでWebサイトに対してファイルアップロードするスクリプトを書いていましたが、
古い環境で情報が見つけづらく困ったところ解決したので備忘録です。## 環境
CentOS Linux 7
Ruby 2.0.0p648
仕様gemはWatir
ブラウザはFirefoxを使っていますが、Chromeなど、別のブラウザでも## やりたいこと
あるWebサイトに対して、Watirをつかって自動スクリプト起動でファイルアップロードさせたい。
アップロード画面ではSelect file というボタンを押して、ファイル選択画面が出た際にそこからファイルを選んでアップロードさせる仕様## 躓いたこと
アップロード画面からファイル選択をする挙動ができておりません。
OS標準のファイル選択画面が開いた時点で、ブラウザ外の動作になってしまうのかスクリプトの操作が及びません。## 試したこと
1. watir内部でjavascriptを実行できるので、
クリップボードなどを使ってコピペができないか など試しましたがそもそも画面の仕様がスクリプトでのクリ
無料でSSR・ホスティング・API鯖を立てれるVercel。TypeScript・ExpressでAPI鯖を立てる。
Vercel
https://vercel.com無料で有名な**FaaS**(Function as a Service)の
**Firebase Functions**や**Netlify Functions**より使い勝手がいいと思う。GitHubの**捨てアカ**作ってログインしようとしたら**弾かれた**。
たぶんアカを作ってから**ある程度時間が経たない**と弾かれるっぽい。## ソースコード
“`package.json
{
“scripts”: {
“ts-build”: “webpack –mode production”
},
“devDependencies”: {
“@types/express”: “^4.17.8”,
“ts-loader”: “^8.0.3”,
“typescript”: “^4.0.2”,
“webpack”: “^4.44.1”,
“webpack-cli”: “^3.3.12”,
“webpack-node-externals”: “^2.5.2”
【JavaScript・関数学習・output】
◆JavaScriptの関数の種類や違い。
▼関数定義の種類：特徴
・関数宣言/関数式：標準的な関数の定義。
・無名関数：関数を多く使用する時にコードである時に使用する。関数名の重複を避けることができる。
・即時関数：流用する可能性がない関数を定義する時に使用する。別途関数を定義する必要がない。
・アロー関数：無名関数または即時関数において、より省力したい時に使用する。
以降は具体的な記述式を書いていきます。
▼関数宣言/関数式
関数宣言の記述↓“`
function 関数名 ( 引数 ) {
//関数内の処理
}
“`関数式の記述↓
“`
変数 = function ( 引数 ) {
//関数内の処理
}
“`・上記の関数宣言と関数式の違いは読み込まれるタイミングが異なることにあります。関数宣言が先に読み込まれます。実害はあまりないそうですが特徴として覚えておきます。
▼無名関数
無名関数の記述↓
“`
const hello = function(){
console.log(‘hello’)
}
“`・関数名無しで関数を
論理演算子はboolean以外も返す const = AA || BB みたいなの
[JavaScriptの「&&」「||」について盛大に勘違いをしていた件 – Qiita](https://qiita.com/Imamotty/items/bc659569239379dded55)
“`typescript
const _perview = Number($body.getAttribute(‘data-perview’)) || ‘auto’;
“`えっなにこれ、って思ってた。
`Number($body.getAttribute(‘data-perview’))`が`true`であれば`Number($body.getAttribute(‘data-perview’))`を返す。そうでなければ`’auto’`を返す。
そういう使い方出来るのね…if文的な時でしか使えないと思ってたよ本当に…
Microsoft Teamsにメッセージと画像を送る(Node.js)
Teamsのチャンネルに投稿用アカウント(Incoming Webhook)を追加して、
チャンネルにメッセージや画像を投稿する##1.投稿したいチャンネルにIncoming Webhookを追加
* Teamsの投稿したいチャンネルで右クリックして [コネクタ] を選択
* [incoming Webhook] を検索して [追加] をクリック、次画面で再度 [追加] をクリック
* incoming Webhookの名前とアイコン画像を設定して [作成] をクリック
* Webhook用のURLが表示されるのでコピーして [完了] をクリック##2.base64にエンコードした画像をメッセージに埋め込んでpostで送信
* node.jsの環境つくり、”fs”と”request”をインストール
* index.jsと同じ階層に画像を準備
* 以下のindex.jsを実行“`javascript:index.js
const fs = require(‘fs’);
const request = require(‘request’);fs.readFile(‘画
gatsby入門 ブログ作ってサーバーにアップしてみる
# gatsbyの作業履歴
[gatsby入門 チュートリアルをこなす 0.開発環境をセットアップする](https://qiita.com/3S_Laboo/items/a38536ed1fb976303b47)
[gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る（１）](https://qiita.com/3S_Laboo/items/014ca205612f21d830aa)
[gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る（２）](https://qiita.com/3S_Laboo/items/4a0f3fdf42c2aa466ed9)
[gatsby入門 チュートリアルをこなす 2. ギャツビーのスタイリングの概要](https://qiita.com/3S_Laboo/items/41bb0f5f7cabecedc4c2)
[gatsby入門 チュートリアルをこなす 3. ネストされたレイアウトコンポーネントの作成](https://qiita.com/3S_Laboo/items/c
fitbitのapi連携と集中力判定(PHP,Javascript)
#記事の概要
作成したポートフォリオの解説です。以下をまとめています。
– 背景
– 主な機能
– 開発手順
– 工夫点
– 課題#背景
「ポモドーロ・テクニック」という時間管理術が話題になっており、そのためのアプリなどもあるが、実際に集中しているかどうかを判断するのは単純なポモドーロタイマーだけでは難しい。
今回は心拍数と集中力の関係に着目し、集中力を判定するアプリを作成しました。#スペック
- 言語
- PHP 7.4.2
- javascript
- DBMS
- MySQL 5.7.26
- 開発環境
- MacOS Catalina 10.15.5
- MAMP 5.7
- ライブラリ
- jquery
- フレームワーク
- Bootstrap 4.2
- バージョン管理
- Git 2.24.3
【とりあえず動かしたい超初心者向け】はじめてのVue.js環境構築
Javascriptのモダンフレームワーク周りに関する知見がほとんどない人にVue.jsの環境構築をレクチャーする機会があったので、この機に構築手順をまとめてみます。
30分で最低限のツールと手順を把握しつつ環境構築することを目指したため、全体的に雑さが目立ちますがご了承ください。## 筆者の実行環境 (参考までに)
“`bash
Node: v12.13.1
npm: 6.12.1
yarn: 1.19.1
Vue-CLI: @vue/cli 4.1.1
“`## Vue.js
https://jp.vuejs.org/index.html
### Vue.jsとは
– JavaScriptフレームワーク(フロントコーディングの処理の一部を自動化したり簡略化してくれるツール)の1つ
– 単一のページ(要は1つのhtmlファイル)でコンテンツを切り替えるシングルページアプリケーション(SPA)を実現できる
– 基本はJavaScriptだが、フレームワーク独自の書き方やルールが存在する
– 他のモダンフレームワークとしてはAngular, Reactなどが有名だが、これら2
AWSLambda(Node.js)の入力パラメータチェック
AWSLambda(Node.js)のREST APIにおいて入力パラメータのチェックがしたい
そうだ、[value-schema](https://www.npmjs.com/package/value-schema)を使おう#value-schemaができること
1.必須パラメータの有無、
2.型、
3.想定範囲内に存在するか(e.g.limit < input < limit)、 上記3点における入力パラメータの検証と修正ができる #使い方 大きく２つの書き方がある....と勝手に思ってる 基本のフォーマットは vs.型名( {オプション} ) ```javascript //====その1. オブジェクトの中身をまとめてチェックする方法==== var vs = require("value-schema"); // 入力パラメータのオブジェクト let requestbody = { testId: "test", testNum: 1, testlist: [1, 2, 3], NoCheckid:"no", }; // 入力パ
Reactでnpm startができなくなった話。
#React.js Node.js環境でnpm start実行時にエラー発生。
解決策だけ見たい人は最後に載せてます。（予定）##問題編
#####[【React】いまどきのJSプログラマーのためのNode.jsとReactアプリケーション開発テクニックという参考書](https://amzn.to/3i8JRoF)
の写本・実践をやっていると、
React.js Node.js環境でnpm startできなくなった。
##経緯編
create-react-appでreactのアプリを作った。app.jsを編集し、いざ起動する。
“`
npm start
“`そうすると、以下のようなエラーが発生。
“`
> cycle@0.1.0 start /Users/user/Documents/ubuntu/cycle
> react-scripts startThere might be a problem with the project dependency tree.
It is likely not a bug in Create React
クジラとネコの親子プログラミング – Docker for Windowsを使ってScratch3.0のオリジナル拡張機能を試してみよう。
# 親子プログラミングはGitとNode.jsが使えることが前提になっている？
小学校でのプログラミング教育の必須化に伴って、子供たちがScratch 3.0に触れる機会も増えるかと思います。そんな中、ブロックをくっつけるだけのお遊びツールだとあなどっていると、次のような連載が始まりました。
>[「親子でできる！Scratch と AWS を使った “ものづくり” 体験 – 1. 準備 〜 疎通確認編」](https://aws.amazon.com/jp/builders-flash/202009/programming-with-kids/)
2020-09-01
How to be a Developer
金澤 圭この連載の[「2. 作業の前提について」](https://aws.amazon.com/jp/builders-flash/202009/programming-with-kids/#02)で、衝撃的な次の一文があります。
> **PC に Git と Node.js がインストールされている必要があります。**
保護者の方も、GitやNode.jsを当た
stdout is not a ttyに叱られる
完全に自分用の健忘録です
Git Bash(ver2.28)で実行しようとした際に、
“`
$ node hogehuga.js
stdout is not a tty
“`と叱られてしまった。悲しい。
原因はMinTTYのアレです。大体winptyを先頭につければ解決すると思ってたけど、今回は解決しなかった。
Gitを再インストールしてもダメ。5分くらい悩んで、拡張子をつけたら動いた。
“`
$ node.exe hogehuga.js
“`以下参考
https://github.com/mintty/mintty/wiki/Tips#inputoutput-interaction-with-alien-programs
個人的な疑問だった用語のメモリストを共有する
# ゲッター
ゲッターはある属性の値を取得するメソッド# セッター
セッターは属性に値を設定するメソッド# イミュータブルなオブジェクト
変更不可能なオブジェクト# ミュータブルなオブジェクト
変更可能なオブジェクト# イメージとコンテナの違い
プログラミングで例えるとイメージがクラスでコンテナがオブジェクト（＝インスタンス）# docker-composeの役割
複数コンテナをコマンド一つで作成、削除、停止できる。
docker runだとそのコンテナ一つごとにコマンドを叩かなければならない。## その他
dockerコマンドを叩けるターミナルなどをdockerクライアント、dockerサーバーをdockerDemonと呼ぶまた追記します。アドバイスあればよろしくお願いします。
Twitterでかっこよくソースコードを表示するCarbonを君は知っているか。
こんにちは、現在フリーのweb制作者として活動していますしょーごと申します。
さてみなさん、`ソースコードのハイライトは見ていて気持ちが良いですよね。`
VSCodeのコードハイライトだと、class名が緑色になるのが好きだったりします。
これに慣れてしまうと、もう質素なメモ帳など使えなくなりますよね。
しかし、Twitterにはエディター機能はないので、ツイートしたくても**そのままソースコードを貼り付けると、すごく味気なくなります**（文字数制限もきつい）
 => `123abc456DEF`(12桁)## 手順
1. Hash関数を用いて文字列から数値に変換する
2. その数値を62進数(`a-z + A-Z + 0-9`)に変換するこうすることで、一意性をギリギリまで保ったまま短くできると考えた
## 使用環境・言語
– macOS Mojave 10.14.5
– node 10.19.0
– TypeScript 3.9.7## 実装
### 1. ハッシュ関数の選定
ハッシュ関数と言っても、アルゴリズムや出力サイズ等、様々な種類が存在している。
=> 参考: [hashアルゴリズムとハッシュ値の長さ一覧（＋ハッシュ関数の基本と応用）](https://qiita.com/KEINOS/items/c92268386d265042ea16)
svelte/transitionでさくっと使うことができる5つのアニメーション
# はじめに
Svelte.jsでは`svelte/transition`モジュールを取り込むことによって、アニメーションを使うことができる。
今回はさくっと使うことができる5つに絞ってそれぞれどのような動きになるのか、簡単に見てみる。# svelte/transition一覧
## fade
名前の通りフェードアニメーションです。
`svelte/transition`をインポートする際に`fade`を指定することで使うことができる。
そしてfadeしたい部分に`transition:fade`を追加する。※後に続くアニメーション紹介では省略します。“`javascript
```あとはbody内にsc
