[B! javascript][html] kenjiro_nのブックマーク

複数の画像を生成してローカルに保存 - Qiita

HTML 要素を画像化した複数のファイルをローカルの専用サーバーに送って保存します。シリーズの記事です。 dom-to-imageを試す html2canvasを試す複数の画像を生成してローカルに保存 ← 今回の記事ライブラリ前回まで同じ目的の2つのライブラリを比較しました。どちらも Firefox では文字サイズが変わってレイアウトが崩れるため、今回は Chrome を前提に進めます。テキストだけを含む要素の画像化ではどちらを使ってもほとんど差がありませんでした。XMLHttpRequest でファイルを送るには Blob に変換する必要があるため、その機能をサポートしている dom-to-image を使用します。 HTML 要素を画像化した Blob の生成は簡単にできます。サーバー以下の記事で作ったファイルを受け取るサーバー (server.ts) を使用します。簡

kenjiro_n 2022/09/27

リンク

Web制作者必見！ VS Codeのおすすめ機能拡張のまとめ、HTMLやCSSやJavaScriptのコードを書く時に便利

Visual Studio Code（以下、VS Code）が素晴らしいエディタである理由の一つは、デベロッパーの生産性を向上させるVS Codeの機能拡張の巨大なライブラリがあることです。その中から、HTMLやCSSやJavaScriptのコードを書く時に便利なVS Codeの機能拡張を紹介します。 My 12 Favorite VSCode Extensions by Katherine Peterson 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 VS Codeとは VS Codeの機能拡張 VS Codeのおすすめ機能拡張 VS Codeとは VS Code(Visual Studio Code)は、Microsoftが提供する統合ツールを備えた強力で軽量なコードエディタです。MITライセンスで、商用でも完全に無料

kenjiro_n 2021/03/04

リンク

JavaScript で現在表示されているブラウザのHTMLソースコードを取得するためのソースコードを教えてたいただけないでしょうか。

kenjiro_n 2017/05/13

そりゃまそうか。

リンク

プルダウンメニューにテキスト入力？

・　JavaScriptで書くとこのようなことでしょうか。 <html> <head> <script type="text/javascript"> function setSel(sel) { if (sel.value == "0") { sel.selecctedIndex = 0; sel.form.date.style.display = 'none'; } else { sel.selecctedIndex = 1; sel.form.date.style.display = 'block'; } } </script> </head> <body> <form id="F1" action="#"> 日付検索: <br /> <select onChange="setSel(this)"> <option value="0"> すべての日付 </option> <optio

kenjiro_n 2016/01/06

リンク

<input type=image>で送信すると、X,Y座標が送信されるので、調べたら闇だった - それマグで！

複数に分割されたログインID入力が・・・タイムズカープラスのログインを、ブラウザが学習しない。 Opera(Presto)だと複数にわかれたIDを学習してたのに、Opera(blink)になってから学習しないので、もう面倒だから拡張機能で対応しようとした。フォームの値をJavaScriptで送信しようとしてハマったのでメモ。スクリーンショット 2014-12-05 14.38.08 form.submit でログイン失敗する HTTPのリクエストヘッダを見ていると input に存在しない値を送信している模様。 tpLoginForm:doLoginForTp.x:132 tpLoginForm:doLoginForTp.y:14 どこから出てきた、この値は。と調べてて見つけた。 input type ="image" はクリック位置を送信する模様知らなかった。X,Y座標を送信する

kenjiro_n 2014/12/11

リンク

innerHTML += ... な書き方について - hogehoge @teramako

DOM操作の最適化によるJavaScriptチューニング（前編） | HTML5Experts.jp はてなブックマーク - DOM操作の最適化によるJavaScriptチューニング（前編） | HTML5Experts.jp はてなブックマークで『後でツッコミする』と書いたとおり、ちょっとツッコミたいと思う。ツッコミ記事のつもりが、自分がツッコミされることとなり、ダメダメな記事です。それでも良ければお読み下さいｗ // サンプル1: パフォーマンスが悪い var ul = document.querySelector('#output'); for ( var i = 0; i < data.length; i++ ) { ul.innerHTML += ‘<li>’ + data[i] + ‘</li>’; } 上記コードはダメなコードであり、理由は、 li要素をループが回るたびに追

