String.replaceで知らなかった件

User がノート欄にやたら長いリンク先をそのまま張り付けて、SharePointのリストの表示が著しく損なわれるという現象が自分の管理するサイトコレクションで何件か発生している。 ユーザー教育を行ってリンクの説明を別途短文入力してください、というのは簡単だが、だまって従ってくれるような従業員ばかりではない。 そこで長いリンクを見つけたら強制的に短い文字列に置き換えてしまう、という仕掛けをJavaScriptで書いてしまえばよいのだと思いつき、 試してみた。 結果、以下のような関数を記述し、これを描画時に呼び出す形で解決した。

function shortenAnchor(text) {

    if (text===null) {
        return "";
    }
    let testPattern = /(<a.*?href=.+?>)(.*?)(<\/a?>)/g;

    function replacer(match, p1, p2, p3) {
        if((p2.length)>30) {
            p2 = p2.slice(0, 25) + '...';
        }
        return [p1, p2, p3].join('');
    }

    return text.replace(testPattern, replacer);
}

このコードで何をやっているか。 まずtestPatternを正規表現(RegExp)で記述する。 RegExpで a tag elements をグローバルにトラップする。トラップしたエレメントはタグの前の部分、中身のテキスト部分、タグの後ろの部分にグループわけされ、それぞれの文字列は$1,$2,$3として利用可能になる。( a tag element 全体のマッチは$&)。 そして、あとは String.replaceを使ってマジックをおこすわけだが、Implementationを試行錯誤している最中に 二つ目のパラメーターが実は関数でもよいのだ、というのを本日初めて知ったわけで、それを使ってうまく書くことができた。 ここに関数を使うと、以下の引数が この順番で使えるようになる。 まずは TestPatternそのもののマッチ $&, それぞれグループ分けした部分のマッチ $1,$2,$3。 よって match,p1,p2,p3として利用可能にしておく。実はこの後ろにIndexなどのパラメーターも続くのが、今回は必要がないので無視。 
この replacer という関数ではこの中身の文字列$2(p2)の長さが30文字以上あった場合、最初の25文字以下を切り捨て点三つ…を最後に追加するというもの。 この関数自体を二つ目の引数として使う。 Testしてみたら一発で完動したので感動(おやじギャグです)

普通はString.replaceというと

"this is a pen".replace("this","that") //=>"that is a pen"

という簡単な使い方は知っていたし、 最初のパラメーターを正規表現にすれば $& $1 etc., などのパラメーターを使ってかなり柔軟な置き換えなどができることも知っていて使ってはいたのだが、まさか関数まで使えるとは思っていなかった。 これは素晴らしい、と思った次第

TypeScript その2

年末の休暇を利用してtypeScriptの演習を続行中。 現在まで理解できたところをとりあえず列挙。
nodejs が導入されている必要あり。

npm install typescript -g

これで tscコマンドが使えるようになる。

tsc example.ts

そして、これでexample.ts から example.jsがトランスパイルされる。

プロジェクトフォルダー内で

 tsc init

とやると、コンパイラー設定用のtsconfig.jsonが作成され規定値が設定される。例えば、出力のJavaScriptのレベルが

<pre>”target”:”es5″</pre>

などと記述されている。またコードをトランスパイルしたときのエラーの出力設定などもできる。今のところ全く変更の必要のないレベルでトライアル中。

TypeScript は 基本的には JavaScriptのsuper setなのだが、 ’let’, ‘const’, ‘arrow function ()=>’, ‘ … spread operator’,’Template strings’ などes2015の書式が既にサポートされている。 なのでexample.tsではこれらの言語機能を使ってプログラムを書き、tscでトランスパイルすると、これらの表記をまだサポートしていない現行のブラウザでも動くようなJavaScriptに書き換えてくれる。上のConfig例ではes5レベルのコードに置き換わる。 つまりBabelと同じような使い方ができる、。

