なるの備忘録

エンジニアリングそして営業ができるエンジニアに向けて、日々学んだことをアウトプットしていきます。

SCSSで超便利な幅調整クラスを作る

「ここだけピンポイントでマージンが欲しい」ときに便利な幅調整クラスを作る HTML、CSSで画面コーディングをしていると、「ここだけピンポイントでマージンが欲しいんだよな」ってときがあると思います。 FLOCCSなどでクラス設計をしているときには「Utilli…

LaravelのRequestを使ったバリデーションで自分自身の重複は無視したいとき

プロフィール更新の際に、自分自身のデータすら重複チェックに引っかかる Laravelのバリデーションで重複チェックを入れていると、プロフィール更新の際に、自分自身のデータすら重複チェックに引っかかります。 なので、自分自身の値は無視して、重複チェッ…

gulp利用時に「ReferenceError: internalBinding is not defined」のエラー

gulpを利用しようとしたらReferenceError: internalBinding is not definedのエラーが出た。以下の記事を見たら「Try updating natives to the latest version. 」とのこと。 stackoverflow.com以下のコマンドを実施して解決。 $ npm i natives@latest --no-…

ボタンを押したら画面外からスライドして表示されるメニューの作り方と注意点

ボタンを押したら画面外からスライドして表示されるメニューの作り方 ボタンを押すと表示されるメニューを簡単に作っていきます。 動作イメージは以下。画面に表示されるボタンを押すと… 上からにゅ～っとメニューが現れます。 再びボタンを押すと閉じます。…

Android端末対応の縦書き明朝はNoto Serif JPを使おう

Android端末では明朝体フォントが使いたい どうやら最近のAndroid端末では明朝体フォントがインストールされていないようです。 PCでは明朝体が表示されるのにスマホだと表示されない理由は上記になります。 そのため必然的にWebフォントを利用することにな…

【未解決】flexboxの子要素の位置指定とpositionは同時に利用できなさそう

flexboxで等間隔に並べたリストをpositionで画面上部に固定したいが… タイトルの通りです。flexboxで等間隔に並べたリストをpositionで画面上部に固定したかったのですが、どうもうまくいかなかったので改めて調べてみました。 サンプルコード HTML <html lang="ja"> <head> <link rel="stylesheet" href="style.css"> </head> <body> <h1>fl</h1></body></html>…

【予約語に注意】FuelPHPでユーザ登録をしようとすると「Fuel\Core\Database_Exception [ 1064 (1064) ]: You have an error in your SQL syntax;」と出る

FuelPHPでユーザ登録をするとエラーが出る。 FuelPHPでユーザ登録をしようとすると以下のようなエラーが出た。Fuel\Core\Database_Exception [ 1064 (1064) ]: You have an error in your SQL syntax; check the manual that corresponds to your MySQL serv…

「クラス名:nth-of-type(n)」で記載した場合、「クラスでn番目」ではなく、「要素でn番目」という数え方になる

「クラス名:nth-of-type(n)」で記載した場合、「クラスでn番目」ではなく、「要素でn番目」という数え方になる 「クラス名:nth-of-type(n)」で記載したときの挙動が気になったのでメモ。 以下の簡単なコードで動作を確認します。 簡単な動作確認用コード HTM…