kenjiro_n 2013/09/10

リンク

はてなブックマーク数(users)のリンクをつくるブックマークレット - ぼくはまちちゃん！

こんにちはこんにちは！！最近よく、2chまとめサイトとかでも見かけませんか！あの赤いやつ…！これ → でもこのリンク、自分のブログ用につくるのは、ちょっとめんどくさいんだよね…。なので簡単に作れるようにブックマークレットにしてみたよ！ (その１) ↑こんな感じで、普通にはてなブックマーク数のリンクをつくるタイプ javascript:void(function(r){prompt('','<a href="http://b.hatena.ne.jp/entry/'+r.replace(/#/g,'\u002523').replace(/^http(s{0,1}):\/\//,function(a,b){return b?'s/':''})+'"><img src="http://b.hatena.ne.jp/entry/image/'+r.replace(/#/g,'\u00252

kenjiro_n 2010/02/27

これってはてな側でどうにかしてるわけではなかったのね。まあ手段がこうやってあるのは助かるんだが。

リンク

HTML＋JavaScriptでiPhone/Androidアプリを作れるTitanium Mobileとは

HTML＋JavaScriptでiPhone/Androidアプリを作れるTitanium Mobileとは：Web技術でネイティブアプリを作れるTitanium（1）（1/3 ページ） iPad/iPhone VS Androidに戸惑っているWebデザイナ／開発者のために、Web技術でネイティブアプリを作れるオープンソースの開発ツールを紹介し、その利点や使い方を連載で解説します iPad/iPhone VS Androidに戸惑っていませんか？ 2010年1月5日、グーグルがAndroid 2.1を搭載した「Nexus One」を発表しました（参考：Google、Android 2.1搭載の“スーパーフォン”「Nexus One」を発表）。高精細なディスプレイや高速なプロセッサによる快適な動作など、iPhoneのライバルとしての存在感が話題になりました。また1月21日には、NTTドコモ

kenjiro_n 2010/02/19

リンク

jQuery基礎文法最速マスター[to-R]

jQuery基礎文法最速マスターはやっているようなのでまとめてみたいと思います。 jQueryの読み込み Google AJAX Libraries APIで簡単に読み込めます。 <script type="text/javascript" src="http://ajax.google apis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> jQueryの記述場所基本的にはscript要素内の次の箇所に記述していきます。 <script type="text/javascript"> $(function(){ /*ここにjQueryを記述*/ }) </script> 上のコードは$(document).ready()のショートカットなので、次のように書いても大丈夫です。 <script type="text/javascri

kenjiro_n 2010/02/03

リンク

Google Slides: Sign-in

Not your computer? Use a private browsing window to sign in. Learn more

kenjiro_n 2010/02/02

リンク

hCalendar を使って予定を公開しよう！ - IT戦記

はじめにみなさん、こんばんわ！さてさて最近のことですが、 Google の検索結果にイベントや予定へのリンクが表示されるようになりましたね！（まだ、英語版だけですけどね＾＾；） ASCII.jp：Google、リッチスニペットでイベントの日時や場所表示に対応以下のような感じで表示されるみたいです！ウェブページの中に書かれた「予定」や「イベント」などを Google 先生が理解して表示しているんですね！この予定やイベントはどうやって探してるの？ Google は hCalendar という形式のデータを読んで、予定やイベントを探しているようです。というわけで、今日はこの Google が使っている hCalendar というものが「どういうもので」「どうやって活用すればいいか」を実例を交えながら紹介したいと思います。 hCalendar って何？ hCalendar とは「カレン