はてなブログテーマのアレンジを見に行く

こんにちは。レモンティーです。今回ははてなブログのテーマについてです。 テーマストアの各テーマには「利用中のブログ」というボタンがあり、そのテーマを使っている人を何人か見ることができます。そしてその中には結構凝ったアレンジもあります。はてな…

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

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

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

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

Heroku 環境変数にダブルクオートを使うと消えるとき

こんにちは。レモンティーです。タイトルの通りなのですが、ググると 丸ごとシングルクオートで囲って heroku config:set HOGE='{ "hoge": "huga" }'みたいにすればいい、とでるのですが それでもなお実行すると HOGE='{ hoge: huga }'のようにダブルクオー…

HTML JSを使わずにform内の複数のinputから別々のパスにsubmitする

こんにちは。レモンティーです。今回はinput type=submitのお話です。 developer.mozilla.orgHTML5からはjavascriptを使用しなくてもinputごとに別々のパスにpostできるようです。 やりかたはinputにformaction属性を指定するだけです。 form自体のactionと…

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メソ…

Node.js Gmailを簡単に送信する

こんにちは。レモンティーです。今回はNode.jsでGmailを送信します。 developers.google.comGASを使えばすごく簡単に送信できる上に定期実行もできるので基本的にはGASでやればいいです。 ただローカルファイルがらみでWindowsのタスクスケジューラで定期実…

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

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

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

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

はてなブログの新テーマSunlightを公開しました

こんにちは。レモンティーです。はてなブログの新しいテーマSunlightを公開しました blog.hatena.ne.jpこのブログで現在使用しているNavyDarkCodeとよく似ていて、機能面では互換性?があります。 つまりグローバルメニューやSNSシェアボタンはNavyDarkCode…

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

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

VisualStudioCode シンタックスハイライトの色を変更する

こんにちは。レモンティーです。今回は、VS Codeのシンタックスハイライトの一部の色を変更する方法です。VS Codeは拡張機能でいろんな人が作ったテーマを使用できますよね。でも使っていると「ほぼ気に入っているけど事情があってコメントの色だけ変えたい…

はてなブログのコードブロック(pre,code)でファイル名やパスを一緒に表示する

こんにちは。レモンティーです。今回ははてなブログでのソースコードの表示についてです。コードを載せるとき、そのファイル名やパスも一緒に表示したいことがありますよね。先日紹介したテーマNavyDarkCodeにこの機能を追加しました。 blog.hatena.ne.jp使…

はてなブログのテーマ作成で--output-style compressedにするとレスポンシブ対応が効かなくなるのを解決

こんにちは。レモンティーです。今回は、はてなブログのテーマ作成についてです。このブログではずっと公式テーマを使っていたのですが 最近見た目を変えてみたくなってテーマをつくりました。 blog.hatena.ne.jp テーマは公式のBoilerplateをクローンしてsa…

Dockerの自動起動を止める Start Docker Desktop when you log inをオフにしても起動する場合

こんにちは。レモンティーです。今回はパソコンの起動時にDockerが勝手に起動するのを止める方法です。環境 Windows 10 pro Docker version 18.09.2, build 6247962 概要 普通は設定のStart Docker Desktop when you log inのチェックを外せばOKなのですが、…

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

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

Angular ページトップにスクロールするボタン

こんにちは。レモンティーです。今回はページトップにスクロールするボタンです。よく画面の右下とかに見かけるやつですね。Angularの場合はどうすればいいでしょうか。 今回は@ViewChildとscrollIntoViewメソッドを使います。テンプレートで、スクロールの…

AngularMaterialのフォントを変更する方法

こんにちは。レモンティーです。今回はAngularMaterialのフォントを変更する方法です。Google FontsのフォントをAngularMaterialに設定します。 fonts.google.comAngularMaterialのボタンやナビゲーションのフォントは デフォルトではRobotoというフォントに…

Angular FormArrayで動的に変化するフォーム

こんにちは。レモンティーです。以前、フォームについての記事を書きました。 www.sawalemontea.com今回はFormArrayを使って動的に変化するフォームをつくります。 AngularMaterialでMatErrorのバリデーションも付けます。AngularAngular Material 使い方はF…

Firebase CloudFirestoreで条件にあっているのにERROR Error: Missing or insufficient permissions.が起こるとき

こんにちは。レモンティーです。今回はFirebaseのCloudFirestoreのルールについてです。 普通に公式ドキュメントに書いてあるのに見落としていたことなので多くの人には問題ないかもしれません。ちょうどここに書いてあります。 https://firebase.google.com…

Angular AngularMaterialのDialogを使う

こんにちは。レモンティーです。今回はAngularMaterialのDialogを使います。公式はコチラ Angular Material AngularMaterialのDialogでは、まずDialogのコンポーネントをつくり それを呼び出し時に指定して使います。さっそく見ていきます。 準備 Dialogのコ…

Angular ReactiveFormのバリデーションとエラーメッセージをAngularMaterialで

こんにちは。レモンティーです。今回はAngularMaterialのReactiveFormについてです。 公式↓にいろんなパーツのいろんなパターンがあるのでちょこちょこ抜き出したものです。 Angular Material 準備 AngularMaterialを導入 app.module.tsなどに FormsModule,R…

Node.js入門 自作モジュールの作成 exports

こんにちは。レモンティーです。今回は、自作モジュールの作成です。exportsオブジェクトを使うことで自作のプロパティーや関数などを モジュール化して別のファイルから使用できます。使い方はいつもと同じでrequire('path')を使います。使用例は以下のよう…

Node.js入門 npmでパッケージの管理

こんにちは。レモンティーです。今回はnpmによるパッケージの管理です。前回までに登場したモジュールはBuiltInモジュールといって Node.jsで最初から使えるモジュールでした。Node.jsにはそれ以外にも色々な人が作ったモジュールがあり インストールして使…

Node.js入門 イベントの発火と受け取り Eventsモジュール

こんにちは。レモンティーです。今回はEventsモジュールを使います。EventsモジュールのEventEmitterオブジェクトを使うと イベントの発火や受け取りができます。 //発火 eventEmitter.emit('eventName'); //受け取り(毎回受け取る) eventEmitter.on('eventN…

Node.js入門 ファイルの読み書き・削除・リネーム FileSystemモジュール

こんにちは。レモンティーです。今回はFileSystemモジュールでファイル操作をします。fsモジュールではこれまでに使ったファイル読み込みの他にも 書き込み、削除、リネーム…など色々できます。 読み込み 書き込み 削除 リネーム 読み込み これまではreadFil…

Node.js入門 URLのパース URLモジュール

皆さんこんにちは。レモンティーです。今回はurlモジュールを使ってurlをパースします。 これでアクセスしたurlによって処理内容を変えたりできますね。 ちなみにリクエストされたURLはreq.urlに格納されています。urlのパースは以下のようになります。 var …

Node.js入門 インストールとHello,World

皆さんこんにちは。レモンティーです。今回はNode.js入門です。 インストールしてHellow,Worldを表示させてみます。Node.jsを使えばサーバサイドもJavascriptで書けます。https://nodejs.org/ja/↑の公式サイトから無料でDL、使用できます。ただし、頻繁に更…

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

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