Facebook様が僕の作ったWebサイトをスパム認定しやがった話。


最近、制作したWEBサイトのSEO周りの対策をしていました。

すると翌々日に、そのHPのFacebookページを管理していたところホームページのリンクを貼ろうとするとページが安全じゃないからBot対策用の認証をしてから投稿しろとのご命令が・・・。

Facebookからの警告文

え?まじか!?

身内のサイトだったので実験的に限りなくホワイトに近いグレーのようなSEO対策にも色々と挑戦していたのもあってこれはヤバい!!と焦りました。

まずやることは「これは誤解だ」という事を運営に報告。

不具合報告ページの画像

自分の作ったウェブサイトでちゃんとしたBusiness用のホームページでスパムのような要素は一切含んでおりませんという事を報告。

むしろ僕を嫌っている誰かがFacebookにスパム報告でもしたのかと疑心暗鬼に・・・。

しかし最近そんなクリーピーで狡猾な人にそこまで嫌われた覚えはない。

という訳で原因をGoogle様に聞いてみました。

するとこのような記事がヒット。

自分のサイトがツイッターにスパム認定されてしまった時の対策 | ANKARE IIDX

OpenGraphタグの指定を間違うとFacebookにスパム扱いされる | Wondershake Engineering

この記事を見た瞬間何が起きているのか理解した。

おそらく2日前に色々設定しなおしたOpenGraphタグが原因っぽい。

OpenGraphの設定方法は色々ありますが、僕は既に導入済だったWordPressのプラグインAll in One SEOを利用しました。

詳しい方法は省きますが、Dashboardの下にあるプラグインメニューのSocial Metaから設定を行います。

この時に既に色々書いてあったメタタグと競合したりするとエラーが出るのでFacebook様がご提供していらっしゃるでバックツールを利用しながらエラーを潰していきます。

デバックツールはこちら:
https://developers.facebook.com/tools/debug/og/object/

これを設定した時に直さなきゃいけないところはちゃんと教えてくれるので警告に従ってコードを修正していけば問題なく設定できます。

しかし、僕は設定した時に1つだけエラーを無視していました。
Warnings That Should Be Fixed 

エラー文がこちら。

Warnings That Should Be Fixed
Attempted Frozen Title Change

It appears that you are trying to change the property og:title from サイトタイトル to サイトタイトル | Top Page. If so, you are not allowed to for this object because too many actions have been published against it.

要約すると「既にFacebook上で多くのアクション行われているのでタイトルは固定されてますから今更メタタグog:titleを設定しても変更できないよー」って事らしい。

えー、まじかよ・・・。

タイトルの表記を変更したかった(単語間のスペースを無くしたかった)のにできないとか痛すぎるんですけど・・・。

しかしおそらく上記リンクの記事を読むにこれが原因でしょう。

警告を無視するという愚行、Facebook様の意向を無視しようとしたので天罰が下されました。

というわけでog:titleタグのcontent属性の中身をFacebook様の言う通りに変更しました。

今現在(2015年1月19日)まだ解除はされていないようですが、ひとまずこの警告をパスして数日様子を見ましょう。

とりあえず限りなくホワイトなグレーっぽいSEO限りなくグレーに近いホワイトなSMO対策が原因ではなかったので安心しました。

反省

サイト運営を始めてソーシャルメディアを運営するのであればまずメタタグ周りの整理を最初に行いましょう。


VagrantのCentOSにconcrete5をインストールする。


最近はまだまだCMSと言えばWordpressが主流です。

むしろCMSといえばWordpressというくらいWordpressのシェアが圧倒的に高い。

しかしWordpress自体HTMLとCSSがある程度理解出来ていなければ簡単なレイアウトすらいじることが難しいので、いざ納品してもクライアントが自分でカスタマイズするにはそれなりの知識が必要です。

