初期ドメインをNot Foundにする [さくらインターネット]

最近、さくらインターネットで独自ドメインを新規公開する場合、無料SSL(https)で公開するパターンが多くなってきました。(お勧めしているので当然ですけどw)
もちろん、統一URLの正規化をしますが、
その前に忘れていけないのが初期ドメイン=サブドメインです!

通常、さくらインターネットで、独自ドメインを運用すると、
初期ドメイン=サブドメインと、独自ドメインの両方でアクセス可能です(当然、wwwありなし/indexありなし/httpsのSありなし/canonical/の正規化としてデフォ設定します)
そして、マルチドメインで運用しているのに、初期ドメイン経由のディレクトリから、独自ドメインのウェブサイトも表示できます。

まあ、マルチドメインの場合には、制作者が任意でディレクトリを設置するので、ディレクトリ名を知らない一般ユーザーからアクセスしようが無いのですが、検索エンジン(Googleなど)が誤ってインデックスしてしまうと、多くのユーザーがサブドメイン経由でアクセスしてしまう可能性もあります。
これでは、独自ドメイン側を正規化しても、初期ドメインのせいでマイナス効果になりますね。

初期ドメインのルートディレクトリから、.htaccessで、Denyにしておけば403=Forbiddenになるので、簡単だしこれだけでもOKなのですが、(今まではこの403にしていました)
ストーカーのようなユーザーだと、Forbiddenページを見て(自分だけが拒否られたと)逆ギレする例もあるようです・・・

元々何も無かったことにすれば済む話なので、
403ページよりも、404ページにした方が良いでしょう。という方向性です。

ところが、404.cgiを設置し、
ErrorDocument 403 /404.cgiと書いて、404ページに誘導すると、
404が表示されるどころか403で、それもいつもの403と違うw
Forbidden
最後の3行目が、
Additionally, a 403 Forbidden error was encountered while trying to use an ErrorDocument to handle the request.
つまり、
「あのさぁ、404を指定しているから表示しようとしたら、404自体を拒否ってるからループじゃねーか! アホか」とサーバーが怒っているのです・・・
初期ディレクトリのトップディレクトリ(www)を拒否っているので、そこにある404.ファイルも拒否しちゃっているのです・・・当然の事ですよね、あららぁw

初期ドメインを404表示にする

では、どうすれば良いのか?
404.ファイルだけを除外してallowにするか、
下層にallowのディレクトリを別途作って、404.ファイルを配置する。⇐ これがベターか。

www/.htaccess(A)
   /error/.htaccess(B)
   /error/404.cgi
  1. .htaccess(A)は、独自ドメイン以外はdenyにする
    つまり、初期ドメインは表示されない。
  2. .htaccess(B)は、allowにする
    つまり、404表示を許可させる。
    ErrorDocument 403 /error/404.cgi
    ErrorDocument 404 /error/404.cgi

これで、初期ドメインへのアクセスが404表示になります。
気にるアクセス時のURL(アドレスバー表示)は、/error/などのディレクトリ名を表示せず、アクセスしたURLで表示されるので、どの下層ディレクトリに設置しても何ら問題ないです(但し、404.htmlファイルだとNGだった筈なので、404.cgiにして内部にErrorDocumentを記述しています)。
それなら別途の/error/を設置せずに、独自ドメインのディレクトリでも良いのですが、独自ドメイン用の独自404を設置するべきなので、この案は却下です(ファイル名を変えれば良いのですが、混同してミスを誘発してしまう可能性もあるから)。

この設定、今後もドメインの初期設定として採用決定です!
注意点は、
ErrorDocument 403 /404.cgiと指定するのはルート違いなので、怒られるw


SSL www無しに301リダイレクト [さくらインターネット]

2018/11/16
さくらインターネット×Firefoxの環境で、
SSLのhttps: が「www有り ⇒ www無しにリダイレクト出来ない」というネット報告を見まして、不具合の理屈になるほどと納得しつつも、マルチSSLなのにそれはおかしい。(さくらインターネットかFirefoxが設定を見直さなくてはいけないです)
www有りは正規化出来ているのにwww無しが出来ないのは変ですね。 訂正:前回迄のSSLは、wwwをサブドメイン扱いし、登録とDirectoryを分ける細工で301リダイレクトしてたw
なんて面倒な事をしてたんだろう・・・

