透過pngをIEでも正常に表示させる

透過pngをIEでも正常に表示させる簡単な方法↓。


PNG Behavior (WebFX)

素直にgifやpng8に書き出せばいい、という場合もあるけど、書き出すときになめらかな曲線部分がギザギザになってしまうことが多いので、オリジナルのpngを表示できればベスト、と思って探したところ上記の「PNG Behavior」にたどりついた。

たぶんこれが一番簡単かな。

bloggerサイドバーに記事に関連するはてなブックマークを表示する（テンプレートソース有り）。

bloggerサイドバーに記事に関連するはてなブックマークを表示できたらいいなと思い、テンプレートいじり倒して無理やり80%ぐらい達成。

トライしたのは「関連するマイはてなブックマーク」と「関連するはてな注目エントリー」のふたつ。

個別の記事ページではその記事についてるラベルと同じタグがついてる「自分のはてなブックマーク最新3件」と「はてなの注目エントリー最新3件」を表示、トップやカテゴリーページでは表示されているすべての記事についてるタグに関して「自分のはてなブックマーク最新3件」と「はてなの注目エントリー最新3件」を表示するようにしてみた。


以下のようなページを読んでなんとなくインスピレーションを得て、

JSON feed を利用してエントリーに関連する del.icio.us ブックマークを表示 - 2xup.org
小粋空間: RSS Feed（フィード）を表示する

下のページで紹介されているfeed2JSを利用して実現してます。

クリボウの Blogger Tips: Feed2JS の使い方

一見成功しているようで実はマイはてなブックマークのほうは日本語ラベルのものはきちんと処理されていなくて単純に自分のブックマークの最新3件が表示されてしまっている、なぜだろう？

おそらくfeedURLに含まれてる日本語がURLエンコードされてないのが原因だとは思うのだけど、だとすれば逆に注目エントリーのほうは日本語ラベルでもきちんと表示されているのが不思議。。

この辺が解決できればテンプレートソースを公開できるかなあ。。


追記:2007/5/19
マイはてなブックマークのほうで日本語ラベルのものがうまく処理されない問題は未解決ですがとりあえずテンプレートソースを公開します。
ただ、個々が使用しているテンプレートに依るところもあると思うので必ずしも単純なコピペではうまくいかないことも予想されるので軽くいくつかポイントを解説。


まず今回テンプレートをいじる際に参考にしたのは以下のページ

Blogger Help : Page Elements Tags for Layouts
Blogger Help : Widget Tags for Layouts
Blogger Help : Layouts Data Tags

やり方の発想としては簡単で、

「はてなブックマークの各フィードはURLの中にタグ名を入れてしぼりこむことができるので、
Feed2JSのフィードパスの中にどうにかbloggerのテンプレートタグから各記事についてるラベルを抽出して入れ込む」

というものです。

でいろいろと研究したところ、

・記事についているラベルの情報を取得できるウィジェットはBlog Postsウィジェットしかない（ウィジェットのtypeをBlogにする）。

のでtypeがBlogのウィジェットを作成することになります。


さらに注意点としては

・ブラウザ上でテンプレートをいじる場合は、挿入したい任意の位置にイチからウィジェットのコードを記述する。簡易テンプレート編集画面で追加した別のtypeのウィジェットのコードを雛形にウィジェットタイプを書き換えて作業すると、保存したあとにウィジェットtypeが強制的に元のtypeにもどされてしまい、うまくいかない。
・イチからtypeがBlogのウィジェットを記述して保存後、もう一度テンプレートソースをのぞくと、本当は必要のない大量のコード（Blogタイプのウィジェットが本来持つべき要素が記述されていると思われる）が追加されているが表示はうまくいくので気にしない（だいぶソースが見づらいですが・・）。

※このあたりはもしかしたらテンプレートを一度ダウンロードして編集後にアップロードすればあまり気にならない問題かもしれません。


で、以下が今回のテンプレートソースです。

「関連するマイはてなブックマーク（ただし日本語ラベルはうまくいかない）」
<b:widget id='Blog3' locked='false' title='ブログの投稿' type='Blog'>
<b:includable id='main'>
  <h2>関連するマイはてなブックマーク</h2>
  <div class='widget-content'>
<b:loop values='data:posts' var='post'>
    
    <b:loop values='data:post.labels' var='label'>
      
        <h3><a expr:href='"http://b.hatena.ne.jp/kemworld/" + data:label.name + "/"'><data:label.name/></a></h3>        
      
<script expr:src='"http://feed2js.org//feed2js.php?src=http%3A%2F%2Fb.hatena.ne.jp%2Fkemworld%2Frss%3Ftag%3D" + data:label.name + "&amp;num=3&amp;targ=y&amp;utf=y&amp;css=bmfeed&amp;html=p"' language='JavaScript' type='text/javascript'/>

<noscript>
<a expr:href='"http://feed2js.org//feed2js.php?src=http%3A%2F%2Fb.hatena.ne.jp%2Fkemworld%2Frss%3Ftag%3D" + data:label.name + "&amp;num=3&amp;targ=y&amp;utf=y&amp;css=bmfeed&amp;html=y"'>View RSS feed</a>
</noscript>

    </b:loop>
    
</b:loop>
</b:widget>

「関連するはてな注目エントリー」
<b:widget id='Blog2' locked='false' title='ブログの投稿' type='Blog'>
<b:includable id='main'>
  <h2>関連するはてな注目エントリー</h2>
  <div class='widget-content'>
