messaliberty

hulor と開発チームの最新情報

Archive for the ‘techtips’ Category

WordPressで構築したサイトでFlashコンテンツを表示させる

1月 25th, 2010 投稿者: take

全く基本的なことで恐縮ですが、Web制作においてFlashコンテンツを表示したいということがあると思います。

今回はWordPressで構築したサイト内でFlashコンテンツを表示させる際、ブラウザ間で不具合なく表示させるのにしばし時間を要してしまったこともあり、またまたメモ代わりとしてポストさせていただきます。

当初は普通に書き出されたソースをコピペで終了だと思っていたのですが、IEで表示されなかったりembedタグは非推奨であったりと足止めを食らってしまいました。

WordPress上でflashコンテンツを表示させる

WordPress上でflashコンテンツを表示させる

表示する2つの方法

1. plugin「WP-SWFObject」を使用する

そもそもこれが一番簡単だったのですが、この方法を敢えて取らなかったために時間を要してしまいました。逆に言うと最近はすぐにpluginに逃げてしまいます。

「WP-SWFObject」というプラグインをインストールし、有効化します。

そして、以下のソースを埋め込むだけです。

[SWF]表示したいswfファイルの絶対パス,横幅,縦幅[/SWF]

以上でIE7,IE6,Firefoxにて表示されました。

2. objectタグだけを利用して表示する

embedタグを使用するとXHTMLではembedタグは定義されていないと言われて怒られます。ということで、objectタグだけで表示しないといけません。

表示させるのに必要なソースは、

<object data="表示したいswfファイルの絶対パス" type="application/x-shockwave-flash" width="横幅" height="縦幅"><param name="movie" value="表示したいswfファイルの絶対パス"></param><param name="play" value="true"></param><param name="loop" value="true"></param></object>

でOKです。

こちらもIE7,IE6,Firefoxにて表示されました。

まずは表示させるということで今回はこれで良しとします。

svn の repository を git の repository に変換する方法

12月 28th, 2009 投稿者: ice

svn の repository を git の repository に変換するには、git-svn を使用します。
git-svn は、svn の repository を git コマンドで直接さわれる様にしてくれます。

Ubuntu の場合、git と git-svn のインストールは以下のコマンドで

% sudo aptitude install git-core git-svn

以下、変換前の svn repository を svn-repo、変換後の git repository を git-repo と表記します。

流れとしては、以下の感じ
1. svn-repo のログのユーザー名を、git 形式に変換するための authors.txt を作成
2. ローカルにカラの git-repo を作成
3. svn-repo を git svn clone コマンドで取り出す ※ 取り出したものを git-svn-repo と表記
4. git-svn-repo の origin に git-repo を割り当てる
5. git-svn-repo の trunk を git-repo の master branch として移行
6. git-svn-repo に trunk 以外にも branch があれば git-repo へ移行
7. git-svn-repo に TAG があれば、git-repo へ移行
8. 必要なら git-repo を remote の gitosis などへ移行
9. git-svn-repo はもういらないので削除
10. おしまい

注意点は、
- 明示的に svn の trunk を、git の master に変換しないといけない
– 普通に移行すると、svn の trunk は、git-repo の trunk というただの branch になる
– svn の最後に行われた commit のある trunk/branch が git の master になってしまう
- svn-repo を、まずは、ローカルの git-repo へ移行する
– 直接 gitosis などのサーバー上の git-repo に移行すると失敗したときに大変

1. svn-repo のログのユーザー名を、git 形式に変換するための authors.txt を作成
% cat authors.txt

userA = user1 
userB = user1 
userC = user2 
userX = user3 
userZ = user4 

svn-repo のログにある userA を、移行後の git-repo 上の user1 に変換する感じ。
このファイルは後で使う。

2. ローカルにカラの git-repo を作成

% mkdir git-repo.git
% cd git-repo.git
% git --bare init
Initialized empty Git repository in /home/ice/git-repo.git/
% cd ..

ここに、今、svn-repo にある trank/branches/tags を移行する

3. svn-repo を git svn clone コマンドで取り出す ※ 取り出したものを git-svn-repo と表記

