illustratorで選択時バウンディングボックスを表示する

illustrator cc2015を利用中です。
自宅でillustratorを使うことがあまりなかったので、気がつかなったんですが、テキストでも図でも何でもいいのですが、あるオブジェクトを選択すると四隅がドラッグできるようなやつ(この時点ではバウンティングボックスという名前がわからなかった)が表示されないことに気がつく。

スクリーンショット 2016-05-16 11.36.12

あれが表示されないと地味に不便なことに気づき、いつものようにググってみる。

Googleでは、「選択範囲がわからなくなった」「アンカーが消えた」というのが多かった。

これは、上の画像のような青い点々?みたいのが消えた状況のようです。
この解決方法は、「表示>境界線を表示する」にする

でも私の場合はこれではなかった。選択すると出てくる角の四角はなんていうんだろうと思って色々その後も調べたら・・・

「バウンディングボックス」

というらしい

バウンティングボックスじゃなくてバウンディングボックス

これも境界線を表示と同じように「表示>バウンディングボックスを表示」で解決。

バウンティングボックス1

これです、「バウンティングボックス」

バウンティングボックス2

 

WordPress サイトURLをサブディレクトリからルートに変更

タイトル通り、サブディレクトリにインストールしたWordpressのサイトURLをルートに変更する手順と403エラーの対処法。

すでにサブディレクトリ(例:wp)にインストールしている場合を想定。

 

1)管理画面>設定>一般 サイトアドレスのみ変更

現在の設定
WordPress のアドレス (URL):http://example.com/wp
サイトアドレス (URL):http://example.com/wp

変更後
WordPress のアドレス (URL):http://example.com/wp
サイトアドレス (URL):http://example.com/

2)index.phpと.htaccess をルートへコピー

WordPressのインストールディレクトリにあるindex.phpと.htaccess  をルートディレクトリにコピーする

※パーマリンクの設定をしていない場合、.htaccessは生成されていない場合もあり

3)ルートにコピーしたindex.phpを編集

以下の通り修正する

修正前

修正後

4)パーマリンク設定を更新

ログイン後、パーマリンク設定を更新する

 

※403エラー(Forbidden)が出た場合

これはCPIレンタルサーバの場合だけかもしれませんが、サイトURLを変更したら403エラーがでました。

ルートディレクトリにある.htaccessに以下を追記

これで正常に表示されるようになりました。

 

Google Maps API warning: NoApiKeys の対処法

Google Maps JavaScript API v3からAPIキーが不要というのを聞いていたので
特に取得せずに使っていたら、コンソールでこんなエラーが

Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys

Apikeyがないって怒られているようです。
やっぱり必要なのか!?

デベロッパーサイトでAPIkeyを発行します。
https://developers.google.com/maps/documentation/javascript/get-api-key

APIkeyを発行したら、keyを引数に追加

 

これ以外にもこんなエラーが

Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required

Sensorが必須では無くなったということらしいです。

Google Maps APIを読み込んでいるスクリプトに引数[?sensor=true/false]が以前は必須だったけれど、必須で無くなったということですね。

こちらは削除して完了です。

エラーが出ていてもマップは表示されているので、コンソールを見て初めて気づいた。。。って感じでした。

イメージマップ(クリッカブルマップ)の作り方とまとめ

イメージマップ(クリッカブルマップ)は画像の一部分をリンク設定できます。
昔からある機能ですが、私の場合、FireworksやDreamweaverでしか設定したことがなかったので仕組みがよくわかっていませんでした。

このたび久々にこのイメージマップを使う機会があったので改めて勉強してみました。

イメージマップ(クリッカブルマップ)の構成

イメージマップ(クリッカブルマップ)の構成はimg要素、map要素,area要素 の三つだけです。

img要素は、通常の画像を表示するのと同様で
<img src=”images/imagemap.png”>
これに、イメージマップ属性を追加します。

<img src=”images/imagemap.png” usemap=”#Map”>

usemap=””
イメージマップの名前を指定,
複数イメージマップがある場合は重複しない名前、
アンカーのように「#」をつけます。

この後、画像のどの部分にイメージマップ(リンク)を付けるかを指定します。

map要素にはイメージマップの名前を指定

img要素に指定した名前です

area要素は、どの部分にリンクするかの形状や座標、リンク先を指定

■shape

リンクの形を指定できます。
rect    四角形
poly  多角形
circle 円

■リンクの形が四角の場合[rect]

shape = “rect”

coords=”101,234,147,277″

左上の座標XY(101,234)と右下の座標XY(147,277)を指定します

■リンクの形が多角形の場合[poly]

 

