ブラウザのJavaScriptでShiftJISのcsvを作ってダウンロードさせる - Qiita
JavaScriptでやる必要があるのだろうか…… サーバ側が対応してくれないので、rest apiを駆使してブラウザでcsvを作るとかでしょうか……？ まぁ、それは一旦横に置いておくとして。 utf-8だったらそんなに難しくないんですけれどもね。 その形式だとexcelに優しくないので、ShiftJISの形式にして頑張ってcsvを作ってみようと思います。 実装例とデモ https://github.com/fumihiko-hidaka/create-sjis-csv https://neko-tech-test-storage.storage.googleapis.com/create-sjis-csv/index.html こっちの方が楽だよ！ とかあれば、コメントやprいただければ 動作確認はchromeだけです 使ったライブラリ 日本語の変換用にencoding-japanese
JavaScriptでファイルダウンロード処理を実現する - Qiita
はじめに モダンブラウザならJavaScriptでファイルダウンロード処理を実現することができます。SPA(シングルページアプリケーション)など、クライアント側にデータを持つようなアプリケーションであればサーバアクセスなしにメモリの内容からファイルを生成してダウンロードさせることができます。 実装方法 やり方は リンクのHTML5のdownload属性を使用してダウンロードファイル名を設定 File APIのBlobを使用してデータを作成 window.URL.createObjectURLでBlobからURLを生成しそれをリンク先に設定 とするだけです。これでChromeとFireFoxはいけます(download属性のブラウザ実装状況を見るとを見ると、試せていないですがEdgeとOperaもいけそう)。加えてIEをサポートする場合は、IE10/11であればwindow.navigato
【JavaScript】生成データをファイルとして保存（ダウンロード）させる方法 – webfrontend.ninja
リンクをクリックしてファイルを保存する方法 a 要素のリンクをクリックすることでファイル保存させるのは比較的簡単にできます。ここでは JSON データを生成し、それをファイルとして保存できるようにします。 document.getElementById('dllnk').addEventListener('click', (event) => { // JSON ファイルを表す Blob オブジェクトを生成 const json = JSON.stringify({ a: 1, b: 2, c: 3 }, null, ' '); const blob = new Blob([json], { type: 'application/json' }); // a 要素の href 属性に Object URL を セット event.currentTarget.href = window.UR
JavaScript でタイムゾーン名を取得する方法 - Qiita
JavaScript で Asia/Tokyo や America/Los_Angeles のような IANA Time Zone Database で定義されたタイムゾーン名を取得する方法ですが、 結論 結論から言うと、正確に取得する方法はありません。 JavaScript の Date には、タイムゾーン名を取得する API がないからです。 var date = new Date(); date.toString(); // => "Fri Sep 19 2014 04:49:59 GMT-0700 (Pacific Daylight Time)" date.getTimezoneOffset(); // => 420 Date を文字列化すると夏時間も考慮したタイムゾーンの名前が出力されて惜しい感じですが、仕様が決まっているわけではないのでブラウザ毎に違っていて使えません Date
JavaScript における文字コードの初歩 - 30歳からのプログラミング
この記事では、 JavaScript で文字コードを扱う際に知っておくべき概念である Code Point や Code Unit、サロゲートペア、といったものについて説明していく。 また、具体的にそれらの概念を使ってどのようにコードを書いていくのかについても扱う。 この記事に出てくるコードの動作確認は以下の環境で行った。 Deno 1.26.0 TypeScript 4.8.3 Code Point （符号位置） プログラムで文字を表現する方法は複数あるが、 JavaScript では Unicode という方法を採用している。 Unicode ではあらゆる文字に対して一意の値を割り振ることを目的としており、この値のことを Code Point （符号位置）という。 Code Point は 16 進数の非負整数で、文章中で表記するときは接頭辞としてU+をつける。 例えばAという文字の
ブラウザ用漫画ビューアーライブラリ「ToraViewer」を公開しました - 虎の穴開発室ブログ
こんにちは。虎の穴ラボのはっとりです。 ブラウザ用漫画ビューアーライブラリ 「 ToraViewer 」 を公開したので紹介したいと思います。 www.npmjs.com github.com はじめに この記事では、ToraViewerの利用方法とToraViewerが利用している技術についてを紹介していきます。 ToraViewerで何ができるのか ToraViewerは漫画や写真集などの画像一覧を電子書籍のような形式で閲覧できるライブラリです。 デモページから実際の動作を確認することができます。 Tora Viewer デモ ToraViewerデモ 画面サイズにより自動的に1ページ表示と見開き表示が切り替わります。 また、利用ユーザーが歯車ボタンから任意のスタイルに変更できます。 ToraViewerの使い方 まずはインストールします。 npm i @toralab/tora-vi
複数の画像を生成してローカルに保存 - Qiita
HTML 要素を画像化した複数のファイルをローカルの専用サーバーに送って保存します。 シリーズの記事です。 dom-to-imageを試す html2canvasを試す 複数の画像を生成してローカルに保存 ← 今回の記事 ライブラリ 前回まで同じ目的の2つのライブラリを比較しました。どちらも Firefox では文字サイズが変わってレイアウトが崩れるため、今回は Chrome を前提に進めます。 テキストだけを含む要素の画像化ではどちらを使ってもほとんど差がありませんでした。XMLHttpRequest でファイルを送るには Blob に変換する必要があるため、その機能をサポートしている dom-to-image を使用します。 HTML 要素を画像化した Blob の生成は簡単にできます。 サーバー 以下の記事で作ったファイルを受け取るサーバー (server.ts) を使用します。 簡
ブックマークレット実行時に外部ファイルをロードして使う - ザリガニが見ていた...。
ブックマークレットの書き方の段階的な発展の仕方の続き。 基本 前回の外部ファイルをロードして実行するブックマークレットは、こんな感じだった。 javascript: (function(d,s){ s=d.createElement('script');s.src='//dl.dropboxusercontent.com/u/XXXXXXX/bookmarklet.js';d.body.appendChild(s); })(document) Webページのbodyタグに以下のようなscriptタグを追加して、 シンプルに、たった一つの外部ファイルをロードしているのだ。 <script src='//dl.dropboxusercontent.com/u/XXXXXXX/bookmarklet.js'></script> 複数の外部ファイルをロードする では、外部ファイルを二つ以上ロードし
SPAセキュリティ超入門 | ドクセル
スライド概要 SPA(Single Page Application)の普及が一層進んでおり、従来型のMPAを知らないウェブ開発者も生まれつつあるようです。SPA対応のフレームワークでは基本的な脆弱性については対策機能が用意されていますが、それにも関わらず、脆弱性診断等で基本的な脆弱性が指摘されるケースはむしろ増えつつあります。 本セッションでは、LaravelとReactで開発したアプリケーションをモデルとして、SQLインジェクション、クロスサイトスクリプティング、認可制御不備等の脆弱性の実例を紹介しながら、現実的な対策について紹介します。LaravelやReact以外のフレームワーク利用者にも役立つ説明を心がけます。 PHPカンファレンス2022での講演資料です。 PHPカンファレンスでの動画URL https://www.youtube.com/watch?v=jZ6sWyGxcCs
HTML の一要素のみを部分的に画面キャプチャ出来る Firefox の「ノードのスクリーンショットを撮影」機能。 – pulogu.net
ホーム / ブログ / コンピュータ / ブラウザ / HTML の一要素のみを部分的に画面キャプチャ出来る Firefox の「ノードのスクリーンショットを撮影」機能。 Editor 2018-12-06 6448 accesse HTML ページの一要素のみキャプチャ 今回の投稿は、ウェブブラウザーの Mozilla Firefox （ファイヤーフォックス）の開発ツールの機能の中の一つの「ノードのスクリーンショットを撮影」について書いていきたいと思います。 「ノードのスクリーンショットを撮影」機能を使用すると、 HTML の一要素のみを部分的に画面キャプチャ出来るようです。 目次まで戻る 準備 まずは、サンプルページとして、以下の HTML ファイルを準備してみました。 サンプルページの URL： https://pulogu.net/wordpress/wp-content/them
[JavaScript] JSだけでスクリーンショットを撮ってダウンロードもする方法 - Qiita
背景 htmlファイルを画像化して送って欲しい、共有したい、という時はどうしますか？ htmlの画像化は実はいろいろな使い道があります。 サムネイルを表示したい 問い合わせの際に、そのページの状態を把握したい 動的に変更されるサイトの断面図を保存したい ...などなど もちろん、htmlファイルを画像化する方法は様々あります。 SnippingTool、WinShot、PRTSCキー、各ブラウザのプラグイン、各種ツール・・・。 しかし、どれもクライアント側に何か準備が生じ、意外と面倒で環境にも左右されます。 htmlを見る送り手側にとって結構手間になりますので、html提供側にその機能を組み込みたいですよね。 本投稿の内容 JavaScriptだけで、htmlのスクリーンショットを撮れる「html2canvas」の紹介をします。 最後の実コードを使ってすぐにお手元で試すことが出来ます。
![[JavaScript] JSだけでスクリーンショットを撮ってダウンロードもする方法 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/d39c65309f6d2d94acbd024c4a5efd5dc579ffa6/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCUyMEpTJUUzJTgxJUEwJUUzJTgxJTkxJUUzJTgxJUE3JUUzJTgyJUI5JUUzJTgyJUFGJUUzJTgzJUFBJUUzJTgzJUJDJUUzJTgzJUIzJUUzJTgyJUI3JUUzJTgzJUE3JUUzJTgzJTgzJUUzJTgzJTg4JUUzJTgyJTkyJUU2JTkyJUFFJUUzJTgxJUEzJUUzJTgxJUE2JUUzJTgzJTgwJUUzJTgyJUE2JUUzJTgzJUIzJUUzJTgzJUFEJUUzJTgzJUJDJUUzJTgzJTg5JUUzJTgyJTgyJUUzJTgxJTk5JUUzJTgyJThCJUU2JTk2JUI5JUU2JUIzJTk1JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1hYjVkMmFjMzQzOTcyZTg0YWM1NTFhODU2YmFlZTQ0Yg%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQweW91d2h0JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz02ZmQ0MGUxOWM2ZTQ3YTJhMDMzMDk3MjhhNTNjZWJlZA%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D8b171579df9a82685563b84b0f2c6dc6)
いまどきな JavaScript に入門しよう！『流麗な JavaScript』を読んで（上） - 虎の穴開発室ブログ
こんにちは。虎の穴ラボの古賀です。 9 月の連休で社内の技術書購入を支援する制度を利用して購入した『流麗（ELOQUENT）な JavaScript 第 3 版 現代のプログラミング入門』を読みました。 流麗なJavaScriptの書影 良い本でしたので、本書の前半部分の概要とその中で良かったところや気になったところをご紹介します。 どんな本か 基本情報 オススメする読者層 著者、訳者について 構成について Chapter1〜3：プログラムの基礎的なところから、制御フロー、関数など Chapter1 Chapter2 Chapter3 Chapter4 Chapter5 Chapter6 Chapter7 Chapter8 Chapter10 Chapter11〜22：未読 良かったところ サンプルコードの実行環境や練習問題がある 初心者がつまづきがちなところについて説明がある 気になった
【2024年版】React vs Angular vs Vue.js。JSフレームワーク徹底比較！
【2024年版】React vs Angular vs Vue.js。JSフレームワーク徹底比較！ 投稿日:2021.08.11 最終更新日:2023.12.29 JavaScript実践コーディング無し, 初心者向け, 経験者向け この記事では、現在もっとも人気のある3つのJavaScriptフレームワークを様々な角度から比較・分析し、プログラミングを学習する人に、またフレームワークの導入を検討する企業に向けて、どのようなケースでどのフレームワークを選択すべきかアドバイスをしたい。 現在、3大JSフレームワークの中でもっとも多くのシェアを占めるのはReactだが、Vue 3となり進化したVue.jsや近年のバージョンアップで弱点を克服したAngularも目が離せない。 なお、著者はフロントエンドエンジニアとして２年ほど業務でAngularを使用している。ReactとVue.jsはプライ
Web ページの背景を動く星空にした話 (with react-three-fiber)
TL;DR モチベーション ウェブページの背景に星空を見せたかった。それがちゃんと実際の星空の、リアルタイムの状況を反映していたら面白いよねと思った。 スタート時の状況 主に愛情のこもった手打ち HTML5 と 手打ち CSS でシンプルな Web ページを作っていた https://web.archive.org/web/20210212085818/celestian.io この前にどうやら React が世間では流行ってるらしいということで React と TypeScript を使った小さい 1 ページアプリを作った https://web.archive.org/web/20201202100627/https://celestian.io/ssr/ 今の https://celestian.io/sushi の前身 C# で WPF のデスクトップアプリとか作ってたことがあった
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to slide{move} slider in Selenium WebDriver
GitHub - thevahidal/soul: 🕉 A SQLite REST and realtime server
GitHub - toranoana/tora-viewer
ブックマークレットで外部ファイルを使う方法 | You Look Too Cool
https://musou.s38.xrea.com/JavaScript/%E5%A4%96%E9%83%A8%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%82%80%E3%83%96%E3%83%83%E3%82%AF%E3%83%9E%E3%83%BC%E3%82%AF%E3%83%AC%E3%83%83%E3%83%88.html
GitHub - hatena/Hatena-Textbook-JavaScript: はてな研修用JavaScript教科書
