togetterにまとめられちゃったので、私のCopy__writingに対する見解

ツイッターのアカウント@Copy__writingの件で、反論をtogetterにまとめられてしまったので私の意見を説明します。私個人の気持ちとして、無断転載、パクツイは大嫌いです。ただ、時代というのは変わっています。

ツイッターのアカウント@Copy__writingの件で、反論をtogetterにまとめられてしまったので私の意見を説明します。

Copy__writingが悪質であると周知することは無断転載行為を助長するという意見への回答

ただ、これは推奨するわけでもないし、元々、この考えを世に問うつもりもありません。個人的意見をメンションつけて飛ばしていた事に対して、公に回答されてしまうと言う結果だったので書くだけです。回答してきた、かことは3年半の知り合いで、反論の直前まで共同ブログを運営していた仲でしたから彼女にだけ伝わればいいという考えでした。

私の考え

私個人の気持ちとして、無断転載、パクツイは大嫌いです。

私の気持ちはそうなんですが、ではパクられた作家さん方は、現在(2015年5月11日)87万フォロワーがいるアカウントにツイートされて「大勢に見られたことが問題」なんでしょうか?中にはそういうクリエイターの方もいらっしゃるかもしれません。それなら別ですけど。

でも、クリエイターの方の多くは、大勢に見られる事は問題でないでしょう。「パクられたこと」が問題なんじゃないんですか?

87万のフォロワーがいるアカウントにツイートされる事自体は嬉しいでしょ。違いますか?

問題は「作者を明示せずリンクなし」でツイートされる事、あるいは「自分ではない作者のもの」として不当にツイートされる事でしょ。

もし、そうなら仮に@Copy__writingのアカウントを凍結させることが出来たとしても、大勢に見てもらうチャンスもなくなりますよね。アカウントがなくなるんだから。

悔しいですが@Copy__writingのセレクション能力は高いです。だからフォロワーが多いんでしょう。

その87万フォロワーのいるアカウントには何年もの間、大勢が抗議しているのに何も変わりません。凍結するのは難しいんじゃないですか。

でも、最近変化がありました。私は、その変化に現実的に対応して、そのアカウントを利用しましょうよ。と、いう考えです。

向こうが、無料でリンク付きツイートしたいと言うのなら、応じればいいじゃないですか?

人気の指標なんて、フォロワー数と、リツイート数でしょう。いくら@Copy__writingに対する批判的なツイートをしたところで、それには勝てませんよ。

今は、無断転載のリンクなしツイートばかりですが、向こうからリンクを付けて無料でツイートさせて欲しいと言ってきたんだから断る必要ないでしょう。

そういう、リンク付きツイートが増えて何が悪いんでしょうか。無断転載ツイートの中にリンク付きがあったら困りますか?すべて一斉にリンク付きに改めないなら許せませんか?それで結局了承した作家さんが後から傷ついてしまったわけでしょ。

断らずに掲載された作品のツイートがリンク付きで流れるようになった場合、次のようなケースは考えられませんか。

ツイートをフォロワーが見て「これステキ。どこにあるんだろ?こないだはサイトへ行けるリンクがあったのに、これにはリンクがない」そんな不満をフォロワーが感じ始めたらどうなりますか。

フォロワーがリンク付きに慣れたなら、その後「リンクがない」と言って離れ出したら困るんです。他のパクリメディアへ移って行ったら困るんです。そうなるなら@Copy__writingだって作者へのリンク付きツイートを増やすようになる可能性はないですか?@Copy__writing以外の、たくさんの無断ツイートアカウントまでもがリンクを入れるようになる可能性があるんじゃないですか?

相手にとっては、フォローしてないユーザーが、どれだけ批判しても痛くも痒くも無いですわ。でも、フォロワーが減ったら動くでしょ。相手は悪党なんだから。フォロワーとツイートは飯の種。

だから「リンクをつけてツイートしたい」と言って来たのなら、承諾したほうがアカウント凍結に追い込もうとするよりも、ずっと発展的じゃないですか?

