wordpressのセキュリティ対策のためにやったこと。(ベーシック認証とか、configファイルとか)

security
最近wordpress周りでの乗っ取りが騒がれており、セキュリティ強化をする必要がありまして。
そこで、色々調べて使いやすさとのバランスを考えてみた結果導入したものをまとめておきまっする。

インストールしたセキュリティ系プラグイン

Google Authenticator

Googleの二段階認証をwordpressのログイン時にも使えるプラグイン。
詳細はここを参照しました。
ダウンロードはこちら → Google Authenticator

Crazy Bone (狂骨)

ログイン履歴を蓄積、閲覧できるプラグイン。
精神安定的にたまにチェックする用。
ダウンロードはこちら → Crazy Bone (狂骨)

BackWPup

万が一侵入された時のため+サーバーが落ちた時ように、自動で決めたスケジュールでバックアップを取得してくれるプラグイン。
バックアップの保存先にはDropBoxも指定できて、バックアップの個数も指定できるのでかなり便利!
詳細はここを参照。
ダウンロードはこちら → BackWPup

変更した.htaccessまわり

wp-login.phpのIP制限

管理画面周りにログインできるIPを自宅のみに制限。
これで基本的には管理画面のファイル自体にアクセスができないようになる。
実際の.htaccessのコードは下記。

<Files wp-login.php>
Order deny,allow
Deny from all
Allow from xx.xx.xx.xx
</Files>

wp-login.phpへのベーシック認証

管理画面まわりにIP制限をかけた上でベーシック認証っていう、これでもかプラン。
実際の.htaccessのコードは下記。

<Files wp-login.php>
AuthName "Input ID & Password"
AuthType Basic
AuthUserFile /home/○●/.htpasswd
Require valid-user
</Files>

wp-config.phpへのアクセス除外

こんかい起きたwordpressの乗っ取りはwp-config.phpがデフォルトのままで、それを踏み台にされて・・・っていう話もあるので、念のためwp-config.phpファイルへのアクセスを除外。
実際の.htaccessのコードは下記。

<Files wp-config.php>
order allow,deny
deny from all
</Files>

これで無理な場合には、もう諦めます!
(とりあえずバックアップは自動化できているからなんとかなる!)

wordpressでブログじゃないウェブサイトを作ったよ!

テラシマンのサイトを静的なhtmlサイトからwordpressベースのサイトへリニューアルしました。
その経緯とプロセスをまとめておきたいと思います。

今までの問題点

更新が面倒

一覧ページも詳細ページもすべてhtmlで、手で作成していたので、詳細ページを追加したら一覧ページにも追加して、詳細同士の移動のリンクも書き換える必要があるなど、1ページを追加するだけでも手間でした。

newsコンテンツが貯まらないのでSEO的にもったいない

サイトの構造に原因がありましたが、最新の活動状況を知らせるnewsページについて、urlを固定にして、アーカイブページを持っていなかったことから、最新状況を更新すると以前のコンテンツは上書きされ、ページは蓄積されていませんでした。

SNS系のボタンがない

以前のサイトは制作したのが3年前とかで、まだツイッターもフェイスブックも出たばかりの頃で、SNS系のボタンは設置していませんでした。

リニューアル内容

上記の問題点より「サイト自体をwordpressで制作し直すことでページの追加・蓄積を簡単にすること」と「Twitter・facebookのボタン設置によるソーシャル機能の追加」が必要でした。

また、wordpressにすることでウェブの知識がなくても更新できるようになるので、コンテンツの種類が「news」「gallery」「works」「notebook」と4つある中で、更新のしやすさも気をつける必要がありました。
ついでにHTML5でマークアップしたことがなかったので、<section>や<article>、<time>、<figure>などHTML5の主要なタグも使ってみました。

リニューアル前と後のサイト構造

リニューアル前、トップページはFLASHの簡易的な紹介用のムービーが流れるのみでした。
また、コンテンツについてはニュースページは上書き更新で、今までの仕事的をまとめたページはありませんでした。

