ホーム > 技術系

技術系のアーカイブ

Adsense自動広告の関連コンテンツのクリック数の確認方法

最近Google Adsenseの、自動広告が利用可能になりましたが、自動広告の中で、関連コンテンツの広告があります。

関連コンテンツは、ページの下部に、同ドメインサイトの関連コンテンツを自動で表示してくれる機能で、複数の関連コンテンツと、関連コンテンツに合わせて広告も表示してくれます。

本記事では関連コンテンツの広告のクリック数と、関連コンテンツの広告でない記事のクリック数の確認方法について掲載します。

関連コンテンツの広告のクリック数

adsenseの広告ありの関連コンテンツのクリック数
※クリックで拡大

Adsenseの管理画面で、パフォーマンスレポート→詳細レポート→「広告フォーマット」で確認できます。

要求されたコンテンツの種類→「ネイティブ/関連コンテンツ/広告あり」の項目を見ると、クリック数や収益が確認できます。

広告でない関連コンテンツのクリック数

adsenseの関連コンテンツの表示回数
※クリックで拡大

Adsenseの管理画面で、パフォーマンスレポート→一般的なレポート→アカウント全体の画面で、
「関連コンテンツ」タブをクリックすることで確認が可能です。

MacOSX High SierraでのLibrary not loaded: libmysqlclient.18.dylibへの対処法

Mac OS S High Sieraで、pythonでMySQLのライブラリをインストールして使用していたところ、以下のエラーメッセージが出てしまい対処に困りました。

環境は、
OS:Mac OS S High Siera
MySQLバージョン:5.6
pythonバージョン:3.6.1
です。

ImportError: dlopen(/Library/WebServer/Documents/crawl/scraping/lib/python3.6/site-packages/_mysql.cpython-36m-darwin.so, 2): Library not loaded: libmysqlclient.18.dylib

原因について調べていたのですが、該当のファイルが開けないということで、該当ファイルへのシンボリックリンクを設定することで解決しました。

まず、

find / -name libmysqlclient.18.dylib

で、該当のファイルの存在している場所を調べます。
私の場合は、

/usr/local/mysql-5.6.19-osx10.7-x86_64/lib/libmysqlclient.18.dylib

にありました。

以下のコマンドでシンボリックリンクを設定しました。

sudo ln -s /usr/local/mysql-5.6.19-osx10.7-x86_64/lib/libmysqlclient.18.dylib /usr/local/lib/libmysqlclient.18.dylib

私の場合は、以上の手順で解決しました。

Linuxサーバの場合は、/usr/local/lib/ でなく、 /user/lib/ のパスらしいのですが、MacOSXの場合は、 /user/lib/ のパスがスーパーユーザでも書き込み不可になっていて、 /usr/lobal/lib/がシンボリックの設定箇所になります。

データベースのバックアップをDropboxへ転送する方法

サイトの運営をしていて考える必要があることは、ウェブサイトのバックアップをどう取るかです。

仮にバックアップを取っていない場合、何らかの問題が起こってサーバ上のデータが消えた時に、取り返しがつかなくなります。

サーバ上のデータが消える原因としては、作業ミス、サーバのハッキング、サーバ会社川野問題など、様々なものがあります。

これらの問題に対処するための方法もまた多様で、サーバ自体を多重化することなどもありますが、基本はバックアップを取ることです。

中でもデータベースは、毎日変化する場合もあるため、こまめにバックアップを取ることが求められます。

バックアップを取る基本は、cronでデータベースのダンプファイルをサーバ内の特定のバックアップフォルダに保存することですが、この場合、サーバ自体が消えてしまったときにバックアップがありません。

そのため、サーバ自体の障害に対応するためには、サーバの外部ストレージにデータを定期的に退避させておくことも重要になりますが、手動でやると手間がかかります。

1つの方法として、Dropboxにバックアップデータを転送する方法があります。

Dropboxは無料である程度の容量までは使用できるため、バックアップを取る方法の1つとして優れています。

ただし、セキュリティ的には100%安全とはいえないので、顧客の個人情報を含む場合の方法としては推奨できません。

手順についてなのですが、Git Hubで、Linux系のOSからDropboxにファイルをアップロードするシェルスクリプト(dropbox_uploader.sh)が公開されているので、それを利用する方法は簡単なのでおすすめです。

