極個人的プログラミング学習備忘録

HTML、CSS、PHP、JavaScript、Vueなどで学習したことをメモしていきます

Webサイトのどのページを開いてもindex.htmlが開くような.htaccessファイル

サイトを移転した時など、.htaccess ファイルを使用して、Webサイトのどのページを開いても index.html が表示されるようにするには、以下のように記述します。 RewriteEngine On RewriteBase / RewriteCond %{REQUEST_URI} !^/index\.html$ RewriteRule ^.*…

Wordpressで最小限のテーマを作る

Wordpressで最小限のテーマを作る方法を紹介します。 新しいテーマディレクトリの作成 まず、wp-content/themes/ ディレクトリ内に新しいテーマのディレクトリを作成します。例として my-minimal-theme という名前でディレクトリを作成します。style.css の…

PHPでフィードリーダー作ろう!3つの形式(RSS1.0、RSS2.0、ATOM)をサクッと取得

PHP

フィードっていろいろある フィードは情報を配信するための形式のこと。RSS 1.0, 2.0, ATOMなど、いくつかの種類がある。それぞれ少しずつ形式や構造が違うけど、今回はこれらすべてに対応したリーダーを作る方法を紹介するよ! それぞれのフィード、どうや…

クリックした位置から円が広がるJavascriptのコード

クリック地点から円が広がるエフェクトを紹介します。 クリックされた位置を取得し、その位置から円が徐々に広がるアニメーションを適用します。2秒後にこの円はフェードアウトし、完全に消えます。ただ、アニメーションを繰り返す際に問題が発生することが…

最新のPHPとPDOを使用してMySQLに安全に接続する方法:2023年版ガイド

PHPとMySQLの接続について 1.1 古いMySQL接続方法とその問題点 1.2 PDOとは何か?なぜPDOを使用するのか? 2. PDOを使用してPHPでMySQLに接続する準備 2.1 必要なツールと環境のセットアップ 2.2 MySQLデータベースの作成と設定 3. PHPとPDOを使用したMySQL…

【Bootstrap5】2カラムレイアウトでPCは右にサイドバー、モバイル端末では上に表示する

Bootstrap5の2カラムレイアウトで、PCなど画面が大きいときは右側に表示しているサイドバーを表示、モバイル端末では上に表示するレイアウトの記述方法。 <div class="row flex-column-reverse flex-md-row"> <div class="col-md-8"> <p>This is the main content for larger screens. It will appear on the left side.</p> </div> <div class="col-md-4"> <…</div></div>

Grid.jsでセル内でHTMLタグを使う方法

Grid.jsは、高速で軽量なテーブルグリッドライブラリで、機能豊富な表の生成・操作が可能。 シンプルで使いやすく、データのソート、フィルタリング、ページネーションがサポートされており、クライアント側で動作する。 とても便利なライブラリであるが、セ…

JavaScriptで文字列から重複する文字を削除する

JavaScriptで文字列から重複する文字列を削除する関数。例えば、 aabccnnaddkk を abcndk にしたい場合に使う //文字列から重複する文字を削除 function remove_duplicates(str){ let target = ""; while(str.length){ target += str.substring(0,1); str = …

個人的Laravel勉強メモ その3(マイグレーション)

データベースの設定 データベースの設定ファイルは「config」→「database.php」「.env」ファイルで設定を書き換える。 UTF-8に変更 'charset' => 'uft8', 'collation' => 'utf8_unicode_ci', データベースを扱う準備 データベースを扱う場合は、コントローラ…

個人的Laravel勉強メモ その2(Bladeテンプレートエンジン)

Bladeテンプレートの基本を勉強 公式のマニュアルは以下 Bladeテンプレート 5.8 Laravel @ifや@foreachなどの分岐処理 @if($index===1) 1だよ @elseif ($index===2) 2だよ @else 違うよ @endif if文の例 @foreach($array as $value) <li>{{ $value }}</li> @endforeac…

個人的Laravel勉強メモ その1

Laravelを使えるようになりたいので、勉強します。 ルーティング機能 「routes」フォルダの「Web.php」から操作。 HTMLを表示したいときは、「resources」の「welcom.blade.php」を編集する。 「.blade.php」は拡張子 コントローラの作成 コマンドで作成でき…

GCPにWordpress+NGINXを入れて1MB以上のアップロードができない場合の対策

GCP(Google Cloud Platform)で、Wordpress+NGINXのコンテナを導入したけど、1MB以上のファイルアップロードでエラーが出てしまう場合の対策方法を紹介します。 エラーの症状 具体的には、1MB以上の画像をメディアライブラリにアップロードした場合に 「HTT…

Bootstarp4でjQueryがうまく動かない場合

Bootstrap3で組んだサイトをBootstarp4にしたら、jQueryが動かなくハマったのでメモ。 Bootstarap4のテンプレートがコレ。 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

Let's Encrypt適用後にRewriteEngineの設定をしたい場合の注意

すごいハマってしまったのでメモ。 さくらVPSでCentOS7をインストールし、Let's Encryptを導入したけど、RewriteEngineが反映されない。 最初は、httpd.confの<Direcrory "/var/www/html">ディレクティブ内に記述すればばいいかと思ったけど反映されない。ssl.confかな? と思ったけど、</direcrory>…

Bootstarp4の折りたたみ(Collapse)ボタンを押すたびにボタンの表示名を変える

Bootstarp4の折りたたみ(Collapse)のサンプルより (リンク形式は省略して、ボタンのみ) <p> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> 表示する </button> </p> <div class="collapse" id="collapseExample"> </div>

Bootstrap4のPaginationでスマホ時だけサイズを小さくする

Bootstrap4のPaginationを使っていると、モバイルで見たときに横にはみ出してしまうことがある。 そこで、通常は普通サイズ、モバイル時は小さいときは、pagination-smサイズにする方法はないかなーと考えてみた。 エレガントではないが、独自CSSに以下を追…

PHPの三項演算子

例えば以下のような分岐処理 if ($id){ echo 'disabled'; }else{ echo 'enabled'; } 三項演算子を使えばシンプルに記述できる echo($id ? ' disabled' : 'enabled'); 条件 ? 条件が真なら : 条件が偽なら という感じ。

Bootstrap4レスポンシブデザインのメモ

小さい解像度は非表示、解像度が768(md)以上なら2ブロック分表示する例 html <div class="d-none d-md-block col-md-2 bg-secondary">ブロック</div> d-none……非表示 d-md-block……mdサイズ以上で表示 col-md-2……mdサイズ以上で2ブロック bg-secondary……背景色をsecondary

複数のclass要素をまとめて削除する

CSSで隠した要素をまとめて表示したいときなど、class要素をまとめて削除する方法 [sample1,sample1,sample1].forEach(el => { el.classList.remove('hidden'); });