みみみみみの投稿 - Crieit

home_url、get_template_directory_uri、get_stylesheet_directory_uriの違い【WordPress勉強備忘録】

2021-11-29T16:12:33+09:00

home_url

サイトのURL
例）https://example.com/

get_template_directory_uri

親テーマディレクトリまでのURL
例）https://example.com/wp-content/themes/xxx/

get_stylesheet_directory_uri

子テーマディレクトリまでのURL
例）https://example.com/wp-content/themes/xxx-child/

XSSについてちゃんと調べてみた

2021-05-27T12:11:46+09:00

はじめに

OWASP ZAPで脆弱性診断を行ったところ、クロスサイトスクリプティング(DOMベース)　というのが出てしまいました。
XSS自体はよく聞くので知っていましたが、「DOMベースって何？そもそもXSSのことちゃんと理解してないな？」
と思い調べてみたので、まとめていきます。

XSSとは

Webサイトの脆弱性を突き、攻撃者がそこに悪質なスクリプトを仕掛ける攻撃です。
画面を一時的に改ざんしてログイン情報を抜き取ったり、Cookieを盗み見たりなど、とにかく危険満載って感じです。

XSSには以下の3パターンがあります。

反射型

フォーム入力などを行った次のページで発生するヤツです。
こちらの例を使用させていただきます。

検索画面で、ユーザーが「HTML5」と入力すると、
http://example.jp/search?q=HTML5というURLで検索結果が表示されるとします。

検索結果画面では、よく「◯◯を検索しました。◯件見つかりました。」みたいなのがありますよね。
その部分がHTMLで以下の様になっているとします。

語句「HTML5」を検索しました。20件の文書が見つかりました。

ユーザーが入力した「HTML5」をそのままspanで囲んで出力している感じですね。

これにもし、検索キーワードとしてなんてものを入力された場合

語句「」を検索しました。20件の文書が見つかりました。

となってしまいます。

本来文字列として表示されるべき部分が

と入力して投稿→DBに保存されたとします。

他のユーザーが掲示板を開くとこの攻撃者からの投稿が表示され、
JavaScriptが勝手に実行されてしまい、XSSが発生します。

DOMベース型　

JavaScriptがDOMを構築するときに発生するヤツです。
今回起きてたのはコレですね。
こちらの例を使用させていただきます。

以下のようなコードがあるとします。

div = document.getElementById("info");
div.innerHTML = location.hash.substring(1);

