Minory

<input type=”file”>で 画像 を アップロード する際、特に複数ある場合にファイル名だけでは、正直何を アップロード しようとしているのか確認できません。 そこで、 JavaScript と Web API の FileReader オブジェクトを使用して、画像を Base64 エンコードして サムネイル を表示する方法をご紹介します。 ファイル選択時にサムネイルを表示 やり方としては、ファイルを選択した際に発火する onChange イベントの時に、 FileReader を使って Base64 エンコードし、用意していた サムネイル 用のイメージタグに差し込みます。 HTML #file-image がファイル選択で、 #print_img が表示用のイメージタグです。 <div class="panel panel-default"> <div class="panel-heading">画像</div> <div class="panel-body"> <img src="#" alt="" class="img-print" id="print_img" style="width:100%;"> </div> <div class="panel-footer"> <input type="file" id="file-image" accept="image/*"> </div> </div> JavaScript 以下はピュアな JavaScript で書いていますが、後程 jQuery の プラグイン 等も紹介します。 表示前に API が対応しているか確認を入れてます。 window.onload = function() { (function() { ...

jQuery で HTML 要素 があるかないかを 判定 する場合、様々な方法があり選ぶ理由も人それぞれで、どれを使ったらいいのか迷っている方のために、 書き方 や 処理速度 （ パフォーマンス ）を比較している サイト をまとめましたので、選定する基準として参考になればと思います。 要素の存在を確認する 要素 の 存在 を調べるには、以下の 5つ の 書き方 があります。 5つの書き方 [0] と get(0) 、 size() と length はほぼ一緒です。 ($("selector")[0]) ? true : false; ($("selector").get(0)) ? true : false; ($("selector").size()) ? true : false; ($("selector").length) ? true : false; ($("selector").is()) ? true : false; 処理速度（パフォーマンス） Firefox の Firebug という プラグイン を使って計測した結果が紹介されてます。 コード 速度 document.getElementById("id") != null 0.019ms $("selector")[0] 0.033ms $("selector").get(0) 0.040ms $("selector").size() 0.041ms $("selector").length 0.069ms $("selector").is("*") 0.169ms 引用： [JS][jQuery] 要素の存在を確認する6通りのコードと実行速度 | きほんのき 結果、どれを選ぶべきか？ ぶっちゃけ、 どれでも良い です。 著者の場合は速度重視なので、 $("selector")[0] を使います。 もちろん、 ピュア...

Ajax の 同期通信 について、かなり前から 非推奨 になっていることは皆さんご存知だと思いますが、最近古い コード を発見するまで忘れていた、と言うより意識していなかったので、この機会に過去へ振り返って概要と 対策 を記事にし思います。 同期・非同期とは？ 詳しく説明するほど理解していないので、 プログラマー 目線で簡単に紹介したいと思います。 処理が完了するまで待つか待たないか 非同期通信 例えば、処理の 実行 タイミング を連続して コンソール に出力する以下のような処理があるとします。 $(function(){ console.log("1. 処理開始"); $.ajax({ url: "/path/to/api", type: "get", dataType: "json", success: function(response) { console.log("2. Ajax処理終了"); } }); console.log("3. 処理終了"); }); プログラム は基本的に 上から下 に流れるので、 1、2、3 の 順番 に表示されるはずですが、 非同期通信 の場合は、 Ajax で実行した結果が返ってくる前に次に処理に進みますので、結果はこのようになります。 > 1. 処理開始 > 3. 処理終了 > 2. Ajax処理終了 同期通信 ところが 同期通信 の場合は、 Ajax の処理が完了して結果が返ってくるまで待ちます。 前述のように警告が表示されますが、 async: false を使って同期通信にすることができます。 $(function(){ console.log("1. 処理開始"); $.ajax({ url: "/path/to/api", type: "get", dataType: "json", async: false, success: functio...

jQuery の呼び出す時の 書き方 が何通りかあります。 皆さんも何度か目にしたと思います。 どれも同じように見えますが、実際には 書き方 にって 動作 が違います。 jQueryの書き出し 例えば、以下のようによく見かける 3つ の 書き方 があります。 $(function(){}); $(document).ready(function(){}); $(window).load(function(){}); 他にも、 $() を jQuery() と書くこともありますが、ここでは割愛します。 結論から言うと、 $(function(){}); と $(document).ready(function(){}); は同じ動きをしますが、 $(window).load(function(){}); は 実行 タイミング が違います。 参考にしたサイトがとても詳しく解説されていたので引用しています。 引用： jQueryの読込み「ready」と「load」と「function」の順番について | web-wizardry 実行する順番 ready と load に絞って話を進めます。 基本、プログラムは上から下に実行されますが、ここでは ready が先、 load が後に読み込まれるということを紹介しておきます。 具体的な順番は次のようになります。 ページの読み込みが始まる HTMLの読み込みが終わる $(document).readyが実行 画像など含めすべてのコンテンツの読み込みが終わる $(window).loadが実行 引用： 【jQuery】処理実行タイミング $(document).readyと$(window).load – Qiita 2つの決定的な違いは？ どちらも HTML の読み込みが終わった状態ですが、 画像 など コンテンツ 全体の読み込みが終わった後に実行されるのが load です。 しかし、単純に順番の問題ではなく、適切に使い分けることが重要です。 例えば、 ready の場合は画像が読み込み終わっていないので、 CSS で指定していない大きさが可変の画像に対して、幅や高さを取得しようとするとおかしくなります。 以下、使い分け方の例です。 [ready] htmlを...

HTMLで大量の入力項目があるフォームを作成した際に、ページが縦に長くなり過ぎてしまうと、同じ縦幅で横移動できたらと思うことはないでしょか。 そこで、今回ご紹介するのが「jQuery Steps」というjQueryのプラ […] http://ift.tt/2yZ3EEO

近年、特にスマホなどの回線の細い端末では、高速化することが重要視されるようになり、CDNの存在がが広まって認知されるようになってきています。 私もCDNを利用する機会が増え、WEBサイトの高速化だけでなく開発が少し楽にな […] http://ift.tt/2zkQgYa