承諾したくない人は、黙っていても断ります。でも、何も知らない人に拡散して回らなくてもいいじゃないですか?

問題は、@Copy__writingからの申し出に、事情を知らずに応じた作者が被るイメージダウンですよね。それが心配で拡散してるんですよね?でも、実際のところイメージダウンしないでしょ。それは何故か?

フォロワーの大部分は未成年から20代

フォロワーに関しては、おそらく、鈴木名義のメールの内容でほぼ正しいと思います。

実際に@Copy__writingのフォロワーで、リツイートや、リプをしている人達を見てみました。プロフィールと直近のツイートだけでの判断ですが、多くは中高生、大学生、あるいはそれに等しい年代の若者です。

私は昭和生まれなんで、学生時代の情報源で雑誌なんか見ましたけど、今の学生にとってのツイートは雑誌替わりじゃないでしょうか。

雑誌であれば、出版社が販売します。その中で頻繁にパクリをするようなら、販売禁止になるでしょう。そもそも、出版するのに費用もかかるし、誰でも販売できるわけではありません。

でもツイッターならだれでも無料で、身元を隠してツイート出来るので「無断転載」が容易になります。今は、そういう時代です。

無断転載のツイートがバンバンある中で、元からそういうモノだと思っている、中高生、大学生の彼ら彼女らフォロワーにとっては本家サイトへのリンクがないのは普通の事です。誰の作品なのか出典を明記しないのは不思議ではありません。そういうモノだと思っています。無断転載だという認識がないんです。

だからフォロワーは流れて来たものが「不当なツイート」だとは思いません。

フォロワーがそう思っているのに、リンク付きのツイートを承諾してツイートされた場合、何か不利益ってあるんですか?

「この人、パクリアカウントに協力している」なんて思うフォロワーはいないでしょ。

思うのは、@Copy__writingが悪アカウントだと認識している人達、つまりフォローをしていないユーザーです。

もし、後から有料に変わったとします。掲載終了して断ればいいじゃないですか。これまでのところ契約書もなかったし、削除しなかったとしても向こうの都合なんだから払う必要ありません。今後、どこかのサイトで新しい依頼があった場合、掲載前に契約書を送りたいって言われたら住所を教えないで断ればいいですよね。

もし、後になって削除を申し出たのに、削除するなら金を払えと言われたとします。だったら削除しなければいいじゃないですか。何か問題でも?今だって無断で掲載されて削除してくれないんでしょ。

SEOが気になるなら、Twitterにはノーフォロータグがついていますし、リンクからの流入はそれ以上望めます。そもそも、SEOに詳しい人なら@Copy__writingの評判が悪いって知っている人多いでしょ。

SEOなどに詳しくない、純粋な工芸作家さんが「リンク付きツイート」の依頼を受けて応じた時に、それの何がいけないんですか?

問題は、@Copy__writingの依頼に応じるのが悪い事だと考えているあなたでしょ。

雑誌の時代と違うんだから評価の仕方を変えませんか?

ツイッターが出来たのは最近です。キュレーションサイトみたいな、パクリメディアが出来たのも最近です。時代は変化しています。だから、これらのパクリサイトはまだ増えるでしょう。これが、昔の雑誌の役割をつとめるのなら、無くならないのは時代の変化で仕方がないんじゃないですかね。

サイトを訪れるユーザーが減らない限り、パクツイをフォローするユーザーが減らない限り、パクリメディアは消えないんじゃないでしょうか。

若い世代のフォロワーは悪いことだと認識していないんだから、面白ければフォローします。これは仕方のない事です。

ステキな作家さんを10人見つけて、10人フォローするより、@Copy__writingだけフォローしたほうが簡単でしょ?だから、簡単には減らないですよ、フォロワーは。

パクられてしまった事を恨むのは当然ですが、他の人が依頼に応じてリンク付きツイートを承諾するのまで、阻止する必要はないんじゃないでしょうか。