リニューアル後では全ページにTwitter・facebookのボタンを設置し、またGallery、Worksの詳細ページにはPinterstのボタンを設置しました。
Pinterstは今流行始めたから追加しただけです・・・。

wordpressの勉強

最近「wordpressでサイトを作るには!」系のエントリーが色々なところでされているので、それを読んで勉強しました。インストールと更新、テーマの編集程度は以前何度かやったことがあったのですが、ゼロからサイトとして設計してつくることは初めてだったので、とにかく調べる→読む→やってみる→調べる→・・・を繰り返しました。
中でもWordPressでブログじゃないWebサイトを作るときのいろいろ(サンプル付き)WordPressのオリジナルテーマ作成フロー・基本マニュアルを参考にしました。

入れたプラグイン

Custom Post Type UI
→カスタム投稿タイプが簡単に作れるヤツ。
Webデザインレシピさんの記事が詳しいです。
WordPressでサイト設計をする時に覚えておきたいポストタイプの特徴などいろいろ

Custom Field Template
→カスタムフィールドのテンプレートを簡単に作れるヤツ。
こちらの記事が詳しいです。
WordPressで「カスタム投稿」と「カスタムフィールドテンプレート」
Custom Post Type UIと組み合わせることで、下図のように投稿画面がシンプルでわかりやすくできます。

Google XML Sitemaps
→検索エンジン向けのサイトマップ(sitemap.xml)が自動で生成、更新されるヤツ。

WP Super Cache
→ページのキャッシュを作って読み込みを早くしてくれるヤツ。

苦戦したところ

wordpressのテーマ(サイト)作成周りは調べれば大抵のことはあるので問題なかったのですが、開発→リリースの移行で手間取ってしまいました。

開発時は別ドメインのサブドメインに設置し、ベーシック認証で他人・検索エンジンに対してはじいていたのですが、いざリリース使用としてサーバー内のディレクトリ名を本番のものに変えて、.htaccessファイルとパスワード用のファイルを削除したら404のままという・・・。

実は.htaccess内にワードプレスの設定も書かれていたので、ファイルごと消したことが間違いなのですが、それに気がつかず、混乱したのでとりあえず寝てしまいリリースが1日遅れました。

今後の課題(まだやってないこと)

トップページは今newsコンテンツの最新を乗せているのですが、実はまだhtmlのままなので、「最新のnewsエントリーを表示させる」ようにする必要があります。
また、そもそもトップページはそれでいいのか?という話もあるので、それは追々。
あとは、SEO用に各ページにディスクリプションを入れるのもやってないので、それも追々。

Processingでカメラからの映像を編集してみた。

最近プログラムができるようになりたい!と思っていまして。
Pythonを勉強しつつ、奥さんに自慢できないとつまらんなってことでProcessingもいじりはじめました。
で、本に書いてあるやつを試してみたのがこれ。

何をやっているかというと、PCのカメラで読み込んだ映像からピクセル単位で色、彩度、輝度を取り出して、それらの数値から円の図形に変換するやつ。
本をまんま写しただけだけど、何かを作った気になれて、奥さんにも自慢できてやりがいがある。
しかも内容はこれだけ。


import processing.video.*;

Capture Camera;
void setup(){
  size(800, 500);
  colorMode(HSB, 256); 
  noFill();
  strokeWeight(2);
  Camera = new Capture(this, width, height, 12);
}

void draw() {
  background(0);
  Camera.loadPixels();
  for(int y=0 ; y < height ; y+=10) {
    for(int x=0 ; x < width ; x+=10) {
      int pos = (y * width) + x;
      color c = Camera.pixels[pos];
      float h = hue(c);
      float s = saturation(c);
      float b = 20 * brightness(c) / 256;
      stroke(h, s, 256);
      ellipse(x, y, b, b);
    }
  }
}

void captureEvent(Capture camera) {
  camera.read();
}

これのMac用アプリ
Windowsではカメラ周りは色々やらないといけないらしく、自分の環境ではできなかったから公開できず断念。