type safeなので 異なったタイプの変数へのアサインは論外としてもその可能性が生じそうなコードにはエラー表示が鬼のようにでる。例外処理とか、Interface定義を記述して対処すると満足して何も言わなくなってくれるので、バグの可能性のあるコードを書く可能性が低くなる。

TypeScript 入門

TypeScriptのイントロがDev.office.comにあるので眺めてみた。

tsとして以下の例が載っている。

class Student {
    fullName: string;
    constructor( public firstName, public middleInitial, public lastName){
        this.fullName = firstName + " "+ middleInitial + " " + lastName;
    }
}
interface Person {
    firstName: string;
    lastName : string;
}

function greeter(person: Person){
    return "Hello, "+ person.firstName + " " + person.lastName;

}

let user =new Student("Jane","G.","Doe");

document.body.innerHTML=greeter(user);

これをJSにコンパイルするとこうなる(WebStormはプラグインが動いてダイナミックに自動生成する)

var Student = (function () {
    function Student(firstName, middleInitial, lastName) {
        this.firstName = firstName;
        this.middleInitial = middleInitial;
        this.lastName = lastName;
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
    return Student;
}());
function greeter(person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}
var user = new Student("Jane", "G.", "Doe");
document.body.innerHTML = greeter(user);

うむむむむ。JSのほうがパターンに親近感があって読みやすいんですけど。でもそういうことじゃなくてTypeやクラスの定義がしっかりできて、あとあとの管理が楽、ということなんだろうな。

SharePoint Change Page Title without changing site address ページタイトルをサイトアドレスを変えずに変更する。

これってSharePointのこの部分がちゃんと動いていないだけなのではないかとおもうのだが、今現在のOffice365(SharePoint Online)のインプリメンテーションだと、Page Attributeでページタイトルを変更するとaspx ページの名前自体が変わってしまう。

たとえば https://mysite.sharepoint.com/sites/mysite/SitePages/thispage.aspx

というページがあるとして、これだと表示されるページタイトルが”thispage”となってしまう。これを Edit pageからタイトル変更して ”This Page”とすると、 サイトアドレスが

https://mysite.sharepoint.coms/sites/mysite/SitePages/This%20Page.aspx

となってしまう。サイトアドレスをなるべく短くしたいのでページタイトルとサイトアドレスの一部になるページの名前を別けることができればよいのだが、今の時点ではできない。

世の中には同じことを不便と考える人がいるわけで、何件かの記事ではSharePoint Designerを使ってマスターページを変更する方法が述べられている。すでにSharePointにある機能をターンオンするだけの簡単な修正ではあるが、

1)マスターページを変更する必要がある。
2)SharePoint Designerが必要

すなわち、サイトオーナーでかつSharePoint Designerを使えるという条件を満足していなければならない。

ブラウザーのdebug Toolで確認してみたら以外と簡単にタイトルだけ変更できることが判ったのでここに書いておく。 サイトのエディター権限があればできるというのが利点。

ターゲットのページでエディットモードに移行し、適当なところに Insert ->Embed Codeでコードエディターを開く。

以下を入力する

<script>
document.getElementById('DeltaPlaceHolderPageTitleInTitleArea').innerHTML="My Page";
</script>

これだけである。 ページタイトルが”My Page”となる。

SharePointの場合、CSRというメカニズムがあって、表示する内容の大部分は一度ブラウザーがスクリプトを実行したのち、データを描画するため、 ページへの書き込みのタイミングを遅らせなければならないのが普通だが、タイトル部分は最初の読み込み時に描かれてから変更がないため、上のようにブラウザがスクリプトを読み込んで即実行、という単純な動作でも有効なんである。

ちなみにWiki PageとWeb Part Pageの両方で有効。 Site Pageはためしていない。

 

 

constructing long string with Javascript

There is a time you need to construct a string (for instance, to create a html block) in your code.

In the simpliest approach, youcan constract the string variable  like so

