アナログCPU:5108843109

ゲームと音楽とプログラミング(酒と女とロックンロールのノリで)

('ω') < イザユケエンジニャー

JavaScript(jQuery)

Chart.jsを使ってみた

昔使ったことあるはずだけどなんも覚えてねえ~~~公式 あっ英語だ!!!しんどい!! 日本語訳マニュアルはこちら。 Chart.js · Chart.js 日本語ドキュメント 導入 npmでインストール。 インストールしたらこんな感じで読み込む。 <script src="/chart.js/dist/chart.min.js"></script> 別にCDNでもいい。 簡単…

AjaxでPOSTしてるはずがGETになる

jQueryでAjax使ってAPIをPOSTで叩いてるのに、何故かGETになる。 数時間かかってなんとか解決。 before $.ajax({ type: "POST", url: "/api/hoge/add/", data: { id: 1 }, dataType : "text" }) .done(function(data){ ... }) .fail(function(XMLHttpRequest…

ファイルサイズ(バイト)をKB、MB…に変換する関数

タイトル通り。 jQuery前提、IEでも動きます。 function formatSize(byte) { const base = 1024; const unit_list = ['B', 'KB', 'MB', 'GB']; let res = ''; $(unit_list).each(function(exp, unit){ byte_unit = Math.pow(base, exp); if (byte < byte_uni…

ドラッグ&ドロップでファイルをアップロードする(IE対応版)

※jQuery前提です時代に逆行してる感じがすごいですが。以前作ったのはこちら。 ドラッグ&ドロップでファイルをアップロードする(最低限版) - アナログCPU:5108843109 ドラッグ&ドロップでファイルをアップロードする(ちょっとリッチ版) - アナログCPU…

CodeIgniterでSPA実装してみる

SPA is 何 参考:SPA(Single Page Application)の学習、そこに高度なスキルなどいらない - QiitaSingle Page Applicationの略。 一枚のHTMLの中でJS使ってがちゃがちゃ書き換えようぜっていう思想です。FacebookとかTwitterみたいなやつね。 CodeIgniterで実…

要素の表示・非表示を切り替える

個人的に開発作業をするときは、 非表示用のクラスを定義しておいて、そのクラスを追加削除することで対応しています。CSS ※AdminLTEなんかだと、同様の定義が元から含まれています .hidden { display: none; } HTML <div class="hidden"> ここは表示されない </div> <div> ここは表示される </div>…

配列をクエリストリングに変換する

連想配列なオブジェクトは、「$.param(オブジェクト)」で簡単にクエリストリング化できます。すげーお手軽。 // listは配列 var list = { hoge: 123, fuga: 456, piyo: 789, } // listをクエリストリング化 var querystring = $.param(list); // 表示( hoge…

アップロードされた画像をDBに保存する

作る機会があったのでメモ。 フォームのタイプとか、DBではなくファイルとして保存するとか、そういうアレンジは適当に。 手順 ざっくり分けると以下のような感じ。 画像のアップロードフォームを作る アップロードされた画像を加工する(リサイズなど) 加…

背景色に応じた文字色に変える / ランダム色を生成する

まずはサンプルから。 押すたびに背景色がランダムで変わり、文字色が白か黒の適した色に変わります。 ここをクリック function getStrColor (bg){ // 色をRGBに分割 var r = parseInt(bg.substr(1, 2), 16); var g = parseInt(bg.substr(3, 2), 16); var b …

jQueryで属性とか値とかを書き換える&取得するいろいろ

value値 <input id="sample1" type="hidden" value=""> <script> // value値を「test」に書き換える $("#sample1").val("test"); // value値を取得する(↑で書き換えているので「test」となる) console.log( $("#sample1").val() ); <script> テキスト <span id="sample2">sample2</span> <script> // テキストを「sample2_update」に書き換える $("#sample…

jQueryでclassをもちゃもちゃする

基本編(add, remove, toggle, has) 追加 $(要素).addClass(class名); 削除 $(要素).removeClass(class名); あれば削除、なければ追加 $(要素).toggleClass(class名); あるかどうかを確認 // あればtrue、なければfalse $(要素).hasClass(class名); 実装サン…

ドラッグ&ドロップで列を入れ替えられるようにする

WEBアプリで、 「テーブルの列をドラッグ&ドロップで並べ替えられるようにしたい!あと、並べ替えた結果はユーザごとに保存しておけるようにしてほしい!」とか言われて「は?」と思ったんですが 調べてみるとJSライブラリがあったのでそれでさくっと実装。…

ポップアップアラートのかんたん実装

「単純なアラート」「OK/NGのみの二択アラート」「ページ離脱時の警告」の三本立て。 ブラウザ依存なのでデザインもクソもない代わりにめちゃくちゃ簡単実装。 アラートを表示 ただメッセージを出すだけのやつ。 alert("エラーメッセージ"); サンプル:これ…

キーボードで操作をさせる

キーボードで特別に操作をさせたい(もしくはさせたくない)場合があります。 単純にショートカットキーを作りたいとか、 方向キーでモーダルやページ自体を切り替えるとか、 F5キーを押させたくないとか…。そういう場合は押されたキーを判別する仕組みを置…

ドラッグ&ドロップで項目の並べ替えを可能にする

まずはサンプルから。「hoge」「fuga」「piyo」の文字列をドラッグ&ドロップで並べ替えることができます。↓実装サンプルここから ================================ hoge fuga piyo $(function() { $(".sortable").sortable(); }); =======================…

JSとPHPでJSONデータを扱う

WEBアプリを作っていると、JSとPHPの間のデータのやり取りなどでJSON形式を使うことが多いので、 JSONを配列にしたり、配列をJSONにしたりする方法をメモ。 PHPで配列をJSONにする json_encodeを使います。 PHP: json_encode - Manual 変換したい配列以外に…

非同期処理を同期処理っぽく扱う

まず、以下2つの関数を用意しました。 // funcBの戻り値と"funcA"を吐き出す関数 function funcA(){ console.log(funcB()); console.log("funcA"); } // 開始から5秒後に「funcB」とreturnする関数 function funcB(){ setTimeout(function(){ return "funcB"…

連想配列に含まれるIDを使ってユニーク化する関数

を作ったのでメモ。 function uniqAry(ary){ // idの値で昇順ソートする ary.sort(function(a, b){ return a.id > b.id; }); // 重複しているIDがあれば後に出てきた方を削除(undefinedにする) var tmpid = 0; $(ary).each(function(i, e){ if (e.id == tm…

特定のクラスを持ったチェックボックスについて、チェック有無で絞り込む

jQueryのセレクタ便利…。 いや、プレーンJSの書き方知らないので比較できないんですけどこれはたぶん便利なやつ…。必要になるたびググってる気がするのでメモ。↓実装サンプルここから ================================ チェックしているものとしていないも…

ドラッグ&ドロップでファイルをアップロードする(ちょっとリッチ版)

こちらの記事が前提となります。 IEだと動かないはず。対応した版はこちら。 ドラッグ&ドロップでファイルをアップロードする(IE対応版) - アナログCPU:5108843109簡単に書くと 「ファイルのアップロードフォーム」と 「アップロードしたいファイルをド…

ドラッグ&ドロップでファイルをアップロードする(最低限版)

タイトル通りのやつにちょっと苦戦したのでメモ。 つーか業務アプリなんだからドラッグ&ドロップじゃなくてよくね??今回は必要最低限の処理だけ書いた版です。ちょっとリッチ版はこちら。 ドラッグ&ドロップでファイルをアップロードする(ちょっとリッ…

アイテムをドラッグ&ドロップできるようにする

並べ替えとか、ファイルとフォルダの移動とか、そういうものの実装に使えそうなやつ。 意外と簡単に実装できました。jquery使ってます。<HTML> <span class="drag-item" data-iid="1">アイテム1</span> <span class="drag-item" data-iid="2">アイテム2</span> <div class="drop-area" data-aid="1">エリア1</div> <div class="drop-area" data-aid="2">エリア2</div> <JS> setDraggable(); setDroppabl…

文字列をクリップボードにコピーする関数

…を作ったのでメモ。 テキストエリアを作らないとコピーできないようなのでそのようにしています。 function copyText(text){ // コピーする文字列を入れるフォーム var form = document.createElement("textarea"); form.textContent = text; // bodyタグ内…

特定文字~特定文字の間の文字列を切り出す関数

を作ったのでメモ。 function strcut(str, start, end){ var sidx = 0; var eidx = str.length; if (start != ""){ sidx = str.indexOf(start) + start.length; } if (end != ""){ eidx = str.indexOf(end); } if (sidx > eidx){ return ""; } return str.su…

javascriptでゼロパディング

ググると 「ゼロパディングしたい文字列の左側にゼロくっつけておいて右側から切り出す」 って方法しか出てこないんだけどマジか…そういう標準関数とか存在しないのか…しかもその方法そのまんまだと、もし桁が溢れる場合に切り捨てられてしまうので、 「規定…

正規表現にマッチするかどうかを調べる

これも書き方を忘れるのでメモ。基本的に var pattern = new RegExp(正規表現); pattern.test(文字列); // ←ここの戻り値がtrue/false という二段構えになるようです。具体例はこんな感じ。 var str1 = "1234"; var str2 = "123a"; var pattern = new RegExp…

配列のjQuery式foreach

覚えられないのでメモその他配列処理は以前に書いたやつ参照 jsで配列操作いろいろ - アナログCPU:5108843109 基本 var list = [ {"id" : 1, "value" : 100}, {"id" : 2, "value" : 200}, {"id" : 3, "value" : 300}, ]; $(list).each(function(index, elem…

iframeの親子間・子同士の操作いろいろまとめ

苦戦した~~~。以下、こんな感じの構造を想定していきます。<親 parent.html> <div id="header">ヘッダ</div> <iframe id="iframe_1" src="child_1.html"> <iframe id="iframe_2" src="child_2.html"> <子 child_*.html> <div id="child_1_content">子1</div> <div id="child_2_content">子2</div> 子から親を書き換える</iframe>…

iframeのデメリットを無理矢理消化した実装(JS+PHP+Smarty版)

iframeの二大デメリット 「URLが切り替わらない(常にフレームの外側ページのもの)」 「内側ページのURLを直接叩くとフレームが出ない」 を解決すべく とりあえず↑を検討した後、やっぱ微妙だなと思って PHPとSmartyの力も借りて実装したバージョン。仕組み…

iframeのデメリットを無理矢理消化した実装(JS版)

iframeの二大デメリットといえば 「URLが切り替わらない(常にフレームの外側ページのもの)」 「内側ページのURLを直接叩くとフレームが出ない」 なんですが これを解決しつつもiframeしたいと言われたのでちょっと考えました。しかも新規開発ではなく既存…