皆さん、言っても無駄だってわかってるじゃないですか。だったら混乱させることはないでしょ。向こうがリンクを入れようとしているのを阻止して、何の意味がありますか?早い段階でリンクを入れる常識を構築したほうが将来のためでしょ。

私は、悪党の性根が変わるとは思っていませんが、時代が変わって行く中で、正しさの基準が変わることはあると考えています。

昔は天動説が絶対正しかったのに、今は地動説が正しいというように、時代が変われば評価は変わることがある。パクられた怨みがあるのは当然です。でも、時代と共に常識は変わります。

@Copy__writingを潰せないのは、敗北ではなく、淘汰だと思います。悪党と呼ぶ人がいなくなれば悪党ではなくなります。

それなら、向こうがリンクをつけると言ううちに、フォロワーがリンクを押す習慣を少しでも作っておいたほうが良くないですか。

繰り返しますが、これは推奨するわけでもないし、元々、この考えを世に問うつもりもありません。かこ自身はパクられた当事者ではないんだから、@Copy__writingに対する無理な活動は必要ないでしょうという考えだけです。

かこが、当初作っていたパクられ作品の作家さんページヘ行けるリンク集は素晴らしい仕事だと思うし、そういうリンクの有意義さを感じる人が増えればリンクが張られる状況も増えるかもしれない。でも、今やってることって必要なの?

わかっていたと思うんだけどね。


それから、本当に戦う気でいるなら、下のような馬鹿なリツイートはするな。無断転載されたという、その作品自体が法人名とロゴを無断使用している。自ら違法作品をリツイートする奴に何の説得力がある?毎日のようにテレビ番組のキャプチャを流しているアカウントや、著名人の顔をヘッダやアイコンにしているアカウント。そういうのも著作権、肖像権の侵害だが、そういうユーザーをフォローしたままどう戦う?自分達の作品のパクリは許さない。けど自分達が無断使用するのは許すのか?

WordPress内の特定文字列をMySQLのREPLACEで一括置換する方法

WordPressで、例えば移転したブログのURLなど、あっちこっちのページに散在している特定の文字列をすべて、いっぺんに書き替えたい(一括置換したい)という場合の方法です。MySQLのREPLACEコマンドを使います。

WordPressで、例えば移転したブログのURLなど、あっちこっちのページに散在している特定の文字列をすべて、いっぺんに書き替えたい(一括置換したい)という場合の方法です。

MySQLのREPLACEコマンドを使います。

REPLACE(対象となる文字列, '変更前の文字列', '変更後の文字列');

参考URL:MySQL :: MySQL 5.7 Reference Manual :: 13.2.8 REPLACE Syntax

記事本文内の置換

ページ本文の中の次のような状態のHTMLで、example.comを、newurl.net に変更したいとします。

URLは<a href="http://example.com/">http://example.com/</a>です。

<a>タグのhrefも含めてすべて一括置換するには

UPDATE wp_posts SET post_content = REPLACE(post_content, 'example\.com', 'newurl\.net');

とします。これだけで、すべてのページのURLを一瞬ですべて変更出来ます。注意点は3つです。

ドット . の前には\をつける。
この時、 . ドットは \ でエスケープしますが、わからなければそのまま、example.comでも大抵は問題ありません。(バックスラッシュの \ はキーボードひらがなの「ろ」にありますが、「Back Space」キーの左の円通貨記号を押しても同じです。というか、文字コードが同じなのでどちらを押しても円記号になってしまう)

この時の . ドットは、バックスラッシュ \ がない場合は何か一文字という意味で、comの前やnetの前の何か一文字を意味します。なので example.com ではなく example1comやexampledcomなどという文字列が偶然あれば、それもnewurl.netに変換してしまいます。

置換前文字列と置換後文字列は ‘ シングルクォートで囲む。
シングルクォート ‘ ではなく、ダブルクォート ” でもいいのですが、HTMLのタグの中にダブルクォートがたくさんあるので、シングルクォートの方が混乱しないかと思い、シングルクォートでと書いています。

上記の例の場合囲むのは ‘example\.com’ と ‘newurl\.net’ の2つです。

