WordPressのエディタで改行を無効化するプラグイン

今日は久々にWordpressのプラグインネタ。
今日仕事の時にWordpressでちょこちょこっとやってたら、こんな事につまずきました。
それはエディタを切り替えたら改行とかがおかしくなったという事。
Wordpressの改行がエディタであんまり具合がよくないというのは分かってたんですが、ブログを書く程度ならまあルールで吸収できるんですが今回の場合はちょっとどうしようもなかったのでプラグインにお願いしました。
今回助けてもらったプラグインがPS Disable Auto Formattingというプラグイン。
WordpressのHTMLエディタで自動整形する機能を無効化してくれるプラグインです。
これを有効化するとHTMLエディタで改行してもpやbrが出力されずにエディタ内でのbrが反映されるようになります。
これでbrを多用するであるとか、細かい調整とかを全てコントロールする事ができるようになるのがいい感じです。

WordPressのフォーラムにある説明文を引用

「HTML編集モードでコードを記述したら、改行が消えた。。。」
「正しいコードを書いたのに、貼り付けたら入れ子構造がおかしい不正なコードになってしまっている。」
「ビジュアルモードとHTMLモードを切り替えると改行が消える」
などなど、HTMLモードでの編集は大変気を遣う必要があります。

PS Disable Auto Formattingは、これら自動整形に起因する問題を解決するだけでなく、ビジュアルエディタでの編集をも可能にし、よりWordPressの使い勝手を向上させます。

また、すでに作成済みの記事がある場合への対応として、一括整形処理機能を搭載しています。
本プラグインを有効化すると、元来段落や改行を付加していた処理が行われなくなるため、作成済みの記事の表示が変わってしまいます。これを簡単に修正するための機能が一括整形処理機能で、最終更新時刻が指定時刻以前となっている全ての公開・下書き・レビュー待ちの記事内容を段落・改行付きに整形します。

機能

投稿・コメント・抜粋・説明、各エリア毎の自動整形停止
HTMLモード利用時のp, brタグ除去回避
作成済み記事に対する一括整形処理

との事。
適用したら過去記事が未整形になってしまって表示が崩れるところを回避するための一括整形処理があるのはうれしいです。
とはいえいきなり実装も怖いので僕のどうでもいいテスト環境で実験しましたがきちんと一括整形もされていたので安心しました。
念の為バックアップを取ってからプラグインの有効化をした方がいいとは思います。

インストールは簡単でPS Disable Auto FormattingはWordpressのプラグインディレクトリに登録されてるのでプラグインの新規追加ボタンからPS Disable Auto Formattingで検索すれば出てきますので、あとはインストールして有効化するだけです。

基本的には整形してくれる前提でpやbrが入る事を想定してコーディングしてるので特にこれまでの分にどうこうという話でもないんですが、今後の案件とかでCMSとしての利用色は強い場合などには役に立ちそうです。

あと、このプラグインをもにょもにょしてる時に思ったんですが元々からWordpressにHTMLとか書いてあるからタグ打つ感じで対応しようとしてるのに自動整形されて自分で書いたHTMLが無効化されるのってどうなんやろって思いました。
それなら最初からHTML・ビジュアルという2つじゃなくてHTML・改行自動変換・ビジュアルとかの3つのパターンのエディタを用意してくれたらそもそもプラグインで対応する必要もなかったのにと思うわけです。
ということで次回のバージョンアップにこういう変更があるとうれしいなという超個人的な意見でしたｗ

Facebookの友達申請は少し注意が必要かも

今日はFacebookの友達申請のことについて書きます。
最近このブログやCityVilleFanの影響でFacebookの友達申請をよく頂くんですが、僕は基本的に知り合いでない方の場合はブログでも書いたようにメッセージを付けてくれる方しか承認しないというスタンスでした。
なので申請いただいてもメッセージがない方は基本的にスルーしていたんですが、最近あまりにもメッセージ付きでの申請をしてくれる方が減ったのでおかしいなとは思ってたんですがあることに気付いてしまいました。

