複数の文字列データをカンマ区切りにするけど5データごとに改行する
関数化した。
<?php function str_chunk($list, $size) { return implode("\n", array_map(function($l){return implode(",", $l);}, array_chunk($list, $size))); }
…。
読みにくいのは置いといて使い方と結果はこんな感じ。
<?php $data_list = array("a","b","c","d","e","f","g","h","j","i","k","l","m",); echo str_chunk($data_list, 5);
a,b,c,d,e f,g,h,j,i k,l,m
やったね。めでたしめでたし。
念のため、カンマと改行文字は引数に渡せるようにしてみる
<? function str_chunk($list, $size, $del1 = ",", $del2 = "\n") { return implode($del2, array_map(function($l, $d){return implode($d, $l);}, array_chunk($list, $size), array_fill(0, count(array_chunk($list, $size)), $del1))); }
さすがにアホではないだろうか？
動いたけど。
array_mapは便利だけど、array(1,2,3)のそれぞれに2を掛けたい、というときに
array(1,2,3)とarray(2,2,2)とかいう無駄引数を渡さなきゃいけない。
（そのための array_fill(0, count(array_chunk($list, $size)), $del1) というクソ表記）
じゃあもうarray_mapとか投げ捨ててforeachでよくない？
<?php function str_chunk($list, $size, $del1 = ",", $del2 = "\n") { $chunk_list = array_chunk($list, $size); $str_list = array(); foreach ($chunk_list as $k => $v) { $str_list[] = implode($del1, $v); } return implode($del2, $str_list); }
読みやすくなった。
ついでに速度検証
array_map版（区切り文字指定できる方）とforeach版の速度比較。
データはサンプルコードにあるa～mの13文字、
10万回実行を5セットした平均値。
array_map版：296.5834
foreach版：269.9892
単位はミリ秒。
まあ誤差レベルだけどarray_mapの方が遅い。
div要素をきれいに並べるのは難しい（floatを使って配置）
これのfloat版。
今回も以下の3つを並べてみます。
<div class="div1">div要素1</div> <div class="div2">div要素2</div> <div class="div3">div要素3</div>
縦一列に並べる（何もしない）
前回と同じなので省略。そのままでいい。
横一列に並べる
全部に「float: left;」を設定。
<style> .div1{ float: left; } .div2{ float: left; } .div3{ float: left; } </style>
div要素1
div要素2
div要素3
これの問題点は、そのままにしておくとその下の要素にも影響すること。
（重なって表示されるとか、その次の要素も回り込んで表示されるとか）
横並びにした次の要素に「clear: left;」を設定すると回避できます。
↑のサンプルの直後には
<div style="clear: left;"></div>
と空divを入れています。
セル結合したテーブルっぽい感じのやつ（その１）
ということで、今回はdiv2とdiv3に「float: left;」を設定。
displayでなんとかする方式と違って、widthをしっかり入れてやらないと崩れます。
<style> .div1{ width: 10em; } .div2{ width: 5em; float: left; } .div3{ width: 5em; float: left; } </style>
div要素1
div要素2
div要素3
セル結合したテーブルっぽい感じのやつ（その２）
こちらはdiv2とdiv3を親divでくくり、div1と親divを横並びにします。
<div class="div1">div要素1</div> <div class="div_parent"> <div class="div2">div要素2</div> <div class="div3">div要素3</div> </div>
<style> .div_parent{ float: left; } .div1{ height: 10em; float: left; } .div2{ height: 5em; } .div3{ height: 5em; } </style>
div要素1
div要素2
div要素3
div要素をきれいに並べるのは難しい（displayを使って配置）
いろんな方法はあるっぽいけど、とりあえず調べて動かしてみたやつを残しておく。
ブラウザによっては動かないとかあるかも。
displayでなくfloatでやるときはこっち。
以下の3つのdivをいろんな並べ方してみます。
（3つと言いつつ、パターンによって親divが発生したりします）
<div class="div1">div要素1</div> <div class="div2">div要素2</div> <div class="div3">div要素3</div>
長くなるので、colorやらbackgroundやらその他諸々は省略しています。
縦一列に並べる（何もしない）
<style> .div1{ width: 5em; } .div2{ width: 5em; } .div3{ width: 5em; } </style>
とりあえずwidthが揃っていればきれいなんじゃないですかね（なげやり）
div要素1
div要素2
div要素3
横一列に並べる
まず親divを作ります。
<div class="div_parent"> <div class="div1">div要素1</div> <div class="div2">div要素2</div> <div class="div3">div要素3</div> </div>
そして親divに「display: table;」、
横一列したい子divに「display: table-cell;」を追加。
heightは長い要素に合わせて勝手に調節してくれてるっぽい。
<style> .div_parent{ display: table; } .div1{ display: table-cell; } .div2{ display: table-cell; } .div3{ display: table-cell; } </style>
div要素1
div要素2
div要素3
セル結合したテーブルっぽい感じのやつ（その１）
（語彙力がない）
さっきのを応用して…
<div class="div1">div要素1</div> <div class="div_parent"> <div class="div2">div要素2</div> <div class="div3">div要素3</div> </div>
<style> .div_parent{ display: table; } .div1{ width: 10em; } .div2{ width: 5em; display: table-cell; } .div3{ width: 5em; display: table-cell; } </style>
div要素1
div要素2
div要素3
セル結合したテーブルっぽい感じのやつ（その２）
さっきのを反時計回りに90度傾けた感じのやつ。
<div class="div_parent"> <div class="div1">div要素1</div> <div class="div_child"> <div class="div2">div要素2</div> <div class="div3">div要素3</div> </div> </div>
<style> .div_parent{ display: table; } .div_div_child{ display: table-cell; } .div1{ display: table-cell; } .div2{ } .div3{ } </style>
↓なんかめっちゃズレてるな…ローカルだときれいに並んでるんだけども…。（このブログ自体のCSSが影響してるっぽい）
div要素1
div要素2
div要素3
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」に書き換える $("#sample2").text("sample2_update"); // テキストを取得する（↑で書き換えているので「sample2_update」となる） console.log( $("#sample2").text() ); <script>
スタイル
（クラスの追加削除で対応した方がよいと思いますが…）
<span id="sample3">sample3</span> <script> // CSSに「color: #F00;」を追加する $("#sample3").css("color", "#F00"); //$("#sample3").attr("style", "color: #F00;"); // こっちの方法でもOK // style属性を取得する console.log( $("#sample3").attr("style") ); <script>
チェックボックス
<input id="sample4" type="checkbox"> <script> // チェックをONにする（外したい場合はfalseにする） $("#sample4").prop("checked", true); // チェック有無を取得する（true/false） console.log( $("#sample4").prop("checked") ); <script>
ラジオボタン
<input name="sample5" type="radio" value="1"> <input name="sample5" type="radio" value="2"> <script> // valueが1であるものを選択状態にする $("[name=sample5]").val(["1"]); // 選択されているもののvalue値を取得する console.log( $("[name=sample5]").val() ); <script>
セレクトボックス
<select id="sample6"> <option value="0">---</option> <option value="1">aaa</option> </select> <script> // valueが1であるものを選択状態にする $("#sample6").val("1"); // 選択されているもののvalue値を取得する console.log( $("#sample6").val() ); <script>
jQueryでclassをもちゃもちゃする
基本編(add, remove, toggle, has)
追加
$(要素).addClass(class名);
削除
$(要素).removeClass(class名);
あれば削除、なければ追加
$(要素).toggleClass(class名);
あるかどうかを確認
// あればtrue、なければfalse
$(要素).hasClass(class名);
実装サンプル
<style> #testdiv { padding: 5px; } .back-red{ background: #F00; } </style> <div id="testdiv" class=""> <input type="button" onclick="addBackRed();" value="背景を赤くする(add)"> <input type="button" onclick="removeBackRed();" value="背景を赤くするのをやめる(remove)"> <input type="button" onclick="toggleBackRed();" value="背景の色を切り替える(toggle)"> <input type="button" onclick="hasBackRed();" value="背景の色が赤いかどうか確認する(has)"> </div> <script> function addBackRed(){ $("#testdiv").addClass("back-red"); } function removeBackRed(){ $("#testdiv").removeClass("back-red"); } function toggleBackRed(){ $("#testdiv").toggleClass("back-red"); } function hasBackRed(){ if ($("#testdiv").hasClass("back-red")){ alert("赤いです"); } else{ alert("赤くないです"); } } </script>
応用編？
基本的に、addとremoveとtoggleとhasさえあればなんとかなりそうなので、あとはその組み合わせ。
というか厄介なのはhas。
「複数のclassをすべて持っているかどうか確認したい」
「複数のclassのどれかを持っているかどうか確認したい」
「複数のclassがすべて一致する(過不足がない)かどうか確認したい」
という時のための関数を作ったので置いとく。
複数のclassをすべて持っているかどうか確認したい
function hasAllClass(obj, c){ var c_list = c.split(" "); var retflg = true; $(c_list).each(function(i, e){ if (!obj.hasClass(e)){ retflg = false; } }); return retflg; }
使用例
<span id="testspan" class="a b c">にゃーん</span> <script> console.log( hasAllClass($("#testspan"), "a b c") ); // true（完全に一致してるのでOK） console.log( hasAllClass($("#testspan"), "b c a") ); // true（順番が変わってもOK） console.log( hasAllClass($("#testspan"), "a b" ) ); // true（足りないのはOK） console.log( hasAllClass($("#testspan"), "a b d") ); // false（余分なのはNG） </script>
複数のclassのどれかを持っているかどうか確認したい
function hasEitherClass(obj, c){ var c_list = c.split(" "); var retflg = false; $(c_list).each(function(i, e){ if (obj.hasClass(e)){ retflg = true; return false; } }); return retflg; }
使用例
<span id="testspan" class="a b c">にゃーん</span> <script> console.log( hasEitherClass($("#testspan"), "a b c") ); // true（完全に一致してるのでOK） console.log( hasEitherClass($("#testspan"), "b a" ) ); // true（順番違いや足りないのはOK） console.log( hasEitherClass($("#testspan"), "a d" ) ); // true（存在しないものが混じっててもOK） console.log( hasEitherClass($("#testspan"), "d e" ) ); // false（存在しないものしかないのはNG） </script>
複数のclassがすべて一致する(過不足がない)かどうか確認したい
function hasOnlyClass(obj, c){ var cmp_c_list = c.split(" ").sort(); var tag_c_list = obj.attr("class").split(" ").sort(); return cmp_c_list.toString() == tag_c_list.toString(); }
使用例
<span id="testspan" class="a b c">にゃーん</span> <script> console.log( hasOnlyClass($("#testspan"), "a b c") ); // true（完全に一致してるのでOK） console.log( hasOnlyClass($("#testspan"), "b a c") ); // true（順番が変わってもOK！） console.log( hasOnlyClass($("#testspan"), "a b" ) ); // false（足りないのでNG） console.log( hasOnlyClass($("#testspan"), "a b c d") ); // false（余分なのでNG） </script>
FireFoxでJSをワンクリックで動かせるようにする
ブックマークのURL部分にJSを仕込むだけなので、
「普通のブックマークをアドレスバー付近からワンクリックでアクセスできるようにする」でもある。
もっと言えば「ブックマークツールバーを使う」でしかない。
手順1.目的のJSをブックマークに登録する
Ctrl+Bとかでブックマークを開き、
「ブックマークツールバー」を右クリックで「新しいブックマーク」します。
適当な名前を付けて、URLのところにJSを仕込みます。
保存すると、まずは普通のブックマークになりました。
ブックマークを既に作ってある場合は
「ブックマークツールバー」へドラッグ＆ドロップしてください。
以上！
こんな感じになります。
ちなみに
今回はこれを仕込むために設置しました。
君はHTML5の contentEditable 属性を知っているか ｜ Tips Note by TAM
javascript:(function(b){b.contentEditable=!b.isContentEditable;})(document.body);
これで画面仕様書を作るのが楽になったぞ。
ドラッグ＆ドロップで列を入れ替えられるようにする
WEBアプリで、
「テーブルの列をドラッグ＆ドロップで並べ替えられるようにしたい！あと、並べ替えた結果はユーザごとに保存しておけるようにしてほしい！」とか言われて「は？」と思ったんですが
調べてみるとJSライブラリがあったのでそれでさくっと実装。
ここからダウンロードできますし、動くサンプルもあります。
danvk.org » dragtable: Visually reorder all your table columns
実装方法はというと、
ダウンロードしたら適当なところに設置して、
<script src=" ... /dragtable.js"></script>
と読み込んで、テーブルタグにclassを設定するだけ。
<table class="draggable">
以上。
…あっ、結果は保存できるようにするんだった、と思ったのですが
なんとcookieへの保存機能もデフォルトで付いてる。すごい。
tableタグのidを利用して保存し分けているようなので、
同じサイト内で複数テーブルにこれを利用するときは注意、くらいでしょうか。
（別のページであってもidを分けるよう注意するだけ）
あと、サイドバーやヘッダなどを付けている場合、
付け方によってはドラッグ中の表示がその幅だけズレます。
もしそうなったときはコードをちょっと修正します。
(わたしがダウンロードしたときは)239行目くらい：
// 元の記述 //new_elt.style.left = obj_pos.x + "px"; // 修正した記述（左に250pxサイドバーがあって右にずれていたので、x座標から250引いている） new_elt.style.left = (obj_pos.x - 250) + "px";
参考
ドラッグ＆ドロップでテーブルの列を入れ替える - JavaScript dragtable | ホームページ制作のサカエン（墨田区）
ポップアップアラートのかんたん実装
「単純なアラート」「OK/NGのみの二択アラート」「ページ離脱時の警告」の三本立て。
ブラウザ依存なのでデザインもクソもない代わりにめちゃくちゃ簡単実装。
アラートを表示
ただメッセージを出すだけのやつ。
alert("エラーメッセージ");
サンプル：これを押すと出ます。
二択で答えさせる
「ログアウトしますか？」とか「削除してよろしいですか？」みたいなやつですね。
if (confirm("質問：どちらか押してください")){ alert("OKでした"); } else{ alert("NGでした"); }
サンプル：これを押すと出ます。
ページ離脱時に警告を出す
あのウザいやつ。意外と実装は簡単でした。
ただ、↓のように指定したメッセージってあんまり表示されないような…。
FirefoxとChromeではブラウザ固有のメッセージだったので、似たような意味合いのものを一応入れておくか…くらいでよいかも。
window.addEventListener("beforeunload", function(e){ e.returnValue = "ページを閉じていいですか？"; }, false);
サンプルとしてこのページに仕込んであります…が、それだとウザいので、
↓のボタンを押してから離脱しようとすると警告が出るようにしてあります。
※ブラウザによっては動作しないかも？
また、フォーム送信時など、必要ないときにも出てしまったりするので、
そういうときはイベントを解除してやる必要があります。
// イベントの内容を変数に入れておく var stopExitEvent = function(e){ e.returnValue = "ページを閉じていいですか？"; } // イベント設定 window.addEventListener("beforeunload", stopExitEvent, false); // 解除したい場面で呼んでやる function releaseStopExitEvent(){ window.removeEventListener("beforeunload", stopExitEvent, false); }
さっきのボタンを押しちゃった場合でも、こっちを押してから遷移すると警告は出ません。
jQueryならこんな感じ。
var stopExitEvent = function(e){ return "ページを閉じていいですか？"; } $(window).on("beforeunload", stopExitEvent); function releaseStopExitEvent(){ $(window).off("beforeunload", stopExitEvent); }
PHPでファイルを扱うときのいろいろ
ファイルの書き込み読み込みやらCSVやテキストがどうやらというのは長くなるので、
ファイル自体の存在とかコピーや削除とかそういうやつ。
パーミッションの変更
<?php chmod(パス, 0755); // モード変更 chown(パス, "root"); // 所有者変更
PHP: chmod - Manual
PHP: chown - Manual
グループも変えられるけど使わないな。
PHP: chgrp - Manual
PHPでファイルパスを扱うときのいろいろ
主にファイルパスの文字列をもにょもにょわちゃわちゃしたりするときに使うやつ。
きれいなパスをつくってくれるやつ
<?php $path = "./../hoge/"; echo( realpath($path) );
例えば
/var/hoge/ というディレクトリが存在する状態で
/var/www/ から上記コードを実行すると、
いろいろ解決して「 /var/hoge 」を返してくれます。
最後のスラッシュは付かないことに注意。
指定パスがそもそも存在しないときはfalseを返してくれます。
ファイルパスをディレクトリやファイル名や拡張子に分割してくれるやつ
<?php $path = "/var/www/hoge.php"; var_dump( pathinfo($path) );
これを実行すると以下のような表示になります。
ディレクトリパス・ファイル名・拡張子・拡張子なしファイル名がわかります。
どうやら文字列を解析しているだけのようで、ファイルが存在しなくてもやってくれます。
array(4) {
["dirname"]=>
string(8) "/var/www"
["basename"]=>
string(8) "hoge.php"
["extension"]=>
string(3) "php"
["filename"]=>
string(4) "hoge"
}
ドットから始まるファイル名など、特殊なパターンでは意図通りの動きにならないかもしれません。
PHP: pathinfo - Manual
第二引数に以下パラメータのいずれかを渡すことで、特定の要素のみを受け取ることもできます。
- PATHINFO_DIRNAME
- PATHINFO_BASENAME
- PATHINFO_EXTENSION
- PATHINFO_FILENAME
これひとつを覚えておけばとりあえずOKそうですが、
以下のように「dirname」「basename」関数を使うこともできます。
<?php $tmppath = "/var/www/hoge.php"; echo( dirname($tmppath) ); // /var/www echo( basename($tmppath) ); // hoge.php var_dump( basename($tmppath, ".php") ); // hoge