shape = “poly”

coords = “79,158,80,147,81,146,132,127,149,158,128,187,86,187,79,157”

すべての点の座標XY指定します。
上記の場合は、八角形のリンクになります。

■リンクの形が円形の場合[circle]

shape = “circle”

coords=”187,58,27″

円の中心の座標XY(187,58)と半径(27px)を指定します

画像の座標を調べるのが面倒な場合は、ジェネレータでソースを生成!

いまどきは便利なものを作ってくれる人がいて本当にありがたいです。

Imagemap が作成できるジェネレーター
日本人の方が作られているので日本語です。

HTML Imagemap Generator
http://labs.d-s-b.jp/ImagemapGenerator/

海外製のイメージマップジェネレータです

HTML Map Creator
http://www.html-map.com/

WordPress + Welcart ショッピングサイト全体をSSL化

WordPress でECサイトが作れる無料のプラグイン Welcart 。

何度か使わせていただいています。
国産のプラグインなので日本語によるマニュアル等も充実しているのもありがたいです。
ちょっと古いけど本も出版されています。(私も購入済み)

WordPressでオリジナルテーマを作る要領でショッピングサイトも構築できる感じでしょうか?

このWelcartで最近ECサイトを制作したのですが、サイト全体をSSL化したくてちょっと手間取ったので覚書として。

まずはレンタルサーバ。
ショッピングサイトですが、はじめは小規模スタートなので、レンタルサーバも格安レンタルサーバーに。

ロリポップも検討しましたが、ネットオウルの月額250円の格安レンタルサーバー「ミニバード」に決定。

ミニバードは、以前から利用していて特に障害もなく、レスポンスも悪くないので気に入っています。
さらに、同じグループのSSLBOXを利用すれば、最安年間5990円で独自SSL証明書が取得できるのに惹かれました。
レンタルサーバー代と合わせても、
ミニバード12ヶ月契約で3000円(年間・税抜)
SSL証明書(CoreSSL) 1500円(年間・税抜)
プラスミニバードで独自SSLを利用するのに、固定IPオプションが必要なので
ミニバード固定IPオプション 5000円

合計9500円(税抜き)程度で独自SSL+レンタルサーバーが使えます。
カラーミーショップをレンタルするのもいいけれど、いろいろ自由にできるWordPress+Welcartを使うならこれで満足かと。

SSL導入は1日程度で完了。

WordPressインストールしてWelcartも設定しました。

ここで昨今、Googleさんも常時SSLを推奨していたり、SSL化しているかしていなかも検索順位に影響しているとか。

そんなこともあるのでこのサイトも全体的にSSLにしよう!ということに。

WordPressでの設定は、設定>一般で「WordPress アドレス (URL)」「サイトアドレス (URL)」を両方ともhttpsから始まるURLに変更。
FireShot Capture 45 - 一般設定

Welcartでも、システム設定ページで、「WordPress のアドレス (SSL)」「ブログのアドレス(SSL)」を同じようにhttpsで入力。

FireShot Capture 46 - システム設定

ここで私は最初「SSLを使用する」にチェックを入れていました。

で、トップページを表示してみると無事SSL化されたページになっているのですが、カテゴリーや商品ページはなぜか、httpのまま・・・。

なぜなのかわからず、.htaccessを設定して強制的にSSL化するように設定しても変わらず。。。https化するプラグインが必要なのかとも思っていましたが、

いろいろ調べたところ、この「SSLを使用する」にチェックを入れてたことが原因でした。
Welcartのコミュニティに詳細が。

「SSLを使用する」というオプションは「SSLの切り替えを行う」と言う意味のものです。常時SSLではもう切り替えは行いませんので、チェックを外すという事になります。

SSL とスマホでの購入について
http://www.welcart.com/community/archives/76773

そういうことだったのですね!

FireShot Capture 46 - システム設定2

SSLを使用するのチェックをはずし、httpでアクセスしてきた場合にhttpsにリダイレクトしてくれる.htaccessを設置。

無事、サイト全体をSSL化することができました!

これに伴い、Google Search consoleやGoogle analyticsもhttpsから始まるURLに変更しました。

 

今回契約したサービス。

「ミニバード」月額250円(税抜)からの個人向けレンタルサーバー
もっとディスク容量が欲しい人には上位プランのサービスもあります。


年額990円(税抜)からの格安SSL証明書サービス【SSLボックス】

SSLセキュアなページでこのページには安全でない他のリソースが含まれています。と出た場合の対処法

SSLを設定して、ページをアップしたに、このようなメッセージが表示されることが

