Tokyo O life - ずばぴたテック » WordPress

IE7でブログが開けないバグを修正しました

tomoyun — Sat, 15 Aug 2009 00:12:56 +0000

　当ブログがIE7で開けないバグがあると指摘されました。

　ゲゲっ、本当だ！

　調査したところ、右サイドに表示しているgo2web20のTwitterフォローバッジが原因でした。このバッジけっこう評判良くて、僕も気に入っていたので残念です。

　が、そもそもの原因はIEのバグだそうです。

IE の　インターネットサイト　XXX　は開けられません。　回避策

この問題は子コンテナ HTML 要素が子コンテナのコンテナ親要素を変更しようとするスクリプトコードを含むのが原因で発生します。

以下、同じ現象に悩む人のための対策方法です。

【対策】

(1) id=”wrapper”というdivタグをbodyタグ直下に追加

———————–

〜

———————–

↓

———————–

〜

———————–

という感じ。

(2) http://files.go2web20.net/twitterbadge/1.0/badge.jsをパクって、以下のように改造

document.body.appendChild(tfbMainDiv);

↓

document.getElementById(‘wrapper’).appendChild(tfbMainDiv);

(3) 改造版badge.jsをサーバ内に設置。

(4) Twitterフォローバッジの埋め込み用タグを以下のように変更

↓

　これで解決しました。
　
　もし、同じようにTwitterフォローバッジを使っていて、「自分でここまで、できないよ」という人は、(1)と(4)だけそのまま真似すれば、解決します。
　著作権的にかなりグレーですが、ご本家が対応してくれるまでの、応急処置として。一応、作者のブログにはコメントで報告してあります。

Mars Editはブログ時代のVJE-Penか？

tomoyun — Sun, 02 Aug 2009 18:04:22 +0000

　現在、Mard Editを試している。

　僕がブログを書くときは、WordPressの投稿画面ではなく、Macのデスクトップアプリであるectoを使用している。
ectoを使うと、ワープロ感覚でブログのエントリを作成できる。さらに組み込みのAmazon Helper機能を使って、Amazonの商品情報や写真をエントリに挿入したり、iPhotoのライブラリから写真を挿入できる。添付したいファイルはデスクトップからドラッグアンドドロップすればいい。
　ectoはとても気に入っているのだが、最近Flickr Helper機能がうまく動かなくなってしまった。ectoからログインできているのに、写真の一覧を取得できない。
　この4月にVer.3.0がリリースされて依頼、まったくバージョンアップされないのも不安だ。8/15にAmazon APIの認証方法が変わるのだが、このままだとAmazon Helperは使えなくなるはずだ。
　そこで代替できるブログクライアントを捜していて、Mars Editにたどり着いた。Mac用ブログクライアントとしては、ectoと双璧らしい。
　ectoがモダンなワープロっぽいWYSIWYG方式なのに対し、Mars Edirは生のHTMLでマークアップしながらエントリを書く。タグの挿入は右クリックメニューで行える。SafariでURLをコピーしてリンクしたい文字を選択。右クリックメニューから「Past Link」を選べば、自動的にAタグで囲われる。リアルタイムのプレビューウィンドウがあるので、どんな風に表示されるかも把握しやすい。HTMLを書ける人ならこっちのほうが効率良いかも。

画像の貼り付け

　ハイライトはFlickrとの統合で、Flickrのライブラリから素早く写真を読み込んで、エントリに貼り付けることができる。

　デスクトップやiPhoneから写真をドラッグ＆ドロップすると、アップロードパネルが開く。そこでアップロードを実行すると、アップロード先のURLを含んだHTMLのコードが挿入される。
　全体に動作が小気味よく、快適な感じ。ヘビーユーザー向けのちょっとマニアックな仕様も含めてMS-DOS時代の傑作ワープロVJE-Penをちょっと思い出した。VJE-Penは軽くて使いやすく、かつてライターや編集者の必携ワープロだった。
　Mars EditがAmazon対応していれば、いうことないのだが、残念ながらそれはない。AppleScriptには対応しているので、それでなんとかできるだろうか？
　30日間無料の評価版なので、しばらくectoと併用して検討してみよう。

