いば日記

不定期更新の日記

[技術メモ] ホームページでmp3を再生する

2009-12-03 12:22:31 | 技術メモ

いろいろな方法があるらしいですが、環境に依存しない&シンプルってことでこの方法が気に入りました。
プレイヤー(swf)と、音声ファイル(mp3)を用意して、html に以下の埋込みコードを追記するだけ。
(青文字部分は、適宜変更してください)

<object type="application/x-shockwave-flash" data="player_mp3_mini.swf" width="200" height="20">
<param name="movie" value="player_mp3_mini.swf" />
<param name="bgcolor" value="#60A20C" />
<param name="FlashVars" value="mp3=voice/01.mp3" />
</object>

■MP3 Player 公式(プレイヤーがダウンロードできます)
http://flash-mp3-player.net/


[技術メモ] PHP を HTML に埋め込む時は、BOMに注意しないとレイアウトが崩れる

2009-11-26 19:50:42 | 技術メモ
sony

PHP を HTML に記述する時の注意点です。はまりました。

<html>
<body>
<?php
    require(/lib/mylib.php);
    get_header();  // ★この行を追加!
    get_navi_menu();
    get_contents();

?>

</body>
</html>

というUFT8で記述されたHTMLがあるとします。

元々はHTMLタグがあった部分をPHPで部品化しようと、★のようにした時、上画像の「ここの幅」等が伸びてしまう事があります。PHPのタグ間に含まれる改行や空白はブラウザーに表示されないはずですが、何故でしょうか?

答えは、BOM(ByteOrderMarkというバイナリーデータ)です。
UTF-8には、BOM有り(UTF-8)とBOM無し(UTF-8N)があって、上記の場合だと、mylib.php にBOMがあると、HTMLのレイアウトが意図しない感じで崩れたりします。

HTML や PHP を UTF8 で書く時は、UTF8N で書きましょう。

■UTF-8 と UTF-8N の違い
http://d.hatena.ne.jp/simiken/20080516/1210899498


[技術メモ] PATH_INFOを使用した静的アドレス変換(SEO)

2009-09-24 17:56:51 | 技術メモ

以下の様に、アドレスを変換するための手順です(備忘録として)。
apacheのPathInfoという機能を利用しています。
メリットはSEOでクロール・評価されやすくなる点です。

変換前:http://mysite.jp/disp_data.php?arg1=iba&arg2=ps3&arg3=game
返還後:http://mysite.jp/disp_data/iba/ps3/game

以下、手順

  1. .htaccess に以下の様に追記(httpd.confでもいい)

    ## PathInfoを有効
    AcceptPathInfo On

    ## 指定したファイル名のファイル(下例だとmyPHP)は強制的にPHPとして処理する
    <FilesMatch “^myPHP$”>
        ForceType application/x-httpd-php
    </FilesMatch>

  2. php側に以下の様に処理を追加
    $query = getenv ("PATH_INFO");
    $var = split ("[/\.]", $query);     // パターンは「”[/¥.]”」
    $arg1 = htmlspecialchars($var[1]);    // 直でもいいけどセキュリティのためエスケープ
    $arg2 = htmlspecialchars($var[2]);    // 直でもいいけどセキュリティのためエスケープ
    $arg3 = htmlspecialchars($var[3]);     // 直でもいいけどセキュリティのためエスケープ

  3. php のファイル名を myPHP に変更する(拡張子.phpを削除)

[技術メモ] さくらインターネットで、拡張子htmlのファイルをPHPで動作させる方法

2009-03-07 00:53:38 | 技術メモ

さくらインターネットで、拡張子html のファイルを PHP で動作させる方法です。

結構方々で悩んでる人がいるみたいですね。

 

(1)ターミナルログインして、以下のコマンドを実行。

 

$ cp /usr/local/php-5.2.8/bin/php-cgi /home/USERNAME/www/php.cgi

 

※PHPのバージョンは、自分の環境にあわせること(Ver.4を使っているとか、PHPのVer.が変更されていたら、5.2.8 の部分を読み替える)

 

USERNAMEの部分は自分のユーザー名に置き換えること

 

(2)対象のhtml ファイルがあるディレクトリに.htaccessという名前のファイルを作成し、中身を以下のように。

 

DirectoryIndex index.html index.php
Action myphp-script /php.cgi
AddHandler myphp-script .html .php

 

★注意点

ターミナルソフトを使わずに、FTP等で代用しようとすると、改行文字の問題でうまくいかなくなる(ServerInternalError等)ので、必ず上記手順を遵守すること。


[技術メモ] WEBサイトの横ずれ対策

2009-01-13 17:59:15 | 技術メモ
HTMLを書いていると、全く同様のHTMLなのに、ページによって表示が左右にずれる事がありますよね。

あれの原因は、スクロールバーが表示されたりされなかったりして、サイトのセンタリングがずれてしまうからという事が最近わかりました。

ブラウザによっては、常時スクロールバーが表示されるものもある(IE7)のですが、サイト側で対応したいです(どんなブラウザで見てもOKなように)よね。

■解決法
 以下のCSSを記述すればOKです。要するに縦をブラウザ表示領域の100%+1ピクセルにするということ。これでどんなブラウザでも必ずスクロールバーが出てくれて、ページによるズレがなくなります。

html
{
  margin-bottom:1px;
  height:100%;
}




