WindowsにComposerをインストールします。
ComposerはPHPのパッケージ管理システムです。
Composer
最近、PHPでライブラリなどを導入する場合、composerを使用するのが当たり前になっています。
PHP開発において、各々のライブラリを直接ダウンロード・展開を繰り返すと、ディレクトリ構造がめちゃくちゃになったり、どのライブラリがどこにあるのかなど、管理が煩雑になりがちです。
Composerを使用すれば、管理ファイルを元にライブラリを自動でインストールしてくれます。また、目的のライブラリの依存関係のある他のライブラリ群も自動でインストールしてくれるので、環境構築も容易になります。
今回は、ComposerをWindows環境にインストールします。ちなみにWindowsにPHPはインストール済みであることを前提とします。
| Windows | 10 Home |
|---|---|
| PHP | 5.6.28 |
| composer | 1.8.3 |
だいぶ遅れてますが、最近「Spotify」というサービスを知りまして、元々私が音楽好きなのもありまして、ハマっております。。。
音楽発見サービス – Spotify
そんな中、SpotifyのAPIを使った多くのサービスやアプリがある事を知り、少し触ってみたくなりました。
Spotify APIを使うためにはアカウントが必要です。それにはまず上記の公式サイトでアカウントを作成します。
アカウントを作成したら、デベロッパーサイトにアクセスしログインします。
Spotify for Developers
上記サイトのメニュー「DASHBOARD」をクリックし、「LOG IN」ボタンを押します。
ポップアップでログイン画面が開くので、そこにSpotifyのアカウント情報を入力してログインします。
Windows 10 Homeでゲストユーザ「Guest」を追加したいです。
Windowsではお馴染みのユーザ「Guest」。
少しの間だけ友人にノートPCを貸したり、デモやプレゼンテーションなどでノートPCを使うなど、個人のデスクトップを公には見せられない場面で、ゲストユーザは重宝してきました。
しかし、Windows 10からゲストユーザがセキュリティの観点から廃止されたそうです。
Windows 10 Proではシステムメニューなどから復活できるようですが、Windows 10 Homeでは少し操作が難しそうです。
そこで、これまで便利だった「Guest」に代わって、自前でゲストユーザを用意する方法のご紹介です。
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
セットアップします。
$ wget git.io/nodebrew
毎度の事ですが、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;
}