var html='<head><body>’+contentVariable+’more stuff’ + ‘</body></head>’;

this becomes very messy quickly once more variables, more nested construction is needed.

I used to keep concatinating the string, like so

var html='<head></body>’;

html +=  contentVariable;

html += ‘ more Stuff’;

html += ‘</body></head>’;

 

 

Then I saw a pattern in the couple of codes from internet;

var h=[‘<head><body’];

h.push(contentVariable);

h.push(‘more Stuff’);

h.push(‘</head></body>’);

var html=h.join(”);

The More concatenation needed, the more convinient the last method becomes. Key is to join the array element with null delimiter.

Raspberry Pi でパソコン電源をInternet上から操作

家の外部からタブレットなりノートパソコンなりを使って自宅のパソコンにリモートアクセスするためのアプリというのは色々ある。Internet経由でアクセスする、というもので、Linuxでは当たり前のように実装されているし、 WindowsでもRemote Desktopというアプリケーションが同梱されているし、ファイアウオールでRemote Desktopが使えない環境でもWebベースのTeamViewer とかlogmeinというサードパーティの製品を使えばセキュアな接続がいとも簡単にできてしまう。 Chromeをブラウザとして使用しているのならChrome remote desktopというアプリが今の旬である。

 なぜそんなことが必要か、という疑問が湧くかもしれないが自分の場合、外部からお気に入りの開発環境にログインし、コード開発を一つのマシン上で行う、という使い方がメインになっている。 もちろん将来的にすべての作業がブラウザ上でできる、という環境が構築されればそんな必要はなくなるわけだが、

問題はパソコンにアクセスするには当然のことながら当該パソコンの電源が入っていなくてはならない、という事。
 エコの観点からみると年がら年中つけっぱなしになっているパソコン、というのはエネルギーの浪費に見える。 WEBサーバーを自宅のパソコンを使って構成していた時には電源をつけっぱなしにするしかなかったのだが、アイドル状態でも常に80Wくらいの消費電力が発生していた。
 現在はCubieboardという、手のひらに収まるサイズのArmcortexの開発ボードをサーバーとして使って賄っており、消費電力は3W以下だ。

で、パソコンの電源を使うときだけ遠隔操作でオンする方法がないか調べてみた。

 InstructableにElectric Impというモジュールを使って電源のオンオフをする方法が紹介されている
このモジュール、SDカードと同じform factorだが、内部にWifiモジュールとArm Coretex M3を内臓したれっきとした開発ボードであって、クラウドサービスに接続してパソコンやタブレット上から専用のコントロールパネルアプリを使って接続されたデバイスのリモートコントロールができるようになっている。

InstructableではこのElectric Impに簡単なトランジスタを追加して、PCのPower switch lineを瞬間的にショート状態にする。(つまりパソコンのスイッチを押したのと同じ状態にする)ことによってPCを起動する方法が述べられている。 Electric Impの値段は25ドル程度だが、サポート用の部品(Imp用のブレークアウトなど)を買い足すと40ドルくらいの出費になりそうだ。
自宅でcubieboardのWEBサーバーを随時動かしているのであえてアカウントを作ってクラウドを使ってコントロールする必要はないわけで、 そうすると似たようなことはArduinoでもできるはずと思うわけだが、これまたArduino本体にWifi、あるいはEthernetシールドを追加すると40ドルくらいの出費になる。 CubieBoardのGPIOをパソコンのスイッチに接続して操作することも可能だろうが、部屋が2階と地下室に分かれているし、メインサーバーになっているカードのGPIOで他のデバイスをハードウエアコントロールというのは安全性の面から心理的抵抗がある。

そこで遊び終わって引出しに眠っていたRaspberry Piを使うことにした。Desktop用のLinuxが走るほどのグラフィック性能を持つボードをただの電源スイッチとして使う、というといかにももったいない感じがするのではあるが Piの値段も含めて40ドルくらいで済んでしまうのでコストパーフォマンスの面から考えると他の方法に比べても高くはない、というか他の手間を考えるとこちらのほうが安上がりの感じ。