具体的な手順としては、Qiitaの以下のページに詳しく掲載されていますので参考にするとよいと思います。

さくらVPSのデータのバックアップに Dropbox を使ってみる

流れとしては、サーバにdropbox_uploader.shをアップロードして実行権限を与え、必要なDropboxへのアクセス情報(トークン情報)を設定してやるとシェルスクリプトが利用可能になるので、あとはcronで実行することでDropboxへ好きなタイミングでアップロードできます。

動的URLはSEO上不利になるか考察

ウェブサイトを構築するときに、動的URLがサイトを構築する場合に必要となる場合があります。

動的URLとは以下のようなURLで、英語ではquery string(クエリストリング)というようです。

http://ドメイン名/ディレクトリ名/product.php?id=◯◯◯

id=◯◯◯の数字の部分によって、表示されるページが変わるといったかんじです。

この動的URLというのは、SEO上不利になるのかというのは昔からしばしば議論されていて、関係あるとか無いとか言われていました。

公式には、Googleは動的URLだろうと静的URLだろうとGoogleは同様にページを扱うということを表明しています。

しかし、私はいろいろなサイトで実験をしてみた結果として、やはり動的URLはSEO上不利と言えるという結論に至りました。

何故動的URLはSEO上不利なのか

何故動的URLはSEO上不利になるのかということを考察すると、Google botが、複数のページを個別ページだと認識してくれないケースがあるからです

具体的にいうと

http://ドメイン名/ディレクトリ名/product.php?id=1
http://ドメイン名/ディレクトリ名/product.php?id=2
http://ドメイン名/ディレクトリ名/product.php?id=3
・・・
・・・
・・・
http://ドメイン名/ディレクトリ名/product.php?id=126

みたいな商品ページが120ページあるページがあったとして、Google botが、それらを個別ページだと判断せず、1つのページしかGoogleの検索結果にインデックスしない場合があります。

この場合、Googleのウェブマスターツールでは、インデックスカバレッジの項目で

Google により、ユーザーがマークしたページとは異なるページが正規ページとして選択されました
(英語で「Google chose different canonical than user」)

と表示されます。

なぜこういう現象が起こるのかは不明なのですが、例えば上記の例だと

http://ドメイン名/ディレクトリ名/product/1.html
http://ドメイン名/ディレクトリ名/product/2.html
http://ドメイン名/ディレクトリ名/product/3.html
・・・
・・・
・・・
http://ドメイン名/ディレクトリ名/product/126.html

のほうが、個別ページだと認識をしてくれやすいようです。

また、

http://ドメイン名/ディレクトリ名/product/1
http://ドメイン名/ディレクトリ名/product/2
http://ドメイン名/ディレクトリ名/product/3
・・・
・・・
・・・
http://ドメイン名/ディレクトリ名/product/126

のほうがおそらく個別にインデックスしてくれる可能性は高いと思います。

仮にインデックスされた場合はページの評価はどちらのURLでも変わらないと思うのですが、動的URLでは全てインデックスされない場合があるということが分かったので、静的URLのほうが有利であるという結論に個人的には至りました。

Google botが、何故個別ページを単一のページと誤認するケースがあるのかは謎ですが、アルゴリズム上そういう事例が発生する場合があるということが分かったので、私も考えを改めました。

動的URLを静的URLとして扱うためには、サーバ側の設定でmod_rewriteを利用したり、あるいはプログラム上の処理で工夫をする必要があります。

Pythonでスクレイピングの勉強メモ

様々なサイトから特定の情報を収集してまとめたサイトを作成しようと思い、Pythonでスクレイピングの勉強をしています。

メモ代わりにやったことをまとめておきます。

やりたいこと

Pythonで複数のウェブサイトから特定の情報を取り出してきてまとめたい。
何故Pythonかというと、PHPでもできるのだろうけど、最近Pythonが人気なのと、勉強も兼ねて。
スクレイピングして取り出したデータをデータベースに保存するまではPythonでやって、表示するサイトはPHP+WordPressでもいいかなと。

ローカル環境でのテスト

まずサイトを立ち上げる前にローカル環境でテストを行っています。

