Toshi's Notes ～主にFlash,Flex,AS3の覚書

Flexを用いたお問い合わせフォーム

2009-04-03T04:17:00.007+09:00

Flexでホームページのお問い合わせで使うフォームの制作をしました。

FlexではE-Mailアドレスや電話番号、文字数制限など、正しく入力できているかをValidatorを使って簡単に判断・設定することができます。また必須項目の設定も含め、正しく入力できていないときポップアップが表示され何がいけないかをユーザーに教えてくれるのもよい機能です。デザイン性、設定が容易であることも含めて今までのHTMLのフォームよりはるかによいです。

この場合では名前、E-Mailアドレス、電話番号、詳細の4つの項目を入力しそれをサーバーに送り、PHPでEメールにして各項目の内容をまとめて送信しています。

ここで注意しなければならないのが、faultCode="Channel.Security.Error" と出た場合、例えばこのフォームをここ↑にあるようにブロガー等に設置し、そしてPHPファイルを他のサーバーに置いた場合、クロスドメインの設定が必要になってきます。

詳しくはこちら⇒Flashでクロスドメインに対応する crossdomain.xml の設置について

私の場合はPHPファイルを置いたサーバーのルートにcrossdomain.xml↓


<?xml version=”1.0″ encoding=”UTF-8″?>
<cross-domain-policy>
<allow-access-from domain=”*” />
</cross-domain-policy>

を設置したことにより問題が解決しました。

以下FLEXのmxmlファイルとサーバーのPHPファイルそれぞれのソースコードを公開します。


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%"
 
    backgroundAlpha="0" 
    backgroundColor="#ffffff" 
  color="#666666"


 >
<mx:Style>
   Button {
   highlightAlphas: 0.53, 0.44;
   fillAlphas: 0.648, 0.634, 0.71, 0.71;
   fillColors: #ffffff, #99ffff, #d7ffff, #ccffcc;}
</mx:Style>



 <mx:Script>
  <![CDATA[
   import mx.controls.Alert;

           private function onSend():void {
            var err:Array = mx.validators.Validator.validateAll(validators);
            if (err.length == 0) {
              submitSend.send({
      "nameT":nameT.text,  
      "eMail":eMail.text,
      "tel":tel.text,
      "detail":detail.text 
   });

            } else {
                mx.controls.Alert.show("フォームが正しく入力されていません。");
            }
        }

  ]]>
 </mx:Script>
<!-- 

  nameT.text = '';
  eMail.text = '';
  tel.text = '';
  detail.text = '';

 -->
 <mx:HTTPService id="submitSend" url="http://PHPファイルへのurl" method="POST" resultFormat="e4x" useProxy="false" showBusyCursor="true"
  result="{
  nameT.text = '';
  eMail.text = '';

  Alert.show('送信が完了しました。ありがとうございます！' + 
    '万が一3日以内に返事がなければご連絡ください。')
  }"
 /> 
 
 
     <mx:Canvas width="100%" height="100%" label="Submit" alpha="1">
  <mx:VBox width="100%" height="100%">
   
   <mx:Form  id="myForm" width="520" height="450">
    <mx:FormHeading fontSize="13" fontWeight="bold" label="◎以下の項目をご記入ください。＊は必須項目です。"/>
    <mx:FormItem fontSize="13" fontWeight="bold" label="お名前" backgroundColor="0xccffff" alpha="0.6" required="true">
     <mx:TextInput fontSize="13" width="250" id="nameT" styleName="borderAll"/>
    </mx:FormItem>
    <mx:FormItem fontSize="13" fontWeight="bold" label="E-Mailアドレス" backgroundColor="0xccffff" alpha="0.6" required="true">
     <mx:TextInput fontSize="13" width="250" id="eMail" styleName="borderAll"/>
    </mx:FormItem>
    <mx:FormItem fontSize="13" fontWeight="bold" label="電話番号" backgroundColor="0xccffff" alpha="0.6" required="false">
     <mx:TextInput fontSize="13" id="tel" styleName="borderAll"/>
    </mx:FormItem>

    <mx:FormItem fontSize="13" fontWeight="bold" label="お問い合わせ内容" backgroundColor="0xccffff" alpha="0.6" required="true">
     <mx:TextArea fontSize="13" id="detail" width="350" height="257" styleName="borderAll"/>
    </mx:FormItem>
    <mx:FormItem>
     <mx:Button id="SubmitBtn" label="送信" fontSize="13" click="onSend()"/>
    </mx:FormItem>
   </mx:Form>
  </mx:VBox>     
    </mx:Canvas>
    
 <mx:Array id="validators"> 
     <mx:StringValidator source="{nameT}" property="text" maxLength="100" tooLongError="文字数は100字以内でお願いします。" minLength="2" tooShortError="お名前が正しく入力されていません。"/>
     <mx:StringValidator source="{detail}" property="text" maxLength="2000" tooLongError="文字数は2000字以内でお願いします。"/>
     <mx:PhoneNumberValidator source="{tel}" property="text" required="false"/>
     <mx:EmailValidator source="{eMail}" property="text"/>
 </mx:Array>

</mx:Application>


<?php