調べてみるとデバイス制御をPythonベースのhttp サーバーから実行できるWEBIOPIというPi用のライブラリーを発見した。 これをインストールするとGETとかPOSTのHTTP用のプロトコルを使ったRESTという手法でハードウエアのコントロールができるようになる。 つまりWEBサーバー上にページを作り、そのページ上にボタンを描画して、WEBIOPIで提供されているRESTコールを紐つけるという方法でPiのGPIOピンの遠隔操作ができるようになる。 このRESTという手法、非常に単純で、urlのパスに模してパラメーターをサーバーに送ってあげるというもの。GETはアドレスをブラウザで指定するだけで実行できるのでたとえば APIですべてのGPIOの状況を取得するAPIを使うには webiopiをバックグラウンドで走らせている状態で、

https://example.com/GPIO/*

とアドレスをブラウザに打ち込むだけで、Jason書式でGPIOの各ピンの状況が返ってくる。 ただし、これではページの表示自体がJasonのレスポンスになるので実用的ではなく、実際にはJavaScriptでコードを書くことになるが、webiopiにはうwebiopi.jsというヘルパーファイルが同梱されているので、使う難易度は低くなっている。

GPIOの使い方だが、
出力用に設定したGPIOピンをトランジスタを介してパソコンの電源スイッチとパラレルに接続し、パルス上の信号を出力してやるとパワースイッチを押したのと同様のことになり電源が立ち上がる。(電源が入っているときには逆に電源が落ちる)。電源スイッチへ接続されるピンはパソコンのマザーボード上のフロントパネルコネクター部分(パソコンケースのケーブル類を接続するコネクタ部分)に接続ピンがあるのでワイヤーをスプライスしてつなげてやればよい。。
また信号を出す前にパソコンの電源が入っているかどうかをわかっている必要があるのだが、フロントパネルコネクターには電源表示用のLEDへ接続されるピンも存在している。 そこでこのピンをGPIOでモニターすることによってパソコンに電源が入っているかどうかの判定をすることにした。

実際に組んだ回路。使ったGPIOピンは25をパワースイッチ用の出力に、24をLED電圧モニター用の入力にそれぞれ使用。 IntelのPC Interface 仕様(下に抜粋を載せます)を読む限り、パワースイッチ端子はトランジスタに直接接続(PWR+をコレクタ側に、PWR-をEmitter側に)しても大丈夫と思うが、5Vの小型リレーがたまたま手元にあったので使ってみた。NPNトランジスタのかわりに2N7000のようなFETを使えば、R1は必要ない。入力ピンのほうはLEDのVfでクランプされる電圧になるので規定の3.3V以下。万が一LEDがオープンとなっ場合5Vかかってしまうが、GPIOには保護用のクランプダイオードくらいはいっているのだろうと勝手に思い込んでいるので,保険は電流制限のR2のみ。

Table 5. Switch/LED Front Panel Electrical Connection

Pin Signal Description
2 FP PWR/SLP MSG LED pull-up (330 ohm) to +5 V
6 PWR_SW_P Power Switch high reference pull-up (10000 ohm) to +5 V
8 PWR_SW_N Power Switch Low reference pull-down (100 ohm) to GND

贅沢の極み?
贅沢の極み?

html pageの記述


<!DOCTYPE html>
<html lang="en">
<head>
<base href="https://example.com/" />
<title>PC power </title>
<!--[if IE]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>

<body>
    <h2>Turn On Basement PC</h2>
    
パソコンの電源操作ボタンでやんす。!
<form class="buttonBar"></form>

<script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="poweronbutton.js"></script>
</body>
</html>

参照されているJavascriptの記述

