ブックマークレット開発環境を作りたい｜0123456
ブックマークレットを作っていて動作を確かめたいとき毎回こんなことをやっていました。 １，Visual Studio Codeでブックマークレットのソースコードを編集する。 ２，Visual Studio Codeの標準機能（JoinLines）を使ってソースコードを1行にし、Ctrl + Cでコピーする。（1行にするのは必要ないかもしれないです。） ３，Chromeに移動してブックマークレットを右クリックし「編集」を押してCtrl + Vでソースコードを一行にしたソースコードを貼り付ける。 ４，「保存」を押して、ブックマークレットの動作を確かめたい対象ページを開きブックマークレットを実行し動作を確かめる。 ざっとまとめるとこんな感じなのですが、結構面倒くさかったです。 ブックマークレットが思うように動かないと、この作業をする回数がさらに増えるのでさらに面倒くさいです。 そこでブックマークレ
HonoとDenoで社内ツールを作ってみた - RAKSUL TechBlog
こんにちは！ラクスルの灰原です！ 軽量かつ高速なWebフレームワークであるHonoと、新進気鋭のJSランタイムであるDenoを使って、社内ツールを作ってみましたので紹介します。 作ったツール 技術スタック index.tsx の内容 Tips HonoでTwindを使う HonoのJSXでAlpine.jsを使う Hono+Denoでesbuildを使う おわりに 作ったツール テックブログ向けのアイキャッチ画像ジェネレータを作りました。 タイトルを入力して、 背景画像と文字色を選んで、 文字の位置と大きさを調整して、 後は「Download」ボタンを押せば画像が手に入ります。 これは以前、弊社デザイン組織で作られた「Zoom背景ジェネレータ」に多分に影響されています。 こちらのデザイナーブログも是非ご覧ください！ note.com 技術スタック このツールは利用頻度がそこまで多くないと思
JavaScriptでn個ずつ配列を分割する - yucatio@システムエンジニア
JavaScriptで配列を指定された個数ずつに分割します。 例えば、 [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] という配列を3個ずつ分割するのであれば、 [[1, 2, 3], [4, 5, 6], [7, 8, 9], [10]] という配列になります。 実装方針 配列から一部を通り出すのには、 Array.prototype.slice() - JavaScript | MDN という関数が使えます。 この関数は、開始のインデックスと終わりのインデックスを渡すと、開始のインデックスから終わりのインデックスの1つ前までの部分の配列を返します。 pythonのmylist[begin:end]、rubyのarray[begin...end]のような動作をします。 例えば、 const array=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10] であれ
文字列をコピーするブックマークレットで使うクリップボードのAPI改めて見てた - hogashi.*
ブックマークレットで文字列をコピーする (クリップボードに入れる) というのをよく書く。 昔ググってへ〜と思ったまま Document.execCommand() - Web API | MDN をずっと使っていた。(あと HTMLInputElement.select() - Web APIs | MDN も知らなくて、 Selection を使って頑張って文字列選択していた。) const value = 'これをコピーしたい'; // input をつくって body に入れる const input = document.createElement('input'); document.querySelector('body').appendChild(input); // フォーカスしたときスクロールされてしまわないように画面内に出す input.style = 'positio
TypeScript/Rollup/Vercelでサクッとブックマークレットを作ってみよう - Adwaysエンジニアブログ
こんにちは。エンジニアブログ運営の梅津です。 普段はエージェンシー事業部でリードアプリケーションエンジニアとして働いています。 エンジニアブログ運営としてブログの質を向上させるために、これまでのブログの情報を集めたりもするのですが、これを逐一手作業で行うのは大変です。 ある程度の作業は自動化したい。そういったときはブックマークレットを作ると便利ですよね。 今回はそんなブックマークレットの作り方をまとめてみました。 「ブックマークレット？よく知らないな」「聞いたことあるけど作り方とか気にしたことなかった」という人がいれば是非一緒に試してみてください！ 筆者の開発環境やこのブログで利用する主な技術のバージョンは次のとおりです。 macOS Node.js 18.12.1 TypeScript 5.0.4 Rollup 3.23.0 Vercel CLI 29.4.0 ブックマークレットとは T
GoogleAppsScript(GAS)でのcacheあれこれ - 株式会社BEFOOL ブログ
木内智史之介（ｼｬｯﾁｮｰ） ミンカさんけっこんしてくださいおねがいします(ｽﾞｻﾞｰ SEGAさん、DIVAの筐体ください(ｽﾞｻﾞｰ GASでの悩ましい問題、それは、遅いこと…！ GoogleAppsScript（以下GAS）は非常に便利なサービスであることは間違いありません。 サーバーの用意も不要。 スプレッドシートとの連携も容易。 公開もちょっとした手続きで可能。 と、三拍子そろったイケメンです。 ほれてまうやろー！！ ただし、遅い。 とにかく、遅い。 注意しながらコーディングしないと、すぐにレスポンスタイムがとんでもない事になってしまいます。 たとえば、自分が実装を進めているDQMJ3の配合早見表のアプリケーションでは、 対象のモンスターの配合ツリーを生成するまでにかかる時間はなんと「60秒越え」という 身の毛もよだつようなレスポンスタイムで愕然としました…。 「これじゃ、公開し
JavaScript for impatient programmers (ES2022 edition)
Homepage Please support this book: buy it or donate (Ad, please don’t block.) JavaScript for impatient programmers Table of contents
GitHub - kpdecker/jsdiff: A javascript text differencing implementation.
Broadly, jsdiff's diff functions all take an old text and a new text and perform three steps: Split both texts into arrays of "tokens". What constitutes a token varies; in diffChars, each character is a token, while in diffLines, each line is a token. Find the smallest set of single-token insertions and deletions needed to transform the first array of tokens into the second. This step depends upon
Node.js の exports と module.exports
Node.js の exports と module.exports Node.js を使ったモジュールのエクスポートとインポート、require、exports、module.exports についての覚書です。以下は Node.js がインストールされていることを前提にしています。 Node.js では CommonJS (CJS) フォーマットが使われ、モジュールとその依存ファイルの定義には require と exports や module.exports を使います。 参考サイト：Understanding module.exports and exports in Node.js また、 CommonJS モジュールとは、Node.js 環境での JavaScript のモジュール化の仕組みです。 参考サイト：JavaScript Primer/CommonJSモジュール r
仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう｜ハイクラス転職・求人情報サイト AMBI（アンビ）
仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう 最近のJavaScriptフレームワークで利用される「仮想DOM」について、リアルDOMの違い、メリット・デメリット、仮想DOMを使ったフレームワーク開発などを、ダーシノ（bc_rikko）さんが解説します。 はじめまして、ダーシノ（@bc_rikko）です。さくらインターネットでフロントエンドエンジニアをする傍ら、NES.cssというファミコン風CSSフレームワークを開発しています。 さっそくですが、皆さんは、ReactやVue.jsといったJavaScriptフレームワークを使ったことがありますか？ そういったフレームワークで使われている、仮想DOMについて知っていますか？ 「聞いたことない」「聞いたことはあるけど、どう実装されているかは知らない」「熟知している」。いろいろなレベルの方がい
【GAS x Vue.js】JavaScript のみで今、家計簿をつくるとしたら【ハンズオン付き！】 - Qiita
【GAS x Vue.js】JavaScript のみで今、家計簿をつくるとしたら【ハンズオン付き！】JavaScriptGoogleAppsScriptVue.jsQiita夏祭り2020_パソナテック 「JavaScriptのみ」＆「無料」＆「サーバーレス」なスプレッドシートと連携した家計簿をつくる方法を考えてみました。 実際に家計簿アプリを作るハンズオン付きです！ ※こちらの記事は一部古い内容となっております。 Zennに投稿している本を更新していますので、よければこちらをご覧ください。 https://zenn.dev/matsu7089/books/gas-account-book なにを作ったの？ Web上でデータを登録すると、スプレッドシートに反映される家計簿アプリです。 実際のページはこちら。使い方は「家計簿アプリお試し方法」で説明します。 データ追加の他に、データ編集と
JavaScriptで画像を読み込んでcanvasからjpeg変換したりするまでのアレやコレや
ただ、この実装では画像がクロスドメインの場合はダウンロードできません。また、safariでは別タブが開き右クリックで画像を保存しないとダウンロードできなかったりします。 やりたかったことHTMLのimgタグで表示している画像をクリックすると、画像をダウンロードさせる。という仕様を実装した時に色々苦労したのでメモしておきます。処理の順序としては以下の順番で説明します。またTypeScript用の型も指定しておきます。 画像URLからnew Image()するクロスドメインを回避する方法canvasにdrawImageしてjpegに変換してbase64にするbase64からBlobに変換してFileSaverを使ってダウンロードさせるsafariでダウンロードフォルダーに保存させるために使用画像URLからnew Image()する画像URLからHTMLImageElementインスタンスを作成
WebSocket サーバの実装とプロトコル解説 - Block Rockin’ Codes
intro なんだかんだ WebSocket を使ってるのに、 WebSocket サーバを自分で書いたことが無かったので、RFC も落ち着いてきたここらで、仕様を読みながら実装してみようと思いました。 "WebSocket サーバ 実装" とかでググると、 Socket.IO とか pywebsocket で WebSocket アプリ作って、「WebSocket サーバを実装」みたいなタイトルになってることが多いみたいですが、 (Apache に PHP で HelloWorld して、「HTTP サーバ実装しました」とは言わないよね。) この記事では、 WebSocket プロトコルをしゃべるサーバ自体を実装します。 といっても、全部やるのはちょっと大変だったので、基本的なテキストメッセージのやりとりの部分だけやって、エコーサーバができるところまでやりました。 完成版のソースは以下で
Reactベストプラクティスの宝庫！「bulletproof-react」が勉強になりすぎる件
Reactアプリケーションのアーキテクチャの一例として公開されているGitHubリポジトリ「bulletproof-react」が大変勉強になるので、私自身の見解を交えつつシェアします。 ※2022年11月追記 記事リリースから1年ほど経過して、新しく出てきた情報や考え方を盛り込んだ続編記事を書いていただいているので、こちらも併せて読んでいただければと想います（@t_keshiさんありがとうございます！）。 ディレクトリ構造が勉強になる まずはプロジェクトごとにバラつきがちなディレクトリ構造について。 ソースコードはsrc以下に入れる bulletproof-reactでは、Reactに関するソースコードはsrcディレクトリ以下に格納されています。逆に言えば、ルートディレクトリにcomponentsやutilsといったディレクトリはありません。 たとえばCreate Next Appで作成
GASで日付操作ライブラリ「Day.js」を使う（Moment.js代替）
GASで日付操作ライブラリ「Day.js」を使う（Moment.js代替） GASで日付を操作するときに、Dateオブジェクトの標準インタフェースでは使い勝手が悪いケースも多いです。 そこで、この記事では、GASで、日付操作ライブラリ「Day.js」を使う方法を紹介します。 GASで使える日付操作ライブラリとして、よく使われる「Moment.js」は、サポート打ち切りが予定されています。「Day.js」は、操作方法が「Moment.js」とほとんど同じ（らしい）ので、乗り換え先としても最適です。 利用環境を整える：ライブラリを追加する メニューから「リソース」→「ライブラリ」を選びます。 図書館（＝たぶん「ライブラリ」の直訳）ウィンドウが表示されるので、「Add a Library」欄に次のように入力して「追加」をクリックしてください。 1ShsRhHc8tgPy5wGOzUvgEhOed
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
文系大学生のためのp5.js入門
Mermaid | Diagramming and charting tool
GitHub - hieuvp/xpath-html: Easily use XPath to locate any element in an HTML DOM page.
Vueでフロント実装してみる｜VueとGASでつくる！サーバーレス家計簿📔
dayjs/docs/ja/README-ja.md at master · iamkun/dayjs