if( $_GET['type'] == "submit" ){

mb_language('ja'); 

$nameT   = $_POST['nameT'];
$eMail   = $_POST['eMail'];
$tel     = $_POST['tel'];
$detail  = $_POST['detail'];


//ISO-2022-JPにエンコーディング
mb_convert_variables("ISO-2022-JP", "AUTO", $nameT, $eMail,$tel,$detail);

$time = time();
$detail = 'Name: '.$nameT.'
E-mail: '.$eMail.'
Tel: '.$tel.'
Time: '.date('Y/m/d H:i:s').'

-------------------------------------------------(content)-------------------------------------------------

'.$detail;

mb_send_mail('自分が送信したい先のE-Mailアドレス','Raine Form',$detail,$eMail);




 exit;
}elseif( $_GET['type'] == "erase" ){

exit;

}?>

My Tumblr Template

2009-02-19T22:54:00.004+09:00

http://toshigus.tumblr.com

This it my tumblr template. Originally this template was one of the official templere of "tumblr", but I fixed and fixed("KAIZEN" in Japanese).

Points I fixed:
*You can view texts and photos entirely.
*made colors and sizes of Font more beautiful and easier to recognize.
*changed the wallpaper.
*Added links
...and so on.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
       <title>{Title}{block:PostSummary} - {PostSummary}{/block:PostSummary}</title>       
       <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>
       <link rel="icon" href="{Favicon}"/>

       <!-- iPhone -->
       <meta name="viewport" content="width=860"/>
       <link rel="apple-touch-icon" href="{PortraitURL-128}"/>
      
       <!-- DEFAULT COLORS -->
       <meta name="color:Alternate Text" content="#bfad8a"/>
       <!-- END DEFAULT COLORS -->       

       <style type="text/css">
           * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

           body {
            background: #000 url('http://raine.jp/reso/blog/monsan.jpg') fixed center top;
            font-family: arial,san-serif;
            font-size: 12px;
            color: #e4e4e4;
            text-align: center;
        }

           #container {
            width: 840px;
            margin: 0 auto;
            text-align: left;
        }
       
           .regular, .photo, .quote, .link, .conversation, .video, .audio, .metabox {
            padding: 10px;
        }

           .post {
            width: 270px;
            min-height: 450px;
            float: left;
            background: url('/themes/11/shade.png');
            margin-right: 10px;
            margin-bottom: 10px;
            position: relative;
            overflow: hidden;
        }

           .post:hover {
            background: #000;
        }

           .permalink {
            border-width: 0px;
            width: 100px;
            height: 11px;
            line-height: 11px;
            position: absolute;
            bottom: 10px;
            right: 10px;
            color: #333;
            text-align: right;
        }
       
           .permalink a {
            color: #e3e3e3;
            border-bottom: 1px dotted #333;
            font-size: 11px;
        }
       
           .permalink a:hover {
            color: #fafafa;
            border-bottom: 1px solid {color:Alternate Text};
        }
       
           .photobox {
            width: 260px;
            //min-height: 250px;
            overflow: hidden;
            margin-bottom: 10px;
        }

           .audio .photobox {
            background: #111;
        }

           .player {
            padding: 60px 20px;
            border: 1px solid #222;
        }

           .video .caption {
            padding-top: 10px;
        }

           .quotetext {
            font-size: 13px;
            font-family: Georgia;
            line-height: 22px;
            padding-bottom: 11px;
            color: {color:Alternate Text};
        }

           .source {
            font-family: arial;
            font-size: 11px;
            text-align: right;
            color: #cccccc;
        }

           .caption {
            line-height: 18px;
        }

           .conversation ul li {
            line-height: 18px;
            border-bottom: 1px dotted #222;
            padding: 3px 0 3px 0px;
        }
       
           .conversation ul li span {
            color: {color:Alternate Text};
        }

           .even {
            border-bottom: 1px dotted #222;
        }
       
           ol li {
               list-style: decimal outside;
               margin: 0 0 0 20px;
               padding: 0 0 5px 0
           }

           a {
            color: {color:Alternate Text};
            border-bottom: 1px dotted #443e31;
            text-decoration: none;
        }

           a:hover {
            color: #CAC9C8;
            border-bottom: 1px solid #3F3F3F;
        }

           p {
            line-height: 18px;
            margin-bottom: 9px;

        }

           .photo strong, .photo b, .video strong, .video b, .audio strong, .audio b{
            font-family: Georgia;
            font-weight: normal;
            font-size: 17px;
            line-height: 18px;
            color: {color:Alternate Text};
        }

           h1 {
            font-family: Georgia;
            font-weight: normal;
            font-size: 17px;
            line-height: 18px;
            padding: 0 0 9px 0;
        }

           #header {
            padding: 40px 0 60px 0;
            position: relative;
        }

               #header h1 {
                width: 297px;
            }

                   #header h1 a {
                    color: #ffffff;
                    font-style: italic;
                    border: 0;border-bottom: 1px dotted #ffffff;
                    font-size: 28px;
                    line-height: 16px;
                }

                       #header h1 a:hover {
                        color: #fff;
                    }
        
      #header h2 {
       color: {color:Alternate Text};
       font: italic normal 1.2em/1.8 Georgia, serif;
      }


      #header toshi {
       color: #eeeeee;
       font: italic normal 1.2em/1.8 Georgia, serif;font-size: 12px;
      }

      #header toshi a{
       color: #eeeeee;
       font: italic normal 1.2em/1.8 Georgia, serif;font-size: 12px;border-bottom: 1px dotted #ffffff;
      }



               #header ul {
                position: absolute;
                left: 550px;
                top: 40px;
            }

                   #header ul li {
                    display: inline;color: #ffffff;
                }

           #header ul li form {
            display: inline;
           }
          
            #header ul li form #searchbox {
             background: #000;
             border: 1px solid {color:Alternate Text};
             opacity: 0.7;
             color: #fff;
            }
           
            #header ul li form #submitsearch {
             display: none;
            }

                       #header ul li a {
                        font-family: georgia;
                        color: #ddd;
                        font-style: italic;
                        border-bottom: 1px dotted #999;
                        margin-right: 11px;
                    }

                           #header ul li a:hover {
                            color: #fff;
                            border-bottom: 1px solid #fff;
                        }

           #navigation, .meta {
               text-align: center;
               height: 450px;
               float: left;
               width: 270px;
               background: url('/themes/11/shade.png');
           }

               #navigation a {
                   border: 0; font-size: 12px;
                   padding: 3px 8px;
                   background: #222;
               }

                   #navigation a:hover {
                       background: #333;
                   }

                   .pages {
                       font-family: Georgia;
                       font-size: 11px;
                       padding-bottom: 48px;
                   }

                       .pages span {
                           font-size: 90px;
                       }

           .total {
            color: #9e8e7e;
        }

           #footer {
            clear: both;
            padding: 40px 0;
            text-align: left;
        }

           body#perm #navigation {
            display: none;
        }

           body#perm .post {
            width: 550px;
        }

           body#perm .photobox, body#perm .videobox {
            float: right;
            margin-left: 10px;
        }

           .meta {
            display: none;
        }

           body#perm .meta {
            display: block;
            text-align: left;
        }

           body#perm .permalink {
            display: none;
        }

           .meta span, h3 {
            text-transform: uppercase;
            font-size: 10px;
            color: {color:Alternate Text};
            display: block;
            line-height: 18px;
        }

    #searchresultcount {
     text-align: left;
     margin-bottom: 20px;
     color: {color:Alternate Text};

    }

    .query { font-weight: bold; }
       
        {CustomCSS}
       </style>

       <!--[if IE]>
           <style type="text/css">
               .post, #navigation, .meta { background:#010101; }
       #header ul li form #searchbox { filter: alpha(opacity=70); }
           </style>
       <![endif]-->
   </head>
   <body {block:Permalink}id="perm"{/block:Permalink}>   
       <div id="container">    
        <div id="header">
               <h1><a href="/">{Title}</a></h1>
       <h2>{Description}</h2>