それは「Facebookで自分が友達申請した人のリストが見れない」という事。

仮にブログを見てくれた方が友達申請してくれてもその後メッセージを送るという行為が非常に難しくなります。
というのもまずその人のアカウントに直接アクセスするか別タブで開いておくかして最初の段階でメッセージを送る事を想定していないとメッセージを送る事が難しくなるからです。
ブログとかを見てくれていてメッセージ付じゃないと承認しないことを知っているならまだしもそうじゃない人からすると完全にスルーされてるとしか思えないです…。
という訳で今後は方針を変えます。
まず友達申請を頂いたらCityVilleをされているのかウォールで確認してしておられる場合はメッセージを送って返信いただいた方のみ承認という事にしようと思います。

あとついでに今回の件も含めてFacebookでの友達申請時にチェックするポイントをまとめておくことにします。

1.知らない人から友達申請が来た場合はメッセージを送ってきちんと返信してくれる人か確認するといいかも
2.メッセージは友達からじゃない場合その他に入る仕様なのでメッセージのその他もきちんとチェックする
（メッセージでその他っていうのがあるんですがあそこはFacebookの通知が来ないので手動でのチェックが必要です）
3.友達承認後はその人とどういう関係かによって適切なリストに入れておく
（リストを用意しておけばウォールに流れる情報をコントロールできて、人によっては見る必要のない情報を見せないようにするのもいいと思います。）

多分この3つを友達申請の初期部分でしっかりしておけばその後の流れはスムーズだと思います。
しかしFacebookはよく仕様変更するのでまた自分が申請した人リストが復活するかも。

WordPressでパーマリンクからindex.phpを消す方法

今日は仕事で少し困った事態になったんですけど何とか回避する方法を見つけたのでそれを忘れないようにメモします。
その困った事というのがWPでのパーマリンクの設定。
WPのデフォルトのパーマリンクは?p=123という感じで記事のナンバリングなわけですがP=が入っているので動的ファイルという風に検索エンジンに思われちゃうかもしれません。
あと個人的に好きじゃないんです。
なのでパーマリンクには拘りたいところです。
やはり個人的に好きな構造のカテゴリ名/エントリ名/という形にしたいと思うわけです。
で、その構造にしようとしたらWPの管理画面のパーマリンク設定でカスタム構造にチェックを入れて

/%category%/%postname%/

と記述すればいいんですが、ここで詰まりました。
何とこの設定をしたあとでサーバー側の設定によって分岐する事が分かったんです。
1つはそのまま設定が通るパターン。
これは何の問題もないです。実にスマート。
で問題がもう一個のパターン。
なぜか

index.php/%category%/%postname%/

のような感じでindex.phpが表示されるパターンです。
こっちが結構やっかいでindex.phpを消してもパーマリンクが表示されないばかりかタグの検索やpunycode変換までもがキャンセルされるというひどい事になってしまいます。
(まあパーマリンクが存在しないのでここの部分が正常に動いてもたいした意味はないんですけど。)

で、色々調べた結果.htaccessファイルを変更してアップしてあげれば修正分が適用されるという事が分かりました。
実際の.htaccessの記述は以下のような感じです。
(以下の例はWPのインストール箇所がドメイン/wpの場合で、ドメイン/で表示させる場合です。)

php_flag mbstring.encoding_translation off
php_value default_charset "UTF-8"

# BEGIN WordPress

RewriteEngine On
RewriteBase /wp/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]


# END WordPress

これでパーマリンクの設定が完了して正常に表示され、タグの検索やpunycode変換も正常に動作するようになります。
あと、1点だけ注意が必要で最後の行のRewriteRule . /index.php [L]の部分の.と/の間の半角スペースを消すと正常に動作しません。
ものすごく細かいですがここでかなりの時間格闘しましたｗ
ちなみに今回使用したサーバーはファーストサーバーさんなのでたぶんファーストサーバーさんはこの設定でいけると思います。
あと他に動作を確認しているのはヘテムル、コアサーバー、ハッスルサーバーです。他のサーバーで動くかどうかは分からないので実際に試してみる方は自己責任でやってみてください。

