Web記事向け実行結果表示ヘルパーJavascriptライブラリ
こちらはWeb記事向け実行結果表示ヘルパーJavascriptライブラリのダウンロードページです。
本スクリプトは、JQueryが必要ありません。
特徴：
このスクリプトはボタンが押されたことを検知して、ユーザーが作成したコードを実行します。
ユーザーが作成したコードから、簡単な操作でWeb記事上に任意のテキストを表示することができます。
ボタンと結果表示エリアは、表示したい位置にタグを記述することで、自動で挿入されます。
サンプル：
1 + 1 は？
サンプル：
1 + 1 は？
サンプル：
JavaScriptコード
console.log( "start" );
const timeoutId = setTimeout(
()=>{ console.log( "2秒経過" ) ;clearTimeout(timeoutId);}
,2000
);
console.log( "end" );
使用規約：本ライブラリを使用する場合、次の事項に同意されたものとみなします。
1) 本ライブラリは無償で提供されるものであり、完全な動作を保証するものではありません。
2) 本ライブラリ使用によるいかなる損害について、本プログラムの作成者は一切の責任を負いません。
3) 本ライブラリはJavascriptがオフになっているブラウザでは、動作しません。
3) 本ライブラリはAMP(Accelerated Mobile Pages)では使用できません。
ダウンロード：affi-clip-copy.zip (v1.0)
使用方法
1) 本ツールをダウンロード後解凍をし、jsとcssファイルをサーバーにアップロードしてください。
2) htmlファイルに、jsとcssファイルを適用します。
例：
<link rel="stylesheet" href="https://ドメイン/css/affi-runcode-helper.css" type="text/css">
<script src="https://ドメイン/js/affi-runcode-helper.min.js" type="text/javascript"></script>
3) ボタンを押したときに実行されるスクリプトを記述します。
スクリプトについてをご覧ください。
4) htmlファイルに、専用タグを記述します
htmlタグについてについてをご覧ください。
スクリプトについて
(1) 次のひな型コードを、affi-runcode-helper.min.jsの読み込み後に記述します。
ユーザー定義スクリプトひな型：
<script>
(()=>{
const robj = window.affisapo.runCodeHelper.initial();
robj.func1 = function ( button_index , button_text ) {
this.clear();
this.addText = "text" ;
};
window.affisapo.runCodeHelper.execute( robj );
})();
</script>
(2) robj.func1に、ボタンが押されたときに実行されるJavaScriptコードを記述します。
メソッド名func1は変更可能です。他の名前でもかまいません。
呼び出されるメソッドは、次の二つの引数を持ちます。
引数：
button_index ... ボタンの番号(0～)
button_text .. ボタンに表示されているテキスト
メソッド内では、二つの専用メソッドを使用できます。
専用メソッド：
this.clear() ... 表示エリアをクリア
this.addText = "文字列" ... 表示エリアに文字列を行で追加
スクリプト例：
2秒待つスクリプト
<script>
(() => {
const robj = window.affisapo.runCodeHelper.initial();
robj.func1 = function ( button_index , button_text ) {
this.clear();
this.addText = "start" ;
const timeoutId = setTimeout(
()=>{
this.addText = "2秒経過" ;
clearTimeout(timeoutId);
},2000);
this.addText = "end" ;
};
window.affisapo.runCodeHelper.execute( robj );
})();
</script>
htmlタグについて
html上でボタンを設置したい位置に、次のタグを記述します。
<div class="runcode-helper" data-func="func1" data-text="ボタン名"></div>
■class="runcode-helper"
クラス名にruncode-helperと記述されているものが、対象として認識されます。
■data-func="func1"
ボタンを押したときに実行されるメソッド名です。
■data-text="ボタン名"
ボタンに表示される文字列です。
カンマで区切ることで、複数のボタンが設置されます。
例：
data-text="ボタン1,ボタン3,ボタン2"
■data-height="50px"(オプション)
結果表示エリアの高さを、個別に設定します。
■data-div="divID"(オプション)
既存のdiv要素を、表示エリアとして使用します。
divIDは、既存のdiv要素のIDです。
またdivIDに"no"を設定すると、表示エリアを挿入しません。
※タグは複数設置可能です。
カスタマイズ
affi-runcode-helper.cssの内容です。
Webページの雰囲気に合わせて、変更してください。
div.runcode-helper .blackbox { // 表示エリア外観
border: 1px solid #777;
background: black;
padding: 1em;
height: 5em;
color: white;
overflow: auto;
}
div.runcode-helper button{ // ボタン外観
}