<toshi>Mail: raine.toshi@gmail.com</toshi><br/>
<toshi>Blog: <a href="http://r-toshi.blogspot.com/">Toshi's Web Diary</a></toshi>

         <ul>
             <li><a href="/archive">archive</a></li>
             <li><a href="{RSS}">rss feed</a></li>
       <li>
        <form action="/search" method="get">
            <input type="text"  size="15" id="searchbox" name="q" value="{SearchQuery}"/>
            <input type="submit"  id="submitsearch" value="Search"/>
        </form>
       </li>
         </ul>
        </div>
      
    {block:SearchPage}
    <div id="searchresultcount">
     <p>Your search for <span class="query">{SearchQuery}</span> returned {SearchResultCount} result(s).</p>
    </div>
    {/block:SearchPage}
   
           {block:Posts}
         <div class="post">
          {block:Regular}
              <div class="permalink"><a
              href="{Permalink}">{MonthNumberWithZero}/{DayOfMonthWithZero}/{Year} {24HourWithZero}:{Minutes}</a></div>
           <div class="regular"> 
            {block:Title}<h1><a href="{Permalink}">{Title}</a></h1>{/block:Title}
                           {Body}
                       </div>
                   {/block:Regular}
              
                   {block:Photo}
              <div class="permalink"><a
              href="{Permalink}">{MonthNumberWithZero}/{DayOfMonthWithZero}/{Year} {24HourWithZero}:{Minutes}</a></div>
           <div class="photo">
            <div class="photobox">{LinkOpenTag}<img src="{PhotoURL-250}" alt="{PhotoAlt}"/>{LinkCloseTag}</div>   
                           {block:Caption}
             <div class="caption">{Caption}</div>
                           {/block:Caption}
           </div>
                   {/block:Photo}
              
                   {block:Quote}
              <div class="permalink"><a
              href="{Permalink}">{MonthNumberWithZero}/{DayOfMonthWithZero}/{Year} {24HourWithZero}:{Minutes}</a></div>
           <div class="quote">
                           <div class="quotetext">
             “ {Quote}
            </div>
                           {block:Source}<div class="source">— {Source}</div>{/block:Source}</div>
                   {/block:Quote}
              
                   {block:Link}
              <div class="permalink"><a
              href="{Permalink}">{MonthNumberWithZero}/{DayOfMonthWithZero}/{Year} {24HourWithZero}:{Minutes}</a></div>
                       <div class="link">
            <h1><a href="{URL}" {Target}>{Name} » </a></h1>
                           {block:Description}
             <p class="description">{Description}</p>
                           {/block:Description}
                       </div>
                   {/block:Link}
              
          {block:Conversation}
              <div class="permalink"><a
              href="{Permalink}">{MonthNumberWithZero}/{DayOfMonthWithZero}/{Year} {24HourWithZero}:{Minutes}</a></div>
           <div class="conversation">
                           {block:Title}<h1><a href="{Permalink}">{Title}</a></h1>{/block:Title}
                               <ul>
                                   {block:Lines}
                                       <li class="{Alt}">
                                           {block:Label}<span class="label">{Label}</span>{/block:Label}
                                           {Line}
                                       </li>
                                   {/block:Lines}
                               </ul>
                       </div>
                   {/block:Conversation}
              
                   {block:Video}
              <div class="permalink"><a
              href="{Permalink}">{MonthNumberWithZero}/{DayOfMonthWithZero}/{Year} {24HourWithZero}:{Minutes}</a></div>  
                       <div class="video"> 
                           <div class="videobox">{Video-250}</div>
                           {block:Caption}
                               <div class="caption">{Caption}</div>
                           {/block:Caption}
                       </div>
                   {/block:Video}
 
          {block:Audio}
              <div class="permalink"><a
              href="{Permalink}">{MonthNumberWithZero}/{DayOfMonthWithZero}/{Year} {24HourWithZero}:{Minutes}</a></div>
           <div class="audio">
                           <div class="photobox"><div class="player">{AudioPlayerBlack}</div></div>
                           {block:Caption}
                               <div class="caption">{Caption}</div>
                           {/block:Caption}
                       </div>
                   {/block:Audio}
               </div>

         <div class="meta">
             <div class="metabox">
                 <p><span>posted :</span> {MonthNumberWithZero}/{DayOfMonthWithZero}/{Year} {24HourWithZero}:{Minutes}</p>
                 <p><span>tags :</span> {TagsAsClasses}</p>
                 {block:RebloggedFrom}<p><span>reblogged from :</span>
                 <a href="{ReblogParentURL}">{ReblogParentTitle}</a></p>{/block:RebloggedFrom}
             </div>

       <div style="font-size: 10px; text-align: left;"><a href="{Permalink}#disqus_thread">Comments (View)</a></div>
            </div>
           {/block:Posts}
{block:Permalink}
<script type="text/javascript">var disqus_url = "{Permalink}"; var disqus_title ="{block:PostTitle}{PostTitle}{/block:PostTitle}";</script>
<div id="disqus_thread"></div><script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/toshiswebmemo/embed.js"></script>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
{/block:Permalink}
<script type="text/javascript">
//<![CDATA[
(function() {
 var links = document.getElementsByTagName('a');
 var query = '?';
 for(var i = 0; i < links.length; i++) {
  if(links[i].href.indexOf('#disqus_thread') >= 0) {
   query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
  }
 }
 document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/toshiswebmemo/get_num_replies.js' + query + '"></' + 'script>');
})();
//]]>
</script>

        <div id="navigation">
         <div class="pages">
             <em>page</em> <span>{CurrentPage}</span> of
             <span class="total">{TotalPages}</span>
         </div>
        
      {block:PreviousPage}
       <a href="{PreviousPage}">« Previous Page</a>  
      {/block:PreviousPage}
  
      {block:NextPage}
       <a href="{NextPage}">Next Page »</a>
      {/block:NextPage}
        </div>

        <div id="footer">
         <a href="{RSS}">rss feed</a> /
         powered by <a href="http://www.tumblr.com/" target="_blank">tumblr</a> /
         theme by <a href="http://paulgiacherio.com" target="_blank">paulgiacherio</a>
        </div>
       </div>

