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

いまさらですが、Googleタグマネージャーを導入してみたいと思います。

これまではページ解析という意味では、アクセス数ぐらいしかみていませんでした。
しかし、ある程度見ていただける方、利用していただける方が増えてきたのもあり、その方々のためにも、少しでもよいコンテンツにしていけたらと思い、もう一歩踏み込んだアクセス解析をしてみようと考えました。

それこそ一般的なGoogle Analyticsのトラッキングコードを埋め込む運用だけでしたが、Googleタグマネージャーを活用すれば、イベントトラッキングの運用や、その他クッキーなどを利用した細かい解析もできるということで、とりあえずここでは導入だけしてみようと思います。

Googleタグマネージャーアカウントを有効にする

ここでは、既にGoogleアカウントを持っていることを前提とします。
ブラウザでGoogleにログインしている状態で、以下のページにアクセスします。
Google Tag Manager

初期状態だとアカウント作成画面が表示されます。
「アカウント名」は会社名、個人名や団体名、「コンテナの設定」はサイトドメインを入力して作成します。

WiMAXのモバイル端末「Speed Wi-Fi NEXT WX01」を利用しているのですが、最近、バッテリー(リチウムイオン電池)が膨張してきたので、買い換えました。

ある日、出張だったので、WiMAXを携帯しようと思って手に取ってみると、なんだか違和感。。厚みがあります。

商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。お買い物される際には、必ず商品ページの情報を確認いただきますようお願いいたします。また商品ページが削除された場合は、「最新の情報が表示できませんでした」と表示されます。

Speed Wi-Fi NEXT WiMAX 2+ WX01 ディープブルー NAD31SLU
価格:19240円(税込、送料無料) (2016/9/3時点)

本体が膨らんで背面のカバーが少し浮いており、一部隙間ができています。背面カバーを外してみると「ポコン」とバッテリーが跳ねるように外れました。
バッテリーをよく見ると、明らかに厚み1.3倍程度に膨らんでいます。

今回はレンタルサーバの「XSERVER」にGitをインストールして、リモートリポジトリとして利用してみます。

前提として、PuTTyなどコマンドラインツールからXSERVERへSSH接続ができるところまでは準備済みとします。

gettextのインストール

Gitではgettextというライブラリを使用しているので、まずはgettextからインストールします。
gettext – GNU Project – Free Software Foundation (FSF)

現時点での最新版は0.19.8なので、このパッケージをダウンロードしてインストールします。

$ wget http://ftp.gnu.org/pub/gnu/gettext/gettext-0.19.8.tar.gz
$ tar zxvf gettext-0.19.8.tar.gz
$ cd gettext-0.19.8
$ ./configure --prefix=/home/(ユーザID)/opt
$ make
$ make install

インストールが完了したら、以下のコマンドで動作確認します。

$ ~/opt/bin/gettext --version
gettext (GNU gettext-runtime) 0.19.8
Copyright (C) 1995-1997, 2000-2007 Free Software Foundation, Inc.
License GPLv3+: GNU GPL version 3 or later 
This is free software: you are free to change and redistribute it.
There is NO WARRANTY, to the extent permitted by law.

gettextのパスを通しておくと便利です

$ cd ~
$ vi .bashrc

「.bashrc」に以下の設定を追加します。

export PATH=$PATH:$HOME/opt/bin

「ownCloud」をレンタルサーバにインストールする方法です。
「ownCloud」はPHPベースのオープンソースで、サーバにインストールすることでDropboxのような環境を構築することができます。
ownCloud.org

「Dropbox」、「Google Drive」や「OneDrive」を使えばよい話ですが、「クラウド」つまりよく分からない領域に個人的ファイルを保存しておくのが気持ち悪いと考える人も少なからずいるはずです。
また、これらのクラウドサービスに障害が発生した場合に、泣き寝入りする以外ありません。
さらには、使い勝手にちょっとした不満がある時に、「ownCloud」はPHPベースなので、ある程度カスタマイズが可能です。(たぶん)

そこで今回、レンタルサーバ「heteml」に「ownCloud」をインストールしてみます。
検証した環境は以下のとおりです。

レンタルサーバ heteml
ownCloud 9.0.1

