lotusposition tag:www.lotusposition.jp,2008-05-29://1 2010-06-10T01:22:03Z デザイン CSS JavaScript Flash CGI PHP Ajax DB SEO/SEM など、WEBサイト制作に必要な小ネタの備忘録 Movable Type 4.1 簡体字と繁体字 tag:www.lotusposition.jp,2010://1.56 2010-05-27T01:19:17Z 2010-06-10T01:22:03Z 仕事で中国語サイトを制作することになりました。 といっても、これまで制作したこ... ringo 仕事で中国語サイトを制作することになりました。

といっても、これまで制作したこともなく、頼れる猛者もいないため、一から色々と覚えていく必要があり、どうせなのでこのBLOGに制作から公開までの流れをまとめていきたいと思います。

果たして公開までたどりつけるのか。。。

まずは最初に問題となるのは文字セットの違いです。

簡体字と繁体字
まず、中国語には簡体字（Simplified Chinese）と繁体字（Traditional Chinese）二つの言語様式が存在し、ターゲットとするエリアによって簡体字、繁体字のどちらを使用するかが決まります。

簡体字は主に中国大陸、マレーシア、シンガポール
繁体字は主に台湾、香港、マカオになります。

次に文字コードですが、
簡体字は「GB2132コード」
繁体字は「BIG5コード」になるのですが、私の場合、簡体字・繁体字両方のサイトを構築する必要がある為、複製のし易さを考えて「UTF-8コード」を利用しました。

さらに文字化けを防ぐ為には言語コードの指定も必要になります。
簡体字
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
繁体字
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-tw" lang="zh-tw">

これで中国語サイトを構築する為の文字・言語コードの設定は終了です。]]> PHPでのXML宣言エラー対処方 tag:www.lotusposition.jp,2008://1.9 2008-04-16T04:15:09Z 2008-05-31T05:55:16Z 携帯サイト制作（XHTML）でPHPを使用した場合、「Parse error: syntax error, unexpected T_STRING in ...」というエラーか画面に何も表示されない場合があります。 ringo 携帯サイト制作（XHTML）でPHPを使用した場合、「Parse error: syntax error, unexpected T_STRING in ...」というエラーか画面に何も表示されない場合があります。

これはXML宣言
<?xml version="1.0" encoding="Shift_JIS"?>
の「 <? 」が、PHPの「 <?php 」の省略タグと解釈されて引き起こされている場合があります。

いくつか対処法があるのですが、サーバによっては設定できないものもありますので、環境に合わせて設定してください。

対処法１
サーバの「php.ini」の「short_open_tag」を Off にする。
※この方法を利用するとphpの省略タグが使用できなくなる為、省略タグを使用しているphpスクリプトで誤動作を起こす可能性があります。 ※php.iniを設定できるサーバのみ

対処法２
サーバの「.htaccess」に「php_flag short_open_tag Off」を記述する。
※この方法を利用するとphpの省略タグが使用できなくなる為、省略タグを使用しているphpスクリプトで誤動作を起こす可能性があります。
※.htaccessが利用できるサーバのみ

対処法３
PHPファイルのXML宣言部分をPHPの「 echo 」や「 print 」で吐出す。
<?php echo "<?xml version=\"1.0\" encoding=\"Shift_JIS\"?>\n"; ?>
]]> メインメニューの「ホーム」を任意の文字に変更 tag:www.lotusposition.jp,2008://1.8 2008-04-02T00:17:17Z 2008-05-30T03:04:04Z メインメニューの「ホーム」を任意の文字に変更できます。 これは単純にSmarty... ringo メインメニューの「ホーム」を任意の文字に変更できます。

これは単純にSmarty変数を定義してあるファイルを書き換えてやればおｋです。

書き換るファイルは
/modules/system/language/japanese/blocks.php

ファイルを開くと下記のようになっているので、19行目の赤文字部分を好きな文字に変更すればおｋです。

blocks.php
<?php
// Blocks
define("_MB_SYSTEM_ADMENU","管理者メニュー");
define("_MB_SYSTEM_RNOW","新規登録");
define("_MB_SYSTEM_LPASS","パスワード紛失");
define("_MB_SYSTEM_SEARCH","検索");
define("_MB_SYSTEM_ADVS","高度な検索");
define("_MB_SYSTEM_VACNT","アカウント情報");
define("_MB_SYSTEM_EACNT","アカウント編集");
define("_MB_SYSTEM_LOUT","ログアウト");
define("_MB_SYSTEM_INBOX","受信箱");
define("_MB_SYSTEM_SUBMS","新規投稿ニュース記事");
define("_MB_SYSTEM_WLNKS","新規投稿リンク");
define("_MB_SYSTEM_BLNK","破損リンク報告");
define("_MB_SYSTEM_MLNKS","修正リンク");
define("_MB_SYSTEM_WDLS","新規投稿ダウンロード情報");
define("_MB_SYSTEM_BFLS","破損ファイル報告");
define("_MB_SYSTEM_MFLS","修正ダウンロード情報");
define("_MB_SYSTEM_HOME","ホーム"); // link to home page in main menu block
define("_MB_SYSTEM_RECO","当サイトを推薦する");
define("_MB_SYSTEM_PWWIDTH","ポップアップウィンドウの横幅");
define("_MB_SYSTEM_PWHEIGHT","ポップアップウィンドウの高さ");
define("_MB_SYSTEM_LOGO","%s ディレクトリ内のロゴファイル名"); // %s is your root image directory name
define("_MB_SYSTEM_SADMIN","管理者グループを表示する");
define("_MB_SYSTEM_SPMTO","%sさん宛にプライベートメッセージを送信する");
define("_MB_SYSTEM_SEMTO","%sさん宛にメールを送信する");

