<?lc put header "Content-Type: text/html; charset=utf-8" ?>
<html>
<head>
<title>インターラクティブ 奥の細道 俳句仮名 縦書き スピーチ</title>
<style type="text/css">
a:link {color: #333; text-decoration: none; }
a:visited {color: #333; }
/*a:hover {color: #999; }
*/
a:active {color: #999; }
.bodyS { color: #333; font-size: 11px; font-family: SunSans-Regular, sans-serif; line-height: 14px }
.body {font-size:16px; font-family: cursive; } /* 明朝体 */
#container{ font-size:24px; font-family: cursive; position: relative; margin: 0 auto; text-align: center; width: 760px; }
</style>
</head>
<?lc include "script.lc" ?>
<body>
<span class="bodyS">
<!-- Donation -->
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="5674LWXYW23ZC">
<input type="image" src="http://kenjikojima.com/donation/donateBW.png" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">ドネーションをよろしく
</form>
<!-- END Donation-->
<a href="http://kenjikojima.com" target="_blank">kenjikojima.com</a>
<a href="mailto:index@kenjikojima.com">index@kenjikojima.com</a>
</span>
</span>
<div id="container">
<br>
<?lc
--プログラミング言語は LiveCodeで書いています。
-- データを読み込む
get url ("file:kanaHosomichi.txt")
set itemDel to comma
-- 上句 候補五句
repeat with i= 1 to 12 step 3
put any line of it into tLine
put item 1 of tLine into tWord1
put tWord1 & "／" after allWord1
put char i to (i+ 2) of tWord1 after tKami
end repeat
put tKami & "（ ） " into tKami1
-- 中句 候補七句
repeat with i= 1 to 18 step 3
put any line of it into tLine
put item 2 of tLine into tWord2
put tWord2 & "／" after allWord2
put char i to (i+ 2) of tWord2 after tNaka
end repeat
put tNaka & "（ ） " into tNaka1
-- 下句 候補五句
repeat with i= 1 to 12 step 3
put any line of it into tLine
put item 3 of tLine into tWord3
put tWord3 & "／" after allWord3
put char i to (i+ 2) of tWord3 after tShimo
end repeat
put tShimo & "（ ） " into tShimo1
put "<span class='container'>奥の細道 俳句仮名 読み上げ</span><br>"
put "<span class='bodyS'>奥の細道の俳句に使われている言葉の音の位置から五・七・五を選んで俳句を作ります。<br>" & \
"下の縦組みの俳句をクリックすると新しい句が作られます。<br>上五句：" & \
allWord1 &"<br>中七句："& allWord2 &"<br>下五句："& allWord3 &"</span><br><br>"
-- 最も長い句の文字数を得る
put max(the num of chars of tKami, the num of chars of tNaka, the num of chars of tShimo) into tMax
-- 長い文字数に空白を揃える
repeat with i = 1 to tMax
if the num of chars of tKami<= tMax then put " " after tKami
if the num of chars of tNaka <= tMax then put " " after tNaka
if the num of chars of tShimo <= tMax then put " " after tShimo
end repeat
-- 文字数を3ステップごとに纏めてゆく
repeat with i=1 to tMax step 3
-- put char i to i + 2 of tSaku & " " after tHaiku
put char i to i + 2 of tShimo & " " after tHaiku
put char i to i + 2 of tNaka & " " after tHaiku
put char i to i + 2 of tKami & "<br>" &cr after tHaiku
end repeat
put "<a href='javascript:void(0)' onclick='window.location.reload()'>"
put cr&cr& "<script>" &cr& "let uttearnce = new SpeechSynthesisUtterance();" &cr \
& "uttearnce.text = '" & tKami1 && tNaka1 && tShimo1 &"'; " &cr \
& "uttearnce.volume = 1;" &cr& "uttearnce.rate = 0.8;" &cr& "uttearnce.pitch = 0.8;" &cr \
& "uttearnce.lang = 'ja-JP'" &cr& " window.speechSynthesis.speak(uttearnce);" &cr& "</script>" &cr&cr
-- HTMLに出力
put tHaiku &"</a><br>"
put $_SERVER[HTTP_USER_AGENT] into tBrowser
if tBrowser contains "Firefox" then
put "<span class='bodyS'><input type='button' value='▶俳句を読む︎' id='btn'></span>" &cr
put cr&cr& "<script>" &cr& "function butotnClick(){" &cr \
& "let uttearnce = new SpeechSynthesisUtterance();" &cr \
& "uttearnce.text = '" & tKami1 && tNaka1 && tShimo1 &"'; " &cr \
& "uttearnce.volume = 1;" &cr& "uttearnce.rate = 0.8;" &cr& "uttearnce.pitch = 0.8;" &cr \
& "uttearnce.lang = 'ja-JP'" &cr \
& " window.speechSynthesis.speak(uttearnce);" &cr& " }" &cr \
& "let button = document.getElementById('btn');" &cr& "button.addEventListener('click', butotnClick);" &cr \
& "</script>" &cr&cr
else
if tBrowser contains "Safari" and tBrowser contains "Chrome" then
put "<span class='bodyS'><input type='button' value='▶俳句を読む︎' id='btn'></span>" &cr
put cr&cr& "<script>" &cr& "function butotnClick(){" &cr \
& "let uttearnce = new SpeechSynthesisUtterance();" &cr \
& "uttearnce.text = '" & tKami1 && tNaka1 && tShimo1 &"'; " &cr \
& "uttearnce.volume = 1;" &cr& "uttearnce.rate = 0.8;" &cr& "uttearnce.pitch = 0.8;" &cr \
& "uttearnce.lang = 'ja-JP'" &cr \
& " window.speechSynthesis.speak(uttearnce);" &cr& " }" &cr \
& "let button = document.getElementById('btn');" &cr& "button.addEventListener('click', butotnClick);" &cr \
& "</script>" &cr&cr
else
if tBrowser contains "Safari" is false then
put "<span class='bodyS'><input type='button' value='▶俳句を読む︎' id='btn'></span>" &cr
put cr&cr& "<script>" &cr& "function butotnClick(){" &cr \
& "let uttearnce = new SpeechSynthesisUtterance();" &cr \
& "uttearnce.text = '" & tKami1 && tNaka1 && tShimo1 &"'; " &cr \
& "uttearnce.volume = 1;" &cr& "uttearnce.rate = 0.8;" &cr& "uttearnce.pitch = 0.8;" &cr \
& "uttearnce.lang = 'ja-JP'" &cr \
& " window.speechSynthesis.speak(uttearnce);" &cr& " }" &cr \
& "let button = document.getElementById('btn');" &cr& "button.addEventListener('click', butotnClick);" &cr \
& "</script>" &cr&cr
else
if tBrowser contains "Safari" and tBrowser contains "Mozilla" then
put "<span class='bodyS'>" &cr& \
"Safariは 俳句仮名の音声読み上げはできません<br>" &cr& "</span>"
end if
end if
end if
end if
?>
</div>
</body>
</html>