"G-saku" blue sky web e-book Ver2.0-en

【Notification 2017.03.04】For the products of this tool, we are in the process of preparing Terms of Use. For the time being, please use html created only within your terminal. It takes time to make, to eat something to survive, to eat something good, but also to fun funk, but thank you for your understanding.

日本語で書くと、時間をかけてつくったし、何か食べるから、という自動翻訳で…大丈夫かなぁ。Google任せ。まっ、いいかぁ。

Introduction
How do use it?
simple exsample(4 steps),
one page in full text
♢

Yes, that's the fastest goal ... maybe. Explaining the setting, since it becomes a long sentence, please make "html with feeling what you can do", see the overview of the result.

If you reload this page, you can start from scratch at any time. Although the characters entered in the text area may be left.

Click "How do use it?" again to hide this description.

If you click "simple exsample, one page in full text", only necessary settings are displayed. (1)load text, (2) set title and author (3) click "build G-saku html" to execute, 4 steps, and last homework for html generation.

Click on "G-saku(overview)" and display it as reference below html. The set contents are displayed on the page. Scroll down the overview to see the panel. The displayed content is different from the actual panel, but let's look at the table of contents. In this example, there is one sheet on the page, and a table of contents link is generated in the first paragraph of the first sheet. There is one link button.

The first sheet? In this example, since it is a single sheet, it can be described as the first paragraph of this sheet, but you can divide the sheet by setting the table of contents.

load text
drop [book text(UTF-8)] file
select [book text(UTF-8)] file

When reading the file, Specify all text as a range, Make the first paragraph the table of contents of the page.

If you set the title and author and build it, you can create 1 sheet of html.

You can also load a file after turning on "using mark" and setting a character string.

In this case, the table of contents is generated with the page top and the paragraph specified by the mark.

range specification of text
first line of text
?s_tob?
last line of text
?e_tob?

If you want to change, Click on the button to turn it on, then click the "Text View & Pickup" paragraph.

A blue mark appears on the left side of the paragraph.

title and author
title
?title?
author
?author?

After turning on the button, click the paragraph "Text View & Pickup", the text of the paragraph will be displayed in the text area.

You can edit the picked up string. You can also type directly into the text area.

contents range or extract from text
first line of contents
?s_con?
last line of contents
?e_con?
^[0-9０-９]+$
using mark
number begins with number begins with (number) begins with specified string

If the table of contents is written in the text, you can specify the range of the table of contents.

To specify the range, click the paragraph after the button is turned on. the horizontal green mark is displayed.

From the full text, you can also extract the table of contents with "using mark" condition.

Turn on the "using mark" button and select condition extraction.

Select "number", "begins with number", "begins with (number)"to display the regular expression text.You can use it as is, or edit the text.We compare the paragraph and text regular expressions and extract the table of contents.

Select "begins with specified string" to compare paragraph and text strings. If the specified character string is included at the beginning of the paragraph, it becomes the table of contents.

If conditions can not be set, you can edit the text and mark up with the same string (for example, ) to create a table of contents. See the description of "delete mark".

generate contents
delete space
delete mark
generate contents

If "delete blanks" is checked, spaces before and after the paragraph are deleted. Contiguous whitespace characters are replaced by a space character.

When "delete mark" is checked, when extracting the table of contents with the character string specification, the character string is deleted from the beginning of the paragraph.If you specify a number with "?num?", The string is not deleted. You can delete marks added for table of contents extraction.

To generate the Table of Contents, click "generate contents". The table of contents is displayed in "edit contents".

edit contents
▽
?cont?
change item text
insert before
insert after
delete item

You can display the table of contents in "text view & pickup" with the ▽ button. When you press the △ button, the table of contents is displayed in "edit contents".

When you select an item from the table of contents, it appears in the text area. You can change the text of the table of contents by clicking "change item text".

After clicking on "insert before" "insert after" and clicking the paragraph, you can add the table of contents before and after the selected item.

Click "delete item" to delete the selected item.

text view & pickup
contents link

Paragraphs specified in the table of contents will be centered and displayed in red letters.

Click "contents link" and turn on, then click the paragraph to turn on / off the table of contents settings.