さくらインターネットのSSL(Let's Encrypt)が無料で使えるようになったので、今後はオススメNO.1サーバーにしようと思っていたので、そのデメリットだとNGですね・・・

で、さくらインターネット×新規独自ドメイン×www無し設定の件があったのでお試し。
確かに、以前の設定だとリダイレクトされないのかもしれませんが公式によると、
RewriteCond %{HTTP:X-Sakura-Forwarded-For} ^$ の追加コードも必要です。
www無し 301リダイレクト
https: www無しに正規化できました。

  • http://example.com
  • http://www.example.com
  • https://example.com
  • https://www.example.com

問題のFirefoxでも他でも問題なく301リダイレクトされて正規化できました。
もちろん、更にindex.html 無しの設定も追加しました。

新規サイトは、Google側でも統一登録しよう!

正規化で301やcanonicalは必要ですが、その前にGoogleの認証が先に必要ですから、301リダイレクト前にGoogleで認証してから、ウェブサイト側の301リダイレクト(.htaccess)の設定をしなければいけません。 (リダイレクトされると認証できないでしょうから・・・)

SSLも含めると、矛盾の無いように他3つのURLをGoogleのプロパティで登録設定が必要です(1箇所で同時に設定できるようにして欲しい ⇒ Googleではテスト的に統一システムを試しているらしい) 現時点で、S付きSSLのURLはGoogle設定に表示されていませんけどねw
Google www有り/無し設定


Facebookをホームページに貼る コード取得

2018/11/2 もう11月なんですね。超忙しいw

Facebookをウェブサイトに貼りたい」との事でしたので、
では、ログインしてiframeコードを取得するお願いしたところ、
別のプラグインコードが送られてきました。あらら・・・

別のソースを改変して、外部から書き直せるかと考えたが、もしかして外部取得できるんじゃなかったか?とおぼろげな記憶・・・
はい! Facebookコードは、Facebook developersから取得できましたw
余計なお手数をお掛けし、ごめんなさい。

Facebookをレスポンシブに

ところで、iframeってiPhoneでハミ出ますよね、ハックも完璧じゃないようだし、
何よりFacebookがレスポンシブじゃないので上手くいかない。

ベターな対策としては、Facebookのプラグインも面倒なのですが・・・
data-width="500"
data-adapt-container-width="true"
が必須で、
親要素を{ width: 100%; max-width: 500px;}

・ただし、MAXでも500pxです。
・ファーストレンダリングで判断しているでしょうから、手動で幅を可変しても変わりません・・・
ウインドウリサイズ用スクリプトを利用する方法もあるんですね。すごいなぁ

それと iPhoneのレンダリングで、
画像回り込みimg{float:left;}の1行目の文章がnowrapになってしまい、横幅がガバガバになってしまうんですが(1行目をbr改行しないといけません・・・)
Apple iOs 早くバグ修正してくれ!


Yahoo!カテゴリ 終了

「Yahoo!カテゴリ」「Yahoo!ビジネスエクスプレス」
サービス終了のお知らせ

Yahoo!カテゴリは、2018年3月29日をもってサービスの提供を終了することになりました。1996年の弊社創業時から長きにわたりご愛顧いただいている皆さまには、ご迷惑をおかけすることになり、大変申し訳ございません。
Yahoo!カテゴリからのお知らせ

これに伴い、2017年7月31日をもって、Yahoo!ビジネスエクスプレスが終了。
インターネット通販を築いた「Yahoo!カテゴリ」(ディレクトリ型検索)「Yahoo!ビジネスエクスプレス」(審査サービス)でしたが、Google検索(ロボット型検索)が主流となり、お役目終了となりました。


LightBoxのレスポンシブ

ポップアップで拡大画像をエフェクト表示させるLightBox系ライブラリは多々ありますが、非常に人気があり、個人/商用はもちろん通販サイトなど多目的なサイトで利用されています。
LightBox PC表示

しかし、継続利用(jQuery等の干渉が毎度めんどいから継続)している
元祖Prototype系LightBox(v2.05)だとレスポンシブ非対応
LightBox 縮小するとはみ出る
スマホやブラウザを縮小した際にも拡大画像が原寸大のままハミ出してしまい、美しくありません。

「簡単にレスポンシブに出来るだろう」
と思いましてゴニョってみましたら
3時間も掛かりました・・・

画像サイズのCSSがstyle属性として直接指定されてしまう。
CSSファイルから上書きできない。
値を消すよう.jsファイルを編集しても外枠の縦高が元画像の値になるか、デフォルトの250pxが最低値として適用される。
height: auto !important;で上書き解除するも効かないw

lightbox.js
// this.prevLink.setStyle({ height: imgHeight + 'px' });
// this.nextLink.setStyle({ height: imgHeight + 'px' });

各部の高さ指定を削除してもダメ
inlineにしても高さが消えない・・・どんなBOXや?
試行錯誤した結果、実はFONT-SIZEが落とし穴! あり得ない設定w
// if (hDiff != 0) new Effect.Scale(this.outerImageContainer, yScale, {scaleX: false, duration: this.resizeDuration, queue: 'front'});
LightBox レスポンシブ対応
これらを前提条件として、
CSS(@media)で変更すればOKで、style属性を打ち消す最優先な!importantも多用します。

JavaScriptの勉強を疎かにしたから、今こんな大変な目にあっています・・・


迷惑スパム .htaccessでIP拒否

お問い合わせフォームからのスパムで、
同じ誘導URLのスパムメールが来てウザイとの事で、スパムのIPを調査してみた。

188.143.232.15  188.143.232.41  188.143.232.34  188.143.232.62
188.143.232.70 188.143.232.40 188.143.232.16 188.143.232.19
188.143.232.26 188.143.232.37

ロシアのIPです。.htaccessでIPやUA単位でアクセス拒否/禁止にすれば良いが、毎回毎回個別対処するのは現実的に手間が掛かかるので1発設定で済ませたい!
割り当てられたIPなので共通部分のアドレスを利用
188.143.232が今回の共通点のようです。
188.143.232.〜の全てを適用させるには、CIDRでも良いようですが今回は単純に、
188.143.232. のみ記述して*ワイルドカードにしておきます。

order allow,deny
allow from all
deny from 188.143.232.

ルート配置でも良いが、下層の動作ディレクトリのみで良いでしょう。
また、スパマーは403になるので、動的な404.ファイルに誘導しておく。

その他、色々な対抗策(英文のみ禁止やNGキーワード)もありますが、やりすぎて一般ユーザーまで拒否っちゃうといけません・・・(URLのみ連絡する人や文章内一致も想定されるので)

国別IPやブラックリストIPなどで予防するのも良いですが膨大なデータ・・・ スパム対策はイタチごっこでキリが無い(IP変更されたら無意味な)対処方法なので、小者は泳がして、あまりにしつこい常習スパムのみを内偵し、対処するしかありません。


アメブロの記事投稿方法

最近、プロバイダーなどのブログサービスが廃止になることが多く、そこの多くのユーザーは廃止や引越しを余儀なくされるケースが多いようです・・・
本来は、有料回線ユーザーの為の無料オプションサービスなのに、赤字部門→経費削減でサービスを廃止するって・・・おかしいですよね→OCN,KDDI

日本で一番有名でユーザー数が多いブログサービスは、
Amebaブログ(アメブロ)だと思います。
(サービスの選択は、相性が一番かな? 好みのブログサービスを選んでください)
個人的には、管理面での自由度は少ないし、広告が多いのが残念ですが、コミュニティが盛んなので記事のマーケティングは広がります。アメブロならサービス廃止のリスクも少ないかも。
(広告が多い理由は、広告収入でサービスを運営しているからでしょう)

アメブロの記事投稿方法

  1. アメブロの管理画面にログイン
    アメーバID パスワードを入力してログイン
  2. 「ブログを書く」ボタン
    アメブロ ブログを書く
    • 記事のタイトルを入れる
    • カテゴリのテーマを選択
    • 記事を入力
    • 画像を入力
    アメブロ 記事を書く
    • 画像を選択 (パソコンから参照)
    • 画像のタイトル
    • 画像をアップロード
    アメブロに画像を入れる
    画像はパソコン内のフォルダから選択/参照
    パソコンから画像を参照
  3. 画像を選択
    アメブロ 画像を選択
  4. 記事を確認してから、記事をアップロード
    ameblo_06.png
  5. テキストリンクの設定(アンカー)

    リンクしたいテキストを入力
    アメブロのリンク設定
  6. マウスで反転させて、リンクボタン
    (マウスをクリックしたまま文字をなぞって反転させ選択状態にする)
    アメブロのリンク設定2
  7. 飛び先のURLアドレスを入力
    アメブロのリンク設定3
  8. リンク設定が完了
    アメブロのリンク設定4
ウェブサイト業界あるあるw
URLをhtpp://〜のテキスト状態のままリンクしたり、
「こちら」とか「ホームページはここをクリック」などのテキストにリンクを設定するパターンが多いようですが、実は「地域や業種+屋号」の方が、重要なキーワードを含む為にSEO的には良いですし、ユーザーも分かりやすいです。
具体例(HTMLソース):
<p>〜〜〜に関するお問い合わせはお気軽に。<br>
<a href="http://www.〜〜〜〜.com/" target="_blank">〜〜販売 ○○店</a></p>

ブログは、放置せずに書き続ける事が大事です。


JQueryとLightboxの共存

グローバルメニューにプルダウン式を追加したところ、
Lightboxのポップアップ機能が動作しない。
jQueryとprototype.jsの干渉/競合が原因。

JSの変更点
  1. jQueryに以下を追加、
    <script type="text/javascript">
    jQuery.noConflict();
    </script>
  2. 全ページのHEAD内に、この<script>を一括置換え。
  3. プルダウン用.js内の$を以下の様に一括置換え。
    $( を jQuery(
  4. CGIの<script>も置換え(絶対パス)

ところが、ローカルでは動くのに、
今度は、プルダウンがウェブ上で動作しない!
何故だろう???
プルダウン用.jsを上書きしていませんでしたw


Contact Form 7の項目追加

久々のWP + Contact Form 7 の編集(徹夜作業)です・・・
Contact Form 7
もう忘れていましたが、フォームの項目を増やすのは、
[お問い合わせ] → [タグの作成]でした。
チェックボックスやラジオボタンに<label>のオプションなんて以前あったかな?・・・

Contact Form 7用のデフォルトCSSは、
〜/wp-content/plugins/contact-form-7/includes/css/styles.css
まあ、他のCSSファイルでも良いですがw
div.wpcf7 label{ margin-left: 14px; white-space: nowrap;}
これで、ユーザーが利用しやすくなりますが、
ブラウザによっては、選択項目が多いと全て1行のnowrapになっちゃいますので、タグの自動作成を利用せずに、HTMLソースで<span>の区切りに改行を入れた方が良さそうです。
liのインライン横並び+nowrapも同じで悩ましい・・・


ムームー、ロリポップ、カラーミー

以前に、カラーミーショップの持ち込みサブドメインの覚書を書きましたが、今回はカスタムDNSで設定せずに、自動設定にて対応してみました。

独自ドメイン:ムームードメイン
ウェブサーバ:ロリポップ
という、良くある格安運営のパターンですが、
今回の案件は、大々的なリニューアルと通販機能(ECサイト)の新設です。

まあ、ECサイト構築と聞くとプログラムでゴリゴリ構築するイメージがあるかもしれませんが、中小企業や小売店舗などの場合は、いわゆるショッピングカートをレンタル設置する事で大手並みの通販システムが運営できます。
経費的にも、構築だと予算:数十万円は見ておいた方が良さそうですが、レンタルのショッピングカートはテンプレートのプログラムを共有利用するというレンタルサービスなので、オーダーメイドではないのですが、年間で1万円程度で収まり、コスパ的には良いでしょう。
ただ、
デザイン面では、既存のテンプレを使う手も”あり”ですが、
メインのウェブサイトとの違いがあからさまなので、
カートのHTMLとCSSを編集し、ウェブサイトと同一デザインにした方がしっくりします。

広報はメインサイトで行いつつ、詳細ページも増やし、
通販部門をショッピングカートで行うという、いわゆる二刀流になります。
メインサイト&カートだと、一応SEOにもなりますね。

で、今回は最近評判の良いカラーミーショップです。
カラーミーショップ

クラさんの独自ドメインがムームーだったので第一候補でした。
(他にも、EC-CUBEのカスタマイズ案やクラさんからは、おちゃのこネット・e-shopなどの候補もありましたが)
先月は、初期費用の3,500円が無料だったので、クラさんもラッキーですね。
しかも、今なら独自ドメインの利用が無料だとか。
この無料ドメインは悩みますね。
クラさんの独自ドメインがムームードメインのため、同系列のカラーミーショップでは、独自ドメインのサブドメインが利用できるので、カートURLの選択肢が増え有利です。

  1. カラーミーの初期URL
    カラーミーのサブドメインを借りる
    http://○○.shop-pro.jp/
  2. 独自ドメインのサブドメイン
    カラーミーのサブドメインを借りる
    http://○○.独自ドメイン.com/
  3. 今回無料サービスの独自ドメイン
    http://○○.com/
  4. 別途、ムームードメインで有料レンタル
    http://○○.com/

まあ、あえてカラーミーの初期URLを利用する価値は無いので1番は却下だし、サブドメインが利用できるので、有料で借りる程の事もないような気がします。
なので、
迷うのは2番か3番、
将来的な移転を考慮しなければ、3番の無料の独自ドメインでしょうが、この先何があるかわからないので(カラーミーがサービス廃止とか・・・)
この無料ドメインの利用条件は、カラーミーの継続契約が必須なので、移転時の利用や正規化すらできないのがデメリットかな・・・
カラーミーへの永年の囲い込みが狙いなんでしょうけどね。
クラさんと相談した結果、今回はサブドメインの新規設定に決まりました。

最近は、カラーミーカートのデザイン編集の案件が増えています。