« ◆トコロテンはダシでしょ | トップページ | ◇命題構文(概念構文)と陳述構文:「が」と「は」 »

ココログ・記述法メモ

この記事は2007年11月に置かれたものに、細かな項目を追加していったものです。
多くの項目が既に陳腐化しているため見直す予定です。

ココログで使用できる各種記述の試験です。
(色々な要素を貼り付けていますので、開くのに若干時間がかかります)



 Ajaxを用いてファイルを読み込む


次のコードで動かしています。

<script type="text/javascript">
function loadFile(fileName){
   httpObj = new XMLHttpRequest();
   httpObj.open('GET',fileName+"?"+(new Date()).getTime(),true);
   httpObj.send(null);
   httpObj.onreadystatechange = function(){
      if ( (httpObj.readyState == 4) && (httpObj.status == 200) ){
         document.getElementById("text1").value=httpObj.responseText;
         }
      }
   }
</script>
<input type="text" id="text1" style="width:30em" /><br>
<input type="button" value="ファイル読み込み" 
       onClick="loadFile('../../../data/sample.txt')" /> 
<input type="button" value="クリア" 
       onClick="$('text1').value='';" />


 javascriptの圧縮

Yahooのjavscript圧縮ツールを使ってインデックス情報などの圧縮を行っています。
ダウンロードし展開したものからjarファイルだけをtoolフォルダに移して使っています。
次のバッチファイルを作成し、起動しています。

@echo off
set COMMAND=java -jar ../../../tool/yuicompressor-2.4.2.jar --charset UTF-8
::
set /p ans=インデックス情報indexJSON.jsをインストールします y/n?
if not "%ans%"=="y" goto end
::
echo %COMMAND% indexJSON.js -o ../../../js/indexJSON.js
%COMMAND% indexJSON.js -o ../../../js/indexJSON.js
::
:END
::
@if not "%1"=="" goto NOPAUSE
pause
:NOPAUSE
なおMicrosoftのAjax Minifier4もインストールしてみたのですが、[スタートメニュー]から 起動すると圧縮プログラムのコマンドプロンプトがでてそこに手でコマンドを打つ( Windowsのコマンドプロンプトやバッチ、antでは起動できない)という全く理解不能の 仕組みでしたので即un-installしました。


 Ajaxを用いてJsonファイルを読み込む


次のコードで動かしています。

<script type="text/javascript" src="../../../js/json2.js"></script>
<script type="text/javascript">
function loadFile2(fileName){
   httpObj = new XMLHttpRequest();
   httpObj.open('GET',fileName+"?"+(new Date()).getTime(),true);
   httpObj.send(null);
   httpObj.onreadystatechange = function(){
      if( ( httpObj.readyState == 4) && (httpObj.status == 200)){
         document.getElementById("text2").value=httpObj.responseText;
         var data= JSON.parse(httpObj.responseText);
         alert(JSON.stringify(data,null,'   '));
         document.getElementById("text2").value="";
         }
      }
   }
</script>
<input type="text" id="text2" style="width:30em"/><br>
<input type="button" value="jsonファイル読み込み"
       onClick="loadFile2('../../../data/json.jsn')" />


 文字列の途中の色を変える


 ローカル作成のHTMLファイルのコードをutf-8にする

cocologは「記事作成」で作ったファイルの文字コードはutf-8になります。
一旦ローカルでshift-jisで作ったものも、「記事作成」に流し込む時点で utf-8になります。
通常はローカルのファイルの文字コードはなんであっても全く問題ないのですが 他ファイルを参照する場合、それらのファイルもutf-8である必要があるため、 ローカルでshift-jisで管理されていると文字化けが起こる場合があります。

ローカルファイルもutf-8とする場合、システムの標準がshift-jisであるWindowsでは 文字コード指定がないとローカルで表示することができません。
次の文を先頭(cocologの「記事作成」に与える部分の先頭です)に入れます。

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<meta>文がbodyの中に入ってしまいますが、問題はありません。


 jdocの特定記事をフレーム付きで参照する

index.htmlの後ろに?に引き続きパッケージのhtmlを書く