その一方で直感的にデザインやらコンテンツを更新できるWixやらJimdoのようなサービスやツールも増えてきており制作者の中にもこれらのサービスを使ってクライントに納品している人もいるとかいないとか。

これらのサービスはウェブ初心者にとっては間違いなく非常に優れたサービスですが、制作側の制限が多く見えない部分で非常に多くのデメリットがあります。

ランニングコストを比較した場合も年間3500円程度で運営できるWordpressに比べ、独自ドメイン&広告非表示の一番安いプランでも年間割引込で$74.52がウェブサイト毎にかかる上にサーバーには多くの制限があります。

更に管理画面等のUI等も運営側の都合で大きく変わる可能性もあるのでWEB制作者が納品物として使うのは余程しっかりと説明しない限り、ちょっとマズイんじゃないかと思います。

けれどやっぱりブログライクなWordpressの管理画面を操作してカスタマイズやコンテンツの更新をするのはある程度Webの知識がないと少し難しい。

他のCMS(JoomlaやMovabletype)もひと通り弄ってみたけどそれぞれの長所や短所はあるものの、Webに詳しくないクライアントの立場に立ってみると大した差は無い。

制作者側も普段通りの開発環境で開発ができて、クライアントが直感的にカスタマイズやコンテンツの更新ができるツールは無い物か・・・。

あった。

CMSとWixのようなホームページビルダーのハイブリッド。

Concrete5

色々なブログを見てみるとかなり評判は良いらしい。

特にクライアントからのレスポンスが上々でブログ的な要素が少ないコーポレートサイトやポートフォリオサイト等を作るのにオススメとのこと。

例えばWordpressであればメニューバーを一つ作るのに後々のカスタマイズを考慮するとfunctions.phpを弄って、header.phpを弄って、更に管理画面からメニューを追加みたいなややこしい事をしますが、そんなことしなくてOK。

テンプレートを弄るのにもWordpressはサーバーサイド言語(PHP)の比重が大きいのに対してConcrete5はHTMLとCSSとJavaScript(jQuery)フロントエンドの技術が殆どなのでプログラムは苦手な人にもおすすめ。

今回はそんなConcrete5をVagrantのCentOSにインストールしちゃいました。

途中までの過程はWordpressと殆ど変わりません。

まずはインストールしたいディレクトリ内にダウンロードしたconcrete5本体を移動します。

ダウンロードはこちらから。
concrete5 Japan | 日本語版公式Webサイト

現在安定版のバージョン5.6.3.2とUIも色々と新しくなった5.7.3があります。

ブロックの移動をする際等の操作性も大きく向上しているので最新版がおすすめです。

レガシーとは言うものの、どっちも入れてみたところ導入に関しては5.7.3のほうが安定している気がします。

そしてVagrantを起動してブラウザからアクセスすると以下のような画面になるので、まず言語を選びます。

concrete5 言語選択画面

するとインストールに必要な環境の各種チェックリストに飛びます。

concrete5 インストールチェックリスト

以前紹介した記事通りの方法でCentOSにApache、PHP、mySQLなど導入した場合、以下の項目がクリアできていない場合があります。

【導入編】Vagrantでローカルサーバー環境を作ろう。for 64bit版Windows8.1
【設定編】Vagrantでローカルサーバー環境を作ろう。for 64bit版Windows8.1

  • 画像編集が利用可能
  • concrete5 requre URLをサポート
  • XMLサポート

「画像編集が利用可能」にチェックがついていない場合

これはPHPのGD Libraryがインストールされていない可能性があります。

yumコマンドにてサクッと導入しましょう。

SSH接続後にPHPのバージョンを確認します。

と入力するとPHPのバージョンが表示されます。

デフォルトでは5.3.3だったと思うのでギリギリセーフですが、新しいほうが何かと都合が良いのでアップデートしたい場合は以下のコマンドを入力します。

まずは5.3を削除

リポジトリの追加とアップデート

rpmforge

remi

yumアップデート

PHP5.5とパッケージ色々

