Tokyo O life - ずばぴたテック » PHP http://www.zubapita.jp iPhone、iPod、Mac、PHP、WordPress、動画、その他いろいろ Sun, 05 Feb 2012 05:00:00 +0000 ja hourly 1 http://wordpress.org/?v=3.3 IE7でブログが開けないバグを修正しました http://www.zubapita.jp/2009/08/15/bug_fix_twitter_bagde/ http://www.zubapita.jp/2009/08/15/bug_fix_twitter_bagde/#comments Sat, 15 Aug 2009 00:12:56 +0000 tomoyun http://www.zubapita.jp/2009/08/15/bug_fix_twitter_bagde/ 　当ブログがIE7で開けないバグがあると指摘されました。

　ゲゲっ、本当だ！

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

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

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

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

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

【対策】

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

———————–

<body>

〜

</body>

———————–

↓

———————–

<body>

<div 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フォローバッジの埋め込み用タグを以下のように変更

<script src=’http://files.go2web20.net/twitterbadge/1.0/badge.js’ type=’text/javascript’></script>

↓

<script src=’http://www.zubapita.jp/wp-content/themes/jules-joffrin/twitterbadge.js’ type=’text/javascript’></script>

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

]]> http://www.zubapita.jp/2009/08/15/bug_fix_twitter_bagde/feed/ 0 Mars Editはブログ時代のVJE-Penか？ http://www.zubapita.jp/2009/08/03/marsedit_1st_imp/ http://www.zubapita.jp/2009/08/03/marsedit_1st_imp/#comments Sun, 02 Aug 2009 18:04:22 +0000 tomoyun http://www.zubapita.jp/?p=991 　現在、Mard Editを試している。
screenshot_01.jpg
　僕がブログを書くときは、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のライブラリから素早く写真を読み込んで、エントリに貼り付けることができる。

IMG_0825.JPG IMG_0824.JPG

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

]]> http://www.zubapita.jp/2009/08/03/marsedit_1st_imp/feed/ 0 ブログをTwitter仕様に変えてみた http://www.zubapita.jp/2009/07/27/blog_with_twitter/ http://www.zubapita.jp/2009/07/27/blog_with_twitter/#comments Sun, 26 Jul 2009 17:09:41 +0000 tomoyun http://www.zubapita.jp/2009/07/27/blog_with_twitter/ 　わずか三カ月で僕のネットライフは様変わりしてしまった。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がこのネットライフを可能にしたのだが、それについてはまた後日。

]]> http://www.zubapita.jp/2009/07/27/blog_with_twitter/feed/ 0 Wikipedia API（検索&パース）のサンプル http://www.zubapita.jp/2009/04/01/wikipedia_api_sample/ http://www.zubapita.jp/2009/04/01/wikipedia_api_sample/#comments Tue, 31 Mar 2009 21:17:22 +0000 tomoyun http://www.zubapita.jp/2009/04/01/wikipedia_api_sample/ 　Wikipedia API(検索＆パース)を先日公開したけど、やはり具体的な利用例がないと使い方がわからないだろう。

　そこで、PHPによる簡単な利用サンプルを作成した。

　PHP 5.0以降には、XMLを簡単に取り扱える「SimpleXML」という、非常に優れた仕組みがある。

　ファイル、もしくはURLからXML文書を読み込んで、PHPのオブジェクトに変換してくれる。

　一度、変換してしまえば、オブジェクトや配列を扱うのと変わらない感覚と手順で操作できる優れものだ。（参考：PHPでのSimpleXMl処理）

　これを使えば、数行から数十行でXMLの処理が書けてしまう。

　以下が、今回のサンプルの画面。

検索結果リストの処理。
screenshot_02.jpg

詳細ページの処理
screenshot_03.jpg

【解説】

(1) 検索結果XML処理の実際

Wikipedia検索＆パースAPIで、検索を行うと、以下のように検索結果一覧のXMLが返ってくる。

<?xml version="1.0" encoding="utf-8"?>

<wikipedia>

