鶏口牛後な日々

魔法使い(なんでも作れるエンジニア)を目指してます。ブログは発散中

jQueryでidを取得して利用したい(初心者向け)

今扱っている要素は、 $(this) で表せますが、それのidを取得したい! というときがありました。 具体的には、同じクラスをつけているボタンについて、その中で今おしたボタンのidを取得して、それぞれのidに応じた挙動を追加したいと思いました。 そこで調…

PHP LaravelとHTMLのinput type="file"タグで複数のファイルを同時にアップロードしたい

私の場合は、画像を最大4枚同時にアップロードし、ストレージに保存するという操作を行いたいと思ったときに課題にぶつかりました。 まず、input type="file"タグは、一つのタグにつき1つしかアップロードできないのが基本です。 multiple="multiple" という…

PHP Laravelで配列をstringに変換したい

これはLaravelではなく、PHPの関数ですが、serializeというのが使えそうです。私は、dd()でダンプして、デバッグで見たい!というときに、arrayだとエラーになるので、stringにしてくれ〜と思ったときに探しました。使い方は簡単。引数に変換したいarrayを入…

jQueryのセレクタでワイルドカードを使いたい

jQueryのセレクタで、ワイルドカードを使いたい! ということ、ありますよね。 私の場合、inputタグの、id属性で、id="hoge1", id="hoge2"... という書き方をして、それぞれのタグを区別した上で、 どのhegeなんたらについても、同じ動きをつけたいときに、…

Laravelでvalidationがfailした時にMethodNotAllowedHttpExceptionが出まくる(初心者向け)

Laravelで本格的にプログラム書くようになって1ヶ月ほどの初心者です。これ、めちゃめちゃハマりました・・・stackOverflowやLaracast、Qiitaあたりの記事を読み漁りましたが、解決せず。結論としては、このエラーはバリデーションは関係なくて、リダイレク…

Laravelでデバッグのために情報を画面に出力したい(javascriptのconsole.logみたいなことがしたい)

javascriptだと、console.log()で何かとブラウザのコンソールに出力して確認作業しますよね。 こんな感じのことをLaravelでやるのはどうするのかな? と思って調べました。基本は以下で良さそうです。 とにかくその場で見たい時 dd($変数);ddは、dump dieの…

PHP Laravelでリクエストが通らずbladeが表示されないときはCSRFトークンを忘れている可能性あり

Laravel初心者です。 以下のような、超簡単なrouteを書いてみたのに、なぜかエラーが出てしまうという事態に見舞われました。 Route::post('/index', function() { return view('index'); }); 出て来たエラーはこれです。 Throw a method not allowed HTTP e…

macのメモリや電源の利用率を確認したい(Activity Monitor)

Mac

macは起動や再起動がWindowsに比べて格段に速いですね。 ただ、それでもstorageが9割りとかになってくると、(当たり前ですが)動きが悪くなってきます。そういう時に、メモリの利用率や電源を食っているアプリケーションは何か? を調べたり、 強制的に動い…

同じjsファイル内/同じ関数内で、jQueryとJavaScriptは混ぜて書いて良いのか

JavaScript初心者です。 掲題の通りの疑問を抱いたので調べました。結論から言うと、全く問題ないようです。こちらの方が同じ質問をされていて、疑問が解消されました。okwave.jp この回答者の方によると、jQueryはJavaScriptnライブラリ。 分けて書くことの…

jQueryのwidth(), innerWidth(), outerWidth()の違い