/**
 * Created on 5/4/14.
 * poweronbutton.js となっているが、実際にはGPIOのモニターも行う総括的なコード
 * powerbutton element id='pb'
 * html form tag class = buttonBar.
 * GPIO #25 connected to 1n2222 which drives spdp relay to momentariry close power switch.
 * PC power switch is momentary switch.  if PC is off, it will turn on PC.  if PC is on, it will turn off pc
 * relay connected to power connections of PC system panel terminals.
 * GPIO24 connected to Power LED terminal.
 * webiopi (python httms and coap server) installed on target raspberry pi
 *
 */
function setupGPIO(){   // set GPIO25 to out for pc power switch connection.
                        // and  GPIO24 to in  for monitoring PC power LED terminal status
    $.post( 'https://example.com/GPIO/24/function/in',
        function(data) {
            if (data==='IN')setTimeout(monitorPower(),1000);
                  });
    $.post( 'https://example.com/GPIO/25/function/out',
        function(data) {
            data =(data=='OUT')?'PC Power':'setup failed';
            $('#pb').attr("value",data);

        });
}

// }
function turnon(){ // RET command to output pulse
    $.post(
        'https://example.com/GPIO/25/sequence/1000,010',
        function(data) {
            data=(data==0)?'Power switch pushed':'NG';
            $('#pb').attr("value",data); }

    );
}
function monitorPower(){//monitor GPIO 24 status every one second
    $.get('https://example.com/GPIO/24/value',
        function(data){
            data= (data==='0')?'PC is OFF':'PC is ON';
            $('#powerstatus').html(data);
    setTimeout(monitorPower(),1000); //call myself every 1second

})

}
$(function(){
    $('<input type="button" class="power" id="pb" />')
        .appendTo('.buttonBar')
        .attr("value", "Initializing")
        .attr("title", "Turn on Somethin'")
        .click(function () {
            turnon();
        });
    $('<div></div>')
        .appendTo('.buttonBar')
        .attr('id','powerstatus');
      setupGPIO();
    }
);

ターゲットのRaspberry Piにwebiopiが導入され起動されていることが前提になる。 また、上の方法では同梱されてくるwebiopi.jsは使わずに自前のJavaScriptでREST APIを直接アクセスしている。

ページの仕組み:
ブラウザーがページを読み込み終わった時点で、上のjavascriptが以下の作業を実行する。
ボタンを描画し、ボタンのラベルを”Initializing” と表示する。
GPIO25を出力ピンに設定。 ボタンのラベルを”PC Power”と書き換え、ボタンのクリック動作にパルスを送信するRESTコマンドを紐つける。
GPIO24を入力ピンに設定。同時に入力ピンの1秒ごとのモニターをスタート。WEBIOPIからRESTで返された状況に応じてページ上に”Power is ON” または ”Power is OFF”を一秒ごとに更新表示

JavaScriptの部分はRefactoringやnamespacing をやっていないので改善の余地あり。またPower LEDのモニターだけではパソコンがオンしていることはわかっても、実際にWindowsが立ち上がっているかどうかはわからないので、何らかのインターネットサービスをPi側からモニターする手法を併用するほうがよさそうだし、CSSの記述も追加してページの見栄えもよくしたいと思うが、一応初期の目的はこれにて達成。

なお、WEBIOPI自体にログイン形式のセキュリティ機能が実装されており、ページの最初のロード時にログインネームとパスワードを聞いてくる仕組みになっている。ログインとパスワードの初期値がそれぞれ”webiopi” と”raspberry” となっているので、マニュアルの手順に従って変更しておく必要がある。

また、Raspberry Piへの電源だが、パソコンの電源に5V standbyが存在しているため、ここから引き込んでいる。24p/20pコネクタの紫の線だが、マザーボードの電源側への要求スペックが500mAで電源側の仕様が2Aなので余裕のようだ。Raspberry PiもPCの筐体に入れてしまったので見た目もすっきりである。