自分のtumblrのテンプレート

2009-02-19T22:41:00.005+09:00

http://toshigus.tumblr.com

自分のtumblrのテンプレートを晒します。このテンプレはもともとtumblrのサイトにあったものを自分ですこしずつ改造していったもの。

もとのテンプレより優れている点としては
・画像・文章が途中で切れずに表示できるようになった。
・文字の色、大きさをよりきれいでわかりやすく。
・背景画像の変更。
・リンクの追加。
等々です。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
       <title>{Title}{block:PostSummary} - {PostSummary}{/block:PostSummary}</title>       
       <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>
       <link rel="icon" href="{Favicon}"/>

       <!-- iPhone -->
       <meta name="viewport" content="width=860"/>
       <link rel="apple-touch-icon" href="{PortraitURL-128}"/>
      
       <!-- DEFAULT COLORS -->
       <meta name="color:Alternate Text" content="#bfad8a"/>
       <!-- END DEFAULT COLORS -->       

       <style type="text/css">
           * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

           body {
            background: #000 url('http://raine.jp/reso/blog/monsan.jpg') fixed center top;
            font-family: arial,san-serif;
            font-size: 12px;
            color: #e4e4e4;
            text-align: center;
        }

           #container {
            width: 840px;
            margin: 0 auto;
            text-align: left;
        }
       
           .regular, .photo, .quote, .link, .conversation, .video, .audio, .metabox {
            padding: 10px;
        }

           .post {
            width: 270px;
            min-height: 450px;
            float: left;
            background: url('/themes/11/shade.png');
            margin-right: 10px;
            margin-bottom: 10px;
            position: relative;
            overflow: hidden;
        }

           .post:hover {
            background: #000;
        }

           .permalink {
            border-width: 0px;
            width: 100px;
            height: 11px;
            line-height: 11px;
            position: absolute;
            bottom: 10px;
            right: 10px;
            color: #333;
            text-align: right;
        }
       
           .permalink a {
            color: #e3e3e3;
            border-bottom: 1px dotted #333;
            font-size: 11px;
        }
       
           .permalink a:hover {
            color: #fafafa;
            border-bottom: 1px solid {color:Alternate Text};
        }
       
           .photobox {
            width: 260px;
            //min-height: 250px;
            overflow: hidden;
            margin-bottom: 10px;
        }

           .audio .photobox {
            background: #111;
        }

           .player {
            padding: 60px 20px;
            border: 1px solid #222;
        }

           .video .caption {
            padding-top: 10px;
        }

           .quotetext {
            font-size: 13px;
            font-family: Georgia;
            line-height: 22px;
            padding-bottom: 11px;
            color: {color:Alternate Text};
        }

           .source {
            font-family: arial;
            font-size: 11px;
            text-align: right;
            color: #cccccc;
        }

           .caption {
            line-height: 18px;
        }

           .conversation ul li {
            line-height: 18px;
            border-bottom: 1px dotted #222;
            padding: 3px 0 3px 0px;
        }
       
           .conversation ul li span {
            color: {color:Alternate Text};
        }

           .even {
            border-bottom: 1px dotted #222;
        }
       
           ol li {
               list-style: decimal outside;
               margin: 0 0 0 20px;
               padding: 0 0 5px 0
           }

           a {
            color: {color:Alternate Text};
            border-bottom: 1px dotted #443e31;
            text-decoration: none;
        }

           a:hover {
            color: #CAC9C8;
            border-bottom: 1px solid #3F3F3F;
        }

           p {
            line-height: 18px;
            margin-bottom: 9px;

        }

           .photo strong, .photo b, .video strong, .video b, .audio strong, .audio b{
            font-family: Georgia;
            font-weight: normal;
            font-size: 17px;
            line-height: 18px;
            color: {color:Alternate Text};
        }

           h1 {
            font-family: Georgia;
            font-weight: normal;
            font-size: 17px;
            line-height: 18px;
            padding: 0 0 9px 0;
        }

           #header {
            padding: 40px 0 60px 0;
            position: relative;
        }

               #header h1 {
                width: 297px;
            }

                   #header h1 a {
                    color: #ffffff;
                    font-style: italic;
                    border: 0;border-bottom: 1px dotted #ffffff;
                    font-size: 28px;
                    line-height: 16px;
                }

                       #header h1 a:hover {
                        color: #fff;
                    }
        
      #header h2 {
       color: {color:Alternate Text};
       font: italic normal 1.2em/1.8 Georgia, serif;
      }


      #header toshi {
       color: #eeeeee;
       font: italic normal 1.2em/1.8 Georgia, serif;font-size: 12px;
      }

      #header toshi a{
       color: #eeeeee;
       font: italic normal 1.2em/1.8 Georgia, serif;font-size: 12px;border-bottom: 1px dotted #ffffff;
      }



               #header ul {
                position: absolute;
                left: 550px;
                top: 40px;
            }

                   #header ul li {
                    display: inline;color: #ffffff;
                }

           #header ul li form {
            display: inline;
           }
          
            #header ul li form #searchbox {
             background: #000;
             border: 1px solid {color:Alternate Text};
             opacity: 0.7;
             color: #fff;
            }
           
            #header ul li form #submitsearch {
             display: none;
            }

                       #header ul li a {
                        font-family: georgia;
                        color: #ddd;
                        font-style: italic;
                        border-bottom: 1px dotted #999;
                        margin-right: 11px;
                    }

                           #header ul li a:hover {
                            color: #fff;
                            border-bottom: 1px solid #fff;
                        }

           #navigation, .meta {
               text-align: center;
               height: 450px;
               float: left;
               width: 270px;
               background: url('/themes/11/shade.png');
           }

               #navigation a {
                   border: 0; font-size: 12px;
                   padding: 3px 8px;
                   background: #222;
               }

                   #navigation a:hover {
                       background: #333;
                   }

                   .pages {
                       font-family: Georgia;
                       font-size: 11px;
                       padding-bottom: 48px;
                   }

                       .pages span {
                           font-size: 90px;
                       }

           .total {
            color: #9e8e7e;
        }

           #footer {
            clear: both;
            padding: 40px 0;
            text-align: left;
        }

           body#perm #navigation {
            display: none;
        }

           body#perm .post {
            width: 550px;
        }

           body#perm .photobox, body#perm .videobox {
            float: right;
            margin-left: 10px;
        }

           .meta {
            display: none;
        }

           body#perm .meta {
            display: block;
            text-align: left;
        }

           body#perm .permalink {
            display: none;
        }

           .meta span, h3 {
            text-transform: uppercase;
            font-size: 10px;
            color: {color:Alternate Text};
            display: block;
            line-height: 18px;
        }

    #searchresultcount {
     text-align: left;
     margin-bottom: 20px;
     color: {color:Alternate Text};

    }

    .query { font-weight: bold; }
       
        {CustomCSS}
       </style>

       <!--[if IE]>
           <style type="text/css">
               .post, #navigation, .meta { background:#010101; }
       #header ul li form #searchbox { filter: alpha(opacity=70); }
           </style>
       <![endif]-->
   </head>
   <body {block:Permalink}id="perm"{/block:Permalink}>   
       <div id="container">    
        <div id="header">
               <h1><a href="/">{Title}</a></h1>
       <h2>{Description}</h2>