ブログをTwitter仕様に変えてみた

tomoyun — Sun, 26 Jul 2009 17:09:41 +0000

　わずか三カ月で僕のネットライフは様変わりしてしまった。Twitterに目覚めてしまったから。いまや朝起きてから夜寝るまでTwitterばかり。さらにリアルでもTwitterでみつけた面白そうなイベントに出かけて、そこで新しい知己を得るなんてことも始めた。ネットだけでなくリアルも含めて生活がアクティブかつスピーディに変わってきた。

　それに合わせてブログも模様替えした。いまの僕にフィットした「Twitter仕様」に変えたのだ。

　当ブログはオープンソースのWordPressというブログ管理システムを使っている。WordPressの魅力は動作が軽快なこと、操作がわかりやすいこと、そして外観や機能を変更するためのテーマファイルやプラグインソフトが揃っている。今回もそれらを活用した。

　今回の目標は、

（1）3カラム表示にして、日々のTwitterのつぶやきや、Flickrへの写真投稿をブログに表示する。

（2）Twitterのつぶやきをブログのエントリ化する。

（3）ブログを訪れた人に僕のTwitterアカウントを知らせてフォローして貰う。

　今回利用したのは

（a）テーマファイル：Jules Joffrin 1.1

（b）プラグイン： Twitter Tools

（c）汎用ブログパーツ：Twitter “Follow” Badge for your site/blog

の3つ。

　aは、単なる3カラムではなく、左のメインカラムを横幅変更可能リキッドレイアウトにできること、単なる3カラムではなく、レイアウト上部で2カラムで幅が広いものもサイドカラムにおけること、ウィジェット対応で、レイアウトのカスタマイズが簡単であることなど、メリットが非常に多かった。リキッドレイアウトが必要なのは、過去記事で横幅の広い画像を貼り付けたものが多いせいだ。特にソフトの使い方関係など。

　ウィジェットというのはWordPressのレイアウトパーツで、各パーツをドラッグ＆ドロップで各カラムに配置できる。サイドカラム上部の幅広い部分は、Twitter Toolsを使ってTwitterの最新のつぶやきを掲載することにした。

　bのTwitter Toolsは単に自分のつぶやきをサイドバーに掲載するだけでなく、ブログの投稿をURL付きでTwitterに自動でつぶやく、Twitterのつぶやきを1日や1週間単位でまとめてブログのエントリに自動投稿する、ブログのサイドバーからTwitterにつぶやけるようにできるなど、なかなか高機能なプラグインだ。サイドバーへの表示はウィジェットとして行うので、aの新しいテーマファイルと一緒に使いやすい。

　今回はサイドバーへの表示機能と、1日ごとにつぶやきをまとめてブログに投稿する機能を使った。ブログへの投稿をTwitterにつぶやく機能はいまのところMac OS Xのブログ投稿ソフトectoの機能を使っている。が、今後iPhoneからのブログ投稿が増えてきたら、Twitter Toolsのほうを試して見るつもりだ。

　cは、画面の右端に縦型のタブを表示し、クリックすると僕のTwitterのプロフィールページに遷移するというもの。色をカスタマイズできるので、このブログの青系とは逆のエンジ色にカスタマイズしてみた。使い方は下記を参考にした。

Twitter でフォローを増やしたい方はお試しください　その2

　これで、いまどきっぽいTwitter仕様にブログになった。

　合わせて、Flickrの最新写真やこれまでの写真のアトランダムなピックアップも掲載することにした。

　今後は論理的な主張や、写真と文章で説明するものはブログ、ひびのニュースや生活の出来事に接して感じたことはTwitter、写真だけで語れるモノはFlickrと明確に使い分け、その中心にブログがあるような使い方をしていく予定。

　iPhoneとEYE-Fiがこのネットライフを可能にしたのだが、それについてはまた後日。