WordPressの最上段にでてくる空白を消す方法

結構前から気になってた問題が解決したのですっきり！
(知ってる人からしたらたぶん今更感満載な事ですけどね)

それはWPで作ったブログの最上段に出てくる謎の空白の消し方。
まあ謎でもなんでもなくて管理画面へのショートカット的な奴が出たり出なかったりという実に不安定でうざいったらないやつだったんですけどやっと消し方が分かりました。
やり方は簡単。
管理画面に入ってメインメニューからユーザーを選んで
「管理バーの表示」にある「サイトを表示する際」のチェックをはずすだけという・・・。

てかデフォルトでここにチェック入れるのやめて欲しい。
だってこっちはヘッダー部分とかに勝手に変な白場のマージンなんか入れて欲しくないわけだし。
なんにせよすっきりしてよかった！

CityVilleでレベルが70になったよ！

最近ははまっているというかすでにライフワークとして定着してきたCityVilleなんですが、先日ついにレベルが70に到達しました！
また自分の思い出用にその時のスクショをぺたりと。

画面にはおさまりきってないですが画面左側にも土地が拡張されています。
というかついに画面全表示でも全てを見ることが出来なくなってきたんですね。
実に感慨深いです。

前回のLv61の時点がこちら。比較するとかなり大きく広がったのが分かります。

70にまでなってみて感じるのはレベルが上がるにつれ、当然のことなのですが1個レベルを上げるのが大変になってきました。
思い返してみるとゲームを始めたのが1月17日。
この日のブログの画面キャプを見るとレベル7。わずか1日で7レベルも上昇しています。
まあ今では考えられないスピードです。
で1/22でLv19、2/11でLv50、3/8でLv60、そして4/11でLv70です。
Lv60以降は時期的にちょっと色々あってがっつりはやれていないというのもありますが60から上はやっぱりある程度毎日やっても1ヶ月はかかるっていうことですね・・・。

で、そんなにはまっているおかげでかなり情報が蓄積されてきたので勉強しようと思っていたSOYCMS2を使ってブログを作ってみました。
サイト名はCityVille Fan!!。
こっちのブログは自分用のメモみたいな感じですけど、向こうは一応きちんと情報を整理して攻略用という感じで始められた方のお役に立てればという感じです。
まだまだ勉強中な部分なのでだいぶ荒いのでこれから少しずつ細かい部分も直していこうと思います。

次の目標はレベル80。その事を更新するのは来月になるのかな・・・でもこのペースだとあと1ヵ月半はかかりそうな気がするぞ・・・。

CityVilleで見つけた新しいことの覚え書き

最近はまりにはまってるFacebookのソーシャルアプリCityVille。
はまりすぎてFacebookの勉強会でもお話しさせていただいたんですが(プレゼンの様子はこちら「Web制作者,開発者の為のFacebook勉強会でプレゼンしてきました！」)、前回のブログに書いた時からも色々分かった事があるので忘れないように覚え書きしておきます。

・街の名前を変える事が出来るようになった。
建物「CLERK’S　OFFICE」を建設すると街の名前を変える事が出来るようになりました。これまででぐち’s TOWNだったので画面上日本語が見えない仕様の為’ｓTOWNという悲しい状態でした。名前を変更するには何人かの署名が必要でウォールに投稿してクリックしてもらえると変える事が出来ます。
街の名前だけでなくお店の名前も変えれるので気に入らない名前にしてもあとで変更ができるようになったのは嬉しいですね。