ここからが本題。

gd-lastのパッケージインストール

php-gdのインストール

参考:CentOSにPHP5.5とphpMyAdminをインストール | Qiita

※データーベースを作成するのにphpMyAdminも必要な方は参考サイトもチェックしてください。

これでGD Libraryのインストールは完了です。

インストールディレクトリ/application/filesの中cacheを削除して再度アクセスすると項目にチェックが付いているはずです。

「XMLサポート」にチェックがついていない場合

先ほどの項目の5.5をインストールする際にサラリと書いてしまったが以下のコマンド

この「php-xml」がXMLなので既にPHPが入っている場合は

これでOK。

終わったら同様にcacheを削除して再度アクセスするとチェックが付いているはず。

「concrete5 requre URLをサポート」にチェックがついていない場合

導入の際に一番よく躓くのがここらしいです。

主な原因はPHPのセッションが正しく動いていない事らしいです。

こちらもSSHからパーミッションの設定を変更すると解決できます。

まずは現在のパーミッションを確認。

パーミッション設定がデフォルトだと

drwxrwx— 2 root apache

みたいになってると思いますが777に変更します。

変更後再度確認。

drwxrwxrwx 2 root apache

このようになってればOKです。

設定が完了したらcacheを削除して再度アクセスして確認します。

参考:concrete5 Japan | 「C5 Request URLsサポート利用可」の警告がでてインストールできない。
※777はセキュリティ上問題があるのでローカル環境以外ではおすすめしません。
ローカル環境以外での設定については参考サイトを御覧ください。

画像の様にすべての項目にチェックがつくと「インストールを続ける」ボタンが出てくるので先へ進みましょう。

concrete5インストール設定

予め作っておいたmySQLの空のデーターベースとEメール等を入力。

レンタルサーバー等にインストールする際はここに入力するEメールがフォーム機能等を使った際の差出人になりますがローカル環境なので何でもいいです。

「サンプルコンテンツ」の項目では初めての方はフルサイトをチェックしましょう。

必要情報を入力して先へ進むとインストールが始まります。

concrete5 プログレスバー

プログレスバーが見えるのは親切ですね。

完了するとチュートリアルのYoutube動画がポップアップ

concrete5 チュートリアルポップアップ画像

英語ですので観なくてもいいです。

このポップアップを閉じたら、左上の編集ボタンをクリックしてグリグリ弄ってみましょう。

編集ボタン画像

左上のつまみを摘んでグリグリ移動。

concrete5 ブロック移動画像

ドロップするとレイアウトが変更できます。

concrete5 レイアウト変更画像

このように視覚的に弄くり倒せます。

concrete5すごい!!

もちろんWordpressのようにテンプレートをコーディングしたり、HTMLのWebサイトをテンプレート化することも可能です。

それについてはまた後ほど。


WordPressテーマ『Enigma』を色々弄ってみた話。


現在進行中のプロジェクトが手持無沙汰気味のためなんとなくブログリニューアルしました。

以前のデザインはモバイルに対応もイマイチで公式テーマのTwentyTwelveベースだったので面白みに欠ける部分がありましたが今回利用したテーマ『Enigma』はデフォルトでもjQueryでカルーセル系のプラグイン等がふんだんに使われていてゴリゴリ動く。

そして選んだ一番の理由はなんとなく興味はあったけどまだ弄ったことが無かったCSSフレームワークのBoostrapが使われている事。

いざ弄ってみたらかなり調整が楽で面白かったのでブログに書きます。

WordPressの無料テーマについて。

無料のワードプレステーマは色々なところで配布されていますが、余程のことが無い限りWordpress公式サイトで配布されているモノを使いましょう。

以前、割と有名なWEBデザイン会社が独自に配布していた無料版のテーマによろしくないスクリプトが組み込まれていて利用したウェブサイトが軒並みGoogleからペナルティを受けるという事件がありました。