define("_MB_SYSTEM_DISPLAY","%s 人を表示");
define("_MB_SYSTEM_DISPLAYA","ユーザのアバターを表示");
define("_MB_SYSTEM_NODISPGR","以下の特別ランクのユーザは除外する:");
define("_MB_SYSTEM_DISPLAYC","%s 件表示する");
define("_MB_SYSTEM_SECURE", "SSL");

define("_MB_SYSTEM_NUMTHEME", "%s テーマ");
define("_MB_SYSTEM_THSHOW", "スクリーンショット画像の表示");
define("_MB_SYSTEM_THWIDTH", "スクリーンショット画像のピクセル幅");
define("_MB_SYSTEM_NOTIF", "イベント通知機能");

define("_MB_SYSTEM_COMPEND", "コメント");
?>
]]> キーワードアドバイスツール tag:www.lotusposition.jp,2008://1.7 2008-03-31T03:46:39Z 2008-05-31T04:06:53Z Overtureのキーワードアドバイスツールとまではいきませんが、2008年3月... ringo Overtureのキーワードアドバイスツールとまではいきませんが、2008年3月現在、フリーで使えるものをまとめてみました。

muryoutouroku.com
http://www.muryoutouroku.com/
表示件数は少ないが具体的な検索回数を知ることができます。

Google AdWords
https://adwords.google.co.jp/select/KeywordToolExternal
具体的な検索回数ではなグラフで表示されますが、関連キーワードや類義語も含め検索可能。

Google Trends
https://adwords.google.co.jp/select/KeywordToolExternal
Google AdWords同様グラフで表示されますが、複数キーワードの比較を見ることが可能]]> 検索でのエラー表示問題 tag:www.lotusposition.jp,2008://1.6 2008-03-19T00:43:55Z 2008-05-30T03:50:15Z Movable Typeで連続して検索を行った場合、 「現在検索中です。検索が終... ringo Movable Typeで連続して検索を行った場合、

「現在検索中です。検索が終わるまでお待ちください。」

というエラーメッセージが表示されます。
これは Movable Typeの仕様で、連続した検索実行を抑止している為だそうです。
ちなみに、デフォルトの抑止時間は、3.31では20秒、3.2では60秒に設定されています。

3.3?でこの抑止時間を短縮するには、mt-config.cgi に 

ThrottleSeconds 10
を追加することで、連続実行抑止時間を変更きます。
数字の単位は「秒」で、上記の例は10秒（=検索してから10秒以内に再検索されたらエラーにする）設定になります。

3.2での変更方法は下記参考サイトに詳しく記載されておりますので、そちらをご覧ください。

参考サイト 小粋空間

]]> 折りたたみメニュー tag:www.lotusposition.jp,2008://1.5 2008-03-17T03:22:49Z 2008-05-31T05:44:36Z レイヤー機能とJavaScriptを組み合わせ折りたたみメニューを実現します。 ... ringo レイヤー機能とJavaScriptを組み合わせ折りたたみメニューを実現します。

JavaScriptソース 
function show(inputData) {
  var objectID=document.getElementById( "title_" + inputData );
  var buttonID=document.getElementById( "category_" + inputData );
  if(objectID.className=='close') {
    objectID.style.display='block';
    objectID.className='open';
  }else{
    objectID.style.display='none';
    objectID.className='close';
  }
}
HTMLソース 
<ul>
  <li>
    <a href="javascript:void(0)" id="category_1" onclick="show('1');">大分類</a>
    <div id="title_1" style="display: none;position:relative;" class="close">
    <ul>
      <li>小分類1
      <li>小分類2
      <li>小分類3
    </ul>
    </div>
  </li>
</ul>
サンプル ]]> 角丸 [背景画像あり] tag:www.lotusposition.jp,2008://1.4 2008-03-01T02:55:44Z 2008-05-31T05:32:13Z 背景画像を使用して、角丸ボックスを実現します。 各角に利用する画像を用意します。... ringo 背景画像を使用して、角丸ボックスを実現します。