「このページには安全でない他のリソースが含まれています。このリソースは送信中に他のユーザーから見られる可能性があります。また、悪意のあるユーザーによって改変されページの見た目が変わる可能性もあります。」

安全でないコンテンツ

SSLのページなのに、http://からはじまるセキュアでない通信を行っているもの(たいてはimgタグやjavascriptなどのリンク)があるとこのように表示されてしまいます。

折角SSLを設置したのにこれではもったいないし、見てくれたユーザーさんにも不安を与えてしまうのでちゃんと対処した方が良いですね。

でもソースを見ただけではすぐに原因がわからない場合も多いです。
そんな時にはGoogle Chromeデベロッパーツールですぐに確認できます♪

デベロッパーツールを開いた後、コンソールを選択すると以下のようにメッセージが表示されるのでhttpsでリクエストしたけどセキュアじゃない画像があるからhttpsで設定しなおした方が良いみたいなメッセージ?
ここを修正すれば解決だと思います。

安全でないコンテンツ確認

この場合はjqueryでスライドしている画像がhttp://~で設定されているのが原因でした。

ここをhttpsに設定しなおせばよいですね

そうすればGoogleさんのように鍵のマークが表示され暗号化されています。と表示されます。

google SSL

Facebook OGP ,Twitter Cards のOGP設定のまとめ

OGP(Open Graph Protocol)とは
シェアしてもらった時にそのページのタイトル、説明文、サムネを指定できるタグ。
Facebook,Twitter,Google+,mixiなどSNSで使えます。

The Open Graph protocol
http://ogp.me/

Facebook OGPの設定

OGPを使うことを宣言する

にprefix属性を付けて記述します。

og:
fb:
article:

のあとは必ず半角スペースが必要

og: OpenGraph のプロパティ
fb: Facebookのプロパティ
article: OGPのオブジェクトタイプ

articleはブログやサイト記事などのページ

必須プロパティの設定

og:title
ページのタイトル

og:type
オブジェクトタイプ

・website 一般的なサイトのトップページ
・article ブログやサイトのページ

og:url

そのページのURLを絶対パスで

og:image

シェアされたときに表示する画像のURL(絶対パス)

オプションプロパティ

og:site_name
サイト名

 

og:description
ページの説明meta descriptionと同様

 

Facebook用の設定

fb:app_id
FacebookのアプリケーションID(15文字の半角数字)

fb:app_idのほかにfb:adminsも使用可能だが推奨されてない

Facebook用OGP設定が正しいかどうか確認できるデバッグページ

Debugger (要ログイン)
https://developers.facebook.com/tools/debug/

Twitter Cards

ツイートにタイトル・概要・サムネを表示させることができます

Twitterカード
https://dev.twitter.com/ja/cards/overview

 

カードの種類(必須)twitter:card

種類がいくつかあるみたいだけど普通のサイトならsummaryでよいみたいです。

Cardの種類

Summary Card summary ブログ記事や製品情報、レストラン情報などWebサイトの情報を表示
Summary Card witd Large Image summary_large_image  summary cardの画像が大きく表示される版
Photo Card photo  写真が表示されるカード
Gallery Card gallery  4枚の写真を表示できるカード
App Card app  アプリの詳細情報を表示できるカード
Player Card player  ストリーミング再生ができるカード、特別な承認作業が必要なよう
Product Card product  製品情報を表示できるカード、写真のほか在庫情報や価格なども表示できる

詳細はTwitterデベロッパーページにあります。サンプルタグもあり。
https://dev.twitter.com/cards/types/summary

アカウント(必須)twitter:site

サイトのTwitterアカウントを指定します。

タイトル(必須)twitter:title

タイトルは70文字まで

概要(必須)twitter:description

 

検証して申請

上記タグを設定したら、下記ページでタグを検証して申請します。

Card validator
https://cards-dev.twitter.com/validator

photoshop cc アップデート後にエラー

先日のESET関連でもうひとつ、AdobeCCを利用中ですが、CreativeCloudのアップデートをしても必ずエラーに。

スクリーンショット 2016-03-27 7.15.34

なんでなのか原因をググってもこちらも解決しませんでした。

でも先日のことがあったのでこれもESETを無効にしたらいけるのかもと思い、ファイヤーウォールを一時的に無効に。

スクリーンショット 2016-03-27 7.22.06

再度アップデートしたら成功しました!

話は前後しますが、それより前にPhotoshop CC2015でアップデート後、Photoshopを起動すると、jpgファイルを開こうとすると「ファイルが見つかりません」というエラーが。

ps-error

これは、CameraRawがなかったから(ぬけおちてた?)からが原因のようです。