コマンドラインでfuelPHPがインストールできないときの対策(syntax error near unexpected token `newline')

コマンドラインでfuelPHPがインストールできないときの対策(syntax error near unexpected token `newline') コマンドラインでfuelPHPをインストールしようとしたら、以下のようなエラーがでました。 $ curl get.fuelphp.com/oil | sh % Total % Received % …

Sassの変数と@mixinでレスポンシブデザインを作るときは@mixinの呼び出し順に注意

Sassの変数と@mixinで３パターンのレスポンシブデザインを作ろうとすると、CSSが適用されない PC・タブレット・スマホの３パターンのレスポンシブデザインをSassの変数と@mixinで作ろうとして、CSSがうまく適用されませんでした。 結論としては、Sassの変数…

yarnでnode-sassのライブラリを使うと「An output directory must be specified when compiling a directory」とエラーが出る

単なる打ち間違いですが、わりとハマってしまったのでメモ。 jsonファイルの中身 { "name": "test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build-css": "node-sass --include-path scss scss/style.scss css/style.css…

CSSのアニメーション機能を使って、扉から飛び出すように画像を表示させる

せっかく学習したのでCSS3のアニメーション機能を使って、扉から飛び出すような画像表示機能を作ってみます。 動作イメージ 最初は扉のような画像が表示されています。 扉にカーソルを重ねると勢いよく扉が開きます。 直後に勢いよく画像が飛び出してきます…

基本的なクロージャの実践例の「モジュールパターン」は何が起きているの？

なんとなくクロージャーは分かったけど… 「JavaScriptのスコープの概念」や「クロージャーのメリット」は理解したけど、いまいち典型的なクロージャーのコードで何が起きているか分からなかったので調べてみました。 典型的なクロージャーのコードと分からん…

自動的に画像がスライドしていく画像スライダーを作る

HTML、CSS、JavaScript(jQuery)で自動的に画像がスライドしていく画像スライダーを作ります。 よくWebページのトップバナーがこんな感じに変化していますね。 動作イメージ ページを開くと１枚目の画像が表示されています。 しばらくすると画像が左にスライ…

今一度jQueryの.html()と.text()と.val()の違いを確認する

指定した要素の内容を変えるのによく使うjQueryの「.html()」と「.text()」と「.val()」。 正確に動作の違いを確認していなかったとふと思ったので、改めて整理します。 動作確認用コード HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>html text val</title> </head> <body> </body></html>

jQueryでほぼ一行で、ページを開くとスクロールして一番下の文章を表示させるテキストエリアを作成

ページを開くとスクロールして一番下の文章を表示させるテキストエリアを作ります。履歴一覧など、ユーザには基本的には最新の情報を見せたいけど、過去の内容も見せたいってときに使えそうですね。 jQueryでほぼ一行で実装可能です。 動作イメージ ページを…

画像をクリックするとPOST送信できるボタンをHTMLとCSSで作成

画像をクリックするとPOST送信できるボタンをHTMLとCSSで簡単に作ります。 画像自体をクリックして先に進めるので、UIが良くなりますね。やり方としては、透明なsubmitボタンを画像の前に置き、まるで画像をクリックしたようにPOST送信をさせます。 動作イメ…

HTMLとCSSとJavaScriptでキャラクター選択画面を作る

ゲームとかにありがちなキャラクター選択画面のアニメーションをHTMLとCSSとJavaScriptで簡単に作ります。 動作イメージ キャラクターを選択する前はボタンは灰色になっていて押せません。 キャラクターをクリックすると、キャラクターの周りが赤く囲われま…

Gitコマンド備忘録

Gitを使う準備 前提 Gitの概念や用語の説明は特に記載しておりません。 Gitインストール(Macの場合) $ brew install git Git初期設定 $ git config --global user.name <ユーザネーム> $ git config --global user.email <ユーザアドレス>Gitのコミット履歴…

さくらのレンタルサーバでWebサービスを公開する

PHP＋MySQLで作ったWebサービスを公開したい！ せっかく作ったサービスを公開したいですよね！ ポートフォリオを公開したいですよね！ なんならそのままサービス化したいですよね！ (前置き終了) １：さくらレンタルサーバを契約する いろいろプランはありま…

PHPでfor文を使って画像を繰り返し表示させる

実施方法 以下の２つの方法で実現できます。 ・echoでimgタグを出力することで表示 ・一旦PHPタグを閉じて、htmlとしてimgタグを記述 実際にコードを見てみましょう。 論よりコード <html lang="ja"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> </body></html>

初期値が入っている関数に新たに変数を追加するときの注意点（PHP Fatal error: Uncaught ArgumentCountError: Too few arguments to function）

実施したいこと 元々用意していた関数では機能が足りなくて、変数を追加したい状況はよくあると思います。 以下の関数に新しい変数$var_eを追加する場合を例に考えます。 元々の関数 function hogehoge($var_a = 1, $var_b, $var_c, $var_d =10){ } 関数を使…

配列の内容を折れ線グラフとして表示する（PHP+JavaScript）

配列の内容を折れ線グラフとして表示する（PHP+JavaScript） chart.js を利用したグラフ表示 今回は「chart.js」というライブラリを利用します。 Chart.jsは簡単に使えます。 Chart.jsを使うのに必要なものは2つだけ。 以下の２つをhtml部分に記載。 Chart.j…

PHPで作ったWebサービスをネットに公開する

Webサービス(PHP+CSS+JS)をネットに公開する せっかく作ったサービス、ネットに公開してみたいですよね。 Herokuというサービスを使って、Webサービスを公開していきます。 ※MySQLなどのデータベースと連携したサービスの公開方法ではありません。 前提 環境…

JavaScriptでカウントダウンを表示して違法サイトっぽいページを作る

JavaScriptでカウントダウンを表示する JavaScriptでは画面遷移することなく、画面の表示を変えることができます。 簡単にカウントダウンをするコードを書いてみます。 論よりコード //カウントダウンを開始する数を定義 var count = 10; //カウンターを表示…

MAMPのMySQLサーバが動かないときの対策(Windowsユーザ向け)

MAMPのMySQLサーバが動かない MAMPを起動してもMySQLサーバが動かないときがあります。 こんな状況ですね。MySQLサーバが起動しないときのMAMP画面 結論：XAMPPを使おう 身も蓋もないですが、これが最速でした。 エンジニアはMACユーザが多く、MAMPを推奨さ…

git logコマンドを実施した際の文字化け

git log -pなどでの文字化け git logなどの結果に日本語が含まれていると文字化けすることがある。 + +<html lang="ja"> + <head> + <meta charset="utf-8"> + <title>Git<E3><83><86><E3><82><B9><E3><83><88></title> + </head> + <body> + <h1><E3><83><90><E3><83><BC><E3><82><B8><E3><83><A7><E3><83><B3><E7><AE><A1><E7><90><86></h1> + <…</body></html>

計算した割合が代入されていないように見える問題

勝率とか割合の計算のときに、計算結果が「0.0」となってしまう問題。 計算結果が代入されていないように見えて、わりとハマったのでメモ。 問題が発生した状況 「計算結果を表示するmainクラス」と「割合を計算するクラス」で実行。 計算結果を表示するmain…