JavaScriptで時間計算して表示する方法
var total_miliseconds = stop_timestamp.getTime() - start_timestamp.getTime();
var total_hours = Math.floor(total_miliseconds / (1000 * 60 * 60)); // 時間の計算
total_miliseconds = total_miliseconds % (1000 * 60 * 60); // 時間に満たない単位を抽出
var total_minutes = Math.floor(total_miliseconds / (1000 * 60)); // 分の計算
total_miliseconds = total_miliseconds % (1000 * 60); // 分に満たない単位を抽出
var total_seconds = Math.floor(total_miliseconds / 1000); //
var total_time = get_time_with_zero(total_hours) + ':' + get_time_with_zero(total_minutes) + ':' + get_time_with_zero(total_seconds);
MySQLへの日付保存のルール（DATETIME、TIMESTAMP、TIME型）
MySQLの日付型は緩い解釈を行うため、下記のどれでも認識される。
・'YYYY-MM-DD HH:MM:SS' または 'YY-MM-DD HH:MM:SS'
どの句読点文字でも日付部分間の区切り文字として使用可能。
日付部と時間部の区切り文字は半角スペースまたは'T'
例）'2012-12-31 11+30+45'、'2012/12/31'、'2012^12^31'、'2012@12@31'
・'YYYYMMDDHHMMSS' または 'YYMMDDHHMMSS'
・年を2桁で指定する場合は下記で解釈される。
70-99 の範囲の値は 1970-1999 に変換される。
00-69 の範囲の値は 2000-2069 に変換される。
・日付部分の区切り文字を含む文字列として指定される値の場合、10 未満の月または日の値に 2 桁を指定する必要はない。時間も同様。
'2015-6-9' は '2015-06-09' と同じ。
'2015-10-30 1:2:3' は '2015-10-30 01:02:03' と同じ。
https://dev.mysql.com/doc/refman/5.6/ja/date-and-time-literals.html
jQueryの教科書：sort()
■ HTML
<table>
<thead>
<tr>
<th>並び順</th>
<th>名前</th>
<th>住所</th>
<th>電話番号</th>
</tr>
</thead>
<tbody>
@foreach($items as $item)
<tr id="{{ $item->id }}">
<td><span class="oi oi-elevator btn btn-outline-info"></span></td>
<td>{{ $item->name }}</td>
<td>{{ $item->address }}</td>
<td>{{ $item->tel }}</td>
</tr>
@endforeach
</tbody>
</table>
■ HTMLの解説
行を丸ごと
入れ替える場合は、<tr>タグに送信したい値をつける。
■ JavaScript ( jQuery )
$('tbody').sortable({
update: function (event, ui) {
var sort = $('tbody').sortable('toArray').join(',');
$.ajax({
type: "POST",
data: {
sort: sort,
},
cache: false,
timeout: 10000,
})
.done (function (data, textStatus, jqXHR) {
})
.fail (function (data, textStatus, errorThrown) {
})
.always (function (jqXHR, textStatus) {
});
}
});
■ JavaScript ( jQuery )の解説
sortable関数（プラグイン）は、選択した要素をマウスによって並べ替え可能な要素にする。テーブル行に適用したい場合は、tableではなくtbodyに指定。
$('tbody').sortable({
.sortable('toArray')で並び替え要素のid文字列を格納した配列を返す。
■ PHP ( Laravel )
public function update_sort($sort = null)
{
$array_sort = explode(',' $sort);
foreach ($array_sort as $id) {
$params = [
$value,
$id,
];
$query = 'UPDATE tablr SET orderBy = ? WHERE id = ? ';
$value++;
}
}
http://js.studio-kingdom.com/jqueryui/interactions/sortable
今日の学び：Javascript・jQuery時間計算、要素の存在確認
- JSまたはjQueryで要素の存在を確認する方法一覧
http://kihon-no-ki.com/check-existence-element-by-javascript-and-jquery
Javascriptのdocument.getElementById()が一番早いらしい。
- JavaScriptで時間の計算を行う方法
JSってめちゃくちゃ不便。下記は、やるべき処理を分かりやすく書いてくれている。
https://techacademy.jp/magazine/23604
まずは時間をインスタンス化し、getTime()関数で時間に変換して足し算引き算を行うのが良いらしい。
getTime()関数は、1970年1月1日00:00:00UTCから経過したミリ秒を返す。
返ってくるのはミリ秒なので、取得後に時間や分に変換が必要。
var time= new Date();
time.getTime();
jQueryの教科書：autocomplete()
- コード
HTML
<input type="text" name="restaurant_name" >
<input type="hidden" name="restaurant_id">
検索BOXを表示する。
$('input[name="restaurant_name"]').autocomplete({
source: function( req, res ) {
$.ajax({
url: "/api/restaurants/?=" + encodeURIComponent(req.term),
type: "GET",
dataType: "json",
success: function( data ) {
res(data);
}
});
},
autoFocus: true,
delay: 500,
minLength: 1,
select: function (e,ui) {
$('input[name="restaurant_id"]').val(ui.item.id);
}
});
use App\Restaurant;
if ($request->get('q')) {
$restaurants = Restaurant::where('name', 'like', '%' . $request->get('q') . '%')
->orderBy('name', 'asc')
->take(20)
->get();
}
$data= ;
foreach ($restaurants as $restaurant) {
$data = [
'id' => $restaurant->id,
'label' => $restaurant->name,
'value' => $restaurant->name,
];
}
return response()->json($data);
- jQueryの解説
〇autocomplete()メソッドは入力補完ができるメソッド。
引数内にjson形式でオプションを入力していく。
source ： 補完するデータのソース。（入力必須）①データの配列、②データを返すURLの文字列、
③データを返す関数のいずれかを指定する。
①配列
下記のいずれかの形式とする。
(1) ユーザに表示する値とinput要素に挿入する値が同じ場合
[ "Choice1", "Choice2" ]
(2) ユーザに表示する値とinput要素に挿入する値が異なる場合
[ { label: "Choice1", value: "value1" }, ... ]
label：ユーザに表示する値。 value：input要素に入れる値。
②URL文字列
①配列と同様のJSONデータを返すURL。
この場合、ユーザが入力した文字列が下記URLの後にパラメータとして加えられ、
HTTPリクエストが送られる。
③関数 Function(Object request, Function response(Object data))
下記の2つの引数を受け取る関数を使用する。ajaxでリモートから取得も可能。
(1) request
termというプロパティのみ持つオブジェクト。
このrequest.termには、ユーザが入力した文字列が代入されている。
(2) response
ユーザに提供する候補データを引数に持つコールバック関数。
autoFocus： trueを設定すると、メニューが開いた際に最初の項目を選択する。
（初期値：false）
delay ： ユーザが入力開始からリストメニューの検索開始までの遅延時間をミリ秒単位で指定。
リモートデータを使う場合はサーバ負荷を考慮する必要がある。
minLength：リストメニューの検索が実行されるのに必要なユーザーが入力する最低限の文字列数。
select ：メニューから項目を選択した時に行われる処理を指定。引数はselect( event, ui )。
デフォルトでは選択した項目を入力項目と置き換える。
ui.itemでその項目を取得できる。（未選択ならnull）
eventはイベント型。
select以外にもいろんなイベントを指定可能。
〇ajax()は非同期通信ができるメソッド。
別途紹介。
encodeURIComponent(str)：引数の文字列をURLとして使える文字列に変換する関数。
- PHP（Laravel）の解説
最初の処理は飛ばすが、最終的にjsonを返す必要がある。
label ： 候補リストに表示するテキスト
value ： テキストボックスに実際に反映する値
その他 ： 渡したいデータを何でも渡せる。javascript側では「ui.item.その他」で取得可能
Laravel 6.xの認証機能でつまづいた話
認証機能のスカフォールドには下記が必要とのことで、やった。
composer require laravel/ui --dev
php artisan ui vue --auth
が、php artisan ui vue --auth実行後に出た下記指示に従うも失敗・・・。
Vue scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.
Authentication scaffolding generated successfully.
npm install && npm run dev
→ファイル（フォルダ？）を展開(untar)できないとかなんとか・・・。
個別にやってみる。
npm install
なんかいろいろでたけどうまく行ったっぽい。
npm run dev
エラー。
> @ dev （プロジェクトフォルダの絶対パス）
> npm run development
'npm' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
error code ELIFECYCLE
21 error errno 1
22 error @ dev: `npm run development`
22 error Exit status 1
23 error Failed at the @ dev script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
これをやってみる。
https://akamist.com/blog/archives/2827
rm -r node_modules ※-rfオプションはつけられなかった
→多分ok
rm package-lock.json yarn.lock
→エラー。
Remove-Item : 引数 'yarn.lock' を受け入れる位置指定パラメーターが見つかりません。
発生場所 行:1 文字:1
+ rm package-lock.json yarn.lock
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ CategoryInfo : InvalidArgument: (:) [Remove-Item]、ParameterBindingException
+ FullyQualifiedErrorId : PositionalParameterNotFound,Microsoft.PowerShell.Commands.RemoveItemCommand
rm package-lock.json
rm yarn.lock
存在しないためできません。
npm cache clear --force
（プロジェクトフォルダで）npm install
npm run dev
→同じエラー。泣
ファイルを消せてないからクリアできてないのかも。
もうMixでアセットしなくてもよさそうだからやめようかな・・・
しかし、アプリケーションの開発時に必要だというわけではありません。どんなアセットパイプラインツールを使用してもかまいませんし、使わなくても良いのです。
たまたまLaravel 6.x 認証を読み直したら、コード変わってた！！！
composer require laravel/ui "^1.0" --dev
前見たときはバージョン指定なかったのに！
私がインストールしたのは1.2。このせいでコンパイルできなかったのかも？
composer remove laravel/ui --dev
composer clear-cache
composer require laravel/ui "^1.0" --dev
→結局インストールされたのはInstalling laravel/ui (v1.2.0)。
またnpmコマンドが使えなくなっていたので、下記同様の方法で環境変数をトップに移動する。
npm cache clean
→「npm@5に関してはcasheはvalidだと保証されているので、一貫性を調べたいなら
npm cache verifyをやりなさい」と出る。「それでもキャッシュを消したいなら--forceをつけてやりなさい」と。
やってみる。
npm cache verify
npm install
npm run dev
→できた！！！笑
ログインページもちゃんと表示されている。
結局何も変えてない？最初できなかったの何だったんだ・・・
Windows10にVagrantとVirtualBoxでCentOSの仮想環境を構築⑩npm（Node.js）のインストール（はしないで！）
Laravel開発中にnpmを使う機会があったが、そんなコマンドは無い、と出る。
-bash: npm: command not found
１．npmがインストールできているか確認
yum list installed | grep node
→Repodata is over 2 weeks old. Install yum-cron? Or run: yum makecache fast
これが出る。
２．下記を参考にやってみる。
https://mk-55.hatenablog.com/entry/2017/05/06/114622
yum makecache fast
yum clean all
現在利用可能なレポジトリのすべてのキャッシュを削除する
yum makecache fast現在利用可能なレポジトリを確認してキャッシュの一部を更新する
インストールされていない。
３．インストール可能かどうかを調べる
yum list available | grep node
→挙がっているから可能そう。
４．下記を参考に、インストール
https://qiita.com/ousaan/items/881db6ce8cacb2614f5d
sudo yum install nodejs
５．インストール確認
$ node -v
$ npm -v
これでnpm install && npm run devしてみるけど、エラーだらけで失敗。
npm-debug.logを見ろと。
npm update -gしなかったせいかと思い、アンインストール。
[root@localhost vagrant]# npm update npm
[root@localhost vagrant]# npm -v
3.10.10
[root@localhost vagrant]# yum remove nodejs
もう一回インストール
[root@localhost vagrant]# yum install nodejs
[root@localhost vagrant]# node -v
v6.17.1
[root@localhost vagrant]# npm -v
3.10.10
アップデートする
npm update -g
→エラー。
- realize-package-specifier@3.0.3 node_modules/npm/node_modules/realize-package-specifier
/usr/lib
└── (empty)
npm ERR! Linux 3.10.0-1062.9.1.el7.x86_64
npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "update" "-g"
npm ERR! node v6.17.1
npm ERR! npm v3.10.10
npm ERR! path /usr/lib/node_modules/npm/node_modules/fs-write-stream-atomic
npm ERR! code EEXIST
npm ERR! errno -17
npm ERR! syscall mkdir
npm ERR! EEXIST: file already exists, mkdir '/usr/lib/node_modules/npm/node_modules/fs-write-stream-atomic'
npm ERR! File exists: /usr/lib/node_modules/npm/node_modules/fs-write-stream-atomic
npm ERR! Move it away, and try again.
エラーが出た後、npmコマンドすら使えなくなってしまった。
# npm -v
bash: /usr/bin/npm: No such file or directory
npmはインストールできているらしい。
argv は argument vector（引数の配列）
winston.silly('ばかばかしいこと');
winston.debug('かいはつのこと');
winston.verbose('どうでもいいこと');
winston.info('じょうほう');
winston.warn('やばい');
winston.error('すごくやばい');
もう一回アンインストールしてみる。
インストールしてみる。
npm cache clean
https://kaoru2012.blogspot.com/2015/09/tarunpack-untar-error.html
（bower cache cleanはbowerが無くてできず。）
今度はこれだけやってみる。
npm install
npm WARN deprecated popper.js@1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
またエラー。
npm ERR! tar.unpack untar error
Maximum call stack size exceeded
これの繰り返し。
https://qiita.com/asuzuki2008/items/acc963569526ff941619
そもそもゲストOSにnode.jsインストールしちゃいけない？
アンインストールして、ホストOSにインストールすることに。
yum remove nodejs
LaravelのページにあるリンクからWindows版を選んでホストOSにダウンロード。
https://nodejs.org/ja/download/
npm -v
node -v
ちゃんとインストールできた。
※翌日パスが消えていたので、パスを下記同様環境変数リストのトップに移動させて解決。