WordPressでコンタクト用メールフォームを設置

tomoyun — Wed, 25 Feb 2009 01:19:40 +0000

　今更気がついたのだけど、WordPressのテンプレートファイルの中に「Contact Page Template (contact.php)」というのがあった。

　ページを追加するときに、テンプレートメニューから「Contact」という名前で選ぶこともできる。

　こいつを使えば、簡単にメールフォームを設置できるのね。1年間気がつきませんでした。

　でも、使ってみると、いろいろ問題がある。

問題点

(1) メッセージが全部英語でわかりにくい。

(2) 「1 + 3 = ?」というスパム対策の質問項目があるのだけど、なんと問題と答えが固定されていて、変化しない（笑）

(3) 送られてきたメールで、ブログタイトルの日本語部分が化けてしまし、文字コードがUTF-8なのもイヤ。

ということで、下記のように改造しました。

(1) メッセージをすべて日本語化。

(2) 毎回異なる計算式を表示するように改造。

(3) mb_send_mailを使ってメールを送信するようにした。（PHPにmb_stringモジュールが必要です）

WordPress 2.7.xの管理画面で、[外観]→[編集]で「Contact Page Template (contact.php)」を選び、下記のコードで上書きしてください。

念のため、元ファイルのバックアップを必ずするように＆利用は自己責任で。

contact.php.zip

ダッシュボードが使いやすくなったWordPress 2.7

tomoyun — Thu, 18 Dec 2008 08:49:25 +0000

　WordPress 2.7が出たので、当ブログもアップグレードした。管理画面のトップページである「ダッシュボード」が大幅に変更され、使い勝手が向上している。

　新しいダッシュボードでは、最近のコメントや投稿していない下書きの状態が見やすく把握できる。クイック投稿機能もついたので、WordPress上でエントリを書いている人は、まずここを開けばよい。コメントの承認やテーマの変更の変更もここからできる。

　WordPress 2.7とは直接関係ないかもしれないが、「ターボ」モードがMac Safari 3.1でも使えるようになった。「ターボ」モードはGoogle Gearを使って画像やCSSをキャッシュさせて動作を速くさせる機能。以前はMacではFirefoxだけだったのだが、Google側が対応したようだ。

MacJournal 5.1.1のメディアブラウザ

tomoyun — Tue, 02 Dec 2008 05:10:45 +0000

MacJournal 5.1.1にメディアブラウザがついたので、テスト。
iPhotoから直接、写真を読み込むことができる。

リサイズした写真を投稿してみました。
（投稿先は、iDisk）
おお、きちんとブログ上でもリサイズされている！

これで、スピーディーにブログの更新ができるようになるかな？

iPhone用無料アプリ：WordPress

tomoyun — Tue, 05 Aug 2008 04:22:03 +0000

iPhoneからWordpressに投稿できる「Wordpress for iPhone」がついに1.1になって日本語のエントリもiPhoneから投稿できるようになった。

現在、iPhone上でこのエントリを書いている。

投稿できるのはテキストだけでなく、写真もライブラリやカメラからエントリに追加することができる。

以下はスクリーンショット。

自分のブログを登録しておく。

ブログを設定すると、いままでのエントリも自動的にiPhone側に読み込まれる。

投稿前にプレビューで確認できる。

WordPressのAmazonプラグインを日本に対応させる

tomoyun — Sat, 02 Aug 2008 21:52:58 +0000

WordPressのプラグイン「WP-Amazon」を使うと、WordPressの投稿画面からAmazonを検索し、下記のようなリンク付きの画像やタイトルをドラッグ＆ドロップで挿入できる。

空色デイズ(DVD付)

Price: ￥ 1,400 JPY

Lowest used price: ￥ 620 JPY

ただし、日本のAmazonを検索するには、ちょっとした改造が必要だった。

WP-Amazonとは？

WP-Amazon 2.1を設置すると、WordPressの投稿画面の右上に「A」マークのボタンが現れ、ダブルクリックすると、右側にAmazonの検索画面が表示される。