<後記> 電力消費計を入手したので、実際のところ、どれだけエコになっているのか測定してみた。 パソコンを普通に電源投入すると80Wくらの消費になっていた。 パソコンをオフにすると7Wだ。パソコン用の電源が動いていて5Vのスタンバイ電源からPiとその他に供給しているということだ。 その差73Wだが、電気代で考えるとまったくパソコンをオンしなかった場合、年間約50ドルちょっとの節約になる。パソコンの稼働率が10パーセントくらいと仮定すると45ドルの節約なので1年でもとが取れる計算になる。

boneScriptで遊ぶ

Beagleboneblackを電子工作用にリザーブしたので、Angrstrom Linux についてくるbonescriptで遊んでみた。(Debian wheezyのイメージになっていたeMMCにAngstromの最新イメージを改めて焼き直した。) 普通javascriptといえばWEBクライエント用のプログラム言語だし、 C++やJavaなどいじっているプロの方から見るとToy Lanuguageなどとバカにされがちだけれど、自分のような日曜プログラマにとっては非常に重宝するtool なんである。 boneScriptは、このjavascriptをサーバー側で使えるようにしたnode.jsというプログラム上で走る。 BBBのハードウエアをJavaScriptの文法で操作してしまおうという優れものだ。 node.js は一般的にはwebサイトのサーバー側を能動的に管理するような形で使われるのだと思うけれど、boneScriptと組み合わせるとPC上のプログラミング言語として機能する。

JavaScriptの特徴としてプログラムの非同期実行ということがあげられる。jQueryの使い方で一度はまったことがあって、 関数によっては前に呼び出して得たreturn情報を次のステートメントで使うためにはちょっと待てという感じでプログラムの流れをブロッキングするかコールバック処理を使う必要がある。 逆に言えばコールバックを使ってのイベント処理には力を発揮する。

その特徴を使って以下のようなbonescriptをいたずら書きしてみた。BBBに実装されている4つのLEDをてんでバラバラに明滅させる、というだけのプログラム。

//#!/usr/bin/node
//uncomment the above line and chmod +x  to make it shell executable.
//This program will randomly turn on/off four on board LEDs.
// 11/28/2013
//setup()
  var b = require('bonescript');
  var LEDs=['USR0','USR1','USR2','USR3'];
  for (var i=0; i < LEDs.length;i++) b.pinMode(LEDs[i], b.OUTPUT);

//loop();
    for (var i=0;i < LEDs.length;i++) animateLED(LEDs[i]);

//helpers
function animateLED(led){
    function toggleLED(led){ //randomly toggle LED
        b.digitalWrite(led,Math.floor(Math.random()*2)?b.HIGH:b.LOW);
    }
    function randomTimer(){ //randomly set timer between 0~199msec)
        return Math.floor(Math.random()*200);
    }

    setInterval(function(){toggleLED(led);},randomTimer());
}

Arduino の流儀に従って、setup 部分と loop部分を書いてみたが、ごらんのとおり、while/until 的なloopなどしていない。 animateLED()という関数を4回呼び出したあとは、それぞれの関数インスタンスが勝手にタイミングを作って繰り返しの明滅を行っているわけで、それぞれ非同期実行されている。

ところで、
上のスクリプトはCloucd9というIDEから直接実行させる他にも、command line でも

node randomLED.js