・データを確認する事ができるようになった。
建物「VISITOR　CENTER」を建設するとその街にNeighborsさんが何回訪れてくれたであるとか、マップ内にどの建物がどのくらい立っているかなどを知る事ができるようになりました。
これはかなり嬉しくて自分の街だけではなくNeighborsさんの街のデータも見れることがで切るので自分が一番よく訪れていたりするとなんだか嬉しいものです。

・Collectionでアイテムに変換できる事を知った。
これまで気付かなかったんですが、街から何かを回収する時にたまにでてくるCollectionが一体何の為にあるのかいまいち理解していませんでした。
が、よくよく見てみるとよこにTradeInって書いてあるんです。なんだかよくわかんないけどとりあえず押してみようと思いクリックしてみると買う事では入手できないアイテムや建物が手に入るという事を知りました。手に入ったアイテムは人から貰ったプレゼントのようにInventoryに入ります。
他の人の街で見かけたアイのアイテムどうやって手に入れたのかなーって思ってたらこういうことだったんですね。
今度はこのアイテムを手に入れるための街づくりというのも面白い気がしてきました。

・船は横向きで格納したらいっぱい置ける！
建物を回転させて配置する事はしていませんでしたが船も回転できるんですね。
桟橋の両端の船を縦置きだと２つづつ置けますが横置きだと３つづつ置けます。という事は２つ分も多く船を所有する事ができて一回で回収できるGoodsの総量を増やす事ができます。
こっちの方が効率がいい！！

・冬物クリアランスセールが始まった
冬限定と思われる雪化粧のアイテムが冬の終わりでセールしています。大体通常の半分くらいのコインやキャッシュになっているので冬物を買うなら今かも。
おそらくこの感じではもう少ししたら中国系アイテムのように姿を消すでしょうから。

といった感じですね。

あと、自分用ログとしてがんばった証であるLv61時点でのキャプチャを取っておきます。

うーん。我ながらよくがんばったｗ

CityVilleでの効率よい攻略？方法

以前から何回か投稿しているFacebookのソーシャルアプリCityVilleなんですがこの関連の記事が日本語ではあまりないためかけっこう人気のようなので今回は気を良くしてCityVilleでの効率よい攻略？方法を紹介したいと思います。
過去の記事一覧はこちら

1.毎日の巡回を最適化しよう
Neighborsさんが増えてくると巡回するのが楽しくなってちょこちょこ見に行くのが日課になるんですがそこで1つの町に付き5回のアクションを起こす事ができます。
この行動は実はあることをする事で少しだけお得になります。
それはメダルや作物を連鎖的に取る事です。
時間を置いてアクションをするよりも一定期間に決め打ちして連続でアイテムを取る事で右上にでてくるボーナスカウンターがAMAZINGになるのでこの結果+150コイン程貰えるようになります。
Neighborsさんが10人だと1500コインも一日で多くなるのでかなりお得です。
アクションを起こす場合は画面を最大化して効率よくアイテムを取る事をおすすめします。

2.アクションはエネルギーを貯めてから
連鎖をするとより多くのコインがもらえるようになるので連鎖を狙った方がいいんですがそのアクションを起こすのにもエネルギーが必要なのでアクションを起こす際はエネルギーを限界まで貯めてから一気に行う方が効率が良いです。連鎖だけで最大2000枚くらいのボーナスが付くのでこれを狙わない手はないと思います。
このときももちろん最大化を推奨ですｗ

3.倉庫はいっぱい作ろう
アクションを起こすためにはお店等にあらかじめGoodsを割り当ててあげないといけないので効率よくコインを集めるためには大量のGoodsが必要になります。
そのGoodsを貯める倉庫が貧弱では元も子もないので余裕をもてるくらい倉庫を確保しておいた方がいいと思っています。