テーブル接頭辞の確認

phpMyAdmin

また、wp_postsはテーブルの名前ですが、「データベースが1つだけのサーバーでWordPressを複数設置する方法」のような理由で、テーブル接頭辞をつけている場合には、それに合わせます。どんな接頭辞をつけたかは、phpMyAdminの左側を探せばわかります。

phpMyAdminを使う場合、具体的には、下の図の赤枠にある「SQL」をクリックして、開いたページの入力欄に打ち込むか貼り付けます。

phpMyAdmin

入力欄の右下にある「実行」ボタンを押して、問題がなければ「何行変更しました」と表示されて完了です。

phpMyAdmin

コメント欄の文字列一括置換

コメント本文の特定文字列を置換するには次のようにします。

UPDATE wp_comments SET comment_content = REPLACE(comment_content, 'hoge\.com', 'fuga\.net');

Before
コメント置換

After
コメント置換

また、コメント本文ではなく、コメント送信者のURLを変更するには次のようにします。コメント本文では対象カラムがcomment_contentでしたが、送信者URLの場合は comment_author_url になります。

UPDATE wp_comments SET comment_author_url = REPLACE(comment_author_url, 'hoge\.com', 'fuga\.net');

通常、投稿者URLは個別ページのURLではなく、トップページのURLで固定です。その場合、次のやり方の方が正統派ですが、この例ではどちらでも同じ結果になります。SQLを知らない場合は、上の例でやってください。

UPDATE wp_comments SET comment_author_url = 'http://fuga.net/' WHERE comment_author_url = 'http://hoge.com/';

置換(置き換え)ではなく、特定文字列を削除したい

hoge.comをすべて削除するなら、最後の「置換後文字列」のシングルクォート(ダブルクォートでもよい)の中に何も入れず空にします。

コメント中のhoge.comをすべて削除する場合

UPDATE wp_comments SET comment_content = REPLACE(comment_content, 'hoge\.com', '');

データベースが1つだけのサーバーでWordPressを複数設置する方法

ロリポップのロリポプランは格安で独自ドメインを50個まで使えますが、MySQLが1個しか使えません。では、独自ドメインがたくさん使えるのにブログはひとつしか作れないのかというとそうではなく、データベースのMySQLが1個しか使えなくてもWordPressを複数設置する方法はあります。

WordPressはデータベースにMySQLを使っているので、基本的に1つのWordPressを設置するごとにMySQLがひとつ必要になります。

お断り:このブログはMySQLが無制限に使えるバリューサーバーのスタンダードプランを使っています。ロリポップではありません。

たとえば、ロリポップ!のロリポプランは格安でドメインを50個まで使えますが、MySQLが1個しか使えません。では、ドメインがたくさん使えるのにブログはひとつしか作れないのかというとそうではなく、データベースのMySQLが1個しか使えなくてもWordPressを複数設置する方法はあります。

ひとつはマルチサイトにしてしまうことです。WordPressのインストール後にもマルチサイトへの設定変更はできます。ただし、マルチサイトではベースとなるドメインはひとつしか使えません。

マルチサイトの構成例

サブディレクトリ方式
  • http://example.com/山本のブログ/ <- ここで1ブログ
  • http://example.com/田中のブログ/ <- ここで1ブログ
サブドメイン方式
  • http://山本.example.com<- これで1ブログ
  • http://田中.example.com<- これで1ブログ

この例の場合、サブディレクトリ方式にせよ、サブドメイン方式にせよ、使えるドメインはexample.comのひとつだけです。

そうではなく、完全に別ドメインの hoge.comfuga.net の2つのWordPressサイトをひとつのデータベースで作るには、wp-config.php の $table_prefix を変更すれば出来ます。また、そのやり方で上のマルチサイトと同じ構成にも出来ます。

このページでは、マルチサイトの設定方法は説明しませんが、複数のWordPressをひとつのデータベースで設置する方法をロリポップを例にして書きます。

完全な別ドメインのWordPressサイトをひとつのデータベースで作る

