地上に降りた最後の忍者

今回はgoogle検索窓のカスタムの仕方です。

上記のサイトを見ていただくと
右上にgoogleの検索ウィンドウがあるの、おわかりでしょうか。
こちらをサイト内に入れるにはどうすればいいのか。

まず、
http://services.google.com/freesearch/ja
上記URLからgoogleの専用ページへ。


こんな画面。

適宜テキストを入力していき、「送信」を押すとソースが吐き出されます。
それをHTML内にぺっと貼り付けるだけ！

おお〜っ簡単だ〜っ
今回もほぼ備忘録代わりですが、参考になれば幸い！

• WEB関連 |
• URL |

今回、録音されてきたナレーションWAVファイルを分割して
mp3で書き出すという作業が発生したので、
備忘録代わりにここに記載しておきます。

まずは、音声編集。
ナレーションが入ったWAVファイルをいじれるように
フリーソフトのSoundEngineを使用しました。
http://www.cycleof5th.com/products/soundengine/

インストールして、早速WAVファイルを開いてみると


こんな感じです。

編集は本当に簡単で、
波がついている部分が音声が入っている部分なので
拡大しつつ、いらない部分を選択、そしてdeleteボタンを押すだけ！
フェードイン・フェードアウトをしたい場合は、
拡大しつつ、その効果を得たい場所を選択します。
選択したら右クリックで「フェード-フェードイン／フェードアウト」を選ぶだけです。

で、終了したら保存するのですが、
今回はFLASHに入れるためにmp3にしておく必要がありました。

http://gokusensoft.blog48.fc2.com/blog-entry-77.html

その方法が上記に掲載されています。

必要になる、「VBMP3.dll」と「GOGO.DLL」というファイル、
http://www.src.jpn.org/kei/download/index.html
ココにまとめてアップされていました。感謝。
「MP3再生用ライブラリVBMP3.dllのダウンロード」というところからDLできます。

落としたら、その２つのファイルを
「C:\WINDOWS\system32」に入れ込むだけ！

すると、SoundEngineの「別名で保存」ダイアログでmp3を選択できるようになりました！
今日も巨匠に感謝・・・

• WEB関連 |
• URL |

ケータイとPCサイトの連動、
こんなところまでもうできちゃうらしいです。

GYOROL
http://gyorol.bascule.co.jp/
↑上記サイトへ行っていただいて、まずバーコードをケータイで読み取り。

ケータイがリモコンとなり、
PCサイト上で釣りを楽しめる・・・！
なんと画期的！さすがバスキュール。。。
アイディア自体、思うことはあったかもしれませんが、
それを実現しちゃうところがすごい。実現できる時代になったのもすごい。

たぶん、この技術を応用してできたのが、
電通インターンシップコンテンツ「Brain Bomber」
http://cr-juku.jp/2008/

iphoneも出たことですし、、
なんせ早いこの業界。。常に精進していきたいところです

• アイディア |
• URL |

とうとうでました、透過png！
サイト上で透過pngを使用することになったのですが、
IE6以下ではまだ対応してない（透過すべき部分が灰色に表示されます）。

これを解決するのが
iepngfix.js

色々と見た結果、この方法が一番簡単でわかりやすかったので、
ご紹介します。

まず、上記のリンクされているサイトから
iepngfix.jsをダウンロード（文章の真ん中ぐらいにリンクされてます）

１．HTMLファイル

を追加。

2.CSSファイル
* html .iepngfix {
behavior: expression(IEPNGFIX.fix(this));
}
を追加。

3.透過させたいpng画像
「class="iepngfix"」を追加。


以上でpngファイルをIE6でも透過させることができました！

この他にも色々と方法はあるので、
またチャレンジしたら記載したいと思います。

• AJAX・JavaScript |
• URL |

ちょっとサーバを触る雑務があって、
ふと気になったこと。。。
あるはずの「.htaccess」ファイルが見えない・・・？
あれ、サーバ担当のヒト入れ忘れたのかなぁと言うてみると
「設定で.htaccess見えんことあるで？」
とのこと


調べてたところ、以下の設定で見えるようになるらしい！
※FTPクライアントは「FFFTP」使用

まず、接続してみて
「表示」−「．で始まるファイルを表示」にチェックが入っているか確認。

それで、見えていない場合↓
「設定変更」−「高度」−「LISTコマンドでファイル一覧を取得」のチェックを外す。
その際、「NLSTファイル名／オプション」は「-alL」にしておく。


すると、なんなく見えました！
ほ〜〜勉強になりましたっ

• WEB関連 |
• URL |

先日、こちらで紹介したclearfix。
いつも使用していたソースを
解説付きでご紹介したいと思います。