<items>
<item>
<title>水樹奈々</title>
<link>http://localhost/~tomoyun/wpsearch/index.php?id=45275&amp;title=%E6%B0%B4%E6%A8%B9%E5%A5%88%E3%80%85&amp;type=xml</link>
<fullsize>http://localhost/~tomoyun/wpsearch/index.php?id=45275&amp;title=%E6%B0%B4%E6%A8%B9%E5%A5%88%E3%80%85&amp;type=xml&amp;size=full</fullsize>
</item>
<item>
<title>水樹奈々_スマイル・ギャング</title>
<link>http://localhost/~tomoyun/wpsearch/index.php?id=399281&amp;title=%E6%B0%B4%E6%A8%B9%E5%A5%88%E3%80%85_%E3%82%B9%E3%83%9E%E3%82%A4%E3%83%AB%E3%83%BB%E3%82%AE%E3%83%A3%E3%83%B3%E3%82%B0&amp;type=xml</link>
<fullsize>http://localhost/~tomoyun/wpsearch/index.php?id=399281&amp;title=%E6%B0%B4%E6%A8%B9%E5%A5%88%E3%80%85_%E3%82%B9%E3%83%9E%E3%82%A4%E3%83%AB%E3%83%BB%E3%82%AE%E3%83%A3%E3%83%B3%E3%82%B0&amp;type=xml&amp;size=full</fullsize>
</item>
<item>
<title>水樹奈々の楽曲</title>
<link>http://localhost/~tomoyun/wpsearch/index.php?id=1575110&amp;title=%E6%B0%B4%E6%A8%B9%E5%A5%88%E3%80%85%E3%81%AE%E6%A5%BD%E6%9B%B2&amp;type=xml</link>
<fullsize>http://localhost/~tomoyun/wpsearch/index.php?id=1575110&amp;title=%E6%B0%B4%E6%A8%B9%E5%A5%88%E3%80%85%E3%81%AE%E6%A5%BD%E6%9B%B2&amp;type=xml&amp;size=full</fullsize>
</item>
<item>
<title>水樹奈々のアルバム</title>
<link>http://localhost/~tomoyun/wpsearch/index.php?id=1575128&amp;title=%E6%B0%B4%E6%A8%B9%E5%A5%88%E3%80%85%E3%81%AE%E3%82%A2%E3%83%AB%E3%83%90%E3%83%A0&amp;type=xml</link>
<fullsize>http://localhost/~tomoyun/wpsearch/index.php?id=1575128&amp;title=%E6%B0%B4%E6%A8%B9%E5%A5%88%E3%80%85%E3%81%AE%E3%82%A2%E3%83%AB%E3%83%90%E3%83%A0&amp;type=xml&amp;size=full</fullsize>
</item>
</items>
</wikipedia>



これをPHPのSimpleXMLで処理するには、以下のようにする（変数$urlには、Wikipdia検索&パースAPIのURLと検索パラメータが入っていると仮定する）。

   $xml = simplexml_load_file($url);
   foreach($xml->items->item as $item) {
           $title = $item->title;
           $link = $item->link;
   }
これで取得できた「$link」が、詳細ページのURLだ。


(2) 詳細ページXML処理の実際
上記の(1)で取得したリンクの詳細ページにアクセスすると、下記のようなXMLが返ってくる。




<?xml version="1.0" encoding="utf-8"?>

<wikipedia> 

<infos> 

<info> 

<title>声優</title>

<data>

<ふりがな>みずき なな</ふりがな> 

<名前>水樹 奈々</名前>

<本名>近藤 奈々
（こんどう なな）</本名>

<愛称>奈々ちゃん</愛称>

<出生地>日本・愛媛県新居浜市</出生地> 

<血液型>O型</血液型>

 <生年>1980</生年>

 <生月>1</生月>

 <生日>21</生日>

 <所属>シグマ・セブン</所属>

 <活動時期>1998年 -</活動時期>

 <デビュー作>門倉千紗都（NOëL 〜La neige〜）</デビュー作> 

</data>

 </info>

 </infos>

 <lead>水樹 奈々（みずき なな、1980年1月21日 - ）は、愛媛県新居浜市出身の女性声優、歌手。</lead> 

</wikipedia>