4.Goodsを得るには作物よりも船がおすすめ
Goodsを獲得するには自分のマップに畑を作って収穫するか船で海外から買ってくるのがよくある方法ですがおすすめなのは船で海外から買ってくる方です。
なぜ船の方がいいのかには2つありまして
・船はGoodsが腐らない
・船は自分の管轄外のエリアにも設置できる
という2点がポイントです。
1つ目は野菜だと時間経過で腐ってしまって収穫できない場合がありますが船の場合はそれがない（今まで確認していないだけで実は違うという事でしたらご指摘ください）んです。
なので忙しくてログインできない場合でも安心してGoodsを確保できるのは大きな安心感です。
※追記：船も荷物を放置すると荷崩れを起こして海に無くなるという現象が確認されました。荷崩れを起こすのは公式によると収穫までの時間の2倍程度のようです。

そして船を置く為には海岸にPIERを設置すればいいんですがこの時実は桟橋の部分は自分が管理できないエリアに設置する事ができます。
1つのPIERでだいたい5・6隻の船
を設置できるので畑のエリア5個分の土地を他に建物等で使う事ができるようになるのはかなり効率が良くて気に入っています。

5.フリーギフトはどんどんあげよう
ミッションをこなしていく（画面の左側にあるノルマみたいなやつ）ためにはNeighborsさんから色々もらわないといけないんです。
なのでこっちもNeighborsさんのウォールを見ては相手がなにを欲しがっているのかを見てそのギフトを送る事でこちらにもギフトをもらいやすくなるんじゃないかなと考えています。
（ちょっと姑息ですがもらえると嬉しいのでｗ）
ギフト送信時にはメッセージも追加できるので僕はこれが欲しいのでよければください的な事を書いておくと分かりやすいと思います。

6.どんどんフランチャイズしよう
Neighborsさんが増えてくるとNeighborsさんの土地に自分のお見せを出店する事ができるようになります。出店すると相手の土地にフランチャイズした自分のお店からもコインが入るようになりますし、HQというお店の本社みたいな建物もどんどん大きくなります。
単純に大きくなっていく様子を見ているだけでも楽しいのでフランチャイズを探している人を見かけたらぜひ出店しましょう。

そんな感じでけっこう一生懸命やってたらレベルが34まで上がってましたｗ
目標は50なのでこつこつやっていこうと思います。

CityVilleが面白い！使い方とかも紹介するよ！

今日は久々に面白いものを見つけて少し興奮気味なのでブログを書いて落ち着こうと思います。
何が僕を興奮させたのか。
それは今映画でも話題になっているFacebook・・・・・・のアプリのCityVilleです！

このFacebookアプリはシムシティみたいなゲームでいわゆる箱庭系のゲームです。
少し前に流行っていたmixiのなんちゃら牧場（僕はしていないのでよく知りませんので名前も分かりません…。）のような感じの街を育てる版のようなものです。
中学生の頃からシムシティが大好きだった僕にはある意味ぴったりなゲームです！
という訳で今日からはじめてみて色々つまづいた点というか「これってなんだろう？」と思う事があったのですがあまりに日本語化された解説がないので僕みたいな今日から始める人向けに少しだけ使い方も紹介しようと思います。

まずは画面から

見た目はこんな感じでかなり綺麗目に出来ていていい感じです。
画面の説明を少しします。
1.コイン
使えるコインの枚数が表示されています。コインは建物を建てたりゲーム内で何かのアクションをする際に必要なものです。

2.キャッシュ
コインと似ているけどキャッシュでしか買えない建物などもあります。キャッシュリアルマネーで買う事もできるようです…。まあそれはしませんが…。
なんとなくゲームしているとしなる間に少しづつ貯まっていました。どうやって貯まったんだろう…。

3.エネルギー
建物を建てたり、コインがもらえるアイコンからコインを取り出すときに使うものです。使いすぎるとなくなりますが時間がたてば貯まります。

4.グッズ
建物を建てたあとにコインやXPを取り出すためには施設に物資を供給してあげないといけません。その物資は買うのではなく農作物を育てるなどして貯める事ができます。
最初これに気付かなくてなんだろうと小一時間悩みました…。

5.XP
自分のランクを表すポイントのようなものです。一定数貯めるとレベルアップします。