jQueryでwindow幅ごとに処理を書き分けるというのを書きましたが、その時に、widthとinnerWidthって何が違うの? と思ったので、調べてみたことを書いておきます。結論から言うと、以下の図の通りのようです。 しかし、①window.width(), ②window.innerWidth(…

jQueryでwindow幅ごとに処理を書き分ける

これはいくつかの方法があるようでした。window.innerWidthで、スマホとタブレット、PCなどを判定する方法。 ユーザーエージェントで判定する方法などです。ユーザーエージェントで判定するのもかなりシンプルなコードが書けそうでした(こちらのかたが綺麗…

jQueryでinput[type="file"]タグを初期化したい

以前、インプットタグで画像を読み込むjQueryコードを作ったのですが、 この上に、削除ボタンをつけて、クリックするとプレビューが消える、というようにしました。しかし、何度か試しているうちに、一度読み込んで削除した画像を再度読み込もうとしても、読…

アプリやWeb周りのフォント事情について覚書(超初心者向け)

webエンジニア見習いで、最近アプリのWebView(アプリ内でwebで作った画面を表示する)も作るようになりました。そこで、フォントをデザイナーさんが指定してくれたもので統一するんだよな〜と思って、調べていたら、意外なことがわかったのでメモ。まず、we…

htmlのaタグをクリックして電話をかけたりメールを送ったりしたい

例えば病院のホームページなどで、電話番号が大きく記載されていて、そこをクリックすると実際に電話をかける機能が立ち上がるというのはよく見ますよね。この機能は、HTMLのaタグでなされています。 電話は基本的にスマホ用の機能ですね。 (そのためPCのch…

gitで.gitignoreそれ自体をgitの対象範囲から外したい(ignoreしたい!)と思った人、考え直しましょう

git

gitで、publicフォルダなど、自動生成されるフォルダやファイルは、gitの対象範囲から除外します。 その時は、.gitと同階層に.gitignore というファイルを作って、中に対象範囲から除外したいフォルダ名やファイル名を書き込みます。ただ、そのために.gitign…

HTMLのmetaタグの呪文について一応理解するためのメモ

PHP Laravelのデフォルトで入っている、welcome.blade.phpを使い回しするのですが、metaタグによくわからない呪文が入っていて、あとで聞かれた時のために一応調べたのでメモしておきます。呪文は以下の二種。 <meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"> 1つ目、http-equiv="X-UA-Compatible" ウンタ</meta></meta>…

(自分用)jQueryメソッド覚書(注意点など)

parent() 親要素を取得する position() 親要素からのtop, leftの座標を取得。 ただし、cssでposition:absoluteを指定した要素の、position: relativeを指定した親要素という関係が成立していないと取得はできないので注意 これで詰まった時、width()を使った…

jQueryが外部ファイルから読み込めない時に注意すべき点

jQueryをまずhtmlファイルに書き込んで追加していったところ、うまく動いていることを確認したのですが、外部のjsファイルに転記したところ動かなくなってしまいました。 これは、ドキュメントを読み込んでから、jQueryを作動させないといけないことに関連し…

jQueryのwidthメソッドで表示画像の幅をとるときの注意点

基本は、$('セレクタ').width();で良いはずなのですが、これだとwidthもheightも0になってしまいました。 そこで調べたところ、画像は「読み込んでから」widthを取らないと、0になってしまうみたいです。なので、以下のようにするのが注意する点です。 $('セ…

読み込んだ画像のプレビューで中央縦横真ん中に配置したい

画像をファイルを読み込む部品を作っています。 プレビューするjQueryやinputタグのデザインは以下で書きました。tacosvilledge.hatenablog.com 読み込んだ画像が縦横どんなサイズの画像だったとしても、適度な大きさで真ん中に配置して表示したい、と思った…

澤野弘之さん(作曲家、編曲家)がすごい

澤野弘之さんを知ったのは、ガンダムUCのUNICORNという曲ででした。澤野弘之 - Wikipedianiconico動画では、関係ない動画のBGMに使われてそっちで大変人気が出た経緯もあったようですが、 そもそも荘厳かつ心にグッとくる盛り上がり感の演出が、すごいなと思…

webで画像読み込みで一番簡単なセット(inputタグのデザイン、プレビュー表示のjQuery、type制限)備忘メモ

HTML/CSSはまあまあ、jQueryはまだ初心者を抜けきっていないくらいのレベルです。 Webサービスで、画像を読み込む必要が出たので色々調べました。 結果実装できました! 一口に「画像読み込み」といっても、いくつかの機能に別れるため、それぞれで調べて、…

Bridget Jones's diary メール本文の意味

ブリジットが、映画の前半で、ダニエル・クリーバーからもらった「スカート履き忘れてない?」というメールへ返信した内容について、知らない単語があったので調べました。 小説が元だからだと思うのですが、表現が詩的で(勝手な主観です)パッと意味がわか…

Bridget Jones's diary で覚える他で滅多に使わない英単語

ブリジットが、最初の日記で書く、「以下から距離をおく」と言っている様々な悪癖のところがありますよね。あそこの英語、ほとんど分からなくて調べました。 alcoholics, workaholics, commitment phobics, peeping toms, megalomaniacs, emotional fuck-wit…

Portal1 GlaDOSのラストソングがironicalで可愛い(Still Alive、日本語翻訳)

Portal の歌詞ですが、面白いですよね。 翻訳は何通りもあると思うのですが、日本語で書いてみました。 意訳です。細かいところは解釈によると思いますのでご了承ください。 This was a triumph! I'm making a note here: Huge success! 素晴らしい出来です…

初心者プログラマーとしての効率良い学びはやっぱりまだ書籍

背景 初心者プログラマー、PHP初めて1年半、Laravelで仕事をするようになって半年です。 会社では幸運なことに、聞けばなんでも教えてくれる先輩のチームに所属しているのですが、近い将来自立したいので、会社以外での効率の良い学び方法を目を皿のようにし…

英語の好きな表現[ down to earth ]

好きな表現見つけました!down to earth!「地に足がついた」ってことらしいです。 いいなぁーどっかで使いたい。 メモメモ。

米津玄師、Lemonの歌詞(アンナチュラル主題歌)

耳コピです>米津玄師、Lemon夢ならばどれほど良かったでしょう いまだにあなたのことを夢に見る 忘れたものを取りに帰るように 古びた思い出の埃を払う戻らない幸せがあることを 最後にあなたが教えてくれた 言えずに隠してたくらい過去も あなたがいなきゃ…

個食の人のミカタ(多いと持ち帰らせてくれるお店)

一人で外食するとき、いくつか種類食べたいな、と思っても、残りそうと思うとやめてしまう。 できればのこったら持ち帰ってあとで食べたい! そういう人が多いと聞いたので、個食の人の強い味方、のこったら持ち帰らせてくれるお店をリスト化してみようと思…

Amazonアソシエイトを登録する際の注意点(電話番号でのPIN確認)

Amazonさんのアソシエイトに登録してみました。 今更ながらという感じもありますが、以前も試みてどこかの段階で失敗した思い出がありました。AmazonさんのUIはあんまし優しくはないですね。 まぁそれは置いておくとして、電話番号を登録し、Amazonから電話…