これを処理するPHPのコードは以下の通り。

   $xml = simplexml_load_file($url);
   $lead = $xml->lead;
   echo $lead."\n"; // リード文
   foreach($xml->infos->info as $info) {
           foreach($info->data->children() as $name=>$value) {
                   echo $name."\n"; //要素(タグ)名
                   echo $value."\n"; //要素値
           }
   }



サンプルプログラムのソースは、「Wikipedia検索＆パースAPI」のver.1.1以降のアーカイブに含まれている。

Wikipedia検索＆パースAPIのページからダウンロードしてください。

Wikipedia検索＆パースAPIページ

Wikipedia検索＆パースAPI利用サンプルページ
]]> http://www.zubapita.jp/2009/04/01/wikipedia_api_sample/feed/ 2 Wikipedia API（検索＆パース）を作りました http://www.zubapita.jp/2009/03/30/wikipedia_search_api/ http://www.zubapita.jp/2009/03/30/wikipedia_search_api/#comments Mon, 30 Mar 2009 04:12:47 +0000 tomoyun http://www.zubapita.jp/2009/03/30/wikipedia_search_api/ 　最近、Wikipediaのデータを活用したサービスが増えている。

　ただし、先日WikipediaのダンプデータをDBに投入する で紹介したように、Wikipediaはサーバから叩けるAPIを提供していない。不定期にダンプデータが提供されているので、それを自分のサーバのデータベースに投入して使うことは可能なのだが、収録されているデータは、Wikiのマークアップがついたままの生テキストなので、使い勝手がよくない。

　以前から提供されているSimpleAPI「Wikipedia」は、たぶんこのダンプデータを使って、独自に検索APIを提供しているのだと思うが、

  • 複数の検索結果を一度に返してくる。
  • 簡易な要約文しか提供されない。

　という制約があって、Wikipediaに収録されている豊富なデータを活用するには、ちょっと足りない感じがする。

　そこで、Wikipediaのマークアップを解釈して、XMLに変換して出力するプログラムを作成した。Wikipedia独特の右上に表示されているサマリーデータや、文中の表、見出しによる階層構造を解釈してXMLとして出力する。ちなみにXMLの要素名（HTMLでいうところのタグ名）は、日本語になることが多い。これでいいのかな？　と思って調べたら、XMLの要素名にはアルファベットのほか、ひらがな、カタカナ、漢字も使えるそうだ。

　SimpleAPIの真似をして、WebブラウザからはHTMLで、APIとしてはXMLで返すようになっている。

　APIとして使うときは

　http://ホスト名/wpsearch/index.php/?keywords=検索ワード&type=xml

　で、結果が1つの場合はページの内容が、複数ある場合は前方一致検索結果の一覧が、XMLで返る。

　複数の結果が返った場合は、一覧からリンクを取得して

　http://ホスト名/wpsearch/index.php/?id=ページID&title=ページタイトル&type=xml

　とアクセスすると、指定したページの内容がXMLで取得できる。–

　アップデート履歴

  • 2009/03/30 1.0 ファーストバージョン
  • 2009/04/01 1.01 XML出力に<infos>（infobox）と<lead>（リード文）のみを返すshortモード（デフォルト）と、残りの全チャプターを返すfullモード（&size=full）を追加。
  • 2009/04/01 1.1 完全一致検索モード（&search=equal）を追加。API利用サンプルを追加。検索結果が1件のときのHTML内のリンクのバグを解消。
  • 2009/04/01 1.2 同一IPアドレスからの連続アクセスを禁止する機能を加えました（現在は5秒おきに設定）。
  • 2009/04/04 1.3 フィルタ機能を付けました。

–

Wikipedia API(検索＆パース)

http://ws.zubapita-t.com/

screenshot_01.jpg

screenshot_02.jpg

–

ソースコード・ダウンロード

wpsearch1.4.zip

–

●●プログラムの設置について●●

WpSearchは、Wikipedia日本語版のダンプデータを格納したデータベースを検索し、結果を表示するプログラムです。

- XML形式で結果を出力させれば、Wikipedia検索APIとして、外部のサーバから利用できます。