.clearfix:after{　　　　　・・・IE以外のブラウザ向け
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

.clearfix{
display:inline-block; 　・・・IE7とMac版IE5
}

/* Hides from IE-mac \*/
* html .clearfix{ height:1%; }　　　　・・・Win版IE6
.clearfix{ display:block; }　　　　 ・・・Mac版IE5以外
/* End hide from IE-mac */


と、なっております。

HTMLソース上で「div class="clearfix"」とつけて使うのもいいのですが、
「HTML上では構造以外のことを書かない」というルールに反してしまいますよね。
そのため

.wrap:after{ /* for New Browser */
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.wrap.clearfix{
display:inline-block;
}
/* Hides from IE-mac \*/
* html .wrap{ height:1%; }
.wrap{ display:block; }
/* End hide from IE-mac */


という風にCSSファイルの中で、
クラスやID名で置き換えてしまうと美しいし理想です。

有言実行！がんばりますじゃ

• CSS |
• URL |

CSSハックとは

Firefox、IE7、IE6、opera、safariなど様々なブラウザの
CSSの解釈の違いから起こる不具合（バグ）を解決する技法のこと。
※ブラウザの不備をついて解決するってのもミソかなっ

でも、後々ブラウザたちのCSSの解釈は統一されていくでしょうし、
なるべく使わないか、どうしても使う場合は修正・更新する際にわかりやすい
ハックを使いたいところ。

現時点で必要な（私が使っているものですが）ハックについて
まとめたいと思います。

IE6以前・MacIE5対象（スターハック）
* html .example{
width:600px;
}

IE7対象
*:first-child + html .example{
width:600px;
}


最近のブラウザで使えそうなCSSハック
そろそろCSSハックの良し悪しについて考えてみる（書式編）

他、必要なハックについては
上記サイトが丁寧に説明をされていますので
参考にしてみてはいかがでしょうか。


スターハック、、、
名前がかわいくて忍者は好きですが

• CSS |
• URL |

今までなんとなく定義してきたXHTML。
自分の知識として確定するために、ここに記載します。

まず、宣言のお話から。

XML宣言をつけると・・・
IE6・Opera7.0で後方互換モードに。
Mac版IE4.5以下のverでソースコードがそのまま表示される。
※後方互換モード
Web標準の仕様に準拠していない独自解釈のモード

現段階ではXML宣言はつけない方が無難。


TransitionalとStrict
HTML4.0、HTML4.01、XHTML1.0には
「Strict」「Transitional」「Frameset」、３種類の文法が用意されている。

HTML4.0やXHTML1.0が勧告された頃、
その当時のブラウザでフルCSSレイアウトはかなり不可能だった。
ブラウザがフルCSSを十分にサポートするまでに
使える文法として「Transitional」と「Frameset」が用意されたらしい。

今もまだ、十分と言える状態ではないブラウザ。
なので、制作中は「Strict」で文法チェックをしつつ、
公開時には「Transitional」で。というのがオススメらしい！


ずっと、何気なく使っていた「Transitional」
「Strict」でどんなエラーが出るか、興味津々！

• XHTML |
• URL |

先日掲載しましたminishowcase

パスワード設定ができるとのことなので
そちらも記載。
（hkm姉、教えていただいてThanks！）

先日、作成したデータの「galleries／フォルダ名（前回はmwNinja）」
の中に空のpassword.phpを設置。
中身にパスワードにする文字列を記述。
それをアップするだけ！

おおー簡単ですねぇ＠＠！

サンプルはこちら

左側のメニューにロックアイコンがついてますね！
そこをクリックするとパスワードを求めるダイアログが出てきますので
「ninja」と打ってみてください！
写真たち見れましたか？

ほんま、便利なツールです。。。
次はがしがしカスタマイズしようかしら

• AJAX・JavaScript |
• URL |

先日、大人数での飲み会がありまして
買ったばかりの一眼レフでばしばし写真を撮りまくったわけですが、
みんなに見せてこそ、撮った甲斐があるってもので。

簡単にフォトギャラリーみたいなのを作って
みんなにURLを配れないかなぁと思っていたのです。
ということで、見つけましたよ！

minishowcase
デモはこちら　ちょっとお姉ちゃんの写真が多いですけど。。

これ、実はサムネイルもAJAXで作ってくれていて、
私がすることはminishowcaseをセットアップして、
あるディレクトリにばんばん画像をアップしていくだけ！
簡単です！

簡単とはいえ一応設定はするので、手順をご紹介します！

1.ダウンロード
上記サイトの右側ボタンから最新版をDL。
（現verではv09b136）

2.展開後、settings.phpを設定
「config」というフォルダの中の「settings.php」を開く。

60行目　$settings['minishowcase_url'] = "ココに設置するURL";

のみ！あとは細かい設定↓（しなくても動きます）
117行目　$settings['max_thumbnails'] = 横項目の数;
126行目　$settings['max_thumbnail_rows'] = 縦項目の数;
292行目　$settings['preview_mode'] = 2;
0or1or2から選択可。2にするとThickBoxでプレビューされます。

これで、保存。
まるごとサーバにアップしましょう！

3.「galleries」の中にフォルダを作成、画像をアップ。
フォルダの名前がそのまま
右に出てくるメニュー名になります（要するにカテゴリわけができる！）
そして、そのフォルダにばんばん画像をアップ！！

4.パーミッションの変更
cache/ディレクトリのパーミッションを「777」に変更してください！

すると、ギャラリーサイトの出来上がり♪
サンプルサイトはこちら
※左上の「mwNinja」ってリンクを押してください。

※もしサムネール画像が表示されない方は
238行目の「$settings['create_thumbnails'] = ココをfalseにしてみてください;」

これは便利〜〜。
ただ、1Pにあまり数多くのせちゃうと（横項目と縦項目を増やすと）
サイトが重くなりやすのでお気をつけて

追記：
といっても、まとめて誰かに写真をあげたいトキはこの方法はベストじゃないわけで。
http://firestorage.jp/
オンラインストレージサービスをご紹介いただきました
最大1ファイル2GBまで！！
無料でそこまでしていただいていいんですか・・・！
熱いサービス発見です

• AJAX・JavaScript |
• URL |