MITの新しいVIもレディヘのPVも(再生後ぐりんぐりんできます)Processingが使われているとか。

フライトパターンをシミュレートしたやつが有名らしい。

きれいだなぁ。

ちなみに勉強している本はこれです。

Built with Processing[Ver. 1.x対応版] -デザイン/アートのためのプログラミング入門
田中 孝太郎 前川 峻志
ビー・エヌ・エヌ新社
売り上げランキング: 12137

関連するエントリーのリンクを見てみたら、実は2009年にもすでに本を買ってちょいちょいやっていたっていうね・・・。
今度こそ!

Firefoxをインストールしたら入れておくアドオン・スクリプト18個

学生の時からもうかれこれ6年間、firefoxを使ってきて色々入れてみたけど、最終的に行き着いたアドオンをまとめておきます!
最近はchromeしか使ってないからSNS系がないけども。

■ユーティリティ系のアドオン

1.All-in-One Sidebar
ブックマーク、アドオン、ダウンロードとかをサイドバーで開けるようにしてくれるやつ。
2.FireGestures
firefoxのジェスチャ。「右クリック押した後に左クリックで左のタブへ移動」とかが便利。
3.Launch Clipboard
コピったURLをfirefoxのタブで一度に開けるやつ。Excelでサイト管理→firefoxで開いてチェックの流れがマジで便利。
4.Tab Mix Plus
これがなければfirefoxを使う価値が半減する!ってくらい重要。「タブを多段表示」や「タブをダブルクリックでそのタブを複製」とかタブ周りの設定をカスタマイズできる。「タブの余白をダブルクリックで開いている全てのタブを閉じる」が本当に便利。
5.User Agent Switcher
別途ユーザーエージェントファイルを読み込ませる必要があるけど、これを入れればモバイルのUAや検索エンジンのUAに偽装できて、モバイルサイトのチェックやクローキングのチェックができるようになる(それらがIPベースでやられていると無理だけど)。ちなみにユーザーエージェントファイルはこちらから落とせる
6.Xmarks Sync
chrome同様に。異なるブラウザでブックマーク、パスワードを同期させる拡張。
7.ソース表示タブ
開いているサイトのソースを表示するとき、デフォルトだと別窓で開くけど、これを入れておくとタブで開けるようになる。

■サイト制作系のアドオン

8.Firebug
これもchrome同様に。個人的には「要素の調査」をよく使う。
9.MeasureIt
これもchrome同様に。ブラウジング画面でピクセル数を計れるやつ。サイトの修正をするときにあると便利。

■Greasemonkeyのスクリプト

10.AutoPagerize
ページネーションを同一ページで読み込むやつ。
11.Google display number
Googleの検索結果に順位を表示させるやつ。このサイトにあるやつをちょっと修正したやつ。
12.Yahoo! display number
Yahoo!の検索結果に順位を表示させるやつ。これもこのサイトにあるやつをちょっと修正したやつ。
13.Google Reader Auto Read Ads
Google Readerのフィードから広告を除外するやつ。
14.Google Reader Full Feed Mod
Google Readerの部分配信のフィードを全文配信の形で表示させるやつ。全文配信にさせるボタンが表示される。
15.Google Reader Prefetch More
Google Readerのフィードの読み込み量をデフォルトの部分的な読み込みから大量に読み込むようにしてくれるやつ。フェードがたくさん溜まると、デフォだとスクロールするたびに読み込むから、溜まる人はこれを入れておくと便利。
16.GoogleReader-plus-hatena
Google Readerのフィードにはてブが付いている場合、その数を表示させてくれるやつ。フィードが溜まっているとき、はてブ数を基準に開くフィードを判断してスピードアップ!
17.Google Reader – Colorful List View
Google Readerのフィードをサイトごとに色づけするやつ。

■検索エンジン系のアドオン

18.The SEO Toolbar
SEO系のアドオンはたくさんあるけど、これは一つだけで「ページランク」「Yahoo!.comでのバックリンク数(ページ、ドメイン)」「Open Site Explorerでのバックリンク数(ページ、ドメイン)」「開いているサイトのIP」「開いているサイトのWebArchive.orgのインデックス開始時期」等々がわかるやつ。とりあえずこれさえ入れておけばいんじゃね的なやつ。適当なアカウント作って落とすまでがめんどくさいけども。