しかしWordpress公式サイトの物が安心かといえばそういうわけではありませんが、人目に付くことも多くレビューしている人の分母が圧倒的に違います。

WordPress公式サイトでそこそこ良い評価を受けているテーマに関してはまず安全だと思っても問題ないと思います。

Enigmaのダウンロード

利用したい方はまず公式サイトからダウンロードします。

https://wordpress.org/themes/enigma
※日本語には対応していないため、管理画面や機能の一部は英語表記になります。

Enigmaとは日本語で『謎』という意味ですがその名の通りポップで不思議な感じの動きをします。

利用してみると自動で要素の高さ等が変わる部分などもあるのでデフォルトの設定のままだと少し使いづらいのでそういった部分の設定変更方法なども次項以降で解説します。

テーマのファイル構成

ファイル構成は一般的なindex.phpやpage.php,single.phpと、そこから読み込むcontents.php等の他に特徴的なのはWooCommerceというWordpress用のeコマース用のPHPファイルがありますが、ブログの運営をするだけなら無視して構いません。

次の階層にはimage,fonts,js,css,coreというディレクトリがあります。

デザインを弄るときはstyle.cssではなく主にcssディレクトリ内のcssを弄ることになります。

cssディレクトリ内にも10個のCSSファイルと1つのディレクトリがあります。

cssList

ソースを見てみるとstyle.css->boostrap.css->default.css->enigma-theme.css->media-responsive.cssの順で読み込まれているため、変更する際に主に使うのはenigma-theme.cssとmedia-responsive.cssの2つになります。

ファイル名からも分かりますが細かいデザイン部分はenigma-theme.cssに、メディアクエリなどを利用したレスポンシブデザインに関してはmedia-responsive.cssを弄ります。

自作のテーマではstyle.cssをゴリゴリ弄っていきますが、配布されているテーマは殆どの場合コアな部分はあまり弄らなくても済むような工夫がされている事が殆どなので配布されているテーマを利用する場合、まずはソースを見て読み込まれている順(優先順位)を確認しましょう。(本当は自作テーマでもそうするべきなんですが・・・。)

子テーマの作成

子テーマの作成についてはほかに書いてあるブログも沢山あるので省略します。

The Present Note:【重要】WordPressテンプレートのカスタマイズ前に・・・子テーマをつくってのカスタマイズ方法 -CSS篇-

このテーマで特に気を付けるべきなのは親テーマの中でget_template_directory_uri()で読み込まれているCSSやJSは子テーマ内ではget_stylesheet_directory_uri()に書き換えないと反映されないという点。

上記のリンクのように子テーマにすべてのファイルをコピーした場合は子テーマのfunctions.phpに2行書き加えるだけで全てのファイルの読み込みが変更可能です。

デフォルトではこのようになっています。

この定数(define)を子テーマのfunctions.phpに記述して上書きします。

WL_TEMPLATE_DIR_URIに定数としてget_template_directory_uri()を入れているのでget_stylesheet_directory_uri()に変更すれば全てのファイルに対応します。

個別に変更したい場合は個別に書き換える必要があるので親テーマ内のディレクトリは全てコピーした方が楽かもしれません。

変更後は少しファイルを弄ってみて問題なく変更されているのを確認したらデザインの変更にかかります。

デザインの変更

海外(英語圏)のウェブサイトに比べて日本語のウェブサイトはどちらかというと1ページに色々な情報を隙間なく詰め込む傾向があります。

EbayやAmazonよりもヤフオクや楽天がごちゃごちゃして見えるのもそういった傾向のあらわれだと勝手に推測しています。

好みの問題もあるかもしれませんが英語向けに作られたテンプレートの多くは日本人の感覚だとマージンやパディングが無駄に広く感じる事が多いと思く、Wordpress公式サイトにあるテーマを日本語のウェブサイトに利用する際はマージンやパディングの調整が必要になるとおもいます。

※比較画像
compare