wp-config.php の $table_prefix を変更してインストールするには、ロリポップの「簡単インストール」は使えません。

手動でWordPressをインストールする必要がありますが、そのやり方はロリポップ公式サイトのマニュアル「WordPress(ワードプレス)の設置」に書いてあります。

基本は上記ページの手順にしたがって、手動でインストールすればいいだけです。この時に wp-config.php の $table_prefix を変更します。

追記:
ロリポップの「簡単インストール」マニュアルに「WordPress(ワードプレス)複数インストール」というページが増えています。マニュアルページには「テーブル接頭辞」の設定をする項目がないのですが、自動で「テーブル接頭辞」を変えてくれるのであれば、ひとつのデータベースでも複数インストール出来ると思います。もし、できないのであれば今ご覧のこのページの通りにすればできます。

ロリポップを例にした複数ブログインストール方法

以下、ロリポップのマニュアルが古い部分と追加する手順だけをピックアップして書きます。

データベース作成
これは、ロリポップのマニュアル通りに行ないます。
アーカイブの入手
これも、ロリポップのマニュアル通りですが、2015年5月5日時点のWordPress最新バージョンは4.2.1です。
ファイルのアップロード
これも、ロリポップのマニュアル通りに行ないますが、アクセスして欲しいページが http://example.com/wordpress/ ではなく http://example.com/ であるなら wordpressという名前のフォルダは作らないでいいです。

wordpressというフォルダを作らないので、アップロード先は /wordpress ではなく / (スラッシュのみ)になります。

ただ、トップディレクトリに色々たくさん置きたくないという場合は、/wordpress など(名前は何でもいい)のディレクトリを作ってそこにまとめ、アクセスだけ http://example.com/wordpress/ ではなく、 http://example.com/ にする設定方法もあり、このブログはそうしています。その方法は、次のページを参考にしてください。

WordPress を専用ディレクトリに配置する – WordPress Codex 日本語版

インストール
インストールを次の通りに実行します。

Webブラウザで、自分のWordPressを設置したURLを開きます。
/ (スラッシュのみ)にアップロードしたなら http://example.com/ などの自分が公開するURLです。

するとブラウザで次のページが開きます。

WordPressのインストール画面

一番下の「さあ、始めましょう!」をクリック。

切り替わった次のページで、上記4つには自分が作成したデータベースの情報を入力します。

WordPressのインストール画面

そして最後の「テーブル接頭辞」をブログごとに書き替えます。

これは重複しなければ何でもいいのですが、たとえば http://hoge.com/ と http://fuga.net/ の2つのWordPressサイトを作りたいなら、 http://hoge.com/ の「テーブル接頭辞」を「hoge_」、 http://fuga.net/ の「テーブル接頭辞」を「fuga_」などとします。

データベース情報とテーブル接頭辞を入力したら、「送信」をクリック。

問題がなければ次の画面に変わります。

WordPressのインストール画面

「インストール実行」をクリック。

WordPressのインストール画面

「必要情報」を入力します。

この時のパスワードはデータベースのパスワードとは違う、WordPressにログインするためのパスワードを新たに作ります。パスワードを作る際はなるべく強力なものにします。

参考:gmailのパスワードは記号も使って複雑にした方がいいと思う話。WordPressもね

すべて入力が終わったら「WordPressをインストール」をクリック。

成功すれば次の画面に変わります。後は「ログイン」を押せばWordPressにログイン出来ます。

WordPressのインストール成功

その後、インストールしたファイルの「パーミッション変更」を忘れずに実行します。ロリポップの場合は次のとおりです。

./wp-config.php → 400
./wp-admin/install.php → 000

これでWordPressをひとつインストール出来ました。2つ目以降のインストールの際は、すでに済んでいる「データベース作成」と「アーカイブの入手」を飛ばし、「ファイルのアップロード」から始めます。そして「テーブル接頭辞」を違うものにしてインストールします。

インストールしたWordPressに、他のブログからデータをインポートする場合は、次のページを参考にしてください。

無料ブログからWordPressへデータを移動する手順