あとはFox Splitter (旧称:Split Browser / 分割ブラウザ)がfirefox4に対応してくれるといいなぁ。

やっぱまとめるのって結構めんどくさいね。

今だからこそ「EPIC 2014」と「EPIC 2015」

ブログを修正しているときに学生のときに書いたエントリを眺めていたらこんなエントリ(「思い出したから。」)を発見。

で、再度観てみるとなかなか興味深い。
内容は「Googleが情報を大量に集めて、Amazonは消費者のデータを大量に集めて、両者がくっついて2014年は大変なことになってるよ!」っていうのをシナリオプランニング的にまとめたもの。



ただ、epic2014を一通りみてみると「ソーシャルネットワーク(当時はそんなことばなかったけど)を掴んだところが将来ユーザーの消費行動を握る」っていうメッセージがあって、それを考えると、「Facebookのユーザーが友達に商品をレコメンドして売れたら、売り上げの3%もらえる」とかそのうち出てきそう。(っていうかすでにある?)

ちなみにepic2015は、epic2014で「Google、Amazonの影響力が・・・」って言っていたのに加えて「Appleがipodを使ってユーザーの情報発信を・・・」ってなっているぽい。

Google Chromeをインストールしたら入れておく拡張18個

会社のPCと自宅のPC、あとMacBookProに入れているGoogle Chrome。
アカウントで同期しておけばいいんだけど、「これは仕事でしか使わない」「これはプライベートでしか使わない」とかあって。
けどChromeって明らかに入れている拡張の数だけメモリくってるし・・・。

というわけで、備忘のために、Google Chromeを落としたらとりあえず入れておく拡張をまとめておきます。

■ユーティリティ系の拡張

1.Auto HD For YouTube
YouTubeを開いたとき、投稿されている中での最高画質を選択してくれるやつ。
2.AutoPagerize
ページネーションのあるページをクリックさせずにそのまま読み込むやつ。ニュース系のサイトを読むときに便利。
3.Go Extensions
拡張を入れたり抜いたりする人なら意外とこれが便利。メニューバーに拡張ページへのショートカットボタンを表示させるやつ。
4.Smooth Gestures
chromeのマウスジェスチャはずっとこれ。設定のUIがわかりやすくて好き。
5.Xmarks Bookmark Sync
異なるブラウザでブックマーク、パスワードを同期させる拡張。同期と言いながら設定をミスったのか、一時同じブックマークのセットがいくつも登録されてゲンナリしたけど、今は何故か大丈夫。

■サイト制作系の拡張

6.Firebug Lite for Google Chrome
firefoxよりかは重たくて使いづらいけど、あると便利。
7.MeasureIt!
ブラウジング画面でピクセル数を計れるやつ。サイトの修正をするときにあると便利。

■SNS系の拡張

8.SpellBook
「Bookmarkletsフォルダにブックマークレットを入れると、右クリックからブックマークレットを呼び出せるようになります。ブックマークレットは小さな魔法です。様々な魔法を集めて、あなただけの魔術書( SpellBook )を構築してください!」とのこと。facebook、Twitter、Evernoteとかいろいろなアプリへの投稿を右クリックからできるようになる。便利。
9.Fix Hootsuite Ext
hootsuiteを使うなら絶対いれるべき。画像の読み込み、必要ないUIを消す、カラムの幅を狭める、文字の大きさの微調整とか設定できる。
10.はてなブックマーク
はてブを使うようにしたので。アプリもあるけど、これははてブへの登録のショートカットボタン。
11.Evernote
Evernoteを少しでも使ってるなら、ね。

■Google Readerを便利にする拡張