<a class=A1 href=
"http://fl-hotel-orlando.technology-related.com/javase/ja/6/docs/ja/api/index.html?java/io/BufferedReader.html"
>Java標準/BufferedReader</a>
Java標準/BufferedReader


 文字列の途中の色を変える

この文章はこの部分をspan/style=で色付けしています。

上の文章は次のように記述しています。

この文章は<span style="color:red">この部分をspan/style=で色付け</span>しています。

本ブログ標準のcssで次の様な定義

.red{color:red}
があるため、次の書き方もできます。
この文章は<span class=red>この部分をspan/class=redで色付け</span>しています。

この文章はこの部分をspan/class=redで色付けしています。

用意してあるclassは

  • red
  • blue
  • green
  • brown
  • gray
です。


 AS3でHTMLから指定した外部mp3を読む

次のコードでAS3によるサウンドプレーヤを動かしています。

 <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"  codebase=
 "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
 width="105" height="19" id="music" align="middle">
 <param name="FlashVars" value="src=http://k-hiura.cocolog-nifty.com/sound/swan.mp3">
 <param name="allowScriptAccess" value="sameDomain" />
 <param name="allowFullScreen" value="false" />
 <param name="movie" value="http://k-hiura.cocolog-nifty.com/tool/music.swf" />
 <param name="quality" value="high" />
 <param name="bgcolor" value="#002288" />	
 <embed src="http://k-hiura.cocolog-nifty.com/tool/music.swf"
  uality="high" bgcolor="#002288" width="105" height="19" name="hanon2" 
  align="middle" allowScriptAccess="sameDomain" allowFullScreen="false"
  type="application/x-shockwave-flash"
  pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
FlashVarsのsrcにmp3ファイルのURLを指定します。 プレーヤはhttp://k-hiura.cocolog-nifty.com/tool/music.swfに置いてあります。
このプレーヤはサウンドのロードが完了しなくても表示できます。ただし、... On Loading ...と 表示され完了まではプレイすることはできません。しかしながら、QuickTimeのように 画面表示が延々と待たされるようなことはありません。


 Appletを使う(試験)

APP


 等幅空白を使う

ココログとIEの相性が悪いのか<code><tt>などの 等幅文字指定を行っても、連続する空白では長さが異なってしまう 場合があります。見える文字は等幅になっています。

このためプログラムの引用部のインデントが乱れてしまい みづらくなっていました。

(IEでは乱れますが、firefoxでは乱れないという話も聞きました。)

また&emsp;などを沢山並べると途中から四角"□"に化けて しまうこともあります。
cssでスタイルをいじったのですがうまく行きませんでした。

<code>や<tt>の代わりに <font face="XX">で等幅フォントを強引に指定する ことにより、避けられることが分かりました。

次のように記述します。

<pre><font face="MS ゴシック">
// 記述内容
</font></pre>


 CSS定義を外部参照にする

次の内容のcssファイルを作成し、本文の前に<link>で 参照しています。

table.t{border:1px solid black ; border-collapse:collapse}
table.t td{border:1px solid black ; vertical-align:top}
TD.d{border:1px solid black ; vertical-align:top}
IMG.i{vertical-align:middle}