<toshi>Mail: raine.toshi@gmail.com</toshi><br/>
<toshi>Blog: <a href="http://r-toshi.blogspot.com/">Toshi's Web Diary</a></toshi>

         <ul>
             <li><a href="/archive">archive</a></li>
             <li><a href="{RSS}">rss feed</a></li>
       <li>
        <form action="/search" method="get">
            <input type="text"  size="15" id="searchbox" name="q" value="{SearchQuery}"/>
            <input type="submit"  id="submitsearch" value="Search"/>
        </form>
       </li>
         </ul>
        </div>
      
    {block:SearchPage}
    <div id="searchresultcount">
     <p>Your search for <span class="query">{SearchQuery}</span> returned {SearchResultCount} result(s).</p>
    </div>
    {/block:SearchPage}
   
           {block:Posts}
         <div class="post">
          {block:Regular}
              <div class="permalink"><a
              href="{Permalink}">{MonthNumberWithZero}/{DayOfMonthWithZero}/{Year} {24HourWithZero}:{Minutes}</a></div>
           <div class="regular"> 
            {block:Title}<h1><a href="{Permalink}">{Title}</a></h1>{/block:Title}
                           {Body}
                       </div>
                   {/block:Regular}
              
                   {block:Photo}
              <div class="permalink"><a
              href="{Permalink}">{MonthNumberWithZero}/{DayOfMonthWithZero}/{Year} {24HourWithZero}:{Minutes}</a></div>
           <div class="photo">
            <div class="photobox">{LinkOpenTag}<img src="{PhotoURL-250}" alt="{PhotoAlt}"/>{LinkCloseTag}</div>   
                           {block:Caption}
             <div class="caption">{Caption}</div>
                           {/block:Caption}
           </div>
                   {/block:Photo}
              
                   {block:Quote}
              <div class="permalink"><a
              href="{Permalink}">{MonthNumberWithZero}/{DayOfMonthWithZero}/{Year} {24HourWithZero}:{Minutes}</a></div>
           <div class="quote">
                           <div class="quotetext">
             “ {Quote}
            </div>
                           {block:Source}<div class="source">— {Source}</div>{/block:Source}</div>
                   {/block:Quote}
              
                   {block:Link}
              <div class="permalink"><a
              href="{Permalink}">{MonthNumberWithZero}/{DayOfMonthWithZero}/{Year} {24HourWithZero}:{Minutes}</a></div>
                       <div class="link">
            <h1><a href="{URL}" {Target}>{Name} » </a></h1>
                           {block:Description}
             <p class="description">{Description}</p>
                           {/block:Description}
                       </div>
                   {/block:Link}
              
          {block:Conversation}
              <div class="permalink"><a
              href="{Permalink}">{MonthNumberWithZero}/{DayOfMonthWithZero}/{Year} {24HourWithZero}:{Minutes}</a></div>
           <div class="conversation">
                           {block:Title}<h1><a href="{Permalink}">{Title}</a></h1>{/block:Title}
                               <ul>
                                   {block:Lines}
                                       <li class="{Alt}">
                                           {block:Label}<span class="label">{Label}</span>{/block:Label}
                                           {Line}
                                       </li>
                                   {/block:Lines}
                               </ul>
                       </div>
                   {/block:Conversation}
              
                   {block:Video}
              <div class="permalink"><a
              href="{Permalink}">{MonthNumberWithZero}/{DayOfMonthWithZero}/{Year} {24HourWithZero}:{Minutes}</a></div>  
                       <div class="video"> 
                           <div class="videobox">{Video-250}</div>
                           {block:Caption}
                               <div class="caption">{Caption}</div>
                           {/block:Caption}
                       </div>
                   {/block:Video}
 
          {block:Audio}
              <div class="permalink"><a
              href="{Permalink}">{MonthNumberWithZero}/{DayOfMonthWithZero}/{Year} {24HourWithZero}:{Minutes}</a></div>
           <div class="audio">
                           <div class="photobox"><div class="player">{AudioPlayerBlack}</div></div>
                           {block:Caption}
                               <div class="caption">{Caption}</div>
                           {/block:Caption}
                       </div>
                   {/block:Audio}
               </div>

         <div class="meta">
             <div class="metabox">
                 <p><span>posted :</span> {MonthNumberWithZero}/{DayOfMonthWithZero}/{Year} {24HourWithZero}:{Minutes}</p>
                 <p><span>tags :</span> {TagsAsClasses}</p>
                 {block:RebloggedFrom}<p><span>reblogged from :</span>
                 <a href="{ReblogParentURL}">{ReblogParentTitle}</a></p>{/block:RebloggedFrom}
             </div>

       <div style="font-size: 10px; text-align: left;"><a href="{Permalink}#disqus_thread">Comments (View)</a></div>
            </div>
           {/block:Posts}
{block:Permalink}
<script type="text/javascript">var disqus_url = "{Permalink}"; var disqus_title ="{block:PostTitle}{PostTitle}{/block:PostTitle}";</script>
<div id="disqus_thread"></div><script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/toshiswebmemo/embed.js"></script>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
{/block:Permalink}
<script type="text/javascript">
//<![CDATA[
(function() {
 var links = document.getElementsByTagName('a');
 var query = '?';
 for(var i = 0; i < links.length; i++) {
  if(links[i].href.indexOf('#disqus_thread') >= 0) {
   query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
  }
 }
 document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/toshiswebmemo/get_num_replies.js' + query + '"></' + 'script>');
})();
//]]>
</script>

        <div id="navigation">
         <div class="pages">
             <em>page</em> <span>{CurrentPage}</span> of
             <span class="total">{TotalPages}</span>
         </div>
        
      {block:PreviousPage}
       <a href="{PreviousPage}">« Previous Page</a>  
      {/block:PreviousPage}
  
      {block:NextPage}
       <a href="{NextPage}">Next Page »</a>
      {/block:NextPage}
        </div>

        <div id="footer">
         <a href="{RSS}">rss feed</a> /
         powered by <a href="http://www.tumblr.com/" target="_blank">tumblr</a> /
         theme by <a href="http://paulgiacherio.com" target="_blank">paulgiacherio</a>
        </div>
       </div>