12.PostRank Extension
集合知的な何かでGoogle Reader上のエントリーにランクをつけてくれるやつ。はてブの数よりこっちの数値の方がなんとなく俺に合ってる気がする。
13.RSS Subscription Extension(by Google)
RSSへのショートカットボタンを出してくれるやつ。同じような拡張はほかにもあるけど、chromeなんだからGoogle製ってことで。
14.Super Google Reader
Google Reader内でフィード先のエントリを読み込めるやつ。これまではReederを使ってたけど、この拡張のおかげでPostRank Extensionの数とかはてブの数とかで読み飛ばしができるGoogle Readerを使えるようになってマジでRSSの消化スピードが上がった。オススメ。
15.Taberareloo
Google Readerのフィードから直接はてブ、facebook、Twitterへ投稿できるやつ。便利。

■検索エンジン系の拡張

16.Highlight to Search (by Google)
ブラウジングしていて、調べたくなったテキスト部分を選択するとGoogleの検索画面へ導くインターフェースがでるやつ。便利。
17.Google Quick Scroll
Googleで検索して行ったページ内で検索したワードの箇所をハイライトして導いてくれるやつ。行き先ページによるけど、調べ物するとき便利。
18.Page Rank – LinkExtend
SEO系の拡張はいろいろあって、Pagerankを表示させるものもいろいろあるけど、これは数値が表示されて、使わない余計なもののなくてシンプルで好き。

まとめるのって結構めんどくさいね。

110515 はてブ棚卸し

<遂に公開>SEOの2倍のアクセスを稼ぐFacebook活用術。皆が知らない「いいね!」ボタンと「OGP」の設定方法、超解説

1.最初に種明かし、「必ず」Facebookからの流入数が増加する理由

2.OGPについて
 ?OGPとは?
 ?OGPを設定したほうが良い3つの理由

3.「いいね!」ボタン、「OGP」の具体的な設定方法
 ?livedoorBlogに設置する時の手順
 ?アプリIDを取得する。
 ?「いいね!」ボタンを設置する。
 ?「OGP」を設置する。

「外部ページ用のFacebookページ」にはまだいけないけど、共有に感謝。
要は、普通「いいね!」ボタンを押すだけだと、押した人のウォールにしか「いいね!」を押した情報は載らないけど(shareだと友達のウォールにも載る)、OGPの設定をすることでshareと同じように、「いいね!」ボタンも友達のウォールに載るようになる。

しかも、OGPの設定をするとfacebookページもできるらしく、そこで情報を更新すると、「いいね!」を過去に押した人のウォールにも情報を通知できるっていう。

包む―日本の伝統パッケージ展

岡秀行氏(1905-1995、グラフィック・デザイナー)から
目黒区美術館が譲り受けた「日本の伝統パッケージ」コレクションを紹介します。
岡氏は写真集『日本の伝統パッケージ』『包 TSUTSUMU』などを著すとともに、1970?80年代にかけて、展覧会「TSUTSUMU」として、そのコレクションを世界20数カ国・100カ所以上で紹介し、高い評価を受けました。
本展ではわが国の自然と風土を生かした素材で作られ、生活の知恵と機能美が加わったシンプルな美しさを持つパッケージ(包装・容器)の数々を、岡氏の視点を交えながら展覧します。

今日、行こうかどうか、迷ってる。

できたてをお届け。Skypeチャットスタイル for Mac “Blanket”

Twitterrific の面影は消えさりました。新しい Skype は、チャットウインドウが統一されたことにより、黒背景のスタイルで調和を保つことができません。

それは、チャットコミュニケーションを載せるものとしてどんな形が相応しいのか、まっさらなところから考え直すきっかけとなりました。必要な情報を、適切な場所に。
この飾り気の無いスタイルが、コミュニケーションを程よく包むものでありますように。

とてもすてきなSkypeチャットのテーマ。

ビュフォンの針

ビュフォンの針(ビュフォンのはり、英: Buffon’s needle problem)は18世紀の博物学者ジョルジュ=ルイ・ルクレール、コント・ド・ビュフォンが提起した数学上の問題である。
もし床に多数の平行線を引き、そこに針を落すならば、どれかの線と針が交差する確率はどのようになるか
積分と幾何学を使ってこの問題は解け、またこの方法を使って、モンテカルロ法で円周率の近似値を求めることができる。