% git svn clone -A authors.txt -s /path/to/svn-repo git-svn-repo.git
% cd git-svn-repo.git/
% git branch
* master
% git branch -r
  branch-1
  tags/tag-1
  tags/tag-2
  trunk
% git branch local-trunk refs/remotes/trunk
% git branch
  local-trunk
* master

/path/to/svn-repo は svn の repository へのパス
ローカルなら /home/ice/svn/svn-repo の様な感じ
サーバーなら svn+ssh://my-server/var/svn/repos/svn-repo の様な感じ

この svn-repo には、trunk と branch-1 という branch が1つ、tag-1 と tag-2 という名前の tag が2つある

4. git-svn-repo の origin に git-repo を割り当てる

% git remote add origin /home/ice/git-repo.git

5. git-svn-repo の trunk を git-repo の master branch として移行
まず、local-trunk という名前の branch を作成、svn の trunk を指す様に。

% git branch local-trunk refs/remotes/trunk
% git branch
  local-trunk
* master

git-svn-repo の local-trunk を、git-repo の master として移行

% git push origin local-trunk:master

6. git-svn-repo に trunk 以外にも branch があれば git-repo へ移行

% git branch local-branch-1 branch-1
% git push origin local-branch-1:branch-1

master も branch-1 も扱いは同じ branch なので、先ほどとほぼ一緒

7. git-svn-repo に TAG があれば、git-repo へ移行

% git tag tag-1 refs/remotes/tags/tag-1
% git tag tag-2 refs/remotes/tags/tag-2
% git tag
tag-1
tag-2
% git push --tags

8. 必要なら git-repo を remote の gitosis などへ移行
9. git-svn-repo はもういらないので削除
10. おしまい

WordPress のテーマで日付表記をローカライズする

12月 21st, 2009 投稿者: ianc
cal2

Ken's stuck in time calendar

messaliberty の日本語版と英語版は同じ WordPress テーマを使っています。1つのファイルで両方に対応している、という意味です。このやり方を実現するためには、完全に内部で切り分けて各言語ごとにローカライズする必要があります。英語と日本語の大きな違いは日付のフォーマットです。2009年12月13日は英語では Dec 13th 2009 にする必要があります。

最初 Chapp はテーマファイルの中にハードコードしていました。

<?php the_time('F jS, Y'); ?>

このままでは日本語版で日付がおかしくなります。だからといって ‘F jS, Y’ の部分を取り除くと、デフォルトの挙動で時間が表示されてしまいます。この問題は、次のような書き方で解決できます。

<?php the_date(); ?>

これで両方の言語で正しい表記となりまいた。めでたしめでたし・・・。と思いきや、WordPress がアーカイブページを生成するとき、date() が予期せぬ挙動をしてしまいます。特定の日付を一度しか表示しないのです。つまり、同じ日に2回投稿すると、一方にだけ日付が表示されます。配列を使ったあまりスマートではない解決策もありますが、以下の方法が良さそうです。

<?php the_time(get_option('date_format')); ?>

上記処理では、設定 > 一般 > 日付フォーマットの設定値を呼び出して使っています。英語版なら値が F jS, Y になっていて、日本語版なら Y年n月j日 になっています。こうやってみると分かりやすい解決策ですが、この問題には少し手こずりました。

同じテーマファイルを複数の言語用に利用する場合は、設定画面の日付フォーマット項目を利用して設定をするようにしてください。(WordPress MU の場合は少し異なります。)

WordPress ショッピングカードプラグイン Welcart のお客様情報ページに AjaxZip2 を設定する

12月 20th, 2009 投稿者: har

1. AjaxZip 2.0 公式サイト より「一括アーカイブ」の ZIP ファイルをダウンロード、解凍する。

2. 解凍してできた [ajaxzip2] ディレクトリ内の

  • jquery.js
  • [sample] ディレクトリ
  • [work] ディレクトリ

を削除する

3. [ajaxzip2] ディレクトリを WordPress ディレクトリ直下にアップロードする。

AjaxZip2

AjaxZip2

4. 郵便番号フォームを表示するページの html ヘッダーに以下の文を追加する

