【Bootstrap4】ナビゲーションメニューを2列で表示する

前回作成したナビゲーションのメニューを、スマートフォン(以下SP)で表示したときに2列で表示してみます。 メディアクエリ メディアクエリとはCSSの記述式で、スクリーンのサイズによってあてるスタイルを変更する方法です。これを使いSP表示したときのナビゲーションを2列表示に切り替えます。 @media only screen and (max-width: 766px) { /* ここにSP用のスタイルを書く */ } ※この場合は画面の横幅が766px以下の時に適用される。 2列表示にする ナビゲーションバーの各メニューに display: inline-block; を適用します。inline-blockは各要素を横に並べ、さらに縦横のサイズを指定できます。 nav-itemの横幅を50%未満にしておけば、2つおきに改行されます。 .navbar-nav{ display: inline-block; width: 100%; margin-bottom: 20px; } .navbar .nav-item { margin: 0; display: inline-block; width: 49%; } 装飾 このままだと味気ないので少し装飾してみます。メニューの下段と中央にラインを引いて、見やすくしています。left-item は左に来る要素の…

続きを読む

【Bootstrap4】ナビゲーションバーを作る

Bootstrap4でナビゲーションバーを実装し、いろいろカスタマイズしていきます。 事前準備 まずはライブラリをダウンロードして、サイトに設置する。もしくはBootstrapCDNを参照してもよい。 https://getbootstrap.jp/docs/4.1/getting-started/download/ head <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> viewportの指定、設置したライブラリ(bootstrap.min.css、bootstrap.min.js)を読み込む。jQueryも必要なので一緒に読み込む。なお jQuery は bootstrap.min.js の前に読み込まないと エラー …

続きを読む

【Bootstrap4】ブラウザのコンソールでエラー Uncaught TypeError

ブラウザのコンソールでエラー util.js:55 Uncaught TypeError: Cannot read property 'fn' of undefined at util.js:55 at bootstrap.min.js:6 at bootstrap.min.js:6 原因 bootstrap.min.js が jquery.min.js に依存しているので、読み込む順番を後にすればOK <script src="js/bootstrap.min.js"></script> <script src="js/jquery/1.11.3/jquery.min.js"></script> ↓ <script src="js/jquery/1.11.3/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script>

続きを読む

【PHP】コンテナの環境変数を参照する

AWS ECSでコンテナアプリケーションを実装する時の、コンテナに設定された環境変数取得方法のまとめです 環境ごとの設定値を設定ファイルに書き出しておくのはよくやる手法ですが、githubを使ってソース管理する場合、思わぬ情報漏洩に繋がるケースがあります。 例えばデータベースのホスト名やパスワードを設定ファイルに書き出して環境ごとにコミットしたとします。FuelPHPの設定ファイルを例にとって見てみます。 config/production/db.php (普通に書く) return array( 'default' => array( 'connection' => array( 'hostname' => '255.255.255.255, 'database' => 'database', 'username' => 'testuser', 'password' => 'password', ), ), ); これをgithubへコミットしてしまうと、何かの拍子でpublicになってしまったとき外部から丸見えになってしまいます。何かの拍子というのは、そのほとんどが人的ミスによるものです。 また、こういった情報を良からぬクローラーがさらっていく情報漏洩が結構発生しているようですので、コンテナの環境変数に設定してアプリケーションか…

続きを読む

【PHP】Amazon SESでEメール送信

aws-sdk-phpを利用してAmazon SESからEメールを送信する方法のまとめです。 ※aws-sdk-phpのセットアップは以下リンク参照 【AWS】S3へファイルアップロード(PHP) 公式の詳細はこちら https://docs.aws.amazon.com/ja_jp/ses/latest/DeveloperGuide/send-using-sdk-php.html 実装 名前空間の定義 use \Aws\Credentials\CredentialProvider; use \Aws\Ses\SesClient; use \Aws\Exception\AwsException; 処理 /** * Amazon SES Sendmail * @param string $subject * @param string $body * @param string $to * @param string $from_email * @param string $from_name = null * @return bool * @throw Exception */ public static function send( string $subject, string $body, string $to, string $from_email, …

続きを読む

【PHP, JavaScript】POSTデータが多すぎてエラーになったときにとった対応

画面からユーザーの入力値をPOSTするプログラムで500エラーが発生し、エラーログを確認すると以下のメッセージを吐いていました。 *413 FastCGI sent in stderr: "PHP message: PHP Warning: Unknown: Input variables exceeded nnn. このエラーはユーザーの入力値が多すぎて、submitしたときサーバー側で弾かれているエラーで、しきい値は php.ini の以下で設定できます。 php.ini ; How many GET/POST/COOKIE input variables may be accepted max_input_vars = 100 しかし本来セキュリティの観点から、この値は抑えられている(デフォルトは1000)ケースがあります。その場合は、フロント側で吸収する必要があるためその方法をまとめます。※あくまで一つの例なので他に良い方法があるかもしれません。 今回発生したケースでは、ユーザーや店舗などの設定値を縦に並べて一括で更新するという処理で、100は余裕で超えてしまうため対応を行いました。 POSTデータを入力するView(修正前) (※だいぶ簡単にしたもの) <form method="post" action="/users/index"> <input …

続きを読む

AWS-CLI使い方まとめ(S3編)

本番環境へSSH接続できなくて(権限なし)、DBのdumpファイルをどうやってGETしようか試行錯誤した時の方法です。 セッションマネージャーからAWS-CLIでS3バケットにアップロードして、S3経由で取得できました。 これは色々応用できるなと思い、AWS-CLIの使い方をまとめておきます。 ということでまずはS3操作について... 事前準備 AWS-CLIのインストール https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/cli-chap-install.html $ aws --version aws-cli/1.16.170 Python/3.7.4 Darwin/17.5.0 botocore/1.12.160 設定 以下2ファイルを用意 (無ければ作る) $ cat ~/.aws/config [default] region = ap-northeast-1 $ cat ~/.aws/credentials [default] aws_access_key_id = AAAAAAAAAAAAAAAAAAAA aws_secret_access_key = BBBBBBBBBBBBBBB/CCCCCCCCCCCCCCCCCCCCCCCC ※複数環境を使い分ける場合は、credentialsに設定した[キー]を --profile [キー] で指定する …

続きを読む

スポンサーリンク