location.hash.substring(1)でURLのハッシュ部分(#以降)を取得し、
それをid="info"のdiv要素に入れることで、画面に表示させている処理です。

URLがhttp://example.jp/#title1みたいなものなら問題ないですが、
http://example.jp/# のようなURLを開いた場合、
　がHTML内に展開され、JavaScriptが実行されることでXSSが発生します。

困ったことに全く心当たりがない

今回起きた（診断された）DOMベースのXSSが何なのかはわかったけど、
自分のコードにおいて心当たりが全く無い！
フロントエンドはVueで作成しているので、VueにおけるXSSについても調べる必要がありそうだなと。
OWSP ZAPの誤検知の可能性もあるので、万が一明確な原因が見つかったら、またまとめておこうかなと思います。

参考

OWASP ZAPで脆弱性診断を行う際の、予備知識的なもの─ローカルプロキシの設定編

2021-05-25T16:54:10+09:00

はじめに

OWASP ZAPを使って脆弱性診断を行う際、色んなサイトを参考にしながら進めていますが
よくわからない箇所もとりあえず「そういうものなんだなー」と深く考えず、書いてあるとおりに行っていました。

今回はそこを「それってなんズラなんズラ？」とツッコみつつ、
なんとなく、ざっくり、ゆる～く　見ていこうかなと思います。

なお、手順はこちらに沿って進めていきますが、
触れるのは冒頭の「ローカルプロキシの設定」のみとなっています。

プロキシ

手順によるとまず最初に、

OWASP ZAPをプロキシとして使用することで診断対象サイトへリクエストを送信し、そのレスポンスから脆弱性を診断します。

とありますね。
私はまだ赤ちゃんなのでそもそもプロキシってなんやねんレベルです。プロ棋士？？ひふみん？？？？

プロキシはブラウザとサーバの仲介人的ポジション

まずはわわわIT用語辞典さんを読んでみます。
マジいつもお世話になってます。

簡単説明をそのまま引用すると、

ホームページを見るときに使うソフト（Webブラウザ）の身代わりになってホームページにアクセスしてくれるコンピュータ（サーバ）のこと

らしい。ほほーう。

以下、書いてあったことほぼそのままですが、

プロ棋士プロキシが居ないとき

ってなるところが、

プロキシが居るとき

こんな感じに間に挟まってくれる。

プロキシの何が良いの？

アクセス元を隠せる、レスポンスが早い、などありますが、今回の脆弱性診断に関係ありそうなのは
サーバに送ったリクエスト内容を見たり変更したりすることが出来る　ということですかね。
（厳密には使わなくても出来るけど、より簡単に出来るってことかも）

なるほど。で、つまりは？

「OWASP ZAPをプロキシとして使用して、ブラウザさんとサーバくんの間に入ってもらおう。
そして、プロキシちゃんを使ってリクエスト内容を変更してPOSTしまくることで、脆弱性を見つけていこうZE!」

…めっちゃざっくりいうと、こういうことなんだろうなと、ひとまず理解。

次いってみよーーう

よおし！プロキシちゃんのことが少しわかったことだし、設定に進むぞ！
手順によると…

Address欄には「localhost」、ポート欄には任意のポート番号(他と競合しない番号)を入力

localhost(127.0.0.1)

脆弱性診断とか関係なくよく見ますね。XAMPPでローカルサーバ立ち上げたときとか。
けど説明しろって言われたら何なのかはわからないので調べてみます。

ズバリ、localhost＝自分のPCのこと　です！

ってよく色んなところに書いてあるけどいまいちピンとこない。
まずはIPアドレスについて理解していく必要がある！
頭が痛くなってきたぞぅ。

IPアドレス

「インターネット世界での住所」みたいによく説明されてますね。
前提として、すべてのwebサイトにはIPアドレスを持っています。
住所不定のホームレスwebサイトなんてものは存在しないわけですね。

じゃあURLってなんなのさ

脆弱性診断をやろうとしてる人なら既にわかってるとは思いますけども、
webサイトってIPアドレスで開くこともできちゃいますよね。
まさに開発環境なんかは、192.168.0.15みたいにIPアドレスを入力して開いていたりするわけで。

つっても普段はIPアドレスじゃなくてhttps://www.google.comっていうURLでwebページを開きますよね。
google.comの部分が所謂ドメインなのですが、このドメインはIPアドレスと一対一の関係にあります。

IPアドレス→コンピュータさん向けのもの
ドメイン　→人間様向けのもの

と言った感じです。

ちなみにwwwの部分はホスト名というらしい。

グローバルIPとプライベートIP

IPアドレスには、さらにグローバルIPとプライベートIPの2つが存在するらしい。
更に頭が痛くなってきた！

グローバルIP

全世界のネットワーク上における住所みたいなもので、重複しないIPアドレスのことです。
自分の家の住所とすぐお隣の人の住所が全く同じ、みたいなわけのわからんことになったら困りますよね。
UberもAmazonも届かなそう。そんなイメージ。

世の中に公開されているwebページのIPアドレスは、全部このグローバルIPです。
そりゃそうですよね、Googleと同じIPが複数あったらカオスなことになります。

プライベートIP

組織内のネットワーク(ローカルネットワーク？)内で使用できる、自分で勝手に決めてOKなIPアドレスのこと。
同じネットワークの中にいる人達だけに意味が伝わる、仲間内のみに通用する住所的な感じだと思います。

マンションAに住んでいる人に、「これ1階のエントランスホールの管理人に渡しといて～」というのは通じますが、
そのへんにいたオッさんに同じことを言っても「は？」って言われますよね。1階のエントランスホールって、どこの1階やねんと。

そもそも、「1階のエントランスホール」っていうのはマンションAだけにあるものではないですよね。
マンションBにもCにもあるかもしれません。

でもマンションA内に「1階のエントランスホール」が複数あったらちょっと変ですよね。
（エントランスが2つある構造とか、そういう話じゃないよ）
マンションAの中に「202号室の佐藤さん」が複数あったらおかしい、の方がわかりやすいか。

そんな感じの理屈で、プライベートIPは
同じネットワーク内で重複して使うことは出来ないけど、世界規模で見たら重複はOKです。

じゃあlocalhost(127.0.0.1)はどっち？

もうおわかりかと思いますが、プライベートIPです。
プライベートIPなので、皆同じ127.0.0.1っていうIPアドレスで自分のPCにアクセスすることが出来るというわけです。

localhostにアクセスしてみる

試しに、何もしないままでブラウザからlocalhostにアクセスしてみます。（URL部分にlocalhostって入れる）

当然こうなります。

localhostというのは自分のPCを指している、ただそれだけであって、
何もしていないのであればwebサーバでもDBサーバでもなんでも無いんですよね。

ここで、Apacheを起動した状態でlocalhostにアクセスしてみます。

XAMPPを入れてるので、お馴染みのこの初期画面が出てきました。
（なので厳密には、「localhost/dashboard/」になるんですけど）

Apacheを起動したことで、PCさんはwebサーバとして機能し始めました。
もちろん、DBサーバとして機能させることも可能なわけです。

なるほど。で、つまりは？

ってことは、localhost(=自分のPC)を、プロキシサーバとして機能させることも出来るよね！！
ということで、手順の

Address欄には「localhost」

は、「自分のPCをプロキシサーバちゃんとして間に挟んであげようね！」
みたいな意味かな～？と。

ふぅ～ここまで長かったぜ。

ポート番号

お次は

ポート欄には任意のポート番号(他と競合しない番号)を入力

この部分です。
こう考えると、自分何も知らねーんだな！
仕方ない、赤ちゃんだもの。
頑張って見ていきます。

まずポートとは

ネットワークからコンピュータ(サーバ)にデータを送受信するときのドアみたいなものです。

インターネットさんは80番のドア、FTPは20番のドアですよー　みたいに
データによって既にどのドアを決まっているものもあれば、
ここからここまでは自由に使っていいですよ～～　なドアもあります。

80番、とか20番、っていう番号がポート番号です。

ウェルノウンポート

ポート番号が0~1023までのポートのことで、基本誰が通るのか決められています。

登録済みポート

ポート番号が1024～49512までのポートのことで、
ウェルノウン程ではないけど、よく使うアプリなどに割り振られます。

ダイナミック/プライベートポート

ポート番号が49513～65535までのポートのことで、基本的にこの間のポートが自由に使えるポートです。

なので、

ポート欄には任意のポート番号(他と競合しない番号)を入力

ここには49513～65535のうち好きな番号を指定してあげればOKです。

一旦終わり

モロ一番最初のところだけでも、だいぶ体力使いました…。
正直、ここの範囲は知らなくても脆弱性診断はできちゃいますけど、知ってて損する知識なんか無いよねってことでまとめてみました。
まだ深く理解は出来てないので、ざっくりゆるーく、ですけど。
診断に関係なく、この業界にいる以上基礎中の基礎知識だったと思うので、これを期に勉強出来てよかったなと思います。

余力があれば、次は脆弱性診断で実際に行われている攻撃なども調べられたらいいな！

参考

php(Laravel)でエクセルのインポート機能付けるときに試したもの

2021-05-21T16:23:01+09:00

渡されたデータがエクセルだった

「ほいっじゃあこれ取り込んでね」
と渡されたのは、2~3万行のデータ（エクセル形式）だった。
…えー！CSVじゃないんですかー！？！？CSVはやったことあるけど、エクセルは知らーん！！

ということで、3つほどライブラリを試してようやく機能実装が出来たので、その時のメモです

Laravel Excel

URL：https://laravel-excel.com

これはLaravelのライブラリ（パッケージ？）ですね。
後に紹介するPhpSpreadsheetを基に作られております。
エクセルだけでなくcsvも扱えます。

使い方も特別難しいわけでもなく、
公式ドキュメントを落ち着いて読んでいけば大抵は問題ないはずです。

…がしかぁし！

データ数が少なめのテストデータでは問題ありませんでしたが、
いざ実際の2~3万件データで試したところメモリ不足で死に至りました。（チーン）

php-fpmの設定弄ってみたり、
toArrayがいけないのか？と思いonRowで1行ずつinsertしてみたり…。
かなり色々試行錯誤してみましたが解決には至らず、ライブラリ使用自体を断念しました…。

（もし解決法ご存知の方がいらっしゃいましたら、そっとご教示いただければ幸いに存じます）

PhpSpreadsheet

URL：https://phpspreadsheet.readthedocs.io/en/latest/

くそう、ならば元であるコイツで試してみるか！
てな感じで、半ヤケクソでやってみました。
なお、phpExcelというライブラリの後継版らしいです。

結論、メモリ不足も解決せず、なんなら処理時間も増えて、解決には至りませんでした…。
使用感としては、シンプルで使いやすいなーとは思いました。
また、laravel excelより使用率が高いので、参考にできる記事も多い（日本語記事も多い）という点は良かったです。

Spout

URL： https://opensource.box.com/spout/

救　世　主

メモリ不足問題はこれで解決しました！！！
代わりにCPU使用率がギュイーンと上がりますが。

ただこれ、マイナーなのかわかりませんがググってもほぼ出てきません。
出てきたとしても全部英語です。google翻訳がある世界に生まれてよかった。

基本公式ドキュメントを頼りにやるしか無いので、赤ちゃんエンジニアにはちょっと厳しかったです…。
やりたいことが至ってシンプルだったのでなんとかなりましたが。

気力があれば、使い方のメモも別で書こうかと思います。来世までにはきっと。

なお後日

えらいひと「ちょっとフォーマット変えたので、再度送るで！これで取り込んでくれや！　つCSVファイル」
ワイ「いやCSVで出力できんのかい！！！！！！！！！！！」

～完～

ある日突然ロードアベレージが200を超えた

2021-05-14T12:59:20+09:00

※サーバの知識が乏しい為、誤った情報を載せるわけにもいかないので
具体的な解決方までは記載してません。ポエム感覚です。

何が起きた

ある日、自分が開発した社内チャットツールが504エラーで開けなくなりました。
クッソ時間をかけてターミナルを開き、topで確認したところload average：86　となっていて爆笑しました。（笑っている場合ではない）
その後、色々対処している最終に230くらいになりました。写真撮っておけば良かったな(白目)。

どうしてそうなった

他のツールから、かなりの数のメッセージが送られてきたのが原因でした。
と言っても1分に100件～200件程度なので、めちゃくちゃ多いのか？と言われれば微妙なところです。

とりあえず復活させるぞ

実は以前にも同じことが起きたのですが、そのときはまだサーバの知識が今より乏しく、
とりあえず早く復旧させなきゃという気持ちが先走ってrebootしてしまいました。
もちろんこれで直ることもありますが、下手するとrebootしてから1時間くらい立ち上がらないなんてこともあるので(経験者は語る)、
むやみにやらないべきだと思います。

何が原因か突き止める

めちゃくちゃ重いときはターミナルを開くのも一苦労であることが多いですが、めげずに待ちましょう。
で、私はとりあえずtopでロードアベレージやメモリ、CPUを確認します。
入っているなら、htopの方が見やすいかも。

その後はひらすらググります！！！
「ロードアベレージ　高い」「メモリ　解放されない」とか。
もっと根本的に「504エラー　原因　突き止める」とか。

あと、アプリ自体のlogも確認します。
今回の場合は、ログファイルが朝の時点で昨日より3倍のサイズだったり、
メッセージ送信のAPIがめちゃくちゃ呼ばれていた形跡があったので、予測通りこれ原因だな…と確信しました。

原因の元をどうにかする

とりあえずApacheの再起動を試みましたが、タイムアウトでエラーになり出来ませんでした。
これはkillするしかないな…と思い、以下のように対処。

# Apacheのプロセスを確認
ps agx | grep httpd

# とりあえず一番上に出てきたプロセスをkill
sudo kill 34568 (※PID)

# ロードアベレージが落ち着いてきたらApache再起動
sudo systemctl restart httpd

この処理が終わるまでも時間かかりますが、
killされてからは徐々にロードアベレージも減っていきました。
Apacheを再起動し、なんとか復旧しました。

おわり

根本的に、
「100件程度のメッセージで落ちないような設計にしろよ！」とか
「そもそも1分に100件送ってくんなよ！！」とか
その辺りの問題はまだありますが、それはまた別の話として。

以前よりはサーバダウンにも冷静に対処出来たんじゃないかなと思います。
今回は原因がわかっていたので良かったですが、また別の要因で再発したときにも慌てず対処したいなと思う所存でございます。

【シリアル値】エクセルファイルで、日付の項目に謎の数値が入っていて困惑した時

2020-12-20T18:34:18+09:00

日付の項目が数値になってる

なにこれ？？？

シリアル値っていうらしいよ

1900年1月1日を「1」として、そこからの経過日数を数値化したものをシリアル値というらしい。

phpで日付型に変換

エクセルをインポートしてDBに登録する際には日付で登録したいので、
シリアル値から日付型に変換する。

$date = date('Y年m月d日', ($serial - 25569) * 60 * 60 * 24);

参考：https://qiita.com/shy_azusa/items/c78bb79c3dc6ac0585bd

laravel6.xでbootstrapを使う

2020-12-20T17:53:51+09:00

laravel6.x以降にbootstrapを入れる

laravel6.xからは、bootstrapがデフォルトで入っていないので、自分で入れてあげる必要があるらしい。
調べたところ、以下のコマンドを実行すれば良さそう。

composer require laravel/ui
php artisan ui bootstrap
npm install && npm run dev

これでうまく行けばおしまい。

しかし現実は甘くなかった

~~案の定~~composer requireの時点でエラーになった。

Using version ^2.0 for laravel/ui
./composer.json has been updated
Loading composer repositories with package information
Updating dependencies (including require-dev)
Your requirements could not be resolved to an installable set of packages.

Problem 1
    - Conclusion: remove laravel/framework v6.18.1
    - Conclusion: don't install laravel/framework v6.18.1
    - laravel/ui 2.x-dev requires illuminate/filesystem ^7.0 -> satisfiable by illuminate/filesystem[7.x-dev, v7.0.0, v7.0.1, v7.0.2, v7.0.3, v7.0.4, v7.0.5, v7.0.6, v7.0.7, v7.0.8, v7.1.0, v7.1.1]

# 以下略

要は、「 laravel/ui2.0はLaravel7じゃないといけないけど、君の環境はそれを満たしてないよ！」とのこと。

https://packagist.org/packages/laravel/ui
↑によると、それぞれの対応バージョンは以下のようになっている。

Version	Laravel Version
1.x	5.8, 6.x
2.x	7.x
3.x	8.x

つまり、laravel6.xで使うには2.xではなくて1.xを入れないといけない。
というわけで、以下のようにバージョンを明記してインストールし直し。

composer require laravel/ui:1.3.0

次に、/var/www/html/vendor/laravel/ui/src/Presets/Bootstrap.phpの中のパスを以下の様に変更

copy(__DIR__.'/bootstrap-stubs/_variables.scss', resource_path('assets/sass/_variables.scss'));
copy(__DIR__.'/bootstrap-stubs/app.scss', resource_path('assets/sass/app.scss'));

copy(__DIR__.'/bootstrap-stubs/bootstrap.js', resource_path('assets/js/bootstrap.js'));

これで再度

php artisan ui bootstrap
npm install && npm run dev

これで入った。

Vue.Draggable　をスマホでも使う時のアレコレ

2020-11-18T11:41:16+09:00

Vueでドラッグ＆ドロップの何かしらを作ろうとした時に便利なVue.Draggableですが、
これまたスマホ対応している最中に困ったことがあったのでメモ。

困ったこと１：スクロールしようとするとドラッグ＆ドロップされてしまう

特にオプションなどの設定をせずデフォルトのままやると、リスト内の要素全体がドラッグ＆ドロップできてしまうので、
スマホだとうまくスクロールができない。


 
   
     {{item.name}}

new Vue({
  el: "#app",
  components: {
   'draggable': draggable,
  },
  data: {
    items:[]
  },

  created() {
    for (var i = 0; i <= 30; i++) {
        this.items.push({id: i+1, name: `リスト${i + 1}`})
    }
  }
});

困ったこと２：要素の中のクリックイベントが動かない（Androidのみ？）

例えば、

のように、削除ボタンをリストの中に入れて、
ボタンクリックで削除処理が行われる…みたいなときに、
ボタンをクリックしても何も起こらない。
※自分はAndroidのみで確認。PC、iosは動く

解決策

２つとも同じ方法で対処。

draggableタグにoptionsを設定して、
ドラッグ＆ドロップができる領域を指定してあげる。

まずは以下のようにドラッグ＆ドロップ可能にする要素を追加。
任意の名前でclassを付けておく。　今回はclass="handle"とした。


 
   
     
     ●
     {{item.name}}

この●をクリックしているときだけドラッグ＆ドロップ出来るようにする。

draggableのoptionsを以下のように設定

...

これで、.handle要素をクリックorタップしたときのみドラッグ＆ドロップが可能になり、
スマホでのスクロールやボタンのクリックも問題なく動くようになった。

いちおうここまでのサンプルを置いておきます。
https://jsfiddle.net/mimimimimi/vx1ksm8c/8/

参考

Vue.Draggableでドラッグ領域を指定する方法
 The click event bound to the drag element using vue-draggable is invalid on Android phones

どうでもいい余談

解決した日に気づいたけど、Youtubeのプレイリストの中身の順番を変える時とかも、同じ様にアイコンをタップしないとドラッグできないようになっていた！
こういう普段何気なく使っているところにヒントが隠されてたりするんだな～と思ったり…。

【Apache Laravel Vue.js Vuetify】webアプリをスマホに対応させるためにやったこと

2020-11-10T18:19:54+09:00

Apache＋Laravel＋Vue.js＋Vuetify　で作った社内ツールをスマホ対応したときに行った作業内容メモ。
~~ほんとにiosが嫌いになりそうだった~~

対応ブラウザは、

chrome(PC, Android, ios)
safari(ios)

まずはiPhone、Androidのデバッグが出来るように準備する

それぞれの端末を持っていれば、PCに繋いでデバッグができる！なんて素晴らしい。
iosはiPhone以外にもiPad、iPod touch　でも問題なし。
それぞれ以下を参考に。

Android:https://qiita.com/hojishi/items/12b726f8b02ef3d713e4
ios：https://webkatu.com/archives/ios-safari-debug-on-windows/

Polyfillを入れる

Vuetifyの公式ドキュメントに則って入れればOK。

npm install babel-polyfill --save
npm install @babel/preset-env --save

インストール後、
import Vue from 'vue' とか
import vuetify from '@/plugins/vuetify
を書いているファイルに、
import 'babel-polyfill' を追加。
（自分の場合は /resources/assets/js/app.js）

ルートディレクトリの .babelrcに、

 {
  "presets": ["@babel/preset-env"]
}

対応していないjsを地道に直す

特に問題なければ、↑を行えば画面は表示されるはず…と思っていたのだが、画面が真っ白だった。

エラーを調べると、どうやら正規表現で後読みを使っているのが原因みたいだったので、該当箇所を修正。
（safariは後読みに対応していない）

※書いている最中に気づいたけど、それってつまりうまくPolyfillが使えていなかったのでは…？？

「Error: Network Error　POST 応答を解析できません」を直す

iosのみ起きる謎現象。これに2日かかった…
自分は、Apacheの設定を変更で直った。


    AllowOverride All
    # Allow open access:
    Header unset Upgrade       ←これを追加

とりあえずここまでで画面が開けるようになりました。
以降は細かい部分です。

スクロールを入れたくないのにスマホだと入ってしまう

webアプリ全体にスクロールを入れたくない場合、bodyにheight:100%とか入れればPCでは大丈夫だったりしたんですが、
スマホだとどうにも謎のスクロールが入ってしまうので、以下のように対応。

…

※jsでhtmlのところにstyleを指定する方法がわからなかったのでid属性を無理やり、、、

const windowHeight = window.innerHeight;   // windowの高さを取得

// の高さを、windowsの高さいっぱいに設定
document.getElementById("content").style.height = windowHeight + "px";
// bodyはheight:100%
document.body.style.height = "100%";

// スクロールバー非表示
// スマホのときはbodyに、PCのときはhtmlにかけないと反映されないっぽいので分ける

const isSP = /iPhone|iPod|iPad|Android/i.test(navigator.userAgent);     
if (isSP) {             
    document.body.style.overflowY = "hidden";
} else {
    document.getElementById("content").style.overflowY = "hidden";
}

…無理矢理感半端ないけど、ひとまずこれでPCでもスマホでも画面いっぱいでコンテンツが収まるようになった。

iosだけ、キーボードのenterでボタンクリック判定されてしまう

PCやAndroidでは大丈夫なのに、iosだけ起きる謎現象。
改行する度にボタンが押されて送信されるという、、、、

※単純にv-formのsubmitイベントが発火してしまっている場合は、こちらを参考に。

根本的な原因はわからなかったため、
入力文字が空欄・改行のみの場合は、ボタンクリックで呼ばれる処理が走らないようにした。


送信


data: () => ({
    inputText: "",      
}),

computed: {
    /**
     * 空文字判定
     */
    isTextEmpty() {
         return !this.inputText || !this.inputText.match(/\S/g);
    },
},

methods: {
    submit() {
        if (this.isTextEmpty) return;

        // 以下送信処理
    }
}

iosだけファイルアップロードができない

ファイル選択のダイアルボックスを開く→ファイルを選択→アップロード
という流れのとき、iosだけダイアルボックスが開かないという謎現象。
エラーも出ない…

調べてみたら、どうやらinput.onchangeが動いていないようだった。

function uplod() {
    return new Promise(resolve => {
        const input = document.createElement('input');
        input.type = "file";
        input.multiple = false;
        input.accept = "image/gif,image/jpeg,image/png";
        input.onchange = event => {
            var file = event.target.files[0];
                resolve(file);                    
            };
            input.click();
        });
}

ios以外は↑でも動いたが、どうやらiosではちゃんと要素をDOMに追加してあげないといけないらしい。
参考：https://stackoverflow.com/questions/47664777/javascript-file-input-onchange-not-working-ios-safari-only

というわけで、以下のように修正

function uplod() {
    return new Promise(resolve => {
        const input = document.createElement('input');
        input.type = 'file';
        input.multiple = false;
        input.accept = "image/gif,image/jpeg,image/png";
        document.body.appendChild(input);     // ←DOMに追加
        input.onchange = event => {
            var file = event.target.files[0];
            document.body.removeChild(input);     // ←DOMから削除
            resolve(file);
        };
        input.click();
    });
}

iosだけ画像が縦に伸びる時

これは別記事にもメモしてあるが、
display:flex;を指定している箇所に、align-items: flex-start;を追記するだけ。
参考：https://nichiyogogo.com/image-looks-stretched/

iosだけ、heightを指定した要素内の「overflow-y: visible scroll;」が効かない

これもiosの一部で起きる現象。
safariのバージョンの問題かもしれない。

ますはここを参考に修正。
自分はこのときにも頑なにoverflow-y: visible scrolと書き続けていたら直らず、
素直に overflow-y:auto; にするだけで解決…。

おわり

ほとんどios対応ですね。
Androidはグリッドをちゃんと設定して、表示崩れしないようにだけしてあげれば殆ど動きました。
マジでiosとsafariが嫌いになりそうだった…。

【js】連想配列からインデックスを取得

2020-11-10T17:49:58+09:00

よく忘れるのでメモ。

参考元：https://qiita.com/Test_test/items/7d532f445f2980e896d0

const obj = [
    { num: 0, name: 'AAA', age: '60'},
    { num: 1, name: 'BBB', age: '20'},
    { num: 2, name: 'CCC', age: '40'},
    { num: 3, name: 'DDD', age: '50'},
];
obj.findIndex(({name}) => name === 'DDD'); // 3
obj.findIndex(({age}) => age === '20');    // 1

findindexは、インデックスが見つからなかった場合は-1を返すため、
条件分岐をする時は注意。

var index = obj.findIndex(({age}) => age === '22'); 
if (index === -1) {
    console.log("見つかりませんでした。");
} else {
    console.log(index);
}

iosだけ画像が縦に伸びる時

2020-10-19T18:10:44+09:00

「display:flex;」を指定している箇所に、「align-items: flex-start;」を追記するだけ!!

https://nichiyogogo.com/image-looks-stretched/

【Vuex】別モジュールのステート、メソッド呼び出し

2020-10-19T18:06:59+09:00

const moduleA = {
  // ...
  actions: {
    testA(context) {
      // state
      console.log(context.rootState.moduleName.stateName)

      // mutation
      context.commit("moduleName/mutationName", "引数", {root: true});

      // action
      context.dispatch("moduleName/actionName", "引数",  {root: true});
  }
}

【Laravel+Pusher】The data content of this event exceeds the allowed maximum　のエラーが出た時

2020-10-19T18:05:31+09:00

https://pusher.com/docs/channels/server_api/http-api#publishing-events

↑にも書いてあるが、
The data content (POST body) of events must be smaller than 10kB.
(イベントのデータコンテンツ（POST本文）は10kB未満である必要があります。)

とのことなので、
イベントに何でもかんでもぶち込むとエラーになるっぽい。

解決策

$event = [
  "eventType" => 1,
  "id" => 1,
  "content" => [...]   // ←ここのサイズが大きかった
];
event(new PusherEvent($event));

↑これをvueで受け取って、

this.content = event.content

のようにしていたのを、

$event = [
  "eventType" => 1,
  "id" => 1,
];
event(new PusherEvent($event));

イベントタイプとデータのidのみ渡すように修正

async getContent(id) {
  // ajaxでデータ取得
},

...

ver content = await getContent(event.id);
this.content = content

ajaxでデータを取得し、それを反映

という風に直したら解決。

もちろん仕様によってはある程度制御をしなければ、
ログインしているユーザー人数だけgetContent()が呼ばれてまた別のエラーになるので、
そこは適宜対応が必要。

【MySQL】DISTINCT──重複したデータを除外する

2020-10-19T17:59:58+09:00

https://www.dbonline.jp/mysql/select/index13.html

DISTINCT を指定すると、取得するカラムの値が一致しているデータは除外してデータを取得することができる。

【php】php7系では、ループは普通にforeachを使えば良い

2020-10-19T17:58:51+09:00

OOMの原因調査をしていた時

foreachを使うとき、もうちょいメモリのことを気にして行こうぜ
 [PHP]ループのメモリ使用量と処理速度を比較しました

こんな記事を見つけた。

なるほど、foreachは配列のコピーを作るからメモリを食ってしまうので、
何でもかんでもforeachを使えばいいってわけじゃないのか…。
使う時も、unsertとかを上手く使わないといけないのか…。

と思ったのですが。
どうやらコレは2010年辺り(php5系？)の話のようで、
php7系ではそんなことないらしい。

PHP7系におけるループのメモリ使用量と処理速度を比較

実際、自分のコードでも軽く比較してみたけど、特に差は見られなかった。
(ちゃんとは比較してないので数値は載せませんが。)
というか、

while(list($key, $val) = each($data)) {
   $results[] = $key * $val;
}

↑コレに関しては「eachはもう使うんじゃねえ」などと怒られた。

結論

今まで通りforeach使おう。
そしてメモリ食ってるのは、foreachやforeachの使い方が悪いわけじゃない　というのがわかった。

ただのぼやき

「php　foreach　メモリ」とかで検索すると、
[PHP]ループのメモリ使用量と処理速度を比較しました
これが上位に出てくるんですよね。
多分こういうことって普通にあると思うので…参考にする前に、
・何年前の記事なのか
・バージョン
くらいはちゃんと確認しないといかんな。

と、改めて感じた。

【php】Fatal error: Out of memory　が出たときの、原因特定の準備

2020-10-19T17:56:16+09:00

社内ツール開発中、追加機能の実装が出来たので意気揚々と本番にデプロイした結果。

Fatal error: Out of memory

ｳﾜｧｧｧｧ

頭を抱えていたら、とりあえずの対処法と原因特定するための方法をパイセンに教えていただいたので記録。

①とりあえずphp.iniをいじる

参考：PHPのメモリの上限を変更する

;memory_limit = 256M  ←翌朝、128から256に変更してみた
memory_limit = 512M  ←256でも同エラーになったので、更に上げてみた

128Mから256Mに引き上げたものの、
数時間後に同エラーが発生したため解決にはならず。
おそらく意味はないと思われるが、512Mまで引き上げて様子見…

（そもそもメモリ上限を上げただけでは根本的な解決にはならない。）

②原因だと思われるメソッドのメモリ使用量を計測する

参考：php メモリ使用量測定メモ

memory_get_usage()　で現在のメモリ使用量
memory_get_peak_usage() 　でメモリ使用量の最大値
をそれぞれ取得できる。

これを使って、実行前後のメモリ使用量をLogに吐き出すように仕込んでみた。

public function hoge() {
  \Log::debug("first:".memory_get_usage() / (1024 * 1024)."MB\n");

  // なにかの処理…

  \Log::debug("now:".memory_get_usage() / (1024 * 1024)."MB\n");
  \Log::debug("peak:".memory_get_peak_usage() / (1024 * 1024)."MB\n");
}

※laravelを使っているので\Log::debug()で書いています。

次エラーが発生した際に、メモリ使用量がとてつもないことになっている箇所があればおそらくそれが原因。
そうでもなければ、別の場所が原因なので、仕込む場所を変えてみる

…という風に原因特定していくらしい。
ひとまずは、この状態でログとにらめっこしつつ原因特定を頑張るぞ。

【php】連想配列を、指定した配列の順番で並び替える　(usort)

2020-10-19T17:52:20+09:00

https://www.php.net/manual/ja/function.usort.php
配列を並び替える関数の一つで、自分で指定した条件通りに並び替えることができる

function cmp($a, $b) {
  if ($a== $b) {
    return 0;
  }
  return ($a< $b) ? -1 : 1;
}

$array = [3, 2, 5, 6, 1];
usort($array , "cmp");

foreach ($array  as $key => $value) {
    echo "$key: $value\n";
}

出力結果：

0: 1
1: 2
2: 3
3: 5
4: 6

呼び出し方は、
usort(配列, コールバック関数)

コールバック関数の返り値を使って並び替えをする。

返り値	処理
0	そのまま(並び替えない)
-1	`$a`の順番を`$b`より繰り下げる
1	`$a`の順番を`$b`より繰り上げる

↑これを全部の組み合わせで実行し、最終的に昇順に並び替えられる

usortを使って、連想配列を任意の順番に並び替える

teratailの方で見つけて感動したのでメモ。(メモと言うかもろコピペですみません)
https://teratail.com/questions/93290

$sortID=[3, 5, 12, 23, 67];
$array = [
  ['id'=>3,'name'=>"test1"],
  ['id'=>67,'name'=>"test2"],
  ['id'=>23,'name'=>"test3"],
  ['id'=>12,'name'=>"test4"],
  ['id'=>5,'name'=>"test5"],
];    

usort($array, function($a, $b) use ($sortID){
  return array_search($a["id"], $sortID) > array_search($b["id"], $sortID);
});
print_r($array);

出力結果：

Array
(
    [0] => Array
        (
            [id] => 3
            [name] => test1
        )

    [1] => Array
        (
            [id] => 5
            [name] => test5
        )

    [2] => Array
        (
            [id] => 12
            [name] => test4
        )

    [3] => Array
        (
            [id] => 23
            [name] => test3
        )

    [4] => Array
        (
            [id] => 67
            [name] => test2
        )
)

おお～。
$sortIDに同じ値がある場合はちょっと足さないといけないっぽいけど、
これは意外と色んな場面で使えそう。

【Laravel】feature テスト　レスポンスのデバッグ

2020-10-19T17:50:23+09:00

$response = $this->get('/');
$response->assertStatus(200)

みたいなテストをするとき、レスポンスの中身をみたい場面があった。

$response->dumpHeaders();
$response->dumpSession();
$response->dump();

これで取得できる！
ちゃんとドキュメントにも書いてあった。
https://readouble.com/laravel/6.x/ja/http-tests.html

もっと早く気付けたら良かった～～～

js　ファイルをドラッグ＆ドロップでアップロードするとき、フォルダは弾く

2020-10-19T17:47:24+09:00

function onDrop() {
    const items = event.dataTransfer.items;
    for (var item of items) {
        var entry = item.webkitGetAsEntry();
        if (entry.isDirectory) {
           alert("フォルダはアップロードできません");
           return;
        }
    }
}

WHERE id !=1 みたいな条件文を書く時に気をつけること

2020-10-19T17:46:19+09:00

idに必ず数値が入っている場合は

SELECT * FROM table WHERE id !=1;

でidが1以外のデータすべて取れるけど、
これだとid=NULLのデータは取れない

ので、

SELECT * FROM table WHERE id !=1 OR id IS NULL;

のように書けばidがNULLのデータも取得できる。

みみみみみの投稿 - Crieit

home_url、get_template_directory_uri、get_stylesheet_directory_uriの違い【WordPress勉強備忘録】

XSSについてちゃんと調べてみた

OWASP ZAPで脆弱性診断を行う際の、予備知識的なもの─ローカルプロキシの設定編

プロ棋士プロキシが居ないとき

php(Laravel)でエクセルのインポート機能付けるときに試したもの

救 世 主

ある日突然ロードアベレージが200を超えた

【シリアル値】エクセルファイルで、日付の項目に謎の数値が入っていて困惑した時

laravel6.xでbootstrapを使う

Vue.Draggable をスマホでも使う時のアレコレ

【Apache Laravel Vue.js Vuetify】webアプリをスマホに対応させるためにやったこと

【js】連想配列からインデックスを取得

iosだけ画像が縦に伸びる時

【Vuex】別モジュールのステート、メソッド呼び出し

【Laravel+Pusher】The data content of this event exceeds the allowed maximum のエラーが出た時

【MySQL】DISTINCT──重複したデータを除外する

【php】php7系では、ループは普通にforeachを使えば良い

【php】Fatal error: Out of memory が出たときの、原因特定の準備

【php】連想配列を、指定した配列の順番で並び替える (usort)

【Laravel】feature テスト レスポンスのデバッグ

js ファイルをドラッグ＆ドロップでアップロードするとき、フォルダは弾く

WHERE id !=1 みたいな条件文を書く時に気をつけること

救　世　主

Vue.Draggable　をスマホでも使う時のアレコレ

【Laravel+Pusher】The data content of this event exceeds the allowed maximum　のエラーが出た時

【php】Fatal error: Out of memory　が出たときの、原因特定の準備

【php】連想配列を、指定した配列の順番で並び替える　(usort)

【Laravel】feature テスト　レスポンスのデバッグ

js　ファイルをドラッグ＆ドロップでアップロードするとき、フォルダは弾く