読者です 読者をやめる 読者になる 読者になる

Corredor

ウェブ、プログラミングの勉強メモ。

はてなブログのトップページやアーカイブページで記事ごとにシェアリンクを追加する

はてなブログ標準のシェアリンク (ソーシャルパーツとも) は、通常だと各記事のページにしか表示されない。これを、トップページや、月別・カテゴリ別・検索結果などのアーカイブページにおいて、各記事の下にシェアリンクを追加する方法を紹介する。 完成形…

cloneNode() で複製した select 要素の選択状況がリセットされる

セレクトボックスを cloneNode() して、その要素を appendChild() とか replaceChild() とかすると、複製する前に選択していた状態が再現されなかった。 cloneNode() したフォーム部品が、直前に画面上でどのように操作されていたか、という情報は、ブラウザ…

JavaScript・JScript にも with ステートメントってあったんだ…

VBA とか VBScript で時々お世話になる「With 構文」、With ステートメント。JavaScript や JScript においても同様の記法があることをついこの前知った。 分かりやすい使用例 1つの要素に複数のスタイルを指定するようなとき、 document.getElementById("ho…

はてなブログのトップページの表示が重たいのを軽減する

あけましておめでとうございます。2017年も宜しくお願い致します。 それはさておきはてブロのトップページが重たい!! 既に色々なはてブロサイトで記事になっているのでいまさらだが、はてブロの表示が重たい。 しかし既存のテンプレを利用しているだけで、特…

ブラウザのステータスバーに遷移先 URL を表示しないようにできるか

社内で「ブラウザのステータスバーに遷移先 URL を表示しないようにしたい」というバカげた要件が出てきていて解決方法を探っているチームがいて、数日迷っていたので以下の StackOverflow を見せてみた。 参考:javascript - HTML - overRide statusbar lin…

Babel を試す環境に Gulp-Plumber を入れて自動ビルドに備える

前回の記事で、Babel を使って ES2015 の記法で書いたファイルを ES5 の記法に直す環境ができた。 neos21.hatenablog.com 今回はこのトランスパイルを、ファイルが更新されたときに自動的に行うようにしたい。 Browserify とか Watchify とか これらはある一…

Babel にリベンジ!ES2015 ってやつを勉強する環境を作るぜ!

ここんとこ職場では Windows バッチと VBScript をいじる生活で npm とか gulp とか言わせたいんじゃ~というフラストレーションが溜まっていたので、npm とか gulp とかする。 前にいじりかけていたけど放置していた Babel に手を出して、ES2015 とやらを試…

JScript と WSH と JScript.NET と .NET Framework と

Windows で何かスクリプトを作るとなると、MS-DOS 上がりのコマンドプロンプトではイマイチ勝手が悪い時がある。PowerShell を使う手もあるが、実行するために環境設定が必要だったり、独特な言語仕様を勉強するコストが割とかかり、学ぶ気のない人には引き…

JavaScript の即時関数を改めて理解した

参考:自作ライブラリをrequreされてもそうでなくても使えるようにする - Qiita 上記の記事の「大枠」の章がとても分かりやすかった。 即時関数とは その場で実行できる JavaScript の関数の一種。 (function() { // ココにコードを書く alert("Hoge Fuga");…

jQuery と JScript を使って IE11 限定で動作するサーバーレス掲示板を作る

どこかのプログラミング講師が「なんか最近やたらと DB であれこれデータ管理すること多くない?ファイルの読み書きってのも場合によっては有効なことがあるんだけどなぁ」と言ってたのを思い出して、サーバがない環境でもファイルの読み書きができれば、チ…

jQuery の bind() と on()

jQuery もバージョンとともにメソッドが色々変わってるから、リファレンスサイトが更新されていないと何がなんだか経緯が分かりづらいよねぇ~。 bind() は 1.7 系まで。1.7 系からは on()。live() とか delegate() とかも bind() と同じく昔からあったが、…

jQuery.Ajax() の書き方まとめ

すぐ書き方を忘れるので、よく使うかたまりを置いておく。 jQuery 1.4 系までは success・error・complete プロパティを使う。1.8 系以降は非推奨になっている。 $.ajax({ type: "GET", dataType: "html", url: "./content.html", success: function(respons…

jQuery で簡単にアコーディオンっぽい動作

ワケあって最近 jQuery オンリーのウェブページをいじることがあるので、今更の jQuery 基礎。 要素をクリックすると、他の要素がビロビロ~っと出てきたり、閉じたりする、いわゆるアコーディオンメニューみたいな動作を簡単に実装できる、jQuery の slideT…

複数の CSS や JS ファイルを HTML に読み込ませる時、head 要素内をスッキリさせる方法

複数の CSS ファイルや JS ファイルを読み込む必要がある時に、head 要素内がどうしても肥大化してしまう。 <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/global.css"> <link rel="stylesheet" href="css/form.css"> <link rel="stylesheet" href="css/print.css"> <script src="js/const.js"></link></link></link></link>

IE で日本語を含むパスにあるローカル HTML からクッキーを保存すると保存されたクッキーを取得できない件

なんのこっちゃという感じだろうから順に説明する。 対象ブラウザは IE11。クッキーはデフォルトなら「インターネットオプション」から辿れる、C:\Users\(ユーザ名)\AppData\Local\Microsoft\Windows\INetCache\ に保存される。 ローカルにある HTML ファイ…

IE 限定・ローカルにある UTF-8 の HTML ファイルから Shift-JIS 形式のファイルを文字化けさせずに読み込む方法

ローカルに HTML ファイルがある。エンコーディングは UTF-8 を指定している。 これとは別に、同じフォルダ内に Shift-JIS 形式の別の HTML ファイルがある。 この UTF-8 の HTML ファイルから、Shift-JIS のファイルを読み込んで、インラインに展開させたい…

ローカルで jQuery の Ajax を動作させたいが IE11 で動かない時にこうする

ローカルに置いてある HTML ファイルから jQuery を使って、load とか get とか getJSON とかしたかったのだけど、どうもローカルファイルからだと XMLHttpRequest が使えないらしく、動作しなかった。 参考:【解説付き】chromeでXMLHttpRequestをローカル…

IE11 で大量のテキストボックスを一括で非活性にする処理が重すぎる

IE11 は他のブラウザと比べても element.disabled = true; とかする処理が重たい。 ワケあって、テーブルの中に1行20個、150行程度のテキストボックスがあって、これらを一括で非活性にしたり、戻したりしなくてはいけなくなった。何も考えず document.getEl…

Key と Value を入れ替えた Map を取得する方法:Java と JavaScript 編

Key と Value を入れ替えた Map (連想配列) を作る方法を調べた。 Java も JavaScript も、PHP でいうところの array_flip() みたいな標準メソッドは存在しなかったので、簡単なやり方を説明する。 参考:array_flip関数:配列のキーと値を入れ替える | 今日…

URL に付く「#!」って何だったの? ~ Hashbang の復習 ~

Twitter の URL とかで「#!」っていうのが付くのをよく見かけてたけど、最近気が付いたらこういう URL じゃなくなってた。そこで、「#!」コレって何だったの?を調べてみた。 参考:さらなる「#!」URL批判 - karasuyamatenguの日記 参考:AngularJS の $loca…

複雑な条件が絡むデータの持ち方

作りたいもの 区分を選択するプルダウンが2つあって、親区分のプルダウンを選択すると子区分のプルダウン中身が切り替わって、合計15パターンぐらいの区分がある感じ。 一方、画面に5個ぐらい項目があるんだけど、プルダウンで選択した区分に従って、「この…

Java と JavaScript で配列やリストや連想配列 (マップ) に値があるか調べる記法の比較

TL; DR オブジェクトに対して、指定の値が存在すれば true を返してくれるようなメソッド類を調べた。 Object Java JavaScript Array Arrays.AsList(array).contains(value) Array#includes(value)Array#indexOf(value) >= 0 List List#contains(value) - Ke…

JavaScript ライブラリをまとめてみるぜ

乱立する謎の JavaScript ライブラリたちをまとめて、2016年中に数年間の遅れを取り戻そうっていう企画。 既に Node.js はインストールとかしてるし、jQuery 程度なら何となく書いたことあるけど、Babel だ Webpack だ Gulp だ Bower だ Browserify だって単…

iPhone 上で HTML とか CSS とか JS とかをコーディングして動作確認できるアプリ

App Store で言語名で検索すると、大抵の言語は実行環境付きのエディタアプリが存在する。 たとえば Java … JVM Programming Language - Learn & Programs Compiler ※このアプリの作者 Yauheni Shauchenka さんはいろんな言語のエディタを出してる Ruby … Ru…

placeholder 属性でテキストボックスにヒントを書く

HTML5 で、placeholder 属性というものが追加されている。これはフォーム部品の初期値を指定するようなイメージだが、value 属性と違って、任意のテキストが入力されると非表示になる、いわばフォーム部品のヒント文言を書くための属性だ。 <input type="text" placeholder="電話番号を入力してください"> Placeholder と…

jQuery の Ajax を使って再描画なしのリロード・送信 (作りかけ)

作りかけでも勉強過程を記事にしていくことにする。 jQuery の Ajax で非同期通信 基本形はこんな感じ。このスクリプトを動作させる HTML 上に #content の要素を設置しておく。 $.ajax({ type: "GET", url: "/GetContents.do", success: function(data) { $…

Java・JavaScript でコメントアウトするコードを切り替える小技

どこで見たネタだか忘れたけど、ときどき便利なので紹介。 コード A とコード B のどちらかの行をコメントアウトさせて、2つの行の処理を交互に見ながら開発をしたいような場合に、Java の単一行コメントと複数行コメントの書式を利用してその切り替えを簡単…

テキストボックスの value 属性を書き換えても innerHTML には反映されない

ユーザが textarea 要素にテキストを入力し、その後何らかのイベントで textarea 要素の親要素の innerHTML を取得すると、ユーザが入力したテキストがその innerHTML 内に残っている。 しかし、input[type=“text”] なテキストボックスの場合、ユーザがテキ…

任意のサイトで自動ログインするブックマークレットを作る

ブックマークレットとは ブックマークから任意の JavaScript コードを実行して、表示中のページに対して何らかの処理を行ったりできる仕組み。 任意のサイトで自動ログインする? 任意のサイトでブックマークレットを実行すると、ID・パスワード欄に情報を入…