ちなみにですが、「テーブル接頭辞」を「hoge_」 と「fuga_」にして2つのWordPressをインストールした場合、MySQLの中では次のように、それぞれのブログ用に接頭辞で区別されたテーブルが作成されます。

mysql> show tables;
+-------------------------+
| Tables_in_wordpress     |
+-------------------------+
| fuga_commentmeta        |
| fuga_comments           |
| fuga_links              |
| fuga_options            |
| fuga_postmeta           |
| fuga_posts              |
| fuga_term_relationships |
| fuga_term_taxonomy      |
| fuga_terms              |
| fuga_usermeta           |
| fuga_users              |
| hoge_commentmeta        |
| hoge_comments           |
| hoge_links              |
| hoge_options            |
| hoge_postmeta           |
| hoge_posts              |
| hoge_term_relationships |
| hoge_term_taxonomy      |
| hoge_terms              |
| hoge_usermeta           |
| hoge_users              |
+-------------------------+
22 rows in set (0.00 sec)

参考:
wp-config.php の編集 – WordPress Codex 日本語版内の「$table_prefix : データベース・テーブル名の接頭辞

gmailのパスワードは記号も使って複雑にした方がいいと思う話。WordPressもね

gmailやWordPressのログインパスワードは、アルファベットと数字以外に「記号」も使えます。そして、この記号を使うとパスワードが破られる確率がもの凄く上がります。実際に、検証してみます。

gmailのパスワードは、アルファベットと数字以外に「記号」も使えます。

記号というのは !”#$%&'()~=|\ みたいな文字です。

gmail以外にも、ブログソフトで有名なWordPressのログインパスワードも、これらの記号が使えます。そして、この記号を使うとパスワードが破られる確率がもの凄く上がります。実際に、検証してみます。

記号を使うと、不正ログインを防ぐ確率がもの凄く上がる

実際に、どのくらい防げる確率が上がるのかを計算してみます。

パスワードは長ければ長いほど安全

アルファベットは大文字、小文字がそれぞれ26文字あります。

ABCDEFGHIJKLMNOPQRSTUVWXYZ

アルファベットの大文字は26字だけなので、1文字を選ぶとすると確率は26分の1です。ですから、パスワードがアルファベットの大文字で、かつ1文字だけだという条件だと、適当に打ち込んで一致する確率は26分の1です。

では、このアルファベットで2文字のパスワードを作るとどうなるでしょう?

26 × 26 なので、答えは 676通りです。適当に文字を打ち込んでも一致しない確率が跳ね上がりました。

パスワードを10文字にすると、どうなるでしょうか?

26×26×26×26×26×26×26×26×26×26=141167095653376

とても沢山ですね(⌒-⌒;).

パスワードに単語は使うな

アルファベット26文字を10個並べれば、141167095653376種類のパスワードが出来るなら、それだけで充分安全だと思ったら考えが甘いです。

ターミネーターを英数字で打ち込むと、 TERMINATOR と10文字になります。スターウオーズ STARWARS でも8文字あります。アルファベットは26文字しか無いから、単語を作る時は文字数が多くなります。なので誰もが思いつく英単語を安易にパスワードにすると、破られる確率がグッと上がります。辞書に載っている単語を総当りで打ち込んでパスワードを破ろうとするアタックは実際にあります。推測できる単語をパスワードにするのは危険です。

これは人の名前でも同じで豊臣秀吉さんが、そのまま自分の名前をパスワードにしても TOYOTOMIHIDEYOSHI と17文字にしかなりません。

パスワードは使える文字が多いほど安全

TOYOTOMIHIDEYOSHIで17文字しか無いと書くと、「17文字あれば十分でしょ」と思うかも知れませんが、実際のところ、あんまり文字数を増やすのも大変です。

では、どうするか?基底となる数字を増やせばいいんです。ここまでは、アルファベットの大文字26文字限定で考えてきました。この基底の26をもっと増やせば、より安全になります。

英数字を含めると10種類文字が増える