Multimedia GIS-Board T-Map

2009-02-19T22:06:00.006+09:00

http://cosmos.js.yamanashi.ac.jp/~toshi/map/tmap.html#

This is the Web Application combined with Map(Google Map API for Flash) and Articles and BBS and Multimedia(Movie and Pictures). This is known as the Multimedia GIS-Board T-Map. The interface is written in Flex Builder, and the server side is written in PHP. You can view the source code by right click ⇒ "View Source" in the application.

This is one of the Flex Component. If you have any questions please feel free to email or comment (raine.toshi @ gmail.com).

マルチメディア地図掲示板T-Map

2009-02-19T21:58:00.009+09:00

http://cosmos.js.yamanashi.ac.jp/~toshi/map/tmap.html

地図（Google Map API for Flash）と記事・掲示板、そして動画・画像のマルチメディアを組み合わせたWebアプリケーション。通称はマルチメディア地図掲示板T-Map。インターフェイスはFlex Builderで制作、サーバーサイドはPHPです。ソースコードは右クリック⇒「ソースの表示」でみれます。

Flexのコンポーネントの一つとして参考にしていただければ幸いです。なにかご意見・要望・質問等がありましたら気軽にメール（raine.toshi@gmail.com）、コメントをよろしくお願いします。

スライド共有サイト：SlideBoomとSlideShareの比較