6.コインがもらえるアイコン
7.コインがもらえるアイコン2
クリックする事でエネルギーを使ってコインやXPを取り出す事ができます。でてくるアクションがかわいくて病み付きになりそうです。

8.Neighbors
友達をCityVilleに呼ぶ事ができます。この友達の事をこのゲームではNeighborsと呼んでいるようです。
Neighborsはお互いの街に行く事もできますし1日5回何かしらのアクションを起こす事もできます。
野菜を収穫したり、コインやXPを取り出したり、土地が空いていれば自分のお店を出店することもできます！

画面説明はこのくらいでなんとなく分かると思いますが僕が気付いた点を箇条書きでメモしておきます。
・意外と大切なのはグッズ。貯まるのには野菜が育つのをまたないといけないのは面倒。Neighborsのところに行って収穫するのが手っ取り早いかも。
・コインは意外とよく貯まる。あまり気にせずどんどん使ってしまってもいいかも。
・一回建てた建物を壊すことなく移動したり回転したりできるのが嬉しい。道路の面に玄関を向けたりできる細かいところがいい感じ。
・街の名前は変更できない？もしできるのを知っている人はやり方を教えてください。
・人口の増やし方が分からない。街の人口が増えないと追加で建物が建てれないので人口の上限増やしたいけどどうやったらいいの？教えてエロい人
・建物の種類が多くて嬉しい。キャッシュでしか買えない建物が多すぎるのが気になるけど。
・たまにでてくるアイテムの使い道が分からない。コレクション用かな？
・電車の使い方が分からない。招待する用？
・いっぱい色んな人のマップを移動したり、出店したりするのが楽しい！これはシムシティにはなかったポイント
・街を大きくするにはどうすればいいんだろう？人口もそうだけどもしかして時間経過ポイントとかあるのかも。

とこんな感じで僕もまだ初日なのでほとんど分かっていません。
ですがものすごく面白いので、CityVilleに興味を持った方は是非始めてみてください。
僕もNeighborsを募集しているのでしてみたい！という人は僕のFacebookアカウントから「CityVilleよろ」って教えてください。

追加情報
初心者用の動画を見つけました。
これでなんとなくのイメージがつかめると思います。

PCサイトとiPhoneサイトを簡単にCSSの切り替えだけで実装する方法

今日は少し勉強になった事があったのでメモがてらのエントリで。
まず前提として
「PCサイトとiPhoneサイトを同一のファイルでCSSの切り替えだけで実装したい」
というのがあります。
それはなぜっていうと例えばPCサイト（example.com/）とiPhoneサイト（example.com/iphone）みたいに違うファイルでの切り替えをするのは比較的方法がたくさんあるんですけど、めんどくさがりやな僕は1つのHTMLファイルでそれぞれ最適な見方が出来れば楽じゃね？って思うんです。
だって例えばブログの記事書いてそれが違うファイルで出力されるとかになったりすると重複コンテンツなんじゃねとかサーバー負荷高いんじゃねとか色々考えてしまうんですよね。
なので今回はHTMLのようなコンテンツ部分のファイルは1つでそれぞれ環境ごとに違うCSSを当てて表示の切り替えをする方法を探しました。
で、ここで問題になるのが2つ。
1つめは「どういう方法でCSSの切り替えを行うか？」
2つめは「サイズの大きな画像の処理をどうするか？」
の2つ。
1つめは色んな方法がありますが今回は比較的簡単なJSファイルでユーザーエージェントとを判定してそれぞれのCSSを出力させる方法で行きます。
まずはサンプルのソース