各角に利用する画像を用意します。

角丸用画像

このとき、○○○_l ＋ ○○○_rの横幅がボックス幅より短い場合、背景が途中で切れるので注意が必要です。○○○_lの横幅を1000px程度に設定しておけばおｋ。

CSS 
.kadomaru_box  { width:200px; }
.kadomaru_header_l,
.kadomaru_header_r,
.kadomaru_footer_l,
.kadomaru_footer_r,{
  font-size:1px;
  height:8px; /* 角丸画像の高さに合わす */
}
.kadomaru_header_l { background:url(kado_header_l.gif) no-repeat 0px 0px;}
.kadomaru_header_r { background:url(kado_header_r.gif) no-repeat right 0px;}
.kadomaru_footer_l { background:url(kado_footer_l.gif) no-repeat 0px 0px;}
.kadomaru_footer_r {background:url(kado_footer_r.gif) no-repeat right 0px;}
.kadomaru_box_contents { padding:0 8px; background-color:#ccc; /* 角丸画像の色に合わす */}
HTMLソース 
<div class="kadomaru_box">
  <div class="kadomaru_header_l">
    <div class="kadomaru_header_r"></div>
  </div>
  <div class="kadomaru_box_contents">
    <!-- 文章などを記述 -->テキストテキストテキストテキスト
  </div>
  <div class="kadomaru_footer_l">
    <div class="kadomaru_footer_r"></div>
  </div>
</div>
サンプル
テキストテキストテキストテ

失敗例
テキストテキストテキストテ

]]> 角丸 [背景画像なし] tag:www.lotusposition.jp,2008://1.3 2008-02-29T08:34:52Z 2008-05-31T05:30:20Z 背景画像を使用せず、角丸ボックスを実現します。 CSS .kadomaru_b... ringo 背景画像を使用せず、角丸ボックスを実現します。

CSS 
 .kadomaru_box  { background-color:#fff; width:200px; }
 .kado1 { margin: 0 5px;height:1px;overflow: hidden; background-color:#ccc; }
 .kado2 { margin: 0 3px;height:1px;overflow: hidden; background-color:#ccc; }
 .kado3 { margin: 0 2px;height:1px;overflow: hidden; background-color:#ccc; }
 .kado4 { margin: 0 1px;height:2px;overflow: hidden; background-color:#ccc; }
 .kadomaru_box_contents { padding:10px; background-color:#ccc; width:180px; }
HTMLソース 
<div class="kadomaru_box">
  <div class="kado1"></div>
  <div class="kado2"></div>
  <div class="kado3"></div>
  <div class="kado4"></div>
</div>
<div class="kadomaru_box_contents">
    <!-- 文章などを記述 -->テキストテキストテキストテキスト
</div>
<div class="kadomaru_box">
  <div class="kado4"></div>
  <div class="kado3"></div>
  <div class="kado2"></div>
  <div class="kado1"></div>
</div>
サンプル
テキストテキストテキストテ

]]> 背景を半透明 tag:www.lotusposition.jp,2008://1.2 2008-02-06T04:53:57Z 2008-05-31T04:30:53Z CSSでオブジェクトを半透明にできます。 CSS div.alphabox{ ... ringo CSSでオブジェクトを半透明にできます。

CSS 
div.alphabox{
  width:200px;
  height:100px;
  background:#000;
  filter:alpha(opacity=25);
  -moz-opacity:0.25;
  opacity:0.25;
}

IE
alpha(opacity=透明度) / 100が100%、25%の場合は25となります。

Firefox・Netscape
-moz-opacity:.透明度 / 1.0が100%、25%の場合は0.25となります。

Opera・Safari
opacity:透明度 / 1.0が100%、25%の場合は0.25となります。 ]]> テキストエリアの入力文字数をバイト数で制限 tag:www.lotusposition.jp,2008://1.1 2008-01-25T05:19:22Z 2008-05-31T05:22:00Z 入力文字数をlengthプロパティで取得し、所定のバイト数以上かどうかチェック... ringo 入力文字数をlengthプロパティで取得し、所定のバイト数以上かどうかチェックできます。（一般的に、半角文字が1バイト、かなや漢字など全角文字が2バイト）。

JavaScript 
function bytes(str){
  var n = 0;
  for(i=0; i< str, length;i++ )
  n+=((str.charAt(i)>="｡"&&str.charAt(i)<="ﾟ")?1:(escape(str.charAt(i)).length>3?2:1));
  return n;
}

function strCheck(area){
　var n = bytes(area.value);
　if(n>300) {
　　confirm("半角300文字までです\n(現在の文字数："+n+"バイト)");
　　area.focus();
　}
}
HTMLソース 
<textarea rows="8" cols="60" onblur="strCheck(this)"></textarea>
]]>