環境
MacOS High Sierra

Pythonのインストール

まずは最新のPython3をインストール

確認したところ、本記事執筆時点でバージョンは3.6.1

仮想環境の作成

以下のコマンドで、仮想環境を作成します。

python3 -m venv scraping

仮想環境を作成してそれ以下でやることで、開発環境でライブラリの依存関係などをプロジェクトごとに制御しやすい。

上の例では「scraping」という仮想環境を作成。

上記で作成した仮想環境に入るには

. scraping/bin/activate

では入れます。

仮想環境を抜けるには

deactivate

で抜けられる。

ライブラリ「Beautiful Soup」のインストール

スクレイピングをするのに便利なライブラリ「Beautiful Soup」をインストールする。
必須ではないが、あると便利

pip install beautifulsoup4

上記のコマンドでインストールを行う。
エラーが出たが、pipのアップグレートを行うことで解決した

pip install –upgrade pip

簡単なスクレイピングのテスト

簡単なスクレイピングのテストを行った。
Beautiful Soupは、それ自体ではローカルにあるファイルしか読み込めないため、urllibというモジュールをインポートして使用し、組み合わせることで外部URLを、URL指定で読み込むことができる。

上記のプログラムでは、抜き出したいHTMLページのURLからa要素を取り出して、URLとテキスト情報を出力している。

pythonのスクレイピングでやりたいこと

特定のウェブサイトのページの、特定テーブルのtd要素を全て取り出してリスト化したい。
そのために色々と試行錯誤をしてみた。

1・Beautiful Soupを使ってみる

上記の例では、スクレイピングしたい対象のページからtd要素のテキストを抜き出して表示するというもの。

結果としては、途中のtd要素までは取得できたものの、取得するページの要素がJavascriptの広告の部分でストップしてしまい、その先の要素を取り出せなかった。

調べてみたところ、そもそも

soup = BeautifulSoup(html, ‘html.parser’)

でhtml要素を取り出して、何故かページの途中までしか正常に取得できていなかった。
原因は不明。

2.lxmlを使ってみる

Beautiful Soulを使ってみて駄目だったので、lxmlというライブラリを利用してスクレイピングをしてみました。

まずは必要なライブラリをインストールして、基本的なプログラムを作成。
上記の例は、URL指定をしてページを取得するというもの。
取得する部分でエラー。

failed to load external entity “ページURL”

よく分からないけどできなかった。

3. Scrapyを使ってみる

スクレイピング用のフレームワーク「Scrapy」を使ってみた。

Scrapyは

pip install scrapy

でインストールできる。

最初に対話モードで実行したところ、最初の時点でいきなりエラー。
一度は実行できたのに、もう一度実行するとエラーに。
意味不明・・・。

と思っていろいろと操作していたら、pythonコマンドから実行するのではなく、コマンドライン上ですぐに実行すると実行できた。

上記の例では、まずはscrapyで対象のURLのページ内容を取得し、
次で、特定のクラス名のテーブル要素の、tdのテキスト要素を取得できた。

ただし、上記の例での問題として、tdの中にspan要素があり、span要素に挟まれたテキスト情報が除外されてしまうという問題が発生した