<script src="ajaxzip2/prototype.js"></script>
<script src="ajaxzip2/ajaxzip2.js" charset="UTF-8"></script>

5. Welcart の郵便番号フォーム出力部分のソースを書き換える
/wp-content/plugins/usc-e-shop/templates/cart/customer_info.php の 87 行目

<input name="customer[zipcode]" id="zipcode" type="text" value="' . $usces_entries['customer']['zipcode'] . '" />
  ↓
<input name="customer[zipcode]" id="zipcode" type="text" value="' . $usces_entries['customer']['zipcode'] . '" onKeyUp="AjaxZip2.zip2addr(this,\'customer[pref]\',\'customer[address1]\')" />

これは以下のような構成のサンプルなので

  • 都道府県名 -> プルダウン
  • 市区町村 -> テキストフィールド

変更の必要がある場合は AjaxZip 2.0 公式サイトのサンプルHTMLソースを参考に書き換えてください。

javascriptライブラリを利用して角丸を生成する『curvyCorners』

12月 8th, 2009 投稿者: take

messalibertyのサイトにも使われている角丸は『curvyCorners』というjavascriptライブラリを利用して表現しています。

curvycorners

curvycorners

すごくキレイな角丸を表現できるのですが、少し重いのが難点です。
近いうちに更新したいと思いますが、社内にてリクエストもあったのでこの機会にメモとして『curvyCorners』の設置の仕方を紹介します。

1. まずは配布サイトからcurvycorners.jsファイルをダウンロードし、以下のようにheaderにて読み込みます。

<script type="text/javascript" src="curvycorners.js"></script>

2. 次に角丸を適用したいblock要素をclass属性を付けて配置します。

上部に角丸を適用

<div class="myboxtop">
上部のみ角丸が適用されます。<br />
上部のみ角丸が適用されます。<br />
上部のみ角丸が適用されます。<br />
</div>

下部に角丸を適用

<div class="myboxbottom">
下部のみ角丸が適用されます。<br />
下部のみ角丸が適用されます。<br />
下部のみ角丸が適用されます。<br />
</div>

上下に角丸を適用

<div class="myboxall">
上下に角丸が適用されます。<br />
上下に角丸が適用されます。<br />
上下に角丸が適用されます。<br />
</div>

以上のようにclassを設置し、次はjsファイル内のスクリプトを編集します。

3. 以下の項目にて角丸の設定をします。

上部のみ10pxの角丸を設定

settingsTop = {
 tl: { radius: 10 },
 tr: { radius: 10 },
 bl: { radius: 0 },
 br: { radius: 0 },
 antiAlias: true,
 autoPad: true,
 validTags: ["div"]
}

下部のみ10pxの角丸を設定

settingsBottom = {
 tl: { radius: 0 },
 tr: { radius: 0 },
 bl: { radius: 10 },
 br: { radius: 10 },
 antiAlias: true,
 autoPad: true,
 validTags: ["div"]
}

上下に10pxの角丸を設定

settingsAll = {
 tl: { radius: 10 },
 tr: { radius: 10 },
 bl: { radius: 10 },
 br: { radius: 10 },
 antiAlias: true,
 autoPad: true,
 validTags: ["div"]
}
[補足]
tl(top left): 左上の角丸
tr(top right): 右上の角丸
bl(bottom left): 左下の角丸
br(bottom right): 右下の角丸
antiAlias: アンチエイリアス適用の有無(true or false)
autoPad: margin設定の有無(true or false)
validTags→curvyCornersの適用されるタグの選定(カンマ区切りで複数設定可)

4. それぞれの設定をclassに適用します。


      myBoxObject = new curvyCorners(settingsTop, "myboxtop");
      myBoxObject.applyCornersToAll();

      myBoxObject = new curvyCorners(settingsBottom, "myboxbottom");
      myBoxObject.applyCornersToAll();

	  myBoxObject = new curvyCorners(settingsAll, "myboxall");
      myBoxObject.applyCornersToAll();

以上で、それぞれのclassを設定するだけで面白いほど簡単に角丸が適用されます。
あとは軽くなれば良いのですが…。