0123456789の英数字をパスワードに含めるだけで基底の数が10増えます。アルファベットの大文字26字に数字10文字を足すと36です。ここから2文字を選ぶと確率は、36×36 = 1296 です。アルファベットだけの 26×26 では 676通りでした。非常に増えているのがわかると思います。アルファベット大文字、小文字、英数字を使うと、ベースの文字数は 26×2+10 で62通りになります。

記号を使えばもっと安全

Googleのパスワードや、ブログソフトWordPressのログインパスワードにはアルファベットと英数字以外に記号も使えます。だから、記号を含めたパスワードにすると破られる確率が激減します。

ひとつには基底の文字数の増大、そして、意味をなさない文字なので推測が不可能という理由です。

使える文字が多いと組み合わせをたくさん試さないと一致しない。だからパスワードを破りにくいのはわかった。でも、基底の文字が増えている時点でデタラメ打つ回数が増えるんだから、確率はアルファベットだけでも同じなんじゃない?と思うかも知れません。ただ、不正ログインのためにパスワードを破ろうとする輩もよく使う文字から打ち込み始めるという事を考えてください。

パスワードを顔文字に出来ますか?

わかりません。顔文字だと特殊な記号が多いので作れないかもしれません。ひらがなや漢字みたいな特定の国の文字まで使えるわけではないと思います。

どの文字が使えて、どの文字が使えないのかは、実際にパスワード変更でチャレンジしてみればわかります。パスワードの登録や変更に失敗したら、その中に使えない文字があるという事です。

記号を含めたパスワードが覚えられません。どうしたらいいですか?

難しい問題です。

ただ、自分でもパスワードを覚えていないという事は万が一、テロリストに誘拐されて「パスワード教えろ!吐けー」と拷問されても白状しないで済みます。死ぬかも知れませんが。

そんなあなたには、パスワード管理ソフトを探してみる事をおすすめします。管理アプリにログインするための、ひとつのパスワードだけ覚えていれば、後は覚えていなくても大丈夫というパスワード管理ソフトは、探せばいろいろあるみたいです。

CSS3 transformのZ軸 時計回転のrotateと縦横回転のXやYを併用する際の注意点

CSS3の新しいプロパティtransformにrotateというのがありますが、このrotateでrotate(90deg)からrotateX(180deg)という順で処理するのとrotateX(180deg)からrotate(90deg)とするので結果が違う理由を検証しました。「rotate」は時計回転、「rotateX」は上下の回転、「rotateY」は左右の回転です。

tarnsform: rotate(90deg)の後にrotateX(180deg)を行うのと、rotateX(180deg)の後にrotate(90deg)を行うのでは、表示される内容が違ったので検証して見ました。

CSS3の新しいプロパティtransformにrotateというのがありますが、「rotate」は時計回転、「rotateX」は上下の回転、「rotateY」は左右の回転です。

元画像

ふなっしー

rotate(90deg);

ふなっしー

rotateX(180deg);

ふなっしー

rotateY(180deg);

ふなっしー

このrotateで時計方向に90度回転した状態で、さらにrotateXやrotateYを追加すると、上下や左右の起点はどちらになるのかが疑問でした。

rotateX(180deg)を例にすると、90度回転される前の元画像の上下を基準に回転するのなら次のようになります。

ふなっしー

そうではなく、rotate(90deg)が適用されて横向きになっている画像の上下を回転するのであれば、次のようになります。

ふなっしー

これは試せばいいだけの話なのでやってみました。

rotateを複数適用するCSSの書き方

rotateを複数適用させたい時は、transformに各rotateを半角スペースで区切って書けば出来ます。

ただ、2015年4月13日時点では、ベンダープレフィックスをつけないと反映されないブラウザもありますので、冗長ですが下のようになります。これはrotate(90deg)で画像を時計回転で90度回して、さらにrotateX(180deg)で180度反転させるという場合です。

