最近のGoogleからの推奨で、ウェブサイトの全体SSL化が推奨されていますね。

私が運営している複数のサイトも、SSLに対応するため、複数のサイトをSSLに対応しました。

SSL移行の手順

手順としては以下の通りです。

１．　サイトをHTTPSで見れる設定にして、記述を諸々変更する
２・　301リダイレクトでHTTPへのアクセスはHTTPSへ飛ばす
３・　ウェブマスターツールでHTTPSのサイトを新しく登録し、Google AnalyticsのサイトのURL設定を変更する

といった形で、複数のサイト（１０サイト程度）をほぼ同時期にHTTPS化しました

SSL化する方法としては、Cloudflareの無料SSLを使っています。

結果

結果としてですが、複数のサイト（１０サイト程度）で、アクセス数の増減が発生しました。

SSL化してすぐに発生したわけではなく、1週間か2週間程度経ってから発生しました。
(それまでは問題なかったのにです。）

サイトのアクセス数の減少度合いはサイトによってばらつきがあり、最も大きく減少したサイトは、アクセス数が6割程度減少しました。

少ないサイトでは2割程度の減少で、サイトによってはアクセス数がほぼ変動なしのサイトや、むしろ増加したサイトも見られました。
（大幅に増加したサイトはなく、微増といったかんじです）

何故アクセス数が減少したかの考察

アクセス数が減少した理由についていろいろと調査してみましたが、まず、ウェブマスターツールを調べてみたところ、サイト全体の平均検索順位の低下はそこまで顕著には見られませんでした。

それにも関わらずアクセス数が減少幅が大きいサイトで6割も減少したのは、別の理由がありました。

原因としては、HTTPS移行後の特定のURLがインデックスに登録されなくなったことにありました

ウェブマスターツールで調べてみたところ、以前はインデックスされて上位に表示されていた複数のページが

「Google により、ユーザーがマークしたページとは異なるページが正規ページとして選択されました」という結果でインデックスから削除されていることが確認されました。

それらのページがランディングページとしてサイトに流入していたアクセスがごっそり消えてしまったわけです

上記のエラーは、HTTPのURLとHTTPSのURLが混在しているため、HTTPSのほうを非表示にしているといった内容ではなく、何故か移行後の特定のURLがそれまでは単一のURLとみなされていたのが重複URLをみなされてインデックスから除外されてしまうということが発生してしまったわけです。

これには正直困りました。

なぜなら、そのサイトでも、特定のページは問題なく移行できているものもあるのに、特定のURL(パーマリンク設定のURL）のぶんだけ移行できなくなってしまったからです。

設定に不備がなかったからサイトのページを何度も確認してみましたが、Canonical設定の不備や記述の不備も見当たらず、困り果ててしまいました。

そもそも、サイトやページによって何故こうもばらつきがあるのかも理解できませんでした。

HTTP→HTTPSへの完全な移行には一ヶ月ほどかかるそうなので時間がかかるのであれば仕方がないですが、もし回復しなかった場合、致命的な結果ということになります。

結論：サイト全体のHTTPS化は一概に推奨はできない

HTTPSの通信は、ネット通販で個人情報を入力するサイトなど、サイトによってはなくてはならない必須の技術です。

しかし、サイト全体のHTTP→HTTPS化は、移行に伴う検索順位の低下のリスクが伴うことが分かりました。

移行手順に不備があった可能性も考えられますが、それがGoogleの管理コンソールにどういった理由かも表示されず、ただ一方的に順位の低下やインデックスからの削除のみ、結果として受け取らないといけないのは、Google側の不備としかいいようがない気がします。

HTTPS化はGoogleから推奨はされているものの、検索順位のアップなど、メリットが明確に受け取れるわけではないので、どうしても必要という場合以外は見送ったほうが賢明な判断だと思いました。

利用しているサーバはConohaのKusanagiで、Nginx+php7の環境。

phpでフォームを作った際に、PHPの「max_input vars」の設定に引っかかって、変数が投稿できなくなってしまった。

調べてみると、現状の設定が

max_input vars 1000

になっていて、これを

max_input vars 3000

あたりに変更したい。

nginxは、.htaccessが使えないので、php.iniで設定を変更するが、どのファイルを変更したらいいのか分かりにくい。

そのときは、phpinfo()で出力したファイルで、php.iniの設定ファイルの場所が確認できるので、場所を確認する

私の環境の場合には

/etx/php7.d/php.ini

を変更すればよかった。

上記のphp.iniを開き

max_input vars 1000
↓
max_input vars 3000

に変更

その後、設定を反映させるためにphpを再起動

kusanagi php7

私の環境はphp7なので、上記のコマンドでphpを再起動して反映できる。

現在の自分の環境を確認するには、

kusanagi status

のコマンドが便利な他、phpの設定の確認には phpinfo()　を利用するとよいだろう。

サイト運営に利用していたサーバを、サーバの運営に利用していたPleskの値上がりを受けて別のサーバへ移行しました。

サーバの環境もけっこう代わりました。

移行前の環境
php5+Apache

移行後の環境
php7+Nginx

すんなりサーバが移行できたわけでなくて、いろいろとトラブルも発生したので発生した問題点と、解決方法について備忘録として書いておきます。

１．サーバを移行しようと思った理由

これまで使用していたサーバの月額費用が、Pleskのライセンス費用で値上がりしたと、いってみればそれだけの理由です。
試算してみると、Plesk抜きのサーバへ移行すると月額2000円〜最大で3000円ほど（年額換算で3万円ほど）節約できる試算になったのでこのタイミングで移行することにしました。

２，移行したサーバ会社

ConohaのVPSに移行しました。

Conohaを決めた理由としては

• サーバに最新技術が導入されていてサイトの動作速度向上が期待できる
• Pleskは使えないが、Kusanagiコマンドで簡単にサイト設定を行うことができる
• 費用面でサーバのメモリを少なくすれば月額費用はかなり少なくてすむ

という点になります。

２．移行プロセス

カスタムパーマリンクが機能しない

まず、サーバ管理のソフトウェアをApacheからNginxに変更しました。

理由としては、速いから？　よく分かりませんがそうしました。

そしてPHPのバージョンを７にしてみたのですが、これはうまく行かず、理由としては、WordPressのカスタムパーマリンクが上手く機能しなかったから。

URL/〜〜〜/〜〜〜/

上記のようなWordPress上で設定していたURL設定が機能せず、Not Foundとなる。
この解決方法がわからなかったので、別の方法を考えました。
（理由としてはNginxの設定だったのですが、最初は分かりませんでした）

Apache + HHVMを試してみる

結局サーバのNginxではだめだったので、HHVMでサーバを変更してみることにしました。

HHVMというのはPHPのバージョンの１つのようなものなのですが、NginxではなくApacheで動作します。
kusanagiだとワンボタンでサービスを変更できるので、変更してみたところ、問題なくサイトが機能した・・・ように見えました。

訪れる謎の高負荷と、サーバダウン

HHVM+Apacheは、HHVMのキャッシュに機能で動作が非常に高速で、サーバ移行前と比べると動作が高速化してめでたしめだたし・・・・かと思いました

が、数時間おきにサーバに謎の高負荷がかかりサーバダウンするという現象が起きました。

とりあえず応急処置としてこまめにHHVMの再起動設定

調べてみたところ、ConohaのKusanagiのHHVMは不安定でときどきダウンすることがあるということでした。

応急処置として、cron設定で１分ごとにHHVMを再起動するように設定しました。
これにより、仮にサーバがダウンしても長時間そのままダウンし続けるという自体は避けることができます。

原因はよく分からないのですが、とりあえず同様の現象の方はいたようで、またあくまで応急処置で、数時間に一度、数分程度サーバがダウンしてしまうということ自体が解消されたわけではなく、さすがにその状況でサーバを運営し続けることは品質面で問題といえます。

そこで、別の方法を検討することにしました。

すると、Nginxに切り替えると安定するということでした。

Nginx+PHP7に再度挑戦

最初にいったんやろうとしてあきらめたNginx+PHP7への移行に再度挑戦してみることにしました。

Conohaのサービスでは、サーバをイメージ保存しておいて、そのコピーのサーバを簡単に作成できるので、HHVMのサーバは残した状態で、コピーしたサーバを作成し、Nginxの設定に変更してテストを行いました。

こういうことがコントロールパネルから簡単にできるのも、Conohaの優れている点です。

カスタムパーマリンクの対応

まず、カスタムパーマリンクが動作しない点については、Nginxは.htaccessが使えないのでNginxの設定ファイルに記述しないといけないということでした。

Nginxの設定ファイルは、nginx.confというファイルに設定されているのですが、このファイルに正規表現を使って様々な記述がされていたので、この設定をサイトごとに設定しました。

この作業は少し手間がかかる作業でしたが、完了することで、無事パーマリンクが機能するようになりました。

PHP7で動作しないファイルの修正

次に、以前のサーバがPHP５で動かしていたので、PHP7になることで動作しないファイルが大量に出現したので、これらのエラーファイルを順に修正していきました。

エラー箇所の特定は、Nginxのエラーログファイルを見ながらエラー箇所を特定し、修正してきました。

これらは運営しているサイトの数が多かったのでかなりの作業量が必要になり、なかなか大変な作業だったのですが、HHVMにしたときに数時間おきに少しの間サーバがダウンするのはサービス品質に対して影響が大きいだろうということでやむをえず行いました。

PHP5の記述とPHP7では、特にデータベース回りの記述が変更になっている箇所が多かったので、修正箇所は多岐に渡りました。

また、WordPressのプラグインも、PHP7に対応していないプラグインは削除したり、ファイルの修正で対応できるものは対応するということが必要になりました。

サーバの移行完了

これらの作業を終えることで、無事Apache+PHP5からNginx+PHP7への移行が完了しました。

つまづいた点としては、

• .htaccessが使えないのでパーマリンク設定をnginx.confに記述しなければならない
• PHP5の記述が一部動作しないのでエラーが起こる点はPHP7で動作するように修正しなければならない

という主に２点になります。

思った以上に移行作業は時間はかかりましたが、結果的にサーバのランニングコストを下げることができ、サイトもNginx+PHP7になったことで高速化したように見えるのは良い点ではないかと思います。

まだサーバが移行したばかりなので予期せぬトラブルはあるかもしれませんが、しばらく様子見したいと思います。

phpのファイルで、特定のファイルをincludeして読み込んだ場合に、謎の空白行が上に1行入る問題がありました。

発生した問題

phpファイルのヘッダの上に謎の空白行が1行表示される

原因の究明方法

まずはchromeのデベロッパーツールでソースコードを調べたが、ソースコード上には何の問題も見られない。
phpファイルのプログラムの行を削除して調べていたところ、特定のphpファイルをincludeした際に改行が入っていた。
該当のphpファイルを調査したが、問題ないソースコードであるように見受けられ、不要な出力や改行、全角文字なども見当たらなかった。

解決策

該当の問題となっていたphpファイルを新規作成して作り直し、同様のコードをコピーペーストして同様の内容とした。
作り直したファイルをアップロードしたところ問題は解消した。

つまり、もともとのファイルを作成した際に、文字コードや改行コードの微妙な違いがあったようである。

詳しい原因は分からないが、作成した時に使っていたエディタや環境と、現在使っている環境（phpstorm)が異なっていたために、微妙な差があって発生していた問題かもしれない。

EC-CUBE３のインストールをローカル環境で試していたところ、ステップ4のインストール時のデータベース設定でエラーが出た。

データベースに接続できませんでした。 || An exception occured in driver: SQLSTATE[HY000] [2002] No such file or directory

データベースはMySQLを使用していて、データベースとユーザは作成済みだったがエラー。

原因はよくわからなかったが、以下の方法で解決した。

ホスト名の部分を

localhost

から

127.0.0.1

に変更

これで通るようになった。

原因はよくわからないが、おそらくローカル開発環境の設定上の問題であろうと思われる。

PHPのプログラムで特定のサイトURLとキーワードからGoogleでの検索順位を取得し、結果を返すプログラムを作りたいと思いました。

理由としては、運営しているサイトの検索順位の日時変動を手動でチェックして記録するというのは手間がかかる作業だからです。

プログラムで実行でき、さらにcronで自動実行し、結果をデータベースに保存するということができれば楽になります。
そういうツールもあるのですが、何かと制限があったり、融通はきかないので。

まず、プログラムで検索順位を取得する方法についてですが、考えられる方法として、Googleの検索フォームにポストで変数を投げて、結果をスクレイピングするというものですが、これは規約によりやるとまずい場合があるということでやめました。
実行回数が多かったり検知されるとIPアドレスをブロックされるということがあるみたいです。
実際にやってないので分かりませんが・・・。

もう１つの方法として、Google Custom Search APIを使用するというものです。
こちらは公式に許可されている方法なので問題はないのですが、無料の場合は１日100クエリまでということで制限が入るようです。

それでこの方法を試してみたところ、一応目的に近いものはできたので、詳細は省略しますが、ざっくりとその過程と、この方法の現状での問題点を書いていこうと思います。

１． Google Custom SearchのAPI keyを取得する

Google Custom SearchのAPIを使用するにはAPI KEYが必要となるので取得します。
方法はネットを探すと出て来る思うのでここでは省略します。

２． カスタム検索エンジンIDを取得する

プログラムの中で使用するカスタム検索エンジンの検索エンジンIDを取得します。
カスタム検索エンジンIDは、カスタム検索エンジンを作成してから、詳細の画面で「検索エンジンID」というボタンを押すと表示されます。
※ 画面はときどき変わってしまいますが、探すと詳細画面のどこかで取得できると思います。

なお、カスタム検索エンジンを作成の際にはどのサイトで使用するかのサイト名を入力する必要があるのですが、作成後に詳細画面から「基本」タブの「検索するサイト」の項目で「追加したサイトを重視して、ウェブ全体を検索する」に設定を変更することで、

３． プログラムを作成する

１．２．のAPI KEYとカスタム検索エンジンIDを作成できればあとは、目的のサイトURLとキーワードから検索結果を取得できます。

プログラムの詳細としては、カスタム検索エンジンに、検索キーワードと、その他のパラメータを引数にしてクエリを作成して引き渡すことで、JSON形式でデータが返ってくるので、それをデコードして解析します。
こう書くとややこしそうですが、プログラムとしてはそれほど複雑ではありません。
以下のサイトが参考になりました。

Google Custom Search APIを使って検索結果のURLを取得する【PHP】 – autofocus onfocus

あとは、それを目的に応じてプログラムをチューニングすると完成です。

私の場合は、複数のサイトとキーワードとサイトで調べたいので、それをテーブルに保存して引っ張り出してきてキーワードとサイトごとに実行して順位を返す。
帰ってきた順位と日付をDBに保存というところまではできました。

問題点

これで一応目的としたものについてはできたのですが問題もあります。

１．無料でのクエリ数の制限

まずは先にもあげたように、無料の場合は１日100クエリまでしか実行できないというもの。
このため、サイトの数やキーワードが増えてくると無料では対応しきれませんので、調べたい数を絞る必要があります。
増やそうと思った場合、１日に追加で1000クエリあたり$5がかかるようです。

２．検索順位が微妙に本家サイトと違う？

あと１つの問題点は、この方法で得られた検索結果と順位が微妙に本家のものと違うということです。
これは理由がよく分からないので、検索結果の厳密さを必要とする場合にこの方法はあまり推奨できないのですが、大まかな目安とする程度であれば問題なく使用できます。
これは、何故検索結果が本家と異なるのかがよく分かっていないので、今後もし原因が分かれば追記しようと思います。

PHPで、Youtubeの短縮URLを、埋め込み用URLに変換して出力する方法についての解説です。

Youtubeの短縮用URLとは、

上記のようなURLで、Youtubeの動画を共有ボタンを押すと表示されて、それをSNSやブログに投稿すると、Youtubeの動画が埋め込まれた状態で出力されます。

これは、例えばそれぞれのブログエンジンや、SNSなどが上記の短縮URLを埋め込み用のコードに変換して出力する仕様になっているのでそのようになっています。

そのため、例えばPHPのファイルで、上記のYoutubeの短縮用URLを受け取ってそのまま出力すると、そのまま短縮用のURLが出力されるだけで、埋め込まれた状態で出力されません。

これをそのまま埋め込み用の動画として出力したい場合は、埋め込み用のURLに変換して出力する必要があり、そのための関数を作ってやると出力することができます。

埋め込み用のコードについてですが、基本的にiframeを使って、先程の短縮URLを一部変形させて埋め込んでやればそのまま出力できるので、それほどややこしい処理は必要ありません。

以下は私の方で作成した関数例です。
関数呼出し時に関数に短縮用URLを渡し、埋め込み用のiframeにしたURLを返却します。
ifameの横幅はデフォルトが560にいていますが、引数として渡すことで大きさを変える事が可能です。

PHPのフレームワークの「Laravel」の勉強メモです。

Laravelとは

PHPのフレームワーク。
日本でも人気が上がってきているが、海外で特に人気がある。
モダンな要素が取り入れられている？

フレームワークを勉強するに渡って有名な「Cake PHP」も良いと思ったのですが、最近人気があるというLaravelについて学習してみることにしました。

Laravelを使用するにあたって

PHPの5.4以上が必要で、「mcrypt」のライブラリをインストール必要がある。

インストールするために「Composer」が必要になる。
ComposerとはPHPのライブラリの依存関係を管理するためのもの。
通常はライブラリはPHP全体に影響するため依存関係の管理が大変だが、コンポーザーの場合プロジェクトごとにライブラリを管理するため依存関係について対処しやすい。

Laravelのインストールと初期設定

インストール時してプロジェクトを作成する。
プロジェクト名のフォルダができ、その中にLaravelの必要なファイル一式がダウンロードされる。

最初にやること

プロジェクトで必要となるデータベースとデータベースユーザを作成する。
データベースが必要ない場合は必要なし。

データベースを作った場合はプロジェクト内のコンフィグファイル内にデータベースへの接続情報を追記する。

「.env　」が環境ファイルなので開いてデータベース情報を追記する。

artisan(アルチザン)のマイグレーションコマンドを使って、テーブルを作成する。
アルチザンというのは、Laravelに予め準備されたシェルスクリプトのようなもので、コマンドラインで様々な処理を実行することができる。

php artisan make:migration マイグレーション名 –create=テーブル名

上記のコマンドを実行することで、/database/migrations/　内にマイグレーション用のPHPファイルが作成される。

作成されたマイグレーションファイルを開いて、テーブルのカラム名などを追記する。
デフォルトでは主キーと、タイムスタンプのカラムが設定されている。

php artisan migrate

コマンドで、マイグレーションが実行され、上記マイグレーションフォルダ内に入ったマイグレーションPHPファイルが実行される。

一般的な方法であれば、phpmyadminからテーブルを作成したり管理するが、Laravelではマイグレーションコマンドと設定ファイルでテーブル構造を管理できるかんじといったところ。

しかし、見た感じややこしい。
こんなマイグレーションを使ってコマンドラインでどうこうするより、phpmyadminを使って管理するほうが簡単な気がしてならない。
このあたりはLaravel使う恩恵は微妙といったところかな…。
いろいろやってると「php artisan migrate」実行時によく分からないエラーが

Base table or view not found:

なんだこれ

php artisan migrate:refresh

これで全部解決しました。すべてのマイグレーションを再実行するかんじかな。

php artisan migrate:rollback

上記はロールバック用のコマンドで、最後に行ったマイグレーションをロールバックする

php artisan migrate:reset

すべてのマイグレーションをロールバックする
まあいずれにしてもややこしい。phpmyadminがシンプルでいいです・・・。

モデルの作成

php artisan make:model モデル名
これでモデルを作成

これで app　ディレクトリ以下に、作成したモデル名のPHPファイルができている。

tinkerコマンドでモデルのオブジェクトを作成して、コマンド形式を使ってテーブルに値を挿入できる。

php artisan tinker

このあたりの命名規則やらなんやらで完全に混乱状態・・・。

ルーティング

このあたりからようやく面白くなってきた。

ルーティングとは、指定したURLに対してどういった動作をするかをphpファイルの中に書き込んでいくこと。

設定方法はLaravelのバージョンによって異なってくる。
自分の環境はlaravelのバージョンが5.3系なので、サイトのルーティングは

/routes/web.php

に行う。
ここに指定したURLに対しての処理を書き込んでいくと、URLにアクセスしたときに指定した処理を行う。
テンプレートを読み込ます場合は、viewファイルを読み込む。

ここで、URLにIDなどの動的なパラメータ（変数）を渡すこともできるのだが、テスト環境(Mac、Appache)では動作しなかった。
確認してみると、 /private/etc/apache2/httpd.conf の AllowOverride All　にすべて変更すると
動作するようになった。（.htaccessはLaraberl上にあるので、サーバの設定が許可する設定になっていないといけない）

view

viewというのは要はテンプレートファイルのこと。

/resources/views/

以下に追加していく。

このテンプレートファイルにhtmlやphpのロジック部分を基本は記述していき、ルーティングファイルから読み込むという流れ。

共通部分のviewファイルは別に作成しておき、個別ページごとのテンプレートファイルから読み込んで変数や動的な部分を埋め込んでいくイメージにしていくと効率が良い。

コントローラー

コントローラーは、サイトの処理を担当する部分。
viewでHTMLのテンプレートを担当し、コントローラーでは処理を担当する。

artisan make:controller コントローラー名

でコントローラーを作成することで、 app/Http/Controllers

以下にファイルが生成されるので、編集することで処理を追加できる。

laravel5.3系の場合、web.phpで、ルーティングでURLで指定した処理で呼び出すコントローラを指定する。

viewとコントローラーを切り分けることで、デザイン(デザイナ担当)の部分と処理の部分(プログラマ担当)を切り分けることができる。

情報処理技術者試験の勉強をしていたら「B+木インデックス」というのが出てきていて、調べていたところ「B木」との違いがよくわからなかったので、メモ。

そもそもB木とは

自分的な解釈。
基本的に、データの検索性を高めるための多分木の木構造でのデータ格納方法。

B木とB+木の違いとは

B+木にはB木と違い以下のような要素があるようです。

・データ格納先のアドレスを末端の葉（リーフ）のみに格納する
・リーフ(葉)とリーフ(葉)を結ぶポインタを設ける

↑B+木の図

逆に言うと、通常のB木はノード（節点）にもデータが格納され、葉と葉と結ぶポインタはないということですね。

ウェブサイトのドメイン変更時に、.htaccessを使ってドメインごと301リダイレクトする場合の記述についてです。

例

example.com　を
example2.comに移転する場合の記述です。

# BEGIN WordPress

RewriteEngine on
RewriteCond %{HTTP_HOST} ^(example\.com)(:80)?
RewriteRule ^(.*) https://example2.com/$1 [R=301,L]

# END WordPress

以上の記述をリダイレクトする前のサイトのドキュメントルートに設置することで、301リダイレクトできます。

リダイレクトした後に、WordPressのデータベースの投稿内に含まれているドメイン名は置換します。以下のSQLで置換できます。

update wp_posts set post_content = replace(post_content, ‘example.com’, ‘example2.com’);

MacのOSアップデートを行うと、自身のMac上に構築していたサーバ環境が動かなくなる場合がありましたので、対処法のメモです。

まず、私のケースでいうと、不具合が起きたのが、PHP+MySQLのサイトです。
(EC-CUBEサイトを構築)

アップデート前は動いていたのが、アップデート後には画面が真っ白になるなどのエラーが起きるようになってしまいました。

私の場合、EC-CUBEでのエラーだったので、EC-CUBEのログファイルを確認

/data/logs/error.log

確認すると、以下のようなエラーが起きていました。

Fatal error(E_USER_ERROR): DB処理でエラーが発生しました。
SQL: [SET SESSION storage_engine = InnoDB]
PlaceHolder: [array (
)]
MDB2 Error: connect failed
_doConnect: [Error message: No such file or directory]
[Native code: 2002]
[Native message: No such file or directory]

要は、DB接続に関するエラーです。

ここで、ネットでいろいろと調べてみたのですが、トラブルシューティングのポイントとしては、

MACは、OSアップデート時に各種設定ファイルを初期化するが、バックアップはとっている

ということです。
具体的には、今回のケースでいえば

Apacheの設定ファイルである「httpd.conf」「php.php」を、アップデート前のファイルと比較します。

ターミナルから、以下の方法で差分を確認できます。

httpd.confの場合

diff /etc/apache2/httpd.conf /etc/apache2/httpd.conf.pre-update

差分の部分を、httpd.confに追加してやります。

php.iniの場合

php.iniは、まず、アップデートするとそもそもphp.iniがなくなっているので、作成から入ります。

cp /etc/php.ini.default /etc/php.ini

これでphp.iniが作成されるので、あとは差分を比較します。

diff /etc/php.ini /etc/php.ini-◯.◯-previous

差分をphp.iniに適用してやります。

これで設定が同じになるので、アップデート前動いていたのであれば動くようになるはずです。

適用した後、

sudo apachectl restart

でapacheを再起動するとOKです。

先日WordPressサイト構築用に、爆速WordPress対応サーバーという「kusanagi(クサナギ)」というサーバを契約してみました。

サーバの設定は

Webサーバがnginxで、PHPがhhvmです。

それで早速使ってみたのですが、WordPressは確かに早くなりました。

ただ、何故か通常のPHPスクリプトの実行に非常に時間がかるどころか、タイムアウトを頻繁に起こす状態に。
特に、軽いPHPの場合は問題なく処理できるのですが、大きいファイルサイズのPHPの場合は頻繁にタイムアウトを起こしてしまう自体に・・・。

それで、nginxの設定とひたすら格闘していたのですが、何とか原因がわかりました。

このkusanagiというサーバ特有の設定で

fastcgi_buffers 8 256k;

という設定が設定ファイルの中に入っていたのですが、よくわからないのですが、この前半の「8」というのが小さい値すぎたみたいで

fastcgi_buffers 800 256k;

とか大きいサイズにしたら問題なく動作するようになりました。

サイズに関しては環境によって適切な値が異なると思うので、一番あった値に調整してみてください。

EC-CUBE3.0のインストールまでについては前回の記事でやってみました。

今回はカスタマイズについてどう変わったのか検証してみたいと思います。

テンプレートの修正

まず、テンプレートの修正については、EC-CUBEの管理画面から行うことができます。

旧バージョンと比べてナビゲーションが左側になっていますが、ここから編集したいページやブロックを選択するのは同じです。

レイアウト編集かページ編集を選択します。

レイアウト管理の画面です。
ここは、EC-CUBEの旧バージョンとほぼ同じです。

次にページ編集画面を見てみます。

テンプレートの記述方式が、以前のSmartyからTwigに変更になっているため、記述が少し変わっています。
ただ、基本的にはHTML部分＋変数部分という意味では同じなので、記述方法が変わっているだけで大きく変わったという印象はありません。

また、author、description、keyword、robotsなど、ページごとにmeta設定を書くことができるようになっています。

以前のEC-CUBEを触ったことがある人であればそれほど難しくはないでしょう。

プログラムのカスタマイズ

さて、続いてはプログラマの人に関しては重要なプログラムのカスタマイズ方法について見ていきます。

まず、テンプレートエンジンがTwigに変更されているので、プログラムの構成がかなり変わっています。

以前は、カスタマイズをする場合は
/data/class/ 以下、または　/cata/class_extends/　以下のフォルダを修正していましたが、フォルダ構成が大幅に変わっています。

プログラムの動作部分のファイルは「src/Eccube」以下にあります。

言語がPHPと、オブジェクト指向で、またテンプレート部分とロジック部分を切り分けて作られているというのは旧バージョンと同様です。

どうやってカスタマイズするかは、カスタマイズの内容によって異なるので何ともいえませんが、ファイル名でおおよそのあたりは付くようになっています。

問い合わせ＝ContactController.php
購入＝ShoppingController.php

など…。

データベースの構成に関しては、基本的に変わっていない印象を受けました。

データベース構成はほぼそのままに、プログラムのロジックの部分はほぼ丸ごと作り変えられたかんじになっています。

この部分に関しては、Twigのほうがカスタマイズをしにくいというのではなく、古いバージョンに慣れた人であれば、はじめはTwigのプログラムを理解するのにある程度苦労するものと思われます。

カスタマイズにプラグインを使用する

EC-CUBE3.0は、カスタマイズするのにプラグインを使用できます。
しかし、公式サイトを見ても、今のところプラグインは２系に対応したものしかないようです。
そのため、プラグインに関しては、今後３系に対応したプラグインが開発されるのを待つしかなさそうです。

総括

テンプレートとデータベースに関しては、あまり旧バージョンとの違いはありませんが、プログラムのロジックの部分が旧バージョンからTwig用にほぼ作りなおされているので、プログラマの人は旧バージョンに慣れていると、おそらくはじめはカスタマイズに苦労するのではないかと思います。
また、カスタマイズできるプラグインも３系に対応したものがまだでていないので、今作るのであれば２系で作ったほうが簡単かもしれません。
ただし、２系に関してはいずれサポートされなくなり、今後の開発も当面は３系で進んでいくと思われますので、どこかのタイミングでは、新規でサイトを作るのにEC-CUBEを使用する場合は３系を使うようになっていくことが予想されます。

先日国内の、オープンソースのECソフト構築システムとして最も使われている「EC-CUBE」のバージョン3.0がリリースされていたので、早速インストールしてどのようなかんじか試してみました。

EC-CUBE3.0の2系との違い

公式サイトの説明文を読む限りでは、以下のような違いがあり、かなり大幅なバージョンアップといえます。

スマホ対応、デフォルトテンプレートのショップ側、管理画面のレスポンシブデザイン対応

まず、全面的にシステムがスマートフォンに対応しています。
デフォルトのテンプレートがレスポンシブデザインに対応し、また、管理画面もスマホに対応しています。
これは、昨今のご時世を考えれば必然的な流れともいえそうですが、レスポンシブデザインを使わずに、従来のようにPCとスマホをユーザーエージェントで振り分けたい場合は対応に困るとも言えそうです。
実際に、Amazonや楽天などの大手ショッピングモールはレスポンシブデザインを使わずにユーザーエージェントで振り分けています。

テンプレートエンジンがSmartyからTwigに

EC-CUBEは、もともとプログラマ側の作業とデザイナー側の作業を分離するため、Smartyのテンプレートエンジンが使用されていましたが、EC-CUBE3.0ではTwigと呼ばれるテンプレートエンジンが使われています。

基本機能と追加機能の分離

EC-CUBE3.0では、受注管理、商品管理、顧客管理の３つをコア機能としてデフォルトで搭載され、追加機能はプラグインで対応するということで切り分けているようです。
これは、WordPress的な考え方ですね。

自動アップデート、移行ツールを搭載

EC-CUBE3.0では自動アップデート機能と、移行ツールが搭載されているということです。
これにより、例えば脆弱性が発見されたとして、旧来のようにカスタマイズ箇所を洗い出してソースコードを適用するなど専門的な作業が必要とならないそうです。

全体的にWordPressっぽくなった？

EC-CUBE3.0は上記のような特徴があり、全体的にWordPressっぽくなっているといえそうです。
WordPressはブログシステムや一般的なウェブサイトの構築に使われることが多いですが、EC-CUBEは若干用途が異なっているので、例えば管理画面をスマホから使えるニーズがどれだけあるのかとか、レスポンシブデザインはどうなのとか、意見が分かれる部分もありそうです。
ただ、システムはだんだんバージョンアップしていく必要があるということを考えると、結局のところWordPressっぽくならざるをえないのかなという気はします…。

実際にインストールして使ってみた

実際にEC-CUBE3.0.1をダウンロードして使ってみました。
ダウンロードは公式サイトから会員登録することで行うことができます。

EC-CUBE3.0のシステム要件は以下のページから確認できます。

システム要件 / ECサイト構築・リニューアルは「ECオープンプラットフォームEC-CUBE」

システム要件としては、大きく2系から変わっていることはありません。
基本的にはWebサーバとしてのApache or IIS + PHP ＋ MySQLかPostgreSQL　の構成となっています。
これは2系と同じです。
ただし、必須となるPHPやデータベースのバージョンは上がっているので、念のため使用するサーバで問題ないかどうか確認しておきましょう。

今回私の場合は、MacのApacheを使ってローカル環境で構築してみました。

まずは、ウェブサーバ上に、ダウンロードして解凍したEC-CUBEのファイルを一式アップロードします。
※　設置するサイトのドキュメントルートが「html」フォルダになるようにアップロードを行います。

そして、アップロードしたファイルの/html/フォルダにブラウザでアクセスします。

すると、自動で/html/install.php　にリダイレクトされてインストールがはじまるのですが

何やらエラーが。「Fatal Error:UnexpectedValueException」というエラーがでました。
ごちゃごちゃかいているエラーコードを読み込んでいくと、/app/log/というフォルダに書き込みができないのでログファイルが作成できないということ。なので、フォルダにApacheからの書き込み権限を与えてやります。

もう一度アクセスすると今度は問題なくインストール画面が表示されました。

しかし、上の方に何やら警告がでています。
これは単なる個人的なサーバ設定の問題で、テスト環境のphp.iniにtimezoneが設定されていなかったということだったので、設定しておきました。

すると今度は問題なくインストール画面が表示されました。

↑問題なく表示！

権限チェック

まずはディレクトリの権限チェックがあります。
書いてあるディレクトリの権限を変更します。変更して更新を押すと今度は問題無いと表示されました。
以前のEC-CUBEはファイルごとに細かいパーミッション設定が必要でしたが、EC-CUBE3では基本的にディレクトリのみのパーミッションで良いようです。
ただし、権限を追加してくださいとあるだけで、具体的なパーミッション値についての説明がないので、ここで素人の人は少し戸惑うかもしれません…。

サイトの設定

サイトの名前やメールアドレス、SSL化するか、管理画面にIP制限を加えるかなどを決めることが出来ます。
ここは特に難しい点はありません。
管理画面のフォルダ名も決めることができますが、WordPressと同じ理由で/admin/は避けておいたほうが良いでしょう。
管理者のID、パスワードも変更できますが、同じく管理者IDに「admin」は避けておきましょう。

オプションを表示にすると、メール送信設定もここで設定することができます。

データベースの設定

次にデータベースの設定です。
こちらもWordPressや旧EC-CUBEと同じで特に難しい点はありませんが、DBサーバのIPアドレスは旧バージョンではなかった箇所ですが、必須となっています。

データベースの種類の選択肢が、デフォルトで「PostgreSQL」になっていたのは、そちらが推奨という意味かもしれません。
（※　旧EC-CUBEがMySQLよりPostgreSQLのほうが安定していたり速度が出るのは有名な話）

問題なくデータベースに接続できたら、データベースを初期化するかどうか確認画面が出るので、初回のインストールは初期化します。

無事インストールが完了しました。
管理画面に早速アクセスしてみると・・・

Not Foundになりました。
ApacheのMod_Rewriteが有効になっていなかったのが原因なので、http.confを編集してMod_rewriteを有効にしました。

無事ログインすることができました。
インストール前に、Mod_Rewriteが有効になっているかのエラーチェックが入って欲しいですね。

管理画面

管理画面については、レスポンシブデザインに対応してWordPressっぽい画面になっています。

サイト画面

サイトのほうも、デフォルトのテンプレートはレスポンシブデザインに対応しています。

さて、次はテンプレートや管理画面のカスタマイズ方法ということで調べてみたいと思います。

とりあえず今回はインストールまでをやってみましたが、旧バージョンと比べて難しくなったてということはありませんでした。
むしろ、インストールまでの手順に関しては旧バージョンよりもパーミッション設定の簡単さから簡単になったかなという印象です。

最近勉強もかねて、簡単なiOSアプリを作ってみています。

今日は、練習も兼ねて簡単なじゃんけんアプリを作ってみました。

言語はSwiftでOSはiOS8.4、Xcodeのバージョンは7のベータ版です。

じゃんけんアプリの仕様

・相手のジャンケンの画像が表示されている
・相手が何の手を出した、勝ったか負けたか説明のテキストが表示される。
・こちらがジャンケンでどの手を出すかのボタンが3つ置いてあり、ボタンを押すとジャンケンが実行
・相手のジャンケンの画像が表示され、勝ったか負けたか、あいこかが表示される

アプリ作成の手順

１・Xcodeで新しいプロジェクトを作成して「Single View」で作成をする。

２・Storyboardへの配置

Storyboardに、こちらが出すグー、チョキ、パーに対応するボタンをそれぞれ画面に配置する。
相手の手を表す画像を設置するため、「UIImageview」を画面に配置する。
説明のテキストを表示するため「Label」を中央に設置する。
これらのオブジェクトをauto layoutを使って表示位置を調整する。

３・画像のアップロードと設置

グー、チョキ、パーを表す画像を表示するため、画像をそれぞれ準備してプロジェクトフォルダにアップロードする。
アップロードはドラッグ&ドロップでも行えるが、画面左下の「+」ボタンから「Add files to ~~」からアップロードしてもよい。

それぞれのジャンケンのボタンを画像化するため、ボタンのプロパティから画像を選択する。
※　画像を選ぶと右側のプロパティ画面に画像を選ぶところがある。

相手の手を表すUIImageViewに画像を設定する。
※　同様に右側のプロパティ画面から設置する。

４・じゃんけん処理コードの記述

Story Boadに設置したそれぞれのオブジェクトをViewControllerのコードにCtrlを押しながらドラッグしてOutlet接続を行います。

また、3種類のジャンケンボタンを右クリックすると表示されるメニューの「Touch Down」の右側にある◯をView Controllerにそれぞれドラッグしてボタンを押したときの関数を作成します。関数名は適当につけたらOKです。

以下は、私が作成した関数のサンプルです。

これで問題なければ実行できるはずです。

以下は、今回作成したアプリの画面キャプチャです。

プログラミングで、データベースのテーブル作成時に考える必要があることが、項目への型の付け方です。

項目に入るのに適した型を付けることでデータベースのデータ量も変わってくるので、なるべく適切な型をつけたいところです。

型の付け方に関しては、以下のサイトの説明が参考になりました。

MySQLのカラム型（有効範囲と必要記憶容量）｜MySQL｜PHP & JavaScript Room

項目でINT型にするか、SAMALLINT型にするか、TINYINT型にするかなど、それぞれの型でどの大きさの値まで格納出来るかの説明が分かりやすく掲載されています。

例えば数値であってもTEXT型で格納することは可能ですが、型指定ができていにあとソートするときに正しく比較できないこともあるので、正しい型指定をしておくことが推奨されます。

また、MYSQLでは型を指定するときにint(11)などと長さを指定しますが、この意味は、「格納された値が指定した桁数に満たない時に、左側を空白で埋める」という意味だそうで、その意味ではint(100)だろうが特に問題はないようです。
また、オプション属性の ZEROFILL を使用した際に、スペースに代わってゼロが埋め込まれる際の幅だそうです。

基本的には、例えばINTであれば以下の指定で問題ないと思います。

TINYINT(4) -128～127
SMALLINT(6) -32,768～32,767
MEDIUMINT(8) -8,388,608～8,388,607
INT(11) -2,147,483,648～2,147,483,647
BIGINT(20) -9,223,372,036,854,775,808～9,223,372,036,854,775,807

小さい型指定であればそのぶん使用するデータ領域も少なく済みますので、適切な指定が理想的です。

Xcodeでのアプリ開発について、まだまだ初心者ですが、勉強中です。

本日は、勉強したタブ画面の実装と、タブ画面ごとの処理の実装について書いてみます。

まず、タブ画面の作成については、下記のサイトの説明が分かりやすかったです。

第16回 タブコントローラーを表示させる｜ドットインストールでiPhoneアプリ作成を勉強 | 経験知

詳しくは上記サイトを見てもらうとして、大まかな流れとしては

１・Story BoardへのTab Controllerへの埋め込み
２・追加したい画面の数だけView Controllerを追加
３・Tab ControllerとView Controllerを繋ぐ

といったところです。
これだけで、タブで画面表示が切り替わるアプリが完成します。

ただ、ここまでは簡単に出来たのですが、問題に突き当たりました。

それは、追加したView Controllerの画面への処理（ロジック）を記述できないということです。

追加したView Controllerから、もともとあったView Controllerへ定義しようと思っても…できません。

しかし、結果として、新しいViewConrllerのClassを定義してやる必要があるということが分かりました。

Xcodeの画面の左のプロジェクトのファイルが表示されているところの左下に「+」というボタンがあるので、そこをクリックすることで、新しいViewControllerのClassをプロジェクトに追加できます。

あとは、そのClassファイルと、追加したView Contorollerを紐付けてやることで、追加したClassファイルに処理を追加できることができるようになりました。

Xcodeで、とりあえず簡単にWebviewを使ってシンプルにウェブページを表示するだけのアプリを作ってみました。

手順
１・Single Veiwのプロジェクト作成
２・storyboadに、右下からWebviewのパーツをドラッグ&ドロップ
３・Webviewを選択し、大きさを画面ちょうどに調整
４・Webviewを選択し、右下にある四角い図形を選択し、Add Constrantsで、上が20、左右下は0に変更。Add 4 constrantsで適用

５・Webviewを選択し、右上の「Scales Page To Fit」にチェックを入れる

６・ViewControllerに必要なコードを追記

これでコンパイルして実行。

すると、ウェブページは表示されたのですが、右に謎のマージンが開いた状態に。

ここは、左メニューの「Constraints」で、設定されているConstraintsをチェックしていき、項目の中にある「Second item」を調整していくことで画面ピッタリに表示されるようになりました。

↓Story boardのConstraintsが余白に関係しているので、この中から関係ある余白の設定を調整する。

↑Relative to marginのチェックを外す

ポイントとしては、「Scale to Page To Fit」にチェックを入れることと、Constaraints追加後、左メニューに表示される各「Constraints」の設定が余白を表しているので、変な余白が入っている場合は、大抵このどこかにおかしいところがあるということです。
ここを調整していくことで画面ピッタリに表示されるようになりました。

怪しいConstraintsの設定のSecond Itemを「Superview.Leading Margin」にして、Relative Marginのチェックを外してみてください。

現在ベータで利用できるXcode7で、Web Viewのアプリを作ってテストしていたら、Xcode6では問題なかったHTTPのウェブページ読み込みの動作で「App Transport Securty」のエラーが起きるようになっていました。
これは、HTTPのサイトの読み込みでエラーになるというもののようで、HTTPSのサイトに関しては問題ないようです。

調べてみると、info.plistに以下の記述を追加することで問題なく動作するようになりました。

下記は、全てのサイトの通信を許可するという記述です。
特定のドメインのみ許可するようにしたい場合は、別の記述を追加する必要があります。

info.plistはXcodeで開いてもどこを編集するかわかりにくいですが、テキストエディタで開いてやると下記コードのコピー&ペーストで追加できます。

XcodeとSwiftでアプリ開発をする場合のメモについてです。

実際にXcodeで簡単なアプリを作るところからの勉強です。

ボタンを押してラベルを切り替えるアプリ

画面の中央にテキストがあって、ボタンを押すことでラベルの表示内容を切り替えるアプリです。

Xcodeで新規プロジェクト作成

Xcodeで新規プロジェクトを作成します。
「Single View Application」で作成します。

左側のファイルの中から「Main.storyboard」を選択します。

表示される正方形の画面が、実際に表示される画面のモデルです。
ここに色々なパーツを追加していきます。

まずは右下にあるパーツの中から「Label」を選択して画面にドラッグ&ドロップします。

同様に「button」を選択して画面にドラッグ＆ドロップします。
表示位置を調整する機能もあります。

次に、「View Controller.swift」を開きます。

これが、コードの部分です。
ここに、プログラムを実行するときに必要なクラスやメソッドを追加していきます。

Xcodeでは、ここに直接ガリガリコードを書かなくても、このソースコードナイに先ほどのstoryboardからパーツをドラッグすることで必要なコードを追記できます。

まずは、先ほど作成したボタンとラベルとView Controllerのソードコード内にドラッグします。名前は適当に決めればOKです。

これで、先ほどのボタンとラベルを表す変数を定義できました。

次に、ボタンを押したときにラベルの表示を切り替えるメソッドを追加します。

storyboardで、ボタンを右クリックし、「Touch Down」の右側にある◯を先ほどのコードにドラッグします。
関数名は適当につけます。

あとは、ボタンを押した（Touch Down）時の処理をこの関数内に書くだけです。

例えば以下のように書きます。

label.text = “Hello World”

これでボタンを押したときに、ラベルを「Hello World」に変更するアプリが完成しました。

実行するとシミュレーターが立ち上がりますので、ボタンをクリックすると、ラベルが「Hello World」に切り替われば問題なく動作しています。

今日のポイント

Xcodeでのアプリ開発は、パーツの画面への設置にStoryboardを使う。
実行処理の記述にView Controllerを使う。
Storyboardからパーツをドラッグすることでコードの記述が最低限で済む。

iOSアプリ開発言語「Swift」についての勉強メモ場所です。

Swiftの特徴

高速

Swiftは「速い」という意味。最速の言語というわけではないですが、Object-CやPytonより速いらしいです。

<3>モダン

様々な言語の新しい機能が搭載されているということ
例：複数の戻り値、クロージャ、ジェネリクス、タイプインターフェース、名前空間など

安全

メモリ管理やオーバーフローが自動的にチェックされるなど

開発しやすい

モダンな要素を取り入れることにより、多言語を使っているプログラマからするとObject-Cに比べて開発がしやすいという話です。
playgroundという機能を使えば、コンパイル前に、リアルタイムに実行結果を直ぐに確認することもできます。

Object-Cと共存できる

Object-Cと共存することができるので、アプリの作成で場合によって使い分けすることができます。

var

変数を格納する場所の意味

var x = 2

変数の値は後から変更できる

let

定数を格納する場所の意味

let y = 3

定数の値は一旦格納すると変更不可能

文字列

“”　ダブルクオテーションで囲むと文字列として扱われる

let x = “aaaaa”
let y = “bbbbb”
let z = x + y

for文

for i in 1…50 {
　処理
}

iが1〜50までインクリメントさせて処理をループさせる

画面出力

println　で画面に情報を出力できます。

println(“Hello World”);

明示的に型を指定

型はコンパイル時に

最近技術界隈で「Node.js」という言葉を耳にしたことがある人は多いと思います。

しかし、私も聞いたことはあるものの使ったことがないので、どういったものか調べてみました。

Node.jsとは

Javascriptとは、通常クライアントサイトのマシン上のウェブブラウザで動作するプログラムですが、Node.jsとはクライアントサイドではなくサーバサイドで動作するjacascriptのプラットフォームです。

Google Chrome用に開発されたV8エンジンがサーバ上で動作するように、様々な機能が追加されています。

Node.jsの特徴として、無駄のない実行をするために、「ノンブロッキングI/O」という仕様になっています。
これは、Javascriptの特徴であるシングルスレッドで動作をしつつも、待ち時間には別の処理を行う仕組みです。

何に使うか

それは分かったとして、「サーバ側で動くというのは分かったけど、何に使うの？」というところが疑問に思うと思います。

基本的には、サーバを構築するために使います。
つまり、「サーバ実装のためのプラットフォーム」なのです。

ApacheがWebサーバを構築するためによく使われるように、Node.jsもApacheのようなサーバを構築するためのプラットフォームの１つです。

Node.jsが解決する問題

Node.jsは、「スケーラブルなネットワーク・プログラムを作成するための簡単な方法を提供すること」が目的とされています。

従来のWebサーバでは、同時接続数が多く増えた時に、様々な問題が発生します。
まずはサーバの容量の問題やデータのサーバごとの同期の問題など、様々な問題があります。

Node.jsを使用することで、これらの問題に、より効率的に対処することができます。

例えば、アプリケーションサーバに対して同時に多くの接続が発生するゲームなどでは、サーバ構築の手段としてNode.jsは非常に有用となります。

何故Node.jsはこれらの問題の解決に有用であるかというと、まずGoogle Chromeに内蔵されているJavascript解釈のためのエンジン「V8」をベースとしているため、非常に高速です。

また、上記で説明したような非同期で動作する仕組みを持っています。

Apacheの抱えている問題

Webサーバの構築に最もよく使われている「Apache」ですが、接続のたびにスレッドが作成され、それにサーバのメモリが使われるため、同時に多くの接続が発生すると、ある段階からメモリ不足などの問題により、極端にパフォーマンスが悪くなります。
これを「C10K問題(クライアント1万台問題)」とも呼ばれています。
Node.jsとはこういったたぐいの問題を解決するためのアプローチとして非常に有効です。

使い方

まずは、利用するサーバなどのマシンにNode.jsをインストールする必要があります。
Linuxはソースコードからコンパイルし、WindowsやMacではインストーラーがそれぞれ用意されています。

Node.jsの特徴

記述はjavascript

当たり前といえば当たり前ですが、Node.jsはJavascriptで記述されています。
このため、業務でjavascriptを使用した経験のあるプログラマにとって扱いやすい要素であるといえます。

イベント駆動型プログラム

通常のJavascriptでは、ユーザ側の動作（クリックなど）によって発生する処理があります。
これをイベント駆動といいます。
Node.jsも、同様にイベントに応じて駆動する処理を記述します。
イベントの種類に、例えば、サーバに接続が発生した、などがあります。

久々にがっつりとHTMLコーディングをしてサイトを作成して納品したのですが、IE９、10での崩れに苦戦しました。

まず、アクセス解析を見てみると、最近はPC用サイトでもIEは基本バージョンが11なんですよね。

PC経由のアクセスでは、OSがWindows7にIEっていう人はけっこういるんですが、IEにも自動更新が導入されたので、IEの人の7割型はIE11。

ただし、自動更新を有効にしていない人が少しいて、一部は未だにIE９だったり10だったりします。

まあ、昔のIE6とかに比べるとくせはないのですが、IE9、10はSafariやChromeなどのモダンブラウザと比較すると、CSS解釈やJavascriptの動作が異なっている事が多いので注意が必要です。

特に、最近のクリエイターの人はMac使いが多く、IEのチェックが難しいのが注意点です。

MacでのIEのチェックには、下記のソフト（エミュレータ）が役に立ちます。

これは快適！Mac OS X上でWinのIE6/7/8/9/10など、さまざまなブラウザの確認ができるアプリ -Sauce | コリス

Windows7ユーザの人でも、IEが自動更新が対応になってしまっていて、11になってしまってIE9、10はチェックできないという人も、やりようによってはIE9までダウングレードすることも可能です。

エミュレータでなく、本当のIE9、10でチェックしたいという場合、以下の方法でダウングレードすることも可能です。

Windows7で「IE10からIE9に」、「IE11からIE10に」簡単にダウングレードする方法 | 田舎に住みたいエンジニアの日記

上記方法でIE11から10に下げ、そこからIE9に下げることも可能でした。

IEは一旦アンインストールしても再起動すると自動的にインストールされるのですが、その際にIE9がインストールされるようになります。

IEの自動でのバージョンアップのチェックは設定から外しておく必要があります。

IE8以下は、もうよほど厳密なサイト（か売上がよほどあるようなサイト）でないと非対応でもいいような気がしますね。

さすがにもユーザが少ないと思うので。

htmlファイルから、外部のhtmlファイルをiframeで読み込むということはよく取られる方法です。

しかし、iframeを使いたくないという場合もあると思います。

その場合、サーバでSSI(Server Side Include)が使える場合はSSIを使うのもありです。

しかし、サーバによってはSSIが使えない場合もあるかと思います。

そんな場合でも読み込む方法を探していて、見つけました。

以下のサイトが参考になりました。

静的HTMLで、インクルードを実現するためのJavaScript – on the center line.

htmlファイルを読み込む「include」というJavascriptの関数を定義して、使用するという方法です。

Javascriptが動作するブラウザや環境であればこの方法でも動作します。

iframeを使いたくないという場合に便利かと思います。

CSS3から使うことが出来る便利な書き方として

nth-child　と　nth-of-type

があります。

これは、特定の要素の数を指定して、そこにだけスタイルを適用することができるというものです。

例えば

div.box li:nth-child(3n)　{
　　　　スタイル
}

の場合、クラス「box」の中の、liの要素の３の倍数の要素にスタイルが適用されます。

一方

div.box li:nth-of-type(3n)　{
　　　　スタイル
}

この場合も同様です。

しかし、この２つで何が違うかというと、

nth-child

の場合は、途中に何か他の要素が入っても、それもカウントします。

一方で、nth-of-typeの場合は途中に何か他の要素が入る場合、それをカウントせずに指定した要素のみをカウントします。

この違いを理解することで状況に応じてあったほうを使い分けることができます。

本日は、AWS（Amazon Web Service）について調べてみました。

IT業界で仕事をしている人で、AWS（Amazon Web Service）という名前を聞いたことがない人はあまりいないでしょう。

しかし、一体何ができるのか。
どういうメリット、デメリットがあるのかを正確に把握できている人、あるいは実際に使ったことがないという人も多いのではないかと思います。
そこで、調べてみました。

AWS（Amazon Web Service）とは？

Amazonが提供している、クラウドITインフラサービスです。

AWSの特徴

自分好みにカスタマイズできる

例えば従来のレンタルサーバを利用するシーンを想定してみます。
通常であれば、サーバには複数のプランがあり、その中で自分の用途に最も近いプランを決定します。

しかし、AWSであれば、この組み合わせは自由度がかなり高いです。
自分の好きな組み合わせでサーバを構築することが可能です。

食品のサービス例えば見れば、マクドナルドハンバーガーとサブウェイのハンバーガーの違いと近いかもしれません。

マクドナルド＝ハンバーガーの種類によってパンの種類や具などが決まっている。
サブウェイ＝パンの種類や具、野菜などを自分の好きに選ぶことができる。

前払い不要で従量課金制

使ったサービスの内容と使用時間に応じて金額が決定し、支払われます。
また、サービス内容をいつでも変更が可能です。
変更した内容に応じて金額が変更となります。

この部分がAWSの大きな特徴の１つとなっていて、スモールスタートして状況に応じて拡張することが可能です。

このため、ITインフラ構築の際に問題となる、「どのくらいスケールするか分からないサービスのインフラ部分に、事前に大きく投資する必要がない」ということがあげられます。

例えば、ウェブサービスをスタートする際に、どのようにサーバを構築するかということは大きな問題の１つです。
性能の高いサーバにすれば多くのトラフィックがあっても耐えられますが、逆にもしあまり利用されなかった場合に無駄な金額を投資してしまったということになる可能性もあります。

ここで、AWSのEC2を使用すれば、最初はサーバのメモリ500MBでスタートして、アクセスが増えると後で16GBに拡張するといったことが容易に可能となるわけです。
（従来の重量課金制のサーバの場合は、別サーバの契約をしなおして、サーバを移行する必要があります。この部分の作業が非常に手間がかかる場合があります。）

どのようなサービスがあるのか

AWSには、具体的にどのようなサービスがあるのか調べてみました。

Amazon EC2

AWSの中でおそらく最も有名なサービスです。
いわゆるクラウドサーバで、サーバ環境を自在に構築することができます。
一般的に「AWS」というと、Amazon EC2を指しているケースも多いでしょう。

Amazon EC2 Container Service

Amazon EC2 Container Service は、非常にスケーラブルかつ高性能なコンテナ管理サービスで、Docker コンテナをサポートし、Amazon EC2 インスタンスのマネージド型クラスターでの分散型アプリケーションの実行を容易にします。

↑
公式サイトの説明文ですが、さっぱり意味がわかりませんでした。
調べてみたところでは、「コンテナ」と呼ばれる通常の仮想サーバの仕組みとは異なる仕組みでの新しい仮想化技術を使用しているそうです。
このために使われてい技術が「Docker」と呼ばれる、Docker社が開発しているコンテナ型仮想ソフトウェアなんだそうです。

もう全くついていけません…。
詳しく知りたい方は「Docker」「コンテナ」などのキーワードで検索してみてください。
私も調べてみましたが頭がくらくらしました…。

分かりやすくいうと、新しい仮想化技術を使った仮想サーバといったところでしょうか。
同じハードウェア上で複数のアプリケーションを効率的に複数実行するのに適しているんだそうです。

AWS Lambda

AWS Lambda は、イベント発生時にお客様のコードを実行し、コンピューティングリソースを自動的に管理するコンピューティングサービスで、新規情報に迅速に対応するアプリケーションの構築を容易に行うことができるようになります。

↑
公式サイトの説明文です。これもさっぱり意味が分からず。。。

調べてみると、どうやらトリガーとなるイベントと、対応するコードを準備することで、特定の条件でのみ特定のコードを実行することができるというシステムだそうです。

料金も、リクエスト数と、リクエストのプログラム実行にかかった時間で計算されるため、費用対効果が効率的なんだとか。

用途として、IoT(Internet of Things）などが代表的だそうです。

Auto Scaling

Auto Scalingとは、条件を設定して、Amazon EC2のリソースを拡大/縮小する機能ということ。
これは分かりやすいです。

Amazon VPC

Amazon VPC（Virtual Private Cloud）では、AWS クラウドのプライベートで孤立したセクションをプロビジョニングすることができます。ここでは、お客様が定義する仮想ネットワークで AWS リソースを起動することができます。Amazon VPC では、お客様がデータセンターで運用しているような従来のネットワークに非常によく似た仮想ネットワークのトポロジーを定義することができます。

↑サイトの説明文引用。これもよく分かりません。。。

要するに、Anazon VPCを使うことで、他のネットワークから孤立してVPNでのみ接続可能なプライベートネットワーク上のシステムを構築可能ということみたいです。

Elastic Load Balancing

Elastic Load Balancing は、アプリケーションへのトラフィックを複数の Amazon EC2 インスタンスに自動的に分散します。

これはいわゆるロードバランサーですね。
サーバの複数台構成と負荷分散が可能ということです。

AWS Elastic Beanstalk

AWS Elastic Beanstalk は、Java、.NET、PHP、Node.js、Python、Ruby などの人気のあるプログラミング言語を使用して開発されたウェブアプリケーションと
サービスのデプロイとスケーリングを行うことができる、使いやすいサービスです。

これは、いわゆるAWSの管理ツールといったところでしょうか。AWSを使っていれば無料で使用できます。

AWS OpsWorks

AWS OpsWorks は、ロードバランサーからデータベースまでのアプリケーション全体を DevOps ユーザーが簡単にモデル化および管理できるようにするアプリケーション管理サービスです。

↑これも説明がわけが分かりません。
まあこれも、AWSの管理ツールといったところでしょうか。
AWSのサービスを使用している場合、無料です。

AWS CloudFormation

AWS CloudFormation は、開発や本運用に必要な、互いに関連する AWS リソースのコレクションを作成しておき、そのリソースを適切な順序でプロビジョニングするためのサービスです。

↑これもわけがわからなかったのですが、調べてみると、システムをテンプレートというレシピに沿って自動的に構築するための仕組みだそうです。
テンプレートはJavascriptで記述されています。
これも無料。（システム構築のためのリソースはもちろん有料）

AWS CodeDeploy

AWS CodeDeploy は、Amazon EC2 インスタンスへのコードのデプロイメントを自動化するサービスです。

これはわりとそのままで、Githubやローカル環境にあるコードをAmazon EC2へデプロイ（アップロード）するための管理画面ですね。

モバイルサービス

ここからはモバイルサービスです。

Amazon Cognito

複数のデバイスのアプリケーションデータを同期するためのサービスということです。

Amazon Mobile Analytics

AWSを使って構築しているアプリケーションの使用状況データを視覚化して把握できるサービスということです。
サーバのログ分析機能みたいなかんじですかね。

Amazon SNS

デバイスにプッシュ通知を行うためのサービスということです。
価格は100万リクエストごとに0.5＄ということです。

エンタープライズ・アプリケーション

ここからはエンタープライズ・アプリケーションです。

Amazon WorkSpaces

クラウド型の共有PC？と言ったイメージのサービスです。
任意のデバイスからアクセス可能の共有サーバ（PC）。
35 USD/月から、

Amazon WorkDocs

Amazonが提供するクラウド型のドキュメント管理/共有サービスです。
マイクロソフトOfficeのドキュメントやpdf、画像、テキストなどあらゆる文書を保存したり、他人と共有をしたりすることができます。

ストレージとコンテンツ配信

Amazon S3

Amazon S3とは、Simple Strage Serviceの略です。

言ってみればDropboxのようなイメージでしょうか。
クラウド上のストレージに保存できます。

Amazon Glacier

Amazon S3と同様に、Amazon Glacierもデータをクラウドストレージに保管するサービスです。
しかし、Amazon Glacierは、よりめったに参照することのないデータ（取り出しに時間がかかっても問題ないデータ）の保存に適しているということです。

例えてみれば、Amazon S3は部屋の引き出しやタンスだとすれば、Amazon Glacierは倉庫の中といったイメージです。
その代わりコストがS3よりも安くなっています。

セキュリティやデータ紛失に対する堅牢性も高いということです。

AWS Storage Gateway

AWS Strage Gatewayとは、オンプレミスのシステム（自社製のシステム）とAWSのクラウドストレージを接続するためのシステムです。

Amazon EBS

Amazon EBSは、Amazon EC2で構築されたシステムで使用するためのブロックレベルのストレージです。

Amazon Elastic File System

これは、AWSで使用するクラウドストレージの管理画面のことですね。

AWS Import/Export

これは、AWSで使用するストレージへのInput/Outputを高速化するためのシステムということです。
はじめからAWSについています。

Amazon CloudFront

これは、Cloud Flareに代表されるようなAmazonが提供するCDN（Contents Delivery Network)です。
静的コンテンツのキャッシュをサーバが提供し、サービスの帯域を節約し、表示を高速化します。
使用は1GBの転送量あたりで、有料です。

データベース

ここからはデータベースです。

Amazon DynamoDB

Amazon DynamoDBは、Amazonが提供するNoSQLデータベースです。
予約した容量に基づき、書き込み容量ごとに費用が必要となります。

Amazon Redshift

データの集計や分析に特化したAmazon謹製のデータウェアハウスサービスです。
使用量と時間に基づいて費用が必要になります。

Amazon RDS

Amazonが提供するRDS(Relational Database System)です。
バックアップ機能など、管理のしやすさが特徴的です。
使用したリソース分に対して時間単位で料金を支払ます。

Amazon ElastiCache

Amazon ElastiCacheは、サーバのメモリキャッシュの管理をよりスムーズにできるサービスです。
メモリキャッシュの時間当りの料金が必要となります。

ネットワーキング

ここからはネットワーキングのサービスです。

Amazon VPC

Amazon VPCは、AWSのリソースを自在にカスタマイズして構築することができるネットワークサービスです。
料金は無料です。（AWSのリソースの料金がかかる）

AWS Direct Connect

AWS DIrect Connectは、AWS上に構築されたシステムと、別のデータセンターやオフィスなどとのプライベート接続を確立することができます。

Amazon Route53

Amazon ROute53は、Amazonが提供するDNS（ドメインネームシステム）ウェブサービスです。

アドミニストレーション & セキュリティ

AWS Directory Service

AWS Directory Serviceは、AWS上のリソースを、既存のオンプレミスのシステムと接続できます。

AWS Identity and Access Management（IAM）

AWS Identity and Access Management（IAM）を使うことで、ユーザごとのAWSについての機能を制限することができます。
本機能はAWSの標準の機能なので、他のサービスを利用していると使用できます。

AWS CloudTrail

AWS Cloud Trailは、アカウントのAWS API実行のログを記録するサービスです。

AWS Config

AWS Configは、AWSの利用開始から現在までの、構成の変更の記録を確認することができます。

AWS CloudHSM

AWS CloudHSMはデータの暗号化に使用される暗号化キーを安全に生成、保存、管理することが出来るサービスです。
アプリケーションのパフォーマンスを低下させることなく、厳密なキー管理を行うことができます。

AWS Key Management Service

AWS Key Management Service(KMS)は、データ暗号化に必要な暗号化キーの作成、制御を簡易化するサービスです。
サービスの利用料金は1USD/月となっています。

Amazon CloudWatch

AWSのリソースの使用状況をモニタリングすることが出来るサービスです。
他の有料のAWSリソースを契約すると、無料で使用することができます。

AWS Trusted Advisor

AWS Trusted Advisorは、AWSを使用しているユーザのシステム環境を検査し、パフォーマンスや信頼性の向上、セキュリティの問題についてのアラートを提供します。
AWSのビジネスおよびエンタープライズレベルの契約であれば無料です。

分析

Amazon EMR

Amazon EMRは、様々なビッグデータの分析やデータ処理を効率的に処理することができるサービスです。
分析にはHadoopというオープンソースフレームワークが使用されますが、煩わしい設定手順などが簡略化されます。
料金は使用しているAmazonリソースによって異なります。

Amazon Kinesis

Anazib Kinesisは、様々なデータをリアルタイムに監視することができるサービスです。

Amazon Redshift

上記のデータベースの項目にも登場しました。
Amazon Redshiftは、分析に適したデータウェアハウスです。

AWS Data Pipeline

AWS Data Pipelineは、データ駆動型ワークフロー用の簡単な管理システムを提供するウェブサービスです。
管理ツールからデータごとのパイプラインを定義し、それらの実行スケジュールを設定することができます。

Amazon Machine Learning

Amazon Machine Learningは、機械学習に役立つAmazonのサービスです。
Amazon S3、Redshift、RDSなどとサービスを結合し、データを結合し、サービスを利用することができます。

アプリケーションサービス

ここからはアプリケーションサービスです。

Amazon SQS

Amazon SQS（Simple Queue Service）は、キューの管理ができるサービスです。
信頼性のあるキューを自前で作成するのは大変なので、役立つということです。

Amazon SWF

Amazon SWF（Simple Workflow Service）はクラウドアプリケーション用のタスク調整と状態管理のサービスです。
ワークフローとタスクを効率的に管理するシステムを簡易に構築することが可能です。

Amazon AppStream

Amazon AppStreamは、ゲームなどのアプリのストリーミングを可能にするサービスです。
ゲームの重い処理やデータをクラウド側で処理することで、ローエンドデバイスでもレベルの高い表現が可能になります。

Amazon Elastic Transcoder

Amazon Elastic Transcoderは低コストのメディア変換サービスです。

クラウド上でファイルのエンコーディング処理を行ってくれます。

Amazon SES

Amazon SESは大量のメールを配信可能なAWSのサービス。
管理画面上から送信することも、SMTPサーバを利用して外部のサーバやメールサービスから送信することも可能。
価格はメール1000通あたり0.1$。

Amazon CloudSearch

Amazon CloudSearchは、AWSのクラウド上での検索機能を提供し、ソフトウェアやアプリケーションに簡単に検索機能を追加することを可能にするサービスです。
利用状況に応じての従量課金制となります。

Amazon FPS（Flexible Payment Service）

Amazon FPSとは、Amazonが利用している決済サービスを別のシステムでも利用可能になる機能です。
特にAmazonアカウントを既に持っているユーザはログインするだけで簡単に利用できます。

AWS サポート

AWSのサポートは、契約したプランによって様々なサポートをうけることができます。
日本と海外ではサポート内容が異なっているので注意です。（やはりAmazonは海外が拠点なので、海外のほうが日本よりも対応時間など手厚い内容になっています。）

AWS Marketplace

AWS Marketplace は、AWSで利用できる様々なソフトウェアが購入可能になっています。
これらを1クリックで購入できます。

まとめ

以上で掲載されていたAWSのサービスは全てになります。
非常に多くの種類のサービスがあるため、個別のサービスについて全て使いこなせるようになることは難しいでしょう。
ただし、システム開発やソフトウェア、アプリ開発には非常に多くの開発時間と、ハードウェアなどの購入費用がかかります。

場合によっては、自前で全て準備したり開発するのではなく、これらのサービスの存在を知っていることや、使い方を適切に知っていることで、コスト削減や成果物の品質向上を達成することができるでしょう。

また、AWSのサービスについて勉強することで、世の中のITの先端技術がどのようになっているのかの一部を知ることもできます。

ただし、AWSのサービスはすべていいことばかりではなく、制約や問題も存在していると思います。
実際使ってみる場合は、その性能を過信せずにシミュレーションやテストをしてから使ってみることがよいでしょう。

数年前からブームになり、今となっては開発者の中では常識となっている「Github」。

とはいえ、これまであまり使ったことがなかったので調べてみました。

そもそもGithubとは何か？

Github社によるプロジェクト管理のための共有ウェブサービス。

Gitというバージョン管理システムを使うためのサイトと言っていいと思う。

このシステムは、プログラムのバージョンを管理するために使用することが多いが、実際はプログラム以外のファイルにも使用することができる。

ポイントとしては、「複数の人間がファイルを管理する場合のプロジェクトで、先祖返りする危険性を回避できる」ということだろう。

また、修正する際の履歴が保存されるために、過去のバージョンを確認したり戻す際にも簡単にできる他、バックアップとしても役割も果たしてくれる。

また、SNSとして、他のユーザの公開されたコードを参照したり、フォローしたりフォローされたりという機能もあるようです。

メリット

・　複数人が携わるプロジェクトでファイルの先祖返りを防止でき、過去のバージョンの全履歴を取れる
・　もしものときのバックアップとしての役割も果たす

デメリット

・　参加メンバーが全員Gitの使い方を知らないといけない

Githubはどのサイトで使う？

https://github.com/

↑上記サイトが公式サイトになります。
ただし、上記以外にも、Gitを使ってバージョン管理するためのサービスはあります。
日本語のサイトもあるので使いやすいサイトを探して使ってみるとよいでしょう。
サイト利用の基本は無料で、有料バージョンにすることで機能追加を行うことが多いです。

Gitの使い方がわかりやすいサイト

以下のサイトがわかりやすかったです。

GitHubを使ってみよう！導入と簡単な流れ、よく使うコマンドなど。 – YATのBLOG