2008-11-22T04:09:00.005+09:00

パワーポイント等でつくったスライドをWeb上で共有し、ブログ等で公開できるサイトがあるので紹介。

今主だったものでSlideBoomとSlideShareがあるんですが、後者のSlideShareより前者のSlideBoomをお勧め。なぜかというとSlideShareは背景の色が変わる、フォントが全然変わってる（ゴシック⇒明朝）、アニメーションが再生できない等の問題がありますがSlideBoomは大丈夫でした。SlideBoomでも多少のレイアウトのずれがありますが今のところこれが一番だと思います。両者の比較は以下の実際のスライドで比べてみてください。

SlideBoom

SlideShare

Flexを用いたマルチメディア地図掲示板の開発

View SlideShare presentation or Upload your own. (tags: flex google)

Bloggerでコードをハイライトするには

2008-11-09T18:32:00.008+09:00

ソースコードを貼り付けるとき、ハイライトしてきれいに表示するJavascriptライブラリ↓

Googleのsyntaxhighlighter

このブログはBloggerってとこのブログを使っているのですがこれをBloggerを使うには以下の手順で

①FaziBear's Blogger Widgetsで"Add to Blogger"をクリック⇒ウィジットを追加。

②コードを張りつける箇所を
<pre name="code" class="php">
ソースコード
</pre>
で囲む。

このとき注意しなければいけないのが<や>を<や>に置換してから設置すること。PHPなんかでは<を<に全て置換をすれば>もちゃんと表示されます。

③class=""のところで表示するソースコードのプログラミング言語を指定します。
サポートしている言語と言語を指定するID

今のところActionScriptはサポートされてないようですがJavaと似ている言語のためActionScriptでもclass="java"を指定すれば以下のようにきれいに表示されます。


package components
{
import mx.controls.dataGridClasses.DataGridItemRenderer;
import mx.core.Application;

public class ColorRenderer extends DataGridItemRenderer
{
 public function ColorRenderer()
 {
  super();
 }

 override public function set data(value:Object):void
 {
  super.data = value;
  this.setStyle( "color", tmap( Application.application ).getTempColor( parseFloat( value.@janTemp.toString() ) ));
 }

}
}

Flex,AS3:File Upload & PHP Modification

2008-11-09T16:58:00.016+09:00

This is the sample component of File Upload using Flex・PHP.

Link to Demo of Flex File Upload
Source Code:Right clik⇒"View Source"

This example is from:Coding Cowboys: Uploading Files with Flex and PHP

Souce code of mxml/actionscript is perfect. But I found a few mistakes in PHP code.↓↓


<results>
<success><?=$success;?></success>
<?=$data;?>
<?=echo_errors($errors);?>
</results>
<?
}

