すずしいはいけい

すずしいはいけいにしてみました。pixabay.com こーどデザインCSS body { background-image: url(https://cdn-ak.f.st-hatena.com/images/fotolife/s/sawalemontea/20190806/20190806154555.png); background-repeat: repeat; background-attachment: scroll; background-position: 0 0; } 白い部分がちょっと読みにくいけど涼しげですね。

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

こんにちは。レモンティーです。今回はPuppeteerのevaluateメソッドのPageFunctionへ引数を渡すときの話です。（公式）こういう風に書くと出力はundefinedです。index.js const a = 'text'; const b = 283; const c = {a:21,b:23}; const x = await page.evaluate(a,b,c => { return `${a} ${b} ${c}`; }); console.log(x); PageFunctionに渡す引数は第二引数に渡す必要があるようです。 なので下のように書くとちゃんと渡されま…

Chromeをキーボードで操作

こんにちは、レモンティーです。今回はChromeをキーボードで操作する方法です。ちなみに公式に全部書いてあります。ここでは一部だけ。前回↓、入力作業中の移動や範囲選択をキーボードでやる方法を書きましたがあれの続きみたいな感じですね。 www.sawalemontea.com 操作キー 新しいタブを開くCtrl+T タブを閉じるCtrl+W 最後に閉じたタブを開くCtrl+Shift+T 検索Ctrl+K 検索欄にフォーカスCtrl+L タブを移動Ctrl+Tab タブを移動（逆）Ctrl+Shift+Tab リロードCtrl+R キャッシュを無視してリロードCtrl+Shift+R リンクや入…

入力時にキーボード操作で移動と範囲選択

こんにちは。レモンティーです。今回はキーボード操作での移動と範囲選択です。 ただしキーボード等によって若干異なるかもしれません。例えばノートパソコンで左矢印（←）がhomeキーを兼ねる場合はHomeはfn+←になるといった違いがあります。 移動 範囲選択 お試し用 移動 普通の一文字単位の移動は矢印キーでできます。 Ctrlを押しながら矢印で単語単位で移動できます。 Endキーで行の末尾に移動、Homeキーで行の先頭に移動できます。 範囲選択 Shiftを押しながら先ほどの移動を行うと通った範囲が選択できます。 Ctrl+Aで全選択できます。 お試し用 お試し用テキストです。 これを使って入力…

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 () => { const main = 'http://s.hatena.com/entry.json?uri='; const url = main + q; const body = await requestAsync(u…

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

こんにちは。レモンティーです。今回は過去にはてなブログに貼った画像を一括ダウンロードする方法です。 普通に「写真を投稿」で張り付けていれば画像は全てはてなフォトライフにあるので今回の方法で手直しなくいけると思います。 準備 コード 出力 おしまい 準備 まずは自分のブログのデータをエクスポートします。 続いて適当なフォルダをつくります。ここではblogpicとします。その中にdataフォルダをつくり、先ほどエクスポートしたファイルをdata.txtと改名して入れます。 ダウンロードした写真用にimagesフォルダをつくります。 こんな感じです。あとはindex.jsにnode.jsで実行するコ…

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

こんにちは。レモンティーです。今回はrequest.jsで画像をダウンロードして保存するときのお話です。 リクエストはうまくいったのに画像がちゃんと保存できていないときはoptionのencodingをnullにするとうまくいくかもしれません。そうしないとrequestモジュールが勝手にエンコードをいい感じにやってくれようとしてバイナリが壊れるようです。つまりこんな感じですね。 request({ url:'https;//hoge.com/pictures/fuga.png', encoding:null },callback); 今回はこれでおしまいです。 www.sawalemontea…

また広告でてない

また広告がでなくなっているのでAdSenseのクロールエラー見てみたら「ホスティングの問題:サーバの過負荷」 このエラーは、はてなブログのユーザー側ではどうしようもないようです。 前回なったときは、はてなのサポートの方に自動広告だとこれになる人がいるのでので手動で貼ってくださいと言われて実際解決したのですが一年もたたず再びこの状態に… まあこんな個人ブログの収益なんてたかが知れているので「広告がでないからとても困る」ってことはないんですけど 現実的にはたいした害がなくても気持ち的にはモヤッとしますよね。。

ノベルの米事情

とあるノベルサービスのコメント事情 休日と平日の時間帯別米数 0は0時から1時までの一時間です 平日の方は7時ごろがぴょんと増えてますがこれは通勤・通学中にやる人の分ですかね～。16時を境に急に増え始めるのも学校・仕事が終わるころだからでしょうか。 月別米数 1は1月の一か月間の米数です。 3月と8月が多いですね。これは学生ユーザーが長期休暇で暇があるのでしょう。でも4月が多いのと11月が少ないのは意外ですね。当たり前じゃんと思うひともいるのでしょうか。個人的には謎です…。 おわり これでおしまいです。え。まあ雑記なので…

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

こんにちは。レモンティーです。今回ははてなブログのテーマについてです。 テーマストアの各テーマには「利用中のブログ」というボタンがあり、そのテーマを使っている人を何人か見ることができます。そしてその中には結構凝ったアレンジもあります。はてなブログで発信しているくらいですから結構カスタマイズとかが好きな人が多いわけですね。そこで今回はそれらのアレンジの中で目にとまったものを書いていこうと思います。(あくまで「利用中のブログ」から軽い気持ちで選んだもので変な意味はないです。ほかのブログと比べてどうこうと言っているわけでもありません。選んだ理由は「きまぐれ」です。) NavyDarkCode編 意識…

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

こんにちは。レモンティーです。今回ははてなブログの読者リストと購読中のブログリストのお話です。はてなブログはSNSではないので購読中の一覧を楽に見る機能はありません。そのためそこそこ数が増えてくるともうわけがわからなくなってせっかく購読していても読みたいものが埋もれていたりしますが手動で管理するのは非常に面倒です。そこで今回は例によってPuppetterで購読中のブログと読者のhatenaIdの一覧をつくります。サムネ一括変更↓の時も言いましたがエラーがでたユーザーはスキップしていくので歯抜けはログを見ながら自分で埋める必要があります。 www.sawalemontea.com 準備 概要 メ…

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

こんにちは。レモンティーです。今回ははてなブログの読者リストと購読中のブログリストのお話です。はてなブログはSNSではないので購読中の一覧を楽に見る機能はありません。そのためそこそこ数が増えてくるともうわけがわからなくなってせっかく購読していても読みたいものが埋もれていたりしますが手動で管理するのは非常に面倒です。そこで今回は例によってPuppetterで購読中のブログと読者のhatenaIdの一覧をつくります。サムネ一括変更↓の時も言いましたがエラーがでたユーザーはスキップしていくので歯抜けはログを見ながら自分で埋める必要があります。 www.sawalemontea.com 準備 概要 メ…

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

こんにちは。レモンティーです。 今回はNode.jsで使えるORMのSequelizeを使います。 github.com 導入 環境を設定 モデル作成 migration CRUD操作 sample Association migrationの更新 sample (おまけ)Herokuでは おわり 導入 まずプロジェクトを作成して必要なモジュールをインストールします。 express --view=ejs sample cd sample npm installさらにSequelizeとpgをインストール。この時、モデルの追加やmigrationが簡単にできるCLIも一緒にインストールします。…

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

こんにちは。レモンティーです。タイトルの通りなのですが、ググると 丸ごとシングルクオートで囲って heroku config:set HOGE='{ "hoge": "huga" }'みたいにすればいい、とでるのですが それでもなお実行すると HOGE='{ hoge: huga }'のようにダブルクオートが消えてしまう場合は heroku config:set HOGE={ \"hoge\": \"huga\" }のようにエスケープするとちゃんとダブルクオートが残ります。今回はこれでおしまいです。

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

こんにちは。レモンティーです。今回はinput type=submitのお話です。 developer.mozilla.orgHTML5からはjavascriptを使用しなくてもinputごとに別々のパスにpostできるようです。 やりかたはinputにformaction属性を指定するだけです。 form自体のactionと両方指定した場合はformactionが優先されるようです。例えば以下の場合はボタンAではaaaに、ボタンBではzzzに、ボタンCではcccにpostされます。 便利ですね。index.html <form action='/zzz' method='post'> <in…

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

こんにちは。レモンティーです。今回はrequestモジュールのmultipart/form-dataです。 github.comnode.jsで、あるHTMLフォームと同じリクエストを送りたいという場合、requestモジュールが便利です。例えば以下のHTMLのformと同じリクエストを送りたい場合…index.html <form action="http://hoge.com/upload.php" method="POST" enctype="multipart/form-data"> <input type="file" name="file1"> <input type="submi…

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

こんにちは。レモンティーです。今回はpuppeteerでiframe内のDOM要素を操作する方法です。 iframeにnameがあれば const frame = await page.frames().find(f => f.name() === 'hoge'); のようにできますが、ない場合はelementHandleクラスのcontentFrameメソッドを使うのが簡単そうです。 github.com 例えばexample.html <div class="hoge"> <iframe> </div> こんな場合にはこれでいけますexample.js const eh = await p…

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

こんにちは。レモンティーです。今回はNode.jsでGmailを送信します。 developers.google.comGASを使えばすごく簡単に送信できる上に定期実行もできるので基本的にはGASでやればいいです。 ただローカルファイルがらみでWindowsのタスクスケジューラで定期実行してそのログを通知したいけど「電子メールの送信」が非推奨になっているといった場合には使用できます。Node.jsからGmailを送る場合はGASよりは少し書く量が増えます。そこで簡単にするためにそれを包んでgmail-senderなるものをつくります。 （こことかが参考になります。）これを使うとindex.js…

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

こんにちは。レモンティーです。今回はpuppeteerでheadless:falseの時にマウスカーソルの位置を表示させます。 内容はまんまこれです github.compage.mouse.move()とか使ったときにちゃんと思った通りになっているのか確かめたくてもデフォルトだとマウスカーソルは表示されません。そこでリンク先のコードを使うと便利です。リンク先は即時関数になっているのでちょっと本来の使い方と違うのかもしれませんがindex.js function mouseHelper(){ const box = document.createElement('div'); ... } とし…

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

こんにちは。レモンティーです。今回はpuppeteerではてなブログのアイキャッチ画像をカテゴリ別に一括変更します。 このブログでは長いことすべての記事のアイキャッチ画像が顔つきレモンティーの絵でした。全文表示のときはそれでもあまり関係ないのですが、ブログのデザインをNavyDarkCodeにして記事を一覧表示に変更すると同じ画像が並んでいて結構気になります。しかしすでに記事の数は200を超えています...。そこでpuppeteerです。以下のようにカテゴリと画像URLの対応だけつくったらあとは自動でそれを適用してくれたらいいですよね。複数カテゴリがある場合は先頭のカテゴリで。（画像URLは、…

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

こんにちは。レモンティーです。はてなブログの新しいテーマSunlightを公開しました blog.hatena.ne.jpこのブログで現在使用しているNavyDarkCodeとよく似ていて、機能面では互換性？があります。 つまりグローバルメニューやSNSシェアボタンはNavyDarkCodeと同じコードですし、 <div class="pre-filename">filename</div>もそのまま使用できます。 （これ、はてな記法の場合は勝手に改行されますのでそのままでOKですがMarkdown記法の場合はdivの閉じタグの後```の前にスペース二つとかで改行する必要があります。）見た目も…

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

こんにちは。レモンティーです。今回はpuppeteerではてなスターを自動でつけてみます。そんな便利なものでもないので大丈夫だとは思いますが実用はしないでください。スターに関してはスパムを禁じる規約とかが見当たらなかったのですが、あまり意味のないスパムまがいの行為ですしね…。私も今回試した以外は使いません。 puppeteerとは？ 準備 メイン部分 ログイン リストをつくる スターをつける 実行 結果 puppeteerとは？ github.com webbibouroku.com 準備 プロジェクトのディレクトリをつくりpuppeteerをインストールします。 mkdir hatena-a…

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

こんにちは。レモンティーです。今回は、VS Codeのシンタックスハイライトの一部の色を変更する方法です。VS Codeは拡張機能でいろんな人が作ったテーマを使用できますよね。でも使っていると「ほぼ気に入っているけど事情があってコメントの色だけ変えたい」みたいなこともあるかと思います。そこで今回は例としてコメントの色を変更します。 code.visualstudio.comシンタックスハイライトの色は設定のEditor: Token Color Customizationsの項目から変更できます。「setting.jsonで編集」をクリックするとsetting.jsonが開きますのでそこに書き…

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

こんにちは。レモンティーです。今回ははてなブログでのソースコードの表示についてです。コードを載せるとき、そのファイル名やパスも一緒に表示したいことがありますよね。先日紹介したテーマNavyDarkCodeにこの機能を追加しました。 blog.hatena.ne.jp使い方は簡単で、> で始まるコードブロックの直前の行（またはpreタグの直前）に <div class="pre-filename">hoge</div>と書くだけです。実際に使うと以下のような見た目になります。（ファイル名が普通の白いテキストとして表示されている方はCtrl+f5で更新してみてください。）sample.js 'u…

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

こんにちは。レモンティーです。今回は、はてなブログのテーマ作成についてです。このブログではずっと公式テーマを使っていたのですが 最近見た目を変えてみたくなってテーマをつくりました。 blog.hatena.ne.jp テーマは公式のBoilerplateをクローンしてsassでつくります。このとき、--output-styleをcompressedにするとスマホで表示した時にPC版がそのまま表示されてしまいます。expandedならちゃんとレスポンシブ対応になっていたのに…その原因はここ↓に書いてあります help.hatenablog.comレスポンシブ対応するにはResponsive: y…

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

こんにちは。レモンティーです。 今回はNode.jsで使えるORMのSequelizeを使います。 github.com 導入 環境を設定 モデル作成 migration CRUD操作 sample Association migrationの更新 sample (おまけ)Herokuでは おわり 導入 まずプロジェクトを作成して必要なモジュールをインストールします。 express --view=ejs sample cd sample npm installさらにSequelizeとpgをインストール。この時、モデルの追加やmigrationが簡単にできるCLIも一緒にインストールします。…

うゆにゆに

utf16 -> string カンマ区切り16進数でUTF16を入力して変換 Convert string -> utf16 Convert .inp{ width:100%; height:50px; font-size:12px; } preset const inp = document.getElementById("inputt"); const res = document.getElementById("result"); const inp2 = document.getElementById("input2"); const res2 = document.getEleme…

for霜

イベント "ID","シーン番号","シーン内順序","イベントタイプ","P5","P6","P7","P8","P9" P5～P9はイベントタイプごとに意味が異なる。 以下はイベントタイプごとのP5～P9の解説。 説明がないところは空欄。 「、」区切りは「,」区切り。 「｜」区切りは「<!ask>」区切り。 色については後述。 isXXXはXXXかどうか、を表すbool。TrueかFalseが入る。 時間はミリ秒。 0 背景 P5 同じタブ内のインデックス？ P6 ファイルパス 1 テキスト P5 0：テキスト表示 1：テキスト削除 2：テキスト非表示 P6 2：通常 3：全画面 P7 テ…

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なのですが、それでもなお勝手に起動するケースでは、レジストリを編集する必要があります。というのも自動起動されるソフトはレジストリに記録されていて、DockerをインストールしたときにはDocker for windowsとDocker desktopの二つが登録されるのです…

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

こんにちは。レモンティーです。今回は、express-validatorでバリデーションチェックをします。 express-validator.github.io 準備 使ってみる Custom Validator エラーメッセージ まとめ 準備 まずはnpmでインストールします。 npm install --save express-validatorあとは使いたいファイルで var { check,validationResult } = require("express-validator/check"); で使用できます。 使ってみる 以下のようにcheckメソッドにチェックしたいパラ…

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

こんにちは。レモンティーです。今回はページトップにスクロールするボタンです。よく画面の右下とかに見かけるやつですね。ググるとjQueryでの便利なやり方が沢山ヒットします。 Angularの場合はどうすればいいでしょうか。 今回は@ViewChildとscrollIntoViewメソッドを使います。テンプレートで、スクロールの移動先にする要素に#pageTopとつけて Template reference variableとして扱えるようにします。詳しくは↓ https://angular.jp/guide/template-syntaxここではdivですが他でもOKです。 <div #pag…

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

こんにちは。レモンティーです。今回はAngularMaterialのフォントを変更する方法です。Google FontsのフォントをAngularMaterialに設定します。 fonts.google.comAngularMaterialのボタンやナビゲーションのフォントは デフォルトではRobotoというフォントになっています。 これを変更するにはmat-typography-configを使います。まず、プロジェクトのsrcフォルダとかに 適当な.scssファイルをつくって以下のように書きます (もともと色を変えたりでカスタムテーマを使っている場合はその.scssファイルでOKです。)m…

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

こんにちは。レモンティーです。以前、フォームについての記事を書きました。 www.sawalemontea.com今回はFormArrayを使って動的に変化するフォームをつくります。 AngularMaterialでMatErrorのバリデーションも付けます。AngularAngular Material 使い方はFormBuilderでFormGroupにFormArrayを入れておいて 項目を増減したい時にそのFormArrayに子FormGroupを pushしたりremoveAtする感じです。 以下、複数のリンクを入力するフォームを例に見ていきます。 FormBuilderでFormA…

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

こんにちは。レモンティーです。今回はFirebaseのCloudFirestoreのルールについてです。 普通に公式ドキュメントに書いてあるのに見落としていたことなので多くの人には問題ないかもしれません。ちょうどここに書いてあります。 https://firebase.google.com/docs/firestore/security/rules-query?authuser=0 例えば allow read :if request.auth.uid == resource.data.author;のようなルールできちんとルールを満たしているのに ERROR Error: Missing o…

Angular AngularMaterialのDialogを使う

こんにちは。レモンティーです。今回はAngularMaterialのDialogを使います。公式はコチラ Angular Material AngularMaterialのDialogでは、まずDialogのコンポーネントをつくり それを呼び出し時に指定して使います。さっそく見ていきます。 準備 Dialogのコンポーネント作成 呼び出し 準備 ・AngularMaterialのインストール ・MatDialogModuleのインポート をします。 Dialogのコンポーネント作成 型の恩恵を受けたい場合は表示するデータのinterfaceを定義します dialogData.ts export…

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

こんにちは。レモンティーです。今回はAngularMaterialのReactiveFormについてです。 公式↓にいろんなパーツのいろんなパターンがあるのでちょこちょこ抜き出したものです。 Angular Material 準備 AngularMaterialを導入 app.module.tsなどに FormsModule,ReactiveFormsModule,MatFormFieldModule,MatInputModule をインポートします。 以下はフォームを設置したいコンポーネントの話です。 TS まずインポート import { FormGroup,FormBuilder, Va…

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

こんにちは。レモンティーです。今回は、自作モジュールの作成です。exportsオブジェクトを使うことで自作のプロパティーや関数などを モジュール化して別のファイルから使用できます。使い方はいつもと同じでrequire('path')を使います。使用例は以下のようになります。mycal.js(モジュール化したいファイル) exports.sum = function(a,b){ return a+b; } exports.mul = function(a,b){ return a*b; } test.js(ここで先ほど作成したモジュールを使用する。) var http = require('ht…

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

こんにちは。レモンティーです。今回はnpmによるパッケージの管理です。前回までに登場したモジュールはBuiltInモジュールといって Node.jsで最初から使えるモジュールでした。Node.jsにはそれ以外にも色々な人が作ったモジュールがあり インストールして使用することができます。インストールには専用のPackageManagerである npmを使います。 npmはNode.jsと一緒にインストールされますので 別途ダウンロードなどは必要ありません。npmでパッケージをインストールするには 次のコマンドを使います。 npm install パッケージ名https://www.npmjs.c…

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

こんにちは。レモンティーです。今回はEventsモジュールを使います。EventsモジュールのEventEmitterオブジェクトを使うと イベントの発火や受け取りができます。 //発火 eventEmitter.emit('eventName'); //受け取り(毎回受け取る) eventEmitter.on('eventName',eventHandler); //受け取り(最初の一回だけ) eventEmitter.once('eventName',eventHandler); //解除(指定したeventHandler。同じHandlerが複数登録されていた場合は最後の) eventE…

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

こんにちは。レモンティーです。今回はFileSystemモジュールでファイル操作をします。fsモジュールではこれまでに使ったファイル読み込みの他にも 書き込み、削除、リネーム…など色々できます。 読み込み 書き込み 削除 リネーム 読み込み これまではreadFileSyncでサーバをつくる前に同期的に読み込んでいましたが、 サーバでの処理ではreadFileを使うことで非同期的に読み込みます。 これはファイルへのアクセスのような時間のかかる処理を同期的に行うと その完了まで待機することになりパフォーマンスが低下するためです。しかし非同期だと普通に次の行からファイル読み込みの続きを書いても 意…

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

皆さんこんにちは。レモンティーです。今回はurlモジュールを使ってurlをパースします。 これでアクセスしたurlによって処理内容を変えたりできますね。 ちなみにリクエストされたURLはreq.urlに格納されています。urlのパースは以下のようになります。 var q = url.parse('パースしたいurl', true); 第二引数はクエリ文字列もパースするかどうか、です。これでqのプロパティからurlの各部分を取得できます。 console.log(q.protocol);なら httpsなどと表示されるでしょう。 試しに var url = require('url'); var…

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

皆さんこんにちは。レモンティーです。今回はNode.js入門です。 インストールしてHellow,Worldを表示させてみます。Node.jsを使えばサーバサイドもJavascriptで書けます。https://nodejs.org/ja/↑の公式サイトから無料でDL、使用できます。ただし、頻繁に更新されるため 最初からバージョン管理ツールでインストールすると後々楽です。 https://qiita.com/satoyan419/items/56e0b5f35912b9374305インストールが済んだらエディタで hello.html、test.jsの二つのファイルを作ります。今回はこのtes…

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

こんにちは。レモンティーです。今回はデータの保存です。 Web Storageを使います。WebStorageにはsessionStorageとlocalStorageの2種類ありますが sessionStorageはブラウザを閉じたりすると消えてしまう一時的なものなので その人が次にページを訪れた時などに使いたい場合はlocalStorageを使います。使い方はKeyValue形式で、こんな感じです。 //書き込み localStorage['test'] = text; //読み取り let text = localStorage['test']; //全て削除 localStorage.…

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

こんにちは。レモンティーです。今回は、Webサイトやアプリで綺麗なアイコンを無料で使えるFontAwesomeを使います。↓公式 fontawesome.com 公式ページにある↓のコードをheadにコピペすればすぐ使えます。 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="ano…

JavaScript入門 簡単な迷路ゲーム

こんにちは。レモンティーです。 #cv{border:solid 3px black;} 今回は今までの記事を組み合わせた簡単な迷路ゲームです。黄色がプレイヤーで、矢印キーで操作して 水色のゴールにたどり着けたらクリアです。 ただし途中でピンクの敵と重なるとゲームオーバーです。 （記事が複数表示されている状態だと動きません。） はじめから 矢印キーを押すと画面まで動く場合は↑の空欄にカーソルを合わせてください。 使ったのは↓を含むいくつかの記事で書いた内容です。 www.sawalemontea.com 今回はこれでおしまいです。 www.sawalemontea.com const canv…

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

#cv{border:solid 3px black;} こんにちは。レモンティーです。今回は矢印キーで移動する四角形をつくります。 サンプルはこんな感じです。 はじめから 画面まで動く場合ここ↑にマウスでフォーカスしてからキー操作してください。 使ったのは↓の二つの記事の内容です。 www.sawalemontea.com www.sawalemontea.com キー入力で受け取ったキーコードは連想配列で座標の変化量に変えて… var moovKeys = { 37: [-10,0], //left 39: [10,0], //right 40: [0,10], //down 38: [0…

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

こんにちは。レモンティーです。今回はキーボード入力を受け取ります。使うのはdocument.body.onkeydownです。 document.body.onkeydown = function(e){ //処理 } のように使います。 e.keyCodeでキーコードを取得できるので どのキーが押されたか判別できます。キーコード一覧は↓ キーコード一覧即席チェックサンプルは↓ ここにキーを入力 キーコード サンプルはこんな感じです。 HTML <form name="f1"> ここにキーを入力 <input type="text" name="t1" value=""> キーコード <inp…

JavaScript入門 Canvasで2dの描画

こんにちは。レモンティーです。今回はJavaScriptのCanvasを使って2dの描画をします。Canvasで様々な描画を行うには、 まずCanvas要素のcontextを取得します。 var canvas = document.getElementById('canvas1'); var con = canvas.getContext('2d'); これで色々な描画ができます。 //四角形 con.fillRect(x,y,w,h); //塗りつぶし con.strokeRect(x,y,w,h); //輪郭 con.clearRect(x,y,w,h); //範囲内を消去 //直線 co…

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

#sample2{display:none; } #sample3{position:absolute;} こんにちは。レモンティーです。今回はJavaScriptでCSSのプロパティを操作してみます。↓のように要素を取得して、.style.プロパティ = 値 とすればOKです。 let x = document.getElementById("testId"); x.style.color = "red"; これはテストのための文です。サンプル もっと他の例も見てみます。 表示・非表示の切り替えも同様に display = "none" ←→ display = "block" 等 visi…

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

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

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

こんにちは。レモンティーです。今回はJavaScriptを使って別窓でページを開きます。使うのは window.open("URL","ウインドウ名","その他の情報"); です。その他の情報というのは 表示位置の情報やスクロールバーの有無などです。例えば "width=640,height=480,top=0,left=0" みたいな感じです。 サンプル コードはこんな感じです HTML <button type="button" onclick="openOtherWindow()">サンプル</button> JS <script> function openOtherWindow(){…

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

こんにちは。レモンティーです。今回はn秒待ってから処理を行います。使うのはsetTimeoutです。 setTimeout("関数()",待機時間); ミリ秒単位で待機時間をきめてあげれば、 そのぶん待ってから関数を発火させてくれます。3秒待つサンプルサンプルのコードはこんな感じです。 HTML <button type="button" onclick="wait3sec()">3秒待つサンプル</button> JS <script> function wait3sec(){ setTimeout("alert('3秒経過しました。')",3000) } </script> 今回はこれでお…

JavaScript入門 画像を動的に変更

こんにちは。レモンティーです。今回は画像を動的に変更します。使うのはgetElementByIdです。 let x = getElementById("testid"); これでimgタグを取得して、srcプロパティにある画像のPathを変更すればOKです。 サンプル サンプルのコードはこうなっています。 （はてなフォトライフにアップした画像で試していますが、pathが長いので省略してpathとしています。） HTML <img id="Img1" src="path" width="320" height="240" border="0" alt="picture"> <button typ…

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

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

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

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