[技術メモ] SEOに有効なリダイレクト方法

2008-12-19 13:20:26 | 技術メモ
SEO的には、移動前のHTMLページがたくさんのリンクを張られていた場合、リダイレクトする必要があります。

SEOに最適なリダイレクトの方法は永続的な移転を示すリダイレクト(301)を設定することらしいです。

なんか難しく聞こえますが、結局は以下の作業を行うだけでした。

.htaccess
というテキストファイルを用意して、
Redirect permanent /old/old_iba.html http://iba-nikki.jp/new.html
※移転先のURLはhttp://から始まるフルURLを記入しないといけないらしい


.htaccessを使えるようにするには、http.confをいじればOK


[技術メモ] flashの画質劣化を極力抑える方法

2007-10-17 21:50:47 | 技術メモ
■flashサンプル
http://flash-bucks.com/

flashとはWEBサイト上でアニメーションするあれですね。
あれを、作成するとき、画質が劣化してしまう対策法です。

1)[ファイル]-[パブリッシュ設定]-[flash]にある
画質のバーを「綺麗」側にスライド

2)画像を読み込んだ直後に、メニューから[ウィンドウ]-[ライブラリ]を選択し、出てきたダイアログで画像を右クリック>プロパティで、出てきたダイアログで画像の形式をJPGからPNGに変更

[技術メモ] 無料のアクセス解析ツール「mogura」

2007-09-24 23:44:48 | 技術メモ


業務用の備忘録です。

自分のサイトに設置できる、お薦めアクセス解析ツールです。

■特徴は、
 ・PHPとMySQLが必要
 ・無料!
 ・無料なうえに、自己アピールのアイコン(例:)が表示されないので、設置がばれない
 ・解析結果表示画面が見やすい
 ・設置が超簡単

■さくらインターネットに設置する際の注意点
 ・設定ファイルのhttp://localhost/部分を生アドレスで指定する必要有り
  (DBサーバーとWEBサーバーが別マシンなので)
 ・javascript版の設置はできない可能性あり。PHPならうまくいく
 ・関連づけられたドメインやサブドメインを指定できないので、
  ○○○.sakura.ne.jpという生アドレスを設定ファイルおよび埋め込み用
  JavaScriptに記述する必要あり

■mogura公式ページ
 http://fmono.sub.jp/

※ちなみに、いば日記では、アクセス解析してません。
 (gooブログ無料版の機能として、何人が見たか、位はわかりますが)

[技術メモ] SEO対策その1 サイトマップをGoogleSitemapに登録

2007-09-23 14:56:05 | 技術メモ
業務用の備忘録です。

■解説
 サイト作成後にまず最初にGoogleSitemapにsitemap.xmlを登録する。
 すると、クロールを待たずに能動的にインデックス登録される。

■手順
1)http://www.sitemapdoc.com/でsitemap.xmlを自動生成する。
  1-1.上記URLで、SEO対策対象URLを入力しCreateMapボタンを押し、待つ。
  1-2.結果が出たら、GoogleSiteMapボタンを押す(エラーの場合は対処)
  1-3.XML文が表示されるので、ローカルテキストにコピペし、UTF8で保存

2)sitemap.xmlをアップロード
  SEO対策対象URL直下にsitemap.xmlをbinaryモードでアップロード

3)GoogleWebMasterに、SEO対策対象URLを登録
  GoogleWebMasterにログインし(あらかじめアカウントは作成)、
  サイトマップへ行き、SEO対策対象URLを登録する。

4)GoogleWebMasterでサイトマップを登録
  サイトマップ>サイトマップを登録で
  http://www.hogehoge.co.jp/sitemap.xml
  等と登録する


以上

[技術メモ] HTMLおよび画像のレイヤー表示

2007-09-12 10:51:32 | 技術メモ
備忘録として。

ホームページを格好良く見せるテクニックです。

=============================================
画像をレイヤー表示させる
=============================================
■使用ライブラリ
 lightbox
■メモ
 これが業界標準ライブラリ。
他にも似ている改良版のがたくさん出ているが、これが一番使いやすい。
1)解凍したものを呼び出し側HTMLと同じ場所に置く
2)lightbox.jsとlightbox.cssを呼び出し側HTMLに読み込ませる
3)呼び出し側HTMLで<a rel=”lightbox”>とする
これだけ。

■サンプル

■lightboxダウンロード
 http://www.huddletogether.com/projects/lightbox/

=============================================
HTMLをレイヤー表示させる
=============================================
■使用ライブラリ
 ibox
■メモ
これが一番シンプル。これ以外のツールは複雑だし、他のライブラリが必要だし、まともに動かなかった。

1)ibox.jsとibox.cssを呼び出し側HTMLのフォルダにjs,cssフォルダを掘っていれる
2)js/ibox.jsとcss/ibox.cssを呼び出し側HTMLに読み込ませる
3)呼び出し側で<a rel=”ibox”>とする
以上、簡単!

※呼ばれるHTMLはutf8で作成する必要有り
※EUC、SJISでは真っ白になり表示されない

■サンプル

■ibox解説(マイコミジャーナル)
 http://journal.mycom.co.jp/articles/2007/09/11/ibox/index.html
■iboxダウンロード
 http://www.ibegin.com/blog/p_ibox.html
※上記URLへ行き、downloadで検索すればダウンロードリンク有り