- MySQLとPostgreSQLに対応しています。

- PHP-5.1以上が必要です。

- 特別な外部ライブラリを必要としません。

–

- 検索はページタイトルを前方一致で検索します。

- 検索結果が複数ある場合は、候補リストを表示します。

- page_idを&id=xxxxの形式で指定すると、そのページIDのテキストを表示します。

–

- 検索キーワード、page_idは、GETで受け付けます。

- &type=xmlと指定すると、ページの内容をXML形式で出力します。表形式の記述をパースし<カラム名>データ</カラム名>の形で返します。

–

●●Wikipediaダンプデータの投入について●●

【概要】

- WikipediaのサイトからXML形式のダンプデータを取得。

- xml2sqlコマンドを使って、MySQLもしくはPostgreSQL読み込み用データを作成し、読み込ませる。

–

【ダンプデータ】

http://download.wikimedia.org/jawiki/

latestフォルダから、「jawiki-latest-pages-articles.xml.bz2」をダウンロードして解答。

2009年1月版で約3.4GBのサイズ。

–

【xml2sql】

http://meta.wikimedia.org/wiki/Xml2sql

Mac OS XやLinuxはソースをダウンロードして

$ ./configure

$ make

$ sudo make install

で使用できるようになる。

*

Windowsは、バイナリ版が用意されている。

–

【PostgreSQL】

ホスト名：localhost

ユーザー名：mwiki

データベース名：mwiki

パスワード：なし

—-の場合。

–

ユーザーとデータベースの作成（面倒なときは、PhpPgAdminで..）

$ createuser mwiki

Shall the new role be a superuser? (y/n) n

Shall the new role be allowed to create databases? (y/n) y

Shall the new role be allowed to create more new roles? (y/n) n

$ createdb -U mwiki -E UTF-8 mwiki

–

テーブルの作成

$ psql -U mwiki mwiki < wpsearch/sql/pgsql/tables.sql

–

投入用データの作成（PostgreSQL 8.3系の場合）

$ xml2sql -postgresql=8.3 jawiki-latest-pages-articles.xml

–

データの投入

$ psql -U mwiki mwiki < page.sql

$ psql -U mwiki mwiki < revision.sql

$ psql -U mwiki mwiki < text.sql

–

【MySQL】

ホスト名：localhost

ユーザー名：mwiki

データベース名：mwiki

パスワード：なし

—-の場合。

–

ユーザーとデータベースの作成（面倒なときは、PhpMyAdminで..）

$ mysqladmin create mwiki -u root -p

$ mysql -u root -p

Enter password:

mysql> GRANT ALL PRIVILEGES ON mwiki.* TO mwiki@localhost IDENTIFIED BY ” WITH GRANT OPTION;

mysql> \q

–

$ createuser mwiki

Shall the new role be a superuser? (y/n) n

Shall the new role be allowed to create databases? (y/n) y

Shall the new role be allowed to create more new roles? (y/n) n

$ createdb -U mwiki -E UTF-8 mwiki

–

テーブルの作成

$ mysql -u mwiki -D mwiki < wpsearch/sql/mysql/tables.sql

–

投入用データの作成

$ xml2sql jawiki-latest-pages-articles.xml

–

データの投入

$ mysqlimport –fields-terminated-by=’\t’ –default-character-set=utf8 -u mwiki -d -L mwiki page.txt

$ mysqlimport –fields-terminated-by=’\t’ –default-character-set=utf8 -u mwiki -d -L mwiki revision.txt

$ mysqlimport –fields-terminated-by=’\t’ –default-character-set=utf8 -u mwiki -d -L mwiki text.txt

–

【プログラムの設置】

- ApacheのDocumentRoot以下もしくはUserDir以下の好きな場所に、WpSearchのアーカイブを解答したフォルダ「wpsearch」を置いてください。

- wpsearch/index.phpの33行目から38行目を使用するデータベースに合わせて修正してください。

- Webブラウザからwpsearch/index.phpにアクセスして、動作を確認してください。

【補足】

Wikipediaダンプデータの投入についてはWikipediaのダンプデータをDBに投入するも参照してください。