検索結果を選択してドラッグ＆ドロップで左側の投稿画面に画像やテキストを挿入できる。画像と商品名にはアフィリエイトID入りでAmazonの商品ページへのリンクが貼られている。

画像のサイズを変えたいときは「M」や「L」というリンクあるので、これを新規ウィンドウで開くと画像が表示される。これもウィンドウ間でドラッグ＆ドロップして挿入できる。かなりデスクトップアプリっぽい操作感だ。

設置法

WP-AmazonはWordPressの標準的なプラグインなので、基本的にはpluginsフォルダに置くだけで動作するのだが、なぜか日本のAmazonを検索しようとすると、結果が表示されない。

以下に、設置方法と日本のAmazonでも動作する簡単改造を紹介する。

WP-Amazon 2.1をダウンロードして、zipファイルを解凍してできたフォルダ「wp-amazon」をwordpress/wp-content/plugins/以下に置く。

次に、wp-amazon/js/フォルダの下にあるファイル「wp-amaon.js」をテキストエディタで修正する。

36行目

var baseUrl = ‘http://ecs.amazonaws.’ + wpa2CountryTLD + ‘/onca/xml’

↓

var baseUrl = ‘http://webservices.amazon.’ + wpa2CountryTLD + ‘/onca/xml’

こんな感じ。

修正が終わったら、管理画面の「設定」-「プラグイン」でWP-Amazonを有効化する。

「設定」画面に「Amazon」というメニューが表示されるのでCountoryを「Japan」にして自分のアソシエイトID（アフィリエイトID）を設定する。

「Update Options」をクリックすれば、Amazonの商品を検索できるようになる。

WordPress 2.6の新機能を試してみた（投稿ブックマークレット）

tomoyun — Tue, 29 Jul 2008 22:19:11 +0000

WordPress 2.6のもうひとつの目玉は「投稿ブックマークレット」

投稿フォームの横にある「投稿ブックマークレット」の「ここをクリック」というリンクをブックマークバーにドラッグ＆ドロップするだけ。

livedoor Blogとかでは、ずいぶん前から提供されていた気がします。
でも、さすがに単なるブックマークレットではなかった。

YouTubeで使うと、

こんな風に動画埋め込み用のタグが自動的に取得される。
静止画にも対応しているらしい。

画像付きのエントリを投稿するときは、MacJournal経由が便利なのだけど、
ブログやニュースをネタに投稿するには、この手のブックマークレットが便利だ。

元々「QuickPost」というプラグインだったものが、WordPress 2.6からデフォルトになったらしい。
ただし、QuickPostでは細かい設定画面があるのに、WordPress 2.6の管理画面には見あたらない。
今後、追加されるのだろうか？

追記。

Safari 3.1では、やっぱり動作が変だった。。

WordPress 2.6の新機能を試してみた（ターボ）

tomoyun — Tue, 29 Jul 2008 21:42:45 +0000

WordPress 2.6にはいくつか目立った新機能がある。

まずは、「ターボ」。

Google Geasrをインストールすることで、WordPressの画面表示を高速化できる。
「Google Gearsのインストール」ってなんだか面倒だなと思っていたが、とても簡単だった。

Firefoxでログインすると、画面の右上に「ターボ」が現れる。
（Safariには未対応）

「ターボ」をクリックすると、下記のようなウィンドウがポップアップする。

「いますぐインストール」をクリックするとGoogle Gearsのホームページが開く。

「Install Gears」をインストールすると、Firefoxのアドオンがインストールされる。

これだけ。あとは、Firefoxを再起動すれば、ターボが有効になる。
確かに画面表示が早くなる。

管理画面が速くなるのは快適だが、ブログもキャッシュされてしまうと、不具合がおきたとき
気付きにくいのではないだろうか？

いまだにメインのブラウザはSafariなのだけど、Firefoxがどんどん便利になると
使用比率が変わってきそう。