Please specify as many paragraphs as the table of contents. When extracted with a character string, this is already set.

build G-saku html
select text
build G-saku html
G-saku(overview)

Click "select text" to select all generated html.

Click "build G-saku html" to generate G - saku html.G-saku, ji-sa-ku, which means self-made in Japanese, may be good if G is blooming, aside.

Click "G-saku(overview)" to see the generated html display. Button etc. do not work properly.

Just a little more
If you do this, Logotype G-saku(あおそらまめページ自作) html will be completed.
　1. Copy text, paste in text file, change !--/body-- !--/html-- comment at the end of the text, to /body and /html.
　2. Add the link of your page to the list of id="menu", if necessary.
　3. Save the file with UTF-8 html.
… A page has been created. congratulations.

<body>
	<div id="page">
		<div id="logohead">
			<ul id="menusc">
				<li class="meknow">
					<h1>Welcome to blue sky web e-book of Logotype. (Please skip by pressing the Tab key if you have already read.)</h1>
					<p>This text does not appear on the screen. Using a screen reader, I will briefly explain supplementary information for reading this page.</p>
					<p>After this text, at the top of the page, 、There is a shortcut linked list of "contents","text of book","bookmark".</p>
					<p>Tab key is limited to what can be used for screen reader browsing by reading aloud.</p>
					<p>For example, do you want to resize the font by pressing the button? . that's it. It is not information discrimination. just kidding. For that reason, we reduced the number of buttons assigned to the Tab key.</p>
					<p>The function of this page is Javascript. If the script is running, you can do the following.</p>
					<p>(1)If you use the link to the top of the page, or use Ctrl + Home key to display the top of the page, Tab also returns to the list at the top of the page. You can return to the list at the top of the page at any time.</p>
					<p>(2)Move to the preceding and following paragraphs with the ↑ ↓ key and move to the front and back table of contents (sheet) with Alt + ↑ · Alt + ↓ key. For these key operations, I think that the operation of the screen reader, the browser key will give priority.</p>
					<p>(3)You can send "Shiori" (bookmark) to e-mail, tweets.<br>
						Shiori is text that contains page link information such as book title and author name, various settings of this page, paragraph position and so on.<br>
						When this page is displayed using the page link, the specified paragraph is displayed and the focus is given.<br>
						I think that the screen reader's reading start position will also be the specified paragraph.<br>
						Note: Using the page link will display the address containing the bookmark information, so when you reload the page the page appears in the specified paragraph. It is not at the top of the page.</p>
					<p>(3.1)The opportunity to update Shiori is as follows. Press ENTER in the paragraph. Display the beginning of the item from the table of contents. Move the line with the keyboard arrow.<br>
						It is certain to read the paragraph and update the bookmark by pressing the Enter key.</p>
					<p>(3.2)To set a bookmark, press the "set a bookmark" button.  When you press the button, the bookmarked paragraph is displayed.<br>
						You can use it when you want to check the bookmark.</p>
					<p>(3.3)The bookmark is displayed in the text area, you can edit this text directly. Please use it for checking the contents of the bookmark.<br>
						You can copy and save this text. Paste the bookmark's text here and press the "set a bookmark" button to display the specified paragraph. It is easier to use an address link with bookmark information.</p>
					<p>(3.4)Using the Tweet and Mail buttons opens a send window containing bookmark information.</p>
					<p>(4)There is a voice tool that uses Web voice. When you press the "Voice Tools" button, reading from the bookmark paragraph begins. Sometimes, in some browsers, it's just a matter of stopping.
						If you are using a screen reader, I think it is unnecessary. For your information.</p>
					<p>It was a long sentence, but the explanation ended. The next link is "contents". The "content" link is displayed at the top of the page. You can return home at any time.</p>
				</li>
				<li><a href="#bt02" tabindex="1">contents</a></li>
				<li><a href="#text_book" tabindex="1">text of book</a></li>
				<li><a href="#smame_set" tabindex="1">bookmark</a></li>
				<li id="soratsuka"><a class="foc_cub_fst" href="http://logotypeingen.web.fc2.com/soramame_tsuka_m.html" tabindex="100">manual</a></li>
				<li id="sp5050"><a class="foc_cub_fst" href="http://logotypeingen.web.fc2.com/sp5050.html" tabindex="100">5050</a></li>
			</ul>
			<ul id="menu">
				<li><a tabindex="100">?page link?</a></li>
			</ul>
			<ul id="menu_ctrl" class="ctrlmenu">
				<li id="menu_ctrl_add" class="ctrlmenu_on" tabindex="-1" role="button">ADD<br>panel</li>
				<li id="menu_ctrl_rl" class="ctrlmenu_on" tabindex="-1" role="button">RL<br>panel</li>
			</ul>
		</div>
		<div id="mainview">
			<div id="con_mame" lang="en-US">