NHKでπに関する番組を観ていたときに出てきて調べた。
ちょっとかしこくなった。

のび太の人類補完計画:序

もしも、のび太がエヴァのパイロットになったら・・・。

おもしろいけど、ちょっと長い・・・。

Twitter、TweetDeckを$40M?$50Mで買収へ

TwitterがTweetDeckを買収し数日以内に発表する見込みであると、事情に詳しい情報筋が本誌に語った。$40M?50M(4000?5000万ドル)の買収金額は、現金およびTwitter株を合わせたものになるだろうという。

TweetDeckのUIがデフォルトになると便利かも。

春のヘッドホン祭2011

世界中の有名メーカーヘッドホン・イヤホンを一同に集め多数試聴できるイベント! この機会にお客様持込のiPodやCDでワンランク上の音を体験しましょう!

ぼーっとしてたら、終わってた!

Google Readerとはてブを活用して情報を管理していくよ。


今までGoogleリーダーを使ってきて、はてブの数を表示できるヤツGoogle Reader plus Hatenaを入れてたんだけど、いろいろ調べてみたら、もっと便利なツールがあった。

ので、今Googleリーダーで設定しているものをメモメモ。

  • Google Reader plus Hatena
    フィードの各エントリにはてブの数を表示させるヤツ
  • PostRank Extension
    フィードの各エントリに集合知的な何かでランクをつけてくれるヤツ
  • RSS Subscription Extension (by Google)
    chromeでRSS登録するときにボタン一発でできるようにするヤツ
  • Super Google Reader
    Googleリーダー上で各フィードの表示をボタンで「全文(ヘッダー・フッターとかなし)」「実際のページ」「普通のフィード」から選べるようになるヤツ

この4つの拡張をchromeに入れるだけで、マジで快適。
RSSの消化速度がかなり上がりました!

今後はチェックしながらとりあえず気になったものはTaberarelooでリーダー上から直接はてブへ登録!
理想はそれを定期的にこのブログへブックマークの棚卸しを!
とりあえずやってみる!

macでpythonの勉強を始めまっする

GW休み中にpythonでtwitterのボットを作ってやる!
ということで、その課程をできる限り記録していきまっする。
果たしてできるのか!?
完成するのか!?
こうご期待です。

■今日の目標:macportを入れてpythonをインストールする

いったん普通にpythonをダウンロードしたものの、よくよく調べてみるとどうやらmacで開発をするには、「macport」ってやつがあるといいらしい・・・。
ってことでmacportをインストールしてそこからpythonを入れ直すことにする。

OSX では、Python インタプリタが大きく3系統に分けられます。

デフォルトでインストールされている Python
Python の公式サイトにあるインストーラを利用してインストールした Python
MacPorts を利用してインストールした Python
これらはそれぞれ、
/usr/bin/python
/usr/local/bin/python
/opt/local/bin/python
にインストールされます。

今回はバージョン管理が簡単な MacPorts 版の Python をインストールしようと思います。
(参考:Python 入門(環境構築編 At Mac OSX Snow Leopard)

早速

MacPorts を最新の状態にアップデートします。
$ sudo port -d selfupdate
$ sudo port -d sync

でnot foundと出る。

なので、パスを通すところで


export PATH=~/bin:/opt/local/bin:/opt/local/sbin/:$PATH

とやってみる。

MacPortは、/opt/local以下にいろいろと入れてくれるので、環境変数にPATHを通しておきます。
Bashの例で書いておきますが、このあたりはご自身で。
注意しないといけないのは、MacPortを通常は優先させると思うので、/opt/local/binとかの後に、既存のPATHを設定するようにすること。
(参考:MacPortが便利なので、まずは基本コマンドをまとめておく

これでターミナルでpythonと打つと、


Python 2.7.1
〜 on darwin
Type "help", "copyright", "credits" or "license" for more information.

と、無事に確認ができたよ〜。