前回、Windows上で「Node.js」と「gulp.js」をインストールして、「gulp.js」を使用できる環境を用意しました。
WindowsでNode.js、gulp.jsをインストールして効率よい開発環境を目指す（準備編）
繰り返しになりますが「gulp.js」は本体のみでは機能せず、必要は機能をプラグインとしてインストールする必要があります。
今回はHTML、CSS、JavaScriptを含む静的Webページコーディングの、快適な開発環境構築を目指して便利そうなプラグインをいくつか紹介したいと思います。
まずは任意のプロジェクトフォルダのルートに移動し、「gulp.js」を利用する準備をします。
> npm init > npm install --save-dev gulp
新規で「gulpfile.js」を用意し、「gulp.js」をロードしておきます。
var gulp = require('gulp');
このファイルを編集することで、機能を追加していきます。
最近「Node.js」や「gulp.js」といったキーワードをよく耳にします。
プログラミングやコーディングの作業効率を改善する環境を構築できるようなので、モノは試し、まずはベースとなる環境を整えてみます。
この技術は基本的にCUI環境で操作するで、LinuxベースのMacなどの環境に関するドキュメントが多いですが、今回はWindowsでの環境構築を目指します。
以下、今回導入したバージョン情報です。
| OS | Windows 7 Professional 64bit |
|---|---|
| Node.js | 5.4.0 |
| npm | 3.6.0 |
| gulp.js | 3.9.1 |
今回「gulp.js」のプラグインを使用することが目的ですが、そのためにはnpmコマンドが必要で、npmを使用するために「Node.js」をインストールするといった流れです。
FuelPHPの機能を活用して、良い感じで他言語対応サイトを構築できないか、考えてみました。
そこで、クラスAgent、Cookie、Langを活用したサイト構築にトライしてみました。
今回は、日本語ユーザがブラウザでアクセスした際は日本語表示で、そうでない場合は英語表示でサイトを切り替えることを目指します。
まず、言語を切り替える文言について、言語ファイルを「/fuel/app/lang/」に用意します。
ファイル名は任意ですが、各言語はフォーマットを含めて統一させます。
例えば以下のファイルを用意します。
WordPress 4.4にアップデートしてから、記事に投稿した画像の出力まわりがおかしくなりました。
Firefoxでサイトを確認してみると、それまで画像が表示されていたところが表示されなくなっている。。。
ソースをチェックすると、画像メディアを追加してサムネイルを表示していた部分が以下のようになっていました。
<img src="/images/sample-300x250.jpg" alt="サンプル" width="300" height="250" class="size-medium wp-image-3114" srcset="/images/sample-300x250.jpg 300w, /images/sample.jpg 525w" sizes="(max-width: 300px) 100vw, 300px" />
「srcset」や「sizes」など見慣れない属性が追加されています。
どうやら、レスポンシブに対応するべく追加された新しい機能のようです。
ブラウザサイズに応じて画像を切り替えたり、Retinaディスプレイなど解像度の高いデバイスに対応したりと、
レスポンシブサイトにおいて、あらゆるデバイスに対して最適な画像を動的に出力してくれるようです。
つまり、画像が荒れたり、必要もないのに全てのサイズの画像を読み込んだりといったリスクを避けることができるようです。
※この技術の詳細についてはまた次回の宿題とします。。。
5年ほど前に以下の記事を書きました。
jQueryプラグイン「jquery.cookie.js」でお手軽にクッキーを操作する
久しぶりに公式サイトをのぞいてみるとjQueryを使わない、JavaScriptのプラグインとして開発が移っていたようです。
js-cookie/js-cookie: A simple, lightweight JavaScript API for handling browser cookies
改めて、便利な使い方を確認したいと思います。
導入方法はとても簡単です。
上記サイトから「js.cookie.js」をダウンロードして読み込みます。
<script type="text/javascript" src="/js/js.cookie.js"></script>
cookieの操作だけが目的の場合に、jQueryを読み込まなくてもよいので容量が軽くて済みます。また、jQueryのバージョンなどベースライブラリの依存も考慮する必要もなくなりました。
PHPの関数「unserialize」でエラーが発生する場合の対処方法です。
久しぶりにドツボにはまりました。。。
「serialize」で処理されたデータについて「unserialize」で元に戻そうとしたのですが、どうしてもエラーになってしまいます。
unserialize($data);
unserialize(): Error at offset xxx of xxx bytes
私のケースでは、FuelPHPでユーザ管理のモデルを作成し、プロフィールフィールドにデータを格納したときのお話です。
拡張性を持たせたテーブルのプロフィールフィールドは、1つのカラムに配列をシリアライズしたデータを格納します。
そのデータをSQLで取り出し、「unserialize」した時にエラーになってしまうのです。
ちなみに、現象が発生した環境は以下の通りです。
ネットで調べてみると、似たような現象がちらほら見受けられます。
FuelPHPのValidationクラスを使ってフォームの項目チェックを実装します
例えば、フォームで入力された「ユーザ名」の入力必須をチェックします。
ユーザ名：<input type="text" name="username" value="">
「投稿する」などsubmitボタン押下時に、コントローラ内でValidationを実行します。
上記のHTMLからポストされた「ユーザ名」の必須チェックを行う場合、以下のように記述します。
$val = Validation::forge();
$val->add('username', 'ユーザ名')
->add_rule('required');
if($val->run()){
// チェックOK
}else{
// 入力エラー
}
関数「add」の第1引数に要素名、第2引数に要素のラベルを設定します。ラベルはエラーメッセージの表示の際などに利用されます。
「add_rule」に「required」を設定することで必須チェックをします。
「run」でValidationを実行し、入力内容に問題がなければtrueが返されます。この判定で、DBへのデータの入出力や、どのviewで画面を表示するかなどの処理を分岐させることができます。
Windows 8.1（Windows 10）のノートPCがスリープ状態から勝手に復帰する場合の対策方法です。
ウルトラブックという言葉も聞かなくなりましたが、Windows 8.1からタブレット意識したOSとなり、PCを使わない間は電源を切らず、スリープモードにするだけで大丈夫という設計になりました。
私もWindows 8.1のノートPCを使うようになり、特に再起動する必要がない場合を除き、日常はディスプレイを閉じてスリープ状態のままほったらかしにして使っています。
そんなある日、鞄の中に入れていたPCがいつの間にかスリープから復帰し、空気のこもった中でファンがフル回転している！
鞄の中がかなり熱くなっており、気づくのが遅れればそのまま壊れてしまっていたかもしれません。
なぜ勝手にスリープから復帰したのか？
調べてみると、いくつかスリープから自動復帰する機能があり、その中の一つが原因でした。
そこで、それぞれのスリープ自動復帰機能の解除方法です。
ヘッダ、フッタやサイドメニューなど共通部品をテンプレート化するため、FuelPHPのTemplateコントローラを導入してみます。
CMSでサイトを構築する場合に、各ページのヘッダ、フッタなどの共通部分については一元管理したいですよね。
FuelPHPでその方法を探していました。
View部分の機能で実現すると思い込み、ドキュメントを読んでいたのですが、出てきたキーワードが「ビューの入れ子」。
その名と通り、Viewの中でさらにViewを読み込むということですが、何だかスマートじゃない。。。
その他をいろいろと調べていたら「Templateコントローラ」という機能を見つけました。
FuelPHPではコントローラでレイアウトのテンプレートを定義するのですね。
さて、以下、導入方法です。
ちなみに今回確認したのは「FuelPHP 1.7.3」です
Ubuntu 14.04にphpMyAdminをインストールするメモです。
前提として以下の環境が整っているものとします。
Apache 2.4.7
PHP 5.5.9
MySQL 5.5.46
インストールには以下のコマンドを実行します
sudo apt-get install phpmyadmin
途中、以下のメッセージが表示されることがあります
phpmyadmin を設定しています phpMyAdmin を動作させるために自動再設定を行うwebサーバを選んでください。 自動再設定するwebサーバ：