function echo_errors($errors) {

for($i=0;$i<count($errors);$i++) {
?>
<error><?=$errors[$i];?></error>
<?
}

}

↑Because we need to divide XML and PHP correctly, we must change <?=$success;?> to <?php echo $success;?>.

So the modificated code is:


<results>
<success><?php echo $success;?></success>
<?php echo $data;?>
<?php echo_errors($errors);?>
</results>
<?php
}

function echo_errors($errors) {

for($i=0;$i<count($errors);$i++) {
?>
<error><?php echo $errors[$i];?></error>
<?php
}

}

below is notifications and whole PHP code.

○Change Upload Directory to be able to write.

○In PHP source code, wright a correct path to Upload Directory.

○In MXML source code, wright a correct path to PHP file.


<?php

$errors = array();
$data = "";
$success = "false";

function return_result($success,$errors,$data) {
echo("<?xml version=\"1.0\" encoding=\"utf-8\"?>");
?>
<results>
<success><?php echo $success;?></success>
<?php echo $data;?>
<?php echo_errors($errors);?>
</results>
<?php
}

function echo_errors($errors) {

for($i=0;$i<count($errors);$i++) {
?>
<error><?php echo $errors[$i];?></error>
<?php
}

}

switch($_REQUEST['action']) {

case "upload":

$file_temp = $_FILES['file']['tmp_name'];
$file_name = $_FILES['file']['name'];

//Path to Upload Directory
$file_path = "/home/toshi/public_html/map/up/myFileDir";

//checks for duplicate files
if(!file_exists($file_path."/".$file_name)) {

//complete upload
$filestatus = move_uploaded_file($file_temp,$file_path."/".$file_name);
if(!$filestatus) {
$success = "false";
array_push($errors,"Upload failed. Please try again.");
}

}
else{
$success = "false";
array_push($errors,"File already exists on server.");
}

break;

default:
$success = "false";
array_push($errors,"No action was requested.");

}

return_result($success,$errors,$data);

?>

Flexでのファイルアップロードの例

2008-11-09T02:46:00.024+09:00

Flex・PHPでFile Uploadするコンポーネントとを紹介。

Flexでのファイルアップロードのデモへのリンク
ソースコードはデモのページを右クリック⇒"View Source"で。

元ネタは⇒Uploading Files with Flex and PHP

ただこのサイトのmxml/actionscriptのコードには誤りがないのですがPHPのソースコード中に誤りがあります↓↓


<results>
<success><?=$success;?></success>
<?=$data;?>
<?=echo_errors($errors);?>
</results>
<?
}

function echo_errors($errors) {

for($i=0;$i<count($errors);$i++) {
?>
<error><?=$errors[$i];?></error>
<?
}

}

↑の部分はXMLとPHPの部分をはっきり分ける必要があるので
例えば<?=$success;?>となってるところは<?php echo $success;?>としなければいけません。よって正しくは


<results>
<success><?php echo $success;?></success>
<?php echo $data;?>
<?php echo_errors($errors);?>
</results>
<?php
}

function echo_errors($errors) {

for($i=0;$i<count($errors);$i++) {
?>
<error><?php echo $errors[$i];?></error>
<?php
}

}

以下注意点とPHPの全体のコードです。

○Uploadするフォルダは書き込み可にする。

○PHPのソースコード中のうｐするフォルダへのパスを正しく記述する。

○MXMLのソースコード中のPHPファイルへのパスを正しく記述する。


<?php

$errors = array();
$data = "";
$success = "false";

function return_result($success,$errors,$data) {
echo("<?xml version=\"1.0\" encoding=\"utf-8\"?>");
?>
<results>
<success><?php echo $success;?></success>
<?php echo $data;?>
<?php echo_errors($errors);?>
</results>
<?php
}

function echo_errors($errors) {

for($i=0;$i<count($errors);$i++) {
?>
<error><?php echo $errors[$i];?></error>
<?php
}

}

switch($_REQUEST['action']) {

case "upload":

$file_temp = $_FILES['file']['tmp_name'];
$file_name = $_FILES['file']['name'];

//アップロードするディレクトリのパス
$file_path = "/home/toshi/public_html/map/up/myFileDir";

//checks for duplicate files
if(!file_exists($file_path."/".$file_name)) {

//complete upload
$filestatus = move_uploaded_file($file_temp,$file_path."/".$file_name);
if(!$filestatus) {
$success = "false";
array_push($errors,"Upload failed. Please try again.");
}

}
else{
$success = "false";
array_push($errors,"File already exists on server.");
}

break;

default:
$success = "false";
array_push($errors,"No action was requested.");

}

return_result($success,$errors,$data);

?>

プログラミング技術専用ブログ始めます。

2008-11-08T23:03:00.004+09:00

このブログでFlex, ActionScript3, Flash, PHP等を主としたプログラミングのメモを書いていくつもりです。

特にFlexの情報は日本語のものが少ないので、自分で作ったものだけでなく、外国のサイトのものも日本語でわかりやすく説明できたらなって思ってます。また世界中に情報を発信したい内容は英語でも書いてみるつもりです。

これから自分が行き詰ったことの解決法を、こんなこと誰でも知ってるだろって思えるものでもどんどん書き込んでいきます。

よろしくお願いします！