<b:loop values='data:posts' var='post'>
    
    <b:loop values='data:post.labels' var='label'>
      
        <h3><a expr:href='"http://b.hatena.ne.jp/t/" + data:label.name + "?sort=count"'><data:label.name/></a></h3>        
      
<script expr:src='"http://feed2js.org//feed2js.php?src=http%3A%2F%2Fb.hatena.ne.jp%2Ft%2F" + data:label.name + "%3Fmode%3Drss%26sort%3Dhot%26threshold%3D3&amp;num=3&amp;targ=y&amp;utf=y&amp;css=bmfeed&amp;html=p"' language='JavaScript' type='text/javascript'/>

<noscript>
<a expr:href='"http://feed2js.org//feed2js.php?src=http%3A%2F%2Fb.hatena.ne.jp%2Ft%2F" + data:label.name + "%3Fmode%3Drss%26sort%3Dhot%26threshold%3D3&amp;num=3&amp;targ=y&amp;utf=y&amp;css=bmfeed&amp;html=y"'>View RSS feed</a>
</noscript>

    </b:loop>
    
</b:loop>
</b:widget>

上でも書いているように、「関連するマイはてなブックマーク」のほうは日本語ラベルがうまく処理されず、単に自分の最新ブックマークが表示されてしまいます。
どなたかこの問題解決されてる方・してみた方、いらしたらぜひコメント等で教えていただけませんでしょうか～♪

「関連するはてな注目エントリー」のほうは日本語ラベルも通ってきちんと表示されます。
フィードURLをちょっといじれば表示件数も調整できるし、注目エントリーだけじゃなくて人気エントリーを表示することもできます♪

hello worldプログラムだけでもアウトプットしてみる

神童: 形から入るプログラミング修行
神童: 車輪を再発明してプログラミング修行

上記をふまえて、プログラミング修行に着手。

で、colinuxにputtyでログインしてemacs とsubversionを使ってファイル編集・管理を行う、というまったくなれない作業プロセスでどうにかhello worldプログラムまで完成。


zshを使ってemacsとsubversionをCUI環境で操作する、ということに関して習熟するのにかなり手間取り、今日はここまで。

車輪を再発明してプログラミング修行

オブジェクト指向プログラミングが一般的になり、再利用性の高いコード、たくさんの便利なクラスライブラリ、などがあってこれらを活用してなるべく車輪の再発明みたいなことはしないのがスマートなプログラミング、というようなことをどこかで読みましたが、

あえて、そういうものには目をくれないで、全部自分で一からコードを書いてみるのがプログラミングセンス・スキルをレベルアップさせる近道のような気がなんとなくします。

ので、プログラミングセンス・スキルをレベルアップさせるために再発明する車輪を考えて羅列してみようかと。

ちなみにここではレベル0の初心者がPHPが使えるWEBプログラマ、みたいのを目指しているということを前提としてます。


「プログラミングセンス・スキルをレベルアップさせるために再発明する車輪リスト1」
・hello world（ただhell worldと表示するだけのプログラム）
・掲示板（テキストファイルで書き込みデータを管理するのとDBを使うのと両方）
・問い合わせフォーム（メール送信の仕方を覚えたい）


これを関数リファレンスみたいな本以外は見ないで一から自分で考えて作る、というのをやったらレベル5ぐらいになれるのでは。
それから

「プログラミングセンス・スキルをレベルアップさせるために再発明する車輪リスト2」
・RSS取得・表示プログラム（XMLやRSSの取扱方を身につけたい）
・AMAZON書籍情報表示プログラム（なにかひとつでもwebサービスを使用したプログラムがしてみたい）


こんなのもやってみたらレベル10ぐらい？
たぶんここまで自分でがんばって作ったものはきっとセキュリティ的には穴だらけなので、


Amazon.co.jp： PHPサイバーテロの技法―攻撃と防御の実際: 本: GIJOE

このあたりの本を読みながら自分のプログラムの穴をチェック・修正する。


これでレベル15ぐらい？


とりあえずたったこれだけでも結構大変だと思うのでまずはこの辺で。

形から入るプログラミング修行

何事もまず形から、ということで一流（と思われる）プログラマの人たちの開発環境をまねてみる、というのはどうだろうか。

とりあえずできるだけお金はかけない、という前提でPHPによるwebアプリケーション開発がスラスラできるようになるのを目標に。


とりあえず以下3点を実行してみる。

『形から入るプログラミング環境のポイント』
・linuxのシェルで作業する（CUI環境）。
・エディタはemacsを使う（vimも使うという説あり）。
・ソースファイルはsubversionでバージョン管理をする。

上記3点を実現するために

・windowsXPのマシンしかないのでcolinuxを入れて自分のWindowsマシンの中にlinux環境を構築する。
・colinuxにputtyでログインして作業できるようにする。
・colinuxにはdebianをインストールして、zsh apache php mysql phpmyadmin svn emacsなどが使えるようにして、sambaで自分のユーザのホームディレクトリを（Windows側と）ファイル共有できるようにする。


ここまで準備ができたら具体的な開発イメージとしては

「puttyでcolinuxにログインしてシェルはzshを使用、svnでファイルをチェックアウトしてemacsで編集、windows側のfirefoxで実行確認、よければコミットする」

この繰り返し。


Windows側のデスクトップは開発に集中できるように一切何もない状態にして下のタスクバーも隠す。真っ白なデスクトップにputtyのウィンドウとfirefoxのウィンドウだけがある状態、これを基本にする。


こんな感じがwebプログラミングの一流の開発環境、みたいな気がする。

また、一流の開発スタイルとしては

・とりあえずすぐに動くものを作る。
・自分のブログなどでもすぐにアウトプットをする。

など。