スマートフォンやhtml5+CSS3など新技術に四苦八苦。jQuery、AjaxなどJavaScriptも難しいですね。そんなWebに悩む人のネタ帳です。

Windows環境でLaravel 5.7をインストールして、migrateコマンドを実行したのですが、以下のようなSQLエラーが発生して処理が途中で停止してしまいました。

> php artisan migrate
Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Illuminate\Database\QueryException  : SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 767 bytes (SQL: alter table `users` add unique `users_email_unique`(`email`))

発生した環境は以下の通りです。

  • Windows 10 Home 64bit
  • PHP 7.2.14
  • MariaDB 10.1.37

PHP話題のフレームワーク「Laravel」をWindows環境にインストールしてみます。
Laravel – ウェブ職人のためのPHPフレームワーク

インストールするのはLaravel 5.7です。
インストールは公式サイトの手順に沿って実施しますが、Laravel 5.7をインストールするにはPHP 7.1.3以上とComposerが必要とのことです。
インストール 5.7 Laravel

今回構築したのはWindows 10 Home 64bit上です。
ちなみにPHP 7.2.14とComposer 1.8.3がインストール済みです。

Windowsに開発環境を用意するのにDockerを活用しようということになったので、インストールメモです。

今回は「Docker for Windows」を使ってWindows 10 Home 64bitにインストールしてみます。
Get started with Docker for Windows | Docker Documentation

インストールドキュメントを見てみると「Docker for Windows」は「Docker Hub」というところから入手するようです。
Docker Hub

全部英語ですね。。
「Docker Hub」のドキュメントをみると、DockerをWindowsで動かすためには仮想環境「Hyper-V」を備えている「Windows 10 Professional 64bit」もしくは「Windows 10 Enterprise 64bit」が必要だそうです。
それ以外のバージョンの場合には「Docker Toolbox」を使いましょうとのことです。私は「Windows 10 Home 64bit」なので以下のサイトにアクセスします。
Docker Toolbox overview | Docker Documentation

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をインストールするほうが簡単なようなので、その方法で進めてみます。

Nodebrewをインストール

まず、XSERVERにSSHでログインします。

以下のコマンドでNodebrewをダウンロードします。

$ wget git.io/nodebrew

セットアップします。

$ wget git.io/nodebrew

毎度の事ですが、PHPでメールフォームなどのチェックを実装する場合に、
「selectの場合はこれでよかったっけ」、「checkboxの値の取り方は。。。」と調べなおしてしまいます。
分かっているつもりでも、仕事上、使う場面が頻繁でもないのでうっかり忘れてしまいます。

困ったときの手間を省くために、ここのメモに書き留めていきたいと思います。

Bootstrap4のsassを使った効率良いカスタマイズ方法です。

最近、Bootstrapをベースにしてサイトを開発することも多くなってきました。
これまでは何も考えずに、まずはbootstrap.cssを読み込んでから開発をスタートしてたんですが、経験を重ねることで、それがあまり効率が良くないことに気がつきました。

sassを使わないBootstrapのカスタマイズ

Bootstrapをカスタマイズするにあたり、まずは「bootstrap.css」を読み込み、その後に読み込む「style.css」などで上書いていました。
この手法だと「プライマリカラーを変更する」「マージントップを調整する」「角丸をあり(なし)にする」などといった基本的なカスタマイズをするときに、スタイルを上書く箇所の洗い出す作業に時間を取られたり、また、洗い出しの漏れがあって一部デザイン・レイアウトに崩れが発生したりと作業自体が煩雑になりがちでした。

ちなみに、1番初めにBootstrapを触ったときは「bootstrap.css」を直接編集してた気がしますが、言わずもがな問題外ということで。。

sassを使ったBootstrapのカスタマイズ

一方でBootstrapのsassを使うと、先ほどの基本的なカスタマイズがものすごく楽になります。

Monthly Archives