サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
大谷翔平
sawalemounity.hatenablog.com
こんにちは。レモンティーです。 今回は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に渡す引数は第二引数に渡す必要があるようです。 なので下のように書くとちゃんと渡されます。 出力はtext 283 [object Object] となります。 index.js const x = await page.evaluate(arg => { const {a,b,
こんにちは、レモンティーです。 今回は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 リンクや入力欄の移動Tab リンクや入力欄の移動(逆)Shift+Tab 画面単位のスクロール↓Space 画面単位のスクロール↑Shift+Space ページトップへHome ブックマークCtrl+D ペ
こんにちは。レモンティーです。 今回ははてなスター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(url); const stars = JSON.parse(body).entries[0].stars; let last; //重複スキップ用 for(const star of stars
こんにちは。レモンティーです。 今回は過去にはてなブログに貼った画像を一括ダウンロードする方法です。 普通に「写真を投稿」で張り付けていれば画像は全てはてなフォトライフにあるので今回の方法で手直しなくいけると思います。 準備 コード 出力 おしまい 準備 まずは自分のブログのデータをエクスポートします。 続いて適当なフォルダをつくります。ここではblogpicとします。その中にdataフォルダをつくり、先ほどエクスポートしたファイルをdata.txtと改名して入れます。 ダウンロードした写真用にimagesフォルダをつくります。 こんな感じです。あとはindex.jsにnode.jsで実行するコードを書きます。(Node.js入門) blogpic index.js images data data.txt コード index.js const fs = require('fs'); co
こんにちは。レモンティーです。 今回ははてなブログのテーマについてです。 テーマストアの各テーマには「利用中のブログ」というボタンがあり、そのテーマを使っている人を何人か見ることができます。そしてその中には結構凝ったアレンジもあります。はてなブログで発信しているくらいですから結構カスタマイズとかが好きな人が多いわけですね。そこで今回はそれらのアレンジの中で目にとまったものを書いていこうと思います。(あくまで「利用中のブログ」から軽い気持ちで選んだもので変な意味はないです。ほかのブログと比べてどうこうと言っているわけでもありません。選んだ理由は「きまぐれ」です。) NavyDarkCode編 意識が低いエンジニアのブログ様 ノベルブログ様 Masaki600轟音日記様 Sunlight編 面倒くさがり屋のfotologue様 まぬるねこの足跡。。。様 おしまい NavyDarkCode編 N
こんにちは。レモンティーです。 今回ははてなブログの読者リストと購読中のブログリストのお話です。 はてなブログはSNSではないので購読中の一覧を楽に見る機能はありません。そのためそこそこ数が増えてくるともうわけがわからなくなってせっかく購読していても読みたいものが埋もれていたりしますが手動で管理するのは非常に面倒です。そこで今回は例によってPuppetterで購読中のブログと読者のhatenaIdの一覧をつくります。サムネ一括変更↓の時も言いましたがエラーがでたユーザーはスキップしていくので歯抜けはログを見ながら自分で埋める必要があります。 www.sawalemontea.com 準備 概要 メイン部分 読者一覧 購読中一覧 一方向を探す おしまい 準備 PuppeteerだけでOKです。 npm i puppeteer 概要 読者一覧をsubscribers.txtに、購読中のブログ一
こんにちは。レモンティーです。 今回は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も一緒にインストールします。 npm install --save sequelize pg sequelize-cliさっそくCLIを使って必要なディレクトリ等を生成します。 npx sequelize initこれでSequ
こんにちは。レモンティーです。 タイトルの通りなのですが、ググると 丸ごとシングルクオートで囲って heroku config:set HOGE='{ "hoge": "huga" }'みたいにすればいい、とでるのですが それでもなお実行すると HOGE='{ hoge: huga }'のようにダブルクオートが消えてしまう場合は heroku config:set HOGE={ \"hoge\": \"huga\" }のようにエスケープするとちゃんとダブルクオートが残ります。 今回はこれでおしまいです。
こんにちは。レモンティーです。 今回はinput type=submitのお話です。 developer.mozilla.org HTML5からはjavascriptを使用しなくてもinputごとに別々のパスにpostできるようです。 やりかたはinputにformaction属性を指定するだけです。 form自体のactionと両方指定した場合はformactionが優先されるようです。 例えば以下の場合はボタンAではaaaに、ボタンBではzzzに、ボタンCではcccにpostされます。 便利ですね。 index.html <form action='/zzz' method='post'> <input type='text' name='abc'> <input type='text' name='xyz'> <input type='submit' formaction='/aaa
こんにちは。レモンティーです。 今回はrequestモジュールのmultipart/form-dataです。 github.com node.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="submit" value="Submit"> </form> requestモジュールでは以下のように書けます。 index.js const formData = { file1:{ value:
こんにちは。レモンティーです。 今回はNode.jsでGmailを送信します。 developers.google.com GASを使えばすごく簡単に送信できる上に定期実行もできるので基本的にはGASでやればいいです。 ただローカルファイルがらみでWindowsのタスクスケジューラで定期実行してそのログを通知したいけど「電子メールの送信」が非推奨になっているといった場合には使用できます。 Node.jsからGmailを送る場合はGASよりは少し書く量が増えます。そこで簡単にするためにそれを包んでgmail-senderなるものをつくります。 (こことかが参考になります。) これを使うと index.js const gs = require('gmail-sender'); gs.sendMail("to@gmail.com","タイトル","本文"); でGmailが送信できます。 in
こんにちは。レモンティーです。 今回はpuppeteerでheadless:falseの時にマウスカーソルの位置を表示させます。 内容はまんまこれです github.com page.mouse.move()とか使ったときにちゃんと思った通りになっているのか確かめたくてもデフォルトだとマウスカーソルは表示されません。そこでリンク先のコードを使うと便利です。 リンク先は即時関数になっているのでちょっと本来の使い方と違うのかもしれませんが index.js function mouseHelper(){ const box = document.createElement('div'); ... } としておいて、puppeteerでカーソルを出したいページで await page.evaluate(mouseHelper); とすると以降マウスの位置にDevToolと同じ半透明な黒っぽい丸が
こんにちは。レモンティーです。 はてなブログの新しいテーマSunlightを公開しました blog.hatena.ne.jp このブログで現在使用しているNavyDarkCodeとよく似ていて、機能面では互換性?があります。 つまりグローバルメニューやSNSシェアボタンはNavyDarkCodeと同じコードですし、 <div class="pre-filename">filename</div>もそのまま使用できます。 (これ、はてな記法の場合は勝手に改行されますのでそのままでOKですがMarkdown記法の場合はdivの閉じタグの後```の前にスペース二つとかで改行する必要があります。) 見た目も似ていますがまあ説明するより見たほうがはやそう arbunt.hatenablog.com というわけでテーマ変えようかなって人とか新しくブログ増やす人はぜひ使ってみてください。 今回はこれでお
こんにちは。レモンティーです。 今回はpuppeteerではてなスターを自動でつけてみます。そんな便利なものでもないので大丈夫だとは思いますが実用はしないでください。スターに関してはスパムを禁じる規約とかが見当たらなかったのですが、あまり意味のないスパムまがいの行為ですしね…。私も今回試した以外は使いません。 puppeteerとは? 準備 メイン部分 ログイン リストをつくる スターをつける 実行 結果 puppeteerとは? github.com webbibouroku.com 準備 プロジェクトのディレクトリをつくりpuppeteerをインストールします。 mkdir hatena-auto-star cd hatena-auto-star npm init -y npm i puppeteer メイン部分 以下のようになります index.js const puppeteer
こんにちは。レモンティーです。 今回は、VS Codeのシンタックスハイライトの一部の色を変更する方法です。VS Codeは拡張機能でいろんな人が作ったテーマを使用できますよね。でも使っていると「ほぼ気に入っているけど事情があってコメントの色だけ変えたい」みたいなこともあるかと思います。そこで今回は例としてコメントの色を変更します。 code.visualstudio.com シンタックスハイライトの色は設定のEditor: Token Color Customizationsの項目から変更できます。「setting.jsonで編集」をクリックするとsetting.jsonが開きますのでそこに書き込んでいきます。テーマを切り替える際に不便にならないようにテーマごとにカスタマイズできるようで、たとえばNordというテーマを使用している間だけコメントの色を変えるには以下のようにします。 set
こんにちは。レモンティーです。 今回ははてなブログでのソースコードの表示についてです。 コードを載せるとき、そのファイル名やパスも一緒に表示したいことがありますよね。先日紹介したテーマNavyDarkCodeにこの機能を追加しました。 blog.hatena.ne.jp 使い方は簡単で、>||で始まるコードブロックの直前の行(またはpreタグの直前)に <div class="pre-filename">hoge</div>と書くだけです。 実際に使うと以下のような見た目になります。(ファイル名が普通の白いテキストとして表示されている方はCtrl+f5で更新してみてください。) sample.js 'use strict'; module.exports = (sequelize, DataTypes) => { var Task = sequelize.define('Task', {
こんにちは。レモンティーです。 今回はページトップにスクロールするボタンです。 よく画面の右下とかに見かけるやつですね。 Angularの場合はどうすればいいでしょうか。 今回は@ViewChildとscrollIntoViewメソッドを使います。 テンプレートで、スクロールの移動先にする要素に#pageTopとつけて Template reference variableとして扱えるようにします。詳しくは↓ https://angular.jp/guide/template-syntax ここではdivですが他でもOKです。 <div #pageTop>スクロール先</div> あとは @ViewChild("pageTop") pageTop: ElementRef; のように宣言して、 別途作成したトップページに戻るボタンが押されたら scrollToTop(){ this.page
こんにちは。レモンティーです。 今回はAngularMaterialのフォントを変更する方法です。 Google FontsのフォントをAngularMaterialに設定します。 fonts.google.com AngularMaterialのボタンやナビゲーションのフォントは デフォルトではRobotoというフォントになっています。 これを変更するにはmat-typography-configを使います。 まず、プロジェクトのsrcフォルダとかに 適当なscssファイル(今回はmytheme.scss)をつくって以下のように書きます (もともと色を変えたりでカスタムテーマを使っている場合はその.scssファイルでOKです。) mytheme.scss @import '~@angular/material/theming'; $custom-typography: mat-typog
こんにちは。レモンティーです。 以前、フォームについての記事を書きました。 www.sawalemontea.com 今回はFormArrayを使って動的に変化するフォームをつくります。 AngularMaterialでMatErrorのバリデーションも付けます。 Angular Angular Material 使い方はFormBuilderでFormGroupにFormArrayを入れておいて 項目を増減したい時にそのFormArrayに子FormGroupを pushしたりremoveAtする感じです。 以下、複数のリンクを入力するフォームを例に見ていきます。 FormBuilderでFormArrayを入れておく (ついでにgetで後々呼びやすくしておきます。) exampleForm:FormGroup; constructor(private fb:FormBuilder) {
こんにちは。レモンティーです。 今回は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 or insufficient permissions. が起こる場合は、クエリ側で .where("author","==",user.uid)のようにし忘れている可能性があります。 これを書き加
こんにちは。レモンティーです。 今回はAngularMaterialのDialogを使います。 公式はコチラ Angular Material AngularMaterialのDialogでは、まずDialogのコンポーネントをつくり それを呼び出し時に指定して使います。 さっそく見ていきます。 準備 Dialogのコンポーネント作成 呼び出し 準備 ・AngularMaterialのインストール ・MatDialogModuleのインポート をします。 Dialogのコンポーネント作成 型の恩恵を受けたい場合は表示するデータのinterfaceを定義します dialogData.ts export interface DialogData{ title:string; message:string; } 新しいコンポーネントtestDialogを作り、App.module.tsのentr
こんにちは。レモンティーです。 今回はAngularMaterialのReactiveFormについてです。 公式↓にいろんなパーツのいろんなパターンがあるのでちょこちょこ抜き出したものです。 Angular Material 準備 AngularMaterialを導入 app.module.tsなどに FormsModule,ReactiveFormsModule,MatFormFieldModule,MatInputModule をインポートします。 以下はフォームを設置したいコンポーネントの話です。 TS まずインポート import { FormGroup,FormBuilder, Validators } from '@angular/forms'; 続いてFormGroupの変数をつくり、FormBuilderを使います。 また、後々要素が取得しやすいようにget f()を書い
こんにちは。レモンティーです。 今回は、UIではなく普通のオブジェクトのタップ判定をどうやってとったらいいか紹介します。 この話題で検索すると、必ずと言って良いほどRayを飛ばして判定するスクリプトがヒットしますよね。でも、初心者的にはあれは大変です。 そこでEventTriggerです。 まず、やり方をざっくり説明すると ①カメラにRaycasterをアタッチ。 ②ヒエラルキーにEventsystemをcreate ③タップ判定したいオブジェクトにEventTriggerをアタッチ ④オブジェクト、メソッドを指定 です! 手順は多く見えますが簡単ですよ!今回は、Cubeにタップ判定をつけてみましょう。 ではスクショで見ていきます。 ①カメラに AddComponent>Event>PhysicsRaycasterをつけます。 ②ヒエラルキーに Create>UI>EventSystemを
こんにちは。レモンティーです。 今回は、自作モジュールの作成です。 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('http'); var mycal = require('./mycal'); http.createServer(function(req,res){ res.writeHead(200,{'
こんにちは。レモンティーです。 今回はnpmによるパッケージの管理です。 前回までに登場したモジュールはBuiltInモジュールといって Node.jsで最初から使えるモジュールでした。 Node.jsにはそれ以外にも色々な人が作ったモジュールがあり インストールして使用することができます。 インストールには専用のPackageManagerである npmを使います。 npmはNode.jsと一緒にインストールされますので 別途ダウンロードなどは必要ありません。 npmでパッケージをインストールするには 次のコマンドを使います。 npm install パッケージ名https://www.npmjs.com/ で欲しいパッケージを探すことができます。 自分がインストールしているパッケージの名前とバージョンを見るには 次のコマンドを使います。 npm list --depth=0 //グロー
こんにちは。レモンティーです。 今回はFileSystemモジュールでファイル操作をします。 fsモジュールではこれまでに使ったファイル読み込みの他にも 書き込み、削除、リネーム…など色々できます。 読み込み 書き込み 削除 リネーム 読み込み これまではreadFileSyncでサーバをつくる前に同期的に読み込んでいましたが、 サーバでの処理ではreadFileを使うことで非同期的に読み込みます。 これはファイルへのアクセスのような時間のかかる処理を同期的に行うと その完了まで待機することになりパフォーマンスが低下するためです。 しかし非同期だと普通に次の行からファイル読み込みの続きを書いても 意図した順番に実行されるとは限りません。 なのでファイル読み込みが完了したら行いたい続きの処理を readFileメソッドの引数で渡します。 callBack関数というやつです。 readFile
皆さんこんにちは。レモンティーです。 今回はNode.js入門です。 インストールしてHellow,Worldを表示させてみます。 Node.jsとは Hello World モジュール ビルトインモジュール npm おしまい Node.jsとは Node.jsはJavascriptの実行環境です。Javascriptのスクリプトが書かれた.jsファイルは実行ファイルではないのでそれだけでは実行できません。実行するための環境が必要です(jsファイルから実行ファイルをつくることもできるようですがスクリプトのまま実行環境を整えて実行することの方が多いと思います)。Windowsで動作するJavascriptの実行環境はいろいろありますが、そのうちの一つがNode.jsというわけです。 他の環境や、なぜNode.jsがいいのかについてはもし気になるならこちらのリンクをどうぞ。 今すぐ使えるJav
こんにちは。レモンティーです。 今回はデータの保存です。 Web Storageを使います。 WebStorageにはsessionStorageとlocalStorageの2種類ありますが sessionStorageはブラウザを閉じたりすると消えてしまう一時的なものなので その人が次にページを訪れた時などに使いたい場合はlocalStorageを使います。 使い方はKeyValue形式で、こんな感じです。 //書き込み localStorage['test'] = text; //読み取り let text = localStorage['test']; //全て削除 localStorage.clear(); Keyの存在チェックも連想配列と同じです。 if(localStorage['test']){ let text = localStorage['test']; }else{
こんにちは。レモンティーです。 今回は、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="anonymous">(はてなブログで全ページで使いたい場合は 詳細設定>headに要素を追加 でOK) 使い方は簡単で <i class="fa fa-ban"></i>のようにします。 faの部分は
次のページ
このページを最初にブックマークしてみませんか?
『LemonteaのUnity部屋』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く