https://funabashi-multilingual.info/js/kanaboweb_s.1.0.7.js

1//---------------------------------------------------------------------------
2// KanaboWeb S JavaScript for Client v1.0.7
3// kanaboweb_s.1.0.7.js
4//
5// (C)Copyright WAC.com inc. All Rights Reserved.
6//---------------------------------------------------------------------------
7// KanaboWeb.execCommand( command, params )
8//		command : 'on' / 'off' / 'toggle'
9//		params : reserved
10// KanaboWeb.isTranslated() : true/false
11//---------------------------------------------------------------------------
12// v1.0.0 2019/01/15 RTM
13// v1.0.1 2019/01/18 変換後にdocument.titleを戻す
14// v1.0.2 2019/02/06 onTranslatedイベントの追加、スクリプトのリロード関数追加
15// v1.0.3 2019/02/15 プログレスの表示、アンカー#対応
16// v1.0.4 2019/03/28 プログレスの表示スタイル設定
17// v1.0.5 2019/09/19 onReceivedイベントの追加
18// v1.0.6 2019/11/12 Cokkie パラメータの有効化
19// v1.0.7 2019/11/25 ヘッダー/フッターをはずす
20
21
22
23//-------------------------------------------------------
24// かな棒くんWebS クラス
25//-------------------------------------------------------
26
27function KanaboWebSClass()
28{
29	//-------------------------------------------------------
30	// プロパティ
31	//-------------------------------------------------------
32	this.host_id = "";	// ホスト識別子
33	this.host_url = "";	// unused
34
35
36	this.host_names = [location.hostname];
37	
38	this.progress_style="top:50px;width:200px;height:36px;";
39	this.progress_top="top:50px;";		
40	this.progress_color="color:white;";
41	this.progress_background_color="background-color:rgba(39,137,179,0.7);";
42
43	this.cookie = new CookieClass();
44	this.cookieName = "KBW_PARAMS";
45	// パラメータ 例）'kb_lv=0&kb_md=0&kb_sz=70%&kb_ft=custom'
46
47
48
49	//-------------------------------------------------------
50	// コマンドの実行	cmd:toggle/on/off
51	//-------------------------------------------------------
52	this.execCommand = function( cmd, params )
53	{
54		try {
55			if( params != "" && params != undefined ) {
56				this.cookie.setValue(this.cookieName, params, 1);			
57			} else {
58				this.cookie.deleteValue(this.cookieName);
59			}
60
61			switch( cmd )
62			{	
63				case "toggle" : 
64				{
65					if( this.isTranslated() == true )
66					{
67						this.reset();
68					}
69					else
70					{
71						this.reload("furigana=on");
72					}
73				} break;
74				case "off" :
75				{
76					this.reset();
77				} break;
78				case "on" :
79				{
80					this.reload("furigana=on");
81				} break;
82				default :
83				{
84					this.reload("furigana=on");
85				} break;
86			}
87
88		} catch ( e ) {
89		
90		}
91	}
92
93	//-------------------------------------------------------
94	// ページのパラメータがfurigana=onの場合ふりがな変換を実行
95	//-------------------------------------------------------
96	this.start = function()
97	{
98		try {
99			_TRACE( "start function called." );
100	
101        		// パラメータの取得
102			var url_params = _getUrlParams();
103
104			// ?furigana=onの場合にふりがな変換
105			if( url_params.furigana == "on" ) {
106				var kb_params = this.cookie.readValue(this.cookieName);
107				this.translate(kb_params);          
108			}
109			
110	
111		} catch ( e ) {
112
113			_TRACE( "Error : start function failed." );
114	    	}
115	}
116
117	//-------------------------------------------------------
118	// ふりがな変換の実行
119	//-------------------------------------------------------
120	this.translate = function(params)
121	{
122		try {
123			_TRACE("translate function started.");
124
125
126			// かな棒くんWebSへのリクエストURLの作成
127			if( this.host_id == "" ) {
128				_TRACE( "Error : host_id not found." );
129				return;
130			}
131			var dir = this.host_id.replace(".","/");
132			var url = location.protocol + "//furigana.kanabo.com/s/cloud/" + dir + "/default.ashx?kb_bodyonly=true&kb_ht=none&kb_ft=none&kb_id=" + this.host_id +"&";
133			if( params != undefined )
134			{
135				url = url + params;
136				url = url + "&";
137			}
138			
139			// location.hrefからfurigana=onを省く
140			var target = _removeUrlParam(location.href,"furigana=on");
141						
142			// リクエストURL
143			var requestURL = url + "kb_url=" + target;
144
145			_TRACE( "requestUL = " + requestURL );
146
147			_this = this;
148			xhr = _createXMLHttpRequest();
149			xhr.onload = function(ev) {
150				if (xhr.status == 200) { 
151					_this.onReceiveHtml(ev, _this.onReceived, _this.onTranslated);
152
153				} else {
154					// プログレスを非表示にする。
155					_showProgress(false);
156
157					_TRACE( "Error : " + xhr.status + " server error." );
158				}
159			};
160			xhr.open("get",requestURL, true);
161			xhr.responseType = "document";			
162			xhr.send();
163
164			
165			// プログレスを表示する
166			_showProgress(true);
167
168		} catch ( e ) {
169
170			// プログレスを非表示にする
171			_showProgress(false);
172
173			_TRACE( "Error : translate function failed." );
174		}		
175	}
176
177
178
179
180	
181
182	//-------------------------------------------------------
183	// 変換結果のHTMLを受信した
184	//-------------------------------------------------------
185	this.onReceiveHtml = function(event, callback1, callback2) 
186	{
187		try {
188			var dom = event.target.responseXML;
189
190			// 現在のドキュメントのタイトルを保持
191			var title = document.title;
192
193			// ドキュメントを差し替える前に通知
194			if( callback1 != null ) {
195				callback1();
196			}
197
198			// 現在のドキュメントを差し替える
199			var htmlText = dom.querySelector("body").innerHTML;
200			_TRACE(htmlText);
201			document.body.innerHTML = htmlText;
202
203
204			//  bodyにクラス"furigana"を追加する
205			document.body.classList.add("furigana");
206
207			// リンクの調整
208			var elems = document.getElementsByTagName("A");
209			for( var i = 0; i < elems.length; i++ ) {
210				var a = elems[i];
211				var href = a.href;
212
213				// kb_urlが含まれていてそのURLが登録してあるホスト名と同じ場合
214				// kb_url + furigana=onパラメータを追加して差し替える
215
216				var s = href.indexOf("kb_url=");
217				if( s > -1 ) {
218					// kb_url=以下を切り出し
219					href = href.slice(s+7);
220
221					// かな棒くんWebSが埋め込んである有効なホスト名の場合はfurigana=onを追加
222					for( var j = 0; j < this.host_names.length; j++ ) {
223						var host_name = this.host_names[j];
224
225						// ホスト名が一致
226						if( href.indexOf(host_name) > -1) {
227							// furiganaパラメータの有無
228							if( href.indexOf("furigana=on") > -1 ){								
229								a.href = href;
230
231							} else {
232								// クエリー(?)がある場合はパラメータを後ろに追加
233								if( href.indexOf("?") > -1 ) {
234									href = href + "&furigana=on";
235								} else {
236									// アンカー(#)がある場合はアンカーを後ろに差し替える									
237									var idx = href.indexOf("#");
238									if( idx == -1 ) {
239										href = href + "?furigana=on";
240									} else {
241										var pair = href.split("#");
242										href = pair[0] + "?furigana=on" + "#" + pair[1];
243									}
244								}
245								a.href = href;
246							}
247						}
248					}
249				}
250			}
251
252			// タイトルを戻す
253			document.title = title;
254
255			// ふりがな変換完了のコールバックを実行
256			if( callback2 != null ) {
257				callback2();
258			}
259
260			_TRACE( "OK : translate function suceeded." );
261
262
263		} catch ( e ) {
264
265			_TRACE( "Error : onReceiveHtml event failed." );
266		}
267
268	}
269
270
271	//-------------------------------------------------------
272	// レスポンスの受信イベントハンドラ（オーバーライド可）
273	//-------------------------------------------------------
274	this.onReceived = function() {
275		_TRACE("KanaboWeb.onReceiveResponse");
276		return true;
277	};
278
279	//-------------------------------------------------------
280	// よみがな変換完了イベントハンドラ（オーバーライド可）
281	//-------------------------------------------------------
282	this.onTranslated = function() {
283		_TRACE("KanaboWeb.onTranslated.");
284	};
285
286
287	//-------------------------------------------------------
288	// ふりがな変換判定
289	//-------------------------------------------------------
290	this.isTranslated = function()
291	{
292		try {
293			// ドキュメントのbodyに"furigana"クラスが存在するかどうか
294			return document.body.classList.contains("furigana");
295
296		} catch( e ) {
297
298			_TRACE( "Error : isTranslated function failed." );
299		}
300		return false;
301	}
302
303	//-------------------------------------------------------
304	// ふりがな実行 リロード furigana=on
305	//-------------------------------------------------------
306	this.reload = function()
307	{
308		try {
309			// 現在のページのURLを取得
310			var url = window.location.href;
311
312			// urlにfurigana=onを追加
313			url = _addUrlParam(url,"furigana=on");
314
315			// ページの再読み込み
316			window.location.href = url;
317
318
319		} catch ( e ) {
320
321			_TRACE( "Error : reload function failed." );
322		}
323	}
324
325	//-------------------------------------------------------
326	// ふりがなをはずす
327	//-------------------------------------------------------
328	this.reset = function()
329	{
330		try {
331			// 現在のページのURLを取得
332			var url = window.location.href;
333
334			// urlからfurigana=onを省く
335			url = _removeUrlParam(url,"furigana=on");
336
337
338			// ページの再読み込み
339			window.location.href = url;
340	
341		} catch ( e ) {
342
343			_TRACE( "Error : reset function failed." );
344		}
345	}
346
347	//-------------------------------------------------------
348	// ホスト名の追加
349	// かな棒くんWebSが埋め込んである該当ホスト名のページでも
350	// リンクを有効にする
351	//-------------------------------------------------------
352	this.addHostName = function( host_name )
353	{
354		try {
355			this.host_names.push( host_name );
356
357		} catch ( e ) {
358
359			_TRACE( "Error : addHostName function failed." );
360		}
361	}	
362}
363
364
365
366//-------------------------------------------------------
367// Create KanaboWebS Object
368//-------------------------------------------------------
369var KanaboWeb = new KanaboWebSClass();
370
371//-------------------------------------------------------
372// Override function
373//-------------------------------------------------------
374function _originalPage() {
375	KanaboWeb.reset();
376}
377
378
379//-------------------------------------------------------
380// Cookie Control Class
381//-------------------------------------------------------
382function CookieClass()
383{
384	// Cookie Settings
385	this.host_id = "";
386	this.path = "/";
387	// Cookie avaliable duration (Default 2days)
388	this.avaliableDuration = 2;
389
390	
391	
392	//---------------------------------------------
393	// Create New Cookie
394	//---------------------------------------------	
395	this.setValue = function( name, value, days)
396	{
397		if (!days)
398		{
399			days = this.avaliableDuration;	
400		}
401			
402		var date = new Date();
403		date.setTime( date.getTime() + ( days * 24 * 60 * 60 * 1000 ) );
404		var expires = "; expires=" + date.toGMTString();
405		
406		document.cookie = name + "=" + escape(value) + expires + "; path=" + this.path ;
407	};
408	
409	//---------------------------------------------
410	// Read item data from Cookie
411	//---------------------------------------------	
412	this.readValue = function( name )
413	{
414		var cookieName = name + "=";
415		var cookieDataArray = document.cookie.split(';');
416	  
417		for(var i=0 ; i < cookieDataArray.length ; i++) 
418		{
419			var cookieItem = cookieDataArray[i];
420			while (cookieItem.charAt(0)==' ')
421			{
422				cookieItem = cookieItem.substring(1, cookieItem.length);
423			}
424	    
425			if (cookieItem.indexOf(cookieName) == 0) 
426			{
427				return cookieItem.substring(cookieName.length, cookieItem.length);
428			}
429		}
430	  
431		return null;
432	};
433	
434	//---------------------------------------------
435	// Delete item data from Cookie
436	//---------------------------------------------		
437	this.deleteValue = function( name )
438	{
439
440		if(this.readValue(name))
441		{
442			//document.cookie = name + '='+ escape(100) + '; expires=Thu, 01-Jan-70 00:00:01 GMT;path=' + this.cookiePath;
443			document.cookie = name + '=; expires=Thu, 01-Jan-70 00:00:01 GMT;path=' + this.cookiePath;
444		}
445	};
446	
447	//---------------------------------------------
448	// Get item from Cookie
449	//---------------------------------------------
450	this.getItem = function( startPosition )
451	{
452		var endPosition = document.cookie.indexOf(";", startPosition);
453		if(endPosition == -1)
454		{
455			endPosition = document.cookie.length;
456		}
457		return unescape(document.cookie.substring(startPosition, endPosition));
458	}
459	
460
461}
462//-------------------------------------------------------
463// Utility functions 
464//-------------------------------------------------------
465
466// 開発者ツールのコンソールに表示
467function _TRACE( message ) {
468	console.log( "[KanaboWeb S] : " + message );
469}
470
471// XMLHttpRequestを生成
472function _createXMLHttpRequest(){
473	if(window.XMLHttpRequest){return new XMLHttpRequest()}
474	if(window.ActiveXObject){
475		try{return new ActiveXObject("Msxml2.XMLHTTP.6.0")}catch(e){}
476		try{return new ActiveXObject("Msxml2.XMLHTTP.3.0")}catch(e){}
477		try{return new ActiveXObject("Microsoft.XMLHTTP")}catch(e){}
478	}
479	return null;
480}
481
482// URLに指定したパラメータを追加する
483function _addUrlParam( url, param ) {
484	var ret = url;
485
486	try {
487
488		if( param == null || param == "" )
489			return ret;
490
491		// すでにパラメータが追加されていたらそのまま
492		if( ret.indexOf(param) > -1 ) {
493			return ret;
494		}
495
496		if( ret.indexOf("?") > -1 ) {
497			// クエリーがすでにある場合はパラメータを先につける
498			ret = ret.replace( "?", "?"+param+"&" );
499
500		} else {

501			// クエリーがない場合はパラメータをつける
502			idx = ret.indexOf("#");
503			if( idx == -1 ) {
504				ret = ret + "?" + param; 
505			} else {
506				// アンカーがあった場合は後ろに差し替える
507				var pair = ret.split("#");
508				ret = pair[0] + "?" + param + "#" + pair[1];
509			}
510		}
511
512	} catch ( e ) {
513	
514		_TRACE( "Error : _addUrlParam function failed." );
515	}
516
517	return ret;
518}
519
520
521
522
523
524
525// URLから指定したパラメータを取り除く
526function _removeUrlParam( url, param ) {
527	var ret = url;
528	try {
529		// urlからfurigana=onを省く
530		ret = ret.replace("&" + param, "");
531		ret = ret.replace("?" + param + "&","?");
532		ret = ret.replace("?" + param, "");
533
534	} catch ( e ) {
535
536		_TRACE( "Error : removeUrlParam function failed." );
537	}
538
539	return ret;
540}
541
542// URLからパラメータを取得
543function _getUrlParams() {
544	var urlParams = new Object;
545		
546	try {
547		var pair=location.search.substring(1).split('&');
548
549		_TRACE("query parameter:" + location.search);
550        	for(var i=0;pair[i];i++) {
551            		var kv = pair[i].split('=');
552            		urlParams[kv[0]]=kv[1];
553        	}
554
555	} catch (e) {
556		_TRACE( "Error : _getUrlParams function failed." );
557	}
558	return urlParams;
559} 
560
561
562// スクリプトをリロードする
563function _reloadScript(filename) {
564	try {
565		_TRACE("_reloadScript(" + filename + ")" );
566
567		var script = document.createElement( 'script' );
568
569		script.type = 'text/javascript';
570		script.src = filename;
571
572		var firstScript = document.getElementsByTagName( 'script' )[0];
573		firstScript.parentNode.insertBefore( script, firstScript );
574
575	} catch ( e ) {
576
577		_TRACE( "Error : reloadScript(" + filename + ")function failed." );
578	}
579}
580
581
582// イベントを発火する
583function _triggerEvent(element, event) {
584	try {
585		_TRACE("_triggerEvent(" + element + "," + event + ")" );
586		if (document.createEvent) {
587			// IE以外
588			var evt = document.createEvent("HTMLEvents");
589			evt.initEvent(event, false, true ); // event type, bubbling, cancelable
590			return element.dispatchEvent(evt);
591		} else {
592			// IE
593			var evt = document.createEventObject();
594			return element.fireEvent("on"+event, evt)
595		}
596	} catch ( e ) {
597
598		_TRACE( "Error : _trigerEvent function failed." );
599	}
600}
601
602var _ID_KANABO_PROGRESS = "kanaboProgress";
603
604// プログレスを表示する
605function _showProgress(show) {
606	try {
607		_TRACE("_showProgress(" + show + ")");
608
609		var progress = document.getElementById(_ID_KANABO_PROGRESS);
610		if (progress) {
611			if( show ) {
612				progress.style.display="block";
613			} else {
614				progress.style.display="none";	
615			}
616		} else {
617			if( show ) {
618				//プログレスを生成
619				progress = document.createElement("div");
620				progress.setAttribute("id",_ID_KANABO_PROGRESS);
621
622
623				var progressStyle = "position:absolute;z-index:256;left:50%;margin-left:-100px;align:center;padding-top:15px;text-align:center;border-radius:7px;"
624					+ KanaboWeb.progress_style
625					+ KanaboWeb.progress_color
626					+ KanaboWeb.progress_background_color;
627
628
629
630				progress.setAttribute("style",progressStyle);
631				progress.innerHTML="<div>ふりがな変換中...</div>";
632
633				var element = document.body;
634
635				element.insertBefore(progress,element.nextSibling);
636
637			}
638		}
639
640	} catch (e) {
641
642		_TRACE( "Error : _showProgress function failed." );
643	}
644}
645
646
647//-------------------------------------------
648// EventHandler
649//-------------------------------------------
650
651try
652{
653	// ページの読み込みイベント
654	if( typeof jQuery != "undefined" ) {
655		// JQueryが読み込まれている場合は$document.readyを使用する
656		jQuery(document).ready(function() {
657			KanaboWeb.start();
658		});
659
660	} else {						
661		window.addEventListener('load', function(event) {
662			KanaboWeb.start();
663		},false);
664	}
665
666} catch ( e ) {
667
668}
669
670
671//-------------------------------------------------------
672//-------------------------------------------------------
673
674