【解決事例】Photoshop CC 2015「”要求された操作を完了できません 。ファイルが見つかりません”のエラーでjpgが開けない」

CameraRawはここからダウンロードできます。

Adobe Camera Raw Help / Camera Raw plug-in installer
https://helpx.adobe.com/camera-raw/kb/camera-raw-plug-in-installer.html

インストール後、無事jpgファイルが開けるようになりました。

 

 

OSX : Webページが真っ白になる(Google Chrome ,Safari)

普段は、GoogleChromeを主に使ってるのですが、少し前からWebページが真っ白になってまともに表示されないことがあります。

表示されないサイトは色々なんですが、頻繁なのが
Yahoo!Japan, Naverまとめページ、Locondo、FC2ブログなどです。

見たいページが見れないって結構ストレスですよね。

Chromeに何か原因があるのかと思って、キャッシュを削除したりしても改善されず、検索して同じ現象の人を探してみても、思うような結果は得られていませんでした。

相変わらずWebページを開くと真っ白になるので、Firefoxに切り替えたりしてやり過ごしてました。Safariも試したのですが同じような現象に。それもchromeより調子悪い。

そんな時に発見したのがこのページ

Mac環境で特定のWebページが表示されないなど、通信が遮断される現象が発生する
http://eset-support.canon-its.jp/faq/show/3822?site_domain=private

実は私のmacbookproにはESET Cyber Security Pro  V6がインストールされています。(5ライセンス版を購入したので。。。)

このページをよくよく見ると、まさに同じ現象。
早速、アップデート版を上書きインストール。

ロコンドも一発で表示!

まさか、セキュリティソフトに原因があるとは思ってもいませんでした。ChromeもSafariもWebkit系(でした?)だから同じような現象だったんでしょうか。

少し様子見ですがこれで解決できたようです^^

WordPress 管理画面wp-login.phpほかのアクセス制限 メモ

wordpress への不正アクセスなどへの対策やっていますか?
最近だと、レンタルサーバー会社自体で、海外IPをブロックする対策を導入していたりして安心度は増しましたが、国内IPだけだから絶対安心とは限りません。

WordPressのログインを一定回数以上間違えるとロックするプラグイン
Limit Login Attempts
https://wordpress.org/plugins/limit-login-attempts/

ログイン履歴(エラーもふくめて)を記録してくれるプラグイン
Crazy Bone
https://wordpress.org/plugins/crazy-bone/

などを使わせて頂いてますが、数は多くないですがあります。
ログイン試行している形跡が。

一番有効なのはやはり.htaccessでのIP制限だと思います。
特定のIPだけを許可したい、特定のIPだけを拒否したいという場合があると思うのでその時のためにメモしておきます。

制限をかける対象のファイル・ディレクトリ

  • wp-config.php
  • wp-login.php
  • wp-admin/
  • xmlrpc.php

wp-config.phpのアクセス制限

wp-config.php はデータベース情報など重要情報が記載されているのでアクセスできないようにしておきます。

wp-login.phpのアクセス制限

■特定のIPのみ許可する

※192.168.xx.xxからのアクセスだけ許可する
複数指定する場合は、改行してallow from を記述

■特定のIPを拒否する

アクセスする場所が限定できない場合はこっち

※192.168.xx.xxからのアクセスを拒否する

wp-adminディレクトリのアクセス制限

※wp-adminディレクトリ内にある「admin-ajax.php」は、プラグインで使われている場合があるので対象から外した方がよいらしいです。
Gatespace’s Blogさんの記事から
http://gatespace.jp/2013/05/21/wp-admin-access-restriction-ver3-5-1/

wp-adminディレクトリ内に.htaccess を置く

■特定のIPのみ許可する

xmlrpc.phpの対策

xmlrpc.phpに対しブルートフォースアタックをかけられるのを防ぐため
※Pingback機能を悪用して踏み台にするらしい

もしくは、Disable XML-RPC Pingbackプラグインを利用する
https://ja.wordpress.org/plugins/disable-xml-rpc-pingback/

.htaccessでの制限の記述おさらい

アクセス制限をかける場合、
「すべてを許可してから特定のIPを拒否する」
「すべてを拒否してから特定のIPを許可する」
という設定方法があります。
それを記述するのが「order」です。

すべてを許可する  order deny,allow
すべてを拒否する   order allow,deny

「すべてを許可してから特定のIPを拒否する」
order deny,allow
allow form 許可する対象
deny from 拒否する対象

「すべてを拒否してから特定のIPを許可する」
order allow,deny
deny from 拒否する対象
allow from 許可する対象