response.xpath(‘//table[@class=”クラス名”]/tr/td/span[@class=”クラス名”]/text()’).extract()

上記に変えて実行することで、除外されていたspan要素に含まれるテキスト情報を逆に全て出力することができた。

また、特定のテーブルの見出し要素の次のtd要素を取得する記述は以下の通り

response.xpath(‘//table/tr/th[text()=”テキスト”]/following-sibling::td[1]’).extract()

だんだんコツがつかめてきた。

Scrapyがツールとしては一番使えそうなかんじがした(といっても、簡単なプログラムを作成した結果問題が起きなかった)ので、とりあえずはスクレイピングに使うツールとして決定。

以下は、変数「url」に入った相対パスを、現在クローラーがいるページのURLにつなげて絶対パスに変換する記述

response.urljoin(‘url’)

プロジェクトを作成する

scrapyを使用するにあたって、まずはプロジェクトを作成する

scrapy startproject プロジェクト名

これで、プロジェクト名のディレクトリが作成される。

プロジェクトを作成すると、プロジェクト名のディレクトリ以下に、フレームワークのファイルやディレクトリ一式が自動生成される。

プロジェクトを作成後、設定ファイルとして「setting.py」ファイルが作成されるが、
クロール先のサイトに迷惑をかけないように、

DOWNLOAD_DELAY = 1

を追記しておいがほうがよい。
デフォルトのダウンロード間隔は0秒のため、クロール先のサイトに思わぬ迷惑をかけてしまう場合があるので、この設定をしておくことで、ページのダウンロード間隔が1秒になるため、クロール先のサイトに迷惑を少なくできる。

Spiderの作成

Scrapyでは、Spiderと呼ばれるファイルを作成することで、クローラーを実行する。

Spiderは、コマンドラインから以下のコマンドで作成できる。

scrapy genspider Spider名 サイトのドメイン名

上記のコマンドで、プロジェクトのspidersディレクトリ以下に、「Spider名.py」と呼ばれるファイルが作成される。

ファイルを開くと、デフォルトで

def parse(self, response):
pass

という関数が定義されているが、このparseという関数をScrapyは実行するのでこの関数を変更していく。

parseで実行した処理は、yield文を使用することでスクレイピングした値を返していく。

返す形式は、辞書形式でも問題なし、itemクラスを使用しても問題ない。

itemクラスは、プロジェクトを作成時に、「items.py」というファイル内に定義されていて、ファイルにクラスを定義することで使用できる。

yieldで返した値は、Scrapyを実行する際に、外部ファイルに出力することができる他、後述するItem Pipelineを使用することで、データベースへ保存することも可能。

実行する場合は、

scrapy crawl スパイダー名

で実行できる。

Item Pipelineの活用

ScrapyにはItem Pipelineと呼ばれる機能があり、使用することでデータをチェックしたり、データベースにデータを保存したり、parseの処理で返したItemオブジェクトを利用した処理を行うことが可能。

Pipelineの記述は、プロジェクトフォルダ内の「pipelines.py」に記述する。

pipeline.pyにクラスを定義し、setting.pyに定義をすることで呼び出す。

ITEM_PIPELINES = {
‘プロジェクト名.pipelines.クラス名’ : 300,
‘プロジェクト名.pipelines.クラス名’ : 800,

上記の例の300や800といった記述は優先度で、数が小さいほど優先して処理される。
0〜1000までの間で定義され、優先度が高い順から定義されたクラスが処理される。

ここで、yieldで返されたitemオブジェクトのチェックを行ったり、データベースに保存する処理を行える。

pipeline.py内の関数 process_item内に、pipeline実行時に処理をする記述を行う。

WordPressをSSL移行でアクセス数が大幅に減少・・・原因を考察

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

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

SSL移行の手順

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

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

といった形で、複数のサイト(10サイト程度)をほぼ同時期にHTTPS化しました

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

結果

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

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

kusanagiのphp.iniの設定変更方法

利用しているサーバは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() を利用するとよいだろう。

Nginx+php7へのWordPress移行で苦労した点まとめ

PHP7+Nginx

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

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

移行前の環境
php5+Apache

移行後の環境
php7+Nginx

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

1.サーバを移行しようと思った理由

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

2,移行したサーバ会社

ConohaのVPSに移行しました。

Conohaを決めた理由としては

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

という点になります。

2.移行プロセス

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

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

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

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

URL/〜〜〜/〜〜〜/

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

Apache + HHVMを試してみる

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

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

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

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

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

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

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

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

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

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

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

Nginx+PHP7に再度挑戦

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

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

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

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

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

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

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

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

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

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

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

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

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

サーバの移行完了

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

つまづいた点としては、

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

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

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

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

phpでファイルをinclude時に謎の空白行が入る問題を解決

  • 2018年5月10日 6:46 PM
  • php

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

発生した問題

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

原因の究明方法

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

解決策

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

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

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

EC-CUBE3インストール時のステップ4:データベース接続エラーを解決

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

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

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

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

ホスト名の部分を

localhost

から

127.0.0.1

に変更

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

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

phpでGoogleでの検索ランキングを取得する

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

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

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

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

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

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

1. Google Custom SearchのAPI keyを取得する

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

2. カスタム検索エンジンIDを取得する

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

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

3. プログラムを作成する

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

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

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

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

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

問題点

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

1.無料でのクエリ数の制限

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

2.検索順位が微妙に本家サイトと違う?

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

phpでYoutubeの短縮URLを埋め込み用URLに変換して出力する方法

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

Youtubeの短縮用URLとは、

youtubeの短縮URL

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

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

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

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

埋め込み用のコード

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

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

Laravel勉強メモ

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木と違い以下のような要素があるようです。

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

B+木
↑B+木の図

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

【WordPress】.htaccessでドメインの301リダイレクト

ウェブサイトのドメイン変更時に、.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アップデート後にphpで不具合が起こる場合の対処法

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です。

nginx+hhvm+fastcgiが遅かったのを解消

先日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-CUBE3.0のインストールまでについては前回の記事でやってみました。

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

テンプレートの修正

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

EC-CUBE3.0管理画面

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

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

レイアウト管理

レイアウト管理の画面です。
ここは、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は、カスタマイズするのにプラグインを使用できます。
しかし、公式サイトを見ても、今のところプラグインは2系に対応したものしかないようです。
そのため、プラグインに関しては、今後3系に対応したプラグインが開発されるのを待つしかなさそうです。

総括

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

EC-CUBE3.0の旧バージョンとの違いとインストール手順

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

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

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

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

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

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

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

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

EC-CUBE3.0では、受注管理、商品管理、顧客管理の3つをコア機能としてデフォルトで搭載され、追加機能はプラグインで対応するということで切り分けているようです。
これは、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 にリダイレクトされてインストールがはじまるのですが

エラー1

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

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

eccube2

しかし、上の方に何やら警告がでています。
これは単なる個人的なサーバ設定の問題で、テスト環境の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に・・・

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

EC-CUBE3ログイン画面

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

管理画面
EC-CUBE3.0管理画面

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

サイト画面
サイト画面

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

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

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

Xcode+Swiftでじゃんけんアプリを作ってみた

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

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

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

じゃんけんアプリの仕様

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

アプリ作成の手順

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

2・Storyboardへの配置

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

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

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

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

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

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

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

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

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

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

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

ジャンケン画像1

ジャンケン画像2

ジャンケン画像3

MySQLのデータベースのテーブルの型の付け方

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

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

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

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でタブ画面と画面ごとの処理を実装する

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

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

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

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

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

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

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

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

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

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

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

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

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

XcodeでWebviewを画面ピッタリに表示する

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

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

add 4 constraints

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

「Scales Page To Fit」にチェックを入れる

6・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のApp Transport Securtyエラーの対処

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

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

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

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

XcodeとSwiftでアプリ開発1 – ボタン押すとラベルのテキストが切り替わるアプリ

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からパーツをドラッグすることでコードの記述が最低限で済む。

Swiftについての勉強メモ

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」という言葉を耳にしたことがある人は多いと思います。

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

Node.jsとは

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

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

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

何に使うか

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

基本的にはサーバサイドの処理は何でもできるといったかんじです。

例えば、Apacheの代わりにWebサーバを構築することが可能な他、サーバ上のファイルのアップロード、削除、データベース接続、メール送信などを行うことができます。

Node.jsが解決する問題

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

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

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

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

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

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

また、フロントエンドの処理からサーバサイドの処理までをjavascriptで記述できるため、フロントエンドエンジニアがそのままサーバサイドの処理を行うという場合にも有用です。

Apacheの抱えている問題

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

使い方

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

Node.jsの特徴

記述はjavascript

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

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

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

WIndows7のIE9、10での崩れに苦戦・・・

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

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

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

ただし、自動更新を有効にしていない人が少しいて、一部は未だにIE9だったり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以下は、もうよほど厳密なサイト(か売上がよほどあるようなサイト)でないと非対応でもいいような気がしますね。

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

iframeやSSIを使わずに外部htmlを読み込む方法

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

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

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

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

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

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

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

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

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

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

CSSのnth-childとnth-of-typeの違い

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

nth-child と nth-of-type

があります。

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

例えば

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

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

一方

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

この場合も同様です。

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

nth-child

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

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

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

ホーム > 技術系

フィード

ページの上部に戻る