どうも、白夜霧（@KiRi_Byakuya）です。 今回はWindowsの環境に「XAMPP」をインストールする方法と最低限の設定内容の覚書。 完全無料のウェブアプリケーションパッケージ「XAMPP（ザンプ）」とは？ XAMPP（ザンプ）は、ウェブアプリケーションの実行に必要なフリーソフトウェアをパッケージとしてまとめたもので、apachefriends.orgから提供されている。主として開発用あるいは学習用ではあるが、イントラネットなどにおいて実運用環境として使われることもある。 引用：wiki ApacheやPHP、MySQLなどウェブアプリを作る上で必須となるフリーソフトをパッケージ化したソフト。完全に無料で誰でも使え、初心者はまずお世話になる感じ。 XAMPPをダウンロードしてインストールXAMPPを公式ページからダウンロードをして、exeファイルを起動する。※私の場合はバージョン

「XAMPP」をインストールした後の必要最低限のセキュリティ設定について解説します。XAMPPを起動する前に、データーベースのパスワードを設定してみましょう。XAMPPのインストール方法については、関連記事をご参考下さい。 関連記事：XAMPPをインストールしてみよう！ 関連リンク：XAMPP公式サイト[https://www.apachefriends.org/jp/index.html] 1. XAMPPを使う前に 前回のコラム「XAMPPをインストールしてみよう！」では、Windows 10(64bit OS)に「XAMPP 7.1.9 (PHP 7.1.9)」をインストールしました。今までの「XAMPP」と比較して大きく異なる点があります。2015年7月23日のアップデート(v5.6.11)で、データーベースが「Mysql」から「MariaDB」に変更された事と「XAMPP」セキュ

開発/検証環境を手軽に構築するためにはXamppの導入は有効ですが、Xamppに含まれるDBが本番サーバーのDBと異なる場合、同じものにあわせて検証をおこなう必要があります。 今回は本番サーバーのDBがMySQLと仮定して、Xamppに含まれているMariaDBをMySQLに置き換える方法をシェアしたいと思います。 本記事は前回の「XamppのMariaDBをMySQLに置き換える方法(1)」の続きです。 まずはXAMPP Control PanelからMySQLの停止をおこないます。 つぎに C:\xampp7422\mysql を C:\xampp7422\mariadb にリネームします。 前回ダウンロードした mysql-8.0.26-winx64.zip の解凍をおこない、以下に設置します。 C:\xampp7422\mysql つぎに C:\xampp7422\mariadb\

XAMPP(ザンプ)のインストール方法は過去記事「WindowsでPHPを動かすための環境構築手順【XAMPP（ザンプ）】」でご紹介しました。 XAMPPインストール後のControl PanelにはMySQLと表示されてるのですが実はXAMPPデフォルトのDBはMariaDBです。 XAMPPの標準DBがMariaDBであることに気付いたとき、多くの開発者が驚かれます。XAMPPはPHP開発者にとって非常に便利なローカル開発環境ですが、MariaDBとMySQLの違いやその使い方について混乱することがあります。そこで、今回はXAMPPのデフォルトデータベースであるMariaDBをMySQLに変更する方法について詳しく解説します。 （以下、Windows11のPC環境で行った内容になります） はじめに XAMPPを使用すると、簡単にWindowsでPHPの環境を構築することができます。しか

表を検索したい！簡単に！都道府県別にある情報を簡単に絞り込みたい。というご要望。 セレクトボックスに47都道府県の情報をあらかじめ設定しておきセレクトボックスを選択すると該当の都道府県を検索（絞り込み）する。 というかたちで実装を考えました。 テキストボックスだと入力するの面倒だし、都道府県で絞り込みたいだけなのでこのような形でどうだろうと。 jQueryのプラグインが色々とありましたが、自分でも簡単に表検索の仕組みが実装できそうだったので実装してみました。 参考になればと思い、ソースコードとデモサイトを作ったのでご活用下さいませ。 動作デモ・ソースコード

Result table内のすべてのテキストから検索し、該当箇所のある列を表示する、みたいなやつ ある程度の量を持つデータテーブルだけど超大量でもないから、重いスクリプトは使いたくない、みたいな中途半端な状況の時は少ないコードで済ませたいところですね vanillaなコードで動作します JavaScript(function(document) { 'use strict'; var LightTableFilter = (function(Arr) { var _input; function _onInputEvent(e) { _input = e.target; var tables = document.getElementsByClassName(_input.getAttribute('data-table')); Arr.forEach.call(tables, funct

Gmail を受信できない 実際に Gmail を受信しようとした時に表示されたエラーがこちら。 Thunderbird を起動しても、「Gmail」のパスワードが上手く処理されません。 Gmail にログインできない状態です。もちろん、メールの受信はできません。 エラーのメッセージを書き出してみるとこんな感じ。 xxxxx@gmail.com アカウントエラー ユーザー xxxxx@gmail.com のパスワードを送信できませんでした。メールサーバー pop.google.com からの応答: Username and password not accepted. このようなエラーが出る原因は色々とありますが、2022年6月時点では、多くの場合が Gmail の仕様変更によるものです。 次のような解決方法を試してみて下さい。 解決方法 以下の手順「1」〜「3」を行うことで、再び Gma

2023.3.29 改訂　間違っていた箇所を修正。 Illustratorって、リンクファイルのリンクがいつどこで変わるのか把握しにくくて、管理が難しいですよね。そこで「Illustratorはリンクファイルをどうやって探しているのか」をここで整理してみます。 まず、大前提から。Illustratorファイルの中には「リンクファイルがどこにあるのか」の情報がフルパス（絶対パス）で保管されています。下図は、保管されたリンクファイルのフルパスの例です。 Illustratorは、ファイルを開く時、保管されたフルパスをもとにしてリンクファイルを探します。この時、探しに行く順番があるのです。この順番がとても重要なんです。 フルパスに同名ファイルがあったら、そのファイルとリンク 1 がなかったら、Illustratorファイルと同じ階層にある同名ファイルとリンク 2 がなかったら、Illustrat

雑記ブログ：Safariリーダーで表示されないOpenfirst published: 2019/02/01last updated: 2019/03/03 ふと、iPhoneのSafariで雑記ブログをリーダー表示してみたところ、ボディが何も表示されないことに気がついた。なんじゃこりゃ。 同じような環境を使っている竜さんのrnoteは表示されているため、Gatsby・Airtable・Netlify・日本語環境のせいではない。 まいのこマートで制作中のカスタム投稿も同じような結果。雑記ブログと構造は似ているが article 下部のリンクだけ一部表示されている謎。雑記ブログにしか使っていない rehype-react は関係ないよう。 Safariのリーダー表示はデベロッパーツールの編集を反映しないっぽいので、ブランチ切ってNetlifyにデプロイして確認する。 iOS: Safari

こんにちは、MIO webデザインです。 先日「イメージマップは実際の画像サイズじゃないと使えないのですか？」と訊かれました。スマホなどで閲覧すると画面幅が小さくなるので、当然画像サイズは変わってしまいます。 しかし、area要素のサイズは変わらず、ブラウザを拡大縮小するとイメージマップが崩れてしまう、という事態になってしまいます。 そこで今回はイメージマップを各デバイスでも正常に表示されるよう、レスポンシブ対応させてみたいと思います。 イメージマップの作り方のおさらい まずはイメージマップを準備しないといけませんね。 イメージマップは『HTML Imagemap Generator』さんを使えば簡単に作成できます。 作成手順は過去記事『HTML Imagemap Generatorを使って簡単にイメージマップを作成する方法』を参考にしてください！ 今回はこのようなイメージマップを用意しま

私のブログでは音楽を扱った記事が多いので、大量にYouTubeを埋め込むことが多々あります。 しかし、あまりにたくさんのYouTube動画を埋め込むと、ページの読み込みに時間がかかってしまいます。 そんな悩みを抱えていたある日、下のような記事を発見しました。 追記:元ネタのブログが消えてしまいました。 おお！これこそ、私が探し求めていた記事だ！ この記事で紹介されているコードを参考に、もっと利用しやすいコードに修正してみました。 クリックすると動画が再生されるのが分かるように マウスホバー時のエフェクト YouTubeとは関係ない画像まで消えてしまう問題を解決 以上の3点を実装できるように、コードを改良しました。ブログ主の錠前さんの許可はいただいております。 YouTubeを大量に貼っても重くならないコード [はてなブログでの利用方法]まずはこちらのCSSをデザイン→カスタマイズ→デザイン

2019/1/11 記事内容を大幅に加筆・修正しました。 こんにちわ、ma-ya’s CREATE［まーやずくりえいと］です。 youtubeの埋め込み動画をサイトに設置したいときありますよね。 そんな時は簡単です。見たい動画のページから埋め込みコードを取得してソースに張り付けるだけ。 簡単ですね、ではさようなら。 と、そうは問屋が卸しません。 youtubeの埋め込みはたとえ一つでもサイトに大きな悪影響を及ぼすことがある？ そうなんです。ざっくりと箇条書きにすると 埋め込みyoutubeの読込中はサイトの動きが止まるor瞬断される サイトのレイアウトが一瞬狂うことがある そもそも読込処理が重い たまにコンソールでエラーが出る サイト評価がすんごい下がる ※上記はいずれもブラウザ未キャッシュ時の挙動、そして可能性の話です。あしからず。 ブログなどの投稿ページだったらもうどんどん貼っちゃって

head内限定だったstyle要素の記載がHTML5.2からはbody内にも書けるようになりました ということで私のその件を記事にしております。 ところがW3C validatorでbody内style要素が再びエラー対象に。その理由と解決策など。 html5.2ではstyle要素をbody内に書けるようになりました 意味わからへーん！な方とそうでない方といらっしゃると思いますけれども、結構重要だと思いますので記しておきます。 html5.2が既に正式勧告を済ませてますが、追加要素や廃止要素などに加え style要素をbody内に書くことがinvalidではなくなりました * invalid (インヴァリッド) = 無効, 正しくない の意... CSSの記載の仕方は複数あります FC2ブログの特徴などを絡め、style要素の扱いの歴史をざっと説明します。 まず style要素 が何なのか

チラシに載せるQRコードの作成方法と注意点を紹介します。 チラシにQRコードを掲載する際に、QRコードが小さすぎたり、複数のQRコードを近づけて配置すると読み取れなくなることがあります。 チラシのQRコードでやってはいけ... The post 絶対NG！チラシのQRコードでやりがちな5つの注意点 first appeared on 【商用無料】QRコードお役立ち情報【QR】.

こんにちは、名刺印刷・名刺作成のロコプリです！ スマートフォンの普及によって、更に見かける事が多くなったＱＲコード。 最近は、ブログやSNSのURL、LINEなどのメッセージアプリの連絡先などをQRコード化して名刺に記載する方も多いのではないでしょうか？ さて、QRコードを名刺に記載する場合、幾つかの注意点がございます。 □ 推奨実寸サイズQRコードは、印刷する際に、 20mm × 20mmのサイズを推奨しており、 91mm × 55mmの名刺サイズに配置すると 上図の枠に対し黒■の大きさになります。結構な大きさを確保しなければいけない事が分かります。 ※上記につきましては、本記事下部に追記をしました！ これは、推奨サイズですので、小さくしても読み取れる可能性はありますが、そこで、もう一つの注意点があります。 □ 文字数によってセルの大きさが変わる QRコードは、内容に含める文字数によって

問題 イラストレータにフォントを追加したい。 でもコンピュータにフォントをインストールしたくない（Windows\Fonts フォルダにフォントを増やしたくない）。 答え Illustrator は次のフォントを検索します。 コンピュータにインストールされているフォントを検出します。 フォントファイルおよび拡張子が「*.mmm」「*.pfb」「*.ttf」「*.fon」になっているファイルを下記のフォントフォルダから検索します。 Windows の場合　：　Program Files¥Common Files¥Adobe¥Fonts Mac OS X の場合　：　ライブラリ/Application Support/Adobe/Fonts Mac OS 9.x の場合　：　システム/Application Support/Adobe/Fonts Windows の場合なら、Windows\F

https://free-materials.com/adm/wp-content/uploads/2019/09/logo.png フリー素材ドットコム