以上

]]> http://www.zubapita.jp/2009/03/30/wikipedia_search_api/feed/ 6 XAMPP for Mac OS X 1.0.0はどうなった？ http://www.zubapita.jp/2009/03/04/xampp_mac_1/ http://www.zubapita.jp/2009/03/04/xampp_mac_1/#comments Wed, 04 Mar 2009 06:41:46 +0000 tomoyun http://www.zubapita.jp/2009/03/04/xampp_mac_1/ 　前から気になっていたのだが、sourceforge.jpには、XAMPP for Mac OS X 1.0.0とか 1.0.0a upgradeというのがあがっている。去年の12月からだ。

ダウンロード – XAMPP – SourceForge.JP

　XAMPPというのは、Apache、PHP、MySQLなどWebアプリケーションを作るのに必要なサーバソフトウェアを、一括してインストールできるパッケージ。

Windows版とLinux版は、すでに正式版だが、MacOS X 版はまだβ段階だ。→XAMPP版Macのインストール方法など。

　だけど、ApacheFrendsの公式サイトでは、相変わらず0.7.4が最新版となっている。

apache friends – xampp for macos x

　公式掲示板でも、同じような質問があって、その回答が3月1日にされていた。

【XAMPP for Mac OS Xは死んだ？】

Apache Friends Forum • View topic – project XAMPP for Mac OS X dead? aufgegeben?

>I could see last weeks that there is a XAMPP Version 1.0.0 but i hear here that this version is not stable but this notice is 3 o 4 months ago.
Yes, 1.0.0 hase some very big problems and we’ve decided to hide these release. But we’re still working on a new XAMPP for Mac OS X release which fixes this issus

　「1.0.0はいくつかの大きなトラブルがあったので、我々はこのリリースを隠すことに決めた。しかし、我々は依然としてこの版を修正したXAMPP for Mac OS Xをリリースすべく努力をしている。」

　はー。先走って1.0.0にアップグレードしなくて良かった。(^_^;)
　正式版のリリースを気長に待とう。

]]> http://www.zubapita.jp/2009/03/04/xampp_mac_1/feed/ 0 WordPressでコンタクト用メールフォームを設置 http://www.zubapita.jp/2009/02/25/contact_php_ja/ http://www.zubapita.jp/2009/02/25/contact_php_ja/#comments Wed, 25 Feb 2009 01:19:40 +0000 tomoyun http://www.zubapita.jp/2009/02/25/contact_php_ja/ 　 今更気がついたのだけど、WordPressのテンプレートファイルの中に「Contact Page Template (contact.php)」というのがあった。

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

　でも、日本語やスパム対策機能に問題があったので、改造してみました。

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

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

screenshot_03.jpg

　こいつを使えば、簡単にメールフォームを設置できるのね。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

]]> http://www.zubapita.jp/2009/02/25/contact_php_ja/feed/ 0 2009年一発目は年表作成サイト「あのとシ！」 http://www.zubapita.jp/2009/01/08/start_anotoshi/ http://www.zubapita.jp/2009/01/08/start_anotoshi/#comments Thu, 08 Jan 2009 03:13:03 +0000 tomoyun http://www.zubapita.jp/2009/01/08/start_anotoshi/ 現状では年表を作って、それにみんなでコメントしながら、ワイワイと膨らませていく

「年表型掲示板＋Wiki」という感じの仕上がりです。

年表が更新されたり、コメントされると関係者にメールで通知されます。

]]> 　今年最初のWebサイト公開をお知らせします。

「万能式文化年表作成ツール　あのとシ！」

http://anotoshi.com/

　平たく言えば、年表作成＆共有を目的としたサイト。

昨年末にアスキー同窓生の小黒直昭さんとメールでやりとりしているうちに、彼がコンセプトを思いついて、アイデアをまとめました。

（サイト名やドメイン、キャッチコピーも。あとロゴも小黒さん）

screenshot_01.jpg

　年末年始は、仕事とプライベートでエラいこと忙しかったんですが、アイデアをアイデアのまま終わらせたくなかった。

こんなときのために「アイデアをすぐ形にできるツールとして」Quictyを作ったんじゃないか！