P.B1{border-left:blue 1.2em solid;border-bottom:blue 2pt solid;}
P.G1{border-left:green 1.2em solid;border-bottom:green 2pt solid;}
P.R1{border-left:red 1.2em solid;border-bottom:red 2pt solid;}
P.B2{border-left:blue 1.2em solid;border-top:blue 2pt solid;}
P.G2{border-left:green 1.2em solid;border-top:green 2pt solid;}
P.R2{border-left:red 1.2em solid;border-top:red 2pt solid;}
P.c{color: #000000;background-color: #cccccc}
A.A1{text-decoration:underline}
A.A1:link{color:#0000BB}
A.A1:link img{border-color:blue}
A.A1:visited{color:#003377}
A.A1:visited img{border-color:blue}
A.A1:hover{text-decoration:none;color:white;background-color:#4444bb}
A.A1:hover img{border-color:red}

.red{color:red}
.blue{color:blue}
.green{color:green}
.brown{color:brown}
.gray{color:gray}
.white{color:white}
.center{margin-left:auto;margin-right:auto;text-align:center}
b{font-weight:bold}

.quote{padding-left:1.5em;background:#E8E8E8}

div.indent{padding-left:2.5em}

このCSSにはナビゲーションキー用の定義(c,i)と 文書内タイトル用の定義(B1,R1)、 TABLE用の定義(t,d)、 リンク用の定義(A1)が含まれています。

<link>での参照は次のように行います。

<link rel="Stylesheet" 
 href="http://k-hiura.cocolog-nifty.com/tool/hi_style.css"
 type="text/css">


このブログでは冒頭にナビゲーションキーを置いてあります。

ナビゲートバーとして、本文の頭に次のような記述を書きます。

<p class=c>
<a name="top"/>
<a class=A1 href="http://k-hiura.cocolog-nifty.com/blog/2007/11/post_cf3e.html">
<img class=i src="http://k-hiura.cocolog-nifty.com/tool/prev.gif"></a>
<a class=A1 href="http://k-hiura.cocolog-nifty.com/blog/2007/11/post_5f3a.html">
<img class=i src="http://k-hiura.cocolog-nifty.com/tool/next.gif"></a>
<img class=i src="http://k-hiura.cocolog-nifty.com/tool/space_10.gif">
<a class=A1 href="http://k-hiura.cocolog-nifty.com/blog/2008/02/post_7164.html">
<img class=i src="http://k-hiura.cocolog-nifty.com/tool/index.gif"></a>
<img class=i src="http://k-hiura.cocolog-nifty.com/tool/space_10.gif">
<!--<a class=A1 href="http://k-hiura.cocolog-nifty.com/blog/2007/11/post_cf3e.html">-->
<img class=i src="http://k-hiura.cocolog-nifty.com/tool/prev_non.gif"><!--</a>-->
<a class=A1 href="http://k-hiura.cocolog-nifty.com/blog/2008/02/post_7164.html#tips">
<b>[小技メモ]</b>
</a>
<a class=A1 href="http://k-hiura.cocolog-nifty.com/blog/2008/03/todmpeg2ts_3b94.html">
<img class=i src="http://k-hiura.cocolog-nifty.com/tool/next.gif"></a>
</p>
無効キーとしてprev_non.gif,next_non.gifを用意してあります。

ページの最後に次の文をおきます。

<center><p class=c>
--- 以上 : <a class=A1 href="#top">先頭へ</a> ---
</p></center>

なお、記事内のナビゲーション用小タイトルはB1定義を用い次の様に作成しています。

<p><br></p>
<p class=B1>
<a name="nav"><b>&emsp;このブログのナビゲーションキー</b></a>
</p>


現在使用しているココログのテンプレートではリンク表示が見づらい ので、調整します。
リンク文字に下線を入れ、マウスが入ると文字とバックグラウンド色 が変わるようにします。
イメージはマウスが入ると枠の色を変えるようにします。

CSS定義に置いたA1を <a class=A1 href="">...</a>の形で参照します。

次のような記述で、

<a class=A1 href="http://k-hiura.cocolog-nifty.com/blog/2008/02/2001_383b.html">
■2001年宇宙の旅;ステーション5のCG動画</a>
<a class=A1 href="http://k-hiura.cocolog-nifty.com/blog/2008/02/2001_383b.html">
<img src="http://k-hiura.cocolog-nifty.com/tool/st5_scens.jpg"></a>
次の表示が得られます。
■2001年宇宙の旅;ステーション5のCG動画

class=A1を指定しない場合次のような表示となります。

■2001年宇宙の旅;ステーション5のCG動画


 単純線のTABLE

HTMLのTABLEの線は標準では立体を模した、極めて不自然で、非常に見づらいものとなっています。
万象酔歩ではこの煩わしい線を嫌い、次のような定義で、ごく普通のテーブルとなるように しています。
CSS定義のt,dを使い本文に次のようなTABLE文を置くと、

<table class=t>
<tr>
<td class=d>AAA</td>
<td class=d>BBB</td>
<td class=d>CCC</td>
</tr>
<tr>
<td class=d>aa</td>
<td class=d>bb</td>
<td class=d>cc</td>>
</tr>
</table>
次の様に表示されます。
AAA BBB CCC
aa cc


 音楽(mp3)の貼り付け

EMBEDで音(mp3)を貼り付けました。

<embed src="http://k-hiura.cocolog-nifty.com/sound/PavaneVn.mp3" 
       width="70" height="20" type="audio/mpeg" loop="false"
       repeat="false" autostart="false" align="left"
       >フォーレのパバーヌ</embed>
フォーレのパバーヌ

IE6でaudio/mpegに結び付けられるプレイヤーが WindowsXP-SP2とSP3のIEで変更になりました。 SP2ではプレイヤーが あるとページを開くのに時間がかかりましたがSP3ではかなり短縮 されています。表示は下の画のように変わりました(残念ながら サイズも変わったため欠けてしまっています)

欠けないよう設定をいじってみました。

<embed src="http://k-hiura.cocolog-nifty.com/sound/PavaneVn.mp3" 
       width="300" height="27" type="audio/mpeg" loop="false"
       repeat="false" autostart="false" align="left"
       >フォーレのパバーヌ</embed>

フォーレのパバーヌ

ただ、この指定ではSP2で間の抜けた表示になってしまいます。
現時点では良い対処法は分かっていません。

関連記事は[フォーレのパバーヌ]にあります。

地図(google map)の貼り付け

googleマップの「このページのリンク」にある埋め込みHTML文字列を入れました。

<iframe width="425" height="200" frameborder="0" scrolling="no"
           marginheight="0" marginwidth="0" 
           src="http://maps.google.co.jp/maps?ie=UTF8&om=1
                &amp;s=AARTsJqzARj-Z8VnW5pkPMLMmZbqrJcYpw&amp;
                ll=35.588264,139.284056&amp;spn=0.000872,0.00228&amp;
                z=18&amp;output=embed">
</iframe>
<br />
<small>
<a class=A1 href="http://maps.google.co.jp/maps?ie=UTF8&om=1&
           ll=35.588264,139.284056&spn=0.000872,0.00228&z=18&
           source=embed" style="color:#0000FF;text-align:left"
>拡大地図を表示</a></small>


拡大地図を表示

 動画(YouTube)の貼り付け

YouTubeの動画を埋め込んでみました。YouTubeの再生画面で得られる埋め込み記述 をそのまま使っています。

<object width="425" height="355">
<param name="movie" value="http://www.youtube.com/v/SOEEZwcmrBs&rel=1"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/SOEEZwcmrBs&rel=1" 
       type="application/x-shockwave-flash" wmode="transparent"
       width="425" height="355"></embed></object>




 動画(flv-swf)の貼り付け

flashビデオを貼り付けました。内容はYouTubeに上げたものと同じです。
残念ながらFlash-CS3のパブリッシュ機能で得られるOBJECT/EMBED記述では ローカルでさえ再生できませんでしたので、 iframeにsrc参照で出すようにしました。
.swfと.flvの他、コントロール部のスキンファイル(ここでは SkinUnderPlayStopSeekFullVol.swf)を同一フォルダに置く必要があります。

<iframe src="http://k-hiura.cocolog-nifty.com/swf_flv/discoverDiscovery.swf"
        width="333" height="288" autoRewind="true" loop="true">
ブラウザがIFRAMEに対応していない場合、ここにムービーは出ません。
<a class=A1 href="http://k-hiura.cocolog-nifty.com/swf_flv/discoverDiscovery.swf"
>ディスカバリー</a>をクリックしてください。
</iframe>

関連記事は[◆2001年宇宙の旅、ディスカバリー号の構造]にあります。


 flashビデオの自動繰り返し再生

ActionScriptを記述し、flashビデオがリピート再生となるようにしました。
スクリプトは次の通りです。(ActionScript3.0です)
import fl.video.*;
var my_FLVPlybk                = new FLVPlayback();
addChild(my_FLVPlybk);
my_FLVPlybk.skin               = "SkinUnderPlayStopSeekFullVol.swf"
my_FLVPlybk.skinBackgroundColor= 0x666666;
my_FLVPlybk.autoRewind         = true;
my_FLVPlybk.autoPlay           = false;
my_FLVPlybk.scaleMode          = VideoScaleMode.NO_SCALE;
my_FLVPlybk.align              = VideoAlign.TOP_LEFT;
my_FLVPlybk.source             = "discovDiscovRep.flv";
my_FLVPlybk.addEventListener(fl.video.VideoEvent.COMPLETE, cp_listener);
function cp_listener(eventObject:fl.video.VideoEvent):void {
	my_FLVPlybk.play();
}

関連記事は[◆2001年宇宙の旅、ディスカバリー号の構造]にあります。


 flashビデオのポーズなどの制御

flashビデオを2つswfにセットし、片方のstart/stop/pause/scrubイベント を拾い、他方へ反映させるActionScriptを書きました。

import fl.video.*;
var my_FLVPlybk = new FLVPlayback();
addChild(my_FLVPlybk);
var my_FLVPlybk2 = new FLVPlayback();
addChild(my_FLVPlybk2);
my_FLVPlybk.skin = "SkinUnderPlayStopSeekFullVol.swf"
my_FLVPlybk.skinBackgroundColor=0x666666;
my_FLVPlybk.autoRewind=true;
my_FLVPlybk.autoPlay=false;
my_FLVPlybk.scaleMode =VideoScaleMode.NO_SCALE; 
my_FLVPlybk.x=80;
my_FLVPlybk.y=213;
my_FLVPlybk.source = "st5_scen1X.flv";
my_FLVPlybk.addEventListener(fl.video.VideoEvent.COMPLETE, cp_listener);
function cp_listener(eventObject:fl.video.VideoEvent):void {
	my_FLVPlybk.play();
}
my_FLVPlybk.addEventListener(fl.video.VideoEvent.STOPPED_STATE_ENTERED, cpS_listener);
function cpS_listener(eventObject:fl.video.VideoEvent):void {
	my_FLVPlybk2.stop();
}
my_FLVPlybk.addEventListener(fl.video.VideoEvent.PLAYING_STATE_ENTERED, cpP_listener);
function cpP_listener(eventObject:fl.video.VideoEvent):void {
	my_FLVPlybk2.play();
}
my_FLVPlybk.addEventListener(fl.video.VideoEvent.PAUSED_STATE_ENTERED, cpPA_listener);
function cpPA_listener(eventObject:fl.video.VideoEvent):void {
	my_FLVPlybk2.pause();
}
my_FLVPlybk.addEventListener(fl.video.VideoEvent.SCRUB_FINISH, cpSC_listener);
function cpSC_listener(eventObject:fl.video.VideoEvent):void {
	my_FLVPlybk2.seek(eventObject.playheadTime)
}
my_FLVPlybk2.autoRewind=true;
my_FLVPlybk2.autoPlay=false;
my_FLVPlybk2.scaleMode =VideoScaleMode.NO_SCALE; 
my_FLVPlybk2.align =VideoAlign.TOP_LEFT;
my_FLVPlybk2.source = "st5_scen1.flv";
my_FLVPlybk2.addEventListener(fl.video.VideoEvent.COMPLETE, cp_listener2);
function cp_listener2(eventObject:fl.video.VideoEvent):void {
	my_FLVPlybk2.play();
}

関連記事は
[◆2001年宇宙の旅;ステーション5のCG動画]
[◆2001年宇宙の旅に学ぶCG照明法(2)]
に有ります。


 アニメ(flash)の貼り付け

flashアニメ(.swf)を埋め込みました。

<embed src="http://k-hiura.cocolog-nifty.com/swf/hiuraLOGO.swf"
 quality=high
 width="200" height="100" type="application/x-shockwave-flash"  />
通常はvmode="transparent"を指定しますが、ここでは指定していません。

しばらく見てると、、、動きます。

インタラクティブなものも埋め込んでみました。

<embed src="http://k-hiura.cocolog-nifty.com/swf/canon_struct.swf"
 quality=high
 width="480" height="180" type="application/x-shockwave-flash"  />


関連記事は [♪パッヘルベルのカノンの構造] にあります。

文字入力やタイマのあるもの。

<embed src="http://k-hiura.cocolog-nifty.com/KANON2/canon_player.swf"
 quality=high
 width="480" height="180" type="application/x-shockwave-flash"  />



 モーションgifの貼り付け

Flashと同じ内容のモーションgifを<img>で貼り付けてみました。
<img src="http://k-hiura.cocolog-nifty.com/image/hiuraLOGO.gif">

flashアニメと同じネタなのですが、、、、


 ウムラウトなどの特殊文字

=== 特殊文字について ===
ウムラウト、アクサン付きの文字はHTML文字参照を使う必要があります。
Bartók(Bart&oacute;k)
Dvořák(Dvo&#345;&aacute;k)
Händel(H&auml;ndel)

逆スラッシュは&#9586;です。

int main(int argc,char*argv[]){
   cout<<"Hello World╲n";
   }


 外部HTMLのインクルード(JavaScriptで固定記述)

HTMLは、信じ難いことですが他HTMLのinclude機構を持ちません。
JavaScriptでファイル内容を出力することを検討したのですが 互換性に若干問題がでるようです。
ここでは単純にdocument.write()でHTMLを出すスクリプトを呼び出し てみました。
スクリプトの内容は
document.write('\
<p>\
<b>### 妄想物理の世界</b>\
<ul>\
<li>\
<a class=A1 href="http://k-hiura.cocolog-nifty.com/blog/2007/11/post_956f.html"\
>◆双子のパラドクスのパラドクス;なぜ片方だけ走る</a>\
</li>\
...途中省略...
</p>\
');
です。通常の記述をdocument.writeの中にシングルクオートで 囲みいれたものです。行の最後にバックスラッシュを入れ文字列 がつながっていることを指定します。
注意!ココログではUTF-8でなければなりません

呼び出しは

<script src="http://k-hiura.cocolog-nifty.com/js/mousouPhis_utf.js"
 langage="JavaScript"></script>
です。
--- この後に<script>呼び出し

--- この前に<script>呼び出し


 外部HTMLのインクルード(iframe)

(この方法は望む結果が得られなかったため使用していません)
HTMLは、信じ難いことですが他HTMLのinclude機構を持ちません。
ここでは妥協的解決として<iframe>を使う方法を示します。
<iframe src="http://k-hiura.cocolog-nifty.com/tool/for_include_utf.htm"
 frameborder=0 height="100%" width="100%"></iframe>
残念ながらsrcのサイズに合ったサイズにする方法は分かりません。
height,widthを記述しない場合、スクロールバーの付いた小さな 窓が開きます。heightの100%の意味は全く分かりません。

注意-1
ココログでは includeするhtmlファイルはUTF-8でエンコードされていなければ なりません。
includeされるHTMLの中にcharsetを書いても無効です。

注意-2
参照するhtml内に<a class=A1 href="">での参照がある場合、そのままでは iframe内に参照が展開されてしまいますので、必ずtarget="blank"で 別窓に出すように記述する必要があります。

includeするHTMLの例

<p>
-------ここからは別文書(for_include.htm)になっています。<br>
文書中に別文書の参照<a class=A1 href="">を置くことも可能です。<br>
<ul>
<li>
<a href="http://k-hiura.cocolog-nifty.com/blog/2008/02/2001_383b.html"
target="blank">
■2001年宇宙の旅;ステーション5のCG動画
<br>
<a href="http://k-hiura.cocolog-nifty.com/blog/2008/02/2001_383b.html"
target="blank">
<img src="http://k-hiura.cocolog-nifty.com/tool/st5_scens.jpg"></a>
</li>
</ul>
<br>
-------ここまで別文書です。
</p>

実際にinclude


 ###

本記事は当初「引っ越して来ました」と名づけていました。
ココログの前に3日程別ブログを試したのですが、自由度が低く 音楽を貼り付けや、TABLEの変更等ができなかったため、引っ越して 来ました。
本記事はその経緯と試験を述べたものでしたが、役に立つかも しれない"試験"記事だけにしてタイトルも変更しました。
なお、11.1~11.3の記事は別ブログに11.1~11.3に載せたものを こちらに移したものです。

|

« ◆トコロテンはダシでしょ | トップページ | ◇命題構文(概念構文)と陳述構文:「が」と「は」 »

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/489055/8737002

この記事へのトラックバック一覧です: ココログ・記述法メモ:

« ◆トコロテンはダシでしょ | トップページ | ◇命題構文(概念構文)と陳述構文:「が」と「は」 »