上の比較画像ではスペーシングだけではなくカラム数も思い切って増やしましたが、あまりごちゃごちゃしているようには感じません。

Boostrapのおかげでスペースを省いたくらいではデザインが崩れたりはしないのでHeaderやFooter、PageやPostの余計なスペースもゴリゴリ削りましょう。

ちなみに、カラム数の変更を行うには2か所変更する必要があります。

まずは\enigma\js\carouFredSel-6.2.1ディレクトリ内にあるcaroufredsel-element.jsを書き換えます。

表示数を増やすにはvisibleのmaxの項目を増やしましょう。

ついでに高さが可変の時に自動スクロールがONだと以降の要素が勝手に動くのがわずらわしいので高さを固定にするか、自動スクロールを切る事をお勧めします。

最大表示数は増えましたが、要素の幅が33.333333%でoverflowもおそらくhiddenに設定されているため、見えません。

ここはBoostrapのCSS内のclass『col-md-4』のwidthで変更可能ですが、これは弄らずにmedia-responsive.phpに上書きして処理します。

表示したいカラム数に応じてパーセンテージを調節します。

大まかな部分の変更はこれくらいになります。

私自身まだ微調整を終えていないので何か問題にぶつかり次第解決の後、追記致します。

ひとこと

誰かの作ったテーマをハックするのはいい勉強になりますね。

特にメンテのしやすいコードの書き方とか物凄く。

ちなみにサイトタイトルも『うぇぶ屋がとんだ』からドメイン名の『cityJumperWEB.com』に変更しました。

けどFacebookのページタイトルが何故かローマ字表記に変更できない・・・。


【設定編】Vagrantでローカルサーバー環境を作ろう。for 64bit版Windows8.1


前回の導入編に引き続き今回はVagrantにApacheやMySQLなどを導入してごく一般的なWebサーバーとして動くようにしたいと思います。

今回はWordpressが問題なく動くような設定にしたいとおもいます。

全体の流れとしては以下のような感じになります。

1. Apacheインストール

2. PHPのインストール

3. mySQLのインストール

4.Vagrantfileの設定とディレクトリの同期

5. httpd.confの設定

6. phpMyAdminの導入

vagrant

1. Apacheインストール

まずはインストールしたCentOSへログイン後ホームディレクトリにてyumコマンドを実行します。

終了したらApacheを起動し、いくつかの設定をします。

ここまで入力したらひとまず大まかなApacheの設定は完了。

2. PHPのインストール

続いてこちらもyumコマンドを利用してインストールします。

PHPの設定は本番の環境などに合わせる必要があるので後ほどinfo.php等を見ながら変更します。

3. mySQLのインストール

CentOS 6系のデフォルトのyumコマンドでインストールできるmySQLは5.1ですがphpMyAdminの最新版はこのバージョンでは利用できないので新しいバージョンのmySQLをリポジトリを追加してインストールします。

詳しい手順や内容はこちらのはてブ記事に掲載されているのでコピペでOKなコードだけ書きます。

mySQLの初期設定はこちらを参考にしてください。

http://kajuhome.com/mysql.shtml
-MySQLの設定-

ログインしてcreate tableなど一通りの操作を行ってみて問題が無ければホストOS(Windows)からゲストOS(CentOS)内のファイルにアクセスできるようにします。

4.Vagrantfileの設定とディレクトリの同期

Vagrant upを行ったディレクトリ内にあるVagrantfileを編集します。

まずは27行目あたりにある以下の項目のチェックを外します。

その後Vagrant reloadを行い上記のIPアドレスにウェブブラウザからアクセスすると、仮想マシン内の/var/www/htmlのディレクトリにアクセスできます。

CentOS Apacheのテスト画面が表示されれば問題なく動作しています。

centos

更にホストマシンからファイル操作を行うにはディレクトリの同期設定を行う必要があります。

