主なNode.js独自API
// CommonJS Modules の場合 const fs = require("fs"); const fs = require("node:fs"); // ES Modules の場合 import fs from "fs"; import fs from "node:fs"; process のように、グローバル変数としても組み込みモジュールとしても提供されているAPIもあります。 global globalThisの別名です。Webブラウザでは window と self がglobalThisの別名として定義されていますが、Node.jsには window や self はなく、かわりに global が定義されています。 Buffer ArrayBuffer, TypedArray (Uint8Arrayなど), DataView はJavaScriptの標準機能です。
公式チュートリアルでNext.jsに入門してみた (1) 〜アプリ新規作成、ページ遷移、スタイリング編〜 | DevelopersIO
公式チュートリアルでNext.jsに入門してみた (1) 〜アプリ新規作成、ページ遷移、スタイリング編〜 こんにちは、CX事業本部 IoT事業部の若槻です。 今回は、現在注目されているフロントエンドフレームワークNext.jsへの入門のために、次の公式チュートリアルを数回のシリーズに分けてこなしていき、基本的な機能に触れていこうと思います。 Create a Next.js App | Learn Next.js Next.jsとは Next.jsは、オープンソースで提供されるReactベースのフロントエンドフレームワークです。 Next.js by Vercel - The React Framework こちらによるとNext.jsの特徴は次のようなものがあり、プロダクション環境で必要とされるあらゆる機能と、最高の開発者エクスペリエンスを提供できるように設計されています。 An int
規程文書を Google ドキュメント から GitHub に移行する - KAYAC Engineers' Blog
人事部の小池です。 この記事は KAYAC Advent Calendar 2022 の16日目の記事です。 カヤックの規程文書管理の仕組みを Google ドキュメント から GitHub に移行した取り組みについて紹介します。 これまでの文書管理 カヤックでは長年規程文書を Google ドキュメント で管理していました。Google ドキュメント は多くの従業員にとって親しみやすいものの、文書を管理する上でいくつかつらい点がありました。 改訂内容の差分が追いにくい・改訂の背景がわからない Google ドキュメント なので変更履歴から過去の版を閲覧することは可能ですが手軽とはいえません。改訂の際は内容以外にも改訂に至った経緯、議論といった背景も重要ですが、これらの背景は成果物である Google ドキュメント の版の履歴からは伺うことはできません。「ある時までは確かこういった規程内容
ある調べものをしていたところ、Canarytokensというサービスがあることを知った。 canarytokens.org Canarytokensはカナリアトークンを生成するサービスであり、無料で利用できるほか、githubでソースコードやDockerfileが公開されているため自分でサービス稼働環境を構築できる。カナリアトークンとはターゲット（被害者）がWebページ、電子メール、ファイルなどのリソースにアクセスする操作をしたときに、そのアクセスした事実やターゲットの環境情報（IPアドレス、UserAgent、ユーザ名など）を攻撃者に通知するための仕掛けである。 このサービスを知った時は、アクセス解析で使われるようなWebページに極小の透明画像やiframeを埋め込むような方式を想像したが、ドキュメントを読んでいると他にも様々な方式をサポートしていることがわかった。そこで、実際にどういっ
JavaScript チュートリアル: 初級編 JavaScript の基礎 JavaScript の第一歩 JavaScript の構成要素 JavaScript オブジェクト入門 JavaScript ガイド 入門編 文法とデータ型 制御フローとエラー処理 ループとイテレーター 関数 式と演算子 数と日付 テキスト処理 正規表現 インデックス付きコレクション キー付きコレクション オブジェクトを利用する Using classes プロミスの使用 イテレーターとジェネレーター メタプログラミング JavaScript モジュール 中級編 クライアントサイド JavaScript フレームワーク クライアントサイド Web API Language overview JavaScript のデータ構造 等値比較と同一性 プロパティの列挙可能性と所有権 クロージャ 上級編 継承とプロトタイ
JavaScript チュートリアル 初級編 JavaScript の基礎 JavaScript の第一歩 JavaScript の構成要素 JavaScript オブジェクト入門 JavaScript ガイド 入門編 文法とデータ型 制御フローとエラー処理 ループとイテレーター 関数 式と演算子 数と日付 テキスト処理 正規表現 インデックス付きコレクション キー付きコレクション オブジェクトを利用する Using classes プロミスの使用 JavaScript 型付き配列 イテレーターとジェネレーター メタプログラミング JavaScript モジュール 中級編 クライアントサイド JavaScript フレームワーク クライアントサイド Web API Language overview JavaScript のデータ構造 等値比較と同一性 プロパティの列挙可能性と所有権 クロ
Note: I received a lot of great feedback from the discussions at Mastodon and Hacker News, so I've updated the post with some improvements to the font! I've also added some further examples and acknowledgements at the end. Syntax Highlighting in Hand-Coded Websites The problem I have been trying to identify practical reasons why hand-coding websites with HTML and CSS is so hard (by hand-coding, I
URLエンコード関連メモ
encodeURIComponent(" ") // => '%20' encodeURIComponent("+") // => '%2B' encodeURIComponent("/") // => '%2F' encodeURIComponent("*") // => '*' encodeURIComponent("https://httpbin.org/get?x=#") // => 'https%3A%2F%2Fhttpbin.org%2Fget%3Fx%3D%23' 値に対して行う URLを構成する文字もエンコードする RFC3986 に近いが守っていない !'()* をエンコードしていない つまり RFC2396 らしい Component が何を指しているのかわかりづらい こんなものをグローバルに定義するとか設計がどうかしている(小声) decodeURIComponent
ドイツのベンチャーが開発し提供を始めた「DeepL」という翻訳が日本語などにも対応し、早速その翻訳精度の高さとその訳文の流暢さから一気に注目を集めています。 www.itmedia.co.jp 一般的な翻訳サイトと同じく『サイトに行って原文を貼り付けると翻訳される』という仕組みなので使い方は難しくないですが、Mac/Windows向けに公開されている無料の常駐アプリを使うとより手軽です。 それで良いという方はそれぞれ好きな方法を選んでもらうとして、ここではもう一つ "ブックマークレット" という選択を設けてみました。 素人による付け焼き刃のものですが、気になる方はこちらをお試しあれ。 ブックマークレットの登録 以下の枠内に記述してある全ての文字列を選択します。 javascript:location.href='https://www.deepl.com/translator#en/ja/
TikTok has a reputation for its aggressive data collection. In fact, an article published on 22 December 2022 uncovered how ByteDance spied on multiple Forbes journalists using TikTok. While some of the data they collect may seem benign, it can be used to build a detailed profile of each user. Information such as user location, device type, and various hardware metrics are combined to create a uni
メタデータの勉強をしました。 なるほど、これを使うならフロントマターが完璧で究極だわ。 そのための入口を開いてみましょう。 Book Search Obsidian - Connected Notes 1.4.4 分類: 仕事効率化,辞書／辞典／その他 価格: 無料 (Dynalist Inc.) Book Searchをまず導入します。 GoogleBooksを検索するプラグインです。 コミュニティプラグインからインストールしてください。 Obsidian plugin: Book Search 使い方 あらかじめ、設定で保存先をbookフォルダとします。 リボンにボタンがあるので起動。 キーワードを尋ねてくるので、著者名でも題名でも構いません。 入力すれば検索結果がリストアップされます。 選択するとデータがbookフォルダに保存されます。 基本情報 ファイルのフロントマターにタイトルや
とほほのJavaScript入門 (JavaScriptリファレンス) [戻る] [索引] 基本編 JavaScript って何？ JavaScript とは？ JavaScript と Java の関係は？ ECMAScript とは？ JavaScript のバージョン ES5 の新機能 ES5.1 の新機能 ES2015(ES6) の新機能 ES2016(ES7) の新機能 ES2017(ES8) の新機能 ES2018(ES9) の新機能 ES2019(ES10) の新機能 ES2020(ES11) の新機能 ES2021(ES12) の新機能 ES2022(ES13) の新機能 ES2023(ES14) の新機能 まずは始めてみよう 準備するもの 「Hello world!!」と書いてみよう 時刻を表示してみよう 動く時計を表示してみよう JavaScript の書き方 <scr
月間100万人以上利用するサービスをSPAにしたあとSEOで苦戦したので、DynamicRenderingを入れた話 - Qiita
月間100万人以上利用するサービスをSPAにしたあとSEOで苦戦したので、DynamicRenderingを入れた話DockerpuppeteerFargateDynamicRenderingrendertron TD;LD ・SEO対策をちゃんとせずにSPA化に踏み切った直後、Google検索流入が120万人/月もいたのが60万/月まで下がりました。 GoogleAnalyticsで毎週5〜10%ずつユーザーが減っていく恐怖がありつつ、 会社自体がバタバタしていたので対策が後手に回り3ヶ月放置してしまいました。 その間、全くなにもできなかったわけではなく、WEBフレームワーク(Django)が吐き出すHTMLで対策していたのですが、SEO評価がどんどん下がっていくので本腰入れてDynamicRenderingを入れることにしました。 ・弊社サービス全てで使えるようにしたので、今後はSEO
Equality comparisons and sameness - JavaScript | MDN
JavaScript Tutorials Complete beginners JavaScript basics JavaScript first steps JavaScript building blocks Introducing JavaScript objects JavaScript Guide Introduction Grammar and types Control flow and error handling Loops and iteration Functions Expressions and operators Numbers and dates Text formatting Regular expressions Indexed collections Keyed collections Working with objects Using classe
1x1サイズのbase64透過画像 DataURI 以下のようにMIME TYPE + base64文字列をIMGタグから参照して利用する <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D" /> HTML5 Drag&DropAPI FileAPI UI関連はHTML5で実装 JavaScriptでバイナリデータ取得＆変換 XMLHttpRequestでURLから取得するパターン 参照先のサイト(サーバー側の設定)がクロスドメインに対応していないと取得できない Access-Control-Allow-Origin HTTP_Access_Control view source JavaScript (function(){ 'use stric
JavaScriptにおける正しいURLエンコードの方法（encodeURIとencodeURIComponentの違い） - Qiita
URL内で特別な意味を持つ「; , / ? : @ & = + $ #」の扱いが違います。 encodeURI エンコードされない encodeURIComponent エンコードされる ですので、URL全体をエンコードする場合はencodeURIで、パラメータなどの部分的な文字列をエンコードする場合はencodeURIComponentを使用しましょう。 ありそうな失敗 例えばhttp://api/user?name=XXXのXXX部分にユーザ名「山田=太郎」を指定する場合 ユーザ名を設定したURLを作成する http://api/user?name=山田=太郎 encodeURIする http://api/user?name=%E5%B1%B1%E7%94%B0=%E5%A4%AA%E9%83%8E 受け取った側がdecodeURIする http://api/user?name=山田=
【Instagram Graph API】Google Apps ScriptでInstagramのフォロワー推移表を作成しよう！ | Web it Works
【Instagram Graph API】Google Apps ScriptでInstagramのフォロワー推移表を作成しよう！ こんにちは！ いつもご覧いただきありがとうございます。 Instagramの親会社のFacebookさんが提供している「Instagram Graph API」というものを発見しました。 なんだ、これでフォロワーの推移グラフ作れるじゃん！ ということで今回はGoogleスプレッドシートとGAS、Instagram Graph APIを使ってフォロワー推移グラフを作成しました。 APIの取得のためのInstagramとFacebookでの設定 まずAPIの取得に必要なことがあります。 それが「設定」です。 このAPIを有効にするためには Instagramのビジネス（OR クリエイター）アカウント設定Facebookでのサイト作成APIトークン発行（3ステップ）
外部サイトのOGPを取得する
現在開発しているアプリで外部サイトのOGPを取得して以下のようなカードを表示する機能を実装しました。 今後また別のアプリで使うかもしれないのでアプリ本体と切り離してCloud Functionsにデプロイしました。 コード import * as functions from 'firebase-functions'; import axios from 'axios'; import { JSDOM } from 'jsdom' export const getOgpFromExternalWebsite = functions.https.onRequest(async (request, response) => { const targetUrls = extractUrlParams(request, response); if (!targetUrls) return; con
【Google Apps Script】英文のGoogleドキュメントをDeepL APIで翻訳してドキュメントに書き込む - Qiita
とても簡単で、２ステップで完了です。 Googleドライブに該当のPDFをアップロード そのPDFを副クリック -> 「アプリで開く」 -> 「Googleドキュメント」を選択 これだけです。 ただ参考にした「PDF データをテキスト化するなら Googleドキュメントが使える！」によると、完璧ではないようで、 誤字脱字がある可能性はあるらしい -> ちゃんと確認してないですが 縦書きドキュメントは横書きで変換されるらしい -> これも確認してはないですが といったことがあるらしいので、これらを許容できるドキュメントかどうかの確認は必要そうです。 2.Googleドキュメントを日本語に翻訳して、別のGoogleドキュメントに書き込む まずは、Google Apps Scriptを作成します。 そして以下のスクリプトを貼り付けます。 （エラーハンドリングとかしてない雑スクリプトです。ご自由に
Next.jsのSSGで全文検索をする方法
前提 Next.js TypeScript styled-components microCMS AWS S3 Cloud Front Route53 Next.jsのSSGで生成した静的ファイルをS3にアップロードして、静的なメディアサイトを作っています。 CMSはmicroCMSを利用していて、メディアの記事の部分をmicroCMSから配信しています。 やりたいこと Next.jsのSSGで作成した静的なメディアにおいて、全文検索機能を追加したいというのが今回のやりたかったことです。 next devでローカル開発してるときは、getStaticProps内が変更はいるたびに更新され、再buildされるので、うまくいったように見えてましたが、S3にあげてみると、うまくいかなかったので、その対策をしたかったです。 結論 microCMSの全文検索APIをつかう AWSのLambdaでエン
Let’s pretend I own a service and I want to grant other services access to my service on behalf of my users. The familiar OAuth 2.0 is the industry standard used by the likes of Google sign in, Facebook, etc. to communicate safely without inconveniencing users. Implementing an OAuth Authentication server is conceptually simple but a pain in practice. We can leverage the power of Cloudflare Workers
multipart/form-dataで、日本語ファイル名が文字化けする(API Gateway, Lambda構成) - Qiita
multipart/form-dataで、日本語ファイル名が文字化けする(API Gateway, Lambda構成)content-type文字化けlambdaAPIGateway はじめに API Gateway, AWS Lambda構成で、multipart/form-dataを使ってファイル送信をした際に、日本語ファイルが文字化けする事象に遭遇しました。その対応方法についてまとめます。 対象となる読者 multipart/form-dataを使って日本語ファイルを送信したが、ファイルが文字化けして困っている方 Lambda実行環境 Node.js 18.x multipart/form-dataで送信したデータのバックエンド処置には nachomazzara/parse-multipart-dataを使用 結論 最初に結論だけ述べると、フロント側でファイル名をエンコードして、デー
とほほのJavaScript入門 (JavaScriptリファレンス) [戻る] [索引] 基本編 JavaScript って何？ JavaScript とは？ JavaScript と Java の関係は？ ECMAScript とは？ JavaScript のバージョン ES5 の新機能 ES5.1 の新機能 ES2015(ES6) の新機能 ES2016(ES7) の新機能 ES2017(ES8) の新機能 ES2018(ES9) の新機能 ES2019(ES10) の新機能 ES2020(ES11) の新機能 ES2021(ES12) の新機能 ES2022(ES13) の新機能 ES2023(ES14) の新機能 まずは始めてみよう 準備するもの 「Hello world!!」と書いてみよう 時刻を表示してみよう 動く時計を表示してみよう JavaScript の書き方 <scr
Unicode character class escape: \p{...}, \P{...} - JavaScript | MDN
JavaScript Tutorials Complete beginners JavaScript basics JavaScript first steps JavaScript building blocks Introducing JavaScript objects JavaScript Guide Introduction Grammar and types Control flow and error handling Loops and iteration Functions Expressions and operators Numbers and dates Text formatting Regular expressions Indexed collections Keyed collections Working with objects Using classe
Bookmarklet: Compare SERP titles to actual page's title and h1 heading
Bookmarklet: Compare SERP titles to actual onpage titles and h1 heading aka: the #titlegeddon bookmarklet Google has stirred up some dust all around the SEO world with their rewriting of websites’ titles. SEO folks are now trying to figure out how Google is rewriting their titles. Fede Gómez, a WordPress developer from Toledo, Spain has come up with a nice JavaScript bookmarklet to be used on Goog
PagerDutyのオンコールシフトをSlackでリマインドする〜TypeScriptとAWS CDKで実装〜 - Qiita
この記事はPagerDuty Advent Calendar 2023の25日目の記事です。 PagerDutyのオンコールシフトをSlackでリマインドしたい 🎄メリークリスマス🎅 NewsPicksのSREチームで障害対応をよくやっているあんどぅといいます。 先日、ゆるSRE勉強会 #3という勉強会でNewsPicksの開発組織のオンコールの体制とポストモーテムの取り組みを発表させていただきまして、その文脈でPagerDutyをどのように活用しているのかを実装とともにご紹介させていただきます。 弊社ではモバイル担当1名サーバー担当2名の3名のエンジニアが一週間に2交代制(3.5日シフト)でオンコールを担当します。オンコール担当のことを運用当番と呼んでいるのですが、PagerDutyのオンコール設定は非常〜に便利なので 3.5日のうち有給取得するので1日だけOverride Laye
夫婦の危機をChatGPTが救う！？はじめてのJavaScript 青森のラーメン屋をLINEに通知してみた - Qiita
1. プログラムがわからない非エンジニアがChatGPTにコードを書いてもらうまで 突然ですが、ラーメン屋さん巡りが趣味の夫に喜んでもらうため、ChatGPTに青森県のラーメン屋さんをLINEに送るコードをJavaScriptで書いてもらいました。 作成したコード const axios = require('axios'); // アクセストークンを入力する const access_token = process.env.ACCESS_TOKEN || 'アクセストークン'; const getShopData = async () => { const encodedPrefecture = encodeURI('青森県'); const encodedGenre = encodeURI('G013'); const url = `http://webservice.recruit.
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Canarytokensサービスを試してみた - こんとろーるしーこんとろーるぶい
オプショナルチェーン (?.) - JavaScript | MDN
Null 合体演算子 (??) - JavaScript | MDN
Font with Built-In Syntax Highlighting
話題の翻訳ツール「DeepL」のブックマークレットを作ってみた - りんごが好きなのでぃす
Reverse Engineering Tiktok's VM Obfuscation (Part 1)
Obsidian dataviewで蔵書リストを作ってみよう - Jazzと読書の日々
とほほのJavaScript入門 - とほほのWWW入門
画像からdataURLに変換
OAuth Auth Server through Workers
とほほのJavaScript入門 - とほほのWWW入門