Googleのサービス「PageSpeed Insights」の解析結果で「修正が必要:圧縮を有効にする」という項目があります。
今回は、こちらの問題の対策について検証してみます。

概要

「修正が必要:圧縮を有効にする」についてですが、

モダンブラウザでは、gzipやdeflateによって圧縮されたHTML、CSSやJavaScriptなどの静的データを表示する機能が備わっています。
サーバにこれらリソースへのリクエストがあった場合に、圧縮してブラウザにダウンロードすれば、ネットワーク負荷が軽減できて、ページ表示速度が改善するということです。

つまりメッセージ「修正が必要:圧縮を有効にする」は、静的コンテンツを何かしらのしくみで圧縮してクライアントブラウザに転送しましょうという意味です。
加えてGoogleでは、具体的に以下の方法でその対策が可能であることを提案しています。

  • Apacheの「mod_deflate」を使用する
  • Nginxの「HttpGzipModule」を使用する
  • IISのHTTP圧縮を設定する

導入方法

今回はApacheのmod_deflateを利用します。
サーバでmod_deflateが有効であることが前提条件となります。レンタルサーバなどでは、事前に利用可能かどうか調べましょう。

具体的な導入例ですが、テキスト「.htaccess」に以下を記述してサーバのルートディレクトリに設定します。
既に「.htaccess」が存在する場合は、テキストエディタで開いて、追記します。

SSLサーバ証明書を取得したので、これまでの「http://」へのアクセスを強制的に「https://」へリダイレクトするようにサーバを設定します。

今回は、.htaccessファイルを使用してリダイレクトを設定します。
ドキュメントルートに設置してあるファイル「.htaccess」をテキストエディタで開き、以下の内容をのテキストの先頭部分に追記します。

<IfModule mod_rewrite.c>
	RewriteEngine on
	RewriteCond %{HTTPS} off
	RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

{HTTPS}がoffの場合、つまり、アクセスが「https://」でない場合に、リダイレクトを実行します。
301は恒久的、つまり、今後ずっとを意味します。302は一時的なリダイレクトとなるので、目的に応じて設定します。

ここでGoogleなどのアクセス解析は、「http://」と「https://」を別サイトとして識別します。
これまでのサイトへの評価をどう引き継ぐかも意味するので、301と302は慎重に決定したほうがよいと思います。

以上、小ネタですがメモまで。

リモートリポジトリにHTTP経由でアクセスするための、Gitサーバの設定ついてのメモです。

今回はUbuntuにApacheがインストール済みであることが前提です。
確認環境は以下のとおりです。

Ubuntu 16.04
Apache2 2.4.18
Git 2.7.4

リポジトリを用意する

まずはじめにGitサーバを用意します。
Gitがない場合、以下のコマンドでインストールします。

$ sudo apt-get install git

次に「/home/user/git/project.git/」にリモートリポジトリを作成します。

$ mkdir git
$ cd git
$ git init --bare --shared project.git

作成したリポジトリ全体について、Apacheユーザのアクセス権を与えます。Apacheユーザはデフォルトでは「www-data」です。

$ sudo chown -R www-data:www-data project.git

リポジトリの準備は以上です。

WAF(Web Application Firewall)はWebサイトを改ざん、情報流出やウイルス感染などから守るツールです。
最近ではレンタルサーバなどにデフォルトの機能として備わっていることもあり、導入コストが低くなってきました。

但し、このWAFを有効することにより、これまで動作していたWebアプリケーションなどが動作しなくなることもあります。
WAFの一部機能をOFFにするなど設定を調整することで、アプリケーションの不具合を回避することもできますが、それがセキュリティに穴をあける要因になることもあります。

そこで本記事は、WAFの機能はそのままで、Webアプリケーションへの弊害と対策をケースバイケースでまとめます。

ちなみに本内容は、主にさくらレンタルサーバのWAF、JP-Secure製の「SiteGuard」上での事例ですが、別の環境でも有効な場合がありますので、ご参考にしていただければと思います。

PHPでクッキーにアクセスできない

以下のようにして、PHPではクッキーにアクセスできない場合があります。

setcookie('sample', 100);
$val = $_COOKIE['sample'];	// 取得できない

このような場合にはSESSION管理で一時データを保存するるようにしましょう。

前回、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」をインストールするといった流れです。

Monthly Archives

Search