上記のコマンドでvagrantのホームディレクトリとウェブサーバーのディレクトリが同期されホストマシンからもファイルの編集が可能になります。

ホスト側のディレクトリはパスを変えれば任意の場所に変更することも可能です。

この設定はVirtualBoxのGUIから変更も可能です。

sharefolder

5. httpd.confの設定

ここまで行えばWordpress自体はインストール可能ですがこのままでは変更したCSSファイルやJSファイルがスーパーリロードしても反映されなかったり.htaccessによるアクセスの制御ができずパーマリンク設定ができません。

Apacheの設定(httpd.conf)を変更します。(※Vimエディタでは通常モードにて『/文字列』で文字列検索が可能です。)

Esendfile

overide

これで一般的なウェブサイトやWordpress等のCMSを利用したウェブサイト等は問題なく動作します。
(外部サーバーとのやり取りは許可していませんのでsendmail等は利用できません。)

記事が長くなったのでphpMyAdminの設定はまた後ほど。

ひとこと

新しいスマブラが発売されましたね。

最近はやる時間は殆どありませんが欲しい。

中学生の頃にスマブラDXで関東エリアの公式大会で準決勝出場でステージまで上がったのがプチ自慢。(高校生の頃東京都2位だった陸上より凄い!?w)

もう10年以上昔の話ですがスマブラ界隈では現在でもかなり有名なRain氏ことK君の家にもよく入り浸って対戦してました・・・。

俺が中学生の時に高校生だったRain氏ですが今でもバリバリってスマブラにかける情熱が半端じゃないですね。

陰ながら応援してます。


ウメブラ8 準決勝 Rain vs SHIG | Abadango / UMEBURA 8 SemiFinals – スマブラ3DS 大会 SSB3


Royal PrettyPhotoでデフォルトサイズの変更をする方法。


先日紹介したWordpressプラグインのRoyal PrettyPhotoにてデフォルトのポップアップのサイズを変更する方法。

jQueryプラグインprettyPhotoのURL末尾#prettyPhotoを消す方法

jQueryプラグインPrettyPhotoを気軽に導入できる当プラグインですが、YoutubeビデオやVimeoからのギャラリーを表示するにはデフォルトの設定では少し物足りない大きさです。

<a>タグのURLの末尾にwidthとheightを入力する方法がよく紹介されていますが、その方法だとレスポンシブなデザインに対応できないのでいっその事デフォルトサイズを変更するとDOMサイズを変更してもレスポンシブに対応してくれます。

オリジナルのPrettyPhotoプラグイン(jQueryプラグインの場合)

jQueryのパッケージの場合はjsフォルダに格納されているjquery.prettyPhoto.jsのスクリプト内を以下のように変更すればOKです。

ファイルはミニマイズされているので【default_width】等で文字列検索をかけて見つけましょう。

Royal PrettyPhoto(Wordpressプラグインの場合)

Royal PrettyPhotoの場合も基本は同じですが、ファイルの場所がプラグイン内部になるのでFTP経由でプラグインのファイル(plugin/rt-prettyphoto/js/jquery.prettyPhoto.js)をダウンロードしたものを編集、

又は管理画面の「プラグイン→インストール済みのプラグイン→編集→rt-prettyphoto/js/jquery.prettyPhoto.js」から編集しましょう。

プラグイン

default_widthとheightの場所を見つけたら方法は上記と同じです。

しかしプラグインの場合はプラグインの更新によりファイルが書き換えられる場合があるのでプラグインの更新を行ったら変更されていないかチェックする必要があります。

あまりお勧めはしませんが、プラグインの更新通知自体を消す方法も以下のブログにて紹介されています。

WORDPRESSBLOG:WordPress 本体やプラグイン、テーマの更新通知を非表示にする方法

WPプラグイン化されたjQueryのプラグインのファイル構成は殆どの場合オリジナルとあまり変わらないのでマニュアル等が見つかりにくい場合はオリジナルのマニュアルをあたってみましょう。