JavaScript

Puppeteer evaluateメソッドのPageFunctionに引数を渡す

こんにちは。レモンティーです。今回はPuppeteerのevaluateメソッドのPageFunctionへ引数を渡すときの話です。(公式)こういう風に書くと出力はundefinedです。index.js const a = 'text'; const b = 283; const c = {a:21,b:23}; const x = await page.eva…

Node.js ある記事にはてなスターを付けたユーザの一覧

こんにちは。レモンティーです。今回ははてなスターAPIでスターの取得です。以下のqに記事のurlを入れてnode.jsで実行するだけ。index.js const request = require('request'); const q = "https://www.sawalemontea.com/entry/2019/06/19/160507"; (async (…

Node.js 自分のブログのはてなフォトライフなどの画像を一括ダウンロードする方法

こんにちは。レモンティーです。今回は過去にはてなブログに貼った画像を一括ダウンロードする方法です。 普通に「写真を投稿」で張り付けていれば画像は全てはてなフォトライフにあるので今回の方法で手直しなくいけると思います。 準備 コード 出力 おしま…

Node.js request.jsで画像をダウンロードして保存すると壊れるとき

こんにちは。レモンティーです。今回はrequest.jsで画像をダウンロードして保存するときのお話です。 リクエストはうまくいったのに画像がちゃんと保存できていないときはoptionのencodingをnullにするとうまくいくかもしれません。そうしないとrequestモジ…

Puppeteer はてなブログで誰を購読中かわけわからなくなったら…購読中のブログ一覧と読者一覧

こんにちは。レモンティーです。今回ははてなブログの読者リストと購読中のブログリストのお話です。はてなブログはSNSではないので購読中の一覧を楽に見る機能はありません。そのためそこそこ数が増えてくるともうわけがわからなくなってせっかく購読してい…

Sequelize入門 Node.jsとExpressからPostgreSQLを使う

こんにちは。レモンティーです。 今回はNode.jsで使えるORMのSequelizeを使います。 github.com 導入 環境を設定 モデル作成 migration CRUD操作 sample Association migrationの更新 sample (おまけ)Herokuでは おわり 導入 まずプロジェクトを作成して必要…

Node.js requestモジュールでmultipart/form-dataをPOSTしてファイルアップロード

こんにちは。レモンティーです。今回はrequestモジュールのmultipart/form-dataです。 github.comnode.jsで、あるHTMLフォームと同じリクエストを送りたいという場合、requestモジュールが便利です。例えば以下のHTMLのformと同じリクエストを送りたい場合…i…

Puppeteer nameのないiframe内のDOM要素を操作する(セレクタでiframeを取得する)

こんにちは。レモンティーです。今回はpuppeteerでiframe内のDOM要素を操作する方法です。 iframeにnameがあれば const frame = await page.frames().find(f => f.name() === 'hoge'); のようにできますが、ない場合はelementHandleクラスのcontentFrameメソ…

Puppeteer headless:falseの時にマウスカーソルの位置を表示する

こんにちは。レモンティーです。今回はpuppeteerでheadless:falseの時にマウスカーソルの位置を表示させます。 内容はまんまこれです github.compage.mouse.move()とか使ったときにちゃんと思った通りになっているのか確かめたくてもデフォルトだとマウスカ…

Puppeteer はてなブログのアイキャッチ画像をカテゴリ別に一括変更する

こんにちは。レモンティーです。今回はpuppeteerではてなブログのアイキャッチ画像をカテゴリ別に一括変更します。 このブログでは長いことすべての記事のアイキャッチ画像が顔つきレモンティーの絵でした。全文表示のときはそれでもあまり関係ないのですが…

Puppeteerではてなブログのスターを自動でお返ししてみる

こんにちは。レモンティーです。今回はpuppeteerではてなスターを自動でつけてみます。そんな便利なものでもないので大丈夫だとは思いますが実用はしないでください。スターに関してはスパムを禁じる規約とかが見当たらなかったのですが、あまり意味のないス…

Express express-validatorでバリデーションチェックする

こんにちは。レモンティーです。今回は、express-validatorでバリデーションチェックをします。 express-validator.github.io 準備 使ってみる Custom Validator エラーメッセージ まとめ 準備 まずはnpmでインストールします。 npm install --save express-…

JavaScript入門 データをローカルに保存 LocalStorage

こんにちは。レモンティーです。今回はデータの保存です。 Web Storageを使います。WebStorageにはsessionStorageとlocalStorageの2種類ありますが sessionStorageはブラウザを閉じたりすると消えてしまう一時的なものなので その人が次にページを訪れた時…

JavaScript入門 簡単な迷路ゲーム

こんにちは。レモンティーです。 #cv{border:solid 3px black;} 今回は今までの記事を組み合わせた簡単な迷路ゲームです。黄色がプレイヤーで、矢印キーで操作して 水色のゴールにたどり着けたらクリアです。 ただし途中でピンクの敵と重なるとゲームオーバ…

JavaScript入門 Canvas 矢印キーで移動する四角形

#cv{border:solid 3px black;} こんにちは。レモンティーです。今回は矢印キーで移動する四角形をつくります。 サンプルはこんな感じです。 はじめから 画面まで動く場合ここ↑にマウスでフォーカスしてからキー操作してください。 使ったのは↓の二つの記事の…

JavaScript入門 キーボード入力を受け取る

こんにちは。レモンティーです。今回はキーボード入力を受け取ります。使うのはdocument.body.onkeydownです。 document.body.onkeydown = function(e){ //処理 } のように使います。 e.keyCodeでキーコードを取得できるので どのキーが押されたか判別できま…

JavaScript入門 Canvasで2dの描画

こんにちは。レモンティーです。今回はJavaScriptのCanvasを使って2dの描画をします。Canvasで様々な描画を行うには、 まずCanvas要素のcontextを取得します。 var canvas = document.getElementById('canvas1'); var con = canvas.getContext('2d'); これで…

JavaScript入門 CSSのプロパティを操作

#sample2{display:none; } #sample3{position:absolute;} こんにちは。レモンティーです。今回はJavaScriptでCSSのプロパティを操作してみます。↓のように要素を取得して、.style.プロパティ = 値 とすればOKです。 let x = document.getElementById("testId…

JavaScript入門 タイマーで定期的に処理 setIntervalでn秒ごとに処理してclearIntervalで停止

こんにちは。レモンティーです。今回は定期的な処理と、その停止です。使うのはsetIntervalとclearIntervalです。 var timer; //開始 timer = setInterval("関数()",間隔); //停止 clearInterval(timer) あああああ開始 停止 サンプルのコードはこれです。 H…

JavaScript入門 n秒後に処理をする setTimeout

こんにちは。レモンティーです。今回はn秒待ってから処理を行います。使うのはsetTimeoutです。 setTimeout("関数()",待機時間); ミリ秒単位で待機時間をきめてあげれば、 そのぶん待ってから関数を発火させてくれます。3秒待つサンプルサンプルのコードは…

JavaScript入門 画像を動的に変更

こんにちは。レモンティーです。今回は画像を動的に変更します。使うのはgetElementByIdです。 let x = getElementById("testid"); これでimgタグを取得して、srcプロパティにある画像のPathを変更すればOKです。 サンプル サンプルのコードはこうなっていま…

JavaScript入門 はてなブログでJavaScriptを使う

こんにちは。レモンティーです。今回はJavaScript入門です。JavaScriptを使えば、はてなブログでも動的な仕掛けを簡単に作れます。 見たまま記法以外ならJavaScriptのコードを直に書いて動かせるのです。さっそくやってみます。試しにここをクリックしてくだ…

JavaScript入門 基本文法

こんにちは。レモンティーです。今回はJavaScriptの基本文法です。 (概念自体は知っている前提です) 数値、文字列、コメント 変数、定数 条件分岐 繰り返し 関数 配列 数値、文字列、コメント 数値の演算はよくある + - * / % です。文字列もよくある "aiu…

JavaScript入門 ダイアログを表示する alert confirm prompt

こんにちは。レモンティーです。今回はJavaScriptでダイアログを表示します。今回扱うのは ・OKボタンのみのalertダイアログ ・OK、キャンセルの二択のconfirmダイアログ ・入力を受け付けるpromptダイアログ の三つです。 alert confirm prompt alert OKボ…

JavaScript入門 n乗、n乗根、四捨五入 Math

こんにちは。レモンティーです。今回はJavaScriptで n乗、n乗根、四捨五入、切り捨て、切り上げ などを計算します。 n乗 n乗根 円周率 四捨五入 切り捨て 切り上げ n乗 Math.pow(A,n); n乗根 Math.sqrt(A); 円周率 Math.PI; 四捨五入 Math.round(A); …

JavaScript入門 乱数を使う Math.random()

こんにちは。レモンティーです。今回は乱数をつくります。使うのはMath.randpmです。 let rnd = Math.random(); これで0以上1未満の乱数を取得できます。サンプル切り上げと組み合わせてサイコロにしてみます。 サイコロコードはこんな感じです。 HTML <button type="button" onclick="showRnd()">サ</button>…

JavaScript入門 別のページへの遷移

こんにちは。レモンティーです。今回は別のページへの遷移です。使うのは location.href = "URL" です。↓のボタンを押すとhttp://www.example.comに遷移します。サンプル コードはこうなっています HTML <button type="button" onclick="jump()">サンプル</button> JS <script> function jump(){ location.href = "htt</script>…

JavaScript入門 テキストやタグの動的な書き換え

こんにちは。レモンティーです。今回はテキストやタグを動的に書き換えます。使うのは次の2つです。まずdocument.getElementByIdで変更の対象を取得します。 let x = document.getElementById("test"); 次に取得した対象にinnerHTMLで変更を加えます。 x.in…

JavaScript入門 文字列から数値に変換 parseInt

こんにちは。レモンティーです。今回は文字列から数値への変換です。使うのはparseIntです。 let number = parseInt("text"); これで文字列を数値に変換できます。 + サンプルのコードはこんな感じです。 HTML <form name="F1"> <input type="text" name="T1" value="1">+<input type="text" name="T2" value="1"> <input type="button" value="合計を計算" onclick="sum()"> </form> JS <script> function …

JavaScript記事マップ

入門 DOM テキストやタグの動的な変更 画像を動的に変更 CSSのプロパティを操作 タイマー n秒後に処理する n秒ごとに処理をする 数値・文字列 乱数 n乗・n乗根・四捨五入 文字列から数値に変換 ダイアログ ダイアログ Canvas 基本的な図形の描画 その他 …