　というわけで、急ぎの仕事と毎年恒例のDVD＆年賀状作成の合間に、実働3.5日で初期バージョンを作りました。

現状では年表を作って、それにみんなでコメントしながら、ワイワイと膨らませていく

「年表型掲示板＋Wiki」という感じの仕上がりです。

年表が更新されたり、コメントされると関係者にメールで通知されます。

　今後は、小黒さんがいろいろアイデアをもっているので、どんどん盛り込んでいく予定。

とりあえず、遊んでみてください！＆アイデア募集。

　今年は、こういう風にアイデアとビジョンを持っている人から提案もらって、サイトを作っていきたいです。

「こんなサイトを一緒に作ってくれ！」

という、提案もお待ちしております。

P.S.

年賀状、自分のブンだけ、宛名書きが遅れて出せていませんでした。

本日発送します。

今年いただいた方、遅れて申しわけありません！

]]> http://www.zubapita.jp/2009/01/08/start_anotoshi/feed/ 2 ダッシュボードが使いやすくなったWordPress 2.7 http://www.zubapita.jp/2008/12/18/%e3%83%80%e3%83%83%e3%82%b7%e3%83%a5%e3%83%9c%e3%83%bc%e3%83%89%e3%81%8c%e4%bd%bf%e3%81%84%e3%82%84%e3%81%99%e3%81%8f%e3%81%aa%e3%81%a3%e3%81%9fwordpress-27/ http://www.zubapita.jp/2008/12/18/%e3%83%80%e3%83%83%e3%82%b7%e3%83%a5%e3%83%9c%e3%83%bc%e3%83%89%e3%81%8c%e4%bd%bf%e3%81%84%e3%82%84%e3%81%99%e3%81%8f%e3%81%aa%e3%81%a3%e3%81%9fwordpress-27/#comments Thu, 18 Dec 2008 08:49:25 +0000 tomoyun http://www.zubapita.jp/2008/12/18/%e3%83%80%e3%83%83%e3%82%b7%e3%83%a5%e3%83%9c%e3%83%bc%e3%83%89%e3%81%8c%e4%bd%bf%e3%81%84%e3%82%84%e3%81%99%e3%81%8f%e3%81%aa%e3%81%a3%e3%81%9fwordpress-27/ 　WordPress 2.7が出たので、当ブログもアップグレードした。管理画面のトップページである「ダッシュボード」が大幅に変更され、使い勝手が向上している。

screenshot_01.jpg

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

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

]]> http://www.zubapita.jp/2008/12/18/%e3%83%80%e3%83%83%e3%82%b7%e3%83%a5%e3%83%9c%e3%83%bc%e3%83%89%e3%81%8c%e4%bd%bf%e3%81%84%e3%82%84%e3%81%99%e3%81%8f%e3%81%aa%e3%81%a3%e3%81%9fwordpress-27/feed/ 0 QuictyアプリにAdsense広告を貼る方法 http://www.zubapita.jp/2008/12/05/quicty%e3%82%a2%e3%83%97%e3%83%aa%e3%81%abadsense%e5%ba%83%e5%91%8a%e3%82%92%e8%b2%bc%e3%82%8b%e6%96%b9%e6%b3%95/ http://www.zubapita.jp/2008/12/05/quicty%e3%82%a2%e3%83%97%e3%83%aa%e3%81%abadsense%e5%ba%83%e5%91%8a%e3%82%92%e8%b2%bc%e3%82%8b%e6%96%b9%e6%b3%95/#comments Thu, 04 Dec 2008 21:10:53 +0000 tomoyun http://www.zubapita.jp/2008/12/05/quicty%e3%82%a2%e3%83%97%e3%83%aa%e3%81%abadsense%e5%ba%83%e5%91%8a%e3%82%92%e8%b2%bc%e3%82%8b%e6%96%b9%e6%b3%95/ ランチブックにGogole adsense広告を貼ってみた。

不定期更新で内容もバラバラな当ブログのアドセンスが意外とクリックされていて、蓄積が70ドル以上になっていた。