.class_name {
	transform: rotate(90deg) rotateX(180deg);

	/* ベンダープレフィックス */
	-moz-transform: rotate(90deg) rotateX(180deg);
	-webkit-transform: rotate(90deg) rotateX(180deg);
	-o-transform: rotate(90deg) rotateX(180deg);
	-ms-transform: rotate(90deg) rotateX(180deg);
}

上のcssを実際に適用したら下の通りになりました。

ふなっしー

結論として、rotateを複数適用してもすべて元の画像を基準にされるという事です。考えてみれば当たり前の話で、もし画像のスタイルシートにheightやwidthが指定してあった場合、横になった時にそれが変わってしまうと困ります。

元の状態が基準であるならrotateとrotateXの順序を入れ替えた、次のどちらも同じ結果になるはずです。

  • transform: rotate(90deg) rotateX(180deg);
  • transform: rotateX(180deg) rotate(90deg);

ところが、このように入れ替えてみると違う表示結果となります。

rotateを複数適用する場合、順序が重要

先ほどの順序を次のように入れ替えてみました。

.class_name {
	transform: rotateX(180deg) rotate(90deg);

	/* ベンダープレフィックス */
	-moz-transform: rotateX(180deg) rotate(90deg);
	-webkit-transform: rotateX(180deg) rotate(90deg);
	-o-transform: rotateX(180deg) rotate(90deg);
	-ms-transform: rotateX(180deg) rotate(90deg);
}

その結果です。

ふなっしー

これは次のように推移しているということでしょうか?

  1. 上下を180度回転
  2. 時計方向に90度回転

そうであれば、時計方向は180度反転した後は逆さまになる、つまり反対側から見た状態という事のようです。

ふなっしー => ふなっしー

X軸 Y軸 Z軸

X軸は横線、Y軸は縦線です

X軸Y軸

rotateXは横線を基準に回転するので、rotateX(180deg)は上下の反転になります。また、rotateYは縦線を基準に回転するのでrotateY(180deg)は左右の反転になります。

rotateX(180deg);

ふなっしー

rotateY(180deg);

ふなっしー

XとYで2次元なのですが、rotateにはもうひとつ3次元の座標Z軸があります。

xyz軸

このZ軸はモニター画面の手前からモニター奥に伸びているイメージです。

rotateXやrotateYで180度回転させた画像は奥から見ているのと同じだという事です。

後ろから見ている状態と同じと考えれば時計回転が逆になるのも納得できます。

通常の状態の時計回りは右回り

時計回転はZ軸で変わる

逆の時計回りは左回り

時計回転はZ軸で変わる

rotateZについて

なのでrotateXやrotateYを処理してから時計回転のrotateを行うのと、時計回転のrotateをやってからrotateXやrotateYを行うのでは結果が違うという事だと思います。

下の画像の場合、rotate(90deg)は赤い矢印方向への回転。rotateX(180deg)は、黄色い線側と青い線側の反転です。

時計回転のrotate(90deg)後にrotateX(180deg)

  1. まずrotate(90deg)で赤い矢印方向へ90度回転
  2. その後rotateX(180deg)で黄色い線側と青い線側が反転

ふなっしー=>ふなっしー=>ふなっしー

rotateX(180deg)後に時計回転のrotate(90deg)

  1. まずrotateX(180deg)で黄色い線側と青い線側が反転
  2. その後rotate(90deg)で赤い矢印方向へ90度回転

ふなっしー=>ふなっしー=>ふなっしー

試しにrotateX(180deg) => rotate(90deg)の順のrotateの値を90degではなくマイナスの-90degにしてみます。

rotateX(180deg) => rotate(-90deg)の順
ふなっしー

rotate(90deg) => rotateX(180deg)の順で処理したのと同じ結果になりました。

まとめ

まとめると次のように言えると思います。

  • CSS3のtransformには複数の処理を書ける。
  • 複数の処理を書く場合は半角スペースで区切る。
  • 複数処理の実行は書いてある順番で行われる。
  • 処理の基準となるX、Y、Zの各軸は処理前の画像の状態と常に同じ
  • ただし、時計回転に関してはZ軸の向きによって見え方が変わるので注意!