- 0.1. Javascrioptのvar、let、const【個人的なお勉強アウトプット】
- 0.2. GASでファイル一覧とフォルダ一覧取得
- 0.3. webpack5.x対応loaderの作り方
- 0.4. 【GAS】資料を簡単にまとめてくれていろいろ教えてくれるLINEBOTで業務効率化してみた！
- 0.5. TODOリストで学ぶ配列の操作をforを使わずに操作する方法
- 0.6. 問い合わせなどに使える、ボタンを押すとメールが開いて宛先も入力されている簡単ワンタッチメール
- 0.7. Phaser.jsで作ったCPU対戦４人用大富豪をiPadに対応させました。
- 0.8. JSONPの404は捕捉できない
- 0.9. 開発日誌：入力フォームの値を処理で使えるようにする
- 0.10. じゃんけんプログラムをJavaScriptで書く
- 0.11. PHPの配列のkeyをスネーク⇔キャメル変換する関数を作ってみた
- 0.12. FizzBuzz問題をJavaScriptで解く
- 0.13. GoogleEarth上でGPSのルートを移動するツアーの作成
- 0.14. M5Core2とM5Atom EchoでMP3再生
- 0.15. JSのscrollHeight, clientHeight, offsetHeightの違い
- 1. scrollHeight
- 2. clientHeight
Javascrioptのvar、let、const【個人的なお勉強アウトプット】
いずれも変数や定数を宣言するときにつかうもの。
varは古株。letとconstはECMASScript2015から。
ECMAScript2015はJavascriptの標準仕様。
国際団体で標準かされたうえ、ブラウザで広く採用されている。## 違い
– 再代入、再宣言が可能か
– スコープ### 再代入、再宣言が可能か
varは再代入、再宣言が可能
letは再代入が可能
constは宣言したら変更不可### スコープ
varはブロック外でも参照可能
let、constはブロック外では参照不可## 推奨されている使い方
変数の内容が変わったり、ブロック外にいったりきたりするのは可読性を下げる。
不具合も生みやすくなる。
なので、できるかぎりconstをつかったほうがよい。
ただし、for文などで変数の中身を変えていくものはletで。
varはつかわなくてもよい。
GASでファイル一覧とフォルダ一覧取得
複数人でGoogleDriveを利用しているとファイルやフォルダの数が膨大になり管理が難しくなります。
**想定される課題**
1.目的の資料にたどり着くのに時間がかかる
2.せっかく作られた資料の存在が周知されない
3.資料が更新されないこのあたりをGAS等で改善できないか調査中で、この記事はその備忘録になります。
##ファイル一覧とフォルダ一覧取得
ひとまずはファイルの一覧とフォルダ一覧取得の備忘録です。さほど難しい事はありません。“`Javascript
function myFunction() {
//ファイル一覧取得
folder = DriveApp.getFolderById(‘フォルダID’);
files = folder.getFiles();
while(files.hasNext()) {
var buff = files.next();
console.log(buff.getName()+’ : ‘+buff.getId() + ‘ : ‘ + buff.getLastUpdated());
}//
webpack5.x対応loaderの作り方
# 動機
* htmlは静的なものを使うんだけど、ejsのincludeが使いたい。
* できればdejsでも同じejsを処理したい（`<%-await include()%>`)
。。。deno移行する時のための準備。denoって有望なんでしょうかね？
* ~~バッチでejsコマンドとwebpack呼べばいいだけなんだけど~~webpackで完結したい# どうするか
npmで「ejs loader」で検索すると、、、、
たっくさん出てくる。でも、いくつか使ってみようとしても動かない
# とりあえず、自分で作ってみる
* `module.exports = function (content, map, meta)`の形で書けば良いらしい
* webpackで設定したoptionsは`require(“loader-utils”).getOptions(this)`で取れるらしい
* `await include`するためには
+ ejs
1. ejs.render()を非同期呼び出し（`await ejs.render()`)
1. ejs.render
【GAS】資料を簡単にまとめてくれていろいろ教えてくれるLINEBOTで業務効率化してみた！
GASとLINE Messaging APIでサークルの業務効率化を図ってみました。GASあんまり使ったことなかったので自分用メモも兼ねて
# 作りたいもの
サークルの業務効率化のためのLINEBOT## 現状の問題点
* LINEグループの連絡って流れがちだけど､かと言って複数グループは管理が面倒
* サークルのGoogleドライブ内の資料に書き込んだりそれらを閲覧したりする場合は大学アカウントでのログインが必要で正直めんどくさい(とはいえ公開範囲を誰でもにするのはセキュリティ的に問題がある)
* ↑情報探すにしても資料追加するにしても､そもそも工程が多いとめんどくさくてモチベーション下がりがち?## 要件
* URLやメモ書きを投げたら､自動でサークルのGoogleドライブ内のスプレッドシートに保存してくれる
* 練習日程や用語の意味などを聞いたら､自動返信でアンサーをくれる
(↑ここに関してはMessagingAPIの機能である応答メッセージを使用してもよかったが､今回は語句の追加などの権限を自分以外にも付与したかったためスプレッドシートを使用)# 作成手順
1.
TODOリストで学ぶ配列の操作をforを使わずに操作する方法
配列の操作でfor文使わなくなったなーと思ったので代わりに使っているものとどのように使っているかをTODOリストを例にまとめてみます。
1 forEach
—
forEach() メソッドは、与えられた関数を、配列の各要素に対して一度ずつ実行します。https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
使用例
todoリストで未完了のみの配列を取得していたとすると、これを一括完了ボタンを実装してクリックされた時に全て完了にするような操作の時に使える。“`js
const tasks = [
{ id: 1, content: “hello”, isDone: false },
{ id: 2, content: “hello wold”, isDone: false },
{ id: 3, content: “Vue.js”, isDone: false },
{ id: 4, content: “Nuxt.js”, isD
問い合わせなどに使える、ボタンを押すとメールが開いて宛先も入力されている簡単ワンタッチメール
すごく久しぶりの、投稿ですが、今日も頑張ります。
今回は、問い合わせなどに使えるワンタッチメール機能を、作成したいと思います。
“`ruby“`
が、ワンタッチメールです。
つぎは、電話です
“`ruby“`
すごく簡単です。
参考になると嬉しいです
フォローしてくれると、必ず９８％フォロバします
フォローお願いします
Phaser.jsで作ったCPU対戦４人用大富豪をiPadに対応させました。
細かいバグを修正し、
iPadで表示した時に、画面が見切れてしまう問題を解決しました。https://www.new-doumeishi.me/vs_daihugou/public/
JSONPの404は捕捉できない
クロスオリジンでAjax通信をする場合に使うJSONP。
アクセス先のステータスコードが400系や500系などの場合、エラーとして捕捉できず無限に待ち続ける状態になる。“`javascript
// jQuery使用
$.ajax({
url: ‘//example.com/api/’,
type: ‘GET’,
dataType: ‘jsonp’,
})
.done(function(){
// 当然ここは実行されない
})
.fail(function(){
// ここも実行されない！
});
“`
## なぜか
JSONPの原理を考えてみれば、当然といえば当然である。
– コールバック関数を定義
– scriptタグにアクセスポイントのURLを埋め込む
– アクセスポイントのリソースは、JavaScriptファイルとして読込・実行され、用意しておいたコールバック関数が実行されるここで、scriptタグで読み込む先が404とか500であった場合、読み込むべきリソースが無いのであるから、
当然ながら用意されたコールバック関数は実行されない。
respo
開発日誌：入力フォームの値を処理で使えるようにする
クラウドファンディングに成功したYouTubeの検索をエンハンスするツール開発の試行錯誤ログです。
（「ソムリエ」より「エンハンス」のほうがよかったかな、と今ちょっと思ってる。でもそれはそれで一般人に単語わからないとかなりそうな気もする。）https://camp-fire.jp/projects/view/448374
モックとして作ったサイトの入力フォームの値を使えるようにしていきます。
こう、例えるならば他の家を見てああいう家があるなら自分の家はこういう家にできるやろ、と脳内青地図でクラウドファンディング成功したはいいけど「あ、俺、木をのこぎりで切ったことすらなかったわ」と冷静になった頃に軽く絶望しているスタート。
入力フォームの値を使えるように取得するにはidを指定してやるらしい。
https://www
じゃんけんプログラムをJavaScriptで書く
私が通っているスクールで、じゃんけんプログラム書いてこい！っていう課題が出たので、ついでに記事にします。もっとこうした方がきれいに書けるよ！記事として読みやすいよ！等ありましたら、是非コメントお願いします。
スクールHP↓
[SUNABACO](https://sunabaco.com/)# じゃんけんプログラム
自分の手をエディターに入力すると、コンピュータの手に対し、勝ちか負けを判定し、コンソールに出力する。## 条件整理
1. 自分の手を決める
1. 相手の手を決める
等確率かつランダムでグー、チョキ、パーを出力する。
1. 自分の手と相手の手を比べ、勝敗を決める
勝ちのパターン、負けのパターン、引き分けのパターンで条件分岐。
1. 1~3をまとめる### 実際に解いてみる
- 自分の手を決める。
とりあえず、、、
“`js
const yourHand === “グー”
“`- 相手の手を決める
“`Math.random()“`で0以上1未満の乱数を発生させることができるらしい。今回はこれを利用する。
(https://deve
PHPの配列のkeyをスネーク⇔キャメル変換する関数を作ってみた
# コピペ用関数
“`functions.php
//キャメル→スネーク変換
function convertStringIntoSnakeCase(string $string): string
{
return ltrim(strtolower(preg_replace(‘/[A-Z]/’, ‘_\0’, $string)), ‘_’);
}//配列のkeyを全てキャメル→スネーク変換
function convertArrayKeyNamesIntoSnakeCase($array): array
{
$snakelized_array = [];
foreach ($array as $key => $value) {
if (
is_array($value) === true ||
is_object($value) === true
) {
if (is_numeric($value) === true) {
FizzBuzz問題をJavaScriptで解く
私が通っているスクールで、FizzBuzz問題を解いてこい！っていう課題が出たので、ついでに記事にします。もっとこうした方がきれいに書けるよ！記事として読みやすいよ！等ありましたら、是非コメントお願いします。
スクールHP↓
[SUNABACO](https://sunabaco.com/ “SUNABACO TOP”)
# FizzBuzz問題
0~100までの数字を出力する。そのうち、3の倍数で「Fizz」、5の倍数で「Buzz」と出力する。ただし、両方の倍数の場合は「FizzBuzz」と出力する。
（1~任意の数字までを出力するというのが一般的みたいです。）0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 …
↓
FizzBuzz 1 2 Fizz 4 Buzz Fizz 7 8 Fizz Buzz 11 Fizz 13 14 FizzBuzz …
といった具合### 条件整理
1. 0~100までの数字を出力する
2. 3の倍数の場合は「Fizz」
3. 5の倍数の場合は「Buzz」
4. 3、5両方の倍数の場合は「FizzBuzz」とする
5
GoogleEarth上でGPSのルートを移動するツアーの作成
## 概要
トップの動画のようにGoogleEarth上で、あるルートを移動するツアープロジェクトを作成する方法です。この動画は、三重県をサイクリングしたときのGPSデータから作成しました。
GPSデータを3D空間上で表示したいと思ったのですが、3D空間をフリーで提供しているサービスはGoogleEarthしか見つからなかったため、最終的にKMLファイルにツアーを記述して、GoogleEarthにレンダリングしてもらう方法にたどり着きました。## 作成方法
基本的な説明は[Googleのドキュメント](https://developers.google.com/kml/documentation/touring?hl=ja)に書いてある通りです。ドキュメントには比較的遠い距離を飛ぶサンプルしかありませんが、近距離のデータを多数つ
M5Core2とM5Atom EchoでMP3再生
M5Core2とM5Atomには、スピーカがすでについていますので、MP3再生してみます。
いずれも、ESP32に搭載しているI2Sで再生します。
ファイルソースは、HTTP GetによるURL指定と、SDに格納したファイルパス指定の2種類を用意しました。# ESP32におけるオーディオ再生
以下のライブラリを利用させていただきました。PlatformIOのライブラリでも検索にヒットします。
サンプルコードがたくさんあるので助かりました。earlephilhower/ESP8266Audio
https://github.com/earlephilhower/ESP8266Audio
〇宣言
“`cpp:module_audio.cpp
#include
#include “AudioFileSourceHTTPStream.h”
#include “AudioFileSourceBuffer.h”
#include “AudioGeneratorMP3.h”
#include “AudioOutputI2S.h”
#include “A
JSのscrollHeight, clientHeight, offsetHeightの違い
駆け出しプログラマーの備忘録です。
JSでページの高さを調べるためには様々種類の要素を使用できるかと思いますが、それぞれどのような違いがあるのか、忘れないようにメモしておきます。
例えば、SNSでは特に使用されている、Infinity Scroll（スクロールするたびに新しいコンテンツが読み込まれるもの）などを作るときに使用しますね。
scrollHeight
scrollHeightは、要素のコンテンツの高さ（overflowによってスクリーン上では見れなくなっているコンテンツを含む）
また、要素のpaddingは含みますが、border, margin, 縦方向のスクロールバーは含みません。
高さの疑似要素(::before, ::afterなど）は含みます。要素のコンテンツが縦のスクロールバーなしに、 収まっている場合、scrollHeightはclientHeightと同じになります。
clientHeight
clientHeightは要素のCSSやインラインのレイアウトがない場合は、０として返されます。
それ以外の場合は、ボ
【Javascript】空オブジェクトの判定方法
# null じゃなくて空オブジェクトで返ってくる時がある
該当の値が存在しない場合 大体 null で返ってくるのですが、たまーに空Object で返ってくる時があります。
“`javascript
{} // null ちゃうんかーい
“`# 空オブジェクトの判定ってどうやってやるんや
空配列の判定はよくやるのですが、そういえば空オブジェクトの判定ってしたことないと思い調べたところ諸説あったのですが、以下のやり方が一番多かったです。
“`javascript
Object.keys(emptyObj).length === 0 // オブジェクトのキーが 0 かで判定
“`以下みたいに直接比較してあげてもいいのですが、、、
“`javascript
const obj = {}if (Object.keys(obj).length === 0) {
console.log(‘空っぽだよーん’)
}
“`先輩から「ぱっと見で何を比較しているのはわかり辛い」とご指摘いただいたので、、
“`javascript
const obj = {}
Phaser.jsでCPU対戦４人用大富豪 ver2を作りました。
今回はジョーカー入りです。
CPUは相変わらずバカチョンです。https://www.new-doumeishi.me/vs_daihugou/public/
【超入門】GASで簡単自動化システムを作ってみる
どうも[mr](https://twitter.com/MasujimaRyohei)です。
この記事の目標はGoogle Apps Script(GAS)を使って、
GoogleスプレッドシートとGmailを連携させることです。とてもシンプルな内容となっていますので、GAS？なにそれ？それで何ができるの？くらいの人をターゲットにしています。
## 作りたいもの
進捗管理表で期限が過ぎてしまっているものをGmailで通知したい## 必要なもの
・Googleアカウント
スプレッドシートの作成に必要なため## やること
1. スプレッドシートに進捗管理表を作る
2. GASを書く
3. Gmailで結果を確認する
4. 定期実行するこの三つを行っていきます。
## 1. スプレッドシートに進捗管理表を作る
進捗管理表には「No」「進捗状態」「タイトル」「詳細」「期限」を入れます。
公式ドキュメントを読んでもらったほうが早いですが、アプリがフォアグラウンドにあるかバックグラウンドにあるかを通知してくれるものです。
### AppStateを使用した背景
位置情報を監視したかったのですが、一
【GAS】Googleカレンダーに特定の予定があったときにメールを送る
# これはなに
うちの会社では有給を取るときに以下の作業をしなければいけません。– カレンダーに予定登録
– メール送信ちょっと手間だし忘れたりすることもあるので、手作業はせめて1回にしたいところです。
予定をブロックするために、カレンダーは必ず登録するので、メール送信をGASで自動化。# 作り方
## スクリプト
“`JavaScript:AbsenceMail.js
function AbsenceMail() {
let myCalendar = CalendarApp.getCalendarById(‘☓☓☓@gmail.com’); // 自分のメールアドレス
let today = new Date();// イベントを取得
let myEvent = myCalendar.getEventsForDay(today);// イベントの中に”休み”という件名のものがあれば、メールを送信する
for(let i = 0 ; i < myEvent.length ; i++ ){ if(myEvent[i].ge
