AjaxのクロスドメインエラーをPHPでのCORS(Cross-Origin Resource Sharing)ヘッダ設定で回避する方法です。
久しぶりにAPIを開発していたのですが、Ajaxを利用してアクセスすると、以下のようなエラーになってしまいました。
Google Chromeでは
Access to XMLHttpRequest at 'http://BBB/api/xxx.json?xxx=xxx' from origin 'http://AAA' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Firefoxでは
クロスオリジン要求をブロックしました: 同一生成元ポリシーにより、http://BBB/api/xxx.json?xxx=xxx にあるリモートリソースの読み込みは拒否されます (理由: CORS ヘッダー ‘Access-Control-Allow-Origin’ が足りない)。[詳細]
最近、自身のマシンにNode.jsをインストールしました。タスクランナーなど開発環境として活用してますが、便利ですね。
そんな中、サーバサイドにもNode.jsを入れて、いろいろやってみたくなりました。
独自サーバでも借りなきゃNode.jsをインストールすることは難しいかと考えておりましたが、普段、お世話になっているレンタルサーバ「XSERVER」にも導入可能という情報を得たので、早速トライしてみました。
直接Node.jsを入れるよりは、Nodebrewをインストールするほうが簡単なようなので、その方法で進めてみます。
まず、XSERVERにSSHでログインします。
以下のコマンドでNodebrewをダウンロードします。
$ wget git.io/nodebrew
セットアップします。
$ perl nodebrew setup
毎度の事ですが、PHPでメールフォームなどのチェックを実装する場合に、
「selectの場合はこれでよかったっけ」、「checkboxの値の取り方は。。。」と調べなおしてしまいます。
分かっているつもりでも、仕事上、使う場面が頻繁でもないのでうっかり忘れてしまいます。
困ったときの手間を省くために、ここのメモに書き留めていきたいと思います。
Bootstrap4のsassを使った効率良いカスタマイズ方法です。
最近、Bootstrapをベースにしてサイトを開発することも多くなってきました。
これまでは何も考えずに、まずはbootstrap.cssを読み込んでから開発をスタートしてたんですが、経験を重ねることで、それがあまり効率が良くないことに気がつきました。
Bootstrapをカスタマイズするにあたり、まずは「bootstrap.css」を読み込み、その後に読み込む「style.css」などで上書いていました。
この手法だと「プライマリカラーを変更する」「マージントップを調整する」「角丸をあり（なし）にする」などといった基本的なカスタマイズをするときに、スタイルを上書く箇所の洗い出す作業に時間を取られたり、また、洗い出しの漏れがあって一部デザイン・レイアウトに崩れが発生したりと作業自体が煩雑になりがちでした。
ちなみに、1番初めにBootstrapを触ったときは「bootstrap.css」を直接編集してた気がしますが、言わずもがな問題外ということで。。
一方でBootstrapのsassを使うと、先ほどの基本的なカスタマイズがものすごく楽になります。
node-sassを使ってWindows上にsassをコンパイルする環境を構築します。
昨今、sassをコンパイルする環境は様々です。
中には環境構築が複雑でタスクランナーなどがエラーで走らなかったりと、そもそも効率悪くなってない？と疑問に思うこともありますが、今回はシンプルに「scssファイルをコンパイルする」ことだけに焦点を当てたいと思います。
導入した環境は以下の通りです。
| Windows 10 Home 64bit |
| Node.js 10.14.1 |
| node-sass 4.7.2 |
まずはnode-sassを動作させるために必要なNode.jsをインストールします。
Node.js
突然、普段使用しているWindows端末で、TortoiseGitのアイコンオーバレイが表示されなくなりました。
いろいろと調べて対処方法を探していたのですが、以下の方法で無事解決しました。
最近、sassにもだいぶ慣れてきました。
コード管理をスマートにしてくれるsassですが、コードが大量になると流石に煩雑になりがちです。
そこで、大量のソースを複数ファイルに分割してインポートしてみます。
例えばsassの変数をまとめたファイル「_values.scss」を用意します。
ファイル名の先頭にアンダースコアを入れたものをパーシャルファイルといいます。
パーシャルファイルはsassコマンドを実行してもコンパイルされず、「values.css」は生成されません。importされる専用の外部ファイルとして扱われます。
$color-link: #2266bb; $font-size-l: 2.0rem;
その他に、reset.cssの内容をまとめたファイル「_reset.scss」。
a{
color: $color-link;
}
モジュールをまとめたファイル「_modules.scss」などを用意します。
.module01{
font-size: $font-size-l;
}
どなたでも無料でQRコードを簡単に作成できるツールを公開しました。
URLやメールアドレスなど任意の文字列を入力した後に「作成」ボタンを押すとQRコードが作成されます。
PHPでカラーコード「HEX」を「RGB」に変換する方法です。
CMSで設定したテーマカラーなどに透過率を指定したく、既にHEXで設定されているカラーコードでは都合が悪かったので、システム内でRGBに変換しました。
HEXとRGBの違いについては、赤、緑、青の3原色を、それぞれ16進数、10進数で表現しています。
したがって、処理としてはシンプルに16進数を10進数に変換すればよいだけです。
例えば、任意の赤「#F44336」をRGBに変換します。
Ubuntu 16.04でタスクの自動実行を設定してみます。
Windowsではタスクスケジューラで、ウイルスチェックやファイルバックアップを定期的に実行しますが、Linuxではcron機能を追加ます。
昔ながらの「/etc/cron.d/」にあるファイルを直接編集する方法もありますが、今回はcrontabコマンドを使ったタスク管理の方法を確認します。
crontabコマンドを使うことで、直接ファイルを指定して編集することなく、また、ユーザ毎に設定を編集することができます。
$ crontab -l
crontabの設定内容の確認方法です。
基本的には初期状態では何も設定されていないはずなので、「no crontab for user」というようなメッセージが帰ってくると思います。