というように、実行可能。 いちいちnode を指定するのが面倒ならば、 プログラムの一番上の行にシュバング(#!)を追加してNodeプログラムだということを明示し、

#! /usr/bin/node

randomLED.js を実行可能としておけばプログラム名を指定するだけで実行できる。

$ chmod +x rondomLED.js
$ ./randomLED.js

もともとNode.jsがPHPと同じようにサーバー側のスクリプトを実行することを目的に書かれていることを考えると、bonseScript+Node.jsだけでハードウエアをリモートコントロールできるアプリが書けそうである。

JavaScript, Object literal で Private Variable を埋め込む

New とかを使わず、Object literal で object を記述するのがクール.。で、プライベート変数を仕込むには Function を使ってLiteral をReturnするパターンが使える。

var myobje=(function() {
// private変数
var name = "my, oh,my";
//この機能定義は即実行され、以下がまとめてオプジェクトリテラルとして返される。
return {
getName : function () {
return name;
}
};
}());

myobje.getName(); //"my, oh my"

おぷじぇくとの外部からはこのname という変数は直接いじれない。 function 内部の変数はファンクションが実行された後でも、内部に残っている、というClosure と呼ばれる性質を使った技。

JavaScriptで動く将棋盤のページを作る。コンセプトの整理

あらためて、考え方を整理してみる。

Webページは HTMLファイル、CSSファイル、JavaScriptファイルという三つの構成要素から成り立っている。そこで今回試作したページのすみわけを考えると以下のようになる。

html ファイル:将棋盤の入れ物を定義し、CSS,JavaScriptファイルにリンクさせる。
CSSファイル:将棋盤と駒の表示の仕組みを定義する。これをHTMLのエレメントの属性に対するスタイル定義で行う。
JavaScriptファイル: 将棋盤の初期配置と駒の動きのデータ、および、駒を初期配置の通りに並べて表示し、駒を動かす関数およびボタンの表示。 データ部分と機能部分を分けて二つのファイルで構成するようにする。
JavaScriptでも”描画”作業は行っていない。WebのDOM(DataObjectModel)を操作してHTMLのエレメント属性を変更させているだけで、あとはブラウザにお任せである。
一度画像データをサーバーから読み込めばデータがローカルにキャッシングされる。ブラウザとしては初期画面で盤と駒のデータを読み込んだあとは時々成り駒のデータをダウンロードしにいくだけなので、作画速度で目に見えるような遅れはない。
Web page を表示するためには将棋の盤、マス目、各コマの画像データの他に
filename.html
shogiboard.css
boarddata.js
boardfunction.js
の4つのファイルが必要、boarddata.jsに棋譜データを書き込んで動きを指定する、ということになる。実際にはboarddata01.js, boarddata02.js などと作っておいて、html からのリンク先指定を変えてやるような操作になる。
HTML内部、JavaScriptへのリンク部分
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<script src="boardfunction.js"></script> 
<script src="boarddata01.js"></script>
HTML内部、CSSファイルへのリンク部分
<link href="shogiboard.css" rel="stylesheet">
ところで、
この将棋盤、自分のサイトに表示するには少し大きすぎる。
もっと小さい画像データがないかなあ、と思っていたのだが、CSSでイメージをスケーリングすれば解決できることに気が付いた。 Cascaded Style Sheet は変更部分だけ記述すれば、最後に置かれた記述が依然の記述を書き換えるので
約65%のスケールダウンには以下のような内容のCSSファイルをリンク先に追加すればよい。
.board {width:286px; height: 312px;} 
.komadai {width:100px; height:150px;} 
.komadai img,.koma, .marker {width:30px; height:33px;} 
.comment {padding-left:7px; width:450px;min-height:100px;}
#boardbase {width:323px; height:337px;} 
.c1 {left:258px;} .c2 {left: 228px;} .c3 {left:198px;} 
.c4 {left:168px;} .c5 {left: 138px;} .c6 {left:108px;} 
.c7 {left:78px;} .c8 {left: 48px;}  .c9 {left: 18px;} 
.r1 {top:17px;}   .r2 {top:50px;}    .r3 {top:83px;} 
.r4{top:116px;}   .r5{top:149px;}    .r6 {top:182px;} 
.r7{top:215px;}   .r8{top:248px;}    .r9{top:281px;}
このファイル名、shogiboard-small.css とすれば HTML内部、CSSファイルへのリンク部分は
<link href="shogiboard.css" rel="stylesheet">
<link href="shobiboard-small.css rel="stylesheet">
となる。
動くサンプルはこちら
下にファイルと機能のまとめをマインドマップで整理したものをリンクしておく