</div>
				<h1>to be continued ... Sometimes, depending on the book. From here on, it is a page operation panel, not a book.(Additional note for those reading with screen reader)</h1>
				<h2>(´Д`) Meaning of the site name? AO-SORA-MAME?, AO-SORA = blue sky, SORA-MAME = horsebean ... Because my name is "AO-MAME CCC or SeaSeaSea".</h2>
		</div>
		<div id="menu_ctrl_pnl" class="menu_pnl_on">
			
			<ul id="ctrl_grp" class="menu_pnl_off">
				<li id="ctrl_popmaki" class="circle" tabindex="-1" role="button"><p>▲</p></li>
				<li id="ctrl_shift" class="circle" tabindex="-1" role="button"><p>Sh</p></li>
				<li id="ctrl_nexts" class="nexts_sh circle" tabindex="-1" role="button"><p>⇒</p></li>
				<li id="ctrl_prevs" class="prevs_sh circle" tabindex="-1" role="button"><p>⇒</p></li>
			</ul>
			<div id="sidemenu" class=" foc_fst dsp_sidemenu">
				<ul class="ctrlmenu menu_pnl_off">
					<li id="menu_ctrl_vw" class="ctrlmenu_off" tabindex="-1" role="button">Vw<br>disp</li>
					<li id="smame_ctrl_fonts" class="ctrlmenu_on" tabindex="-1" role="button">G/S<br>f100%</li>
					<li id="smame_ctrl_fsizebU" class="ctrlmenu_bt" tabindex="-1" role="button">Font<br>size↑</li>
					<li id="fsize" class="ctrlmenu_bt" tabindex="-1" role="button">∈:∋<br>100</li>
					<li id="smame_ctrl_fsizebD" class="ctrlmenu_bt" tabindex="-1" role="button">Font<br>size↓</li>
					<li id="smame_ctrl_border" class="ctrlmenu_off" tabindex="-1" role="button">HOV<br>border</li>
					<li id="smame_ctrl_ruby" class="ctrlmenu_on" tabindex="-1" role="button">ADD<br>ruby</li>
					<li id="smame_ctrl_rubycol" class="ctrlmenu_off" tabindex="-1" role="button">COL<br>ruby</li>
					<li id="smame_ctrl_luptop" class="ctrlmenu_on" tabindex="-1" role="button">LINE<br>up?top</li>
					<li id="smame_ctrl_lpostop" class="ctrlmenu_off" tabindex="-1" role="button">LINE<br>pos?</li>
					<li id="smame_ctrl_ScrOn" class="ctrlmenu_on" tabindex="-1" role="button">ScRoll<br>On</li>
					<li id="smame_ctrl_ScrMark" class="ctrlmenu_off" tabindex="-1" role="button">ScRoll<br>Mark</li>
					<li id="smame_ctrl_Amode" class="ctrlmenu_on" tabindex="-1" role="button">AUTO<br>mode</li>
				</ul>
				<h2 id="shiori_book">bookmark</h2>
				<p id="smame_radio">
					<label for="smame_radio1"><input id="smame_radio1" tabindex="-1" type="radio" name="shiori_set" value="0">page setting</label>
					<label for="smame_radio2"><input id="smame_radio2" tabindex="-1" type="radio" name="shiori_set" value="1" checked="checked">Page setting + Line position</label>
					<label for="smame_radio3"><input id="smame_radio3" tabindex="-1" type="radio" name="shiori_set" value="2">Line position</label>
				</p>