ならば、「ターゲットが明確でアクセスも急成長中のランチブックなら、もっとクリックされるかも？」と思い、実験のつもりで貼ってみた。

screenshot_01.jpg

ところが、またもや落とし穴。Adsenseのコードを貼ると、ページが表示されないのだ。

ランチブックは、僕が作ったPHPフレームワークQuictyで四川赤熊猫さんが作ったサイトだ。

この問題は、現在のQuicty2.0以降を使用したすべてのサイトに共通するので、ここに解決法を書いておく。

原因

Quicty 2.0では、SEO対策、アクセシビリティの向上、レイアウト変更の柔軟性確保などの理由から、サイトのHTMLにはレイアウト情報が含まれていない。

ランチブックの場合、右側にメニューがある横幅固定の2カラムのレイアウトで表示されるが、このレイアウトを構成するためのタグは、HTMLのソースには含まれていないのだ。

どうやって、右カラムレイアウトを表示しているのか？　HTMLソースがWebブラウザに読み込まれたあと、JavaScript（というかJQuery）でレイアウト用のdivタグを動的に追加したり、入れ子構造を作りだすことで、レイアウトを構成しているのだ。

だから、JavaScriptに対応しない古いブラウザやテキストブラウザでは、2カラムではなく単なる1カラムのページに表示されてしまう。その代わり、GoogleやYahoo!のロボットから見ると、読みやすいシンプルなHTMLになっている。

ただ、Adsenseのように、JavaScriptでiframeを生成してその中にコンテンツを表示するタイプの広告を貼り込んだ場合、divタグといっしょにscriptタグまで移動させてしまうと、動作エラーが発生してしまうようだ。

対策

(1) Adsense広告のコードをJQueryによるレイアウト操作に影響を受けない、HTMLの一番最後に貼り込む。

(2) Adsense広告のコードがiframeを生成し終わったあとに、iframeだけ必要な場所へ移動させるJQueryのコードを追加する。

実際には、テンプレートのview/includes/common/footer.incの中に、以下のようにコードを追記した。

<div id=”adsense-source”>

<script type=”text/javascript”><!–

google_ad_client = “pub-9765898779262483″;
google_ad_slot = “5291421418″;
google_ad_width = 468;
google_ad_height = 60;
//–>

</script>

<script type=”text/javascript”

src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>

</script>

<script type=”text/javascript”><!–

$(‘<div id=”adsense”></div>’)

.append($(‘#adsense-source>ins’))
.appendTo($(‘#site-id’).get(0));

$(‘#site-id’).css(‘height’,’160px’);

//–>

</script>

</div>

基本的には、(1) <div id=”adsense-source”>〜</div>の中に、Adsenseのコードを貼り込む。(2) 貼り込んだそのあとに、ins（内部にadsenseのiframeを含んでいる）を移動するJQueryのコードを書く。ここでは、ページのヘッダバナー部である<div id=”site-id”></div>の最後に広告のコードを追加する

$(‘<div id=”adsense”></div>’)

.append($(‘#adsense-source>ins’))

.appendTo($(‘#site-id’).get(0));

というコードを書いた。

iframeを含むINSタグを<div id=”adsense”></div>の中に入れ、その#adsenseのdivを#site-idのdivの中に移動させている。※2009年2月現在、adsenseのiframeはINSタグの中に入るようになったので改訂。以前は「.append($(‘#adsense-source iframe’))〜」と書いていた。今回、#adsense-source>insとしたのは、insタグの中にまたinsタグが含まれているので、adsense-source直下のinsタグだけを指定するため。

わざわざ、新しいdivの中にinsを入れたのは、あとでCSSによる設定をやりやすくするためだ。追加したCSSは以下の通り。

#adsense { text-align: center; margin-bottom: 10px;}
#adsense iframe { margin: 10px 0 0 0; padding: 0;}

]]> http://www.zubapita.jp/2008/12/05/quicty%e3%82%a2%e3%83%97%e3%83%aa%e3%81%abadsense%e5%ba%83%e5%91%8a%e3%82%92%e8%b2%bc%e3%82%8b%e6%96%b9%e6%b3%95/feed/ 0