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

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

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

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

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

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

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

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

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 ページトップにスクロールするボタン

こんにちは。レモンティーです。今回はページトップにスクロールするボタンです。よく画面の右下とかに見かけるやつですね。ググるとjQueryでの便利なやり方が沢山ヒットします。 Angularの場合はどうすればいいでしょうか。 今回は@ViewChildとscrollIntoVi…

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はブラウザを閉じたりすると消えてしまう一時的なものなので その人が次にページを訪れた時…

Font Awesome 無料で綺麗なアイコンを使う

こんにちは。レモンティーです。今回は、Webサイトやアプリで綺麗なアイコンを無料で使えるFontAwesomeを使います。↓公式 fontawesome.com 公式ページにある↓のコードをheadにコピペすればすぐ使えます。

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入門 画像を動的に変更

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

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

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

JavaScript入門 別のウインドウでページを開く

こんにちは。レモンティーです。今回はJavaScriptを使って別窓でページを開きます。使うのは window.open("URL","ウインドウ名","その他の情報"); です。その他の情報というのは 表示位置の情報やスクロールバーの有無などです。例えば "width=640,height=48…

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

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