if (navigator.userAgent.indexOf('iPhone') != -1) {
document.write('
');
}else {
document.write('
');
}

簡単に説明するとユーザーエージェントがiPhoneの場合はiphone.cssにしてそれ以外の場合はpc.cssを読み込ませようというわけです。
これで簡単にユーザーエージェントごとにCSSを当てる事が出来ますね。

で、次は参考になったのがこちらの記事「iPhoneの向きによって画像の大きさを自動的に変えるスクリプト」こちらで配布されているJSを使えばブラウザのサイズに合わせて画像の縮小が自動的に行われるという優れもの。
これはいい！んですがこれをそのまま使うとPCサイトでもiPhoneサイトでのサイズである320pxに縮小されちゃうんですよね。
で、これは困ったと思ったんですが先ほどの切り替えをうまく使えばこれも替えれるっていうことに気付きました。
サンプルはこちら

if (navigator.userAgent.indexOf('iPhone') != -1) {
document.write('');
}else {
document.write('');
}

これまた簡単に説明するとユーザーエージェントがiPhoneの場合は先ほどのリサイズするスクリプトが読み込まれ、それ以外の場合は何も読み込まれないっていう指示です。
document.writeめちゃ使える！これならユーザーエージェントごとにいろんなことに使えます！

でこれを使ってサンプルを作ってみたので興味ある方はPCとiPhoneで見比べてみてください。
サンプル

そんなんめんどいわっていう人用にiPhoneの表示でのキャプですｗ

こんな感じでさくっと綺麗に切り替えができていい感じ！
ちなみに大きい画像はリサイズされてますが小さい画像はそのままの表示ですので元々小さい画像がさらに小さくなるっていう心配も消えました。
自分用でもありますがせっかく作ったので以下からダウンロードできるようにします。
サンプルファイルのダウンロードはこちら
何かあったからってこっちに言ってきても責任はもちろん持ちませんので個人の責任でどうぞ。

ブログの高速化？WPプラグインで画像を外注化

今日はまたWPのプラグインの紹介なんですけど、その前に最近考えてるサイト・ブログの高速化について少しまじめに書きます。

サイトやブログを表示する時にFlashのローディングのパーセンテージが進まなくてイライラしたり、動画の読み込みが遅くてイライラする事があるんですがそんなリッチコンテンツなんかないのにサイトが重かったりすると「何でこんな普通のサイトなのにこんなに遅いねん！」って余計イライラしませんか？
僕はけっこうイライラしますｗ
これには色々原因があるんですが主に
・読み込んでる画像が重い
・サーバーに負荷がかかって処理に時間がかかっている
という2つが主な原因である場合が多いです。
要は重い画像やトラフィック増によるサーバーレスポンス低下がだいたい遅くなってる犯人だという事です。
（もちろん異論は認めますｗ）

そこでその原因を外に持っていけばアクセスが増えたりしてもブログやサイトが安全に運用できるよね！っていうのが今回の趣旨です。
前置きが長くなりましたが本編はここから。

画像を外注化（別サーバーに置いておく）するメリット
・画像のデータをブログの本体のサーバーに置かないのでサーバー容量を圧迫しない
・画像データが別サーバーから読み込まれるので本体のサーバーのサーバーレスポンス低下を招きにくい
・その結果「サーバーが落ちにくい」「アクセスが多くなっても安定してサイトやブログが表示される」
・SEOの面でも効果的（サイトの表示スピードの件で）
・移転する時もらくちん（ここがけっこう重要）

上記のようなメリットが考えられるので画像は外部のサーバーに置いておくのがいいと思います。
そこで考えるのが「どこに置くか」
今回は大御所のFlickrとPicasaにします。
これには理由があってFlickrやPicasaのような大手サービスは「サーバーが安定していてまず落ちる事がない」というのが1番大きな理由です。
せっかく画像を外注化してもそこがだめでは話になりませんからねｗ
ただ、外に置くのにその影響で管理する手間や作業工数が増えるとかえって負担になるのでそこをできるだけ減らして楽にかつ簡単に運用するためにWPのプラグインを使用します。
今回紹介するプラグインはこの2つ
・WordPress Media Flickr
・Picasa Express x2

では実際に僕が使用している方法を紹介します。

WordPress Media Flickr
こちらは主に息子達の写真を貼り付ける時に使っています。Flickrの有料アカウントを持っているので容量を気にせず撮った写真をガンガン放り込んでブログ用のやつだけ公開設定にしてsetにまとめています。
アップロードしたらFlickrが勝手にリサイズしてくれるのでサイズとかも気にせずどかどか入れれるのがいい感じです。
インストールはWordPress Media Flickrから手動でもいいですし「Wordpress Media Flickr」で検索して自動インストールでもどっちでもいいと思います。
好きなほうでやってくださいｗ

実際の埋め込み手順
プラグインをインストールしたら下の画面のようなアイコンが出ます。
Flickrに画像を放り込んで準備ができたらアイコンをクリックします。

Media Flickrアイコンをクリック

するとlightboxでギャラリーが出てくるので埋め込みたい画像をクリック

lightboxでギャラリーがでてくるよ

あとはサイズを選んで挿入ってするだけ

サイズを選んで挿入

僕の場合は500pxで埋め込んでます。
続けて他の写真を挿入ってするとどんどん画像を埋め込んでいきます。
でここが少しポイントなのですが少しでも作業効率をよくすることが大切だと思うんです。
だってそれが手間になってめんどくさいからブログしないってなったら本末転倒ですからね。
で、ブログを書く時に僕は実際こういう手順をしています。

1.写真をFlickrやPiucasaにアップロード
2.大枠の記事を書く
3.画像を一気に埋め込む（このとき場所はどこでもいいです。一番上でも一番下でも好きなところにドカンと挿入します）
4.テキストエディタに埋め込んだ画像タグをカット＆ペースト
5.テキストエディタで不要なタグを一括削除したりAltやtittle、リンク先URLの調整
6.調整済みのタグを記事内の適切な箇所にコピペする

という感じです。実際には息子達の写真は妻に撮影してもらってるので妻が撮影した画像をFlickrにアップしてもらっている間にこっちは記事の下書きをしているんですけどね。ブログを複数人で運用する場合の作業分担もできるので作業の効率もいいと思っています。
で、その埋め込んだ画像なんですがプラグインで埋め込むと不要なタグがどうしてもでてきます。
気にしなければいいところではありますが僕はすごく気になるのでテキストエディタでさくっと一括削除してやります。
これがブラウザで入力でする時に比べて作業スピードが格段に違いますのでかなり作業効率がいいです。
こだわりたい方はぜひ試してみてください。

余談ですが旅行先などでの移動中にはポメラでブログの記事を下書きしたりする事もあります。
画像と記事を別のタスクにするとどんな場所でもブログを書く準備ができて快適になってきますよ。

Picasa Express x2
こちらもインストールはPicasa Express x2から手動でもいいですし「Picasa Express x2」で検索して自動インストールでもお好きなほうでどうぞ。
Picasaは有料アカウントではなくて無料アカウントなんですが、こちらは画面のキャプチャとかの画像用で（息子達の写真以外ですね）使うので1024 MBも容量あればまず足りなくなる事はないでしょう。
これまではWP入れてるサーバーにアップしてましたが上記のような事を色々考えて外に出す事にしました。
ちなみにこの記事の画像はPicasaに入れてます。
運用手順は以下のとおり

インストールするとPicasaのアイコンが出てくるのでこれをクリック

Picasaのアイコンをクリック

Picasaの方で公開用のギャラリーを用意しておき、画像はそこに入れておきます。

ギャラリーを選択

画像を選んでInsertをクリック

あとはFlickrの時同様に画像をどんどん挿入してテキストエディタで編集すればOK。
こんな感じで用途別に画像を保管するエリアを分けて運用する感じにしています。
これでアクセスが増えてもサーバーに負担が増えにくくなったので快適にブログを運用できますね。
まあこのブログがそんなにアクセス増えることもないんですけどｗ

勢いで書いてたらえらい長文になってしまいました。
最後まで読んでいただいてありがとうございます。